安全检查添加查看nfc列表功能

src/assets/css/index.scss

@@ -80,7 +80,11 @@ pre{
   }
   .van-dialog__footer{
     .van-dialog__confirm{
-      color:#0d65eb;
+      color:#008cd6;
     }
   }
 }
+
+.van-tabs__line{
+  background-color:#008cd6;
+}

src/views/menu/securityCheckRegister/add.vue

@@ -41,7 +41,7 @@
                     <pre> <span>{{`${i+1}-${index+1}`}}.</span> {{ item.pointName }}</pre>
                   </template>
                   <template #right-icon>
-                    <span v-if="item.nfcList && item.nfcList.length">
+                    <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>
                     <img
@@ -52,7 +52,6 @@
                     />
                     <van-switch
                       v-if="enable"
-                      style="margin-left: 10px"
                       v-model="item.status"
                       :active-value="1"
                       :inactive-value="0"
@@ -132,10 +131,36 @@
 
     <!--  nfc弹窗  -->
     <nfc-popup v-if="enable" ref="NfcPopup" @checkNFC="checkNFC" @close="onClose" @change="changeNfcImg"></nfc-popup>
+
+    <!-- 查看nfc列表 -->
+    <van-action-sheet v-model="total_show" @closed="closedNfcList">
+      <div class="content">
+        <van-tabs>
+          <van-tab title="未扫描" name="b">
+            <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>
+              </van-cell>
+            </div>
+            <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 === 1?'NFC扫描':'拍照上传'}}</span>
+              </van-cell>
+            </div>
+            <van-empty v-else description="" />
+          </van-tab>
+        </van-tabs>
+      </div>
+    </van-action-sheet>
   </div>
 
   <!--  添加检查内容  -->
   <AddCheck v-else @goBack="goBack" @addItem="addItem" :orgType="taskInfo.beCheckOrgType"></AddCheck>
+
 </template>
 
 <script>
@@ -188,6 +213,10 @@ export default {
       selected: null,
       active: true,
       dateList:[],
+      /* 以下为NFC弹窗详情数据*/
+      total_show:false,
+      fullList:[],
+      unmetList:[],
       go: {
         type: 'replace',
         path: '/securityCheckRegister'
@@ -234,6 +263,21 @@ export default {
     clearInterval(this.timer);
   },
   methods: {
+    //点击NFC数字图标
+    clickNFCNum(arr) {
+      arr.forEach(v=>{
+        if(v.status){
+          this.fullList.push(v);
+        }else {
+          this.unmetList.push(v)
+        }
+      })
+      this.total_show =true;
+    },
+    closedNfcList(){
+      this.fullList = [];
+      this.unmetList = [];
+    },
     onClose(){
       window.openCameraCallBack = null;
       window.openNFCScanCallBack = null;
@@ -640,7 +684,7 @@ export default {
   .nfc-icon {
     width: 50px;
     height: 50px;
-    margin-left: 20px;
+    margin: 0 20px;
   }
   .custom-title {
     align-self: center;
@@ -687,5 +731,11 @@ export default {
       height: 30px;
     }
   }
+  .nfc-list{
+    min-height: 300px;
+    max-height: 600px;
+    overflow: auto;
+    padding: 10px 0;
+  }
 }
 </style>

src/views/menu/securityCheckRegister/detail.vue

@@ -20,8 +20,8 @@
       <!--  检查项目    -->
       <div class="card">
           <!--  搜索框  -->
-          <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-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}">
                 <van-cell :border="true">
@@ -29,24 +29,19 @@
                     <pre> <span>{{`${i+1}-${index+1}`}}.</span> {{ item.pointName }}</pre>
                   </template>
                   <template #right-icon>
-                    <span v-if="item.nfcList && item.nfcList.length">
+                    <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>
                     <img
                       v-if="item.nfcList && item.nfcList.length"
                       :src="require('../../../assets/svg/NFC.svg')"
-                      class="nfc-icon"
-                      @click="clickNFC(item.nfcList)"
-                    />
+                      class="nfc-icon"/>
+                    <span> </span>
                     <span v-if="item.status != null">
                       <van-tag v-if="item.status == '1'" type="warning">隐患</van-tag>
                       <van-tag v-else type="success">正常</van-tag>
                     </span>
                   </template>
-
-
-
-
                 </van-cell>
                 <van-cell-group v-show="item.status =='1'" :border="false">
                   <van-cell v-if="item.nfcList && item.nfcList.length > 0" :border="false">
@@ -66,7 +61,7 @@
                       <p class="text-style">{{item.remark}}</p>
                     </template>
                   </van-cell>
-                  <van-cell  title="整改期限" :border="false" :value="item.rectificationDeadline"></van-cell>
+                  <van-cell  title="整改期限" :border="false" :value="`${item.rectificationDeadline}天`"></van-cell>
 <!--                  <select-cell-->
 <!--                    required-->
 <!--                    :disabled="!enable"-->
@@ -94,27 +89,29 @@
         </div>
     </div>
 
-<!--    <van-action-sheet v-model="total_show">-->
-<!--      <div class="content">-->
-<!--        <van-tabs>-->
-<!--          <van-tab title="未扫描" name="b">-->
-<!--            <van-list finished-text="没有更多了" @load="onLoad">-->
-<!--              <van-cell v-for="item in sheetNoList" :key="item.nfcCode" :label="areasMap[item.areaId] " :title="item.nfcName">-->
-<!--                &lt;!&ndash; <img :src="require('../../../assets/svg/NFC.svg')" class="nfc-icon"/>&ndash;&gt;-->
-<!--                <span >{{item.pointScan === 1?'必扫':'可选'}}</span>-->
-<!--              </van-cell>-->
-<!--            </van-list>-->
-<!--          </van-tab>-->
-<!--          <van-tab title="已扫描" name="a">-->
-<!--            <van-list finished-text="没有更多了" @load="onLoad">-->
-<!--              <van-cell v-for="item in sheetYesList" :key="item.nfcCode"  :label="areasMap[item.areaId]" :title="item.nfcName">-->
-<!--                <span style="color: green">已完成</span>-->
-<!--              </van-cell>-->
-<!--            </van-list>-->
-<!--          </van-tab>-->
-<!--        </van-tabs>-->
-<!--      </div>-->
-<!--    </van-action-sheet>-->
+    <van-action-sheet v-model="total_show" @closed="closedNfcList">
+      <div class="content">
+        <van-tabs>
+          <van-tab title="未扫描" name="b">
+            <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>
+              </van-cell>
+            </div>
+            <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 === 1?'NFC扫描':'拍照上传'}}</span>
+              </van-cell>
+            </div>
+            <van-empty v-else description="" />
+          </van-tab>
+        </van-tabs>
+      </div>
+    </van-action-sheet>
 
   </div>
 
@@ -168,7 +165,9 @@ export default {
         path: '/securityCheckRegister'
       },
       /* 以下为NFC弹窗详情数据*/
-      total_show:false
+      total_show:false,
+      fullList:[],
+      unmetList:[],
     }
   },
   computed: {
@@ -197,9 +196,6 @@ export default {
     window.openNFCScanCallBack = null
   },
   methods: {
-    onLoad(){
-
-    },
     //长度校验
     validator(val) {
       let len = val.length;
@@ -220,7 +216,6 @@ export default {
     checkNFC(){
       //设置nfc调用后的回调
       window.openNFCScanCallBack = this.openNFCScanCallBack;
-
       //设置loading弹窗
       this.$toast.loading({
         duration: 0, // 持续展示 toast
@@ -297,6 +292,7 @@ export default {
       format = format || 'YYYY-MM-DD'
       return `${this.dayjs(start).format(format)} ~ ${this.dayjs(end).format(format)}`;
     },
+
     //插入检查项
     addItem(val) {
       console.log(val, 'list')
@@ -331,9 +327,11 @@ export default {
         }
       })
     },
+
     goBack() {
       this.active = true
     },
+
     getState(state) {
       switch (state){
         case '待检查':
@@ -375,76 +373,20 @@ export default {
         this.activeNames = this.checkList.map(v => v.itemName);
       })
     },
-    //保存数据
-    saveData() {
-      //验证必填项
-      // let pointData = []
-      // this.checkList.forEach(v => {
-      //   v.pointList.forEach(item => {
-      //     pointData.push(item)
-      //   })
-      // })
-      // let arr = pointData.filter(v => {
-      //   if (v.status === 1) {
-      //     return !v.remark || !v.rectificationDeadline
-      //   }
-      // })
-      //if (arr.length) return this.$toast(`${arr[0].itemName}:该信息不完整请填写`)
-      this.taskInfo.isSubmit = 0;
-      registerSubmit(this.taskInfo).then(res => {
-        this.$toast('保存成功')
-        this.$router.replace({
-          path: '/securityCheckRegister'
-        })
-      })
-    },
-
-    //提交数据
-    submitData() {
-      //验证必填项
-      let pointData = this.checkList.flatMap(v => v.pointList);
-      let allNfcList = pointData.flatMap(v=>v.nfcList);
-      let result = allNfcList.some(v=>v.status != 1);
-      //some函数的用法
-      if(result){
-        this.$toast('请先扫描NFC标签');
-        return;
-      }
-      let arr = pointData.filter(v => {
-        if (v.status === 1) {
-          return !v.remark || !v.rectificationDeadline
-        }
-      })
-      if (arr.length) return this.$toast(`${arr[0].itemName}:该信息不完整请填写`);
-      this.taskInfo.isSubmit = 1;
-      registerSubmit(this.taskInfo).then(res => {
-        this.$toast('提交成功')
-        this.$router.replace({
-          path: '/securityCheckRegister'
-        })
-      })
-    },
-
-    //授权
-    accredit() {
-      let { checkOrgId, ymdDate, planId, beCheckedOrgId, id } = this.taskInfo
-      console.log(checkOrgId, 'checkOrgId')
-      this.$router.push({
-        path: '/addWorker',
-        query: {
-          orgId: checkOrgId,
-          ymdDate,
-          planId,
-          beCheckedOrgId,
-          taskId: id
+    //点击NFC数字图标
+    clickNFCNum(arr) {
+      arr.forEach(v=>{
+        if(v.status){
+          this.fullList.push(v);
+        }else {
+          this.unmetList.push(v)
         }
       })
+      this.total_show =true;
     },
-    //点击NFC图标
-    clickNFC(arr) {
-      this.NFCList = arr;
-      console.log(this.NFCList,'NFCList')
-      //this.$refs.NfcPopup.show(arr);
+    closedNfcList(){
+      this.fullList = [];
+      this.unmetList = [];
     },
     //清空数据
     clearData() {
@@ -484,6 +426,9 @@ export default {
   .van-collapse-item__content{
     padding: 0 30px 0px 30px;
   }
+  .van-tabs__content{
+    border-top:2px solid #eaeaea;
+  }
 }
 </style>
 <style lang="scss" scoped>
@@ -547,7 +492,7 @@ export default {
   .nfc-icon {
     width: 50px;
     height: 50px;
-    margin-left: 20px;
+    margin: 0 20px;
   }
   .custom-title {
     align-self: center;
@@ -594,5 +539,11 @@ export default {
       height: 30px;
     }
   }
+  .nfc-list{
+    min-height: 300px;
+    max-height: 600px;
+    overflow: auto;
+    padding: 10px 0;
+  }
 }
 </style>