优化文档管理树形菜单 以及表格匹配问题

zhang_12370

6 天以前 18238d4e28b263e5b0d0b1ba48c29703b79f1078

优化文档管理树形菜单 以及表格匹配问题

 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("打开编辑界面失败");
  }
};

// 移除懒加载，直接获取数据

 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();
  });