feat: 审批签名代码评审
Lesan
parent
8e5271a6d6
commit
37964e740f
|
|
@ -36,7 +36,7 @@ export type ApprovalTaskInfo = {
|
|||
assigneeUser: User
|
||||
status: number
|
||||
reason: string
|
||||
sign: string // TODO @lesan：字段改成 signPicUrl 签名照片。只有 sign 感觉是签名文本哈。
|
||||
signPicUrl: string
|
||||
}
|
||||
|
||||
// 审批节点信息
|
||||
|
|
|
|||
|
|
@ -65,6 +65,33 @@ const download = {
|
|||
a.download = 'image.png'
|
||||
a.click()
|
||||
}
|
||||
},
|
||||
base64ToFile: (base64, fileName) => {
|
||||
// 将base64按照 , 进行分割 将前缀 与后续内容分隔开
|
||||
const data = base64.split(',')
|
||||
// 利用正则表达式 从前缀中获取图片的类型信息（image/png、image/jpeg、image/webp等）
|
||||
const type = data[0].match(/:(.*?);/)[1]
|
||||
// 从图片的类型信息中 获取具体的文件格式后缀（png、jpeg、webp）
|
||||
const 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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,15 +47,15 @@
|
|||
<el-form-item
|
||||
v-if="runningTask.signEnable"
|
||||
label="签名"
|
||||
prop="sign"
|
||||
prop="signPicUrl"
|
||||
ref="approveSignFormRef"
|
||||
>
|
||||
<el-button @click="signRef.open()">点击签名</el-button>
|
||||
<el-image
|
||||
class="w-90px h-40px ml-5px"
|
||||
v-if="approveReasonForm.sign"
|
||||
:src="approveReasonForm.sign"
|
||||
:preview-src-list="[approveReasonForm.sign]"
|
||||
v-if="approveReasonForm.signPicUrl"
|
||||
:src="approveReasonForm.signPicUrl"
|
||||
:preview-src-list="[approveReasonForm.signPicUrl]"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
|
|
@ -553,11 +553,11 @@ const signRef = ref()
|
|||
const approveSignFormRef = ref()
|
||||
const approveReasonForm = reactive({
|
||||
reason: '',
|
||||
sign: ''
|
||||
signPicUrl: ''
|
||||
})
|
||||
const approveReasonRule = reactive<FormRules<typeof approveReasonForm>>({
|
||||
reason: [{ required: true, message: '审批意见不能为空', trigger: 'blur' }],
|
||||
sign: [{ required: true, message: '签名不能为空', trigger: 'change' }]
|
||||
signPicUrl: [{ required: true, message: '签名不能为空', trigger: 'change' }]
|
||||
})
|
||||
// 拒绝表单
|
||||
const rejectFormRef = ref<FormInstance>()
|
||||
|
|
@ -705,7 +705,7 @@ const handleAudit = async (pass: boolean, formRef: FormInstance | undefined) =>
|
|||
}
|
||||
// 签名
|
||||
if (runningTask.value.signEnable) {
|
||||
data.sign = approveReasonForm.sign
|
||||
data.signPicUrl = approveReasonForm.signPicUrl
|
||||
}
|
||||
// 多表单处理，并且有额外的 approveForm 表单，需要校验 + 拼接到 data 表单里提交
|
||||
// TODO 芋艿 任务有多表单这里要如何处理，会和可编辑的字段冲突
|
||||
|
|
@ -1002,7 +1002,7 @@ const getUpdatedProcessInstanceVariables = () => {
|
|||
|
||||
/** 处理签名完成 */
|
||||
const handleSignFinish = (url: string) => {
|
||||
approveReasonForm.sign = url
|
||||
approveReasonForm.signPicUrl = url
|
||||
approveSignFormRef.value.validate('change')
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -124,14 +124,14 @@
|
|||
审批意见：{{ task.reason }}
|
||||
</div>
|
||||
<div
|
||||
v-if="task.sign && activity.nodeType === NodeType.USER_TASK_NODE"
|
||||
v-if="task.signPicUrl && activity.nodeType === NodeType.USER_TASK_NODE"
|
||||
class="text-#a5a5a5 text-13px mt-1 w-full bg-#f8f8fa p2 rounded-md"
|
||||
>
|
||||
签名：
|
||||
<el-image
|
||||
class="w-90px h-40px ml-5px"
|
||||
:src="task.sign"
|
||||
:preview-src-list="[task.sign]"
|
||||
:src="task.signPicUrl"
|
||||
:preview-src-list="[task.signPicUrl]"
|
||||
/>
|
||||
</div>
|
||||
</teleport>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue