From 8e886e539075fb819d7ddb4b8c3f263e01351e50 Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期三, 26 三月 2025 10:33:17 +0800
Subject: [PATCH] 添加归档功能
---
src/views/signProject/components/signFile.vue | 106 +++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 83 insertions(+), 23 deletions(-)
diff --git a/src/views/signProject/components/signFile.vue b/src/views/signProject/components/signFile.vue
index 315fa71..b26edd1 100644
--- a/src/views/signProject/components/signFile.vue
+++ b/src/views/signProject/components/signFile.vue
@@ -2,19 +2,20 @@
<div>
<el-dialog
v-model="dialogVisible"
- width="80%"
+ width="75%"
title="签名归档"
:before-close="handleClose"
:close-on-press-escape="false"
:close-on-click-modal="false"
class="myCustomDialog"
+ custom-class="pdfDialog"
+ z-index="2010"
>
<!-- 背景文件切换按钮 -->
<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 +23,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>
@@ -47,7 +51,8 @@
import { ref, reactive, onMounted,nextTick } from "vue";
import {signArchive} from "@/api/signAgreement/signProject";
import { jsPDF } from "jspdf"; // 导入 jsPDF
-import {ElMessage, ElMessageBox} from "element-plus";
+import {ElMessage, ElMessageBox,ElLoading} 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';
@@ -89,19 +94,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
await nextTick()
+ const loadingInstance = ElLoading.service(
+ {target: '.pdfDialog',background: 'rgba(255,255,255,.4)',text: '正在加载文件，请稍后...'}
+ )
const canvas = canvasRef.value;
if (canvas) {
ctx = canvas.getContext("2d");
// 替换为实际的 PDF 文件地址
await loadPDF(pdfFileUrl.value);
-
+ loadingInstance.close()
// 监听鼠标事件
canvas.addEventListener("mousedown", (e) => {
const mouseX = e.offsetX;
@@ -199,7 +206,6 @@
try {
const loadingTask = pdfjsLib.getDocument(pdfUrl);
const pdf = await loadingTask.promise;
- console.log("PDF 文件加载成功，总页数:", pdf.numPages);
pageNum.value = pdf.numPages
// 清空背景图片和签名图列表
backgroundImages.value = [];
@@ -283,6 +289,7 @@
y: 100,
width: selectedImage.width, // 初始宽度为图片的原始宽度
height: selectedImage.height, // 初始高度为图片的原始高度
+ rotation: 0 // 初始旋转角度为 0
});
redrawCanvas();
};
@@ -296,6 +303,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 +341,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 +396,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 +478,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 +506,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