front/src/views/system/user/profile/components/esign-dialog.vue

<template>
  <div>
    <!-- 做使用el-dialog做签字的弹框 -->
    <el-dialog title="签字" v-if="dialogVisible" :visible.sync="dialogVisible" width="800px" append-to-body>
      <!-- 使用这个签名组件 -->
      <vue-esign
        ref="esign"
        class="mySign"
        :width="800"
        :height="300"
        :isCrop="isCrop"
        :lineWidth="lineWidth"
        :lineColor="lineColor"
        :bgColor.sync="bgColor"
      />
      <span slot="footer" class="dialog-footer fx-row jc-end">
<!--           <el-popover-->
        <!--             placement="top-start"-->
        <!--             title="协议"-->
        <!--             width="200"-->
        <!--             trigger="click"-->
        <!--             content="协议内容">-->
        <!--             <el-button slot="reference">协议</el-button>-->
        <!--        </el-popover>-->

        <div>
          <el-button @click="handleGenerate" type="primary">保存</el-button>
          <el-button @click="handleReset">清空画板</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { submitElectiveModels, saveEsign, getStudentElectiveModels } from '@/api/webApi/elective/selected-subject'

export default {
  data() {
    return {
      selectedList: [],
      dialogVisible: false, // 弹框是否开启
      lineWidth: 3, // 画笔的线条粗细
      lineColor: '#000000', // 画笔的颜色
      bgColor: '', // 画布的背景颜色
      base64Img: '', // 最终画布生成的base64图片
      isCrop: false // 是否裁剪，在画布设定尺寸基础上裁掉四周空白部分
    }
  },
  inject: {
    'refreshData': {
      default: function() {
        // do nothing
      }
    }
  },
  methods: {
    open(selectedList) {
      this.selectedList = selectedList
      this.dialogVisible = true
    },
    // 清空画板
    handleReset() {
      this.$refs.esign.reset()
    },
    saveELective() {
      submitElectiveModels({
        models: this.selectedList
        // esign:this.base64Img
      }).then(res => {
        if (res.code == 200) {
          this.dialogVisible = false
          this.$message.success('报名成功')
          this.loadStudentSelected()
          this.getStudentElectiveModels()
        }

        console.log(res)
      })
    },
    // 生成签字图
    handleGenerate() {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          console.log(this.selectedList)
          this.base64Img = res
          this.saveELective()
          // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
          // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
          console.log(this.resultImg)
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
          this.$message({
            type: 'warning',
            message: '请先签名'
          })
          return
        })

      this.dialogVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
#app {
  width: 100%;
  height: 100%;
  padding: 60px;

  .checkMan {
    width: 400px;
    height: 360px;
    text-align: center;
    border: 1px solid #e9e9e9;
    padding-top: 40px;

    h2 {
      margin-bottom: 20px;
    }

    .el-button {
      margin-bottom: 20px;
    }

    img {
      width: 100%;
      height: 200px;
    }
  }
}

::v-deep .el-dialog__body {
  // 设置一下签字区域的虚线边框
  .mySign {
    border: 1px dashed #000;
  }
}
</style>