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

282
klp-ui/src/components/KLPService/Renderer/CoilCard.vue Normal file
View File

@@ -0,0 +1,282 @@
<template>
<div class="material-card" :style="cardStyle">
<div class="card-header">
<div class="header-left">
<current-coil-no :current-coil-no="coil.currentCoilNo"></current-coil-no>
<!-- <span class="material-type">{{ coil.materialType || '原料' }}</span> -->
<el-popover placement="top" width="280" trigger="hover" popper-class="material-params-popover">
<div class="material-params-content">
<div class="params-title">
{{ coil.coilName || '—' }}
</div>
<div class="params-list">
<div class="param-coil">
<div class="param-row" v-if="coil.specification">
<span class="param-label">规格：</span>
<span class="param-value">{{ coil.specification }}</span>
</div>
<div class="param-row" v-if="coil.material">
<span class="param-label">材质：</span>
<span class="param-value">{{ coil.material }}</span>
</div>
<div class="param-row" v-if="coil.surfaceTreatmentDesc">
<span class="param-label">表面处理：</span>
<span class="param-value">{{ coil.surfaceTreatmentDesc }}</span>
</div>
<div class="param-row" v-if="coil.zincLayer">
<span class="param-label">镀层质量：</span>
<span class="param-value">{{ coil.zincLayer }}</span>
</div>
<div class="param-row" v-if="coil.manufacturer">
<span class="param-label">厂家：</span>
<span class="param-value">{{ coil.manufacturer }}</span>
</div>
</div>
<div class="param-divider"></div>
<div class="param-coil">
<div class="param-row" v-if="coil.qualityStatus">
<span class="param-label">质量状态：</span>
<span class="param-value">{{ coil.qualityStatus }}</span>
</div>
<div class="param-row" v-if="coil.trimmingRequirement">
<span class="param-label">切边要求：</span>
<span class="param-value">{{ coil.trimmingRequirement }}</span>
</div>
<div class="param-row" v-if="coil.packingStatus">
<span class="param-label">原料材质：</span>
<span class="param-value">{{ coil.packingStatus }}</span>
</div>
<div class="param-row" v-if="coil.packagingRequirement">
<span class="param-label">包装要求：</span>
<span class="param-value">{{ coil.packagingRequirement }}</span>
</div>
<div class="param-row" v-if="coil.grossWeight">
<span class="param-label">毛重：</span>
<span class="param-value">{{ coil.grossWeight }}t</span>
</div>
<div class="param-row" v-if="coil.netWeight">
<span class="param-label">净重：</span>
<span class="param-value">{{ coil.netWeight }}t</span>
</div>
<div class="param-row" v-if="coil.length">
<span class="param-label">长度：</span>
<span class="param-value">{{ coil.length }}米</span>
</div>
<div class="param-row" v-if="coil.actualLength">
<span class="param-label">实测长度：</span>
<span class="param-value">{{ coil.actualLength }}米</span>
</div>
<div class="param-row" v-if="coil.actualThickness">
<span class="param-label">实测厚度：</span>
<span class="param-value">{{ coil.actualThickness }}米</span>
</div>
<div class="param-row" v-if="coil.actualWidth">
<span class="param-label">实测宽度：</span>
<span class="param-value">{{ coil.actualWidth }}米</span>
</div>
<div class="param-row" v-if="coil.temperGrade">
<span class="param-label">调制度：</span>
<span class="param-value">{{ coil.temperGrade }}</span>
</div>
<div class="param-row" v-if="coil.coatingType">
<span class="param-label">镀层种类：</span>
<span class="param-value">{{ coil.coatingType }}</span>
</div>
<div class="param-row" v-if="coil.coilSurfaceTreatment">
<span class="param-label">钢卷表面处理：</span>
<span class="param-value">{{ coil.coilSurfaceTreatment }}</span>
</div>
<div class="param-row" v-if="coil.team">
<span class="param-label">班组：</span>
<span class="param-value">{{ coil.team }}</span>
</div>
<div class="param-row" v-if="coil.updateTime">
<span class="param-label">更新时间：</span>
<span class="param-value">{{ parseTime(coil.updateTime, '{y}-{m}-{d} {h}:{i}') }}</span>
</div>
<div class="param-row" v-if="coil.updateBy">
<span class="param-label">更新人：</span>
<span class="param-value">{{ coil.updateBy }}</span>
</div>
<div class="param-row" v-if="coil.transferType">
<span class="param-label">调拨标记：</span>
<span class="param-value">{{ coil.transferType }}</span>
</div>
<div class="param-row" v-if="coil.remark">
<span class="param-label">备注：</span>
<span class="param-value">{{ coil.remark }}</span>
</div>
</div>
</div>
</div>
<i slot="reference" class="el-icon-setting param-icon"></i>
</el-popover>
<slot name="header"></slot>
<!-- <i class="el-icon-view param-icon" @click="handlePreviewLabel(coil)" title="查看标签"></i>
<el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="text" size="mini"
@click="handlePrintLabel(coil)" title="打印标签">打印</el-button> -->
</div>
</div>
<div class="card-body" style="position: relative;">
<slot name="body">
<div class="info-list">
<div class="info-coil">
<span class="info-label">入场：</span>
<span class="info-value" :title="coil.enterCoilNo">{{ coil.enterCoilNo || '—' }}</span>
</div>
<div class="info-coil">
<span class="info-label">厂家：</span>
<span class="info-value" :title="coil.supplierCoilNo">{{ coil.supplierCoilNo || '—' }}</span>
</div>
<div class="info-coil">
<span class="info-label">库位：</span>
<span class="info-value" :title="coil.warehouseName">{{ coil.warehouseName || '—' }}</span>
</div>
<div class="info-coil">
<span class="info-label">库区：</span>
<span class="info-value" :title="coil.actualWarehouseName">{{ coil.actualWarehouseName || '—'
}}</span>
</div>
<div class="info-coil">
<span class="info-label">重量：</span>
<span class="info-value">{{ coil.netWeight || '—' }}t</span>
</div>
</div>
</slot>
</div>
<div class="card-footer">
<slot name="footer"></slot>
<!-- <el-button v-if="useSpecialSplit" :style="splitButtonStyle" icon="el-icon-scissors" size="mini"
@click="handleStartSplit(coil)" :loading="buttonLoading" class="action-btn">加工</el-button>
<el-button v-else type="primary" icon="el-icon-check" size="mini" @click="handlePickMaterial(coil)"
:loading="buttonLoading" class="action-btn">领料</el-button>
<el-button type="danger" icon="el-icon-alarm-clock" :plain="coil.abnormalCount == 0" size="mini"
@click="handleAddAbnormal(coil)" :loading="buttonLoading" class="action-btn">
缺陷明细
<span v-if="coil.abnormalCount > 0">({{ coil.abnormalCount }})</span>
</el-button> -->
</div>
</div>
</template>
<script>
export default {
name: 'CoilCard',
props: {
coil: {
type: Object,
default: () => { }
},
cardStyle: {
type: Object,
default: () => { }
}
}
}
</script>
<style scoped>
.material-card {
background-color: #ffffff;
border: 1px solid #e4e7ed;
border-radius: 3px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
height: 100%;
&: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;
}
}
}
</style>

371
klp-ui/src/views/wms/coil/do/correct.vue
View File

@@ -50,126 +50,16 @@
<i class="el-icon-box"></i>
<p>暂无待领物料</p>
</div>
<div v-for="(item, index) in materialCoilList" :key="item.coilId || index" class="material-card"
:style="getBorderStyle(item)">
<div class="card-header">
<div class="header-left">
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
<el-tag type="info" size="small" class="coil-no-tag" :style="getBorderStyle(item)">{{
getTypeLabel(item) }}</el-tag>
<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>
<i class="el-icon-time param-icon" @click="handleTrace(item)" title="追溯"></i>
</div>
</div>
<div class="card-body" style="position: relative;">
<coil-card v-for="(item, index) in materialCoilList" :key="item.coilId || index" :coil="item"
:card-style="getBorderStyle(item)">
<template slot="header">
<el-tag type="info" size="small" class="coil-no-tag" :style="getBorderStyle(item)">{{
getTypeLabel(item) }}</el-tag>
<span class="material-type">{{ item.materialType || '原料' }}</span>
<i class="el-icon-view param-icon" @click="handlePreviewLabel(item)" title="查看标签"></i>
<i class="el-icon-time param-icon" @click="handleTrace(item)" title="追溯"></i>
</template>
<template slot="body">
<div class="info-list">
<div class="info-item">
<span class="info-label">入场：</span>
@@ -201,20 +91,14 @@
style="position: absolute; bottom: 10px; right: 10px;" type="success" icon="el-icon-refresh"
size="mini" @click="handleForceInMaterial(item)" :loading="item.cancelling"
class="action-btn">强制入库</el-button>
</div>
<div class="card-footer">
</template>
<template slot="footer">
<el-button type="primary" icon="el-icon-check" size="mini" @click="handleCorrectMaterial(item)"
:loading="item.picking" class="action-btn">修正</el-button>
<el-button type="danger" icon="el-icon-delete" size="mini" @click="hanleDeleteMaterial(item)"
:loading="item.picking" class="action-btn">删除</el-button>
<!-- <el-button type="warning" icon="el-icon-alarm-clock" :plain="item.abnormalCount == 0" size="mini"
@click="handleAddAbnormal(item)" :loading="item.cancelling" class="action-btn">
异常
<span v-if="item.abnormalCount > 0">({{ item.abnormalCount }})</span>
</el-button> -->
</div>
</div>
</template>
</coil-card>
</div>
<!-- 分页 -->
@@ -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;
}
}
}

270
klp-ui/src/views/wms/coil/do/correntAll.vue
View File

@@ -41,126 +41,16 @@
<i class="el-icon-box"></i>
<p>未找到钢卷数据</p>
</div>
<div v-for="(item, index) in materialCoilList" :key="item.coilId || index" class="material-card"
:style="getBorderStyle(item)">
<div class="card-header">
<div class="header-left">
<current-coil-no :current-coil-no="item.currentCoilNo"></current-coil-no>
<el-tag type="info" size="small" class="coil-no-tag" :style="getBorderStyle(item)">{{
getTypeLabel(item) }}</el-tag>
<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>
<i class="el-icon-time param-icon" @click="handleTrace(item)" title="追溯"></i>
</div>
</div>
<div class="card-body" style="position: relative;">
<coil-card v-for="(item, index) in materialCoilList" :key="item.coilId || index" :coil="item"
:card-style="getBorderStyle(item)">
<template slot="header">
<el-tag type="info" size="small" class="coil-no-tag" :style="getBorderStyle(item)">{{
getTypeLabel(item) }}</el-tag>
<span class="material-type">{{ item.materialType || '原料' }}</span>
<i class="el-icon-view param-icon" @click="handlePreviewLabel(item)" title="查看标签"></i>
<i class="el-icon-time param-icon" @click="handleTrace(item)" title="追溯"></i>
</template>
<template slot="body">
<div class="info-list">
<div class="info-item">
<span class="info-label">入场：</span>
@@ -190,13 +80,12 @@
<el-button v-if="item.dataType == 10 && item.status == 0"
style="position: absolute; bottom: 10px; right: 10px;" type="success" icon="el-icon-refresh" size="mini"
@click="handleForceInMaterial(item)" :loading="item.cancelling" class="action-btn">强制入库</el-button>
</div>
<div class="card-footer">
</template>
<template slot="footer">
<el-button type="primary" icon="el-icon-check" size="mini" @click="handleCorrectMaterial(item)"
:loading="item.picking" class="action-btn">修正</el-button>
</div>
</div>
</template>
</coil-card>
</div>
</div>
@@ -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;
}
}

2
klp-ui/src/views/wms/coil/do/split.vue
View File

@@ -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中获取默认的查询参数

7
klp-ui/src/views/wms/coil/panels/base.vue
View File

@@ -48,6 +48,13 @@
<MaterialSelect :hideType="hideType" :itemId.sync="queryParams.itemIds" :itemType.sync="queryParams.itemType"
:multiple="true" />
<el-form-item v-if="showWaybill" label="发货状态">
<el-select v-model="queryParams.status" placeholder="请选择发货状态" clearable>
<el-option :value="0" label="未发货">未发货</el-option>
<el-option :value="1" label="已发货">已发货</el-option>
</el-select>
</el-form-item>
<el-form-item v-if="showWaybill" label="发货单时间">
<el-date-picker v-model="queryParams.shipmentTime" type="daterange" value-format="yyyy-MM-dd HH:mm:ss"
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />

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;
}
}