From 4a212603b9f5b5328d34396e63e644bdab4d18df Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 20 三月 2025 14:38:06 +0800
Subject: [PATCH] 修改签名归档
---
src/views/signProject/components/signFile.vue | 105 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 83 insertions(+), 22 deletions(-)
diff --git a/src/views/signProject/components/signFile.vue b/src/views/signProject/components/signFile.vue
index 315fa71..8ce903b 100644
--- a/src/views/signProject/components/signFile.vue
+++ b/src/views/signProject/components/signFile.vue
@@ -1,8 +1,8 @@
<template>
- <div>
+ <div v-loading="pdfLoading">
<el-dialog
v-model="dialogVisible"
- width="80%"
+ width="50%"
title="签名归档"
:before-close="handleClose"
:close-on-press-escape="false"
@@ -12,9 +12,8 @@
<!-- 背景文件切换按钮 -->
<div class="top">
<div class="top-left">
- <div>签名列表</div>
+ <h3>签名列表</h3>
<img
- style="width: 100px; height: auto"
v-for="(image, index) in signatureImages"
:src="image"
:key="index"
@@ -22,23 +21,26 @@
/>
</div>
<div v-if="pageNum>1">
+ <span style="margin-right: 15px">{{currentBackgroundIndex + 1}}/{{pageNum}}</span>
<el-button icon="arrow-left" @click="prevBackground">上一页</el-button>
<el-button icon="arrow-right" @click="nextBackground">上一页</el-button>
+ </div>
+ </div>
+
+ <!-- 已放置的签名 -->
+ <div class="bottom" v-if="placedSignaturesByBackground[currentBackgroundIndex] && placedSignaturesByBackground[currentBackgroundIndex].length>0">
+ <h3>已放签名：</h3>
+ <div v-for="(sig, index) in placedSignaturesByBackground[currentBackgroundIndex]" :key="index" class="controlBtns">
+ <el-tag size="large" type="primary">签名{{index + 1}}</el-tag>
+ <el-button type="primary" @click="rotateSignature(index)" :icon="RefreshRight" circle/>
+ <el-button type="danger" @click="removeSignature(index)" :icon="Delete" circle/>
</div>
</div>
<!-- 画布 -->
<canvas ref="canvasRef" v-if="dialogVisible"></canvas>
- <!-- 已放置的签名 -->
- <div class="bottom">
- <h3>已放置的签名：</h3>
- <div v-for="(sig, index) in placedSignaturesByBackground[currentBackgroundIndex]" :key="index" style="margin-right: 10px">
- <el-button type="danger" @click="removeSignature(index)">删除签名 {{ index + 1 }}</el-button>
- </div>
- </div>
-
<!-- 导出PDF按钮 -->
- <el-button type="primary" @click="saveAsPDF">确认归档</el-button>
+ <el-button type="primary" @click="saveAsPDF" style="margin-top: 20px">确认归档</el-button>
</el-dialog>
</div>
</template>
@@ -48,6 +50,7 @@
import {signArchive} from "@/api/signAgreement/signProject";
import { jsPDF } from "jspdf"; // 导入 jsPDF
import {ElMessage, ElMessageBox} from "element-plus";
+import {RefreshRight,Delete} from '@element-plus/icons-vue'
import * as pdfjsLib from "pdfjs-dist";
import {getToken} from "@/utils/auth";
import axios from 'axios';
@@ -57,6 +60,7 @@
import.meta.url
).href;
const dialogVisible = ref(false)
+const pdfLoading = ref(false)
const emit = defineEmits(["getList"]);
// 画布引用
const canvasRef = ref();
@@ -89,19 +93,21 @@
})
const openDialog= async (val)=>{
- console.log(JSON.parse(Cookies.get('userInfo')).userId,'serr')
dialogVisible.value = true
- signatureImages.value = val.signatureFlows?.map(i=>i.signFile)
+ signatureImages.value = val.signatureFlows?.map(i=>import.meta.env.VITE_APP_BASE_API + i.signFile)
pdfFileUrl.value = import.meta.env.VITE_APP_BASE_API + val.tempFile
form.itemId = val.id
form.userId = JSON.parse(Cookies.get('userInfo')).userId
+ pdfLoading.value = true
await nextTick()
+ pdfLoading.value = true
const canvas = canvasRef.value;
if (canvas) {
ctx = canvas.getContext("2d");
// 替换为实际的 PDF 文件地址
+ console.log("pdfLoading before loadPDF:", pdfLoading.value);
await loadPDF(pdfFileUrl.value);
-
+ console.log("pdfLoading after loadPDF:", pdfLoading.value);
// 监听鼠标事件
canvas.addEventListener("mousedown", (e) => {
const mouseX = e.offsetX;
@@ -234,6 +240,7 @@
placedSignaturesByBackground.value.push([]); // 为每一页初始化签名图列表
resolve();
};
+ pdfLoading.value = false
});
}
@@ -283,6 +290,7 @@
y: 100,
width: selectedImage.width, // 初始宽度为图片的原始宽度
height: selectedImage.height, // 初始高度为图片的原始高度
+ rotation: 0 // 初始旋转角度为 0
});
redrawCanvas();
};
@@ -296,6 +304,15 @@
const removeSignature = (index) => {
placedSignaturesByBackground.value[currentBackgroundIndex.value].splice(index, 1);
redrawCanvas();
+};
+
+// 旋转签名图
+const rotateSignature = (index) => {
+ const currentSignatures = placedSignaturesByBackground.value[currentBackgroundIndex.value];
+ if (currentSignatures[index]) {
+ currentSignatures[index].rotation = (currentSignatures[index].rotation + 90) % 360; // 每次旋转 90 度
+ redrawCanvas();
+ }
};
// 重新绘制画布
@@ -325,8 +342,21 @@
const currentSignatures = placedSignaturesByBackground.value[currentBackgroundIndex.value];
currentSignatures.forEach((sig) => {
- // 重新绘制所有签名图（包括大小）
- ctx.drawImage(sig.image, sig.x, sig.y, sig.width, sig.height);
+ // 保存当前画布状态
+ ctx.save();
+
+ // 移动到签名图的中心点
+ ctx.translate(sig.x + sig.width / 2, sig.y + sig.height / 2);
+
+ // 旋转画布
+ ctx.rotate((sig.rotation * Math.PI) / 180);
+
+
+ // 绘制签名图
+ ctx.drawImage(sig.image, -sig.width / 2, -sig.height / 2, sig.width, sig.height);
+
+ // 恢复画布状态
+ ctx.restore();
// 只有在非导出状态下才绘制缩放手柄
if (!excludeHandle) {
@@ -367,7 +397,20 @@
ctx.drawImage(background, 0, 0, canvas.width, canvas.height);
const currentSignatures = placedSignaturesByBackground.value[index];
currentSignatures.forEach((sig) => {
- ctx.drawImage(sig.image, sig.x, sig.y, sig.width, sig.height);
+ // 保存当前画布状态
+ ctx.save();
+
+ // 移动到签名图的中心点
+ ctx.translate(sig.x + sig.width / 2, sig.y + sig.height / 2);
+
+ // 旋转画布
+ ctx.rotate((sig.rotation * Math.PI) / 180);
+
+ // 绘制签名图
+ ctx.drawImage(sig.image, -sig.width / 2, -sig.height / 2, sig.width, sig.height);
+
+ // 恢复画布状态
+ ctx.restore();
});
// 将画布内容添加到PDF
const imgData = canvas.toDataURL("image/jpeg");
@@ -436,17 +479,26 @@
display: flex;
justify-content: space-between;
align-items: center;
- margin-bottom: 20px;
+ margin-bottom: 15px;
.top-left{
display: flex;
align-items: center;
- &>div{
+ h3{
margin-right: 20px;
}
img{
margin-right: 20px;
+ width: 120px;
+ height: auto;
+ border: 1px solid #f0f0f0;
+ cursor: pointer;
+ box-sizing: border-box;
+
+ &:hover{
+ border: 2px solid #2563EB;
+ }
}
}
}
@@ -455,7 +507,16 @@
width: 100%;
display: flex;
align-items: center;
- margin: 20px 0;
+ margin-bottom: 20px;
+
+ .controlBtns{
+ margin-right: 20px;
+
+ .el-button{
+ margin: 0 0 0 5px;
+ }
+
+ }
}
}
</style>
\ No newline at end of file
--
Gitblit v1.9.2