From 466ac1374216d8ef7cf18585baed2d1ff23b1a48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= Date: Fri, 10 Apr 2026 15:00:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E9=92=A2=E5=8D=B7=E5=8D=A1=E7=89=87):=20?= =?UTF-8?q?=E6=96=B0=E5=A2=9ECoilCard=E7=BB=84=E4=BB=B6=E5=B9=B6=E9=87=8D?= =?UTF-8?q?=E6=9E=84=E7=9B=B8=E5=85=B3=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将钢卷卡片相关逻辑抽离为独立组件CoilCard，并在correct.vue、correntAll.vue和do.vue页面中使用该组件替换原有卡片代码 在base.vue中添加发货状态筛选功能 在split.vue中新增拉矫修复工序的特殊分割逻辑 --- .../KLPService/Renderer/CoilCard.vue | 282 +++++++++++++ klp-ui/src/views/wms/coil/do/correct.vue | 371 +++--------------- klp-ui/src/views/wms/coil/do/correntAll.vue | 270 +++---------- klp-ui/src/views/wms/coil/do/split.vue | 2 +- klp-ui/src/views/wms/coil/panels/base.vue | 7 + klp-ui/src/views/wms/coil/panels/do.vue | 304 ++------------ 6 files changed, 427 insertions(+), 809 deletions(-) create mode 100644 klp-ui/src/components/KLPService/Renderer/CoilCard.vue diff --git a/klp-ui/src/components/KLPService/Renderer/CoilCard.vue b/klp-ui/src/components/KLPService/Renderer/CoilCard.vue new file mode 100644 index 00000000..9468480d --- /dev/null +++ b/klp-ui/src/components/KLPService/Renderer/CoilCard.vue @@ -0,0 +1,282 @@ + + + + + diff --git a/klp-ui/src/views/wms/coil/do/correct.vue b/klp-ui/src/views/wms/coil/do/correct.vue index a1dd8a1a..37f8e2cf 100644 --- a/klp-ui/src/views/wms/coil/do/correct.vue +++ b/klp-ui/src/views/wms/coil/do/correct.vue @@ -50,126 +50,16 @@

暂无待领物料

-
-
-
- - {{ - getTypeLabel(item) }} - {{ item.materialType || '原料' }} - -
-
- {{ item.itemName || '—' }} -
-
-
-
- 规格： - {{ item.specification }} -
-
- 材质： - {{ item.material }} -
- -
- 表面处理： - {{ item.surfaceTreatmentDesc }} -
-
- 镀层质量： - {{ item.zincLayer }} -
-
- 厂家： - {{ item.manufacturer }} -
-
-
-
-
- 质量状态： - {{ item.qualityStatus }} -
-
- 切边要求： - {{ item.trimmingRequirement }} -
-
- 原料材质： - {{ item.packingStatus }} -
-
- 包装要求： - {{ item.packagingRequirement }} -
-
- 毛重： - {{ item.grossWeight }}t -
-
- 净重： - {{ item.netWeight }}t -
-
- 长度： - {{ item.length }} -
-
- 实测长度： - {{ item.actualLength }} -
-
- 实测厚度： - {{ item.actualThickness }} -
-
- 实测宽度： - {{ item.actualWidth }} -
-
- 调制度： - {{ item.temperGrade }} -
-
- 镀层种类： - {{ item.coatingType }} -
-
- 钢卷表面处理： - {{ item.coilSurfaceTreatment }} -
-
- 班组： - {{ item.team }} -
-
- 更新时间： - {{ parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}') }} -
-
- 更新人： - {{ item.updateBy }} -
-
- 备注： - {{ item.remark }} -
-
-
-
- - - - - - -
-
- -
+ + + + +
@@ -396,6 +280,7 @@ import { listPendingAction, startProcess, cancelAction, delPendingAction } from import { parseTime } from '@/utils/klp' import ProductInfo from '@/components/KLPService/Renderer/ProductInfo' import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo' +import CoilCard from '@/components/KLPService/Renderer/CoilCard.vue' import { addCoilAbnormal } from '@/api/wms/coilAbnormal' import LabelRender from '../panels/LabelRender/index.vue' import WarehouseSelect from "@/components/KLPService/WarehouseSelect"; @@ -421,6 +306,7 @@ export default { components: { ProductInfo, RawMaterialInfo, + CoilCard, LabelRender, WarehouseSelect, ActualWarehouseSelect, @@ -1151,211 +1037,56 @@ export default { } } -// 物料卡片 -.material-card { - background-color: #ffffff; - border: 1px solid #e4e7ed; - border-radius: 3px; - display: flex; - flex-direction: column; - transition: all 0.3s ease; - height: 100%; +.param-icon { + font-size: 13px; + color: #909399; + cursor: pointer; + transition: color 0.3s; &:hover { - border-color: #409eff; - box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12); - } - - .card-header { - padding: 6px 8px; - border-bottom: 1px solid #e4e7ed; - background-color: #fafafa; - - .header-left { - display: flex; - align-items: center; - gap: 6px; - } - - .coil-no-tag { - font-weight: 600; - font-size: 11px; - padding: 2px 6px; - } - - .material-type { - font-size: 11px; - color: #606266; - font-weight: 500; - } - - .param-icon { - font-size: 13px; - color: #909399; - cursor: pointer; - transition: color 0.3s; - - &:hover { - color: #409eff; - } - } - } - - .card-body { - padding: 8px; - flex: 1; - - .info-list { - .info-item { - display: flex; - align-items: center; - margin-bottom: 4px; - font-size: 11px; - line-height: 1.4; - - &:last-child { - margin-bottom: 0; - } - - .info-label { - color: #909399; - white-space: nowrap; - margin-right: 4px; - min-width: 40px; - font-size: 11px; - } - - .info-value { - color: #303133; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 11px; - } - } - } - } - - .card-footer { - padding: 6px 8px; - border-top: 1px solid #e4e7ed; - background-color: #fafafa; - display: flex; - justify-content: center; - - .action-btn { - width: 100%; - padding: 5px 10px; - font-size: 11px; - } + color: #409eff; } } -// 待操作卡片 -.action-card { - background-color: #ffffff; - border: 1px solid #e4e7ed; - border-radius: 4px; - display: flex; - flex-direction: column; - transition: all 0.3s ease; - height: 100%; +.material-type { + font-size: 11px; + color: #606266; + font-weight: 500; +} - &:hover { - border-color: #67c23a; - box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15); - } +.coil-no-tag { + font-weight: 600; + font-size: 11px; + padding: 2px 6px; +} - &.urgent-card { - border-left: 4px solid #f56c6c; - background-color: #fef0f0; - - &:hover { - border-color: #f56c6c; - box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2); - } - } - - &.important-card { - border-left: 4px solid #e6a23c; - background-color: #fdf6ec; - - &:hover { - border-color: #e6a23c; - box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2); - } - } - - .card-header { - padding: 10px 12px; - border-bottom: 1px solid #e4e7ed; - background-color: #fafafa; +.info-list { + .info-item { display: flex; - justify-content: space-between; align-items: center; + margin-bottom: 4px; + font-size: 11px; + line-height: 1.4; - .coil-no-tag { - font-weight: 600; - font-size: 12px; + &:last-child { + margin-bottom: 0; } - .status-tags { - display: flex; - gap: 4px; - flex-wrap: wrap; + .info-label { + color: #909399; + white-space: nowrap; + margin-right: 4px; + min-width: 40px; + font-size: 11px; } - } - .card-body { - padding: 12px; - flex: 1; - - .info-list { - .info-item { - display: flex; - align-items: center; - margin-bottom: 8px; - font-size: 12px; - - &:last-child { - margin-bottom: 0; - } - - .info-label { - color: #909399; - white-space: nowrap; - margin-right: 6px; - min-width: 50px; - } - - .info-value { - color: #303133; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .action-type-tag { - font-size: 11px; - } - } - } - } - - .card-footer { - padding: 10px 12px; - border-top: 1px solid #e4e7ed; - background-color: #fafafa; - display: flex; - justify-content: center; - gap: 6px; - - .action-btn { + .info-value { + color: #303133; flex: 1; - font-size: 12px; - padding: 6px 8px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + font-size: 11px; } } } diff --git a/klp-ui/src/views/wms/coil/do/correntAll.vue b/klp-ui/src/views/wms/coil/do/correntAll.vue index b10d8b82..2bf1541f 100644 --- a/klp-ui/src/views/wms/coil/do/correntAll.vue +++ b/klp-ui/src/views/wms/coil/do/correntAll.vue @@ -41,126 +41,16 @@

未找到钢卷数据

-
-
-
- - {{ - getTypeLabel(item) }} - {{ item.materialType || '原料' }} - -
-
- {{ item.itemName || '—' }} -
-
-
-
- 规格： - {{ item.specification }} -
-
- 材质： - {{ item.material }} -
- -
- 表面处理： - {{ item.surfaceTreatmentDesc }} -
-
- 镀层质量： - {{ item.zincLayer }} -
-
- 厂家： - {{ item.manufacturer }} -
-
-
-
-
- 质量状态： - {{ item.qualityStatus }} -
-
- 切边要求： - {{ item.trimmingRequirement }} -
-
- 原料材质： - {{ item.packingStatus }} -
-
- 包装要求： - {{ item.packagingRequirement }} -
-
- 毛重： - {{ item.grossWeight }}t -
-
- 净重： - {{ item.netWeight }}t -
-
- 长度： - {{ item.length }} -
-
- 实测长度： - {{ item.actualLength }} -
-
- 实测厚度： - {{ item.actualThickness }} -
-
- 实测宽度： - {{ item.actualWidth }} -
-
- 调制度： - {{ item.temperGrade }} -
-
- 镀层种类： - {{ item.coatingType }} -
-
- 钢卷表面处理： - {{ item.coilSurfaceTreatment }} -
-
- 班组： - {{ item.team }} -
-
- 更新时间： - {{ parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}') }} -
-
- 更新人： - {{ item.updateBy }} -
-
- 备注： - {{ item.remark }} -
-
-
-
- - - - - - -
-
- -
+ + + + +
@@ -468,6 +357,7 @@ import { listMaterialCoil, getMaterialCoilTrace, updateMaterialCoilSimple, check import { listPendingAction, getPendingAction, delPendingAction, addPendingAction, updatePendingAction, startProcess, cancelAction, restorePendingAction } from '@/api/wms/pendingAction' import { listUser } from '@/api/system/user' import { parseTime } from '@/utils/klp' +import CoilCard from '@/components/KLPService/Renderer/CoilCard.vue' import LabelRender from '../panels/LabelRender/index.vue' import WarehouseSelect from "@/components/KLPService/WarehouseSelect"; import ActualWarehouseSelect from "@/components/KLPService/ActualWarehouseSelect"; @@ -482,6 +372,7 @@ export default { name: 'CorrentAllPage', dicts: ['action_type', 'coil_quality_status', 'coil_business_purpose'], components: { + CoilCard, LabelRender, WarehouseSelect, ActualWarehouseSelect, @@ -1250,102 +1141,55 @@ export default { } } -// 物料卡片 -.material-card { - background-color: #ffffff; - border: 1px solid #e4e7ed; - border-radius: 3px; - display: flex; - flex-direction: column; - transition: all 0.3s ease; - margin-bottom: 12px; +.param-icon { + font-size: 13px; + color: #909399; + cursor: pointer; + transition: color 0.3s; &:hover { - border-color: #409eff; - box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12); + color: #409eff; } +} - .card-header { - padding: 6px 8px; - border-bottom: 1px solid #e4e7ed; - background-color: #fafafa; +.material-type { + font-size: 11px; + color: #606266; + font-weight: 500; +} - .header-left { - display: flex; - align-items: center; - gap: 6px; - } +.coil-no-tag { + font-weight: 600; + font-size: 11px; + padding: 2px 6px; +} - .coil-no-tag { - font-weight: 600; - font-size: 11px; - padding: 2px 6px; - } - - .material-type { - font-size: 11px; - color: #606266; - font-weight: 500; - } - - .param-icon { - font-size: 13px; - color: #909399; - cursor: pointer; - transition: color 0.3s; - - &:hover { - color: #409eff; - } - } - } - - .card-body { - padding: 8px; - flex: 1; - - .info-list { - .info-item { - display: flex; - align-items: center; - margin-bottom: 4px; - font-size: 11px; - line-height: 1.4; - - &:last-child { - margin-bottom: 0; - } - - .info-label { - color: #909399; - white-space: nowrap; - margin-right: 4px; - min-width: 40px; - font-size: 11px; - } - - .info-value { - color: #303133; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 11px; - } - } - } - } - - .card-footer { - padding: 6px 8px; - border-top: 1px solid #e4e7ed; - background-color: #fafafa; +.info-list { + .info-item { display: flex; - justify-content: center; + align-items: center; + margin-bottom: 4px; + font-size: 11px; + line-height: 1.4; - .action-btn { - width: 100%; - padding: 5px 10px; + &:last-child { + margin-bottom: 0; + } + + .info-label { + color: #909399; + white-space: nowrap; + margin-right: 4px; + min-width: 40px; + font-size: 11px; + } + + .info-value { + color: #303133; + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; font-size: 11px; } } diff --git a/klp-ui/src/views/wms/coil/do/split.vue b/klp-ui/src/views/wms/coil/do/split.vue index 33c8c4be..3838a188 100644 --- a/klp-ui/src/views/wms/coil/do/split.vue +++ b/klp-ui/src/views/wms/coil/do/split.vue @@ -63,7 +63,7 @@ ], } - if (this.actionType === '镀锌工序' || this.actionType === '脱脂工序' || this.actionType === '拉矫平整工序' || this.actionType === '双机架工序' || this.actionType === '镀铬工序' || this.actionType === '纵剪分条工序') { + if (this.actionType === '镀锌工序' || this.actionType === '脱脂工序' || this.actionType === '拉矫平整工序' || this.actionType === '双机架工序' || this.actionType === '镀铬工序' || this.actionType === '纵剪分条工序' || this.actionType === '拉矫修复工序') { this.useSpecialSplit = true } // 从map中获取默认的查询参数 diff --git a/klp-ui/src/views/wms/coil/panels/base.vue b/klp-ui/src/views/wms/coil/panels/base.vue index 963448b6..947484a8 100644 --- a/klp-ui/src/views/wms/coil/panels/base.vue +++ b/klp-ui/src/views/wms/coil/panels/base.vue @@ -48,6 +48,13 @@ + + + 未发货 + 已发货 + + + diff --git a/klp-ui/src/views/wms/coil/panels/do.vue b/klp-ui/src/views/wms/coil/panels/do.vue index 0db11428..297cc8ba 100644 --- a/klp-ui/src/views/wms/coil/panels/do.vue +++ b/klp-ui/src/views/wms/coil/panels/do.vue @@ -37,152 +37,14 @@

暂无待领物料

-
-
-
- - - -
-
- {{ item.itemName || '—' }} -
-
-
-
- 规格： - {{ item.specification }} -
-
- 材质： - {{ item.material }} -
- -
- 表面处理： - {{ item.surfaceTreatmentDesc }} -
-
- 镀层质量： - {{ item.zincLayer }} -
-
- 厂家： - {{ item.manufacturer }} -
-
-
-
-
- 质量状态： - {{ item.qualityStatus }} -
-
- 切边要求： - {{ item.trimmingRequirement }} -
-
- 原料材质： - {{ item.packingStatus }} -
-
- 包装要求： - {{ item.packagingRequirement }} -
-
- 毛重： - {{ item.grossWeight }}t -
-
- 净重： - {{ item.netWeight }}t -
-
- 长度： - {{ item.length }}米 -
-
- 实测长度： - {{ item.actualLength }}米 -
-
- 实测厚度： - {{ item.actualThickness }}米 -
-
- 实测宽度： - {{ item.actualWidth }}米 -
-
- 调制度： - {{ item.temperGrade }} -
-
- 镀层种类： - {{ item.coatingType }} -
-
- 钢卷表面处理： - {{ item.coilSurfaceTreatment }} -
-
- 班组： - {{ item.team }} -
-
- 更新时间： - {{ parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}') }} -
-
- 更新人： - {{ item.updateBy }} -
-
- 备注： - {{ item.remark }} -
-
-
-
- - - - - - 打印 -
-
- -
-
-
- 入场： - {{ item.enterCoilNo || '—' }} -
-
- 厂家： - {{ item.supplierCoilNo || '—' }} -
-
- 库位： - {{ item.warehouseName || '—' }} -
-
- 库区： - {{ item.actualWarehouseName || '—' - }} -
-
- 重量： - {{ item.netWeight || '—' }}t -
-
-
- -
+ + + +
@@ -438,6 +300,7 @@ import { listPendingAction, startProcess, cancelAction, delPendingAction, addPen import { parseTime } from '@/utils/klp' import ProductInfo from '@/components/KLPService/Renderer/ProductInfo' import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo' +import CoilCard from '@/components/KLPService/Renderer/CoilCard.vue' import LabelRender from './LabelRender/index.vue' import StepSplit from './stepSplit.vue' import ExceptionManager from '../components/ExceptionManager' @@ -463,6 +326,7 @@ export default { components: { ProductInfo, RawMaterialInfo, + CoilCard, LabelRender, StepSplit, ExceptionManager @@ -502,36 +366,6 @@ export default { buttonLoading: false, exceptionDialogVisible: false, currentCoilId: null, - tagSizeMap: { - '2': { - width: 100, - height: 80, - }, - '3': { - width: 180, - height: 100, - }, - '4': { - width: 180, - height: 100, - }, - 'ge': { - width: 180, - height: 80, - }, - 'where': { - width: 100, - height: 80, - }, - '5': { - width: 180, - height: 100, - }, - '6': { - width: 180, - height: 100, - }, - }, stepSpilt: { list: [], loading: false, @@ -591,7 +425,15 @@ export default { border: '1px solid #2bf', color: '#fff' } - } else { + } else if (this.acidRollingActionType == 507) { + return { + // 亮粉色 + backgroundColor: '#FFAACC', + border: '1px solid #FFAACC', + color: '#fff' + } + } + else { return {} } } @@ -1098,104 +940,16 @@ export default { } } -// 物料卡片 -.material-card { - background-color: #ffffff; - border: 1px solid #e4e7ed; - border-radius: 3px; - display: flex; - flex-direction: column; - transition: all 0.3s ease; - height: 100%; + + +.param-icon { + font-size: 13px; + color: #909399; + cursor: pointer; + transition: color 0.3s; &:hover { - border-color: #409eff; - box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12); - } - - .card-header { - padding: 6px 8px; - border-bottom: 1px solid #e4e7ed; - background-color: #fafafa; - - .header-left { - display: flex; - align-items: center; - gap: 6px; - } - - .coil-no-tag { - font-weight: 600; - font-size: 11px; - padding: 2px 6px; - } - - .material-type { - font-size: 11px; - color: #606266; - font-weight: 500; - } - - .param-icon { - font-size: 13px; - color: #909399; - cursor: pointer; - transition: color 0.3s; - - &:hover { - color: #409eff; - } - } - } - - .card-body { - padding: 8px; - flex: 1; - - .info-list { - .info-item { - display: flex; - align-items: center; - margin-bottom: 4px; - font-size: 11px; - line-height: 1.4; - - &:last-child { - margin-bottom: 0; - } - - .info-label { - color: #909399; - white-space: nowrap; - margin-right: 4px; - min-width: 40px; - font-size: 11px; - } - - .info-value { - color: #303133; - flex: 1; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 11px; - } - } - } - } - - .card-footer { - padding: 6px 8px; - border-top: 1px solid #e4e7ed; - background-color: #fafafa; - display: flex; - justify-content: center; - - .action-btn { - width: 100%; - padding: 5px 10px; - font-size: 11px; - } + color: #409eff; } }