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

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

@@ -5,127 +5,123 @@
       <div class="rx-bc"> </div>
     </div>
 
-    <el-collapse accordion>
-      <div class="material" v-for="(item, index) in newList" :key="index">
-        <el-collapse-item>
-          <template slot="title">
-            <div class="content_table">
-              <div class="item rx-sc">
-                <div class="rx ww50">
-                  <div class="lable rx-cc">设备编码</div>
-                  <div class="content">
-                    {{ item.code }}
-                  </div>
-                </div>
-
-                <div class="rx ww20" v-if="item.codeNumber">
-                  <div class="lable rx-cc">编号</div>
-                  <div class="content">
-                    {{ item.codeNumber }}
-                  </div>
-                </div>
-
-                <div class="rx ww50">
-                  <div class="lable rx-cc">名称</div>
-                  <div class="content">{{ item.name }}</div>
-                </div>
-              </div>
+    <ele-pro-table
+      ref="table"
+      :needPage="false"
+      :columns="outerColumns"
+      @columns-change="handleColumnChange"
+      :datasource="list"
+      class="turnover-bom-table time-form"
+      :cache-key="cacheKeyUrl"
+      :show-tools="false"
+      row-key="code"
+    >
+      <template v-slot:rowExpand="{ row }">
+        <div
+          class="expand-wrap"
+          v-if="row.extInfo && row.extInfo.positionList && row.extInfo.positionList.length"
+        >
+          <div class="head row rx-sc">
+            <div class="item ww10">货位</div>
+            <div class="item ww25">工单编号</div>
+            <div class="item ww25">产品编码</div>
+            <div class="item ww20">数量PCS</div>
+            <div class="item ww20" v-if="!isDetails">投料PCS</div>
+            <div class="item ww20" v-if="isDetails">
+              {{ wordItem.taskType == 3 ? '抽样' : '投料' }}</div
+            >
+          </div>
 
-              <div class="del_box">
-                <el-link
-                  type="danger"
-                  icon="el-icon-delete"
-                  @click="getDelete(index)"
-                ></el-link>
-              </div>
-            </div>
-          </template>
-          <div class="content_table2">
-            <div class="head row rx-sc">
-              <div class="item ww10">货位</div>
-              <div class="item ww25">工单编号</div>
-              <div class="item ww25">产品编码</div>
-              <div class="item ww20">数量PCS</div>
-              <div class="item ww20" v-if="!isDetails">投料PCS</div>
-              <div class="item ww20" v-if="isDetails">
-                {{ wordItem.taskType == 3 ? '抽样' : '投料' }}</div
+          <div class="table">
+            <div
+              class="tr row rx-sc"
+              v-for="(it, idx) in row.extInfo.positionList"
+              :key="row.code + '-' + idx"
+            >
+              <div class="item ww10">{{ it.code }}</div>
+              <div
+                class="item ww25"
+                :class="{ 'color157': it.workOrderCode === wordItem.code }"
               >
-            </div>
-
-            <div class="table">
+                {{ it.workOrderCode }}
+              </div>
               <div
-                class="tr row rx-sc"
-                v-for="(it, idx) in item.extInfo.positionList"
-                :key="idx"
+                class="item ww25"
+                :class="{
+                  'color157': it.categoryCode === wordItem.productCode
+                }"
               >
-                <div class="item ww10">{{ it.code }}</div>
-                <div
-                  class="item ww25"
-                  :class="{ color157: it.workOrderCode === wordItem.code }"
-                >
-                  {{ it.workOrderCode }}
-                </div>
-                <div
-                  class="item ww25"
-                  :class="{
-                    color157: it.categoryCode === wordItem.productCode
-                  }"
-                >
-                  {{ it.categoryCode }}
-                </div>
+                {{ it.categoryCode }}
+              </div>
 
-                <div class="item ww20">
-                  <span>{{ it.quantity }}</span>
-                </div>
+              <div class="item ww20">
+                <span>{{ it.quantity }}</span>
+              </div>
 
-                <div class="item ww20" v-if="wordItem.taskType">
-                  <el-input
-                    :class="[
-                      'uni-input',
-                      wordItem.code == it.workOrderCode && it.quantity > 0
-                        ? 'content_num'
-                        : ''
-                    ]"
-                    size="mini"
-                    v-model="it.feedNum"
-                    type="digit"
-                    :disabled="it.quantity <= 0"
-                    @blur="
-                      Number(it.feedNum) > Number(it.quantity)
-                        ? (it.feedNum = Number(it.quantity))
-                        : ''
-                    "
-                  ></el-input>
-                </div>
-                <div class="item ww20" v-else="wordItem.taskType == 3">
-                  <el-input
-                    :class="[
-                      'uni-input',
-                      wordItem.code == it.workOrderCode && it.quantity > 0
-                        ? 'content_num'
-                        : ''
-                    ]"
-                    size="mini"
-                    v-model="it.sampleNum"
-                    type="digit"
-                    :disabled="it.quantity <= 0"
-                    @blur="
-                      Number(it.sampleNum) > Number(it.quantity)
-                        ? (it.sampleNum = Number(it.quantity))
-                        : ''
-                    "
-                  ></el-input>
-                </div>
+              <div class="item ww20" v-if="wordItem.taskType">
+                <el-input
+                  :class="[
+                    'uni-input',
+                    wordItem.code == it.workOrderCode && it.quantity > 0
+                      ? 'content_num'
+                      : ''
+                  ]"
+                  size="mini"
+                  v-model="it.feedNum"
+                  type="digit"
+                  :disabled="it.quantity <= 0"
+                  @blur="
+                    Number(it.feedNum) > Number(it.quantity)
+                      ? (it.feedNum = Number(it.quantity))
+                      : ''
+                  "
+                ></el-input>
+              </div>
+              <div class="item ww20" v-else="wordItem.taskType == 3">
+                <el-input
+                  :class="[
+                    'uni-input',
+                    wordItem.code == it.workOrderCode && it.quantity > 0
+                      ? 'content_num'
+                      : ''
+                  ]"
+                  size="mini"
+                  v-model="it.sampleNum"
+                  type="digit"
+                  :disabled="it.quantity <= 0"
+                  @blur="
+                    Number(it.sampleNum) > Number(it.quantity)
+                      ? (it.sampleNum = Number(it.quantity))
+                      : ''
+                  "
+                ></el-input>
               </div>
             </div>
           </div>
-        </el-collapse-item>
-      </div>
-    </el-collapse>
+        </div>
+      </template>
+
+      <template v-slot:codeNumber="{ row }">
+        <span v-if="row.codeNumber">{{ row.codeNumber }}</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: 'turnoverBom',
+    mixins: [tabMixins],
     props: {
       list: {
         type: Array,
@@ -147,6 +143,13 @@
         default: false
       }
     },
+
+    data() {
+      return {
+        cacheKeyUrl: 'turnover-bom-269915272'
+      };
+    },
+
     watch: {
       list: {
         immediate: true,
@@ -169,17 +172,55 @@
               });
             }
           });
-
-          this.newList = newVal;
         }
       }
     },
 
-    data() {
-      return {
-        newList: []
-      };
+    computed: {
+      outerColumns() {
+        return [
+          {
+            type: 'expand',
+            columnKey: 'expand',
+            slot: 'rowExpand',
+            width: 48,
+            align: 'center',
+            className: 'expand-col'
+          },
+          {
+            minWidth: 140,
+            prop: 'code',
+            label: '设备编码',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 120,
+            prop: 'codeNumber',
+            slot: 'codeNumber',
+            label: '编号',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            minWidth: 160,
+            prop: 'name',
+            label: '名称',
+            align: 'center',
+            showOverflowTooltip: true
+          },
+          {
+            columnKey: 'action',
+            label: '操作',
+            width: 80,
+            align: 'center',
+            resizable: false,
+            slot: 'action'
+          }
+        ];
+      }
     },
+
     methods: {
       getDelete(index) {
         this.list.splice(index, 1);
@@ -189,12 +230,14 @@
 </script>
 
 <style lang="scss" scoped>
-  .material {
-    width: 92%;
+  .turnover-bom-table {
+    width: 100%;
   }
 
-  .content_table2 {
+  .expand-wrap {
     width: 100%;
+    padding: 8px 16px;
+    box-sizing: border-box;
 
     .row {
       width: 100%;
@@ -268,7 +311,7 @@
     --input-background-color: #f0f8f2;
   }
 
-  ::v-deep .el-collapse-item__header.is-active {
-    color: black;
+  .uni-input {
+    width: 100%;
   }
-</style>
+</style>