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

zhangwencui

昨天 4fef2b8afba85d8f2f8be70b85ffc105cfc4deda

 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>
@@ -77,7 +76,7 @@
      </div>
    </div>
    <div class="right">
      <div style="margin-bottom: 10px"
      <div style="margin-bottom: 10px; display: flex; align-items: center; gap: 10px"
           v-if="isShowButton">
        <el-button type="primary"
                   @click="openModelDia('add')">
@@ -85,9 +84,18 @@
        </el-button>
        <ImportExcel :product-id="currentId"
                     @uploadSuccess="getModelList" />
        <el-input v-model="specification"
                  placeholder="规格型号"
                  style="width: 150px"
                  clearable
                  @change="getModelList" />
        <el-input v-model="materialCode"
                  placeholder="物料编号"
                  style="width: 150px"
                  clearable
                  @change="getModelList" />
        <el-button type="danger"
                   @click="handleDelete"
                   style="margin-left: 10px"
                   plain>
          删除
        </el-button>
@@ -95,10 +103,11 @@
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                :isShowPagination="false"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"></PIMTable>
                :tableLoading="tableLoading"
                @pagination="pagination"></PIMTable>
    </div>
    <el-dialog v-model="productDia"
               title="产品"
@@ -129,6 +138,7 @@
              <el-select v-model="form.inventoryCategoryId"
                         placeholder="请选择存货类别"
                         clearable
                         filterable
                         style="width: 100%">
                <el-option v-for="item in inventoryCategoryList"
                           :key="item.id"
@@ -145,6 +155,7 @@
              <el-select v-model="form.materialTypeId"
                         placeholder="请选择物料类型"
                         clearable
                         filterable
                         style="width: 100%">
                <el-option v-for="item in materialTypeList"
                           :key="item.id"
@@ -206,6 +217,15 @@
                        @keydown.enter.prevent />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="物料编码："
                          prop="materialCode">
              <el-input v-model="modelForm.materialCode"
                        placeholder="请输入物料编码"
                        clearable
                        @keydown.enter.prevent />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
@@ -214,6 +234,7 @@
              <el-select v-model="modelForm.supplyType"
                         placeholder="请选择供应方式"
                         clearable
                         filterable
                         style="width: 100%">
                <el-option label="自制"
                           value="自制" />
@@ -280,6 +301,7 @@
    delProductModel,
    modelListPage,
    productTreeList,
    productTreeListQuery,
    addOrEditProductConfig,
    updateOrEditProductConfig,
    delProductConfig,
@@ -305,6 +327,8 @@
  const expandedKeys = ref([]);
  const inventoryCategoryList = ref([]);
  const materialTypeList = ref([]);
  const specification = ref("");
  const materialCode = ref("");

  const getloadData = () => {
    loadData()
@@ -357,6 +381,10 @@
      prop: "specification",
    },
    {
      label: "物料编码",
      prop: "materialCode",
    },
    {
      label: "单位",
      prop: "baseUnit",
    },
@@ -379,6 +407,11 @@
  const tableLoading = ref(false);
  const isShowButton = ref(false);
  const selectedRows = ref([]);
  const page = reactive({
    current: 1,
    size: 10,
    total: 0,
  });

  const data = reactive({
    form: {
@@ -401,11 +434,13 @@
    modelForm: {
      specification: "",
      supplyType: "",
      materialCode: "",
      id: null,
    },
    modelRules: {
      specification: [{ required: true, message: "请输入", trigger: "blur" }],
      supplyType: [{ required: true, message: "请选择", trigger: "change" }],
      materialCode: [{ required: true, message: "请输入", trigger: "blur" }],
    },
    configForm: {
      configName: "",
@@ -424,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;
@@ -455,9 +481,64 @@
        treeLoad.value = false;
      });
  };
  const searchFilter1 = () => {
    getProductTreeList();
  };
  // 过滤产品树
  const searchFilter = () => {
    proxy.$refs.tree.filter(search.value);
    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) => {
@@ -508,12 +589,14 @@
    modelForm.value.specification = "";
    modelForm.value.supplyType = "";
    modelForm.value.id = null;
    modelForm.value.materialCode = null;

    if (type === "edit" && data) {
      // 编辑模式，回填数据
      modelForm.value.specification = data.specification || "";
      modelForm.value.supplyType = data.supplyType || "";
      modelForm.value.id = data.skuId || null;
      modelForm.value.materialCode = data.materialCode || null;
    }
  };
  // 提交产品名称修改
@@ -579,12 +662,14 @@
            proxy.$modal.msgSuccess("提交成功");
            closeConfigDia();
            getProductTreeList();
            getMaterialTypeList();
          });
        } else {
          addOrEditProductConfig(params).then(res => {
            proxy.$modal.msgSuccess("提交成功");
            closeConfigDia();
            getProductTreeList();
            getMaterialTypeList();
          });
        }
      }
@@ -645,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;
    }
    // 判断是否为叶子节点
@@ -665,6 +777,7 @@
        const params = {
          materialId: currentId.value,
          specification: modelForm.value.specification,
          materialCode: modelForm.value.materialCode,
          supplyType: modelForm.value.supplyType,
        };
        if (modelOperationType.value === "add") {
@@ -697,6 +810,11 @@
  };

  // 查询规格型号
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getModelList();
  };
  const getModelList = () => {
    if (!currentId.value) {
      return;
@@ -704,9 +822,14 @@
    tableLoading.value = true;
    modelListPage({
      materialId: currentId.value,
      current: page.current,
      size: page.size,
      specification: specification.value,
      materialCode: materialCode.value,
    }).then(res => {
      console.log("res", res);
      tableData.value = res.data;
      tableData.value = res.data.records || [];
      page.total = res.data.total;
      tableLoading.value = false;
    });
  };