修改履职界面逻辑，添加nfc扫描逻辑

src/components/nfcPopup/more.vue

@@ -13,7 +13,7 @@
           <div v-if="showBottomBox" class="bottom-box">
             <div>
               <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
-              <span>NFC</span>
+              <span @click="nfcCheck">NFC</span>
             </div>
             <div>
               <img :src="require('../../assets/img/icon/camera.png')" />
@@ -70,6 +70,10 @@ export default {
     }
   },
   methods:{
+    //nfc扫描
+    nfcCheck(){
+      this.$emit('checkNFC');
+    },
     onConfirm(){
       if(!this.selectNFC) return this.$toast('请选择NFC');
       let data = {
@@ -97,8 +101,6 @@ export default {
     show(list){
       this.visible = true;
       this.dataList = list;
-      console.log(211231);
-      console.log(this.dataList,'datalist')
     },
     //上传前
     async fileChange(e){

src/views/menu/resumption/detail.vue

@@ -51,8 +51,8 @@
                 <div :class="{ active: i === 0 }" class="check-area" @click="clickArea(va, i)">
                   <div class="ysj">
                     <van-icon name="checked" :color="areaColor.complete" v-if="va.areaStatus === '1'" />
-                    <van-icon name="info" :color="areaColor.loading" v-if="va.areaStatus === '2'" />
-                    <van-icon name="info" :color="areaColor.noOpen" v-if="va.areaStatus === '0'" />
+                    <van-icon name="warning" :color="areaColor.loading" v-if="va.areaStatus === '2'" />
+                    <van-icon name="warning" :color="areaColor.noOpen" v-if="va.areaStatus === '0'" />
                   </div>
                   {{ va.areaName }}
                 </div>
@@ -66,13 +66,16 @@
           <van-tabs>
             <van-tab title="已扫描" name="a">
               <van-list finished-text="没有更多了" @load="onLoad">
-                <van-cell v-for="item in yesList" :key="item.nfcCode" :title="item.nfcName"></van-cell>
+                <van-cell v-for="item in yesList" :key="item.nfcCode" :title="item.nfcName">
+                  <span>{{item.pointScan === 1?'必扫':'可选'}}</span>
+                </van-cell>
               </van-list>
             </van-tab>
             <van-tab title="未扫描" name="b">
               <van-list finished-text="没有更多了" @load="onLoad">
                 <van-cell v-for="item in noList" :key="item.nfcCode" :title="item.nfcName">
                   <!-- <img :src="require('../../../assets/svg/NFC.svg')" class="nfc-icon"/>-->
+                  <span>{{item.pointScan === 1?'必扫':'可选'}}</span>
                 </van-cell>
               </van-list>
             </van-tab>
@@ -177,7 +180,7 @@
                   :data-list="dayList"
                 />
                 <van-field
-                  :rules="[{ required: enable, message: '请输入情况描述' }]"
+                  :rules="[{ required: enable, message: '请输入情况描述' },{validator, message: '输入长度200字符以内'}]"
                   :required="enable"
                   v-model="point.resRemark"
                   :readonly="!enable"
@@ -186,7 +189,7 @@
                   autosize
                   label="情况描述"
                   type="textarea"
-                  placeholder="请输入情况描述"
+                  :placeholder="enable ? '请输入情况描述' : ''"
                 />
                 <div class="upload-box">
                   <uploader :maxCount="5" v-if="enable" v-model="point.imgs" />
@@ -219,7 +222,7 @@
         </van-row>
       </div>
       <!--  nfc弹窗  -->
-      <nfc-popup v-if="enable" ref="NfcPopup" @change="changeNfcImg"></nfc-popup>
+      <nfc-popup v-if="enable" ref="NfcPopup" @checkNFC="checkNFC" @change="changeNfcImg"></nfc-popup>
     </van-form>
   </div>
 </template>
@@ -277,7 +280,8 @@ export default {
       preViewImages: {
         images: [],
         startPosition: 0
-      }
+      },
+      timer:null,
     }
   },
   computed: {
@@ -285,6 +289,7 @@ export default {
   },
   mounted() {
     this.getResumptionData()
+    window.openNFCScanCallBack = this.openNFCScanCallBack;
   },
   created() {
     getDict('rectification_deadline').then(res => {
@@ -293,6 +298,118 @@ export default {
     })
   },
   methods: {
+    //长度校验
+    validator(val) {
+      let len = val.length;
+      if( len > 200) {
+        this.$toast.fail('问题情况输入长度不能超过200');
+        return true
+      }else {
+        return false
+      }
+    },
+    checkNFC(){
+      this.useNFC();
+      this.$toast.loading({
+        duration: 0, // 持续展示 toast
+        position: 'top',
+        forbidClick: true,
+        message: '请靠近NFC标签，进行扫描！',
+      });
+
+      let second = 30;
+      this.timer = setInterval(() => {
+        second--;
+        if(!second){
+          this.$toast.clear();
+          clearInterval(this.timer);
+          this.$toast.fail({
+            message: '未扫描到任何信息！',
+          });
+        }
+      }, 1000);
+
+    },
+    openNFCScanCallBack(nfcStr){
+      clearInterval(this.timer);
+      let nfc = JSON.parse(nfcStr);
+      let nfcCode =  nfc.content;
+      this.checkNfcFilter(nfcCode);
+    },
+    checkNfcFilter(nfcCode){
+      let areaId = null;
+      let checkOk =  false;
+      this.nfcs.forEach(v => {
+        if(v.nfcCode === nfcCode){
+          areaId = v.areaId;
+          this.switchArea(areaId);
+          if(v.status === 1){
+            this.$toast.fail('NFC点位：' + v.nfcName + '已扫描，请勿重复扫描！');
+            throw new Error('NFC点位：' + v.nfcName + '已扫描，请勿重复扫描！');
+          }
+          v.status = 1
+          v.scanMethod = 2
+          v.submitTime = dayjs().format('YYYY-MM-DD HH:mm:ss')
+          v.submitBy = this.id
+          this.$toast.success('NFC点位：' + v.nfcName + '扫描成功！');
+          checkOk = true;
+        }
+      });
+
+      if(checkOk){
+        this.yesNFCnums++
+        this.resumptionData.yesNFCNums++
+        this.resumptionData.noNFCNums--
+      }else{
+        this.$toast.fail(nfcCode + "，不在本次履职范围内！");
+      }
+      this.validateArea(areaId)
+    },
+    switchArea(areaId){
+      this.areas.forEach((area, i) => {
+        if (areaId === area.areaId) {
+          this.activeArea(area, i)
+        }
+      })
+    },
+    useNFC(){
+      let system = this.isAndroidOrIos();
+      const parms = {
+        "iOS_SessionType":"0"
+      };
+      if(system === 1){
+        //android
+        // 判断当前环境是是否存在 js桥 'sap'
+        const hasSap = window.hasOwnProperty('sap');
+        if (hasSap) {
+          // 判断是否存在方法 ?preview
+          const fun = sap.hasOwnProperty('openNFCScan');
+          if (fun) {
+            sap.openNFCScan(JSON.stringify(parms));
+          }
+        }
+      }
+
+      if(system === 2){
+        //ios
+        // 判断 ios是否存在方法 preview
+        const fun = window.webkit.messageHandlers.hasOwnProperty('openNFCScan')
+        if (fun) {
+          window.webkit.messageHandlers.openNFCScan.postMessage(JSON.stringify(parms))
+        }
+      }
+    },
+    isAndroidOrIos(){
+      const urls = navigator.userAgent;
+      let isAndroid = urls.indexOf('Android') > -1 || urls.indexOf('Linux') > -1;
+      let isIos = !!urls.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
+      if(isAndroid){
+        return 1;
+      }
+      if(isIos){
+        return 2;
+      }
+    },
     preViewNFC(i) {
       this.preViewImages.images = this.currentImgNFC.map(v => imgUrl(v.img))
       this.preViewImages.startPosition = i
@@ -514,57 +631,86 @@ export default {
       })
     },
     submitResumptionData() {
-      //验证数据
-      let noNfc = this.nfcs.filter((item, index) => {
-        return item.status === 0
-      })
-      if (noNfc.length > 0) {
-        Dialog.alert({
-          message: 'NFC标签还未扫描完成，请完成后提交！'
+      //备份数据
+      let bakNfcs = this.nfcs;
+      let bakChecks = this.checks;
+      try{
+        //验证数据
+        let subNFCS = [];
+        let noNfc = this.nfcs.filter((item, index) => {
+          if(item.status === 1){
+            subNFCS.push(item);
+          }
+          if(item.status === 0 && item.pointScan === 1){
+            return true;
+          }
         })
-        return false
-      }
-      let isOk = true
-      this.checks.forEach(item => {
-        let pointList = item.points
-        pointList.forEach(point => {
-          if (point.dataStatus === 1) {
-            Dialog.alert({
-              message: '还有未完成的内容，请先完成再提交？'
-            })
-            throw new Error('有项目未完成')
-          } else {
-            if (point.resValue === 1) {
-              if (!point.rectificationDeadline || !point.resRemark) {
-                this.changeSwitch()
-                this.areas.forEach((area, i) => {
-                  if (area.areaId === item.areaId) {
-                    this.activeArea(area, i)
-                    //切换后验证表单
-                    this.$refs.resumption_form.validate()
-                    this.$toast({
-                      message: '请完成异常情况的信息填写！',
-                      position: 'top'
-                    })
-                  }
+        if (noNfc.length > 0) {
+          Dialog.alert({
+            message: 'NFC标签还未扫描完成，请完成后提交！'
+          })
+          throw new Error('NFC标签还未扫描完成，请完成后提交！')
+          return
+        }
+
+        for (let i = 0; i < this.checks.length; i++) {
+          for (let j = 0; j < this.checks[i].points.length; j++) {
+            let point =  this.checks[i].points[j];
+            if (point.dataStatus === 1) {
+              if( point.required === 0){
+                //如果不是必填内容
+                this.checks[i].points[j].dataStatus = 2
+                this.checks[i].points[j].resValue = 0
+              }else{
+                Dialog.alert({
+                  message: '存在未编辑完成履职项，无法提交!'
                 })
-                throw new Error('有异常项目未完成')
+                throw new Error('还有未完成的内容，请先完成再提交')
+              }
+            } else {
+              if (point.resValue === 1) {
+                if (!point.rectificationDeadline || !point.resRemark) {
+                  this.changeSwitch()
+                  this.areas.forEach((area, i) => {
+                    if (area.areaId === item.areaId) {
+                      this.activeArea(area, i)
+                      //切换后验证表单
+                      this.$refs.resumption_form.validate()
+                      this.$toast.fail({
+                        message: '请完成异常情况的信息填写！',
+                        position: 'top'
+                      })
+                    }
+                  })
+                  throw new Error('存在未编辑完成履职项，无法提交')
+                }
+                if(point.imgs.length < 1){
+                  this.$toast.fail({
+                    message: '请拍照上传异常图片！',
+                    position: 'top'
+                  })
+                  throw new Error('请上传异常图片！');
+                }
               }
             }
+
           }
+        }
+        let data = {}
+        data.taskId = this.resumptionData.taskId
+        data.checks = this.checks
+        data.nfcs = subNFCS
+        data.subType = 2
+
+        saveTask(data).then(res => {
+          this.$toast('提交成功')
+          this.$router.go(-1)
         })
-      })
-
-      let data = {}
-      data.taskId = this.resumptionData.taskId
-      data.checks = this.checks
-      data.nfcs = this.nfcs
-      data.subType = 2
+      }catch(e){
+        this.nfcs = bakNfcs;
+        this.checks = bakChecks;
+      }
 
-      saveTask(data).then(res => {
-        this.$toast('提交成功')
-        this.$router.go(-1)
-      })
     }
   }
 }