2024.12.11 产品文档收集-项目物料-量产BOM 优化

src/utils/arrayToTreeByLevelCode.js

@@ -0,0 +1,29 @@
+export function arrayToTreeByLevelCode(data, levelField, childrenField) {
+  if (!Array.isArray(data)) {
+    console.error("Invalid data: data is not an array", data);
+    return [];
+  }
+
+  const tree = [];
+  const map = new Map();
+
+  // 初始化 Map，每个 levelCode 对应一个节点对象
+  data.forEach(item => {
+    map.set(item[levelField], { ...item, [childrenField]: [] });
+  });
+
+  data.forEach(item => {
+    const node = map.get(item[levelField]);
+    const parentKey = item[levelField].split('.').slice(0, -1).join('.'); // 获取父节点的 levelCode
+    if (parentKey && map.has(parentKey)) {
+      // 如果有父节点，添加到父节点的 children 数组中
+      map.get(parentKey)[childrenField].push(node);
+    } else {
+      // 没有父节点，说明是根节点
+      tree.push(node);
+    }
+  });
+
+  return tree;
+}
+

src/views/modules/eam/eamProjectPartInfo.vue

@@ -478,13 +478,22 @@
       </el-tab-pane>
       <el-tab-pane label="量产BOM" name="massProductionBOM">
           <el-table
-            :data="flattenedData"
+            :data="projectPartBomList"
+            row-key="levelCode"
             border
             style="width: 100%; margin-top: 5px;"
             :height="this.height + 50"
             ref="projectBomTable"
-            v-loading="dataListLoading">
+            v-loading="dataListLoading"
+            :tree-props="{ children: 'children' }">
             <!-- 数据列 -->
+            <el-table-column
+              label=""
+              prop=""
+              header-align="center"
+              align="right"
+              width="50">
+            </el-table-column>
             <el-table-column
               v-for="(item, index) in columnProjectBomList"
               :key="index"
@@ -497,26 +506,8 @@
               :min-width="item.columnWidth"
               :label="item.columnLabel">
               <template slot-scope="scope">
-                <div v-if="item.columnProp === 'levelCode'">
-                  <span v-if="scope.row.levelCode === '1'">{{ '主BOM' }}</span>
-                  <span v-else>{{ scope.row.levelCode }}</span>
-                </div>
-                <div v-else>
                   <span v-if="!item.columnHidden">{{scope.row[item.columnProp]}}</span>
                   <span v-if="item.columnImage"><img :src="scope.row[item.columnProp]" style="width: 100px; height: 80px"/></span>
-                </div>
-              </template>
-            </el-table-column>
-
-            <!-- 展开/折叠按钮 -->
-            <el-table-column label="操作" align="center" width="80" fixed="right">
-              <template #default="scope">
-                <a
-                  type="text"
-                  @click="toggleRow(scope.row)"
-                  v-if="hasChildren(scope.row)">
-                  {{ scope.row.expanded ? '查看子物料' : '查看子物料' }}
-                </a>
               </template>
             </el-table-column>
         </el-table>
@@ -1173,6 +1164,7 @@ import moment from 'moment';
 import 'moment/locale/zh-cn';
 import {downLoadObjectFile2} from "../../../api/eam/eam_object_list";
 import {EventBus} from "../../../main";
+import {arrayToTreeByLevelCode} from "../../../utils/arrayToTreeByLevelCode";
 /*打样记录組件*/
 
   export default {
@@ -1326,13 +1318,12 @@ import {EventBus} from "../../../main";
         confirmatoryList: [],
         projectAllDocumentConfirmatorList: [],
         projectANotDocumentConfirmatorList: [],
-        projectPartBomList: [],
+        projectPartBomList: [],// 量产BOM原始平面数据数组
         confirmatorySelection1: [],
         confirmatorySelection2: [],
         proofDocumentListDefinition: [],
         confirmProgressPusherList: [],
-        confirmProgressDocumentList: [],  // 量产BOM原始平面数据数组
-        flattenedData: [],  // 量产BOM渲染的平面数据
+        confirmProgressDocumentList: [],
         projectConfirmatorFileList: [],
         viewDocumentFileVisible: false,
         viewMassDocumentFileVisible: false,
@@ -2487,6 +2478,24 @@ import {EventBus} from "../../../main";
           }
           ],
         columnProjectBomList: [
+          {
+            userId: this.$store.state.user.name,
+            functionId: 401005,
+            serialNumber: '401005Table1LevelCode',
+            tableId: "401005Table1",
+            tableName: "项目物料表",
+            columnProp: 'levelCode',
+            headerAlign: "center",
+            align: "center",
+            columnLabel: 'BOM层级',
+            columnHidden: false,
+            columnImage: false,
+            columnSortable: false,
+            sortLv: 0,
+            status: true,
+            fixed: '',
+            columnWidth: 100,
+          },
           {
             userId: this.$store.state.user.name,
             functionId: 401005,
@@ -2559,24 +2568,6 @@ import {EventBus} from "../../../main";
             fixed: '',
             columnWidth: 150,
           },
-          {
-            userId: this.$store.state.user.name,
-            functionId: 401005,
-            serialNumber: '401005Table1LevelCode',
-            tableId: "401005Table1",
-            tableName: "项目物料表",
-            columnProp: 'levelCode',
-            headerAlign: "center",
-            align: "center",
-            columnLabel: 'BOM层级',
-            columnHidden: false,
-            columnImage: false,
-            columnSortable: false,
-            sortLv: 0,
-            status: true,
-            fixed: '',
-            columnWidth: 100,
-          },
         ],
         levelList: [],
         rules:{
@@ -5175,7 +5166,7 @@ import {EventBus} from "../../../main";
           }
         })
       },
-      searchMassProductionBomList() {
+      async fetchBomList() {
         let inData = {
           site: this.proofingCurrentRow.site,
           buNo: this.proofingCurrentRow.buNo,
@@ -5188,43 +5179,19 @@ import {EventBus} from "../../../main";
           page: 1,
           limit: 1000
         }
-        searchMassProductionBomList(inData).then(({data}) => {
+        return searchMassProductionBomList(inData).then(({data}) => {
           if (data && data.code === 0){
-            this.projectPartBomList = data.list;
-            // 初始化平面数据
-            this.flattenedData = this.projectPartBomList.filter(item => item.levelCode.split('.').length === 1);
+           return data.list
           }
         })
       },
-      // 检查是否有子级
-      hasChildren(row) {
-        return this.projectPartBomList.some(item => item.levelCode.startsWith(`${row.levelCode}.`));
-      },
-      // 展开或收起行
-      toggleRow(row) {
-        if (row.expanded) {
-          // 收起：移除子级数据
-          this.flattenedData = this.flattenedData.filter(item => !item.levelCode.startsWith(`${row.levelCode}.`));
-          row.expanded = false;
-        } else {
-          // 展开：加载子级数据
-          const children = this.projectPartBomList.filter(item =>
-            item.levelCode.startsWith(`${row.levelCode}.`) &&
-            item.levelCode.split('.').length === row.levelCode.split('.').length + 1
-          );
 
-          // 插入子级数据
-          const rowIndex = this.flattenedData.indexOf(row);
-          this.flattenedData.splice(rowIndex + 1, 0, ...children);
-          row.expanded = true;
-        }
-      },
       // 列表表格选择替换
       tabClick (tab, event) {
         // 刷新列表数据
         this.refreshCurrentTabTable()
       },
-      refreshCurrentTabTable () {
+      async refreshCurrentTabTable () {
         if (this.activeName == 'proofRecord') {
           this.getRowProjectInfo();
         }
@@ -5240,9 +5207,19 @@ import {EventBus} from "../../../main";
           this.getConfirmProgressPusherList()
         }
         if (this.activeName == 'massProductionBOM' && this.proofingCurrentRow.finalPartNo !== '' && this.proofingCurrentRow.finalPartNo !== null){
-          this.searchMassProductionBomList()
+          this.dataListLoading = true;
+          try {
+            // 模拟从后端获取数据
+            const flatData = await this.fetchBomList();
+            // 将平铺数据转换为树形结构
+            this.projectPartBomList = arrayToTreeByLevelCode(flatData, "levelCode", "children");
+            // 打印结果
+            console.log(JSON.stringify(this.projectPartBomList, null, 2));
+          } finally {
+            this.dataListLoading = false;
+          }
         } else {
-          this.flattenedData = []
+          this.projectPartBomList = []
         }
       },
       //获取按钮的权限数据