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

feat(钢卷卡片): 新增CoilCard组件并重构相关页面

Browse Source 
将钢卷卡片相关逻辑抽离为独立组件CoilCard，并在correct.vue、correntAll.vue和do.vue页面中使用该组件替换原有卡片代码
在base.vue中添加发货状态筛选功能
在split.vue中新增拉矫修复工序的特殊分割逻辑
This commit is contained in:
砂糖
2026-04-10 15:00:20 +08:00
parent 8e2069cecf
commit 466ac13742
6 changed files with 427 additions and 809 deletions
Download Patch File Download Diff File Expand all files Collapse all files

304
klp-ui/src/views/wms/coil/panels/do.vue
View File

@@ -37,152 +37,14 @@
<p>暂无待领物料</p>
</div>
<div v-for="(item, index) in materialCoilList" :key="item.coilId || index" class="material-card"
:style="{ border: item.abnormalCount > 0 ? '1px solid red' : ' 1px solid #e4e7ed' }">
<div class="card-header">
<div class="header-left">
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
<!-- <span class="material-type">{{ item.materialType || '原料' }}</span> -->
<el-popover placement="top" width="280" trigger="hover"
popper-class="material-params-popover">
<div class="material-params-content">
<div class="params-title">
{{ item.itemName || '—' }}
</div>
<div class="params-list">
<div class="param-item">
<div class="param-row" v-if="item.specification">
<span class="param-label">规格：</span>
<span class="param-value">{{ item.specification }}</span>
</div>
<div class="param-row" v-if="item.material">
<span class="param-label">材质：</span>
<span class="param-value">{{ item.material }}</span>
</div>
<div class="param-row" v-if="item.surfaceTreatmentDesc">
<span class="param-label">表面处理：</span>
<span class="param-value">{{ item.surfaceTreatmentDesc }}</span>
</div>
<div class="param-row" v-if="item.zincLayer">
<span class="param-label">镀层质量：</span>
<span class="param-value">{{ item.zincLayer }}</span>
</div>
<div class="param-row" v-if="item.manufacturer">
<span class="param-label">厂家：</span>
<span class="param-value">{{ item.manufacturer }}</span>
</div>
</div>
<div class="param-divider"></div>
<div class="param-item">
<div class="param-row" v-if="item.qualityStatus">
<span class="param-label">质量状态：</span>
<span class="param-value">{{ item.qualityStatus }}</span>
</div>
<div class="param-row" v-if="item.trimmingRequirement">
<span class="param-label">切边要求：</span>
<span class="param-value">{{ item.trimmingRequirement }}</span>
</div>
<div class="param-row" v-if="item.packingStatus">
<span class="param-label">原料材质：</span>
<span class="param-value">{{ item.packingStatus }}</span>
</div>
<div class="param-row" v-if="item.packagingRequirement">
<span class="param-label">包装要求：</span>
<span class="param-value">{{ item.packagingRequirement }}</span>
</div>
<div class="param-row" v-if="item.grossWeight">
<span class="param-label">毛重：</span>
<span class="param-value">{{ item.grossWeight }}t</span>
</div>
<div class="param-row" v-if="item.netWeight">
<span class="param-label">净重：</span>
<span class="param-value">{{ item.netWeight }}t</span>
</div>
<div class="param-row" v-if="item.length">
<span class="param-label">长度：</span>
<span class="param-value">{{ item.length }}米</span>
</div>
<div class="param-row" v-if="item.actualLength">
<span class="param-label">实测长度：</span>
<span class="param-value">{{ item.actualLength }}米</span>
</div>
<div class="param-row" v-if="item.actualThickness">
<span class="param-label">实测厚度：</span>
<span class="param-value">{{ item.actualThickness }}米</span>
</div>
<div class="param-row" v-if="item.actualWidth">
<span class="param-label">实测宽度：</span>
<span class="param-value">{{ item.actualWidth }}米</span>
</div>
<div class="param-row" v-if="item.temperGrade">
<span class="param-label">调制度：</span>
<span class="param-value">{{ item.temperGrade }}</span>
</div>
<div class="param-row" v-if="item.coatingType">
<span class="param-label">镀层种类：</span>
<span class="param-value">{{ item.coatingType }}</span>
</div>
<div class="param-row" v-if="item.coilSurfaceTreatment">
<span class="param-label">钢卷表面处理：</span>
<span class="param-value">{{ item.coilSurfaceTreatment }}</span>
</div>
<div class="param-row" v-if="item.team">
<span class="param-label">班组：</span>
<span class="param-value">{{ item.team }}</span>
</div>
<div class="param-row" v-if="item.updateTime">
<span class="param-label">更新时间：</span>
<span class="param-value">{{ parseTime(item.updateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
</div>
<div class="param-row" v-if="item.updateBy">
<span class="param-label">更新人：</span>
<span class="param-value">{{ item.updateBy }}</span>
</div>
<div class="param-row" v-if="item.remark">
<span class="param-label">备注：</span>
<span class="param-value">{{ item.remark }}</span>
</div>
</div>
</div>
</div>
<i slot="reference" class="el-icon-setting param-icon"></i>
</el-popover>
<i class="el-icon-view param-icon" @click="handlePreviewLabel(item)" title="查看标签"></i>
<!-- <el-button style="margin-left: 0px; padding: 4px !important;" type="text" size="mini" @click="handlePreviewLabel(item)" title="查看标签">预览</el-button> -->
<el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="text"
size="mini" @click="handlePrintLabel(item)" title="打印标签">打印</el-button>
</div>
</div>
<div class="card-body" style="position: relative;">
<div class="info-list">
<div class="info-item">
<span class="info-label">入场：</span>
<span class="info-value" :title="item.enterCoilNo">{{ item.enterCoilNo || '—' }}</span>
</div>
<div class="info-item">
<span class="info-label">厂家：</span>
<span class="info-value" :title="item.supplierCoilNo">{{ item.supplierCoilNo || '—' }}</span>
</div>
<div class="info-item">
<span class="info-label">库位：</span>
<span class="info-value" :title="item.warehouseName">{{ item.warehouseName || '—' }}</span>
</div>
<div class="info-item">
<span class="info-label">库区：</span>
<span class="info-value" :title="item.actualWarehouseName">{{ item.actualWarehouseName || '—'
}}</span>
</div>
<div class="info-item">
<span class="info-label">重量：</span>
<span class="info-value">{{ item.netWeight || '—' }}t</span>
</div>
</div>
</div>
<div class="card-footer">
<coil-card v-for="(item, index) in materialCoilList" :key="item.coilId || index" :coil="item"
:card-style="{ border: item.abnormalCount > 0 ? '1px solid red' : ' 1px solid #e4e7ed' }">
<template slot="header">
<i class="el-icon-view param-icon" @click="handlePreviewLabel(item)" title="查看标签"></i>
<el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="text"
size="mini" @click="handlePrintLabel(item)" title="打印标签">打印</el-button>
</template>
<template slot="footer">
<el-button v-if="useSpecialSplit" :style="splitButtonStyle" icon="el-icon-scissors" size="mini"
@click="handleStartSplit(item)" :loading="buttonLoading" class="action-btn">加工</el-button>
<el-button v-else type="primary" icon="el-icon-check" size="mini" @click="handlePickMaterial(item)"
@@ -192,8 +54,8 @@
缺陷明细
<span v-if="item.abnormalCount > 0">({{ item.abnormalCount }})</span>
</el-button>
</div>
</div>
</template>
</coil-card>
</div>
<!-- 分页 -->
@@ -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;
}
}