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

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

@@ -6,71 +6,53 @@
       <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>
+    <ele-pro-table
+      ref="table"
+      :needPage="false"
+      :columns="columns"
+      :datasource="list"
+      class="revolving-disk-bom-table time-form"
+      @columns-change="handleColumnChange"
+      max-height="600"
+      :cache-key="cacheKeyUrl"
+      :show-tools="false"
+      row-key="id"
+    >
+      <template v-slot:formedNum="{ row }">
+        <el-input
+          size="mini"
+          class="content_num"
+          v-model="row.extInfo.formedNum"
+          type="digit"
+          placeholder="数量"
+        />
+      </template>
 
-          <div class="rx ww33">
-            <div class="lable rx-cc">名称</div>
-            <div class="content">
-              {{ item.name }}
-            </div>
-          </div>
+      <template v-slot:pathName="{ row }">
+        <span>
+          {{
+            row.pathName || (row.positionVO && row.positionVO[0].pathName) || ''
+          }}
+        </span>
+      </template>
 
-          <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="pattern != 'job'">
-            <div class="lable rx-cc">仓库</div>
-            <div class="content">
-              <div>
-                {{
-                  item.pathName ||
-                  (item.positionVO && item.positionVO[0].pathName)
-                }}</div
-              >
-            </div>
-          </div>
-
-          <div class="rx ww33">
-            <!-- :disabled="isDetails" -->
-            <div class="lable rx-cc">数量</div>
-            <div class="content content_num rx-sc">
-              <el-input
-                size="mini"
-                v-model="item.extInfo.formedNum"
-                type="digit"
-                
-              />
-            </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="{ $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: 'revolvingDiskBom',
+    mixins: [tabMixins],
     props: {
       list: {
         type: Array,
@@ -83,10 +65,76 @@
       }
     },
 
-    computed: {},
-
     data() {
-      return {};
+      return {
+        cacheKeyUrl: 'revolving-disk-bom-269915271'
+      };
+    },
+
+    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: 'formedNum',
+            slot: 'formedNum',
+            label: '数量',
+            align: 'center'
+          }
+        ];
+
+        if (this.pattern !== 'job') {
+          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;
+      }
     },
 
     methods: {
@@ -97,4 +145,10 @@
   };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+  .revolving-disk-bom-table {
+    ::v-deep .content_num {
+      width: 100%;
+    }
+  }
+</style>