refactor(wms): 提取异常钢卷表格为公共组件 AbnormalTable

将多个页面中重复的异常钢卷表格逻辑提取为公共组件 AbnormalTable，提高代码复用性和维护性

klp-ui/src/views/wms/coil/abnormalCoil.vue

@@ -50,45 +50,10 @@
           </el-form-item>
         </el-form>
 
-        <el-table v-loading="loading" :data="coilAbnormalList" @selection-change="handleSelectionChange">
+        <abnormal-table ref="abnormalTable" :list="coilAbnormalList" 
-          <!-- <el-table-column type="selection" width="55" align="center" /> -->
+          :editable="true" :show-coil="false" 
-          <el-table-column label="主键ID" align="center" prop="abnormalId" v-if="false" />
+          @delete="handleDelete" @update="handleUpdate">
-          <el-table-column label="位置" align="center" prop="position">
+        </abnormal-table>
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.coil_abnormal_position" :value="scope.row.position" />
-            </template>
-          </el-table-column>
-          <el-table-column label="上下板面" align="center" prop="plateSurface"></el-table-column>
-          <el-table-column label="开始位置" align="center" prop="startPosition" />
-          <el-table-column label="结束位置" align="center" prop="endPosition" />
-          <el-table-column label="缺陷长度" align="center" prop="length" />
-          <el-table-column label="产线" align="center" prop="productionLine" />
-          <el-table-column label="缺陷代码" align="center" prop="defectCode">
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
-            </template>
-          </el-table-column>
-          <el-table-column label="程度" align="center" prop="degree">
-            <template slot-scope="scope">
-              <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
-            </template>
-          </el-table-column>
-          <el-table-column label="是否为主缺陷" prop="mainMark">
-            <template slot-scope="scope">
-              <el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
-              <el-tag v-else type="danger">否</el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
-
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <!-- <el-button size="mini" type="text" icon="el-icon-check" @click="handleJudge(scope.row)">判级</el-button> -->
-              <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-              <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-            </template>
-          </el-table-column>
-        </el-table>
 
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
           :limit.sync="queryParams.pageSize" @pagination="getList" />
@@ -133,6 +98,7 @@ import CoilSelector from '@/components/CoilSelector'
 import CoilNo from '@/components/KLPService/Renderer/CoilNo'
 import CoilList from "./components/CoilList.vue";
 import AbnormalForm from './components/AbnormalForm';
+import AbnormalTable from './components/AbnormalTable';
 
 export default {
   name: "CoilAbnormal",
@@ -141,7 +107,8 @@ export default {
     CoilSelector,
     CoilNo,
     CoilList,
-    AbnormalForm
+    AbnormalForm,
+    AbnormalTable
   },
   data() {
     return {

klp-ui/src/views/wms/coil/abnormalDetail.vue

@@ -29,78 +29,16 @@
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
-          @click="handleUpdate">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
-          @click="handleDelete">删除</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-table v-loading="loading" :data="coilAbnormalList" @selection-change="handleSelectionChange">
+    <abnormal-table ref="abnormalTable" :list="coilAbnormalList" 
-      <el-table-column type="selection" width="55" align="center" />
+      :editable="true" :show-coil="false" 
-      <el-table-column label="主键ID" align="center" prop="abnormalId" v-if="false" />
+      @delete="handleDelete" @update="handleUpdate">
-      <el-table-column label="异常钢卷" align="center" prop="coilId">
+    </abnormal-table>
-        <template slot-scope="scope">
-          <coil-no :coilId="scope.row.coilId">
-            {{ scope.row.coilNo }}
-          </coil-no>
-        </template>
-      </el-table-column>
-      <el-table-column label="上下板面" align="center" prop="plateSurface"></el-table-column>
-
-      <el-table-column label="位置" align="center" prop="position">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.coil_abnormal_position" :value="scope.row.position" />
-        </template>
-      </el-table-column>
-
-      <el-table-column label="开始位置" align="center" prop="startPosition" />
-      <el-table-column label="结束位置" align="center" prop="endPosition" />
-      <el-table-column label="缺陷长度" align="center" prop="length" />
-      <el-table-column label="缺陷代码" align="center" prop="defectCode">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
-        </template>
-      </el-table-column>
-      <el-table-column label="是否为主缺陷" prop="mainMark">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
-          <el-tag v-else type="danger">否</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="程度" align="center" prop="degree">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
-        </template>
-      </el-table-column>
-      <!-- <el-table-column label="判级" align="center" prop="judgeLevel">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.coil_abnormal_level" :value="scope.row.judgeLevel" />
-        </template>
-      </el-table-column>
-      <el-table-column label="判级人" align="center" prop="judgeBy" />
-      <el-table-column label="判级时间" align="center" prop="judgeTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.judgeTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column> -->
-      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip />
-
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <!-- <el-button size="mini" type="text" icon="el-icon-check" @click="handleJudge(scope.row)">判级</el-button> -->
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
 
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
@@ -121,6 +59,7 @@ import { listCoilAbnormal, getCoilAbnormal, delCoilAbnormal, addCoilAbnormal, up
 import CoilSelector from '@/components/CoilSelector'
 import CoilNo from '@/components/KLPService/Renderer/CoilNo'
 import AbnormalForm from './components/AbnormalForm'
+import AbnormalTable from './components/AbnormalTable'
 
 export default {
   name: "CoilAbnormal",
@@ -128,7 +67,8 @@ export default {
   components: {
     CoilSelector,
     CoilNo,
-    AbnormalForm
+    AbnormalForm,
+    AbnormalTable
   },
   data() {
     return {

klp-ui/src/views/wms/coil/components/AbnormalTable.vue

@@ -0,0 +1,82 @@
+<template>
+  <el-table :data="list">
+    <el-table-column label="异常钢卷" align="center" prop="coilId" v-if="showCoil">
+      <template slot-scope="scope">
+        <coil-no :coilId="scope.row.coilId">
+          {{ scope.row.coilNo }}
+        </coil-no>
+      </template>
+    </el-table-column>
+    <el-table-column label="缺陷描述" align="center" prop="remark" show-overflow-tooltip />
+    <el-table-column label="上下板面" align="center" prop="plateSurface"></el-table-column>
+    <el-table-column label="缺陷位置" align="center" prop="position">
+      <template slot-scope="scope">
+        <dict-tag :options="dict.type.coil_abnormal_position" :value="scope.row.position" />
+      </template>
+    </el-table-column>
+
+    <el-table-column label="开始位置" align="center" prop="startPosition" />
+    <el-table-column label="结束位置" align="center" prop="endPosition" />
+    <el-table-column label="缺陷长度" align="center" prop="length" />
+    <el-table-column label="缺陷代码" align="center" prop="defectCode">
+      <template slot-scope="scope">
+        <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
+      </template>
+    </el-table-column>
+    <el-table-column label="是否为主缺陷" prop="mainMark">
+      <template slot-scope="scope">
+        <el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
+        <el-tag v-else type="danger">否</el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="程度" align="center" prop="degree">
+      <template slot-scope="scope">
+        <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
+      </template>
+    </el-table-column>
+
+    <el-table-column label="操作" align="center" class-name="small-padding fixed-width" v-if="editable">
+      <template slot-scope="scope">
+        <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
+        <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<script>
+import CoilNo from '@/components/KLPService/Renderer/CoilNo'
+
+export default {
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    },
+    editable: {
+      type: Boolean,
+      default: false
+    },
+    showCoil: {
+      type: Boolean,
+      default: false
+    }
+  },
+  components: {
+    CoilNo
+  },
+  dicts: ['coil_abnormal_position', 'coil_abnormal_code', 'coil_abnormal_degree'],
+  methods: {
+    handleDelete(row) {
+      if (this.editable) {
+        this.$emit('delete', row);
+      }
+    },
+    handleUpdate(row) {
+      if (this.editable) {
+        this.$emit('update', row);
+      }
+    }
+  }
+}
+</script>

klp-ui/src/views/wms/coil/panels/abnormal.vue

@@ -26,39 +26,10 @@
       </el-form-item>
     </el-form>
 
-    <el-table v-loading="loading" :data="coilAbnormalList">
+    <abnormal-table v-loading="loading" ref="abnormalTable" :list="coilAbnormalList" 
-      <el-table-column label="位置" align="center" prop="position">
+      :editable="true" :show-coil="false" 
-        <template slot-scope="scope">
+      @delete="handleDelete" @update="handleUpdate">
-          <dict-tag :options="dict.type.coil_abnormal_position" :value="scope.row.position" />
+    </abnormal-table>
-        </template>
-      </el-table-column>
-      <el-table-column label="开始位置" align="center" prop="startPosition" />
-      <el-table-column label="结束位置" align="center" prop="endPosition" />
-      <el-table-column label="上下板面" align="center" prop="plateSurface"></el-table-column>
-      <el-table-column label="缺陷长度" align="center" prop="length" />
-      <el-table-column label="缺陷代码" align="center" prop="defectCode">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
-        </template>
-      </el-table-column>
-      <el-table-column label="是否为主缺陷" prop="mainMark">
-        <template slot-scope="scope">
-          <el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
-          <el-tag v-else type="danger">否</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="程度" align="center" prop="degree">
-        <template slot-scope="scope">
-          <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
 
     <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
       @pagination="getList" />
@@ -123,12 +94,14 @@
 import { listCoilAbnormal, getCoilAbnormal, delCoilAbnormal, addCoilAbnormal, updateCoilAbnormal } from "@/api/wms/coilAbnormal";
 import { getMaterialCoil } from '@/api/wms/coil'
 import AbnormalForm from '../components/AbnormalForm';
+import AbnormalTable from '../components/AbnormalTable';
 
 export default {
   name: "CoilAbnormal",
   dicts: ['coil_abnormal_code', 'coil_abnormal_position', 'coil_abnormal_degree'],
   components: {
-    AbnormalForm
+    AbnormalForm,
+    AbnormalTable,
   },
   data() {
     return {

klp-ui/src/views/wms/report/components/coilTable/index.vue

@@ -61,31 +61,9 @@
     </el-table>
 
     <el-dialog title="钢卷异常信息" :visible.sync="abmornal.visible" width="60%">
-      <el-table :data="abmornal.data" style="width: 100%" v-loading="abmornal.loading">
+      <abnormal-table ref="abnormalTable" :list="abmornal.data" 
-        <el-table-column label="开始位置" prop="startPosition"></el-table-column>
+        :editable="false" :show-coil="false" v-loading="abmornal.loading">
-        <el-table-column label="结束位置" prop="endPosition"></el-table-column>
+      </abnormal-table>
-        <el-table-column label="长度" prop="length"></el-table-column>
-        <el-table-column label="上下板面" align="center" prop="plateSurface"></el-table-column>
-        <el-table-column label="缺陷位置" prop="position"></el-table-column>
-        <el-table-column label="缺陷代码" prop="defectCode">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.coil_abnormal_code" :value="scope.row.defectCode" />
-          </template>
-        </el-table-column>
-        <el-table-column label="是否为主缺陷" prop="mainMark">
-          <template slot-scope="scope">
-            <el-tag v-if="scope.row.mainMark" type="success">是</el-tag>
-            <el-tag v-else type="danger">否</el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="程度" prop="degree">
-          <template slot-scope="scope">
-            <dict-tag :options="dict.type.coil_abnormal_degree" :value="scope.row.degree" />
-          </template>
-        </el-table-column>
-        <el-table-column label="产线" prop="productionLine"></el-table-column>
-        <el-table-column label="备注" prop="remark"></el-table-column>
-      </el-table>
     </el-dialog>
   </div>
 </template>
@@ -96,6 +74,7 @@ import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
 import CoilNo from "@/components/KLPService/Renderer/CoilNo.vue";
 
 import { listCoilAbnormal } from '@/api/wms/coilAbnormal'
+import AbnormalTable from '@/views/wms/coil/components/AbnormalTable.vue'
 
 export default {
   name: 'CoilTable',
@@ -103,6 +82,7 @@ export default {
     ProductInfo,
     RawMaterialInfo,
     CoilNo,
+    AbnormalTable,
   },
   props: {
     columns: {