diff --git a/klp-ui/src/views/wms/coil/actflow.vue b/klp-ui/src/views/wms/coil/actflow.vue index 91a99028..30acdce3 100644 --- a/klp-ui/src/views/wms/coil/actflow.vue +++ b/klp-ui/src/views/wms/coil/actflow.vue @@ -176,7 +176,7 @@ /> - + @@ -187,11 +187,49 @@ - - - - - +
+ +
+
分条操作
+
+
+
+ +
+
+
{{ item.label }}
+
{{ item.remark || '钢卷分条操作' }}
+
+
+
+
+ + +
+
其他操作
+
+
+
+ +
+
+
{{ item.label }}
+
{{ item.remark || '钢卷操作' }}
+
+
+
+
+
@@ -281,6 +319,24 @@ export default { coilSelectorVisible: false }; }, + computed: { + // 分条操作列表(100-199) + splitTypes() { + if (!this.dict.type.action_type) return []; + return this.dict.type.action_type.filter(item => { + const value = parseInt(item.value); + return value >= 100 && value <= 199; + }); + }, + // 其他操作列表(200-299等) + otherTypes() { + if (!this.dict.type.action_type) return []; + return this.dict.type.action_type.filter(item => { + const value = parseInt(item.value); + return value < 100 || value > 199; + }); + } + }, created() { this.getList(); // 设置定时刷新(可选,用于移动端扫码后自动刷新) @@ -521,6 +577,21 @@ export default { 3: '已取消' }; return statusMap[status] || '未知'; + }, + /** 根据操作类型获取图标 */ + getActionIcon(actionType) { + const value = parseInt(actionType); + const iconMap = { + 1: 'el-icon-connection', // 合卷 + 2: 'el-icon-s-operation', // 分条 + 3: 'el-icon-edit', // 更新 + 4: 'el-icon-truck', // 发货 + 5: 'el-icon-s-grid', // 移库 + 101: 'el-icon-scissors', // 纵剪分条 + 102: 'el-icon-s-operation', // 横切分条 + 103: 'el-icon-s-unfold' // 开卷分条 + }; + return iconMap[value] || 'el-icon-s-operation'; } } }; @@ -571,5 +642,127 @@ export default { color: #e6a23c; } } + +/* 操作类型卡片样式 */ +.action-type-cards { + width: 100%; + + .card-section { + margin-bottom: 24px; + + &:last-child { + margin-bottom: 0; + } + } + + .section-title { + font-size: 14px; + font-weight: 600; + color: #303133; + margin-bottom: 12px; + padding-left: 8px; + border-left: 3px solid #409eff; + } + + // 分条操作区域的特殊样式 + .card-section:first-child .section-title { + border-left-color: #e6a23c; + } + + .action-cards-row { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); + gap: 12px; + } + + .action-card { + min-width: 0; + padding: 16px; + border: 2px solid #dcdfe6; + border-radius: 8px; + cursor: pointer; + transition: all 0.3s ease; + background: #fff; + display: flex; + align-items: center; + gap: 12px; + + &:hover { + border-color: #409eff; + box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.15); + transform: translateY(-2px); + } + + &.active { + border-color: #409eff; + background: linear-gradient(135deg, #e3f2fd 0%, #f0f7ff 100%); + box-shadow: 0 2px 12px 0 rgba(64, 158, 255, 0.3); + + .card-icon { + background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%); + color: #fff; + } + + .card-title { + color: #409eff; + font-weight: 600; + } + } + + &.split-card { + &.active { + background: linear-gradient(135deg, #fff3e0 0%, #fff8f0 100%); + border-color: #e6a23c; + + .card-icon { + background: linear-gradient(135deg, #e6a23c 0%, #f0ad4e 100%); + } + + .card-title { + color: #e6a23c; + } + } + + &:hover { + border-color: #e6a23c; + box-shadow: 0 2px 12px 0 rgba(230, 162, 60, 0.15); + } + } + } + + .card-icon { + width: 48px; + height: 48px; + border-radius: 8px; + background: #f5f7fa; + display: flex; + align-items: center; + justify-content: center; + font-size: 24px; + color: #909399; + transition: all 0.3s ease; + flex-shrink: 0; + } + + .card-content { + flex: 1; + } + + .card-title { + font-size: 16px; + font-weight: 500; + color: #303133; + margin-bottom: 4px; + transition: all 0.3s ease; + } + + .card-desc { + font-size: 13px; + color: #909399; + line-height: 1.4; + } +} + +