电签管理

src/api/certificate/list.js

@@ -28,11 +28,74 @@ export const goRegister = (data) => {
     })
 }
 
+//删除数据
+export const remove = (data) => {
+    return request({
+        url: '/api/blade-manager/signPfxFile/remove',
+        method: 'post',
+        params: data
+    })
+}
+
 //获取详情数据
 export const getById = (data) => {
     return request({
         url: '/api/blade-manager/signPfxFile/getById',
         method: 'post',
+        params: data
+    })
+}
+
+//新增
+export const save = (data) => {
+    return request({
+        url: '/api/blade-manager/signPfxFile/save',
+        method: 'post',
+        data
+    })
+}
+
+//获取当前系统下所有用户
+export const findUserByName = (params) => {
+    return request({
+        url: '/api/blade-manager/signPfxFile/findUserByName',
+        method: 'get',
+        params
+    })
+}
+
+//获取角色方
+export const queryRole = (params) => {
+    return request({
+        url: '/api/blade-manager/signPfxFile/queryRole',
+        method: 'get',
+        params
+    })
+}
+
+//获取项目和合同段
+export const queryProjectAndContract = (params) => {
+    return request({
+        url: '/api/blade-manager/signPfxFile/queryProjectAndContract',
+        method: 'get',
+        params
+    })
+}
+
+//上传图片
+export const addFileInfo = (data) => {
+    return request({
+        url: '/api/blade-resource/client/addFileInfo',
+        method: 'post',
+        data
+    })
+}
+
+//修改
+export const update = (data) => {
+    return request({
+        url: '/api/blade-manager/signPfxFile/update',
+        method: 'post',
         data
     })
 }

src/api/certificate/management.js

@@ -0,0 +1,11 @@
+import request from '@/router/axios';
+
+
+//获取所有有效项目
+export const singPfxManagementPage = (params) => {
+    return request({
+        url: '/api/blade-manager/signPfxFile/singPfxManagementPage',
+        method: 'get',
+        params
+    })
+}

src/router/views/index.js

@@ -10,17 +10,25 @@ export default [{
             meta: {
                 i18n: 'ElectricSignaturelist'
             },
-            children: [{
-                path: '/certificate/list/addList',
-                name: '新增电签',
-                meta: {
-                    i18n: 'ElectricSignaturelist'
-                },
-                component: () =>
-                    import ( /* webpackChunkName: "views" */ '@/views/certificate/lists/addList')
-            }, ],
             component: () =>
                 import ( /* webpackChunkName: "views" */ '@/views/certificate/list')
+        }, {
+            path: '/certificate/list/addList',
+            name: '新增电签',
+            meta: {
+                i18n: 'AddATelegram'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/certificate/lists/addList')
+        },
+        {
+            path: '/certificate/management/see',
+            name: '查看证书',
+            meta: {
+                i18n: 'ViewCertificate'
+            },
+            component: () =>
+                import ( /* webpackChunkName: "views" */ '@/views/certificate/managements/see')
         },
         {
             path: '/certificate/management',

src/views/certificate/list.vue

@@ -5,7 +5,7 @@
         type="primary"
         size="mini"
         class="el-icon-plus"
-        @click="pushRouter()"
+        @click="pushRouter(0)"
       >新增</el-button>
       <el-select
         v-model="value"
@@ -15,7 +15,7 @@
       >
         <el-option
           v-for="item in options"
-          :key="item.value"
+          :key="item.id"
           :label="item.projectName"
           :value="item.id"
         >
@@ -36,32 +36,38 @@
       >
       </el-table-column>
       <el-table-column
-        prop="name"
+        prop="certificateUserName"
         label="证书所有者"
         width="180"
       >
       </el-table-column>
       <el-table-column
-        prop="address"
+        prop="certificateId"
         label="证书ID"
       >
       </el-table-column>
       <el-table-column
-        prop="address"
+        prop="certificateType"
         label="证书类型"
       >
+        <template slot-scope="scope">
+          <span v-if="scope.row.certificateType==1">个人证书</span>
+          <span v-else>企业证书</span>
+        </template>
       </el-table-column>
       <el-table-column
-        prop="address"
+        prop="isRegister"
         label="注册"
       >
         <template slot-scope="scope">
           <el-button
             type="text"
-            @click="register(scope.row)"
+            v-if="scope.row.isRegister==0"
+            @click="register(scope.row.id)"
           >注册</el-button>
           <el-button
             type="text"
+            v-else
             disabled
           >已注册</el-button>
         </template>
@@ -71,10 +77,13 @@
         label="操作"
       >
         <template slot-scope="scope">
-          <el-button type="text">编辑</el-button>
           <el-button
             type="text"
-            @click="deleteList(scope.row)"
+            @click="pushRouter(scope.row.id)"
+          >编辑</el-button>
+          <el-button
+            type="text"
+            @click="deleteList(scope.row.id)"
             style="color:rgba(240, 99, 10, 1);"
           >删除</el-button>
         </template>
@@ -97,14 +106,14 @@
 </template>
 
 <script>
-import { queryProjectList, listpage, goRegister } from "@/api/certificate/list";
+import { queryProjectList, listpage, goRegister, remove } from "@/api/certificate/list";
 
 export default {
   data () {
     return {
       value: '',
       options: [],
-      tableData: [{}],
+      tableData: [],
       total: 0,
       pageindex: 1,
       pagesize: 20,
@@ -122,15 +131,37 @@ export default {
     },
     //#endregion
 
+    //#region 头接口
+    pushRouter (id) {
+      this.$router.push({
+        path: '/certificate/list/addList',
+        query: {
+          id
+        }
+      })
+    },
+    //#endregion
+
     //#region 列表接口
-    projectChange () {
+    projectChange () {//下拉框change事件
       this.listpage()
     },
-    register () {//注册按钮
-
+    register (id) {//注册按钮
+      this.goRegister(id)
     },
-    deleteList () {//删除按钮
-
+    deleteList (ids) {//删除按钮
+      this.remove({ ids })
+    },
+    async remove (ids) {
+      const { data: res } = await remove(ids)
+      console.log(res);
+      if (res.code == 200) {
+        this.$message({
+          type: "success",
+          message: "删除证书成功!"
+        })
+        this.listpage()
+      }
     },
     async queryProjectList () {//获取所有项目
       const { data: res } = await queryProjectList()
@@ -151,13 +182,21 @@ export default {
         this.total = res.data.total
       }
     },
-    async goRegister () {//注册
-      const { data: res } = await goRegister({ id: '' })
+    async goRegister (id) {//注册
+      const { data: res } = await goRegister({ id })
+      console.log(res);
+      if (res.code == 200) {
+        this.$message({
+          type: "success",
+          message: "证书注册成功!"
+        })
+        this.listpage()
+      }
     },
     //#endregion
   },
   created () {
-    // this.queryProjectList()
+    this.queryProjectList()
     this.listpage()
   },
 }

src/views/certificate/lists/addList.vue

@@ -3,31 +3,421 @@
     <el-form
       ref="form"
       :model="form"
-      rules="reles"
-      label-width="80px"
+      :rules="rules"
+      label-width="170px"
+      :inline="true"
     >
-      <el-form-item label="活动名称">
-        <el-radio-group v-model="form.resource">
+      <el-form-item
+        label="证书类型"
+        prop="certificateType"
+        style="width:100%;"
+      >
+        <el-radio-group v-model="form.certificateType">
           <el-radio label="1">个人证书</el-radio>
           <el-radio label="2">企业证书</el-radio>
         </el-radio-group>
       </el-form-item>
+      <el-form-item
+        label="证书所有者"
+        prop="certificateUserName"
+        style="width:45%;"
+      >
+        <el-input
+          v-model="form.certificateUserName"
+          style="width:400px;"
+          placeholder="请输入内容"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="所持证书者身份证ID"
+        prop="certificateId"
+        v-if="form.certificateType==1"
+        style="width:45%;"
+      >
+        <el-input
+          v-model="form.certificateId"
+          style="width:400px;"
+          placeholder="请输入内容"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="企业统一社会信用代码"
+        style="width:45%;"
+        prop="enterpriseUnifiedCode"
+        v-else
+      >
+        <el-input
+          v-model="form.enterpriseUnifiedCode"
+          style="width:400px;"
+          placeholder="请输入内容"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="证书编号"
+        prop="certificateNumber"
+        style="width:45%;"
+      >
+        <el-input
+          v-model="form.certificateNumber"
+          style="width:400px;"
+          placeholder="请输入内容"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="证书密码"
+        prop="certificatePassword"
+        style="width:45%;"
+      >
+        <el-input
+          v-model="form.certificatePassword"
+          style="width:400px;"
+          placeholder="请输入内容"
+        ></el-input>
+      </el-form-item>
+      <el-form-item
+        label="证书文件"
+        style="width:45%;"
+        prop="certificateFileUrl"
+      >
+        <el-upload
+          class="upload-demo"
+          action="#"
+          multiple
+          :limit="1"
+          :auto-upload="false"
+          accept='.pfx'
+          :file-list="form.certificateFileUrl"
+          :before-remove="beforeRemove"
+          :on-change="changecertificateFileUrl"
+        >
+          <el-button
+            size="small"
+            type="primary"
+          >上传文件</el-button>
+          <div
+            slot="tip"
+            class="el-upload__tip"
+          >支持上传文件格式为pfx文件</div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item
+        label="关联用户"
+        style="width:45%;"
+        prop="certificateUserId"
+        v-if="form.certificateType==1"
+      >
+        <el-select
+          v-model="form.certificateUserId"
+          style="width:400px;"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in userData"
+            :key="item.id"
+            :label="item.name"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        label="签名体图片"
+        style="width:100%;"
+        prop="signatureFileUrl"
+      >
+        <el-upload
+          class="upload-demo"
+          action="#"
+          multiple
+          :limit="1"
+          :auto-upload="false"
+          accept='.jpg,.png'
+          :file-list="form.signatureFileUrl"
+          :before-remove="beforeRemove2"
+          :on-change="changecertificateFileUrl2"
+        >
+          <el-button
+            size="small"
+            type="primary"
+          >上传文件</el-button>
+          <div
+            slot="tip"
+            class="el-upload__tip"
+          >支持上传文件格式为JPG/PNG</div>
+        </el-upload>
+      </el-form-item>
+      <el-form-item
+        label="关联项目"
+        tyle="width:100%;"
+        prop="signPfxDeputieList"
+        v-if="form.certificateType==2"
+      >
+        <i
+          class="el-icon-circle-plus"
+          style="color:red;font-size:24px;line-height:40px;cursor: pointer;"
+          @click="pushSignPfxDeputieList"
+        ></i>
+        <div
+          v-for="(item,key) in form.signPfxDeputieList"
+          :key='key'
+        >
+          <el-select
+            style="width:300px;"
+            class="martop20"
+            v-model="form.signPfxDeputieList[key].projectId"
+            placeholder="请选择"
+            @change="changeProjectId(key)"
+          >
+            <el-option
+              v-for="item in projectMeiju"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            style="width:300px;"
+            class="marleft20 martop20"
+            @focus="focusContractSection(form.signPfxDeputieList[key].projectId)"
+            :disabled='!form.signPfxDeputieList[key].projectId'
+            v-model="form.signPfxDeputieList[key].contractId"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in ContractSection"
+              :key="item.id"
+              :label="item.name"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+          <el-select
+            class="marleft20 martop20"
+            style="width:300px;"
+            v-model="form.signPfxDeputieList[key].roleId"
+            placeholder="请选择参建方"
+          >
+            <el-option
+              v-for="item in ParticipationConstruction"
+              :key="item.id"
+              :label="item.roleName"
+              :value="item.id"
+            >
+            </el-option>
+          </el-select>
+        </div>
+        <!-- signPfxDeputieList -->
+      </el-form-item>
     </el-form>
+    <div class="flexCenter">
+      <el-button @click="cancel">取消</el-button>
+      <el-button
+        class="marleft30"
+        type="primary"
+        @click="savess()"
+      >保存</el-button>
+    </div>
   </basic-container>
 </template>
 
 <script>
+import { save, getById, findUserByName, queryRole, queryProjectAndContract, addFileInfo, update } from "@/api/certificate/list";
 export default {
   data () {
     return {
       form: {
-
+        certificateType: '1',
+        certificateUserName: '',
+        certificateUserName: '',//所持证书者身份证ID
+        enterpriseUnifiedCode: '',//企业统一社会信用代码
+        certificateNumber: '',
+        certificatePassword: '',
+        certificateUserId: '',
+        certificateFileUrl: [],//证书文件
+        signatureFileUrl: [],//签名体图片
+        signPfxDeputieList: [],
       },
-      reles: {
+      rules: {
+        certificateType: [{ required: true, message: '请选择', trigger: 'change' }],
+        certificateUserName: [{ required: true, message: '请输入证书所有者', trigger: 'blur' }],
+        // certificateId: [{ required: true, message: '请输入所持证书者身份ID', trigger: 'blur' }],
+        enterpriseUnifiedCode: [{ required: true, message: '请输入企业统一社会信用代码', trigger: 'blur' }],
+        certificateNumber: [{ required: true, message: '请输入证书编号', trigger: 'blur' }],
+        certificatePassword: [{ required: true, message: '请输入证书密码', trigger: 'blur' }],
+        certificateUserId: [{ required: true, message: '请选择关联用户', trigger: 'change' }],
+        certificateFileUrl: [{ required: true, message: '请选择证书文件', trigger: 'change' }],
+        signatureFileUrl: [{ required: true, message: '请选择签名体图片', trigger: 'change', }],
+        signPfxDeputieList: [{ required: true, message: '请设置关联项目', trigger: 'change', }],
+      },
+      ParticipationConstruction: [],//参见项目方
+      projectMeiju: [],//项目
+      ContractSection: [],//合同段
+      userData: [],//关联用户
+    }
+  },
+  methods: {
+    //#region 
+    cancel () {//取消按钮
+      this.$router.push('/certificate/list')
+    },
+    savess () {//保存按钮
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          let fromData = {
+            certificateType: this.form.certificateType,
+            certificateUserName: this.form.certificateUserName,
+            certificateNumber: this.form.certificateNumber,
+            certificatePassword: this.form.certificatePassword,
+          }
+          if (typeof this.form.certificateFileUrl[0].raw == String) {
+            fromData.certificateFileUrl = await this.addFileInfo(this.form.certificateFileUrl[0].raw)
+          } else {
+            fromData.certificateFileUrl = this.form.certificateFileUrl[0].row
+          }
+          if (typeof this.form.signatureFileUrl[0].raw == String) {
+            fromData.signatureFileUrl = await this.addFileInfo(this.form.signatureFileUrl[0].raw)
+          } else {
+            fromData.signatureFileUrl = this.form.signatureFileUrl[0].row
+          }
+          let tag = true
+          let enterpriseUnifiedCode = ''
+          if (this.form.certificateType == 1) {
+            fromData.certificateUserId = this.form.certificateUserId//关联用户
+          } else {
+            this.form.signPfxDeputieList.forEach(val => {
+              if (!val.projectId || !val.contractId || !val.roleId) {
+                tag = false
+                return
+              } else {
+                if (enterpriseUnifiedCode) {
+                  enterpriseUnifiedCode += ','
+                }
+                enterpriseUnifiedCode += `${val.projectId}-${val.contractId}-${val.roleId}`
+              }
+            })
+            fromData.signPfxDeputieList = enterpriseUnifiedCode  //关联项目
+            fromData.enterpriseUnifiedCode = this.form.enterpriseUnifiedCode
+          }
+          if (tag) {
+            if (this.$route.query.id == 0) {
+              this.save(fromData)//新增接口
+            } else {
+              fromData.id = this.form.id
+              this.update(fromData)//编辑接口
+            }
+          } else {
+            this.$message({
+              type: 'error',
+              message: "请填写完整关联项目!"
+            })
+          }
+        }
+      })
+    },
+    //#endregion
+
+    //#region 上传文件得方法
+    beforeRemove (file, fileList) {//证书文件删除回调
+      this.form.certificateFileUrl = []
+    },
+    changecertificateFileUrl (file) {//证书文件变化回调
+      this.form.certificateFileUrl = [file]
+    },
+    beforeRemove2 (file, fileList) {//签名体图片删除回调
+      this.form.signatureFileUrl = []
+    },
+    changecertificateFileUrl2 (file) {//签名体图片变化回调
+      this.form.signatureFileUrl = [file]
+    },
+    pushSignPfxDeputieList () {//添加关联项目
+      this.form.signPfxDeputieList.unshift({
+        projectId: '',
+        contractId: '',
+        roleId: '',
+      })
+    },
+    focusContractSection (projectId) {//获取合同段数据
+      this.projectMeiju.forEach(val => {
+        if (val.id == projectId) {
+          this.ContractSection = val.contractInfoList
+          return
+        }
+      })
+    },
+    changeProjectId (key) {//项目id发生改变
+      this.form.signPfxDeputieList[key].contractId = ''
+    },
+    //#endregion
+
+    //#region //接口
+    async getById () {//获取详细信息
+      const { data: res } = await getById({ id: this.$route.query.id })
+      console.log(res);
+      if (res.code == 200) {
+        this.form = res.data
+        this.form.certificateFileUrl = [{ row: res.data.certificateFileUrl }]
+        this.form.signatureFileUrl = [{ row: res.data.certificateFileUrl }]
+      }
+    },
+    async save (da) {//新增
+      const { data: res } = await save(da)
+      console.log(res);
+      if (res.code == 200) {
+        this.$message({
+          type: 'success',
+          message: '新增电签成功!'
+        })
+        this.$router.push('/certificate/list')
+      }
+    },
+    async findUserByName () { //关联用户
+      const { data: res } = await findUserByName()
+      console.log(res);
+      if (res.code == 200) {
+        this.userData = res.data
+      }
+    },
+    async queryRole () { //获取角色方
+      const { data: res } = await queryRole()
+      console.log(res);
+      if (res.code == 200) {
+        this.ParticipationConstruction = res.data
+      }
+    },
+    async queryProjectAndContract () {//获取项目和合同段
+      const { data: res } = await queryProjectAndContract()
+      console.log(res);
+      if (res.code == 200) {
+        this.projectMeiju = res.data
+      }
+    },
+    async addFileInfo (file) {//上传图片
+      let fromData = new FormData();
+      fromData.append('file', file);
+      const { data: res } = await addFileInfo(fromData)
+      console.log(res);
+      if (res.code == 200) {
+        return res.data.link
+      }
+    },
+    async update (da) {
+      const { data: res } = await update(da)
+      console.log(res);
+      if (res.code == 200) {
 
       }
+    },
+    //#endregion
+  },
+  created () {
+    if (this.$route.query.id != 0) {
+      this.getById()
     }
-  }
+    this.findUserByName()//关联用户
+    this.queryRole()//获取角色方
+    this.queryProjectAndContract()//获取项目和合同段
+  },
 }
 </script>
 

src/views/certificate/management.vue

@@ -1,3 +1,124 @@
 <template>
-  <div>电签管理</div>
-</template>
+  <basic-container class="management">
+    <el-select
+      v-model="value"
+      filterable
+      style="float:right"
+      placeholder="请选择"
+      @change="projectChange"
+    >
+      <el-option
+        v-for="item in options"
+        :key="item.id"
+        :label="item.projectName"
+        :value="item.id"
+      >
+      </el-option>
+    </el-select>
+    <el-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="projectName"
+        label="项目名称"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="personalCount"
+        label="个人证书（个）"
+      >
+      </el-table-column>
+      <el-table-column
+        prop="enterpriseCount"
+        label="企业证书（个）"
+      >
+      </el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="scope">
+          <el-button
+            type="text"
+            @click="see(scope.row)"
+          >查看</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      style="float:right"
+      background
+      class="martop20 marbottom20"
+      layout="prev, pager, next"
+      :total="total"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page.sync="pageindex"
+      :page-size="pagesize"
+    >
+    </el-pagination>
+  </basic-container>
+</template>
+<script>
+import { queryProjectList, } from "@/api/certificate/list";
+import { singPfxManagementPage, } from "@/api/certificate/management";
+export default {
+  data () {
+    return {
+      options: [],
+      value: '',
+      tableData: [{}],
+      total: 0,
+      pageindex: 1,
+      pagesize: 20,
+    }
+  },
+  methods: {
+    //#region 
+    projectChange () {//项目名称选择
+      this.singPfxManagementPage()
+    },
+    async queryProjectList () {
+      const { data: res } = await queryProjectList()
+      console.log(res);
+      if (res.code == 200) {
+        this.options = res.data
+      }
+    },
+    async singPfxManagementPage () {
+      const { data: res } = await singPfxManagementPage({
+        current: this.pageindex,
+        size: this.pagesize,
+        contractId: this.value,
+      })
+      console.log(res);
+      if (res.code == 200) {
+        // this.tableData = res.data.records
+        this.total = res.data.total
+      }
+    },
+    handleSizeChange (val) {
+      this.pagesize = val
+      this.singPfxManagementPage()
+    },
+    handleCurrentChange (val) {
+      this.pageindex = val
+      this.singPfxManagementPage()
+    },
+    //#endregion
+
+    //#region 
+    see () {
+      this.$router.push({ path: '/certificate/management/see' })
+    },
+    //#endregion
+  },
+  created () {
+    this.queryProjectList()
+    this.singPfxManagementPage()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.management {
+}
+</style>

src/views/certificate/managements/see.vue

@@ -0,0 +1,64 @@
+<template>
+  <basic-container class="see">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-select
+          v-model="value"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          >
+          </el-option>
+        </el-select>
+        <el-menu
+          default-active="2"
+          class="el-menu-vertical-demo"
+          @open="handleOpen"
+          @close="handleClose"
+        >
+          <el-submenu index="1">
+            <template slot="title">
+              <i class="el-icon-location"></i>
+              <span>导航一</span>
+            </template>
+            <el-menu-item-group>
+              <el-menu-item index="1-1">选项1</el-menu-item>
+              <el-menu-item index="1-2">选项2</el-menu-item>
+            </el-menu-item-group>
+          </el-submenu>
+        </el-menu>
+
+      </el-col>
+      <el-col :span="18"></el-col>
+    </el-row>
+  </basic-container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      options: [],
+      value: '',
+    }
+  },
+  methods: {
+    //#region 左侧菜单
+    handleClose () {
+
+    },
+    handleOpen () {
+
+    },
+    //#endregion
+  },
+}
+</script>
+<style lang="scss" scoped>
+.see {
+}
+</style>