feat: 重构palletBom组件，使用ele-pro-table展示数据并优化列配置

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

@@ -1,102 +1,168 @@
 <template>
-    <div>
-      <div class="title_box rx-bc mt6">
-        <div class="name">舟皿 </div>
-  
-        <div class="rx-bc"> </div>
-      </div>
-  
-      <div class="material">
-        <div class="content_table" v-for="(item, index) in list" :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.modelType}}</div>
-            </div>
-          </div>
-  
-          <div class="item rx-sc" >
-            <div class="rx ww33"  v-if="isDetails">
-              <div class="lable rx-cc">仓库</div>
-              <div class="content">
-                <div>	{{item.pathName || item.positionVO && item.positionVO[0].pathName}}</div>
-              </div>
-            </div>
+  <div>
+    <div class="title_box rx-bc mt6">
+      <div class="name">舟皿 </div>
 
-            <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" type='digit' :disabled="isDetails"/>
-            </div>
-            </div>
-
-          </div>
-  
-          <div class="del_box">
-            <el-link
-              type="danger"
-              icon="el-icon-delete"
-              @click="getDelete(index)"
-            ></el-link>
-          </div>
-        </div>
-      </div>
+      <div class="rx-bc"> </div>
     </div>
-  </template>
-  
-  <script>
-    export default {
-      name: 'deviceBom',
-      props: {
-        list: {
-          type: Array,
-          default: () => []
-        },
-        wordItem: {
-          type: Object,
-          default: () => {}
-        },
-        isType: {
-          type: Boolean,
-          default: false
-        },
-  
-        remainingTime: {
-          type: Number,
-          default: 0
-        }
+
+    <ele-pro-table
+      ref="table"
+      :needPage="false"
+      :columns="columns"
+      @columns-change="handleColumnChange"
+      :datasource="list"
+      class="pallet-bom-table time-form"
+      max-height="600"
+      :cache-key="cacheKeyUrl"
+      :show-tools="false"
+      row-key="id"
+    >
+      <template v-slot:feedQuantity="{ row }">
+        <el-input
+          size="mini"
+          class="content_num"
+          v-model="row.feedQuantity"
+          type="digit"
+          placeholder="数量"
+          :disabled="isDetails"
+        />
+      </template>
+
+      <template v-slot:pathName="{ row }">
+        <span>
+          {{
+            row.pathName || (row.positionVO && row.positionVO[0].pathName) || ''
+          }}
+        </span>
+      </template>
+
+      <template v-slot:action="{ $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: 'palletBom',
+    mixins: [tabMixins],
+    props: {
+      list: {
+        type: Array,
+        default: () => []
+      },
+      wordItem: {
+        type: Object,
+        default: () => {}
       },
-  
-      computed: {},
-  
-      data() {
-        return {};
+      isType: {
+        type: Boolean,
+        default: false
+      },
+
+      isDetails: {
+        type: Boolean,
+        default: false
       },
-  
-      methods: {
-        getDelete(idx) {
-          this.list.splice(idx, 1);
+
+      remainingTime: {
+        type: Number,
+        default: 0
+      }
+    },
+
+    data() {
+      return {
+        cacheKeyUrl: 'pallet-bom-269915273'
+      };
+    },
+
+    computed: {
+      columns() {
+        const cols = [
+          {
+            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: 'modelType',
+            label: '型号',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 140,
+            prop: 'feedQuantity',
+            slot: 'feedQuantity',
+            label: '数量',
+            align: 'center'
+          }
+        ];
+
+        if (this.isDetails) {
+          cols.splice(4, 0, {
+            minWidth: 140,
+            prop: 'pathName',
+            slot: 'pathName',
+            label: '仓库',
+            align: 'center',
+            showOverflowTooltip: true
+          });
         }
+
+        cols.push({
+          columnKey: 'action',
+          label: '操作',
+          width: 80,
+          align: 'center',
+          resizable: false,
+          slot: 'action',
+          fixed: 'right'
+        });
+
+        return cols;
       }
-    };
-  </script>
-  
-  <style scoped lang="scss"></style>
-  
+    },
+
+    methods: {
+      getDelete(idx) {
+        this.list.splice(idx, 1);
+      }
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  .pallet-bom-table {
+    ::v-deep .content_num {
+      width: 100%;
+    }
+  }
+</style>