implement

client/src/api/implementrule.js

@@ -8,6 +8,13 @@ export function getImplementRuleList(query) {
   })
 }
 
+export function getImplementRule(id) {
+  return request({
+    url: `/certset/implementrule/${id}/`,
+    method: 'get'
+  })
+}
+
 export function createImplementRule(data) {
   return request({
     url: '/certset/implementrule/',

client/src/router/index.js

@@ -79,6 +79,20 @@ export const asyncRoutes = [
         name: 'Standard',
         component: () => import('@/views/standard/standard'),
         meta: { title: '标准库', icon: 'example', perms: ['standard_manage'] }
+      },
+      {
+        path: 'implementrule/create',
+        name: 'ImplementRuleCreate',
+        component: () => import('@/views/implementrule/implementrulecreate.vue'),
+        meta: { title: '新增规则', noCache: true, icon: '', perms: ['implementrule_create']},
+        hidden: true
+      },
+      {
+        path: 'implementrule/update',
+        name: 'ImplementRuleUpdate',
+        component: () => import('@/views/implementrule/implementruleupdate.vue'),
+        meta: { title: '编辑规则', noCache: true, icon: '', perms: ['implementrule_update']},
+        hidden: true
       }
     ]
   },

client/src/utils/index.js

@@ -357,6 +357,9 @@ export function genTree(data) {
   const map = {}
   data.forEach(item => {
     item.label = item.name
+    if(item.fullname){
+      item.label = item.fullname
+    }
     item.value = item.id
     map[item.id] = item
   })

client/src/views/implementrule/implementrule.vue

@@ -2,8 +2,8 @@
   <div class="app-container">
         <div>
           <el-select
-            v-model="listQuery.type"
+            v-model="listQuery.cert_type"
-            placeholder="文件类型"
+            placeholder="认证类型"
             clearable
             style="width: 200px"
             class="filter-item"
@@ -18,7 +18,7 @@
           </el-select>
           <el-input
             v-model="listQuery.search"
-            placeholder="文件名"
+            placeholder="规则名称/编号"
             style="width: 300px;"
             class="filter-item"
             @keyup.enter.native="handleFilter"
@@ -37,9 +37,12 @@
             @click="resetFilter"
           >刷新重置</el-button>
         </div>
+        <div style="margin-top:6px">
+        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
+        </div>
         <el-table
           v-loading="listLoading"
-          :data="fileList.results"
+          :data="ruleList.results"
           style="width: 100%;margin-top:10px;"
           border
           fit
@@ -48,33 +51,53 @@
           max-height="600"
         >
           <el-table-column type="index" width="50" />
+          <el-table-column align="header-center" label="编号">
+            <template slot-scope="scope">{{ scope.row.code }}</template>
+          </el-table-column>
           <el-table-column align="center" label="名称">
-            <template slot-scope="scope">
+            <template slot-scope="scope">{{ scope.row.name }}</template>
-                <el-link type="primary" :href="scope.row.file" target="_blank">{{ scope.row.name }}</el-link>
-            </template>
           </el-table-column>
-          <el-table-column align="header-center" label="类型">
+          <el-table-column align="center" label="所属认证类型">
-            <template slot-scope="scope">{{ scope.row.type }}</template>
+            <template slot-scope="scope">{{ scope.row.cert_type }}</template>
           </el-table-column>
-          <el-table-column align="header-center" label="格式">
+          <el-table-column align="header-center" label="产品领域">
-            <template slot-scope="scope">{{ scope.row.mime }}</template>
+            <template slot-scope="scope">{{ scope.row.pv_scope.fullname }}</template>
           </el-table-column>
-          <el-table-column align="header-center" label="大小(B)">
+          <el-table-column align="header-center" label="产品分类">
-            <template slot-scope="scope">{{ scope.row.size }}</template>
+            <template slot-scope="scope">{{ scope.row.pv_class.fullname }}</template>
-          </el-table-column>
-          <el-table-column align="header-center" label="地址">
-            <template slot-scope="scope">{{ scope.row.path }}</template>
           </el-table-column>
           <el-table-column label="上传日期">
             <template slot-scope="scope">
               <span>{{ scope.row.create_time }}</span>
             </template>
           </el-table-column>
+                <el-table-column align="center" label="操作" width="260px">
+        <template slot-scope="scope">
+          <el-button
+            type="primary"
+            size="small"
+            :disabled="!checkPermission(['implementrule_update'])"
+            @click="handleUpdate(scope)"
+          >编辑</el-button>
+          <el-button
+            type="primary"
+            size="small"
+            :disabled="!checkPermission(['implementrule_update'])"
+            @click="handleUpate(scope)"
+          >单元划分</el-button>
+          <el-button
+            type="danger"
+            size="small"
+            :disabled="!checkPermission(['implementrule_delete'])"
+            @click="handleDelete(scope)"
+          >删除</el-button>
+        </template>
+                </el-table-column>
         </el-table>
 
         <pagination
-          v-show="fileList.count>0"
+          v-show="ruleList.count>0"
-          :total="fileList.count"
+          :total="ruleList.count"
           :page.sync="listQuery.page"
           :limit.sync="listQuery.page_size"
           @pagination="getList"
@@ -82,24 +105,23 @@
   </div>
 </template>
 <script>
-import { getFileList } from "@/api/file"
+import { getImplementRuleList } from "@/api/implementrule"
 import Pagination from "@/components/Pagination"
+import checkPermission from '@/utils/permission'
 export default {
   components: { Pagination },
   data() {
     return {
-      fileList: {count:0},
+      ruleList: {count:0},
       listLoading: true,
       listQuery: {
         page: 1,
         page_size: 20
       },
       enabledOptions: [
-        { key: "文档", display_name: "文档" },
+        { key: "pv", display_name: "自愿性产品认证" },
-        { key: "图片", display_name: "图片" },
+        { key: "ccc", display_name: "强制性产品认证" },
-        { key: "音频", display_name: "音频" },
+        { key: "sys", display_name: "管理体系认证" },
-        { key: "视频", display_name: "视频" },
-        { key: "其它", display_name: "其它" }
       ],
     };
   },
@@ -107,25 +129,32 @@ export default {
     this.getList();
   },
   methods: {
+    checkPermission,
     getList() {
       this.listLoading = true;
-      getFileList(this.listQuery).then(response => {
+      getImplementRuleList(this.listQuery).then(response => {
         if (response.data) {
-          this.fileList = response.data
+          this.ruleList = response.data
         }
-        this.listLoading = false;
+        this.listLoading = false
       });
     },
     resetFilter() {
       this.listQuery = {
         page: 1,
         page_size: 20
-      };
+      }
-      this.getList();
+      this.getList()
     },
     handleFilter() {
-      this.listQuery.page = 1;
+      this.listQuery.page = 1
-      this.getList();
+      this.getList()
+    },
+    handleCreate() {
+      this.$router.push({path:"/certset/implementrule/create"})
+    },
+    handleUpdate(scope) {
+      this.$router.push({path:"/certset/implementrule/update",query:{id:scope.row.id}})
     },
   }
 };

client/src/views/implementrule/implementrulecreate.vue

@@ -0,0 +1,329 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-col :span="18">
+          <el-form-item label="认证类型" prop="cert_type">
+            <el-select
+              v-model="formData.cert_type"
+              placeholder="请选择认证类型"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in cert_typeOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="规则编号" prop="code">
+            <el-input
+              v-model="formData.code"
+              placeholder="请输入规则编号"
+              clearable
+              :style="{width: '100%'}"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="规则名称" prop="name">
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入规则名称"
+              clearable
+              :style="{width: '100%'}"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="认证模式" prop="cert_pattern">
+            <el-select
+              v-model="formData.cert_pattern"
+              placeholder="请选择认证模式"
+              clearable
+              :style="{width: '100%'}"
+              :multiple="true"
+            >
+              <el-option
+                v-for="(item, index) in cert_patternOptions"
+                :key="index"
+                :label="item.fullname"
+                :value="item.value"
+                :disabled="item.disabled"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18" v-if="formData.cert_type =='pv'">
+          <el-form-item label="产品领域" prop="pv_scope">
+            <el-select
+              v-model="formData.pv_scope"
+              placeholder="请选择产品领域"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in pv_scopeOptions"
+                :key="index"
+                :label="item.fullname"
+                :value="item.value"
+                :disabled="item.disabled"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18" v-if="formData.cert_type =='pv'">
+          <el-form-item label="产品分类" prop="pv_class">
+            <treeselect
+              v-model="formData.pv_class"
+              placeholder="请选择产品分类"
+              clearable
+              :style="{width: '100%'}"
+              :options="pv_classOptions"
+              :multiple="false"
+            ></treeselect>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18" v-if="formData.cert_type =='ccc'">
+          <el-form-item label="产品分类" prop="ccc_list">
+            <treeselect
+              v-model="formData.ccc_list"
+              placeholder="请选择产品分类"
+              clearable
+              :style="{width: '100%'}"
+              :options="ccc_listOptions"
+              :multiple="true"
+            ></treeselect>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="文件" prop="path">
+            <el-upload
+              :on-preview="handlePreview"
+              :on-success="handleSuccess"
+              :action="upUrl"
+              :headers="upHeaders"
+              :limit="1"
+              :file-list="fileList"
+            >
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">创建</el-button>
+            <el-button
+              type="primary"
+              @click="submitForm2"
+              v-if="formData.cert_type =='ccc'|| formData.cert_type == 'pv'"
+            >创建并继续单元划分</el-button>
+            <el-button @click="resetForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { getDictList } from "@/api/dict";
+import { createImplementRule } from "@/api/implementrule";
+import { genTree } from "@/utils";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { upUrl, upHeaders } from "@/api/file";
+export default {
+  components: { Treeselect },
+  props: [],
+  data() {
+    return {
+      fileList: [],
+      upHeaders: upHeaders(),
+      upUrl: upUrl(),
+      formData: {
+        cert_type: undefined,
+        code: undefined,
+        name: undefined,
+        pv_scope: undefined,
+        pv_class: undefined,
+        ccc_list: undefined
+      },
+      rules: {
+        cert_type: [
+          {
+            required: true,
+            message: "请选择认证类型",
+            trigger: "change"
+          }
+        ],
+        code: [
+          {
+            required: true,
+            message: "请输入规则编号",
+            trigger: "blur"
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入规则名称",
+            trigger: "blur"
+          }
+        ],
+        cert_pattern: [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "blur"
+          }
+        ],
+        pv_scope: [],
+        pv_class: [],
+        ccc_list: []
+      },
+      cert_typeOptions: [
+        {
+          label: "自愿性产品认证",
+          value: "pv"
+        },
+        {
+          label: "强制性产品认证",
+          value: "ccc"
+        },
+        {
+          label: "管理体系认证",
+          value: "sys"
+        }
+      ],
+      pv_scopeOptions: [
+        
+      ],
+      pv_classOptions: [
+       
+      ],
+      ccc_listOptions: [
+        
+      ],
+      cert_patternOptions: [
+        
+      ]
+    };
+  },
+  computed: {},
+  watch: {
+    "formData.cert_type": "changeRules"
+  },
+  created() {
+    this.getPvscope()
+    this.getPvclass()
+    this.getCccList()
+    this.getCertpattern()
+  },
+  mounted() {},
+  methods: {
+    handlePreview(file) {
+      if ("url" in file) {
+        window.open(file.url);
+      } else {
+        window.open(file.response.data.path);
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      this.formData.path = response.data.path;
+    },
+    changeRules() {
+      if (this.formData.cert_type == "pv") {
+        this.rules.pv_scope = [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change"
+          }
+        ];
+        this.rules.pv_class = [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change"
+          }
+        ];
+        this.rules.ccc_list = []
+        this.formData.ccc_list = []
+      } else if (this.formData.cert_type == "ccc") {
+        this.rules.ccc_list = [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change"
+          }
+        ];
+        this.rules.pv_class = []
+        this.rules.pv_scope = []
+        this.formData.pv_scope = null
+        this.formData.pv_class = null
+      } else {
+        this.rules.pv_class = []
+        this.rules.pv_scope = []
+        this.rules.ccc_list = []
+        this.formData.pv_scope = null
+        this.formData.pv_class = null
+        this.formData.ccc_list = []
+      }
+    },
+    getPvscope() {
+      getDictList({ type__code: "pv_scope" }).then(response => {
+        if (response.data) {
+          this.pv_scopeOptions = genTree(response.data);
+        }
+      });
+    },
+    getPvclass() {
+      getDictList({ type__code: "pv_class" }).then(response => {
+        if (response.data) {
+          this.pv_classOptions = genTree(response.data);
+        }
+      });
+    },
+    getCccList() {
+      getDictList({ type__code: "ccc_list" }).then(response => {
+        if (response.data) {
+          this.ccc_listOptions = genTree(response.data);
+        }
+      });
+    },
+    getCertpattern() {
+      getDictList({ type__code: "cert_pattern" }).then(response => {
+        if (response.data) {
+          this.cert_patternOptions = genTree(response.data);
+        }
+      });
+    },
+    submitForm() {
+      this.$refs["elForm"].validate(valid => {
+        if (!valid) return;
+        // TODO 提交表单
+        createImplementRule(this.formData).then(response => {
+          this.$router.go(-1);
+        });
+      });
+    },
+    submitForm2() {
+      this.$refs["elForm"].validate(valid => {
+        if (!valid) return;
+        // TODO 提交表单
+        createImplementRule(this.formData).then(response => {
+          //this.$router.go(-1);
+        });
+      });
+    },
+    resetForm() {
+      this.$refs["elForm"].resetFields();
+    }
+  }
+};
+</script>

client/src/views/implementrule/implementruleupdate.vue

@@ -0,0 +1,330 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10">
+      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
+        <el-col :span="18">
+          <el-form-item label="认证类型" prop="cert_type">
+            <el-select
+              v-model="formData.cert_type"
+              placeholder="请选择认证类型"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in cert_typeOptions"
+                :key="index"
+                :label="item.label"
+                :value="item.value"
+                :disabled="item.disabled"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="规则编号" prop="code">
+            <el-input
+              v-model="formData.code"
+              placeholder="请输入规则编号"
+              clearable
+              :style="{width: '100%'}"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="规则名称" prop="name">
+            <el-input
+              v-model="formData.name"
+              placeholder="请输入规则名称"
+              clearable
+              :style="{width: '100%'}"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="认证模式" prop="cert_pattern">
+            <el-select
+              v-model="formData.cert_pattern"
+              placeholder="请选择认证模式"
+              clearable
+              :style="{width: '100%'}"
+              :multiple="true"
+            >
+              <el-option
+                v-for="(item, index) in cert_patternOptions"
+                :key="index"
+                :label="item.fullname"
+                :value="item.value"
+                :disabled="item.disabled"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18" v-if="formData.cert_type =='pv'">
+          <el-form-item label="产品领域" prop="pv_scope">
+            <el-select
+              v-model="formData.pv_scope"
+              placeholder="请选择产品领域"
+              clearable
+              :style="{width: '100%'}"
+            >
+              <el-option
+                v-for="(item, index) in pv_scopeOptions"
+                :key="index"
+                :label="item.fullname"
+                :value="item.value"
+                :disabled="item.disabled"
+              ></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18" v-if="formData.cert_type =='pv'">
+          <el-form-item label="产品分类" prop="pv_class">
+            <treeselect
+              v-model="formData.pv_class"
+              placeholder="请选择产品分类"
+              clearable
+              :style="{width: '100%'}"
+              :options="pv_classOptions"
+              :multiple="false"
+            ></treeselect>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18" v-if="formData.cert_type =='ccc'">
+          <el-form-item label="产品分类" prop="ccc_list">
+            <treeselect
+              v-model="formData.ccc_list"
+              placeholder="请选择产品分类"
+              clearable
+              :style="{width: '100%'}"
+              :options="ccc_listOptions"
+              :multiple="true"
+            ></treeselect>
+          </el-form-item>
+        </el-col>
+        <el-col :span="18">
+          <el-form-item label="文件" prop="path">
+            <el-upload
+              :on-preview="handlePreview"
+              :on-success="handleSuccess"
+              :action="upUrl"
+              :headers="upHeaders"
+              :limit="1"
+              :file-list="fileList"
+            >
+              <el-button size="small" type="primary">点击上传</el-button>
+            </el-upload>
+          </el-form-item>
+        </el-col>
+        <el-col :span="24">
+          <el-form-item size="large">
+            <el-button type="primary" @click="submitForm">保存</el-button>
+            <el-button
+              type="primary"
+              @click="submitForm2"
+              v-if="formData.cert_type =='ccc'|| formData.cert_type == 'pv'"
+            >保存并继续单元划分</el-button>
+            <el-button @click="resetForm">重置</el-button>
+          </el-form-item>
+        </el-col>
+      </el-form>
+    </el-row>
+  </div>
+</template>
+<script>
+import { getDictList } from "@/api/dict";
+import { createImplementRule, getImplementRule } from "@/api/implementrule";
+import { genTree } from "@/utils";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { upUrl, upHeaders } from "@/api/file";
+export default {
+  components: { Treeselect },
+  props: [],
+  data() {
+    return {
+      fileList: [],
+      upHeaders: upHeaders(),
+      upUrl: upUrl(),
+      formData: {
+        cert_type: undefined,
+        code: undefined,
+        name: undefined,
+        pv_scope: undefined,
+        pv_class: undefined,
+        ccc_list: undefined
+      },
+      rules: {
+        cert_type: [
+          {
+            required: true,
+            message: "请选择认证类型",
+            trigger: "change"
+          }
+        ],
+        code: [
+          {
+            required: true,
+            message: "请输入规则编号",
+            trigger: "blur"
+          }
+        ],
+        name: [
+          {
+            required: true,
+            message: "请输入规则名称",
+            trigger: "blur"
+          }
+        ],
+        cert_pattern: [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "blur"
+          }
+        ],
+        pv_scope: [],
+        pv_class: [],
+        ccc_list: []
+      },
+      cert_typeOptions: [
+        {
+          label: "自愿性产品认证",
+          value: "pv"
+        },
+        {
+          label: "强制性产品认证",
+          value: "ccc"
+        },
+        {
+          label: "管理体系认证",
+          value: "sys"
+        }
+      ],
+      pv_scopeOptions: [
+        
+      ],
+      pv_classOptions: [
+       
+      ],
+      ccc_listOptions: [
+        
+      ],
+      cert_patternOptions: [
+        
+      ]
+    };
+  },
+  computed: {},
+  watch: {
+    "formData.cert_type": "changeRules"
+  },
+  created() {
+    this.formData.id = this.$route.query.id  //接收参数
+    this.getRule();
+    this.getPvscope()
+    this.getPvclass()
+    this.getCccList()
+    this.getCertpattern()
+  },
+  mounted() {},
+  methods: {
+    handlePreview(file) {
+      if ("url" in file) {
+        window.open(file.url);
+      } else {
+        window.open(file.response.data.path);
+      }
+    },
+    handleSuccess(response, file, fileList) {
+      this.formData.path = response.data.path;
+    },
+    changeRules() {
+      if (this.formData.cert_type == "pv") {
+        this.rules.pv_scope = [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change"
+          }
+        ];
+        this.rules.pv_class = [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change"
+          }
+        ];
+        this.rules.ccc_list = [];
+      } else if (this.formData.cert_type == "ccc") {
+        this.rules.ccc_list = [
+          {
+            required: true,
+            message: "请选择",
+            trigger: "change"
+          }
+        ];
+        this.rules.pv_class = [];
+        this.rules.pv_scope = [];
+      } else {
+        this.rules.pv_class = [];
+        this.rules.pv_scope = [];
+        this.rules.ccc_list = [];
+      }
+    },
+    getRule() {
+      getImplementRule(this.formData.id).then(response => {
+        this.formData = response.data
+      })
+    },
+    getPvscope() {
+      getDictList({ type__code: "pv_scope" }).then(response => {
+        if (response.data) {
+          this.pv_scopeOptions = genTree(response.data);
+        }
+      });
+    },
+    getPvclass() {
+      getDictList({ type__code: "pv_class" }).then(response => {
+        if (response.data) {
+          this.pv_classOptions = genTree(response.data);
+        }
+      });
+    },
+    getCccList() {
+      getDictList({ type__code: "ccc_list" }).then(response => {
+        if (response.data) {
+          this.ccc_listOptions = genTree(response.data);
+        }
+      });
+    },
+    getCertpattern() {
+      getDictList({ type__code: "cert_pattern" }).then(response => {
+        if (response.data) {
+          this.cert_patternOptions = genTree(response.data);
+        }
+      });
+    },
+    submitForm() {
+      this.$refs["elForm"].validate(valid => {
+        if (!valid) return;
+        // TODO 提交表单
+        createImplementRule(this.formData).then(response => {
+          this.$router.go(-1);
+        });
+      });
+    },
+    submitForm2() {
+      this.$refs["elForm"].validate(valid => {
+        if (!valid) return;
+        // TODO 提交表单
+        createImplementRule(this.formData).then(response => {
+          //this.$router.go(-1);
+        });
+      });
+    },
+    resetForm() {
+      this.$refs["elForm"].resetFields();
+    }
+  }
+};
+</script>