【功能评审】Bpm：审批签名

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

@@ -1,11 +1,8 @@
 <template>
-  <el-dialog
-    v-model="signDialogVisible"
-    title="签名"
-    width="935"
-  >
+  <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"/>
+      <Vue3Signature class="b b-solid b-gray" ref="signature" w="900px" h="400px" />
+      <!-- @lesan：建议改成 unocss 哈 -->
       <el-button
         style="position: absolute; bottom: 20px; right: 10px"
         type="primary"
@@ -13,23 +10,21 @@
         size="small"
         @click="signature.clear()"
       >
-        <Icon icon="ep:delete" class="mr-5px"/>
+        <Icon icon="ep:delete" class="mr-5px" />
         清除
       </el-button>
     </div>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="signDialogVisible = false">取消</el-button>
-        <el-button type="primary" @click="submit">
-          提交
-        </el-button>
+        <el-button type="primary" @click="submit"> 提交 </el-button>
       </div>
     </template>
   </el-dialog>
 </template>
 
 <script setup lang="ts">
-import Vue3Signature from "vue3-signature"
+import Vue3Signature from 'vue3-signature'
 import * as FileApi from '@/api/infra/file'
 
 const message = useMessage() // 消息弹窗
@@ -39,25 +34,28 @@ const signature = ref()
 const open = async () => {
   signDialogVisible.value = true
 }
-defineExpose({open})
+defineExpose({ open })
 
 const emits = defineEmits(['success'])
 const submit = async () => {
   message.success('签名上传中请稍等。。。')
-  const res = await FileApi.updateFile({file: base64ToFile(signature.value.save('image/png'), '签名')})
+  const res = await FileApi.updateFile({
+    file: 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(',');
+  let data = base64.split(',')
   // 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
-  let type = data[0].match(/:(.*?);/)[1];
+  let type = data[0].match(/:(.*?);/)[1]
   // 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
-  let suffix = type.split('/')[1];
+  let suffix = type.split('/')[1]
   // 使用atob()对base64数据进行解码  结果是一个文件数据流 以字符串的格式输出
-  const bstr = window.atob(data[1]);
+  const bstr = window.atob(data[1])
   // 获取解码结果字符串的长度
   let n = bstr.length
   // 根据解码结果字符串的长度创建一个等长的整形数字数组
@@ -74,11 +72,8 @@ const base64ToFile = (base64, fileName) => {
     type: type
   })
   // 将File文件对象返回给方法的调用者
-  return file;
+  return file
 }
-
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>