cellsysArt/components/Signature/write.vue

<template>
  <div class="signature-pad">
    <div class="container">
      <vue-signature-pad
          ref="signaturePadRef"
          :scaleToDevicePixelRatio="false"
          :options="options"></vue-signature-pad>
    </div>
    <div class="dialog-footer">
      <el-button
          style="margin-left: 20px"
          @click="close">
        取消
      </el-button>
      <el-button
          type="danger"
          style="margin-left: 20px"
          @click="clear">
        清除
      </el-button>
      <el-button
          plain
          type="primary"
          :loading="btnloading"
          style="margin-left: 20px"
          @click="save">
        保存
      </el-button>
    </div>
  </div>
</template>

<script>
import {artApi} from '../../artApi.js';
import {ElMessageBox} from 'element-plus';
import {base64toFile} from '../../utils/utils.js';
import ArtSystem from '../../artSystem.js';
import {VueSignaturePad} from 'vue-signature-pad';

export default {
  name: 'write',
  components: {VueSignaturePad},
  emits: ['save', 'close'],
  props: {
    role: String,
    id: Number,
    module: {
      type: String, //签名图片上传的所属模块
    },
  },
  data() {
    return {
      signaturePadKey: 0,
      dialogVisible: false,
      options: {
        penColor: '#000',
        onBegin: () => {
          //该签名组件有bug，在非移动端环境下需要重新渲染canvas的尺寸才能正常使用
          this.$refs.signaturePadRef.resizeCanvas();
        },
      },
      uploadApi: `/v2${artApi.artUploadPicture}`, //事件图片上传api地址
      btnloading: false,
    };
  },
  mounted() {
    // 如果是移动端设备，强制横屏
    // if (window.innerWidth < window.innerHeight) {
    //     this.lockOrientation();
    // }
  },
  beforeUnmount() {
    //组件销毁时退出横屏
    this.exitFullscreenAndRestoreOrientation();
  },
  methods: {
    // 退出全屏并恢复竖屏
    exitFullscreenAndRestoreOrientation() {
      // 恢复屏幕方向
      if (screen.orientation && screen.orientation.unlock) {
        // screen.orientation.unlock();
        screen.orientation.lock('portrait');
      } // 退出全屏
      if (document.exitFullscreen && document.fullscreenElement !== null) {
        document.exitFullscreen();
      }
    },
    lockOrientation() {
      if (document.documentElement.requestFullscreen) {
        document.documentElement
            .requestFullscreen()
            .then(() => {
              // 全屏成功后锁定横屏
              screen.orientation.lock('landscape').catch((err) => {
                console.error('无法锁定横屏:', err);
              });
            })
            .catch((err) => {
              console.error('全屏失败:', err);
              ElMessageBox.alert('请使用横屏进行签名', '提示', {
                confirmButtonText: '确定',
                callback: () => {
                  this.lockOrientation();
                },
              });
            });
      } else {
        console.error('当前浏览器不支持全屏API');
      }
    },

    close() {
      this.exitFullscreenAndRestoreOrientation();
      this.$emit('close');
    },
    clear() {
      this.$refs.signaturePadRef.clearSignature();
    },

    save() {
      const signatureData = this.$refs.signaturePadRef.saveSignature();
      this.btnloading = true;
      let base64Url = signatureData.data;
      let files = base64toFile(base64Url);
      ArtSystem.uploadImage({
        files: files,
        module: this.module,
      })
          .then((res) => {
            let {code, data, message} = res;
            if (code !== 200) {
              this.$message({
                message: '签名图片提交失败！原因：' + message,
                type: 'error',
              });
              return;
            }
            const imageUrl = data.img_path;
            this.$emit('save', imageUrl);
          })
          .catch((error) => {
            console.error(error);
            this.$emit('error', error);
            this.$message({
              message: error,
              type: 'error',
            });
          })
          .finally(() => {
            this.btnloading = false;
          });
    },
    /*uploadSignatureImage(signatureData) {
        this.btnloading = true;
        let base64Url = signatureData.data;
        let files = base64toFile(base64Url);
        ArtSystem.uploadImage({
            files: files,
            module: this.module,
        })
            .then((res) => {
                let { code, data, message } = res;
                if (code !== 200) {
                    this.$message({
                        message: '签名图片提交失败！原因：' + message,
                        type: 'error',
                    });
                    return;
                }
                const imageUrl = data.img_path;
                this.$emit('uploadSignatureImage', imageUrl);
            })
            .catch((error) => {
                console.error(error);
                this.$emit('error', error);
                this.$message({
                    message: error,
                    type: 'error',
                });
            })
            .finally(() => {
                this.btnloading = false;
            });
    },*/
  },
};
</script>

<style scoped>
.signature-pad {
  width: 100%;
  height: 100%;
  padding: 5px;
}

.container {
  width: 100%;
  height: calc(100% - 120px);
  padding: 8px;
  border: 1px solid;
}

.dialog-footer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  height: 100px;

  .otherSet {
    width: 40%;
    display: flex;
    align-items: center;

    .b1 {
      width: 4px;
      height: 4px;
    }

    .b2 {
      width: 6px;
      height: 6px;
    }

    .b3 {
      width: 8px;
      height: 8px;
    }

    .b1,
    .b2,
    .b3 {
      display: inline-block;
      background: #000;
      border-radius: 50%;
    }

    .active {
      border: 1px dashed #0074d9;
    }

    .circleWrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 18px;
      height: 18px;
      cursor: pointer;
      margin-right: 20px;
    }

    .penTxt {
      width: 70px;
      font-size: 12px;
      color: #000;
    }
  }
}

:deep(.el-card) {
  height: 25%;
  width: 50%;
}

:deep(.el-card__body) {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.svgClass {
  width: 5rem;
  height: 5rem;
  margin-bottom: 2rem;
}
</style>