hrp-ui-base 1.1.0 → 1.2.1

package/src/components/layout/personal-sign/PersonalSignDialog.vue

@@ -0,0 +1,658 @@
+<!--
+ * @description: 个人签名弹窗
+ * @fileName: PersonalSignDialog.vue
+-->
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    title="个人签名"
+    width="600"
+    center
+    show-close
+    close-on-press-escape
+  >
+    <div class="personal-sign-content">
+      <div v-if="!toSignStatus" class="signbox">
+        <div v-if="isSign" class="haveSign">
+          <div class="signImgBox">
+            <el-image style="width: 133px; height: 100px" :src="nowBindUrlMsg" fit="contain" v-if="nowBind" />
+            <!-- 未签名提示 -->
+            <div v-else class="no-sign-tip">
+              <svg class="tip-icon" viewBox="0 0 1024 1024" width="32" height="32">
+                <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" fill="#d9d9d9"/>
+                <path d="M464 336a48 48 0 1 0 96 0 48 48 0 1 0-96 0zm32 120h64c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-64c-4.4 0-8-3.6-8-8V464c0-4.4 3.6-8 8-8z" fill="#d9d9d9"/>
+              </svg>
+              <span class="tip-text">当前还未进行签字</span>
+            </div>
+          </div>
+          <el-button class="sign-btn" type="primary" @click="handleReSignClick">{{ nowBind ? "重签" : "去签字" }}</el-button>
+        </div>
+        <div v-else class="unHaveSign">
+          <div class="unHaveSignUp">
+            <div class="qrCodeImgBox">
+              <QrcodeVue :size="143" :value="codeContent" class="order-print-big-qrcode" ref="QrCodeRef" />
+              <!-- 已扫描状态覆盖层 -->
+              <div v-if="ifScanned" class="qrcode-status-overlay scanned">
+                <svg class="status-icon" viewBox="0 0 1024 1024" width="24" height="24">
+                  <path d="M912 190h-69.9c-9.8 0-19.1 4.5-25.1 12.2L404.7 724.5 207 474a32 32 0 0 0-25.1-12.2H112c-6.7 0-10.4 7.7-6.3 12.9l273.9 347c12.8 16.2 37.4 16.2 50.3 0l488.4-618.9c4.1-5.1.4-12.8-6.3-12.8z" fill="#333333"/>
+                </svg>
+                <span class="status-text">已扫描</span>
+              </div>
+              <!-- 已过期状态覆盖层 -->
+              <div v-if="ifExpired" class="qrcode-status-overlay expired" @click="handleReSignClick">
+                <svg class="status-icon" viewBox="0 0 1024 1024" width="24" height="24">
+                  <path d="M960 416V192l-73.056 73.056a447.712 447.712 0 0 0-373.6-201.088C265.92 63.968 65.312 264.544 65.312 512S265.92 960.032 513.344 960.032a448.064 448.064 0 0 0 415.232-279.488 38.368 38.368 0 1 0-70.272-29.568 371.36 371.36 0 0 1-344.96 232.064c-205.408 0-371.36-165.984-371.36-371.04 0-205.088 165.952-371.04 371.36-371.04 108.896 0 206.752 47.2 274.464 122.016L736 314.016h224a32 32 0 0 0 32-32z" fill="#b0b0b0"/>
+                </svg>
+                <span class="status-text">二维码已过期，点击刷新</span>
+              </div>
+            </div>
+            <div class="qrCodeBtnBox">
+              <el-button type="primary" size="default" @click="handleReturnClick">取消</el-button>
+            </div>
+          </div>
+          <div class="uploadContent">使用钉钉扫码签名或点击上传</div>
+          <div class="uploadContent">为保证签名识别效果最佳，请选择纯白色背景、减少阴影的图片</div>
+          <div class="upload-link">
+            <a href="javascript:;" @click="triggerFileInput">
+              已有签名？点击上传
+            </a>
+          </div>
+          <!-- 隐藏的 file input -->
+          <input 
+            type="file" 
+            ref="fileInput"
+            style="display: none;"
+            accept=".jpg,.jpeg,.png,.bmp,.raw,.heif,.tiff,.gif"
+            @change="handleFileChange"
+          >
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="handleSignSave">保存</el-button>
+      </div>
+    </template>
+    <!-- 图片裁剪弹框 -->
+    <ImageCropper ref="imageCropperRef" @success="handleCropSuccess"></ImageCropper>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import QrcodeVue from 'qrcode.vue'
+import ImageCropper from './ImageCropper.vue'
+import FlowSignController from '../../../api/bms/flow/FlowSignController'
+import FileUploadController from '../../../api/bms/file/FileUploadController'
+
+const dialogVisible = ref<boolean>(false)
+const nowBind = ref<string>('')
+const nowBindUrlMsg = ref<string>('')
+const toSignStatus = ref<boolean>(false)
+const isSign = ref<boolean>(true)
+const currentImgId = ref<string>('')
+
+const codeContent = ref<string>('')
+const qrCodeUUID = ref<string>('')
+const ifScanned = ref<boolean>(false)
+const ifExpired = ref<boolean>(false)
+const qrCodeTimeRecord = ref<any>()
+const queryQrCodeTimeRecord = ref<any>()
+
+const fileInput = ref<HTMLInputElement>()
+const imageCropperRef = ref<any>()
+
+// 允许的图片格式
+const allowedTypes = ['image/jpeg','image/png','image/bmp','image/raw','image/heif','image/tiff','image/gif']
+const allowedExtensions = ['.jpg','.jpeg','.png','.bmp','.raw','.heif','.tiff','.gif']
+const maxSize = 5 * 1024 * 1024
+
+watch(nowBind, () => {
+  isSign.value = true
+})
+
+watch(dialogVisible, (newVal) => {
+  if (newVal === false) {
+    dialogClose()
+  }
+})
+
+const pageId = ref<string>('01-01-04-001')
+
+const uploadOss = async (file: any) => {
+  FileUploadController.upload(file, pageId.value).then((data: any) => {
+    if (data.code === 200 && data.res) {
+      nowBind.value = data.res.url
+      nowBindUrlMsg.value = data.res.url
+      currentImgId.value = data.res.fileId
+      isSign.value = true
+      handleReturnClick()
+    } else {
+      ElMessage.error("数据发生错误，请重新上传!")
+    }
+  }).catch((err) => {
+    ElMessage.error("oss上传发生错误，请重试!")
+    console.error(err)
+  })
+}
+
+const handleReSignClick = async () => {
+  generateQrCode()
+  await updateQrCodeStatus("unscanned")
+  startQueryStatus()
+  isSign.value = false
+}
+
+const handleReturnClick = async () => {
+  await updateQrCodeStatus("expired")
+  clearInterval(qrCodeTimeRecord.value)
+  clearInterval(queryQrCodeTimeRecord.value)
+  isSign.value = true
+}
+
+// 触发文件选择
+const triggerFileInput = () => {
+  if (!fileInput.value) return
+  fileInput.value.click()
+}
+
+const handleFileChange = async (event: any) => {
+  const file = event.target.files[0]
+  if (!file) return
+
+  if (!allowedTypes.includes(file.type)) {
+    ElMessage.error(`仅支持 ${allowedExtensions.join(', ')} 格式`)
+    resetFileInput()
+    return
+  }
+  if (file.size > maxSize) {
+    const maxSizeMB = (maxSize / (1024 * 1024)).toFixed(1)
+    ElMessage.error(`文件大小不能超过 ${maxSizeMB}MB`)
+    resetFileInput()
+    return
+  }
+
+  try {
+    const processedBlob = await extractSignatureImageTransparent(file)
+    imageCropperRef.value?.open(processedBlob)
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('签名图片处理失败')
+  } finally {
+    resetFileInput()
+  }
+}
+
+const resetFileInput = () => {
+  if (fileInput.value) {
+    fileInput.value.value = ''
+  }
+}
+
+// 裁剪成功回调
+const handleCropSuccess = async (croppedBlob: Blob) => {
+  try {
+    const croppedFile = new File(
+      [croppedBlob],
+      '签名文件.png',
+      { type: 'image/png' }
+    )
+    await uploadOss(croppedFile)
+  } catch (e) {
+    console.error(e)
+    ElMessage.error('签名图片上传失败')
+  }
+}
+
+const generateUUID = () => {
+  const timestamp = performance.now().toString(36)
+  const random = Math.random().toString(36).slice(2)
+  const random2 = Math.random().toString(36).slice(2)
+  return `${timestamp}-${random}-${random2}`.replace(/\./g, '')
+}
+
+const generateQrCode = () => {
+  ifScanned.value = false
+  ifExpired.value = false
+  qrCodeUUID.value = generateUUID()
+  const urlStr = `${window.location.origin}/mobile/login/index.html?host=${localStorage.getItem('TenantHost')}&url=${'/full-screen-sign-process'}?qrCodeUUID=${qrCodeUUID.value}`
+  codeContent.value = urlStr
+}
+
+const startPolling = () => {
+  qrCodeTimeRecord.value = setInterval(async () => {
+    try {
+      const data = await FlowSignController.startPolling(qrCodeUUID.value)
+      if (data.code === 200 && data.res) {
+        clearInterval(qrCodeTimeRecord.value)
+        nowBind.value = data.res.url
+        nowBindUrlMsg.value = data.res.url
+        currentImgId.value = data.res.fileId
+      }
+    } catch (e) {
+      // ignore
+    }
+  }, 2000)
+}
+
+const handleSignSave = () => {
+  FlowSignController.personalSignSave(currentImgId.value).then(data => {
+    if (data.code === 200) {
+      ElMessage.success('个人签名上传成功')
+    }
+  }).catch(() => {
+    dialogVisible.value = false
+  }).finally(() => {
+    dialogVisible.value = false
+  })
+}
+
+const getPersonalSign = async () => {
+  await FlowSignController.gerPersonalSign().then(data => {
+    if (data.code === 200 && data.res) {
+      nowBind.value = data.res.url
+      nowBindUrlMsg.value = data.res.url
+    }
+  })
+}
+
+const startQueryStatus = () => {
+  queryQrCodeTimeRecord.value = setInterval(() => {
+    FlowSignController.queryQrCodeStatus(qrCodeUUID.value).then(data => {
+      if (data.code === 200 && data.res === "scanned") {
+        clearInterval(queryQrCodeTimeRecord.value)
+        ifScanned.value = true
+        startPolling()
+      } else if (data.code === 200 && (data.res === null || data.res === "expired")) {
+        clearInterval(queryQrCodeTimeRecord.value)
+        ifExpired.value = true
+        ElMessage.error("二维码已过期，请刷新")
+      }
+    })
+  }, 2000)
+}
+
+const updateQrCodeStatus = (status: string) => {
+  if (status === 'scanned') {
+    ifScanned.value = true
+  } else if (status === 'expired') {
+    ifExpired.value = true
+  }
+  FlowSignController.updateQrCodeStatus(status, qrCodeUUID.value).then(data => {
+    if (data.code === 200 && data.res) {
+      console.log("二维码状态更新成功")
+    } else if (data.code === 200 && !data.res) {
+      ElMessage.error(data.msg || "二维码失效请刷新后重试")
+    }
+  })
+}
+
+const dialogClose = () => {
+  clearInterval(qrCodeTimeRecord.value)
+  clearInterval(queryQrCodeTimeRecord.value)
+  ifScanned.value = false
+  ifExpired.value = false
+  isSign.value = true
+}
+
+/** 打开弹窗 */
+const open = () => {
+  dialogVisible.value = true
+  getPersonalSign()
+}
+
+// ====== 图片处理工具函数 ======
+
+const extractSignatureImageTransparent = (file: File): Promise<Blob> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image()
+    img.onload = () => {
+      const canvas = document.createElement('canvas')
+      const ctx = canvas.getContext('2d')!
+
+      canvas.width = img.width
+      canvas.height = img.height
+      ctx.drawImage(img, 0, 0)
+
+      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
+      const data = imageData.data
+
+      const grays: number[] = []
+      let min = 255, max = 0
+      for (let i = 0; i < data.length; i += 4) {
+        const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]
+        grays.push(gray)
+        min = Math.min(min, gray)
+        max = Math.max(max, gray)
+      }
+
+      const threshold = min + (max - min) * 0.35
+
+      for (let i = 0; i < data.length; i += 4) {
+        const gray = grays[i / 4]
+        if (gray > threshold) {
+          data[i + 3] = 0
+        } else {
+          data[i] = data[i + 1] = data[i + 2] = 0
+          data[i + 3] = 255
+        }
+      }
+
+      enhanceContrast(data)
+      for (let i = 0; i < 2; i++) {
+        dilateAlpha(data, canvas.width, canvas.height, 1)
+        fillGapsAlpha(data, canvas.width, canvas.height)
+      }
+      removeHorizontalLines(data, canvas.width, canvas.height)
+      ctx.putImageData(imageData, 0, 0)
+
+      canvas.toBlob(
+        blob => blob ? resolve(blob) : reject(),
+        'image/png',
+        1
+      )
+    }
+
+    img.onerror = reject
+    img.src = URL.createObjectURL(file)
+  })
+}
+
+const dilateAlpha = (data: Uint8ClampedArray, width: number, height: number, radius = 1) => {
+  const copy = new Uint8ClampedArray(data)
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = radius; y < height - radius; y++) {
+    for (let x = radius; x < width - radius; x++) {
+      const center = idx(x, y)
+      if (copy[center + 3] === 255) continue
+
+      let hasOpaqueNeighbor = false
+      for (let dy = -radius; dy <= radius && !hasOpaqueNeighbor; dy++) {
+        for (let dx = -radius; dx <= radius; dx++) {
+          const i = idx(x + dx, y + dy)
+          if (copy[i + 3] === 255) {
+            hasOpaqueNeighbor = true
+            break
+          }
+        }
+      }
+
+      if (hasOpaqueNeighbor) {
+        data[center + 3] = 255
+        for (let c = 0; c < 3; c++) {
+          data[center + c] = copy[center + c]
+        }
+      }
+    }
+  }
+}
+
+const fillGapsAlpha = (data: Uint8ClampedArray, width: number, height: number) => {
+  const copy = new Uint8ClampedArray(data)
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = 1; y < height - 1; y++) {
+    for (let x = 1; x < width - 1; x++) {
+      const i = idx(x, y)
+      if (copy[i + 3] === 255) continue
+
+      let opaqueCount = 0
+      let r = [0, 0, 0]
+      for (const [dx, dy] of [[1, 0], [-1, 0], [0, 1], [0, -1]]) {
+        const neighbor = idx(x + dx, y + dy)
+        if (copy[neighbor + 3] === 255) {
+          opaqueCount++
+          for (let c = 0; c < 3; c++) r[c] += copy[neighbor + c]
+        }
+      }
+
+      if (opaqueCount >= 2) {
+        data[i + 3] = 255
+        for (let c = 0; c < 3; c++) data[i + c] = Math.round(r[c] / opaqueCount)
+      }
+    }
+  }
+}
+
+const enhanceContrast = (data: Uint8ClampedArray) => {
+  for (let i = 0; i < data.length; i += 4) {
+    if (data[i + 3] === 255) {
+      for (let c = 0; c < 3; c++) {
+        const val = data[i + c] / 255
+        data[i + c] = Math.min(255, Math.pow(val, 0.4) * 255)
+      }
+    }
+  }
+}
+
+const removeHorizontalLines = (data: Uint8ClampedArray, width: number, height: number) => {
+  const threshold = width * 0.7
+  const idx = (x: number, y: number) => (y * width + x) * 4
+
+  for (let y = 0; y < height; y++) {
+    let count = 0
+    let startX = 0
+    for (let x = 0; x < width; x++) {
+      if (data[idx(x, y) + 3] === 255) {
+        if (count === 0) startX = x
+        count++
+      } else {
+        if (count > threshold) {
+          for (let i = startX; i < x; i++) {
+            data[idx(i, y) + 3] = 0
+          }
+        }
+        count = 0
+      }
+    }
+    if (count > threshold) {
+      for (let i = startX; i < width; i++) {
+        data[idx(i, y) + 3] = 0
+      }
+    }
+  }
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped lang="scss">
+.personal-sign-content {
+  width: 100%;
+  min-height: 220px;
+}
+
+.signbox {
+  margin-top: 8px;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: flex-start;
+  flex-wrap: wrap;
+}
+
+.haveSign {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  width: 100%;
+  margin: 0 auto;
+  min-height: 197px;
+  text-align: center;
+  position: relative;
+}
+
+.sign-btn {
+  position: absolute;
+  right: calc(50% - 145px);
+  top: 72.5px;
+  margin-left: 16px;
+}
+
+.unHaveSign {
+  width: 100%;
+  margin: 0 auto;
+  min-height: 197px;
+  text-align: center;
+  position: relative;
+
+  .uploadContent {
+    margin-bottom: 5px;
+    font-size: 11.5px;
+  }
+
+  .upload-link {
+    font-weight: 500;
+    font-size: 10px;
+    color: #409eff;
+    cursor: pointer;
+  }
+}
+
+.signImgBox, .qrCodeImgBox {
+  box-sizing: border-box;
+  width: 145px;
+  height: 145px;
+  overflow: hidden;
+  margin: 0 auto 15px;
+  position: relative;
+}
+
+.signImgBox {
+  width: 133px;
+  height: 100px;
+  margin-top: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .no-sign-tip {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: #fafafa;
+    border-radius: 4px;
+    gap: 8px;
+
+    .tip-icon {
+      flex-shrink: 0;
+    }
+
+    .tip-text {
+      font-size: 12px;
+      color: #999;
+      text-align: center;
+      line-height: 1.4;
+      padding: 0 8px;
+    }
+  }
+}
+
+.unHaveSignUp {
+  display: flex;
+  justify-content: center;
+  position: relative;
+
+  .qrCodeBtnBox {
+    position: absolute;
+    right: calc(50% - 145px);
+    top: 72.5px;
+    margin-left: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    .el-button + .el-button {
+      margin-left: 0 !important;
+    }
+
+    .el-button {
+      min-width: 60px;
+    }
+  }
+
+  .uploadContent {
+    margin-top: 8px;
+  }
+}
+
+// 二维码状态覆盖层样式
+.qrcode-status-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  animation: fadeIn 0.25s ease-out;
+  z-index: 10;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image:
+      repeating-linear-gradient(0deg, transparent, transparent 1px, currentColor 1px, currentColor 2px),
+      repeating-linear-gradient(90deg, transparent, transparent 1px, currentColor 1px, currentColor 2px);
+    opacity: 0.25;
+    z-index: 1;
+  }
+
+  .status-icon {
+    flex-shrink: 0;
+    position: relative;
+    z-index: 3;
+  }
+
+  .status-text {
+    font-size: 12px;
+    font-weight: 400;
+    letter-spacing: 0.5px;
+    line-height: 1;
+    position: relative;
+    z-index: 3;
+  }
+
+  &.scanned {
+    background: rgba(255, 255, 255, 0.96);
+    color: rgba(100, 100, 100, 0.3);
+
+    .status-text {
+      color: #333333;
+    }
+  }
+
+  &.expired {
+    background: rgba(40, 40, 40, 0.92);
+    color: rgba(180, 180, 180, 0.3);
+    cursor: pointer;
+
+    .status-text {
+      color: #e0e0e0;
+    }
+
+    .status-icon path {
+      fill: #b0b0b0;
+    }
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+</style>