BOM：懒加载下级数据

src/api/product.js

@@ -26,6 +26,14 @@ export function getProductList (params) {
   })
 }
 
+// 物料列表
+export function getChildren (productId) {
+  return request({
+    url: request.adornUrl(`/biz-service/product/queryByParentId/${productId}`),
+    method: 'get'
+  })
+}
+
 // 图纸列表
 export function getDrawList (params) {
   return request({

src/views/modules/product/template-chose.vue

@@ -37,18 +37,24 @@
           prop="productCode"
           header-align="center"
           align="center"
+          min-width="140"
+          :show-tooltip-when-overflow="true"
           label="物料编码">
         </el-table-column>
         <el-table-column
           prop="productName"
           header-align="center"
           align="center"
+          min-width="140"
+          :show-tooltip-when-overflow="true"
           label="物料名称">
         </el-table-column>
         <el-table-column
           prop="mapNumber"
           header-align="center"
           align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
           label="图号">
         </el-table-column>
 <!--        <el-table-column-->
@@ -67,12 +73,16 @@
           prop="productSpec"
           header-align="center"
           align="center"
+          min-width="120"
+          :show-tooltip-when-overflow="true"
           label="物料规格">
         </el-table-column>
         <el-table-column
           prop="notes"
           header-align="center"
           align="center"
+          min-width="220"
+          :show-tooltip-when-overflow="true"
           label="备注">
         </el-table-column>
       </el-table>

src/views/modules/tech/product-add-or-update.vue

@@ -331,8 +331,8 @@ export default {
             this.activeNo = Number(data.data.workFlowProcessStepList.activeNo)
           }
           // 组合小物料
-          if (data.data.children) {
-            data.data.children.forEach((item) => {
+          if (data.data.proProductList) {
+            data.data.proProductList.forEach((item) => {
               this.productDetails.push({
                 ...item
               })

src/views/modules/tech/product-detail.vue

@@ -142,7 +142,11 @@
       <e-desc title="组合小物料">
         <el-table
           :data="productDetails"
+          row-key="productId"
           border
+          :indent='20'
+          lazy
+          :load="loadingData"
           style="width: 100%;">
           <el-table-column
             label="序号"
@@ -154,24 +158,29 @@
             prop="productName"
             header-align="center"
             align="center"
+            min-width="140"
             label="物品名称">
           </el-table-column>
           <el-table-column
             prop="productSpec"
             header-align="center"
             align="center"
+            min-width="120"
             label="规格">
           </el-table-column>
           <el-table-column
             prop="cnt"
             header-align="center"
             align="center"
+            min-width="80"
             label="数量">
           </el-table-column>
           <el-table-column
             prop="notes"
             header-align="center"
             align="center"
+            min-width="220"
+            :show-tooltip-when-overflow="true"
             label="备注">
           </el-table-column>
         </el-table>
@@ -233,7 +242,7 @@
   import EDescItem from '../common/e-desc-item'
   import { dealStepData, dealStepLogs } from '@/api/util'
   import uploadComponent from '../common/upload-component-v2'
-  import { getProductDetail } from '@/api/product'
+  import { getProductDetail, getChildren } from '@/api/product'
   import ApproveComponent from '../common/approve-component'
   import PreviewComponent from '../common/preview-component'
 export default {
@@ -289,7 +298,7 @@ export default {
               this.activeNo = Number(data.data.workFlowProcessStepList.activeNo)
             }
             // 组合小物料
-            data.data.children.forEach((item) => {
+            data.data.proProductList.forEach((item) => {
               this.productDetails.push(item)
             })
             // 物料配料清单
@@ -337,6 +346,15 @@ export default {
         this.$nextTick(() => {
           this.$refs.preview.init(fileName, url)
         })
+      },
+      loadingData (row, treeNode, resolve) {
+        getChildren(row.productId).then(({data}) => {
+          if (data && data.code === '200') {
+            resolve(data.data)
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
       }
     }
   }

src/views/modules/tech/product-management.vue

@@ -22,18 +22,18 @@
         <el-form-item label="图号">
           <el-input v-model="dataForm.mapNumber" placeholder="图号" clearable/>
         </el-form-item>
-        <el-form-item label="是否组合">
-          <el-select
-            v-model="dataForm.isCompose"
-            placeholder="请选择">
-            <el-option
-              v-for="item in optionsCompose"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value">
-            </el-option>
-          </el-select>
-        </el-form-item>
+<!--        <el-form-item label="是否组合">-->
+<!--          <el-select-->
+<!--            v-model="dataForm.isCompose"-->
+<!--            placeholder="请选择">-->
+<!--            <el-option-->
+<!--              v-for="item in optionsCompose"-->
+<!--              :key="item.value"-->
+<!--              :label="item.label"-->
+<!--              :value="item.value">-->
+<!--            </el-option>-->
+<!--          </el-select>-->
+<!--        </el-form-item>-->
         <el-form-item>
           <el-button @click="search()">查询</el-button>
           <el-button v-if="isAuth('pro:product:save')" type="primary" @click="addOrUpdateHandle(0, false)">新建</el-button>
@@ -47,8 +47,16 @@
         row-key="productId"
         border
         :indent='20'
+        lazy
+        :load="loadingData"
         v-loading="dataListLoading"
         style="width: 100%;">
+        <el-table-column
+          label="序号"
+          type="index"
+          width="50"
+          align="center">
+        </el-table-column>
         <el-table-column
           prop="productCode"
           header-align="center"
@@ -328,7 +336,7 @@
   import AddOrUpdate from './product-add-or-update'
   import Detail from './product-detail'
   import { getDictList } from '@/api/dict'
-  import { getProductList } from '@/api/product'
+  import { getProductList, getChildren } from '@/api/product'
   import CraftsDetail from './crafts-detail'
   import ProductDrawDetail from './product-draw-detail'
   import AttachDetail from '../common/attach-detail'
@@ -417,8 +425,8 @@ export default {
         }
         getProductList(params).then(({data}) => {
           if (data && data.code === '200') {
-            // this.dataList = data.data.records
-            this.dataList = JSON.parse(JSON.stringify(data.data.records).replace(/"children":null/g, '"children":[]'))
+            this.dataList = data.data.records
+            // this.dataList = JSON.parse(JSON.stringify(data.data.records).replace(/"children":null/g, '"children":[]'))
             this.dataList.forEach(item => {
               if (item.attachList2 && item.attachList2.length > 0) {
                 item.simplePic = downloadUrl + item.attachList2[0].url
@@ -727,6 +735,15 @@ export default {
       },
       templateDownload () {
         location.href = this.$http.adornUrl(`/biz-service/product/template/download?_token=${Vue.cookie.get('token')}`)
+      },
+      loadingData (row, treeNode, resolve) {
+        getChildren(row.productId).then(({data}) => {
+          if (data && data.code === '200') {
+            resolve(data.data)
+          } else {
+            this.$message.error(data.msg)
+          }
+        })
       }
     }
   }