安全检查提交任务时增加签名功能

src/views/menu/securityCheckRegister/add.vue

@@ -16,9 +16,10 @@
               </span>
             </template>
           </van-cell>
-          <van-cell class="cell-item28" title="日期时间" :value="formatTime(taskInfo.planStartTime,taskInfo.planEndTime)" />
-          <van-cell class="cell-item28" title="受检机构" :value="taskInfo.beCheckedOrgName" />
-          <van-cell class="cell-item28" v-if="!enable" title="检查组成员" :value="taskInfo.checkTeam || '无'" />
+          <van-cell class="cell-item28" title="日期时间"
+                    :value="formatTime(taskInfo.planStartTime,taskInfo.planEndTime)"/>
+          <van-cell class="cell-item28" title="受检机构" :value="taskInfo.beCheckedOrgName"/>
+          <van-cell class="cell-item28" v-if="!enable" title="检查组成员" :value="taskInfo.checkTeam || '无'"/>
           <van-field
             v-else
             v-model="taskInfo.checkTeam"
@@ -36,17 +37,20 @@
         <div class="card">
           <p class="legend">检查项<span v-if="enable" @click="addCheck">添加检查内容</span></p>
           <!--  搜索框  -->
-          <van-search v-model="itemName" class="van-hairline--top" placeholder="请输入检查内容" />
+          <van-search v-model="itemName" class="van-hairline--top" placeholder="请输入检查内容"/>
           <van-collapse v-model="activeNames" v-for="(v,i) in resultList" :key="v.itemId">
             <van-collapse-item :title="`${i+1}.${v.itemName}`" :name="v.itemName">
-              <div v-for="(item, index) in v.pointList" :key="item.pointId" class="collapse-box" :class="{'van-hairline--bottom':item.status}">
+              <div v-for="(item, index) in v.pointList" :key="item.pointId" class="collapse-box"
+                   :class="{'van-hairline--bottom':item.status}">
                 <van-cell :border="true">
                   <template #title>
-                    <pre> <span>{{`${i+1}-${index+1}`}}.</span> {{ item.pointName }}</pre>
+                    <pre> <span>{{ `${i + 1}-${index + 1}` }}.</span> {{ item.pointName }}</pre>
                   </template>
                   <template #right-icon>
                     <span v-if="item.nfcList && item.nfcList.length" @click="clickNFCNum(item.nfcList)">
-                        <span style="color:#009240;">{{ getNfcState(item.nfcList) }}</span>/<span >{{item.nfcList.length}}</span>
+                        <span style="color:#009240;">{{
+                            getNfcState(item.nfcList)
+                          }}</span>/<span>{{ item.nfcList.length }}</span>
                     </span>
                     <img
                       v-if="enable && item.nfcList && item.nfcList.length"
@@ -79,7 +83,7 @@
                       :key="img.img"
                       @click="preViewNFC(i)"
                     >
-                      <img :src="imgUrl(img.img)" alt="" />
+                      <img :src="imgUrl(img.img)" alt=""/>
                       <span>{{ img.checkName }}</span>
                     </div>
                   </van-cell>
@@ -103,14 +107,14 @@
                     :data-list="dateList"
                   />
                   <div class="upload-box">
-                    <uploader v-if="enable" :maxCount="5" v-model="item.imgData" />
+                    <uploader v-if="enable" :maxCount="5" v-model="item.imgData"/>
                     <van-cell v-else-if="item.imgData">
                       <div
                         class="nfc-img"
                         v-for="(v, i) in item.imgData"
                         :key="v.imgPath"
                         @click="clickWarnImage(item.imgData, i)">
-                        <img :src="imgUrl(v.imgPath)" alt="" />
+                        <img :src="imgUrl(v.imgPath)" alt=""/>
                       </div>
                       <!--                      <img class="nfc-img" v-for="v in item.imgData" :src="imgUrl(v.imgPath)" alt="" :key="v.id">-->
                     </van-cell>
@@ -123,11 +127,14 @@
       </fieldset>
 
     </div>
+    <van-action-sheet v-model="showSign" title="签署名字" class="sheet">
+      <writingPad ref="esign" @resultImg="resultImg"></writingPad>
+    </van-action-sheet>
     <!--  按钮   -->
     <div v-if="enable" class="bottom-box">
       <div class="flex-box">
         <van-button type="default" plain @click="accredit" v-if="showGrantBtn">授权</van-button>
-        <van-button type="info" :disabled="Boolean(!isSubmit)"  plain hairline @click="saveData">保存</van-button>
+        <van-button type="info" :disabled="Boolean(!isSubmit)" plain hairline @click="saveData">保存</van-button>
         <van-button type="info" :disabled="Boolean(!isSubmit)" @click="submitData">提交</van-button>
       </div>
       <p v-show="Boolean(!isSubmit)">注：不在任务登记时间内，禁止操作</p>
@@ -144,18 +151,18 @@
             <div v-if="unmetList.length > 0" class="nfc-list">
               <van-cell v-for="item in unmetList" :title="item.nfcName" :key="item.nfcCode">
                 <!-- <img :src="require('../../../assets/svg/NFC.svg')" class="nfc-icon"/>-->
-<!--                <span >{{item.pointScan == 1?'必扫':'可选'}}</span>-->
+                <!--                <span >{{item.pointScan == 1?'必扫':'可选'}}</span>-->
               </van-cell>
             </div>
-            <van-empty v-else description="" />
+            <van-empty v-else description=""/>
           </van-tab>
           <van-tab title="已扫描" name="a">
             <div v-if="fullList.length > 0" class="nfc-list">
               <van-cell v-for="item in fullList" :title="item.nfcName" :key="item.nfcCode">
-                <span style="color: green"> {{item.scanMethod == 0?'NFC扫描':'拍照上传'}}</span>
+                <span style="color: green"> {{ item.scanMethod == 0 ? 'NFC扫描' : '拍照上传' }}</span>
               </van-cell>
             </div>
-            <van-empty v-else description="" />
+            <van-empty v-else description=""/>
           </van-tab>
         </van-tabs>
       </div>
@@ -174,14 +181,18 @@ import DateCell from '@/components/dateCell'
 import Uploader from '@/components/upload/gxuploader'
 import NfcPopup from '@/components/nfcPopup/more'
 import AddCheck from './addCheck'
-import { registerDetail, registerSubmit } from './api'
-import { imgUrl} from '@/utils'
+import {registerDetail, registerSubmit} from './api'
+import {imgUrl} from '@/utils'
 import {Dialog, ImagePreview} from 'vant'
-import { mapGetters } from 'vuex'
+import {mapGetters} from 'vuex'
 import dayjs from 'dayjs'
+import writingPad from '@/components/writingPad/index.vue'
+import {base64ToBlob} from "@/utils/base64TurnImg";
+import {upload} from "api/public";
+
 export default {
   name: 'securityDetail',
-  components: { NavBar, SelectCell, DateCell, Uploader, NfcPopup, AddCheck },
+  components: {NavBar, SelectCell, DateCell, Uploader, NfcPopup, AddCheck, writingPad},
   data() {
     return {
       id: null,
@@ -202,12 +213,13 @@ export default {
       checkNum: 0,
       //nfc图片
       nfcImage: [],
+      showSign: false,
       //是否能提交
-      isSubmit:false, //未到提交时间不能提交
+      isSubmit: false, //未到提交时间不能提交
       enable: false,
       stateList: [],
       dayList: [],
-      itemName:null,
+      itemName: null,
       preViewImages: {
         images: [],
         startPosition: 0
@@ -216,33 +228,33 @@ export default {
       showPreView: false,
       selected: null,
       active: true,
-      dateList:[],
+      dateList: [],
       /* 以下为NFC弹窗详情数据*/
-      total_show:false,
-      fullList:[],
-      unmetList:[],
+      total_show: false,
+      fullList: [],
+      unmetList: [],
       go: {
         type: 'replace',
         path: '/securityCheckRegister'
       },
-      event:null,
+      event: null,
     }
   },
   computed: {
-    ...mapGetters(['dictionary',"roleList",'orgId']),
-    showGrantBtn(){
+    ...mapGetters(['dictionary', "roleList", 'orgId']),
+    showGrantBtn() {
       let userRoleIds = this.roleList.map((r) => r.roleId);
       let taskRoleIds = this.taskInfo.checkRoles
         ? this.taskInfo.checkRoles.map((r) => r.id)
         : [];
       return (
         this.taskInfo.status != 3 &&
-        this.taskInfo.planType==3 &&
+        this.taskInfo.planType == 3 &&
         this.taskInfo.checkOrgId == this.orgId &&
         userRoleIds.find((ur) => taskRoleIds.includes(ur))
       );
     },
-    resultList(){
+    resultList() {
       if (!this.itemName) {
         return this.checkList;
       }
@@ -268,34 +280,34 @@ export default {
     clearInterval(this.timer);
   },
   methods: {
-    barGoBack(){
+    barGoBack() {
       this.getRouter();
-      if(this.fromPages.name === "works"){
+      if (this.fromPages.name === "works") {
         this.$router.go(-1);
-      }else {
+      } else {
         this.$router.replace({
-          name:'securityCheckRegister',
-          path:'/securityCheckRegister',
-          params:{event:this.event}
+          name: 'securityCheckRegister',
+          path: '/securityCheckRegister',
+          params: {event: this.event}
         });
       }
     },
     //点击NFC数字图标
     clickNFCNum(arr) {
-      arr.forEach(v=>{
-        if(v.status){
+      arr.forEach(v => {
+        if (v.status) {
           this.fullList.push(v);
-        }else {
+        } else {
           this.unmetList.push(v)
         }
       })
-      this.total_show =true;
+      this.total_show = true;
     },
-    closedNfcList(){
+    closedNfcList() {
       this.fullList = [];
       this.unmetList = [];
     },
-    onClose(){
+    onClose() {
       window.openCameraCallBack = null;
       window.openNFCScanCallBack = null;
       this.$toast.clear();
@@ -304,21 +316,23 @@ export default {
     //长度校验
     validator(val) {
       let len = val.length;
-      if( len > 5) {
+      if (len > 5) {
         this.$toast.fail('问题情况输入长度不能超过200');
         return true
-      }else {
+      } else {
         return false
       }
     },
     //获取NFC已扫描数据
-    getNfcState(arr){
-        arr = arr || [];
-        let nums = arr.filter(v=>{return v.status === 1});
-        return nums.length;
+    getNfcState(arr) {
+      arr = arr || [];
+      let nums = arr.filter(v => {
+        return v.status === 1
+      });
+      return nums.length;
     },
     //调用nfc
-    checkNFC(){
+    checkNFC() {
       //设置nfc调用后的回调
       window.openNFCScanCallBack = this.openNFCScanCallBack;
       //设置loading弹窗
@@ -332,7 +346,7 @@ export default {
       let second = 30;
       this.timer = setInterval(() => {
         second--;
-        if(!second){
+        if (!second) {
           this.$toast.clear();
           clearInterval(this.timer);
           this.$toast.fail({
@@ -345,14 +359,14 @@ export default {
       this.useNFC();
     },
     //调用nfc后的回调
-    openNFCScanCallBack(nfcStr){
+    openNFCScanCallBack(nfcStr) {
       //alert(JSON.stringify(nfcStr))
       clearInterval(this.timer);
       let nfcCode = '';
-      try{
+      try {
         let nfc = JSON.parse(nfcStr);
-        nfcCode =  nfc.content;
-      }catch (e) {
+        nfcCode = nfc.content;
+      } catch (e) {
         nfcCode = nfcStr.content;
       }
       // let nfc = JSON.parse(nfcStr);
@@ -361,13 +375,13 @@ export default {
       this.checkNfcFilter(nfcCode);
     },
     //验证nfc数据
-    checkNfcFilter(nfcCode){
+    checkNfcFilter(nfcCode) {
       //let areaId = null;
-      let checkOk =  false;
+      let checkOk = false;
       //alert(JSON.stringify(this.NFCList,'NFCList'));
       this.NFCList.forEach(v => {
-        if(v.nfcCode === nfcCode){
-          if(v.status === 1){
+        if (v.nfcCode === nfcCode) {
+          if (v.status === 1) {
             this.$toast.fail('NFC：' + v.nfcName + '已扫描，请勿重复扫描！');
           }
           v.status = 1;
@@ -377,17 +391,17 @@ export default {
           checkOk = true;
         }
       });
-      if(!checkOk){
-        this.$toast.fail( "扫描结果不在本次检查范围内！");
-      }else{
+      if (!checkOk) {
+        this.$toast.fail("扫描结果不在本次检查范围内！");
+      } else {
         this.saveData();
       }
     },
 
     //是否显示nfc图标
-    nfcState(item){
-      if(item.nfcList && item.nfcList.length > 0){
-        return item.nfcList.some(v=>{
+    nfcState(item) {
+      if (item.nfcList && item.nfcList.length > 0) {
+        return item.nfcList.some(v => {
           return v.status === 0
         })
       }
@@ -395,8 +409,8 @@ export default {
     },
 
     //格式化时间范围
-    formatTime(start,end,format){
-      format = format ||  'YYYY年MM月DD日'
+    formatTime(start, end, format) {
+      format = format || 'YYYY年MM月DD日'
       return `${this.dayjs(start).format(format)} ~ ${this.dayjs(end).format(format)}`;
     },
     //插入检查项
@@ -420,7 +434,7 @@ export default {
           }
         } else {
           this.checkList.push({
-            isAdd:1,
+            isAdd: 1,
             itemId: valItem.itemId,
             itemName: valItem.itemName,
             pointList: [valItem]
@@ -433,7 +447,7 @@ export default {
       this.active = true
     },
     getState(state) {
-      switch (state){
+      switch (state) {
         case '待检查':
           return '#008cd6';
         case '进行中':
@@ -473,9 +487,9 @@ export default {
         this.activeNames = this.checkList.map(v => v.itemName);
         //判断是否可提交（在任务时间内）
         this.isSubmit = res.data.inRegisterTime;
-        this.checkList.forEach(v=>{
-          v.pointList.forEach(item=>{
-            if(item.status == null ){
+        this.checkList.forEach(v => {
+          v.pointList.forEach(item => {
+            if (item.status == null) {
               item.status = 0
             }
           })
@@ -502,8 +516,8 @@ export default {
         this.$toast('保存成功');
         this.event = 'refresh';
         //this.toPagesFcn();
-      }).catch(error=>{
-        if( error === '任务已完成'){
+      }).catch(error => {
+        if (error === '任务已完成') {
           this.toPagesFcn();
         }
       })
@@ -519,14 +533,14 @@ export default {
           //验证必填项
           let pointData = this.checkList.flatMap(v => v.pointList);
           let allNfcList = [];
-          pointData.forEach(v=>{
-            if(v.nfcList && v.nfcList.length > 0){
+          pointData.forEach(v => {
+            if (v.nfcList && v.nfcList.length > 0) {
               allNfcList.push(...v.nfcList)
             }
           })
-          if(allNfcList.length > 0){
-            let result = allNfcList.some(v=>v.status != 1);
-            if(result){
+          if (allNfcList.length > 0) {
+            let result = allNfcList.some(v => v.status != 1);
+            if (result) {
               this.$toast('请先扫描NFC标签');
               return;
             }
@@ -538,15 +552,8 @@ export default {
           })
           if (arr.length) return this.$toast(`${arr[0].itemName}:该信息不完整请填写`);
           this.taskInfo.isSubmit = 1;
-          console.log(this.taskInfo,'taskInfo');
-          registerSubmit(this.taskInfo).then(res => {
-            this.$toast('提交成功');
-            this.toPagesFcn();
-          }).catch(error=>{
-            if( error === '任务已完成'){
-              this.toPagesFcn();
-            }
-          });
+          console.log(this.taskInfo, 'taskInfo');
+          this.signatureHandler()
         })
         .catch(() => {
           // on cancel
@@ -554,21 +561,21 @@ export default {
 
     },
     //页面跳转逻辑
-    toPagesFcn(){
+    toPagesFcn() {
       this.getRouter();
-      if(this.fromPages.name === "works"){
+      if (this.fromPages.name === "works") {
         this.$router.go(-1)
-      }else {
+      } else {
         this.$router.replace({
-          name:'securityCheckRegister',
-          path:'/securityCheckRegister',
-          params:{event:'refresh'}
+          name: 'securityCheckRegister',
+          path: '/securityCheckRegister',
+          params: {event: 'refresh'}
         });
       }
     },
     //授权
     accredit() {
-      let { checkOrgId, ymdDate, planId, beCheckedOrgId, id } = this.taskInfo
+      let {checkOrgId, ymdDate, planId, beCheckedOrgId, id} = this.taskInfo
       this.$router.push({
         path: '/addWorker',
         query: {
@@ -617,19 +624,52 @@ export default {
       })
       this.saveData();
     },
+    signatureHandler() {
+      this.showSign = true
+    },
+    //上传签名图到服务器
+    resultImg(img) {
+      let obj = base64ToBlob(img)
+      let formData = new FormData()
+
+      obj.name = '签名.jpg'
+      formData.append('file', base64ToBlob(img))
+
+      upload(formData, 'image')
+        .then(res => {
+          console.log(process.env.NODE_ENV)
+          /*上传成功*/
+          this.taskInfo.signImg = process.env.NODE_ENV === 'development' ? res.data.url : res.data.url
+          // this.submitSign(imgUrl)
+          registerSubmit(this.taskInfo).then(res => {
+            this.$toast('提交成功');
+            this.toPagesFcn();
+          }).catch(error => {
+            if (error === '任务已完成') {
+              this.toPagesFcn();
+            }
+          });
+          // this.$emit("imgUrl", res.data.url);
+        })
+        .catch(err => {
+          /*上传失败*/
+        })
+    },
   }
 }
 </script>
 <style lang="scss">
-.register-edit{
-  .van-collapse-item__content{
-    padding:0 20px;
+.register-edit {
+  .van-collapse-item__content {
+    padding: 0 20px;
   }
 }
-.collapse-box{
-  .van-cell{
-    padding:20px 30px;
-    &:last-child{
+
+.collapse-box {
+  .van-cell {
+    padding: 20px 30px;
+
+    &:last-child {
       border-bottom: none;
     }
   }
@@ -639,38 +679,45 @@ export default {
 .register-edit {
   height: 100%;
   overflow: hidden;
+
   .page-container {
     height: calc(100vh - 262px);
     overflow: auto;
     padding: 20px;
-    -border:1px solid red;
+    -border: 1px solid red;
   }
-  .bottom-box{
+
+  .bottom-box {
     height: 170px;
-    padding:20px 20px 20px 20px;
-    >P{
+    padding: 20px 20px 20px 20px;
+
+    > P {
       padding-left: 10px;
       font-size: 22px;
       color: red;
       line-height: 36px;
     }
+
     .flex-box {
       width: 100%;
       display: flex;
       justify-content: space-between;
 
-      >button{
+      > button {
         &:first-child {
           margin-left: 0;
         }
+
         &:last-child {
           margin-right: 0;
         }
-        flex:1;
-        margin:0 10px;
+
+        flex: 1;
+        margin: 0 10px;
       }
     }
   }
+
   .legend {
     background-color: #fff;
     padding: 0 20px;
@@ -679,20 +726,25 @@ export default {
     font-size: 30px;
     display: flex;
     justify-content: space-between;
+
     > span {
       color: orange;
     }
   }
+
   .card {
     margin-bottom: 20px;
     box-shadow: 0 10px 10px #eaeaea;
+
     &:last-child {
       margin-bottom: 0;
     }
   }
-  .collapse-box{
+
+  .collapse-box {
     -padding-bottom: 10px;
   }
+
   .check-area {
     background-color: #f1f1f1;
     margin: 10px;
@@ -704,39 +756,47 @@ export default {
     align-items: center;
     box-shadow: 0 2px 6px #ddd;
   }
+
   .nfc-icon {
     width: 50px;
     height: 50px;
     margin: 0 20px;
   }
+
   .custom-title {
     align-self: center;
     vertical-align: middle;
   }
+
   .upload-box {
     padding: 30px;
   }
+
   .warning-msg {
     color: orange;
     text-align: center;
     height: 80px;
     line-height: 80px;
   }
+
   .active {
     color: #fff;
     background-color: #1989fa;
   }
+
   .nfc-img {
     display: inline-block;
     width: 140px;
     height: 140px;
     margin: 0 10px;
     position: relative;
+
     > img {
       width: 100%;
       height: 100%;
       border: none;
     }
+
     > span {
       position: absolute;
       padding: 0 10px;
@@ -754,7 +814,8 @@ export default {
       height: 30px;
     }
   }
-  .nfc-list{
+
+  .nfc-list {
     min-height: 300px;
     max-height: 600px;
     overflow: auto;
@@ -769,25 +830,33 @@ export default {
     }
 
   }
+
   .select-cell {
-    ::v-deep  .van-cell__title{
+    ::v-deep .van-cell__title {
       min-width: 32%;
     }
-    ::v-deep  .van-cell__value {
-      min-width: 68%;	//可根据自己需求设定值
+
+    ::v-deep .van-cell__value {
+      min-width: 68%; //可根据自己需求设定值
       color: #0e0e0e;
       text-align: left;
     }
   }
-  .cell-item28{
-    ::v-deep  .van-cell__title{
+
+  .cell-item28 {
+    ::v-deep .van-cell__title {
       min-width: 22%;
     }
-    ::v-deep  .van-cell__value {
-      min-width: 78%;	//可根据自己需求设定值
+
+    ::v-deep .van-cell__value {
+      min-width: 78%; //可根据自己需求设定值
       color: #0e0e0e;
       text-align: left;
     }
   }
+
+  .sheet {
+    height: 45%;
+  }
 }
 </style>