mirror of
https://gitee.com/myxzgzs/boyue-ui-admin-vue3
synced 2025-08-08 08:22:41 +08:00
80 lines
2.7 KiB
Vue
80 lines
2.7 KiB
Vue
<template>
|
||
<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"
|
||
type="primary"
|
||
text
|
||
size="small"
|
||
@click="signature.clear()"
|
||
>
|
||
<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>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import Vue3Signature from 'vue3-signature'
|
||
import * as FileApi from '@/api/infra/file'
|
||
|
||
const message = useMessage() // 消息弹窗
|
||
const signDialogVisible = ref(false)
|
||
const signature = ref()
|
||
|
||
const open = async () => {
|
||
signDialogVisible.value = true
|
||
}
|
||
defineExpose({ open })
|
||
|
||
const emits = defineEmits(['success'])
|
||
const submit = async () => {
|
||
message.success('签名上传中请稍等。。。')
|
||
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(',')
|
||
// 利用正则表达式 从前缀中获取图片的类型信息（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>
|