| | |
| | | @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" |
| | |
| | | <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"; |
| | |
| | | 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 centerDialogVisible = (val) => { |
| | | dialogVisible.value = val; |
| | | }; |
| | | const tableSwitch = ref(false); |
| | | // 处理节点点击 |
| | | const handleNodeClick = (data) => { |
| | | rowClickData.value = data; // 存储当前点击的节点数据 |
| | | tableSwitch.value = true; |
| | | // 切换节点时重置到第一页 |
| | | queryParams.current = 1; |
| | | queryParams.treeId = data.id; |
| | | getArchiveListData(); |
| | | }; |
| | | const rowClickData = ref({}); // 存储当前点击的节点数据 |
| | | 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(rowClickData.value); // 重置表单 |
| | | } |
| | | }); |
| | | } 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 () => { |
| | |
| | | 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(); |
| | |
| | | |
| | | // 处理输入框失焦 |
| | | 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("保存失败,请稍后重试"); |
| | | } |
| | | }; |
| | | |
| | |
| | | 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, |
| | | }; |
| | |
| | | } |
| | | }); |
| | | } 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 newNode = { |
| | | id: Date.now(), |
| | | name: "新子节点", |
| | | isEdit: true, |
| | | }; |
| | |
| | | } |
| | | }; |
| | | |
| | | // 编辑归档 |
| | | 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("打开编辑界面失败"); |
| | | } |
| | | }; |
| | | |
| | | // 移除懒加载,直接获取数据 |