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

src/api/public.js

@@ -126,6 +126,15 @@ export function upload(data, type) {
   })
 }
 
+//上传base64文件
+export function uploadBase64(data) {
+  return request({
+    url: '/file/file/uploadBase64',
+    method: 'post',
+    data
+  })
+}
+
 //修改前的 机构树  组织机构用户使用的树
 export function userAndOrgTree(removeId) {
   return request({

src/components/nfcPopup/gxmore.vue

@@ -0,0 +1,269 @@
+<template>
+  <div class="nfc-popup">
+    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll>
+      <div class="nfc-panel">
+        <div>
+          <p v-if="showBottomBox" class="top-text">将手机背部靠近NFC标签扫描</p>
+          <div class="image-box">
+            <img class="background-image" v-if="!nfcImage" src="../../assets/img/NFCphone.png" alt="" >
+            <img class="nfc-image" v-else :src="imgUrl(nfcImage)" alt="" @click="nfcTakePhotos">
+          </div>
+<!--          <p v-if="file" style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{'文件名:'+file}}</p>-->
+          <p v-if="imageError">{{'Error:'+imageError}}</p>
+          <div v-if="showBottomBox" class="bottom-box">
+            <div>
+              <img :src="require('../../assets/img/icon/NFC扫描-01.png')" />
+              <span @click="nfcCheck">NFC</span>
+            </div>
+            <div>
+              <img :src="require('../../assets/img/icon/camera.png')" />
+              <span @click="nfcTakePhotos">拍照</span>
+            </div>
+
+          </div>
+          <div v-else>
+            <select-cell title="需要拍照的NFC" @change="changeNFC" v-model="selectNFC" :prop="prop" :dataList="dataList"/>
+            <van-button v-if="showBtn" type="info"  size="small" block @click="onConfirm">确认该照片</van-button>
+          </div>
+        </div>
+      </div>
+      <input v-show="false" ref="upload"  type='file' accept="image/*" capture="camera" @click="useCamera(1)"/>
+<!--      <input v-show="false" ref="upload"  type='file' accept="image/*" capture="camera" @change="fileChange"/>-->
+    </van-popup>
+  </div>
+</template>
+
+<script>
+import SelectCell from "@/components/selectCell";
+import {baseImg} from "@/views/menu/LZRegister/api";
+import {upload, uploadBase64} from "@/api/public";
+import ImageCompressor from "js-image-compressor";
+import config from "@/config";
+export default {
+  components:{SelectCell},
+  data(){
+    return {
+      //nfc弹窗
+      visible:false,
+      //上传的nfc图片
+      nfcImage:null,
+      //是否显示底部按钮
+      showBottomBox:true,
+      //nfc数据
+      dataList:[],
+      //选中的nfc
+      selectNFC:null,
+      //自定义字段
+      prop:{
+        label:'checkName',
+        value:'nfccdoe'
+      },
+      //提交按钮
+      showBtn:false,
+      file:null,
+      imageError:null
+    }
+  },
+  mounted() {
+    window.openCameraCallBack = this.openCameraCallBack;
+  },
+  watch:{
+    visible(val){
+      if(!this.visible){
+        this.clear();
+      }
+    }
+  },
+  methods:{
+    openCameraCallBack(data){
+      let img =  JSON.parse(data);
+      this.content = data;
+      let params = {
+        extension:img.extension,
+        content:img.content,
+
+      }
+      uploadBase64(params).then(res=>{
+        //上传成功后，将图片显示在页面上并禁用退出
+        this.nfcImage =  res.data.url;
+        this.showBottomBox = false;
+      })
+
+    },
+    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;
+      }
+    },
+    useCamera(actionType){
+      let parms = {};
+      if(actionType){
+        parms.actionType = actionType;
+      }
+      let system = this.isAndroidOrIos();
+      if(system === 1){
+        //android
+        // 判断当前环境是是否存在 js桥 'sap'
+        const hasSap = window.hasOwnProperty('sap');
+        if (hasSap) {
+          // 判断是否存在方法 ?preview
+          const fun = sap.hasOwnProperty('openCamera');
+          if (fun) {
+            sap.openCamera(JSON.stringify(parms));
+          }
+        }
+      }
+
+      if(system === 2){
+        //ios
+        // 判断 ios是否存在方法 preview
+        const preview = window.webkit.messageHandlers.hasOwnProperty('openCamera')
+        if (preview) {
+          window.webkit.messageHandlers.openCamera.postMessage(JSON.stringify(parms))
+        }
+      }
+    },
+    //nfc扫描
+    nfcCheck(){
+      this.$emit('checkNFC');
+    },
+    onConfirm(){
+      if(!this.selectNFC) return this.$toast('请选择NFC');
+      let data = {
+        nfcCode:this.selectNFC,
+        url: this.nfcImage,
+      }
+      this.$emit('change',data);
+      this.visible = false;
+      this.clear();
+    },
+    //切换nfc后可点击退出
+    changeNFC(){
+      this.showBtn = true;
+    },
+    //清空数据
+    clear(){
+      this.nfcImage = null;
+      this.showBottomBox = true;
+      this.selectNFC = null;
+      this.dataList = [];
+      this.file = null;
+      this.imageError = null;
+    },
+    //显示弹窗
+    show(list){
+      this.visible = true;
+      this.dataList = list;
+    },
+    //上传前
+    async fileChange(e){
+      let file = e.target.files[0];
+      this.file = e.target.files[0].name;
+     // let fileName = e.target.files[0].name;
+      let imgFile = await this.imageCompress(file);
+      let formData = new FormData();
+      formData.append('file',imgFile);
+      upload(formData,'image').then(res=>{
+        //上传成功后，将图片显示在页面上并禁用退出
+        this.nfcImage =  res.data.url;
+        this.showBottomBox = false;
+      })
+    },
+    //压缩图片
+    imageCompress(file){
+       this.file = file.name;
+       return new Promise((resolve,reject)=>{
+        new ImageCompressor({
+          file,
+          quality: 0.6,
+          success: (result) => {
+            //this.$toast('图片压缩成功')
+            console.log(result,'图片压缩后')
+            let img = new File([result], result.name, {
+              width: result.width,
+              height: result.height,
+              type: result.type,
+            });
+            resolve(img);
+          },
+          error: (e) => {
+            console.log('imageError:'+e);
+            this.$toast('图片压缩失败')
+            this.imageError = e;
+            reject(e);
+          },
+        });
+      });
+    },
+    //拍照
+    nfcTakePhotos(){
+      this.file = null;
+      this.imageError = null;
+      this.$refs.upload.click();
+    },
+  }
+}
+</script>
+<style lang="scss">
+#app{
+  .nfc-popup{
+    .van-popup--center{
+      border-radius: 20px;
+    }
+  }
+}
+</style>
+<style scoped lang="scss">
+.nfc-panel{
+  width: 400px;
+  >div{
+    padding: 30px;
+  }
+}
+.top-text{
+  text-align: center;
+  font-size: 26px;
+}
+.image-box{
+  width: 100%;
+  height: 350px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.background-image{
+  width:240px;
+  height: 240px;
+}
+.nfc-image{
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+}
+.bottom-box{
+  display: flex;
+  justify-content: space-around;//
+  align-items: center;
+  >div{
+    display: flex;
+    flex-direction: column;
+    &:active{
+      opacity: .5;
+    }
+    >img{
+      width: 70px;
+      height: 70px;
+    }
+    >span{
+      text-align: center;
+      font-size: 25px;
+    }
+  }
+}
+</style>

src/components/upload/gxuploader.vue

@@ -0,0 +1,183 @@
+<template>
+    <div>
+        <van-uploader
+          ref="uploader"
+          v-bind="$attrs"
+          v-model="fileList"
+          @click-upload="useCamera(1)"
+          :max-count="maxCount"
+          @delete="deleteHandler"
+          :max-size="maxSize * 1024*1024"/>
+    </div>
+</template>
+<script>
+import {upload, uploadBase64} from "@/api/public";
+import ImageCompressor from "js-image-compressor";
+import {imgUrl} from "@/utils";
+export default {
+    props:{
+      value:{
+        type: Array,
+      },
+      //最大上传数量
+      maxCount:{
+        type: Number,
+        default: 6,
+      },
+      //文件大小，单位MB
+      maxSize:{
+        type: Number,
+        default: 5,
+      },
+
+    },
+    data() {
+      return {
+        //组件显示用
+        fileList:[],
+        //上传之后的图片列表，双向绑定之后覆盖fileList
+        imageList:[]
+      };
+    },
+
+    mounted() {
+
+    },
+    watch:{
+      value:{
+        handler(val){
+          if(!val || val.length === 0) {
+            this.imageList = [];
+            return
+          }
+          this.fileList = val.map(v=>{
+            v.url = imgUrl(v.imgPath);
+            return v
+          })
+          this.imageList = JSON.parse(JSON.stringify(this.fileList));
+        },
+        immediate:true
+      }
+    },
+    methods: {
+      openCameraCallBack(data){
+        let img =  JSON.parse(data);
+        this.content = data;
+        let params = {
+          extension:img.extension,
+          content:img.content,
+
+        }
+        uploadBase64(params).then(res=>{
+          /*上传成功*/
+          this.$toast.success('上传成功')
+          this.imageList.push({ name: res.data.name, url: imgUrl(res.data.url),imgPath:res.data.url});
+          this.$emit('input',this.imageList)
+        }).catch((err) => {
+          /*上传失败*/
+          this.$toast.fail('上传失败')
+          this.fileList.splice(this.fileList.length-1,1);
+        });
+      },
+      useCamera(actionType){
+        window.openCameraCallBack = null;
+        window.openCameraCallBack = this.openCameraCallBack;
+        let parms = {};
+        if(actionType){
+          parms.actionType = actionType;
+        }
+        let system = this.isAndroidOrIos();
+        if(system === 1){
+          //android
+          // 判断当前环境是是否存在 js桥 'sap'
+          const hasSap = window.hasOwnProperty('sap');
+          if (hasSap) {
+            // 判断是否存在方法 ?preview
+            const fun = sap.hasOwnProperty('openCamera');
+            if (fun) {
+              sap.openCamera(JSON.stringify(parms));
+            }
+          }
+        }
+
+        if(system === 2){
+          //ios
+          // 判断 ios是否存在方法 preview
+          const preview = window.webkit.messageHandlers.hasOwnProperty('openCamera')
+          if (preview) {
+            window.webkit.messageHandlers.openCamera.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;
+        }
+      },
+      //上传前压缩
+      beforeRead(file){
+        console.log(file,'图片压缩前')
+        return new Promise((resolve, reject) => {
+            new ImageCompressor({
+              file,
+              quality: 0.6,
+              success: (result) => {
+                //this.$toast('图片压缩成功')
+                console.log(result,'图片压缩后')
+                let imgFile = new File([result], result.name, {
+                  width: result.width,
+                  height: result.height,
+                  type: result.type,
+                });
+                console.log(imgFile,'后')
+                resolve(imgFile);
+              },
+              error: (e) => {
+                console.log('imageError:'+e);
+                this.$toast('图片压缩失败')
+                reject(e);
+              },
+            });
+        });
+      },
+      //上传到服务器
+      afterRead(fileObj){
+        let formData = new FormData();
+        formData.append("file", fileObj.file);
+        upload(formData, "image").then((res) => {
+          /*上传成功*/
+          this.$toast.success('上传成功')
+          this.imageList.push({ name: res.data.name, url: imgUrl(res.data.url),imgPath:res.data.url});
+          this.$emit('input',this.imageList)
+        }).catch((err) => {
+          /*上传失败*/
+          this.$toast.fail('上传失败')
+          this.fileList.splice(this.fileList.length-1,1);
+        });
+      },
+      //删除
+      deleteHandler(){
+        let imageList=JSON.parse(JSON.stringify(this.fileList));
+        console.log(imageList,'imageList')
+        this.$emit('input',imageList)
+      }
+    },
+    model:{
+      prop:'value',
+      event:'input'
+    }
+};
+</script>
+<style lang="scss" scoped>
+  .upload-text{
+    font-size: 18px;
+    color: #999;
+    margin-top: 5px;
+  }
+</style>

src/views/menu/resumption/detail.vue

@@ -230,15 +230,16 @@
 <script>
 import { ImagePreview, Dialog } from 'vant'
 import NavBar from '@/components/NavBar/index.vue'
-import Uploader from '@/components/upload/uploader.vue'
+import Uploader from '@/components/upload/gxuploader.vue'
 import SelectCell from '@/components/selectCell/index.vue'
 import { getDict } from '@/api/toConsult'
 import { saveTask, taskDetail } from '@/views/menu/resumption/api'
-import NfcPopup from '@/components/nfcPopup/more'
+import NfcPopup from '@/components/nfcPopup/gxmore'
 import { imgUrl } from '@/utils'
 import dayjs from 'dayjs'
 import { mapGetters } from 'vuex'
 import { ref } from 'vue'
+import {uploadBase64} from "@/api/public";
 
 export default {
   components: {