feat: 重构包装材料组件，使用ele-pro-table展示数据并优化操作逻辑

src/views/produce/components/feeding/components/packingBom.vue

@@ -6,73 +6,47 @@
       <div class="rx-bc"> </div>
     </div>
 
-    <div class="material">
-      <div class="content_table" v-for="(item, index) in arrList" :key="index">
-        <div class="item rx-sc">
-          <div class="rx ww33">
-            <div class="lable rx-cc">编号</div>
-            <div class="content">
-              {{ item.code }}
-            </div>
-          </div>
-
-          <div class="rx ww33">
-            <div class="lable rx-cc">名称</div>
-            <div class="content">
-              {{ item.name }}
-            </div>
-          </div>
-
-          <div class="rx ww33">
-            <div class="lable rx-cc">规格</div>
-            <div class="content">{{ item.specification }}</div>
-          </div>
+    <ele-pro-table
+      ref="table"
+      :needPage="false"
+      :columns="columns"
+      :datasource="arrList"
+      class="packing-bom-table time-form"
+      max-height="600"
+      :cache-key="cacheKeyUrl"
+      :show-tools="false"
+      row-key="id"
+    >
+      <template v-slot:feedQuantity="{ row }">
+        <div class="rx-sc">
+          <el-input
+            size="mini"
+            class="content_num"
+            v-model="row.feedQuantity"
+            placeholder="数量"
+          >
+          </el-input>
+          <span class="unit-text">/{{ row.unit }}</span>
         </div>
+      </template>
 
-        <div class="item rx-sc">
-          <div class="rx ww33">
-            <div class="lable rx-cc">型号</div>
-            <div class="content content_num rx-sc">
-              <el-input
-                size="mini"
-                v-model="item.feedQuantity"
-                placeholder="数量"
-              >
-              </el-input>
-              /{{ item.unit }}
-            </div>
-          </div>
-
-          <div class="rx ww33">
-            <div class="lable rx-cc">型号</div>
-            <div class="content">
-              <div>{{ item.modelType }}</div>
-            </div>
-          </div>
-
-          <div class="rx ww33">
-            <div class="lable rx-cc">领料仓库</div>
-            <div class="content">
-              <div>{{ item.pathName }}</div>
-            </div>
-          </div>
-        </div>
-
-        <div class="del_box">
-          <el-link
-            type="danger"
-            icon="el-icon-delete"
-            @click="getDelete(index)"
-          ></el-link>
-        </div>
-      </div>
-    </div>
+      <template v-slot:action="{ row, $index }">
+        <el-link
+          type="danger"
+          icon="el-icon-delete"
+          @click="getDelete($index)"
+        ></el-link>
+      </template>
+    </ele-pro-table>
   </div>
 </template>
 
 <script>
+  import tabMixins from '@/mixins/tableColumnsMixin';
+
   export default {
-    name: 'deviceBom',
+    name: 'packingBom',
+    mixins: [tabMixins],
     props: {
       list: {
         type: Array,
@@ -94,10 +68,12 @@
     },
 
     watch: {
-      list:{
-        handler(val){
-          if(val.length){
-            this.arrList = val.filter(v=>v.rootCategoryLevelId==='13')
+      list: {
+        handler(val) {
+          if (val && val.length) {
+            this.arrList = val.filter((v) => v.rootCategoryLevelId === '13');
+          } else {
+            this.arrList = [];
           }
         },
         immediate: true,
@@ -105,14 +81,79 @@
       }
     },
 
-    computed: {},
-
     data() {
       return {
-        arrList:[],
+        arrList: [],
+        cacheKeyUrl: 'packing-bom-269915270'
       };
     },
 
+    computed: {
+      columns() {
+        return [
+          {
+            columnKey: 'index',
+            type: 'index',
+            width: 55,
+            align: 'center',
+            label: '序号',
+            fixed: 'left'
+          },
+          {
+            minWidth: 120,
+            prop: 'code',
+            label: '编号',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 140,
+            prop: 'name',
+            label: '名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 120,
+            prop: 'specification',
+            label: '规格',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 120,
+            prop: 'modelType',
+            label: '型号',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 140,
+            prop: 'feedQuantity',
+            slot: 'feedQuantity',
+            label: '数量',
+            align: 'center'
+          },
+          {
+            minWidth: 140,
+            prop: 'pathName',
+            label: '领料仓库',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 80,
+            align: 'center',
+            resizable: false,
+            slot: 'action',
+            fixed: 'right'
+          }
+        ];
+      }
+    },
+
     methods: {
       getDelete(idx) {
         this.list.splice(idx, 1);
@@ -121,4 +162,16 @@
   };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .packing-bom-table {
+    ::v-deep .content_num {
+      width: 100%;
+    }
+
+    ::v-deep .unit-text {
+      margin-left: 4px;
+      color: #606266;
+      white-space: nowrap;
+    }
+  }
+</style>