From 9aae2af6f3937a7d99ec619b51f457002cef969f Mon Sep 17 00:00:00 2001
From: gaoluyang <2820782392@qq.com>
Date: 星期一, 03 十一月 2025 14:29:37 +0800
Subject: [PATCH] 档案管理-添加导出功能
---
src/views/fileManagement/document/index.vue | 166 +++++++++++++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 160 insertions(+), 6 deletions(-)
diff --git a/src/views/fileManagement/document/index.vue b/src/views/fileManagement/document/index.vue
index 7a8b27e..a0d824a 100644
--- a/src/views/fileManagement/document/index.vue
+++ b/src/views/fileManagement/document/index.vue
@@ -153,7 +153,39 @@
</div>
</template>
</el-dialog>
-
+<el-dialog
+ v-model="qrCodeDialogVisible"
+ title="鏂囨。浜岀淮鐮�"
+ width="400px"
+ @close="closeQrCodeDialog"
+ >
+ <div class="qr-code-container">
+ <div v-if="qrCodeUrl" class="qr-code-image">
+ <img :src="qrCodeUrl" alt="鏂囨。浜岀淮鐮�" class="qr-image" />
+ <div class="qr-info">
+ <p><strong>鏂囨。鍚嶇О锛�</strong>{{ currentDocument.docName }}</p>
+ <p><strong>鏂囨。缂栧彿锛�</strong>{{ currentDocument.docNumber }}</p>
+ </div>
+ </div>
+ <div v-else class="qr-loading">
+ <el-icon class="is-loading"><Loading /></el-icon>
+ <p>姝ｅ湪鐢熸垚浜岀淮鐮�...</p>
+ </div>
+ </div>
+ <template #footer>
+ <div class="dialog-footer">
+ <el-button @click="closeQrCodeDialog">鍏抽棴</el-button>
+ <el-button
+ v-if="qrCodeUrl"
+ type="primary"
+ @click="downloadQRCode"
+ icon="Download"
+ >
+ 涓嬭浇浜岀淮鐮�
+ </el-button>
+ </div>
+ </template>
+ </el-dialog>
<!-- 鏂囨。鏂板/淇敼瀵硅瘽妗� -->
<el-dialog
v-model="documentDia"
@@ -352,8 +384,8 @@
<el-button @click="closeDocumentDia">鍙栨秷</el-button>
</div>
</template>
- </el-dialog>
- <AttachmentManager ref="attachmentManagerRef" />
+ </el-dialog>
+ <AttachmentManager ref="attachmentManagerRef" />
</div>
</template>
@@ -371,7 +403,9 @@
const { proxy } = getCurrentInstance();
const tree = ref(null);
const containerRef = ref(null);
-
+// 瀵煎叆qrcode搴�
+import QRCode from 'qrcode'
+import { Loading, Download } from '@element-plus/icons-vue'
// 浣跨敤瀛楀吀鏁版嵁
const { confidentiality_level, document_urgency, document_status, document_type, document_categories, retention_period } = useDict('confidentiality_level', 'document_urgency', 'document_status', 'document_type', 'document_categories', 'retention_period')
@@ -407,6 +441,10 @@
// 浣嶇疆鏍戞暟鎹�
const locationTree = ref([]);
+// 浜岀淮鐮佺浉鍏冲彉閲�
+const qrCodeDialogVisible = ref(false)
+const qrCodeUrl = ref('')
+const currentDocument = ref({})
// 琛ㄦ牸鍒楅厤缃�
const tableColumns = ref([
{ label: '鏂囨。鍚嶇О', prop: 'docName', width: '200' },
@@ -568,7 +606,7 @@
label: "鎿嶄綔",
align: "center",
fixed: 'right',
- width: '150',
+ width: '200',
operation: [
{
name: "缂栬緫",
@@ -584,10 +622,74 @@
openAttachment(row)
},
},
+ {
+ name: "鐢熸垚浜岀淮鐮�",
+ type: "text",
+ clickFun: (row) => {
+ generateQRCode(row)
+ },
+ },
],
}
]);
+// 鐢熸垚浜岀淮鐮�
+const generateQRCode = async (row) => {
+ try {
+ // 妫�鏌ュ繀瑕佸瓧娈�
+ if (!row.docName || !row.docNumber) {
+ ElMessage.warning('鏂囨。淇℃伅涓嶅畬鏁达紝鏃犳硶鐢熸垚浜岀淮鐮�')
+ return
+ }
+
+ currentDocument.value = row
+ qrCodeUrl.value = ''
+ qrCodeDialogVisible.value = true
+
+ // 鏋勫缓浜岀淮鐮佸唴瀹�
+ // const qrContent = `${row.id}|${row.docName}|${row.docNumber}`
+ const qrContent = `${row.id}`
+ // 鐢熸垚浜岀淮鐮�
+ qrCodeUrl.value = await QRCode.toDataURL(qrContent, {
+ width: 256,
+ margin: 2,
+ color: {
+ dark: '#000000',
+ light: '#FFFFFF'
+ },
+ errorCorrectionLevel: 'M'
+ })
+
+ // ElMessage.success('浜岀淮鐮佺敓鎴愭垚鍔燂紒')
+
+ } catch (error) {
+ console.error('鐢熸垚浜岀淮鐮佸け璐�:', error)
+ ElMessage.error('鐢熸垚浜岀淮鐮佸け璐ワ細' + error.message)
+ qrCodeDialogVisible.value = false
+ }
+}
+// 涓嬭浇浜岀淮鐮�
+const downloadQRCode = () => {
+ if (!qrCodeUrl.value) {
+ ElMessage.warning('璇峰厛鐢熸垚浜岀淮鐮�')
+ return
+ }
+
+ const a = document.createElement('a')
+ a.href = qrCodeUrl.value
+ a.download = `${currentDocument.value.docName}_浜岀淮鐮乢${new Date().getTime()}.png`
+ document.body.appendChild(a)
+ a.click()
+ document.body.removeChild(a)
+ ElMessage.success('涓嬭浇鎴愬姛锛�')
+}
+
+// 鍏抽棴浜岀淮鐮佸脊绐�
+const closeQrCodeDialog = () => {
+ qrCodeDialogVisible.value = false
+ qrCodeUrl.value = ''
+ currentDocument.value = {}
+}
// 鍒嗙被琛ㄥ崟
const categoryForm = reactive({
category: "",
@@ -862,7 +964,7 @@
// 閫夋嫨鍒嗙被
const handleNodeClick = (val, node, el) => {
// 鍒ゆ柇鏄惁涓哄彾瀛愯妭鐐�
- isShowButton.value = !(val.children && val.children.length > 0);
+ isShowButton.value = true;
// 鍙湁鍙跺瓙鑺傜偣鎵嶆墽琛屼互涓嬮�昏緫
currentId.value = val.id;
currentParentId.value = val.parentId;
@@ -1259,4 +1361,56 @@
color: #606266;
font-size: 14px;
}
+/* 浜岀淮鐮侀瑙堟牱寮� */
+.qr-code-container {
+ text-align: center;
+ padding: 20px;
+}
+
+.qr-code-image {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+}
+
+.qr-image {
+ max-width: 100%;
+ height: auto;
+ border: 2px solid #e0e0e0;
+ border-radius: 8px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.qr-info {
+ text-align: left;
+ background: #f8f9fa;
+ padding: 15px;
+ border-radius: 8px;
+ min-width: 300px;
+}
+
+.qr-info p {
+ margin: 8px 0;
+ color: #666;
+ font-size: 14px;
+}
+
+.qr-loading {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 15px;
+ padding: 40px 0;
+}
+
+.qr-loading .el-icon {
+ font-size: 32px;
+ color: #409EFF;
+}
+
+.qr-loading p {
+ color: #666;
+ margin: 0;
+}
</style>
--
Gitblit v1.9.3