优化签章

public/version.json

@@ -1,3 +1,3 @@
 {
-  "value": "20230810103730"
+  "value": "20230913163142"
 }

src/config/index.json

@@ -1,6 +1,6 @@
 {
     "version": "202304141558",
-    "target": "http://192.168.0.109:8090",
+    "target": "http://192.168.0.136:8090",
     "smsPhone": "",
     "vite": {
         "port": 5175,

src/plugins/HcPdfSign.js

@@ -1,4 +1,4 @@
-import { getRandom, isNullES, isNumber, isString } from 'js-fast-way'
+import { getArrValue, getRandom, isNullES, isNumber, isString } from 'js-fast-way'
 
 //PDF签章
 export default class HcPdfSign {
@@ -124,19 +124,7 @@ export default class HcPdfSign {
         if (typeof this.signChange !== 'function') {
             return false
         } else {
-            //移除没必要的数据
-            const newSignList = [], list = this.signList
-            for (let i = 0; i < list.length; i++) {
-                newSignList.push({
-                    lx: list[i].lx,
-                    ly: list[i].ly,
-                    id: list[i].id,
-                    page: list[i].page,
-                    url: list[i].url,
-                    type: list[i].type,
-                })
-            }
-            this.signChange(newSignList)
+            this.signChange(this.signList)
         }
     }
 
@@ -402,4 +390,43 @@ export default class HcPdfSign {
         })
         return signImgDom
     }
+
+    //设置PDF签章图片
+    static async setPdfSignImg(arr) {
+        const list = getArrValue(arr)
+        if (list.length <= 0) return
+        const pageDom = this.pdfViewer?.children ?? []
+        for (let i = 0; i < list.length; i++) {
+            const page = Number(list[i].page) - 1
+            const dom = pageDom[page].getElementsByClassName('canvasWrapper')[0]
+            //创建图片元素
+            const signImg = document.createElement('img')
+            signImg.setAttribute('id', list[i].id)
+            signImg.src = list[i].url
+            signImg.style.position = 'absolute'
+            signImg.style.width = list[i].dom.style.width
+            signImg.style.height = list[i].dom.style.height
+            signImg.style.left = list[i].dom.style.left
+            signImg.style.top = list[i].dom.style.top
+            signImg.style.pointerEvents = 'auto'
+            signImg.style.zIndex = 999
+            dom.append(signImg)
+            //鼠标按下
+            signImg.addEventListener('mousedown', (e) => {
+                //新的当前选中项
+                this.curSignDom = e.target
+                this.signType = '移动'
+                e.target.style.cursor = 'move'
+                //鼠标相对于图片的位置
+                this.disX = e.clientX - e.target.offsetLeft
+                this.disY = e.clientY - e.target.offsetTop
+            })
+            //保存签章信息
+            this.signList.push({
+                ...list[i],
+                dom: signImg,
+            })
+        }
+    }
+
 }

src/test/index.vue

@@ -1,39 +1,47 @@
 <template>
     <div class="hc-page-box">
         <HcCard title="测试">
-            <div v-loading="loading" element-loading-text="加载文件并初始渲染中..." class="h-full">
-                <div id="pdfView" class="h-full" />
+            <div class="flex h-full">
+                <div class="w-96">
+                    <template v-for="(item, index) in pdfData" :key="index">
+                        <div class="p-3" @click="pdfDataClick(item, index)">
+                            {{ item.name }}
+                        </div>
+                    </template>
+                </div>
+                <div class="flex-1">
+                    <HcPdf v-if="pdfItem.pdf" :sign="logoName" :src="pdfItem.pdf" :dom="pdfItem.hcSignImageArr" @change="pdfChange" />
+                </div>
             </div>
         </HcCard>
     </div>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { nextTick, ref } from 'vue'
+import HcPdf from '../views/tasks/components/hc-pdf1.vue'
 import logoName from '~src/assets/logo/name.png'
-import HcPdfSign from '~src/plugins/HcPdfSign'
 
-const loading = ref(true)
+const pdfData = ref([
+    { id: 1, pdf: 'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230908/2878b0b7a59c1ce9b5779381a1fb82ef.pdf', name: '1.pdf' },
+    { id: 2, pdf: 'http://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230616/686e713fa3f0563fbc85a3745f07ab30.pdf', name: '2.pdf' },
+    { id: 3, pdf: 'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230914/937fca6e36ff573164d0fef0e8580eea.pdf', name: '3.pdf' },
+])
 
-onMounted(()=> {
-    const pdf = 'https://bladex-chongqing-info.oss-cn-hangzhou.aliyuncs.com//upload/20230908/2878b0b7a59c1ce9b5779381a1fb82ef.pdf'
-
-    //创建PDF签章控件以及相关功能
-    HcPdfSign.createPdf({
-        ele: 'pdfView', //挂载元素的id
-        url: pdf, //pdf的url地址
-        img: logoName, //签章图片的url地址
-        //加载完成
-        load: () => {
-            loading.value = false
-        },
-        //签章数据改变
-        change: (data) => {
-            console.log(data)
-        },
+//切换PDF
+const pdfItem = ref({})
+const pdfIndex = ref(-1)
+const pdfDataClick = (item, index) => {
+    pdfItem.value = {}
+    pdfIndex.value = index
+    nextTick(() => {
+        pdfItem.value = item
     })
+}
 
-    //批量签章
-    HcPdfSign.setBatchSign(true)
-})
+//签章数据改变
+const pdfChange = (data) => {
+    pdfData.value[pdfIndex.value].hcSignImageArr = data
+    console.log('签章数据', data)
+}
 </script>

src/views/tasks/components/hc-pdf1.vue

@@ -1,88 +1,93 @@
 <template>
-    <div class="hc-page-box">
-        <HcCard title="测试">
-            <div v-loading="loading" element-loading-text="加载文件并初始渲染中..." class="h-full">
-                <div :id="`pdfView+${id}`" class="h-full" />
-            </div>
-        </HcCard>
+    <div v-loading="loading" element-loading-text="加载文件并初始渲染中..." class="h-full">
+        <div :id="`pdf-view-${uuid}`" class="h-full" />
     </div>
 </template>
 
 <script setup>
 import { onMounted, ref, watch } from 'vue'
 import HcPdfSign from '~src/plugins/HcPdfSign'
-import userApi from '~api/userInfo/index'
+import { getArrValue, getRandom } from 'js-fast-way'
 
 //参数
 const props = defineProps({
-    src: {
+    sign: {
         type: [String, Number],
         default: '',
     },
-    id:{
+    src: {
         type: [String, Number],
         default: '',
     },
-
+    batch: {
+        type: Boolean,
+        default: false,
+    },
+    dom: {
+        type: Array,
+        default: () => ([]),
+    },
 })
+
 //事件
 const emit = defineEmits(['change'])
 const pdf = ref(props.src)
-const id = ref(props.id)
-const loading = ref(true)
-//监听
-watch(() => [
-    props.src,
-    props.id,
-], ([src, Id]) => {
-    pdf.value = src
-    id.value = Id
-    getPdf()
+const uuid = getRandom(6)
+const signImg = ref(props.sign)
+const loading = ref(false)
 
-  
-    
+//监听PDFurl
+watch(() => props.src, (src) => {
+    if (src) {
+        loading.value = true
+        pdf.value = src
+        getPdf()
+    } else {
+        noPdfUrl()
+    }
 })
 
+//监听签章图片
+watch(() => props.sign, (val) => {
+    signImg.value = val
+})
 
-//获取用户签字体
-const logoName = ref('')
-//获取用户信息
-const queryCurrentUserData = async () => {
-    const { error, code, data } = await userApi.queryCurrentUserData()
-    if (!error && code === 200) {
-        logoName.value = data?.signatureUrl
-    } else {
-        logoName.value = ''
-    }
-}
+//监听是否批量签章
+watch(() => props.batch, (val) => {
+    HcPdfSign.setBatchSign(val)
+})
 
-const getPdf = ()=>{
-     //创建PDF签章控件以及相关功能
-     HcPdfSign.createPdf({
-        ele: 'pdfView' + id.value, //挂载元素的id
+//渲染完成
+onMounted(()=> {
+    getPdf()
+})
+
+//设置PDF签章实例
+const getPdf = () => {
+    if (!pdf.value) {
+        noPdfUrl()
+        return false
+    }
+    HcPdfSign.createPdf({
+        ele: 'pdf-view-' + uuid, //挂载元素的id
         url: pdf.value, //pdf的url地址
-        img: logoName.value, //签章图片的url地址
+        img: signImg.value, //签章图片的url地址
         //加载完成
         load: () => {
+            //恢复签章记录
+            HcPdfSign.setPdfSignImg(getArrValue(props.dom))
             loading.value = false
         },
         //签章数据改变
         change: (data) => {
-            console.log(data, '签章数据')
-        
-        
-            // emit('change', data)
+            emit('change', data)
         },
     })
-
-    //批量签章
-    HcPdfSign.setBatchSign(true)
 }
 
-
-onMounted(()=> {
-    queryCurrentUserData().then(()=>{
-        getPdf()
-    })
-})
+const noPdfUrl = () => {
+    pdf.value = ''
+    loading.value = false
+    document.getElementById('pdf-view-' + uuid).innerHTML = ''
+}
 </script>

src/views/tasks/hc-data.vue

@@ -183,13 +183,13 @@ const contractList = ref([])
 
 const getContractInfoList = async ()=>{
     const { error, code, data } = await getContractInfo({
-            pid: projectId.value,
-     })
-     if (!error && code === 200) {
+        pid: projectId.value,
+    })
+    if (!error && code === 200) {
         contractList.value = getArrValue(data)
-     } else {
+    } else {
         contractList.value = []
-     }
+    }
 }
 //类型处理
 const sbTableKey = ref(activeName)
@@ -221,7 +221,7 @@ const rowTaskName = async (row) => {
     if (row.id) {
         taskReviewInfo.value = row
         const { error, code, data } = await tasksApi.queryTaskInfo({
-                taskIds:row.id,
+            taskIds:row.id,
         })
         if (!error && code === 200) {
             const approvalFileList = getArrValue(data)
@@ -248,7 +248,7 @@ const checkedRowsColumns = ref([
     { key: 'taskName', name: '任务名称' },
 ])
 const checkedRowsRef = ref([])
- const taskId = ref([])
+const taskId = ref([])
 const batchApprovalTaskClick = (rows) => {
     taskReviewType.value = '2'
     showTaskReviewModal.value = true
@@ -278,7 +278,7 @@ const queryTaskInfo = async (row, taskids) => {
     taskId.value = taskids && taskids.length > 0 ? taskids : row['id']
     const { error, code, data } = await tasksApi.queryTaskInfo({
         taskIds: taskids && taskids.length > 0 ? taskids : row['id'],
-      
+
     })
     //处理数据
     if (!error && code === 200) {
@@ -302,7 +302,7 @@ const changeSealStrategy = (val)=>{
     sealStrategy.value = val
 
     console.log( sealStrategy.value, ' sealStrategy.value')
-    
+
 }
 //确认审批
 const ConfirmApprovalClick = async () => {
@@ -310,7 +310,7 @@ const ConfirmApprovalClick = async () => {
     if (formData.flag === 'NO' && !formData.comment) {
         window?.$message?.warning('请先输入审核意见')
     } else {
-       
+
         formData.taskId = taskId.value
         console.log(formData, 'formData')
         // SMSAuthLoading.value = true