security-appp/src/views/work-handover.vue

<!--工作交接-->
<template>
  <div>
    <van-overlay :show="loading">
      <div class="wrapper">
        <div class="block">
          <van-loading color="black" vertical>操作中...</van-loading>
        </div>
      </div>
    </van-overlay>
    <van-nav-bar
      title="工作交接"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <van-form label-width="100">
      <van-divider>交接人信息</van-divider>
      <van-field name="handoverFromUpload" label="人脸照片">
        <template #input>
          <van-uploader v-model="handoverFromUpload" accept="image/*" capture="camera" max-count="1" disabled/>
        </template>
        <template #button>
          <van-button type="info" @click="takePicture(true)">拍摄并识别</van-button>
        </template>
      </van-field>
      <van-field
        v-model="form.handoverFrom"
        name="交接人"
        label="交接人"
        placeholder="识别后自动填充"
        disabled
      />
      <van-field
        v-model="form.handoverFromIdCard"
        name="交接人工号/身份证"
        label="交接人工号/身份证"
        placeholder="识别后自动填充"
        disabled
      />
      <van-divider>被交接人信息</van-divider>
      <van-field name="handoverFromUpload" label="人脸照片">
        <template #input>
          <van-uploader v-model="handoverToUpload" accept="image/*" capture="camera" max-count="1" disabled/>
        </template>
        <template #button>
          <van-button type="info" @click="takePicture(false)">拍摄并识别</van-button>
        </template>
      </van-field>
      <van-field
        v-model="form.handoverTo"
        name="被交接人"
        label="被交接人"
        placeholder="识别后自动填充"
        disabled
      />
      <van-field
        v-model="form.handoverToIdCard"
        name="被交接人工号/身份证"
        label="被交接人工号/身份证"
        placeholder="识别后自动填充"
        disabled
      />
      <div style="margin: 16px">
        <van-button
          round
          block
          type="danger"
          @click="submitData()"
        >开始交接
        </van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { workHandoverCheck } from "@/api/work";
import { handoverFaceMatch } from "@/api/index";
import func from "@/util/func";

export default {
  name: "work-transfer",
  mounted() {
    window.match = this.match;
    window.takePictureError = this.takePictureError;
  },
  data() {
    return {
      form: {
        handoverFrom: '', //交接人
        handoverTo: '', //被交接人
        handoverFromType: 1,
        handoverToType: 1,
        handoverToIdCard: '',
        handoverFromIdCard: '',
        handoverFromAcc: '',
        handoverToAcc: ''

      },
      handoverFromUpload: [],
      handoverToUpload: [],
      loading: false,
      validateFrom: false,
      validateTo: false,
    }
  },
  methods: {
    submitData() {
      if (!this.validateFrom || !this.validateTo) {
        return this.$dialog.alert({ message: "请完成身份识别后再试" })
      }
      this.$toast({ type: 'loading', forbidClick: true, loadingType: 'spinner', duration: 0 })
      let data = this.form;
      if (1 === this.form.handoverFromType) {
        data.handoverFromAcc = this.form.handoverFromIdCard
      }
      if (1 === this.form.handoverToType) {
        data.handoverToAcc = this.form.handoverToIdCard
      }
      workHandoverCheck(data).then((res) => {
        if (res.data.code !== 200) {
          return this.$dialog.alert({ message: res.data.msg })
        }
        this.$toast.clear()
        this.$router.push({ name: 'work-handover-form', params: { handoverData: this.form } })
      }).catch((err) => {
        this.$toast.clear()
        this.$dialog.alert({ message: err })
      })
    },
    match(hadoverFrom, fileData, fileExt) {
      var faceFile = func.base64ImageToFile(fileData, fileExt);
      var faceImages = [];
      faceImages.push({
        content: fileData,
        file: faceFile,
        message: '',
        status: 'done',
        isImage: true
      });
      if (hadoverFrom) {
        this.handoverFromUpload = faceImages;
      } else {
        this.handoverToUpload = faceImages;
      }
      this.loading = true;
      handoverFaceMatch(faceFile).then(res => {
        if (res.data.code === 200) {
          const facevo = res.data.data;
          if (hadoverFrom) {
            this.form.handoverFrom = facevo.fullName;
            this.form.handoverFromType = facevo.outsiders ? 2 : 1;
            this.form.handoverFromIdCard = facevo.idCardNo;
            this.validateFrom = true;
          } else {
            this.form.handoverTo = facevo.fullName;
            this.form.handoverToType = facevo.outsiders ? 2 : 1;
            this.form.handoverToIdCard = facevo.identNo;
            this.validateTo = true;
          }
          this.loading = false;
        } else {
          this.loading = false;
          this.$dialog.alert({ message: res.data.data })
        }
      }).catch(err => {
        this.loading = false;
        this.$dialog.alert({ message: err })
      })
    },
    takePicture(isFrom) {
      window.qing.call('selectPic', {
        'type': 'camera',
        'success': function (res) {
          if ("true" == res.success) {
            // eslint-disable-next-line no-undef
            match(isFrom, 'data:image/' + res.data.fileExt + ';base64,' + res.data.fileData, res.data.fileExt);
          } else if ("false" == res.success) { 
            // eslint-disable-next-line no-undef
            takePictureError(res.errorCode + '' + res.error);
          }
        },
        'error': function (err) {
          // eslint-disable-next-line no-undef
          takePictureError(JSON.stringify(err));
        }
      })
    },
    takePictureError(errMsg) {
      return this.$dialog.alert({ message: '拍摄失败！' + errMsg })
    }
  }

}
</script>

<style scoped>
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 120px;
    height: 120px;
    background-color: #ffffff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>