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

refactor(wms/coil): 统一排产单表格展示样式并优化页面布局

Browse Source
This commit is contained in:
砂糖
2026-05-29 13:00:33 +08:00
parent 125e07eed4
commit 1b65444ab3
3 changed files with 213 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
klp-ui/src/views/wms/coil/merge.vue
View File

@@ -13,6 +13,47 @@
</div>
</div>
<!-- 最近排产单 -->
<div class="plan-sheet-container">
<div v-if="planSheetList.length > 0" class="plan-sheet-section">
<el-descriptions :column="1" border :title="'最近排产单（' + planSheetLineName + '）'" size="small" />
<el-tabs v-model="activePlanSheetId" type="card" size="mini">
<el-tab-pane v-for="sheet in planSheetList" :key="sheet.planSheetId" :name="sheet.planSheetId"
:label="sheet.planCode || ('排产单' + sheet.planSheetId)" />
</el-tabs>
<el-table v-loading="planSheetLoading" :data="activePlanSheetDetails" border stripe size="mini"
max-height="300">
<el-table-column type="index" label="序号" width="50" />
<el-table-column label="订单信息" header-align="center">
<el-table-column prop="contractCode" label="合同号" width="140" show-overflow-tooltip />
<el-table-column prop="customerName" label="客户" width="120" show-overflow-tooltip />
<el-table-column prop="salesman" label="业务员" width="100" show-overflow-tooltip />
</el-table-column>
<el-table-column label="成品信息" header-align="center">
<el-table-column prop="productName" label="成品名称" width="140" show-overflow-tooltip />
<el-table-column prop="productMaterial" label="材质" width="100" />
<el-table-column prop="coatingG" label="镀层g" width="80" />
<el-table-column prop="productWidth" label="成品宽度" width="100" />
<el-table-column prop="rollingThick" label="轧制厚度" width="100" />
<el-table-column prop="markCoatThick" label="标丝厚度" width="100" />
<el-table-column prop="tonSteelLengthRange" label="长度区间(m)" width="120" />
<el-table-column prop="planQty" label="数量" width="80" />
<el-table-column prop="planWeight" label="重量" width="100" />
<el-table-column prop="surfaceTreatment" label="表面处理" width="110" show-overflow-tooltip />
<el-table-column prop="widthReq" label="切边要求" width="110" show-overflow-tooltip />
<el-table-column prop="productPackaging" label="包装要求" width="100" show-overflow-tooltip />
<el-table-column prop="productEdgeReq" label="宽度要求" width="100" show-overflow-tooltip />
<el-table-column prop="usageReq" label="用途" width="100" show-overflow-tooltip />
</el-table-column>
<el-table-column prop="remark" label="备注" width="140" show-overflow-tooltip />
</el-table>
</div>
<div v-else-if="planSheetLineName && !planSheetLoading" class="plan-sheet-section">
<el-descriptions :column="1" border :title="'最近排产单（' + planSheetLineName + '）'" size="small" />
<el-empty description="今天暂无排产单" :image-size="60" />
</div>
</div>
<!-- 流程图区域 -->
<div class="flow-container">
<!-- 左侧：源卷列表 -->
@@ -90,39 +131,6 @@
</div>
</div>
<!-- 今日排产单 -->
<div v-if="planSheetList.length > 0" class="plan-sheet-section">
<el-descriptions :column="1" border :title="'最近排产单（' + planSheetLineName + '）'" size="small" />
<el-tabs v-model="activePlanSheetId" type="card" size="mini">
<el-tab-pane v-for="sheet in planSheetList" :key="sheet.planSheetId"
:name="sheet.planSheetId"
:label="sheet.planCode || ('排产单' + sheet.planSheetId)" />
</el-tabs>
<el-table v-loading="planSheetLoading" :data="activePlanSheetDetails" border stripe size="mini" max-height="300">
<el-table-column type="index" label="#" width="40" />
<el-table-column prop="bizSeqNo" label="序号" width="55" />
<el-table-column label="订单信息">
<el-table-column prop="orderCode" label="订单号" width="130" show-overflow-tooltip />
<el-table-column prop="contractCode" label="合同号" width="130" show-overflow-tooltip />
<el-table-column prop="customerName" label="客户" width="100" show-overflow-tooltip />
<el-table-column prop="salesman" label="业务员" width="80" show-overflow-tooltip />
</el-table-column>
<el-table-column label="成品信息">
<el-table-column prop="productName" label="成品名称" width="130" show-overflow-tooltip />
<el-table-column prop="productMaterial" label="材质" width="80" />
<el-table-column prop="coatingG" label="镀层g" width="70" />
<el-table-column prop="productWidth" label="宽度" width="80" />
<el-table-column prop="rollingThick" label="轧厚" width="80" />
<el-table-column prop="planQty" label="数量" width="65" />
<el-table-column prop="planWeight" label="重量" width="80" />
</el-table-column>
<el-table-column prop="remark" label="备注" width="100" show-overflow-tooltip />
</el-table>
</div>
<div v-else-if="planSheetLineName && !planSheetLoading" class="plan-sheet-section">
<el-descriptions :column="1" border :title="'最近排产单（' + planSheetLineName + '）'" size="small" />
<el-empty description="今天暂无排产单" :image-size="60" />
</div>
</div>
<!-- 右侧：目标卷信息 -->
@@ -1031,7 +1039,7 @@ export default {
<style scoped lang="scss">
.merge-coil-container {
padding: 20px;
padding: 12px;
background: #f5f7fa;
min-height: calc(100vh - 84px);
}
@@ -1042,8 +1050,8 @@ export default {
justify-content: space-between;
align-items: center;
background: #fff;
padding: 16px 20px;
margin-bottom: 20px;
padding: 10px 16px;
margin-bottom: 12px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
@@ -1065,12 +1073,12 @@ export default {
/* 流程图容器 */
.flow-container {
display: flex;
gap: 20px;
gap: 12px;
background: #fff;
padding: 20px;
padding: 12px;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
min-height: 600px;
min-height: 500px;
}
.flow-left {
@@ -1096,8 +1104,8 @@ export default {
font-size: 16px;
font-weight: 500;
color: #303133;
margin-bottom: 16px;
padding-left: 12px;
margin-bottom: 10px;
padding-left: 10px;
border-left: 4px solid #0066cc;
display: flex;
justify-content: space-between;
@@ -1106,10 +1114,10 @@ export default {
/* 源卷列表 */
.source-list {
max-height: 500px;
max-height: calc(100vh - 280px);
overflow-y: auto;
padding-right: 10px;
margin-bottom: 20px;
margin-bottom: 0;
&::-webkit-scrollbar {
width: 6px;
@@ -1125,7 +1133,7 @@ export default {
background: #fff;
border: 1px solid #e4e7ed;
border-radius: 8px;
margin-bottom: 10px;
margin-bottom: 8px;
transition: all 0.3s;
overflow: hidden;
@@ -1136,7 +1144,7 @@ export default {
}
.source-coil-header {
padding: 10px 14px;
padding: 8px 12px;
display: flex;
align-items: center;
gap: 10px;
@@ -1144,8 +1152,8 @@ export default {
}
.source-number {
width: 24px;
height: 24px;
width: 22px;
height: 22px;
border-radius: 50%;
background: #0066cc;
color: #fff;
@@ -1172,7 +1180,7 @@ export default {
}
.source-coil-body {
padding: 10px 14px;
padding: 8px 12px;
&:empty {
text-align: center;
@@ -1259,7 +1267,7 @@ export default {
.detail-label {
color: #909399;
min-width: 80px;
min-width: 72px;
flex-shrink: 0;
}
@@ -1339,29 +1347,29 @@ export default {
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
margin-bottom: 20px;
margin-bottom: 12px;
}
.target-coil-header {
background: #0066cc;
color: #fff;
padding: 16px 20px;
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
font-size: 16px;
font-size: 14px;
font-weight: 600;
}
.target-coil-body {
padding: 20px;
padding: 12px;
}
/* 双列表单布局 */
.form-row {
display: flex;
gap: 16px;
margin-bottom: 12px;
gap: 10px;
margin-bottom: 10px;
&:last-child {
margin-bottom: 0;
@@ -1527,7 +1535,26 @@ export default {
}
}
/* 排产单区域 */
.plan-sheet-container {
background: #fff;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 12px;
margin-bottom: 12px;
}
.plan-sheet-section {
margin-top: 16px;
margin-top: 0;
}
// 减少表单项间距
::v-deep .el-form-item {
margin-bottom: 10px;
}
::v-deep .el-form-item--small .el-form-item__content,
::v-deep .el-form-item--small .el-form-item__label {
line-height: 32px;
}
</style>