feat: 审批签名代码评审

src/views/bpm/processInstance/detail/SignDialog.vue

@@ -2,9 +2,8 @@
   <el-dialog v-model="signDialogVisible" title="签名" width="935">
     <div class="position-relative">
       <Vue3Signature class="b b-solid b-gray" ref="signature" w="900px" h="400px" />
-      <!-- @lesan：建议改成 unocss 哈 -->
       <el-button
-        style="position: absolute; bottom: 20px; right: 10px"
+        class="pos-absolute bottom-20px right-10px"
         type="primary"
         text
         size="small"
@@ -26,6 +25,7 @@
 <script setup lang="ts">
 import Vue3Signature from 'vue3-signature'
 import * as FileApi from '@/api/infra/file'
+import download from '@/utils/download'
 
 const message = useMessage() // 消息弹窗
 const signDialogVisible = ref(false)
@@ -40,40 +40,11 @@ const emits = defineEmits(['success'])
 const submit = async () => {
   message.success('签名上传中请稍等。。。')
   const res = await FileApi.updateFile({
-    file: base64ToFile(signature.value.save('image/png'), '签名')
+    file: download.base64ToFile(signature.value.save('image/png'), '签名')
   })
   emits('success', res.data)
   signDialogVisible.value = false
 }
-
-// TODO @lesan：这个要不抽到 download.js 里，让这个组件更简洁干净？
-const base64ToFile = (base64, fileName) => {
-  // 将base64按照 , 进行分割 将前缀  与后续内容分隔开
-  let data = base64.split(',')
-  // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
-  let type = data[0].match(/:(.*?);/)[1]
-  // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
-  let suffix = type.split('/')[1]
-  // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
-  const bstr = window.atob(data[1])
-  // 获取解码结果字符串的长度
-  let n = bstr.length
-  // 根据解码结果字符串的长度创建一个等长的整形数字数组
-  // 但在创建时 所有元素初始值都为 0
-  const u8arr = new Uint8Array(n)
-  // 将整形数组的每个元素填充为解码结果字符串对应位置字符的UTF-16 编码单元
-  while (n--) {
-    // charCodeAt()：获取给定索引处字符对应的 UTF-16 代码单元
-    u8arr[n] = bstr.charCodeAt(n)
-  }
-  // 利用构造函数创建File文件对象
-  // new File(bits, name, options)
-  const file = new File([u8arr], `${fileName}.${suffix}`, {
-    type: type
-  })
-  // 将File文件对象返回给方法的调用者
-  return file
-}
 </script>
 
 <style scoped></style>