From 3f15d0eef89e52f3fd6d1be13ff3af010b6f0ee9 Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期三, 05 十一月 2025 15:27:44 +0800
Subject: [PATCH] 录入日期改为可选择
---
src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue | 127 ++++++++++++++++++++++++++++++++++++++++--
1 files changed, 121 insertions(+), 6 deletions(-)
diff --git a/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue b/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
index 847f4c4..403cab6 100644
--- a/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
+++ b/src/views/collaborativeApproval/approvalProcess/components/approvalDia.vue
@@ -102,6 +102,10 @@
<div v-if="!activity.isShen" class="node-reason">
<span>瀹℃壒鎰忚锛�</span>{{ activity.approveNodeReason }}
</div>
+ <div v-if="!activity.isShen" class="node-reason">
+ <span>绛惧悕锛�</span>
+ <img :src="activity.urlTem" class="signImg" alt="" v-if="activity.urlTem"/>
+ </div>
<div v-else-if="activity.isShen">
<el-form-item
:prop="'activities.' + index + '.approveNodeReason'"
@@ -117,16 +121,33 @@
<template #footer v-if="operationType === 'approval'">
<div class="dialog-footer">
<el-button type="primary" @click="submitForm(2)">涓嶉�氳繃</el-button>
- <el-button type="primary" @click="submitForm(1)">閫氳繃</el-button>
+ <el-button type="primary" @click="openSignatureDialog(1)">閫氳繃</el-button>
<el-button @click="closeDia">鍙栨秷</el-button>
</div>
</template>
+ </el-dialog>
+ <!-- 鐢靛瓙绛惧悕寮圭獥锛坴ue3-signature-pad锛� -->
+ <el-dialog v-model="signatureDialogVisible" title="鐢靛瓙绛惧悕" width="600px" append-to-body>
+ <vueEsign
+ ref="esign"
+ class="mySign"
+ :width="800"
+ :height="300"
+ :isCrop="isCrop"
+ :lineWidth="lineWidth"
+ :lineColor="lineColor"
+ />
+ <div style="margin-top:10px;">
+ <el-button @click="clearSignature">娓呴櫎</el-button>
+ <el-button type="primary" @click="confirmSignature">纭畾</el-button>
+ </div>
</el-dialog>
</div>
</template>
<script setup>
-import {getCurrentInstance, reactive, ref, toRefs} from "vue";
+import { getCurrentInstance, reactive, ref, toRefs } from "vue";
+import vueEsign from "vue-esign";
import {
approveProcessDetails,
getDept,
@@ -135,6 +156,7 @@
import useUserStore from "@/store/modules/user.js";
import {userListNoPageByTenantId} from "@/api/system/user.js";
import { WarningFilled, Edit, Check, MoreFilled } from '@element-plus/icons-vue'
+import { getToken } from "@/utils/auth";
const emit = defineEmits(['close'])
const { proxy } = getCurrentInstance()
@@ -156,6 +178,22 @@
},
});
const { form } = toRefs(data);
+const signatureDialogVisible = ref(false);
+const signatureImg = ref('');
+let submitStatus = null; // 涓存椂瀛樺偍閫氳繃/涓嶉�氳繃鐘舵��
+const isCrop = ref("");
+const esign = ref(null);
+const lineWidth = ref(0);
+const lineColor = ref("#000000");
+
+// 涓婁紶閰嶇疆
+const upload = reactive({
+ // 涓婁紶鐨勫湴鍧�
+ url: import.meta.env.VITE_APP_BASE_API + "/file/upload",
+ // 璁剧疆涓婁紶鐨勮姹傚ご閮�
+ headers: { Authorization: "Bearer " + getToken() },
+});
+
// 鑺傜偣鏍囬
const getNodeTitle = (index, len) => {
if (index === len - 1) return '缁撴潫';
@@ -190,6 +228,11 @@
activities.value = res.data
// 澧炲姞isApproval瀛楁
activities.value.forEach(item => {
+ if (item.url && item.url.includes('word')) {
+ item.urlTem = item.url.replaceAll('word', 'img')
+ } else {
+ item.urlTem = item.url
+ }
if (item.approveNodeStatus === 2) {
item.isApproval = '宸查┏鍥�';
} else if (item.approveNodeStatus === 1) {
@@ -205,17 +248,84 @@
productOptions.value = res.data;
});
};
+// 鎵撳紑绛惧悕寮圭獥
+const openSignatureDialog = (status) => {
+ submitStatus = status;
+ signatureDialogVisible.value = true;
+};
+// 娓呴櫎绛惧悕
+const clearSignature = () => {
+ esign.value.reset();
+};
+// 纭绛惧悕
+const confirmSignature = () => {
+ esign.value.generate().then((res) => {
+ console.log(res);
+ // 灏哹ase64杞崲涓轰簩杩涘埗
+ const base64Data = res.split(',')[1]; // 绉婚櫎data:image/png;base64,鍓嶇紑
+ const binaryString = atob(base64Data);
+ const bytes = new Uint8Array(binaryString.length);
+ for (let i = 0; i < binaryString.length; i++) {
+ bytes[i] = binaryString.charCodeAt(i);
+ }
+ signatureImg.value = bytes;
+
+ // 鍒涘缓鏂囦欢瀵硅薄鐢ㄤ簬涓婁紶
+ const blob = new Blob([bytes], { type: 'image/png' });
+ const file = new File([blob], 'signature.png', { type: 'image/png' });
+
+ // 鍒涘缓FormData
+ const formData = new FormData();
+ formData.append('file', file);
+
+ // 涓婁紶绛惧悕鍥剧墖
+ fetch(upload.url, {
+ method: 'POST',
+ headers: upload.headers,
+ body: formData
+ })
+ .then(response => response.json())
+ .then(data => {
+ if (data.code === 200) {
+ console.log('data---', data)
+ let tempFileIds = [];
+ tempFileIds.push(data.data.tempId);
+ signatureDialogVisible.value = false;
+ clearSignature();
+ // 鍙湁閫氳繃鏃舵墠浼犻�掔鍚嶆枃浠禝D
+ if (submitStatus === 1) {
+ submitForm(submitStatus, tempFileIds);
+ } else {
+ submitForm(submitStatus);
+ }
+ } else {
+ proxy.$modal.msgError("绛惧悕鍥剧墖涓婁紶澶辫触锛�" + data.msg);
+ }
+ })
+ .catch(error => {
+ console.error('涓婁紶澶辫触:', error);
+ proxy.$modal.msgError("绛惧悕鍥剧墖涓婁紶澶辫触");
+ });
+ }).catch((err) => {
+ console.log(err);
+ proxy.$modal.msgWarning("璇峰厛绛惧悕锛�");
+ })
+};
// 鎻愪氦瀹℃壒
-const submitForm = (status) => {
+const submitForm = (status, tempFileIds) => {
const filteredActivities = activities.value.filter(activity => activity.isShen);
- filteredActivities[0].approveNodeStatus = status
+ filteredActivities[0].approveNodeStatus = status;
+ // 鍙湁閫氳繃鏃舵墠闇�瑕佺鍚�
+ if (status === 1 && tempFileIds) {
+ filteredActivities[0].tempFileIds = tempFileIds;
+ }
// 鍒ゆ柇鏄惁涓烘渶鍚庝竴姝�
const isLast = activities.value.findIndex(a => a.isShen) === activities.value.length-1;
updateApproveNode({ ...filteredActivities[0], isLast }).then(() => {
proxy.$modal.msgSuccess("鎻愪氦鎴愬姛");
closeDia();
- })
-}
+ });
+};
// 鍏抽棴寮规
const closeDia = () => {
proxy.resetForm("formRef");
@@ -253,4 +363,9 @@
height: 30px;
border-radius: 50px;
}
+.signImg {
+ cursor: pointer;
+ width: 200px;
+ height: 60px;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3