档案管理-证书档案

src/views/archives/certificate/Index.vue

@@ -1,17 +1,60 @@
 <template>
-  <a-card :bordered="false" title="证书档案">
+  <a-card :bordered="false" title="证书档案" :loading="treeLoading">
     <div class="table-page-search-wrapper">
-      <SearchCom :form="queryParam" :list="queryOptions" @search="handleRefresh" @reset="() => {queryParam = {}, handleRefresh()}"></SearchCom>
+      <SearchCom :form="queryParam" :list="queryOptions" @search="handleRefresh" @reset="() => {queryParam.type = '', handleRefresh()}"></SearchCom>
       <div style="width: 100%; height: 32px; margin-bottom: 8px;">
         <a-button type="primary" @click="editCertificateType()">编辑证书类型</a-button>
       </div>
     </div>
+
+    <a-row :gutter="24">
+      <a-col :md="5" :sm="24" class="borderTop ">
+        <div>
+          <div v-if="this.orgTree != ''">
+            <a-tree :treeData="orgTree" v-if="orgTree.length" @select="handleClick" :defaultExpandAll="true" :defaultExpandedKeys="defaultExpandedKeys" :replaceFields="replaceFields" />
+          </div>
+          <div v-else>
+            <a-empty :image="simpleImage" />
+          </div>
+
+          <a-button type="primary" @click="changeOrgType" style="display: block; margin: 10px auto;">
+            {{ queryParam.orgType === 1 ? '切换到项目组' : '切换到单位' }}
+          </a-button>
+        </div>
+      </a-col>
+      <a-col :md="19" :sm="24" style="padding-left: 0px">
+        <s-table ref="table" size="small" rowKey="id" :columns="columns" :data="loadData">
+          <template slot="action" slot-scope="text, record">
+            <a-dropdown>
+              <a class="ant-dropdown-link">操作
+                <a-icon type="down" />
+              </a>
+              <a-menu slot="overlay">
+                <a-menu-item>
+                  <a href="javascript:;" @click="editPersonCertificate(record)">修改</a>
+                </a-menu-item>
+                <a-menu-item>
+                  <a href="javascript:;">导出</a>
+                </a-menu-item>
+                <a-menu-item>
+                  <a href="javascript:;" @click="delPersonCertificate(record)">删除</a>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </template>
+        </s-table>
+      </a-col>
+    </a-row>
   </a-card>
 </template>
 
 <script>
+import { Empty } from 'ant-design-vue'
 import { STable, SearchCom } from '@/components'
-import { getCertificateTypeList } from '@/api/archives/certificate'
+import { getCertificateTypeList, getArchivesCertificatelist } from '@/api/archives/certificate'
+import { orgList } from '@/api/org/org'
+import { listToTree } from '@/utils/util'
+const rootParentId = 0
 
 export default {
   // import引入的组件需要注入到对象中才能使用
@@ -20,15 +63,40 @@ export default {
   data() {
     // 这里存放数据
     return {
-      queryParam: { orgId: '', name: '', type: '' },
+      queryParam: { orgId: '', orgType: 1, type: '' },
-      type: []
+      type: [],
+
+      // 组织机构数需要用到的参数
+      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
+      orgTree: [],
+      defaultExpandedKeys: [],
+      treeLoading: true,
+      replaceFields: {
+        children: 'children',
+        title: 'name',
+        key: 'id',
+        value: 'id'
+      },
+
+      // 表格参数
+      columns: [
+        { title: '姓名', width: '80px', align: 'center', dataIndex: 'personName', key: 'personName' },
+        { title: '单位信息', width: 'auto', align: 'center', dataIndex: 'dwOrgName', key: 'dwOrgName' },
+        { title: '部门信息', width: 'auto', align: 'center', dataIndex: 'bmOrgName', key: 'bmOrgName' },
+        { title: '证书名称', width: 'auto', align: 'center', dataIndex: 'name', key: 'name' },
+        { title: '证书类型', width: 'auto', align: 'center', dataIndex: 'type', key: 'type' },
+        { title: '注册日期', width: 'auto', align: 'center', dataIndex: 'registerDate', key: 'registerDate' },
+        { title: '失效日期', width: 'auto', align: 'center', dataIndex: 'validityStartDate', key: 'validityStartDate' },
+        { title: '证书状态', width: '80px', align: 'center', dataIndex: 'state', key: 'state' },
+        { title: '操作', width: '70px', key: 'operation', align: 'center', scopedSlots: { customRender: 'action' } }
+      ],
+      loadData: null,
     };
   },
   // 计算属性 类似于data概念
   computed: {
     queryOptions: function () {
       return [
-        { type: 'input', placeholder: '证书名称', key: 'name' },
         { type: 'select', placeholder: '培训种类', key: 'type', options: [{ id: '', name: '全部' }, ...this.type] },
       ]
     },
@@ -37,6 +105,40 @@ export default {
   watch: {},
   // 方法集合
   methods: {
+    // 获取到机构树，展开顶级下树节点，考虑到后期数据量变大，不建议全部展开
+    getOrgTree() {
+      orgList({ orgType: this.queryParam.orgType }).then(res => {
+        this.treeLoading = false
+        if (!res.code === 200 || !res.data.length) {
+          return
+        }
+        this.defaultExpandedKeys = []
+        this.orgTree = listToTree(res.data, [], rootParentId)
+        this.queryParam.orgId = this.orgTree[0].id
+        for (var item of this.orgTree) {
+          if (item.pid === 0) {
+            this.defaultExpandedKeys.push(item.id)
+          }
+        }
+
+        if (!this.loadData) this.loadData = parameter => { return getArchivesCertificatelist(Object.assign(parameter, this.queryParam)).then(res => { return res }) };
+        else this.handleRefresh();
+
+      });
+    },
+
+    // 获取所有证书类型
+    getCertificateType() {
+      getCertificateTypeList({ dictionaryCode: '0001' }).then(res => {
+        for (let index in res.data) {
+          let item = {};
+          item.id = res.data[index].value.toString();
+          item.name = res.data[index].name;
+          this.type.push(item)
+        }
+      });
+    },
+
     // 编辑证书类型
     editCertificateType() {
       this.$router.push({
@@ -44,19 +146,47 @@ export default {
 
         }
       });
+    },
+
+    // 搜索区查询按钮
+    handleRefresh() {
+      this.$refs.table.refresh(true)
+    },
+
+    // 切换组织树
+    changeOrgType() {
+      this.queryParam.orgType = this.queryParam.orgType === 1 ? 2 : 1;
+      this.getOrgTree();
+      // this.handleClick();
+    },
+
+    // 点击组织树节点时调用
+    handleClick(e) {
+      this.queryParam.orgId = e.toString()
+      this.$refs.table.refresh(true)
+    },
+
+    // 修改人员证书
+    editPersonCertificate(record) {
+      this.$router.push({
+        path: '/archives/certificate/EditCertificate', query: {
+          certificateId: record.id
+        }
+      });
+    },
+
+    // 删除人员证书
+    delPersonCertificate(record) {
+
     }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created() {
+    // 获取组织机构树
+    this.getOrgTree();
+
     // 获取所有证书类型
-    getCertificateTypeList({ dictionaryCode: '0001' }).then(res => {
+    this.getCertificateType();
-      for (let index in res.data) {
-        let item = {};
-        item.id = res.data[index].value;
-        item.name = res.data[index].name;
-        this.type.push(item)
-      }
-    });
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
   mounted() { },
@@ -78,4 +208,10 @@ export default {
 
 </script>
 <style scoped>
+.borderTop {
+  border-top: 1px solid #e8e8e8;
+}
+.borderRight {
+  border-right: 1px solid #e8e8e8;
+}
 </style>