From 18238d4e28b263e5b0d0b1ba48c29703b79f1078 Mon Sep 17 00:00:00 2001
From: zhang_12370 <z2864490065@outlook.com>
Date: 星期三, 25 六月 2025 13:22:59 +0800
Subject: [PATCH] 优化文档管理树形菜单 以及表格匹配问题
---
src/views/archiveManagement/mould/archiveDialog.vue | 6 +
src/views/archiveManagement/index.vue | 255 ++++++++++++++++++++++++++++++++++++++------------
2 files changed, 199 insertions(+), 62 deletions(-)
diff --git a/src/views/archiveManagement/index.vue b/src/views/archiveManagement/index.vue
index 28a4d06..c3e56e4 100644
--- a/src/views/archiveManagement/index.vue
+++ b/src/views/archiveManagement/index.vue
@@ -40,7 +40,7 @@
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
- <div class="tree-node-content" @dblclick="headerDbClick(data)">
+ <div class="tree-node-content" @dblclick="headerDbClick(node,data)">
<div class="node-icon">
<el-icon
v-if="!node.isLeaf"
@@ -147,7 +147,7 @@
<script setup>
import {nextTick, onMounted, reactive, ref} from "vue";
import ETable from "@/components/Table/ETable.vue";
-import {ElButton, ElIcon, ElInput, ElMessage} from "element-plus";
+import {ElButton, ElIcon, ElInput, ElMessage, ElMessageBox} from "element-plus";
import archiveDialog from "./mould/archiveDialog.vue";
import Pagination from "@/components/Pagination/index.vue";
import {Delete, Document, Folder, Plus, Search,} from "@element-plus/icons-vue";
@@ -187,18 +187,29 @@
return data.name?.toLowerCase().includes(value.toLowerCase());
};
const submitForm = async (res) => {
- if (res && res.code === 200) {
- // 鍒锋柊鍒楄〃鏁版嵁
- await getArchiveListData();
- } else {
- ElMessage.error("鎿嶄綔澶辫触: " + (res?.message || "鏈煡閿欒"));
+ try {
+ if (res && res.code === 200) {
+ ElMessage.success("鎿嶄綔鎴愬姛");
+ dialogVisible.value = false;
+ // 鍒锋柊鍒楄〃鏁版嵁
+ await getArchiveListData();
+ } else {
+ ElMessage.error("鎿嶄綔澶辫触: " + (res?.message || res?.msg || "鏈煡閿欒"));
+ }
+ } catch (error) {
+ console.error("鎻愪氦琛ㄥ崟閿欒:", error);
+ ElMessage.error("鎿嶄綔澶辫触锛岃绋嶅悗閲嶈瘯");
}
-}
+};
+// 褰撳墠缁勪欢鐨勬暟鎹�
+const initTreeData = ref([]); // 鏍戝舰鏁版嵁
const centerDialogVisible = (val) => {
+ dialogVisible.value = val;
};
const tableSwitch = ref(false);
// 澶勭悊鑺傜偣鐐瑰嚮
const handleNodeClick = (data) => {
+ initTreeData.value = data || [];
tableSwitch.value = true;
// 鍒囨崲鑺傜偣鏃堕噸缃埌绗竴椤�
queryParams.current = 1;
@@ -206,18 +217,37 @@
getArchiveListData();
};
const archiveDialogs = ref(null); // 琛ㄦ牸缁勪欢寮曠敤
-// add
+// 鏂板褰掓。
const add = () => {
- row.value = {}; // 娓呯┖琛屾暟鎹紝纭繚鏄柊澧炴ā寮�
- dialogVisible.value = true;
- newName.value = ""; // 娓呯┖杈撳叆妗�
- archiveDialogs.value.initForm(); // 閲嶇疆琛ㄥ崟
+ try {
+ row.value = {}; // 娓呯┖琛屾暟鎹紝纭繚鏄柊澧炴ā寮�
+ newName.value = ""; // 娓呯┖杈撳叆妗�
+ dialogVisible.value = true;
+
+ // 纭繚缁勪欢寮曠敤瀛樺湪鍚庡啀璋冪敤鏂规硶
+ nextTick(() => {
+ if (archiveDialogs.value && typeof archiveDialogs.value.initForm === 'function') {
+ archiveDialogs.value.initForm(initTreeData); // 閲嶇疆琛ㄥ崟
+ }
+ });
+ } catch (error) {
+ console.error("鏂板褰掓。閿欒:", error);
+ ElMessage.error("鎵撳紑鏂板鐣岄潰澶辫触");
+ }
};
// 澶勭悊鍒嗛〉鍙樺寲
-const handlePageChange = ({page}) => {
- queryParams.current = page;
- // pageSize 鍥哄畾涓�20锛屼笉鍐嶄粠鍙傛暟涓幏鍙�
- getArchiveListData();
+const handlePageChange = (pagination) => {
+ try {
+ const { page, limit } = pagination;
+ queryParams.current = page;
+ if (limit) {
+ queryParams.pageSize = limit;
+ }
+ getArchiveListData();
+ } catch (error) {
+ console.error("鍒嗛〉澶勭悊閿欒:", error);
+ ElMessage.error("鍒嗛〉鎿嶄綔澶辫触");
+ }
};
const getArchiveListData = async () => {
@@ -251,31 +281,51 @@
loading.value = false;
}
};
+// 鍒犻櫎閫変腑鐨勫綊妗ｈ褰�
const delHandler = async () => {
if (selectedRows.length === 0) {
ElMessage.warning("璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁");
return;
}
+
try {
+ await ElMessageBox.confirm(
+ `纭畾瑕佸垹闄ら�変腑鐨� ${selectedRows.length} 鏉¤褰曞悧锛焋,
+ '鍒犻櫎纭',
+ {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }
+ );
+
const ids = selectedRows.map((row) => row.id);
- const {code, msg} = await delArchive(ids);
+ const { code, msg } = await delArchive(ids);
+
if (code !== 200) {
- ElMessage.warning("鍒犻櫎澶辫触: " + msg);
- } else {
- ElMessage.success("鍒犻櫎鎴愬姛");
- // 鍒犻櫎鎴愬姛鍚庨噸鏂拌幏鍙栨暟鎹�
- await getArchiveListData();
+ ElMessage.error("鍒犻櫎澶辫触: " + msg);
+ return;
}
+
+ ElMessage.success("鍒犻櫎鎴愬姛");
+ // 鍒犻櫎鎴愬姛鍚庨噸鏂拌幏鍙栨暟鎹�
+ await getArchiveListData();
+ // 娓呯┖閫変腑鐘舵��
+ selectedRows.splice(0, selectedRows.length);
+
} catch (error) {
- ElMessage.error("鍒犻櫎褰掓。澶辫触");
+ if (error !== 'cancel') {
+ console.error("鍒犻櫎褰掓。澶辫触:", error);
+ ElMessage.error("鍒犻櫎鎿嶄綔澶辫触锛岃绋嶅悗閲嶈瘯");
+ }
}
};
// 鍙屽嚮缂栬緫鑺傜偣
-const headerDbClick = (comeTreeData) => {
- comeTreeData.isEdit = true;
- newName.value = comeTreeData.name;
+const headerDbClick = (node, data) => {
+ data.isEdit = true;
+ newName.value = data.name;
nextTick(() => {
- const inputEl = inputRefs.value.get(comeTreeData.id || comeTreeData);
+ const inputEl = inputRefs.value.get(data.id || data);
if (inputEl) {
inputEl.focus();
inputEl.select();
@@ -298,33 +348,69 @@
// 澶勭悊杈撳叆妗嗗け鐒�
const handleInputBlur = async (event, comeTreeData, node) => {
- if (!comeTreeData.isEdit) return; // 濡傛灉涓嶆槸缂栬緫鐘舵�侊紝鐩存帴杩斿洖
- console.log("handleInputBlur", event, comeTreeData, node);
- if (event.relatedTarget && event.relatedTarget.tagName === "BUTTON") {
- return;
- }
- comeTreeData.isEdit = false;
- const newValue = newName.value.trim();
- if (comeTreeData.name === newValue) {
- return;
- }
- if (newValue === "") {
- newName.value = comeTreeData.name || "鏂拌妭鐐�";
- return;
- }
try {
- comeTreeData.name = newValue;
+ if (!comeTreeData.isEdit) return; // 濡傛灉涓嶆槸缂栬緫鐘舵�侊紝鐩存帴杩斿洖
+
+ if (event.relatedTarget && event.relatedTarget.tagName === "BUTTON") {
+ return;
+ }
+
+ comeTreeData.isEdit = false;
+ const newValue = newName.value.trim();
+
+ if (comeTreeData.name === newValue) {
+ return;
+ }
+
+ if (newValue === "") {
+ newName.value = comeTreeData.name || "鏂拌妭鐐�";
+ ElMessage.warning("鑺傜偣鍚嶇О涓嶈兘涓虹┖");
+ return;
+ }
+
// 鑾峰彇鐖惰妭鐐圭殑id - 閫氳繃 node 鍙傛暟鏇村噯纭湴鑾峰彇
let parentId = null;
if (node && node.parent && node.parent.data) {
parentId = node.parent.data.id;
}
- await addOrEditTree({
+
+ const result = await addOrEditTree({
name: newValue,
parentId: parentId || null, // 濡傛灉娌℃湁鐖惰妭鐐癸紝鍒欎负 null
+ id: comeTreeData.id || null,
});
+ if (result.code === 200) {
+ comeTreeData.name = newValue;
+ if (!comeTreeData.id && result.data) {
+ comeTreeData.id = result.data.id || result.data;
+ }
+ ElMessage.success("淇濆瓨鎴愬姛");
+
+ // 鍒锋柊鏍戞暟鎹苟灞曞紑褰撳墠鑺傜偣
+ const currentNodeId = comeTreeData.id;
+ await getList();
+
+ // 绛夊緟DOM鏇存柊鍚庡睍寮�鑺傜偣
+ nextTick(() => {
+ if (currentNodeId && treeRef.value) {
+ const targetNode = treeRef.value.getNode(currentNodeId);
+ if (targetNode) {
+ // 灞曞紑褰撳墠鑺傜偣
+ targetNode.expanded = true;
+ // 濡傛灉鏈夌埗鑺傜偣锛屼篃灞曞紑鐖惰妭鐐硅矾寰�
+ expandParentNodes(targetNode);
+ }
+ }
+ });
+ } else {
+ comeTreeData.name = comeTreeData.name || "鏂拌妭鐐�";
+ ElMessage.error("淇濆瓨澶辫触: " + (result.msg || "鏈煡閿欒"));
+ }
+
} catch (error) {
+ console.error("淇濆瓨鑺傜偣澶辫触:", error);
comeTreeData.name = comeTreeData.name || "鏂拌妭鐐�";
+ ElMessage.error("淇濆瓨澶辫触锛岃绋嶅悗閲嶈瘯");
}
};
@@ -337,24 +423,55 @@
isLeaf: "leaf",
};
+// 灞曞紑鐖惰妭鐐硅矾寰�
+const expandParentNodes = (node) => {
+ if (node && node.parent && node.parent.data) {
+ // 閫掑綊灞曞紑鎵�鏈夌埗鑺傜偣
+ node.parent.expanded = true;
+ expandParentNodes(node.parent);
+ }
+};
+
+// 鍒犻櫎鏍戣妭鐐�
const remove = async (node, data) => {
if (!data || !data.id) {
+ ElMessage.warning("鏃犳硶鍒犻櫎姝よ妭鐐�");
return;
}
- let {code, msg} = await delTree([data.id]);
- if (code !== 200) {
- ElMessage.warning("鍒犻櫎澶辫触, " + msg);
- } else {
+
+ try {
+ await ElMessageBox.confirm(
+ `纭畾瑕佸垹闄よ妭鐐� "${data.name}" 鍚楋紵`,
+ '鍒犻櫎纭',
+ {
+ confirmButtonText: '纭畾',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning',
+ }
+ );
+
+ const { code, msg } = await delTree([data.id]);
+
+ if (code !== 200) {
+ ElMessage.error("鍒犻櫎澶辫触: " + msg);
+ return;
+ }
+
ElMessage.success("鍒犻櫎鎴愬姛");
+ await getList();
+
+ } catch (error) {
+ if (error !== 'cancel') {
+ console.error("鍒犻櫎鑺傜偣澶辫触:", error);
+ ElMessage.error("鍒犻櫎澶辫触锛岃绋嶅悗閲嶈瘯");
+ }
}
- await getList();
};
const append = async (data) => {
if (data === "") {
// 鏂板鏍硅妭鐐�
const newNode = {
- id: Date.now(),
name: "鏂拌妭鐐�",
isEdit: true,
};
@@ -369,21 +486,19 @@
}
});
} else {
- const hasChildren = data.children && data.children.length > 0;
+ const hasChildren = data.children;
const nodeKey = data.id || data;
const node = treeRef.value?.getNode(nodeKey);
- const isExpanded = node?.expanded; // 濡傛灉鏈夊瓙绾т笖鏈睍寮�锛屽厛灞曞紑鑺傜偣
+ const isExpanded = node?.expanded;
+
+ // 濡傛灉鏈夊瓙绾т笖鏈睍寮�锛屽厛灞曞紑鑺傜偣
if (hasChildren && !isExpanded) {
- if (
- treeRef.value &&
- treeRef.value.store &&
- treeRef.value.store.nodesMap[nodeKey]
- ) {
+ if (treeRef.value && treeRef.value.store && treeRef.value.store.nodesMap[nodeKey]) {
treeRef.value.store.nodesMap[nodeKey].expanded = true;
}
}
+
const newNode = {
- id: Date.now(),
name: "鏂板瓙鑺傜偣",
isEdit: true,
};
@@ -393,6 +508,12 @@
}
data.children.push(newNode);
newName.value = "鏂板瓙鑺傜偣";
+
+ // 纭繚鐖惰妭鐐瑰睍寮�
+ if (node) {
+ node.expanded = true;
+ expandParentNodes(node);
+ }
// 鏍规嵁鏄惁闇�瑕佸睍寮�鏉ュ喅瀹氬欢杩熸椂闂�
const delay = hasChildren && !isExpanded ? 200 : 50;
@@ -416,10 +537,22 @@
}
};
+// 缂栬緫褰掓。
const handleEdit = (rows) => {
- row.value = rows;
- dialogVisible.value = true;
- archiveDialogs.value.editForm(rows); // 璋冪敤缂栬緫鏂规硶
+ try {
+ row.value = { ...rows }; // 浣跨敤娣辨嫹璐濋伩鍏嶅紩鐢ㄩ棶棰�
+ dialogVisible.value = true;
+
+ // 纭繚缁勪欢寮曠敤瀛樺湪鍚庡啀璋冪敤鏂规硶
+ nextTick(() => {
+ if (archiveDialogs.value && typeof archiveDialogs.value.editForm === 'function') {
+ archiveDialogs.value.editForm(rows); // 璋冪敤缂栬緫鏂规硶
+ }
+ });
+ } catch (error) {
+ console.error("缂栬緫褰掓。閿欒:", error);
+ ElMessage.error("鎵撳紑缂栬緫鐣岄潰澶辫触");
+ }
};
// 绉婚櫎鎳掑姞杞斤紝鐩存帴鑾峰彇鏁版嵁
diff --git a/src/views/archiveManagement/mould/archiveDialog.vue b/src/views/archiveManagement/mould/archiveDialog.vue
index 55c359c..18014fe 100644
--- a/src/views/archiveManagement/mould/archiveDialog.vue
+++ b/src/views/archiveManagement/mould/archiveDialog.vue
@@ -68,6 +68,7 @@
};
// 鍒濆鍖栬〃鍗曟暟鎹殑杈呭姪鍑芥暟
const initFormData = (rowData) => {
+ console.log("rowData", rowData);
if (rowData && rowData.id) {
return copyFormData(rowData);
}
@@ -97,9 +98,12 @@
type: [{required: true, message: "璇烽�夋嫨鏂囨。绫诲瀷", trigger: "blur"}],
status: [{required: true, message: "璇烽�夋嫨鏂囨。鐘舵��", trigger: "blur"}],
};
+const initTreeDataId = ref(null);
const fileUploadRef = ref(null);
-const initForm = () => {
+const initForm = (val) => {
+ initTreeDataId.value = val.value.id || null; // 纭繚 initTreeDataId 鍒濆鍖栦负 null
ruleForm.value = {};
+ ruleForm.value.treeId = val.value.id || null; // 纭繚 treeId 鍒濆鍖栦负 null
nextTick(() => {
fileUploadRef.value.init();
});
--
Gitblit v1.9.3