生产维护树形结构加载慢改成懒加载

zhangwencui

昨天 4fef2b8afba85d8f2f8be70b85ffc105cfc4deda

生产维护树形结构加载慢改成懒加载

 src/api/basicData/newProduct.js

@@ -9,6 +9,14 @@
        params: query
    })
}
// 产品树查询2
export function productTreeListQuery(query) {
    return request({
        url: '/productMaterial/listQuery',
        method: 'get',
        params: query
    })
}
// 产品子类新增
export function addOrEditProduct(query) {
    return request({

 src/views/basicData/product/index.vue

@@ -6,7 +6,7 @@
                  style="width: 210px"
                  placeholder="输入关键字进行搜索"
                  @change="searchFilter"
                  @clear="searchFilter"
                  @clear="searchFilter1"
                  clearable
                  prefix-icon="Search" />
        <el-button type="primary"
@@ -32,8 +32,7 @@
            <div class="custom-tree-node">
              <span class="tree-node-content">
                <el-icon class="tree-icon">
                  <component :is="data.children && data.children.length > 0
                  ? node.expanded ? 'FolderOpened' : 'Folder' : 'Tickets'" />
                  <component :is="node.expanded ? 'FolderOpened' : 'Folder'" />
                </el-icon>
                <span class="tree-node-label">{{ data.label }}</span>
              </span>
@@ -302,6 +301,7 @@
    delProductModel,
    modelListPage,
    productTreeList,
    productTreeListQuery,
    addOrEditProductConfig,
    updateOrEditProductConfig,
    delProductConfig,
@@ -459,29 +459,20 @@
  // 查询产品树
  const getProductTreeList = () => {
    treeLoad.value = true;
    productTreeList()
    productTreeList({ type: 2 })
      .then(res => {
        // 转换新的数据格式
        const newList = [];
        expandedKeys.value = [];
        for (const category of res.data) {
          // 添加分类节点
          // 添加分类节点（只返回一层数据，不包含子节点）
          const categoryNode = {
            label: category.configName,
            id: category.configId,
            isLeaf: false,
            children: category.materialList.map(item => ({
              id: item.id,
              isLeaf: true,
              label: item.materialName,
              inventoryCategoryId: item.inventoryCategoryId,
              materialTypeId: item.materialTypeId,
              remark: item.remark,
              baseUnit: item.baseUnit,
            })),
            children: [], // 初始化为空数组，点击时再加载
          };
          newList.push(categoryNode);
          expandedKeys.value.push(category.configName);
        }
        list.value = newList;
        treeLoad.value = false;
@@ -490,9 +481,64 @@
        treeLoad.value = false;
      });
  };
  const searchFilter1 = () => {
    getProductTreeList();
  };
  // 过滤产品树
  const searchFilter = () => {
    if (!search.value) {
      // 如果搜索关键字为空，重新加载原始数据
      // getProductTreeList();
      return;
    }

    treeLoad.value = true;
    // 调用 productTreeListQuery 接口进行搜索
    productTreeListQuery({ materialName: search.value })
      .then(res => {
        // 处理返回的数据
        const newList = [];
        if (res.data && res.data.length > 0) {
          for (const category of res.data) {
            for (const item of list.value) {
              if (item.id == category.configId) {
                item.children = (category.materialList || []).map(item => ({
                  id: item.id,
                  isLeaf: true,
                  label: item.materialName,
                  inventoryCategoryId: item.inventoryCategoryId,
                  materialTypeId: item.materialTypeId,
                  remark: item.remark,
                  baseUnit: item.baseUnit,
                }));
                break;
              }
            }
            // 转换数据格式
            // const categoryNode = {
            //   label: category.configName,
            //   id: category.configId,
            //   isLeaf: false,
            //   children: (category.materialList || []).map(item => ({
            //     id: item.id,
            //     isLeaf: true,
            //     label: item.materialName,
            //     inventoryCategoryId: item.inventoryCategoryId,
            //     materialTypeId: item.materialTypeId,
            //     remark: item.remark,
            //     baseUnit: item.baseUnit,
            //   })),
            // };
            // newList.push(categoryNode);
          }
        }
        // 使用 el-tree 的内置过滤功能搜索
    proxy.$refs.tree.filter(search.value);
        treeLoad.value = false;
      })
      .catch(err => {
        treeLoad.value = false;
      });
  };
  // 打开产品弹框
  const openProDia = (type, data) => {
@@ -684,8 +730,35 @@
  };
  // 选择产品
  const handleNodeClick = (val, node, el) => {
    // 点击非叶子节点时，不执行以下逻辑
    // 点击非叶子节点时，加载子节点数据
    if (!val.isLeaf) {
      // 调用 productTreeListQuery 接口获取子节点数据
      // treeLoad.value = true;
      productTreeListQuery({ materialTypeId: val.id })
        .then(res => {
          // 处理返回的数据
          if (res.data && res.data.length > 0) {
            const materialList = res.data[0].materialList || [];
            // 转换子节点数据格式
            const children = materialList.map(item => ({
              id: item.id,
              isLeaf: true,
              label: item.materialName,
              inventoryCategoryId: item.inventoryCategoryId,
              materialTypeId: item.materialTypeId,
              remark: item.remark,
              baseUnit: item.baseUnit,
            }));
            // 更新节点的子节点
            val.children = children;
            // 展开节点
            node.expanded = true;
          }
          // treeLoad.value = false;
        })
        .catch(err => {
          // treeLoad.value = false;
        });
      return;
    }
    // 判断是否为叶子节点

 src/views/productionPlan/productionPlan/index.vue

@@ -349,7 +349,11 @@
    productionPlanCombine,
  } from "@/api/productionPlan/productionPlan.js";
  import PIMTable from "./components/PIMTable.vue";
  import { modelListPage, productTreeList } from "@/api/basicData/newProduct.js";
  import {
    modelListPage,
    productTreeList,
    productTreeListQuery,
  } from "@/api/basicData/newProduct.js";

  const { proxy } = getCurrentInstance();

@@ -645,7 +649,7 @@
  };

  const fetchProductOptions = () => {
    return productTreeList().then(res => {
    return productTreeList({ type: 2 }).then(res => {
      productOptions.value = convertIdToValue(res.data);
      return res;
    });