证件管理页面

src/components/layouts/UserLayout.vue

@@ -58,8 +58,6 @@ export default {
     },
     created(){
       this.imgUrl = require(this.imgUrl)
-      console.log(this.imgUrl)
-      debugger
     },
     mounted () {
         document.body.classList.add('userLayout')

src/views/oa/modules/InventoryRecordsModal.vue

@@ -207,7 +207,6 @@
           return i.assetNumber===val
         })
         console.log(asset)
-        debugger
         let durableYears  =  moment(asset.acquisitionDate,"YYYY-MM-DD").diff(moment(),"year")
         this.form.setFieldsValue({
           assetName:asset.assetName,

src/views/system/CertificateManagement.vue

@@ -0,0 +1,189 @@
+<template>
+   <a-card :bordered="false" >
+    <!-- 查询 -->
+    <div class="table-page-search-wrapper">
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+
+          <a-col :md="6" :sm="12">
+            <a-form-item label="账号">
+              <!--<a-input placeholder="请输入账号查询" v-model="queryParam.username"></a-input>-->
+              <a-input placeholder="输入账号查询" v-model="queryParam.username"></a-input>
+            </a-form-item>
+          </a-col>
+
+          <a-col :md="6" :sm="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
+              <a @click="handleToggleSearch" style="margin-left: 8px">
+                {{ toggleSearchStatus ? '收起' : '展开' }}
+                <a-icon :type="toggleSearchStatus ? 'up' : 'down'"/>
+              </a>
+            </span>
+          </a-col>
+
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 操作按钮区域 -->
+    <div class="table-operator" style="border-top: 5px">
+      <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>
+      <a-button @click="handleDelete" type="primary" icon="plus">删除</a-button>
+    </div>
+
+     <!-- table区域-begin -->
+    <div>
+      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
+        <i class="anticon anticon-info-circle ant-alert-icon"></i>已选择&nbsp;<a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项&nbsp;&nbsp;
+        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
+      </div>
+
+      <a-table
+        ref="table"
+        bordered
+        size="middle"
+        rowKey="id"
+        :columns="columns"
+        :dataSource="dataSource"
+        :pagination="ipagination"
+        :loading="loading"
+        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
+        @change="handleTableChange">
+
+        <span slot="operation" slot-scope="text, record">
+          <a @click="handleEdit(record)">编辑</a>
+        </span>
+
+
+      </a-table>
+    </div>
+    <!-- 新增框 -->
+    <add-certificate-management ref='AddCertificateManagement'></add-certificate-management>
+   </a-card>
+   
+</template>
+
+<script>
+  
+  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
+  import AddCertificateManagement from './modules/AddCertificateManagement'
+
+  export default {
+    name: "CertificateManagement",
+    mixins: [JeecgListMixin],
+    components: {
+    AddCertificateManagement
+    },
+    data() {
+      return {
+          queryParam:{   //查询条件
+
+          },
+        //   表头
+        columns:[
+            {
+            title: '证件名称',
+            align: "center",
+            dataIndex: 'certificateName',
+            width: 120
+          },
+          {
+            title: '证件所有人',
+            align: "center",
+            dataIndex: 'certificateOwner',
+            width: 120
+          },
+          {
+            title: '证件编号',
+            align: "center",
+            dataIndex: 'certificateNo',
+            width: 120
+          },
+          {
+            title: '起始日期',
+            align: "center",
+            dataIndex: 'startTime',
+            width: 120
+          },
+          {
+            title: '到期时间',
+            align: "center",
+            dataIndex: 'expirationTime',
+            width: 120
+          },
+          {
+            title: '管理人',
+            align: "center",
+            dataIndex: 'administrator',
+            width: 120
+          },
+          {
+            title: '提前通知时间/月',
+            align: "center",
+            dataIndex: 'advanceNotice',
+            width: 120
+          },
+          {
+            title: '备注',
+            align: "center",
+            dataIndex: 'remarks',
+            width: 120
+          },
+          {
+            title: '操作',
+            align: "center",
+            dataIndex: 'operation',
+            scopedSlots: { customRender: 'operation' },
+            width: 120
+          },
+        ]
+      }
+    },
+    computed: {
+    
+    },
+    created(){
+        this.getData()
+    },
+    methods: {
+        // 查询
+        searchQuery(){
+
+        },
+        // 获取数据
+        getData(){
+            this.dataSource.push({
+                certificateName:'1',
+                certificateOwner:'1',
+                certificateNo:'1',
+                startTime:'1',
+                expirationTime:'1',
+                administrator:'1',
+                advanceNotice:'1',
+                remarks:'1',
+            })
+        },
+        // 删除
+        handleDelete(){
+
+        },
+        // 添加
+        handleAdd(){
+          this.$refs.AddCertificateManagement.visible = true
+        },
+        //编辑
+        handleEdit(record){
+           this.$refs.AddCertificateManagement.visible = true
+            this.$refs.AddCertificateManagement.defult = 'edit'
+            this.$refs.AddCertificateManagement.formState = record
+        }
+    }
+     
+
+  }
+</script>
+<style scoped>
+  @import '~@assets/less/common.less'
+</style>

src/views/system/modules/AddCertificateManagement.vue

@@ -0,0 +1,109 @@
+<template>
+  <a-modal
+    :title="(defult == 'add')?'新增':'编辑'"
+    width="55%"
+    :closable="true"
+    @cancel="close"
+    @ok="handleSubmit"
+    :visible="visible"
+  >
+    <a-spin :spinning="confirmLoading">
+      <a-form :model="formState"  >
+        <a-form-item label="证件名称" >
+          <a-input
+            placeholder="请输入用户账号"
+           v-model="formState.certificateName"
+          />
+        </a-form-item>
+
+        <a-form-item label="证件所有人"  >
+          <a-input placeholder="请输入工号" v-model="formState.certificateOwner"/>
+        </a-form-item>
+
+        <a-form-item label="证件编号"  >
+          <a-input placeholder="请输入工号" v-model="formState.certificateNo"/>
+        </a-form-item>
+        <a-form-item label="起始日期"  >
+            <a-date-picker
+            style="width: 100%"
+            placeholder="请选择起始时间"
+            v-model="formState.startTime"
+          />
+        </a-form-item>
+        <a-form-item label="到期时间"  >
+            <a-date-picker
+            style="width: 100%"
+            placeholder="请选择到期时间"
+            v-model="formState.expirationTime"
+          />
+        </a-form-item>
+        <a-form-item label="管理人"  >
+          <a-input placeholder="请输入工号" v-model="formState.administrator"/>
+        </a-form-item>
+        <a-form-item label="提前通知时间/月"  >
+          <a-input placeholder="请输入工号" v-model="formState.advanceNotice"/>
+        </a-form-item>
+        <a-form-item label="备注"  >
+          <a-input placeholder="请输入工号" v-model="formState.remarks"/>
+        </a-form-item>
+      </a-form>
+    </a-spin>
+
+  </a-modal>
+</template>
+
+<script>
+
+
+export default {
+    name: 'UserModal',
+    components: {
+        
+    },
+    data () {
+        return {
+            visible:false,
+            defult:'add',
+            formState:{
+
+            },
+            confirmLoading: false,
+        }
+    },
+    created () {
+        
+    },
+    computed: {
+       
+    },
+    methods: {
+     close(){
+       this.visible = false
+       this.formState={}
+       this.defult='add'
+     },
+    handleSubmit(){
+      
+    }
+    }
+}
+</script>
+
+<style scoped lang="less">
+/deep/.ant-form{
+    display: flex;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+/deep/ .ant-form-item{
+    display: flex;
+    width: 45%;
+    justify-content: center;
+}
+/deep/ .ant-form-item-label{
+  width: 20%;
+}
+
+</style>