refactor(wms/coil): 移除旧版钢卷卡片布局,优化页面结构

1.  为钢卷暂存单据管理卡片添加v-if="moreColumn"控制显示
2.  移除correct.vue和correntAll.vue中冗余的coil-card组件代码
3.  统一添加标签打印功能,重构打印标签逻辑
4.  调整按钮加载状态和文案样式,优化交互体验
This commit is contained in:
2026-05-11 18:16:46 +08:00
parent 408a8a9929
commit 9225ceba38
3 changed files with 37 additions and 109 deletions

View File

@@ -94,55 +94,6 @@
</el-table-column>
</KLPTable>
<!-- <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>
<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.specification">{{ item.specification || '—'
}}</span>
</div>
<div class="info-item">
<span class="info-label">重量</span>
<span class="info-value">{{ item.netWeight || '—' }}t</span>
</div>
</div>
<el-button v-if="item.dataType == 1 && item.status == 0"
style="position: absolute; bottom: 10px; right: 10px;" type="success" icon="el-icon-refresh"
size="mini" @click="handleRestoreMaterial(item)" :loading="item.cancelling"
class="action-btn">回滚</el-button>
<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>
</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>
</template>
</coil-card> -->
</div>
<!-- 分页 -->
@@ -315,6 +266,8 @@
<el-dialog title="钢卷追溯" :visible.sync="traceOpen" width="90%" append-to-body>
<coil-trace-result v-loading="traceLoading" :trace-result="traceResult"></coil-trace-result>
</el-dialog>
<label-render ref="labelRender" v-show="false" :content="labelRender.data" :labelType="labelRender.type" />
</div>
</template>
@@ -612,6 +565,16 @@ export default {
path: '/wms/coil/' + row.coilId,
});
},
// 打印标签
handlePrintLabel(row) {
this.labelRender.data = {
...row,
updateTime: row.updateTime?.split(' ')[0] || '',
};
this.$nextTick(() => {
this.$refs.labelRender.printLabel();
})
},
/** 新增按钮操作 */
handleAdd() {
this.reset();

View File

@@ -61,9 +61,8 @@
size="mini" icon="el-icon-view" @click="handlePreviewLabel(scope.row)" title="预览标签">预览</el-button>
<el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="default"
size="mini" icon="el-icon-printer" @click="handlePrintLabel(scope.row)" title="打印标签">打印</el-button>
<el-button size="mini" type="default" style="margin-left: 0px; padding: 4px !important;" icon="el-icon-view" @click="handleNumberCoilClick(scope.row)">
数字钢卷
</el-button>
<el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="default"
size="mini" icon="el-icon-printer" @click="handleNumberCoilClick(scope.row)" title="数字钢卷">数字钢卷</el-button>
<el-button type="warning" icon="el-icon-time" size="mini" @click="handleTrace(scope.row)"
:loading="scope.row.picking" class="action-btn">追溯</el-button>
@@ -80,57 +79,7 @@
:loading="scope.row.cancelling" class="action-btn">强制入库</el-button>
</template>
</el-table-column>
</KLPTable>
<!-- <div v-if="materialCoilList.length === 0" class="empty-state">
<i class="el-icon-box"></i>
<p>未找到钢卷数据</p>
</div>
<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>
<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.specification">{{ item.specification || '—'
}}</span>
</div>
<div class="info-item">
<span class="info-label">重量</span>
<span class="info-value">{{ item.netWeight || '—' }}t</span>
</div>
</div>
<el-button v-if="item.dataType == 1 && item.status == 0"
style="position: absolute; bottom: 10px; right: 10px;" type="success" icon="el-icon-refresh" size="mini"
@click="handleRestoreMaterial(item)" :loading="item.cancelling" class="action-btn">回滚</el-button>
<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>
</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>
</template>
</coil-card> -->
</div>
</div>
@@ -275,6 +224,8 @@
<label-render :content="labelRender.data" :labelType="labelRender.type" />
</el-dialog>
<label-render ref="labelRender" v-show="false" :content="labelRender.data" :labelType="labelRender.type" />
<!-- 钢卷修正对话框 -->
<el-dialog :title="title" :visible.sync="correctVisible" width="600px">
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
@@ -603,12 +554,6 @@ export default {
}
return '物品类型';
},
// 进入数字钢卷页面
handleNumberCoilClick(row) {
this.$router.push({
path: '/wms/coil/' + row.coilId,
});
},
// 分条操作列表100-199
splitTypes() {
if (!this.dict.type.action_type) return [];
@@ -648,6 +593,25 @@ export default {
})
},
// 打印标签
handlePrintLabel(row) {
this.labelRender.data = {
...row,
updateTime: row.updateTime?.split(' ')[0] || '',
};
this.$nextTick(() => {
this.$refs.labelRender.printLabel();
})
},
// 进入数字钢卷页面
handleNumberCoilClick(row) {
console.log(row)
this.$router.push({
path: '/wms/coil/' + row.coilId,
});
},
// 处理材料类型变化
handleMaterialTypeChange(value) {
// 清空物品选择
@@ -663,6 +627,7 @@ export default {
/** 预览标签 */
handlePreviewLabel(row) {
console.log(row)
this.labelRender.visible = true;
const type = getCoilTagPrintType(row);
this.labelRender.type = type;

View File

@@ -609,7 +609,7 @@
</el-dialog>
<!-- 钢卷暂存单据管理 -->
<el-card class="box-card" style="margin-top: 20px;" :body-style="{ padding: '20px' }">
<el-card v-if="moreColumn" class="box-card" style="margin-top: 20px;" :body-style="{ padding: '20px' }">
<div slot="header" class="clearfix">
<span>钢卷暂存单据管理</span>
<el-button style="float: right; padding: 3px 0" type="text" @click="createTempOrder">创建暂存单据</el-button>