bjquanjiang
/
DigitalScholl


			
				
					
						
						
							
							<template>
  <view>
    <l-label title="流程名称：">{{ taskParam.taskName }}</l-label>
    <l-label title="当前操作：">{{ typeText }}{{ type === 'sign' ? '' : ` [${taskParam.name}]` }}</l-label>
    <l-organize-picker
      v-if="type === 'sign'"
      v-model="staff"
      title="加签人员"
      placeholder="请选择加签人员"
      type="user"
      required
      arrow
    />

    <!-- 手写签名 canvas 区 -->
    <template v-if="Number(taskParam.isSign) === 1">
      <view class="cu-form-group"><view class="title">手写签名：</view></view>
      <view class="sign-area bg-white">
        <canvas
          v-if="canvas"
          @touchmove="signMove"
          @touchstart="signStart($event)"
          @touchend="signEnd"
          @touchcancel="signEnd"
          disable-scroll="true"
          canvas-id="sign-canvas"
          id="sign-canvas"
          class="sign-canvas"
        ></canvas>
      </view>
      <view class="sign-action padding-bottom text-right">
        <l-button @click="clearSign" color="red" style="margin-right: 15px;">清空签名板</l-button>
      </view>
    </template>

    <l-textarea v-model="remark" :placeholder="`输入${typeText}备注`" title="备注：" />

    <view class="padding margin-top bg-white">
      <l-button @click="submit" class="block" size="lg" color="green" block>提交流程{{ typeText }}</l-button>
    </view>
  </view>
</template>

<script>
import get from 'lodash/get'

let context = null
let touchs = []

export default {
  data() {
    return {
      type: 'sign',
      typeText: '',

      staff: '',
      remark: '',
      taskParam: {},
      canvas: true
    }
  },

  async onLoad() {
    await this.init()
  },

  methods: {
    // 页面初始化
    async init() {
      this.taskParam = this.GET_PARAM()
      this.type = this.taskParam.type
      this.typeText = this.taskParam.type === 'sign' ? '加签' : '审核'

      if (Number(this.taskParam.isSign) === 1) {
        this.canvasInit()
      }
    },

    // 初始化签名区 canvas
    canvasInit() {
      this.canvas = true
      context = uni.createCanvasContext('sign-canvas')
      context.setStrokeStyle('#000')
      context.setLineWidth(5)
      context.setLineCap('round')
      context.setLineJoin('round')
      touchs = []
    },

    // 点击「提交」按钮
    async submit() {
      if (this.type === 'sign' && !this.staff) {
        this.CONFIRM('请补全必填项', '必须指定一个加签用户')
        return
      }

      const postData = {
        operationCode: this.taskParam.code,
        operationName: this.taskParam.name,
        processId: this.taskParam.processId,
        taskId: this.taskParam.taskId,
        des: this.remark,
        formreq: this.taskParam.formreq
      }

      if (this.type === 'sign') {
        postData.userId = this.staff
      } else {
        postData.auditors = this.taskParam.auditors
      }

      // 需要手写签名时，将 canvas 导出为 base64 格式
      // 各个平台写法均不相同，需要注意
      if (Number(this.taskParam.isSign) === 1) {
        // H5 平台，canvasToTempFilePath 的结果直接为画布的 base64
        // #ifdef H5
        const [err, { tempFilePath }] = await uni.canvasToTempFilePath({ canvasId: 'sign-canvas' })
        postData.signUrl = tempFilePath
        // #endif

        // App 平台，canvasToTempFilePath 输出文件，上传后台转为 base64 格式
        // #ifdef APP-VUE
        const [err, { tempFilePath }] = await uni.canvasToTempFilePath({ canvasId: 'sign-canvas' })
        const signBase64 = await this.HTTP_UPLOAD('/annexes/wxtobase64', tempFilePath)
        postData.signUrl = 'data:image/png;base64,' + signBase64
        // #endif

        // 微信小程序，canvasToTempFilePath 输出文件，使用文件管理器以 base64 格式读取文件即可
        // #ifdef MP-WEIXIN
        const [err, { tempFilePath }] = await uni.canvasToTempFilePath({ canvasId: 'sign-canvas' })
        postData.signUrl = 'data:image/png;base64,' + uni.getFileSystemManager().readFileSync(tempFilePath, 'base64')
        // #endif

        // #ifdef MP-ALIPAY
        // 钉钉小程序，context.toTempFilePath 输出文件，上传后台转为 base64 格式
        // #ifdef MP-DINGTALK
        const filePath = await new Promise((res, rej) => {
          context.toTempFilePath({
            success: ({ filePath }) => {
              res(filePath)
            },
            fail: () => {
              rej()
            }
          })
        })

        const signBase64 = await this.HTTP_UPLOAD('/annexes/wxtobase64', filePath)
        postData.signUrl = 'data:image/png;base64,' + signBase64
        // #endif

        // 支付宝小程序，context.toDataURL 直接输出 base64 字符串
        // #ifndef MP-DINGTALK
        postData.signUrl = await context.toDataURL('image/png', 1)
        // #endif
        // #endif
      }

      const success = await this.HTTP_POST(
        this.type === 'sign' ? 'learun/adms/newwf/sign' : 'learun/adms/newwf/audit',
        postData,
        `提交[${this.typeText}]时发生错误`
      )

      if (!success) {
        return
      }

      this.EMIT('task-list-change')
      this.NAV_BACK(2)
      this.TOAST(`已成功提交${this.typeText}`, 'success')
    },

    // 手写板事件（开始拖动）
    signStart(e) {
      touchs.push({
        x: e.changedTouches[0].x,
        y: e.changedTouches[0].y
      })
    },

    // 手写板事件（拖动签名）
    signMove(e) {
      touchs.push({
        x: e.touches[0].x,
        y: e.touches[0].y
      })
      this.drawLine()
    },

    // 手写板事件（签名结束）
    signEnd(e) {
      touchs = []
    },

    // 手写板事件（绘出线型）
    drawLine() {
      if (touchs.length < 2) {
        return
      }

      const [p1, p2] = touchs
      touchs.shift()
      context.moveTo(p1.x, p1.y)
      context.lineTo(p2.x, p2.y)
      context.stroke()
      context.draw(true)
    },

    // 清除手写板
    // 阿里小程序无法使用 clearRect 来清空，因此直接重新渲染 canvas
    clearSign() {
      // #ifndef MP-ALIPAY
      context.clearRect(0, 0, 9999, 9999)
      context.draw()
      context.setStrokeStyle('#000')
      context.setLineWidth(5)
      context.setLineCap('round')
      context.setLineJoin('round')
      // #endif

      // #ifdef MP-ALIPAY
      // 阿里系小程序无法 clearRect 清空画布，必须重新渲染 canvas
      this.canvas = false
      this.$nextTick(() => {
        this.canvasInit()
      })
      // #endif
    }
  }
}
</script>

<style lang="less" scoped>
.sign-area {
  min-height: 500rpx;
  margin: 23rpx;
  border: 2rpx dashed #444444;

  .sign-canvas {
    width: 700rpx;
    height: 500rpx;
  }

  .sign-action {
    text-align: right;
  }
}
</style>