提交最新代码

puzhibing

6 天以前 0db8c9b94a9ac655549d5eba5c2a6c92ac386c06

 culture/src/components/SignatureCanvas.vue

@@ -16,7 +16,7 @@
</template>

<script>
import { customUploadRequest, getFullUrl } from '@/utils/utils'
import { customUploadRequest, getUploadedFilePath } from '@/utils/utils'
import {editSignPicture} from './service'
export default {
  name: 'SignatureCanvas',
@@ -28,6 +28,7 @@
  },
  data() {
    return {
      roleType: JSON.parse(sessionStorage.getItem('userInfo')).roleType || 1,  // 1.超级管理员 2.审批人 3.工程师 4.实验员
      isDrawing: false,
      context: null,
      lastX: 0,
@@ -54,6 +55,10 @@
      if (val) {
        this.$nextTick(() => {
          this.initCanvas()
          // 如果是实验员，加载保存的签名
          if (this.roleType == 4 || this.roleType == 3) {
            this.loadSavedSignature()
          }
          // 添加窗口大小改变的监听
          window.addEventListener('resize', this.handleResize)
        })
@@ -68,6 +73,10 @@
      // 窗口大小改变时重新初始化画布
      this.$nextTick(() => {
        this.initCanvas()
        // 如果是实验员，重新加载保存的签名
        if ((this.roleType === 4 || this.roleType == 3) && this.savedSignature) {
          this.loadSavedSignature()
        }
      })
    },
    initCanvas() {
@@ -162,6 +171,7 @@
        this.$message && this.$message.warning('请先确认签名')
        return
      }

      // 保存当前画布内容
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)

@@ -180,6 +190,14 @@
      ctx.drawImage(tempCanvas, 0, 0)
      // 导出图片为base64
      const base64Data = canvas.toDataURL('image/png');

      // 如果是实验员，保存签名到sessionStorage
      if (this.roleType == 4 || this.roleType == 3) {
        // 保存当前画布内容（包括背景色）
        // 保存到sessionStorage
        sessionStorage.setItem('experimenterSignature', base64Data)
      }

      // base64转blob
      const blob = this.dataURLtoBlob(base64Data);
      // 新增：生成带时间戳的文件名
@@ -190,10 +208,13 @@
      customUploadRequest({
        file,
        onSuccess: (res) => {
          // 假设返回的图片路径为 res.url
          const url = res.msg || res.data || res
          editSignPicture({ signPicture: res.msg }).then(res => {
            if (res.code == 200) {
          const url = getUploadedFilePath(res)
          if (!url) {
            this.$message.error('上传接口未返回文件地址')
            return
          }
          editSignPicture({ signPicture: url }).then(result => {
            if (result.code == 200) {
              this.$message.success('签名成功');
              this.$emit('confirm', url);
            }
@@ -204,9 +225,30 @@
        }
      });
    },

        // 新增：base64转blob
        dataURLtoBlob(dataurl) {
    // 加载保存的签名到画布（允许修改）
    loadSavedSignature() {
      const savedData = sessionStorage.getItem('experimenterSignature');
      console.log('savedData:,', savedData)
      if (savedData) {
        const canvas = this.$refs.signatureCanvas
        const ctx = this.context
        const img = new Image()
        img.onload = () => {
          // 清空画布
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          // 绘制保存的签名
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
          // 重新绘制虚线边框
          this.drawDashedBorder()
          this.hasDrawn = true
          this.savedSignature = savedData
          // 不锁定画布，允许修改
        }
        img.src = savedData
      }
    },
    // 新增：base64转blob
    dataURLtoBlob(dataurl) {
      const arr = dataurl.split(',');
      const mime = arr[0].match(/:(.*?);/)[1];
      const bstr = atob(arr[1]);
@@ -221,7 +263,7 @@
    // 新增方法：判断画布是否为空白
    isCanvasBlank() {
      return !this.hasDrawn
    }
    },
  },
  beforeDestroy() {
    // 组件销毁前移除监听
@@ -270,4 +312,4 @@
    }
  }
}
</style>
</style>