电子签名 vue-signature-pad

main.js

import VueSignature from 'vue-signature-pad'
Vue.use(VueSignature)

引用电子签名弹窗

<hand-painted-signature
        ref="handpaintedSignature"
        :caseId="caseId"
        @handleSignDialog="handleSignDialog"
        :signatureFlag="signatureFlag"
        :materialType="materialType"
      ></hand-painted-signature>

查询已经签过的名

querySign(){
      this.$API
        .Get('autograph/query', {})
        .then(res => {
           if (res.code !== 1) {
            this.$utils.message('error', res.msg)
            return
          }
          if (res.code === 1) {
            let data = res.data
            this.signatureFlag = true
            this.$nextTick(() => {
              this.$refs.handpaintedSignature.fromData(data[0])
            })
          }
        })
        .catch(err => {
          console.error('processForm--->queryBindSign()', err)
          this.$utils.message('error', this.$t('catchContent'))
        })
    },
    //手动操作签名dialog
    handleSignDialog(type) {
      this.signatureFlag = type
    },

电子签名弹窗

<template>
  <el-dialog
    class="sign"
    width="40%"
    :visible.sync="showSignature"
    :before-close="handleClose"
    title="签名"
  >
    <el-row style="border: 1px solid #ccc; margin-bottom: 18px">
      <el-col :span="24">
        <VueSignaturePad
          id="signature"
          width="100%"
          height="300px"
          ref="signaturePad"
          :options="options"
        ></VueSignaturePad>
      </el-col>
    </el-row>
    <el-row>
      <el-button
        style="color: #409eff; border-color: #c6e2ff; background-color: #ecf5ff"
        @click="clear"
      >
        重签
      </el-button>
      <el-button @click="save" :loading="loading" type="primary">确认</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  name: 'handPaintedSignature',
  props: {
    caseId: {
      type: String,
    },
    signatureFlag: {
      type: Boolean,
    },
    materialType: {
      type: Number,
    },
  },
  data() {
    return {
      id: undefined,
      userId: undefined,
      options: {
        penColor: '#000',
      },
      signatureImaUrl: {
        fileUrl: '',
      },
      showSignature: false,
      loading: false,
    }
  },
  watch: {
    signatureFlag(val) {
      this.showSignature = val
    },
  },
  mounted() {},
  methods: {
    fromData(data) {
      this.id = data.id
      this.userId = data.userId
      let img = new Image()
      img.src = data.image
      let myCanvas = document.querySelector('#signature canvas').getContext('2d')
      //首次不显示  需要放到onload事件中
      img.onload = function () {
        myCanvas.drawImage(img, 0, 0)
      }
    },
    //需手动操作关闭dialog  再次打开dialog 层级有问题
    handleClose() {
      this.$refs.signaturePad.clearSignature()
      this.$emit('handleSignDialog', false)
    },
    clear() {
      this.$refs.signaturePad.clearSignature()
    },
    save() {
      if (this.$refs.signaturePad.isEmpty()) {
        this.$utils.message('error', '电子签名不能为空')
      } else {
        const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
        this.updateFile(data)
      }
    },
    updateFile(data) {
      console.log(data)
      this.loading = true
      this.$API
        .Post('autograph/addOrUpdate', {
          // caseId: this.caseId,
          // image: data.replace(/^data:image\/\w+;base64,/, ''),
          id: this.id,
          userId: this.userId,
          image: data,
        })
        .then(res => {
          if (res.code === 1) {
            this.$utils.message('success', '保存成功')
            this.$emit('handleSignDialog', false)
            this.$refs.signaturePad.clearSignature()
          } else {
            this.$utils.message('error', '保存失败')
          }
          this.loading = false
        })
        .catch(error => {
          this.loading = false
        })
    },
  },
}
</script>

<style scoped>
/deep/.el-dialog__body {
  padding: 10px 20px 20px 20px;
}
.sign /deep/ .el-dialog__title {
  color: #000;
}
</style>