feat(wms): 添加钢卷异常管理功能及组件
- 新增异常钢卷列表展示组件CoilList - 在abnormalDetail.vue中添加异常钢卷显示列 - 创建新的异常钢卷管理页面abnormalCoil.vue - 实现钢卷列表与异常明细的联动展示 - 优化表单交互，根据场景显示/隐藏钢卷选择器
This commit is contained in:
砂糖
196
klp-ui/src/views/wms/coil/components/CoilList.vue
Normal file
196
klp-ui/src/views/wms/coil/components/CoilList.vue
Normal file
@@ -0,0 +1,196 @@
|
||||
<template>
|
||||
<div class="coil-list-container">
|
||||
<!-- 列表空状态提示 -->
|
||||
<div v-if="coilList.length === 0" class="empty-tip">暂无钢卷数据</div>
|
||||
|
||||
<!-- 钢卷列表 -->
|
||||
<div
|
||||
v-else
|
||||
class="coil-list"
|
||||
>
|
||||
<!-- v-for 循环渲染列表项 -->
|
||||
<div
|
||||
v-for="(coil, index) in coilList"
|
||||
:key="index"
|
||||
:class="['coil-item', { 'coil-item--active': currentCoil.coilId === coil.coilId }]"
|
||||
@click="handleCoilClick(coil)"
|
||||
>
|
||||
<!-- 主信息区域 - 突出展示核心字段 -->
|
||||
<div class="main-info">
|
||||
<div class="coil-no-wrapper">
|
||||
<span class="label">钢卷号：</span>
|
||||
<span class="value primary">{{ coil.currentCoilNo || '未知' }}</span>
|
||||
</div>
|
||||
<div class="entry-no-wrapper">
|
||||
<span class="label">入场卷号：</span>
|
||||
<span class="value">{{ coil.enterCoilNo || '未知' }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 次信息区域 - 次要字段 -->
|
||||
<div class="secondary-info">
|
||||
<div class="warehouse-wrapper">
|
||||
<span class="label">逻辑库区：</span>
|
||||
<span class="value">{{ coil.warehouseName || '未知' }}</span>
|
||||
</div>
|
||||
|
||||
<!-- 钢卷信息 - 动态渲染组件 -->
|
||||
<div class="coil-detail-wrapper">
|
||||
<span class="label">钢卷信息：</span>
|
||||
<div class="detail-content">
|
||||
<ProductInfo
|
||||
v-if="coil.itemType == 'product'"
|
||||
:product="coil.product"
|
||||
/>
|
||||
<RawMaterialInfo
|
||||
v-else-if="coil.itemType === 'raw_material'"
|
||||
:material="coil.rawMaterial"
|
||||
/>
|
||||
<span v-else class="empty-text">暂无钢卷信息</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProductInfo from "@/components/KLPService/Renderer/ProductInfo";
|
||||
import RawMaterialInfo from "@/components/KLPService/Renderer/RawMaterialInfo";
|
||||
|
||||
export default {
|
||||
name: "CoilList",
|
||||
props: {
|
||||
coilList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ProductInfo,
|
||||
RawMaterialInfo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
currentCoil: {}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
handleCoilClick(coil) {
|
||||
this.currentCoil = coil;
|
||||
this.$emit('click', coil);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 容器样式 */
|
||||
.coil-list-container {
|
||||
width: 100%;
|
||||
padding: 6px;
|
||||
box-sizing: border-box;
|
||||
/* background-color: #f9fafb; */
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 空状态提示 */
|
||||
.empty-tip {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 列表容器 */
|
||||
.coil-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* 列表项样式 */
|
||||
.coil-item {
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
padding: 16px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
/* 默认上边框（透明），保证布局一致 */
|
||||
border-top: 3px solid transparent;
|
||||
}
|
||||
|
||||
/* 核心新增：选中状态的样式 */
|
||||
.coil-item--active {
|
||||
/* 特殊上边框 - 可自定义颜色/样式 */
|
||||
border-top: 3px solid #1989fa;
|
||||
/* 可选：增加背景色/阴影强化选中效果 */
|
||||
background-color: #f0f7ff;
|
||||
box-shadow: 0 1px 5px rgba(25, 137, 250, 0.15);
|
||||
}
|
||||
|
||||
/* 列表项 hover 效果 */
|
||||
.coil-item:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
/* 主信息区域 - 突出展示 */
|
||||
.main-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
.main-info .coil-no-wrapper .value.primary {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1989fa; /* 主色调突出钢卷号 */
|
||||
}
|
||||
|
||||
/* 次信息区域 */
|
||||
.secondary-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* 通用标签样式 */
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
/* 通用值样式 */
|
||||
.value {
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
/* 钢卷信息内容容器 */
|
||||
.detail-content {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
/* 空文本样式 */
|
||||
.empty-text {
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 768px) {
|
||||
.main-info {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user