1

src/api/modules/certificate/list.js

@@ -89,4 +89,18 @@ export default {
             params: form,
         })
     },
+    async picPresave(form) {
+        return HcApi({
+            url: '/api/blade-manager/signPfxFile/picPresave',
+            method: 'post',
+            data: form,
+        })
+    },
+    async prePicture(id) {
+        return HcApi({
+            url: '/api/blade-manager/signPfxFile/prePicture',
+            method: 'post',
+            data: { id },
+        })
+    },
 }

src/utils/tools.js

@@ -1,7 +1,22 @@
 import { nextTick } from 'vue'
+import { encode } from 'js-base64'
+import { fullDrawer } from 'hc-vue3-ui'
 import { getArrValue, getObjValue, isNullES } from 'js-fast-way'
 import { getBizDictionary, getDictionary } from '~api/other'
 
+
+// 跳转到PDF页面
+export const toPdfPage = (url) => {
+    if (isNullES(url)) {
+        window.$message.warning('pdf地址为空')
+        return
+    }
+    fullDrawer({
+        type: 'url',
+        content: '/#/pdf?code=' + encode(url),
+    }).then()
+}
+
 //设置分割滑块
 export const setSplit = (ids, data) => {
     //配置参考： https://split.js.org/#/?direction=vertical&snapOffset=0

src/views/certificate/modules/list/form.vue

@@ -75,7 +75,7 @@
                         </template>
                         <hc-form-upload v-model="formModel.certificateFileUrl" :upload="{ options: certificateOptions }" @success="certificateFileSuccess" />
                     </el-form-item>
-                    <el-form-item label="签名体文件：" prop="signatureFileUrl">
+                    <el-form-item label="签名体文件：" class="signature-file-form" prop="signatureFileUrl">
                         <template #label>
                             <div class="hc-form-item-label">
                                 <div class="title-content">
@@ -88,6 +88,21 @@
                             </div>
                         </template>
                         <hc-form-upload v-model="formModel.signatureFileUrl" :options="{ type: 'preview' }" :upload="{ options: signatureOptions }" @success="signatureFileSuccess" />
+                        <div class="signature-file-input hc-flex">
+                            <div class="w-60px">
+                                <el-input v-model="formModel.wide" />
+                            </div>
+                            <div class="ml-8px mr-8px">x</div>
+                            <div class="w-60px">
+                                <el-input v-model="formModel.high" />
+                            </div>
+                            <div class="ml-22px">
+                                <el-button type="primary" @click="picPresaveClick">保存</el-button>
+                            </div>
+                            <div class="ml-12px">
+                                <el-button type="warning" @click="prePictureClick">预览</el-button>
+                            </div>
+                        </div>
                     </el-form-item>
                 </el-col>
                 <el-col v-if="formModel.certificateType === 2" :span="24">
@@ -109,7 +124,7 @@
 <script setup>
 import { onMounted, ref } from 'vue'
 import { deepClone, formValidate, getArrValue, getObjValue, isNullES } from 'js-fast-way'
-import { getDictionaryData } from '~uti/tools'
+import { getDictionaryData, toPdfPage } from '~uti/tools'
 import mainApi from '~api/certificate/list'
 
 const props = defineProps({
@@ -148,6 +163,8 @@ const getDetailData = async (id) => {
         res.company = res.certificateType === 2 ? 2 : res.certificateType === 3 ? 3 : 2
         res.certificateType = 2
     }
+    res.wide = res.wide ?? 600
+    res.high = res.high ?? 165
     formModel.value = res
 }
 
@@ -288,10 +305,64 @@ const signatureOptions = {
 }
 
 //签名体文件上传成功
-const signatureFileSuccess = (val, file, res) => {
-    formModel.value.signatureFileName = res.originalName
+const signatureFile = ref(null)
+const signatureFileSuccess = ({ file, res }) => {
+    const { link, originalName } = getObjValue(res.data)
+    formModel.value.certificateFileUrl = link
+    formModel.value.signatureFileName = originalName
+    signatureFile.value = file.file
+    const { wide, high } = formModel.value
+    if (isNullES(wide)) {
+        formModel.value.wide = 600
+    }
+    if (isNullES(high)) {
+        formModel.value.high = 165
+    }
 }
 
+//保存
+const signatureId = ref('')
+const picPresaveClick = async () => {
+    const form = formModel.value, file = signatureFile.value
+    if (isNullES(file)) {
+        window?.$message?.error('请先上传签名图片')
+        return
+    }
+    if (isNullES(form.wide) || isNullES(form.high)) {
+        window?.$message?.error('请先填写宽度和高度的尺寸')
+        return
+    }
+    //组装数据
+    let fromData = new FormData()
+    fromData.append('file', file)
+    fromData.append('wide', form.wide)
+    fromData.append('high', form.high)
+    //提交保存
+    const { code, msg, data } = await mainApi.picPresave(fromData)
+    if (code !== 200) {
+        window?.$message?.error(msg)
+        return
+    }
+    const { id } = getObjValue(data)
+    signatureId.value = id
+    window?.$message?.success('操作成功')
+}
+
+//预览
+const prePictureClick = async () => {
+    const cid = signatureId.value
+    if (isNullES(cid)) {
+        window?.$message?.error('请先上传和保存尺寸')
+        return
+    }
+    //提交保存
+    const { code, msg, data } = await mainApi.prePicture(cid)
+    if (code !== 200 || isNullES(data)) {
+        window?.$message?.error(msg ?? '操作失败')
+        return
+    }
+    toPdfPage(data)
+}
 
 //提交数据
 const submitLoading = ref(false)
@@ -324,3 +395,19 @@ const cancelClick = () => {
     emit('close')
 }
 </script>
+
+<style scoped lang="scss">
+.el-form-item.signature-file-form {
+    :deep(.el-form-item__content) {
+        flex-wrap: unset;
+        align-items: start;
+        .hc-form-upload-box {
+            width: 100px;
+        }
+    }
+    .signature-file-input {
+        position: relative;
+        flex: 1;
+    }
+}
+</style>