DeXun/klp-oa
9
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
将多个页面中重复的异常钢卷表格逻辑提取为公共组件 AbnormalTable，提高代码复用性和维护性
This commit is contained in:
砂糖
2026-04-09 16:22:59 +08:00
parent 0e075fe5d4
commit 255a6dc616
5 changed files with 108 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
klp-ui/src/views/wms/coil/abnormalCoil.vue
View File

@@ -50,45 +50,10 @@
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="coilAbnormalList" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column label="主键ID" align="center" prop="abnormalId" v-if="false" />
<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="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>
<abnormal-table ref="abnormalTable" :list="coilAbnormalList"
:editable="true" :show-coil="false"
@delete="handleDelete" @update="handleUpdate">
</abnormal-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 {

74
klp-ui/src/views/wms/coil/abnormalDetail.vue
View File

@@ -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">
<el-table-column type="selection" width="55" align="center" />
<el-table-column label="主键ID" align="center" prop="abnormalId" v-if="false" />
<el-table-column label="异常钢卷" align="center" prop="coilId">
<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>
<abnormal-table ref="abnormalTable" :list="coilAbnormalList"
:editable="true" :show-coil="false"
@delete="handleDelete" @update="handleUpdate">
</abnormal-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 {

82
klp-ui/src/views/wms/coil/components/AbnormalTable.vue Normal file
View File

@@ -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>

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

@@ -26,39 +26,10 @@
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="coilAbnormalList">
<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="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>
<abnormal-table v-loading="loading" ref="abnormalTable" :list="coilAbnormalList"
:editable="true" :show-coil="false"
@delete="handleDelete" @update="handleUpdate">
</abnormal-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 {

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

@@ -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">
<el-table-column label="开始位置" prop="startPosition"></el-table-column>
<el-table-column label="结束位置" prop="endPosition"></el-table-column>
<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>
<abnormal-table ref="abnormalTable" :list="abmornal.data"
:editable="false" :show-coil="false" v-loading="abmornal.loading">
</abnormal-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: {