更新录入合卷分卷添加选择分类

klp-ui/src/views/wms/coil/merge.vue

@@ -0,0 +1,573 @@
+<template>
+  <div class="merge-coil-container">
+    <!-- 顶部操作栏 -->
+    <div class="header-bar">
+      <div class="header-title">
+        <i class="el-icon-connection"></i>
+        <span>钢卷合卷</span>
+      </div>
+      <div class="header-actions">
+        <el-button type="primary" size="small" @click="handleSave" :loading="loading">保存合卷</el-button>
+        <el-button size="small" @click="handleCancel" :disabled="loading">取消</el-button>
+      </div>
+    </div>
+
+    <!-- 流程图区域 -->
+    <div class="flow-container">
+      <!-- 左侧：源卷列表 -->
+      <div class="flow-left">
+        <div class="flow-section-title">
+          <span>源卷列表</span>
+          <el-button type="text" size="mini" @click="addSourceCoil" icon="el-icon-plus">添加钢卷</el-button>
+        </div>
+        
+        <div class="source-list">
+          <div class="source-coil-card" v-for="(item, index) in sourceCoils" :key="index">
+            <div class="source-coil-header">
+              <div class="source-number">{{ index + 1 }}</div>
+              <div class="source-info">
+                <div class="source-id">{{ item.currentCoilNo || '待选择' }}</div>
+                <div class="source-weight">{{ item.weight || '—' }} t</div>
+              </div>
+              <el-button 
+                type="text" 
+                size="mini" 
+                icon="el-icon-delete" 
+                @click="removeSourceCoil(index)"
+                class="btn-remove"
+              ></el-button>
+            </div>
+            <div class="source-coil-body">
+              <el-button type="text" size="small" @click="selectCoil(index)">
+                <i class="el-icon-search"></i> 选择钢卷
+              </el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 中间：流程箭头（汇聚） -->
+      <div class="flow-middle">
+        <div class="merge-arrow-container">
+          <svg width="120" height="100%" viewBox="0 0 120 400" xmlns="http://www.w3.org/2000/svg">
+            <!-- 多条线汇聚到一点 -->
+            <line 
+              v-for="(item, index) in sourceCoils" 
+              :key="index"
+              :x1="0" 
+              :y1="50 + index * 80" 
+              :x2="100" 
+              :y2="200" 
+              stroke="#0066cc" 
+              stroke-width="2"
+              stroke-dasharray="5,5"
+            />
+            <!-- 箭头 -->
+            <polygon points="100,200 110,195 110,205" fill="#0066cc"/>
+          </svg>
+        </div>
+        <div class="flow-label">
+          <i class="el-icon-d-arrow-right"></i>
+          <span>合并</span>
+        </div>
+      </div>
+
+      <!-- 右侧：目标卷信息 -->
+      <div class="flow-right">
+        <div class="flow-section-title">目标卷信息</div>
+        <div class="target-coil-card">
+          <div class="target-coil-header">
+            <i class="el-icon-s-grid"></i>
+            <span>新钢卷</span>
+          </div>
+          <div class="target-coil-body">
+            <el-form size="small" label-width="90px">
+              <el-form-item label="卷号">
+                <el-input v-model="targetCoil.currentCoilNo" placeholder="输入目标卷号"></el-input>
+              </el-form-item>
+              <el-form-item label="钢种">
+                <el-input v-model="targetCoil.grade" placeholder="继承源卷"></el-input>
+              </el-form-item>
+              <el-form-item label="厚度(mm)">
+                <el-input-number 
+                  v-model="targetCoil.thickness" 
+                  :min="0" 
+                  :precision="2"
+                  controls-position="right"
+                  style="width: 100%"
+                ></el-input-number>
+              </el-form-item>
+              <el-form-item label="宽度(mm)">
+                <el-input-number 
+                  v-model="targetCoil.width" 
+                  :min="0" 
+                  :precision="2"
+                  controls-position="right"
+                  style="width: 100%"
+                ></el-input-number>
+              </el-form-item>
+              <el-form-item label="重量(t)">
+                <el-input v-model="totalWeight" disabled></el-input>
+              </el-form-item>
+            </el-form>
+          </div>
+        </div>
+
+        <!-- 合卷规则说明 -->
+        <div class="rule-card">
+          <div class="rule-title">
+            <i class="el-icon-warning-outline"></i>
+            合卷规则
+          </div>
+          <ul class="rule-list">
+            <li>同一钢种才可合卷</li>
+            <li>厚度差异不超过±0.05mm</li>
+            <li>宽度必须完全一致</li>
+            <li>目标卷重量为源卷总和</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <!-- 钢卷选择器 -->
+    <coil-selector
+      :visible.sync="coilSelectorVisible"
+      @select="handleCoilSelect"
+    />
+  </div>
+</template>
+
+<script>
+import { getMaterialCoil, mergeMaterialCoil } from '@/api/wms/coil';
+import CoilSelector from '@/components/CoilSelector';
+
+export default {
+  name: 'MergeCoil',
+  components: {
+    CoilSelector
+  },
+  data() {
+    return {
+      // 源卷列表
+      sourceCoils: [],
+      // 目标卷信息
+      targetCoil: {
+        currentCoilNo: '',
+        grade: '',
+        thickness: null,
+        width: null,
+        warehouseId: null,
+        team: null,
+        itemType: null,
+        itemId: null
+      },
+      loading: false,
+      // 钢卷选择器可见性
+      coilSelectorVisible: false,
+      // 当前选择的源卷索引
+      currentSelectIndex: -1
+    };
+  },
+  computed: {
+    // 源卷总重量
+    totalWeight() {
+      return this.sourceCoils.reduce((sum, item) => sum + (Number(item.weight) || 0), 0).toFixed(2);
+    }
+  },
+  created() {
+    // 初始化至少2个源卷
+    this.sourceCoils = [
+      { coilId: null, currentCoilNo: '', grade: '', weight: 0, thickness: null, width: null },
+      { coilId: null, currentCoilNo: '', grade: '', weight: 0, thickness: null, width: null }
+    ];
+  },
+  methods: {
+    // 添加源卷
+    addSourceCoil() {
+      this.sourceCoils.push({
+        coilId: null,
+        currentCoilNo: '',
+        grade: '',
+        weight: 0,
+        thickness: null,
+        width: null,
+        warehouseId: null,
+        team: null,
+        itemType: null,
+        itemId: null
+      });
+    },
+    
+    // 删除源卷
+    removeSourceCoil(index) {
+      if (this.sourceCoils.length > 2) {
+        this.sourceCoils.splice(index, 1);
+      } else {
+        this.$message.warning('至少需要2个源卷才能合卷');
+      }
+    },
+    
+    // 选择钢卷
+    selectCoil(index) {
+      this.currentSelectIndex = index;
+      this.coilSelectorVisible = true;
+    },
+
+    // 钢卷选择回调
+    handleCoilSelect(coil) {
+      const index = this.currentSelectIndex;
+      this.$set(this.sourceCoils, index, {
+        coilId: coil.coilId,
+        currentCoilNo: coil.currentCoilNo || '',
+        grade: coil.grade || '',
+        weight: coil.weight || 0,
+        thickness: coil.thickness,
+        width: coil.width,
+        warehouseId: coil.warehouseId,
+        team: coil.team,
+        itemType: coil.itemType,
+        itemId: coil.itemId
+      });
+
+      // 如果是第一个源卷，自动填充目标卷信息
+      if (index === 0) {
+        this.targetCoil.grade = coil.grade;
+        this.targetCoil.thickness = coil.thickness;
+        this.targetCoil.width = coil.width;
+        this.targetCoil.warehouseId = coil.warehouseId;
+        this.targetCoil.team = coil.team;
+        this.targetCoil.itemType = coil.itemType;
+        this.targetCoil.itemId = coil.itemId;
+      }
+
+      this.$message.success('钢卷选择成功');
+    },
+    
+    // 保存合卷
+    async handleSave() {
+      // 验证源卷数量
+      if (this.sourceCoils.length < 2) {
+        this.$message.error('至少需要2个源卷才能合卷');
+        return;
+      }
+
+      // 验证源卷信息
+      for (let i = 0; i < this.sourceCoils.length; i++) {
+        const item = this.sourceCoils[i];
+        if (!item.coilId) {
+          this.$message.error(`第${i + 1}个源卷未选择`);
+          return;
+        }
+      }
+
+      // 验证目标卷卷号
+      if (!this.targetCoil.currentCoilNo || this.targetCoil.currentCoilNo.trim() === '') {
+        this.$message.error('请输入目标卷卷号');
+        return;
+      }
+
+      // 验证源卷规格一致性
+      const firstCoil = this.sourceCoils[0];
+      for (let i = 1; i < this.sourceCoils.length; i++) {
+        const coil = this.sourceCoils[i];
+        if (coil.grade !== firstCoil.grade) {
+          this.$message.error('源卷钢种不一致，无法合卷');
+          return;
+        }
+        if (Math.abs(coil.thickness - firstCoil.thickness) > 0.05) {
+          this.$message.error('源卷厚度差异超过±0.05mm，无法合卷');
+          return;
+        }
+        if (coil.width !== firstCoil.width) {
+          this.$message.error('源卷宽度不一致，无法合卷');
+          return;
+        }
+      }
+
+      try {
+        this.loading = true;
+
+        // 构造合卷数据
+        const mergeData = {
+          currentCoilNo: this.targetCoil.currentCoilNo,
+          grade: this.targetCoil.grade,
+          thickness: this.targetCoil.thickness,
+          width: this.targetCoil.width,
+          weight: Number(this.totalWeight),
+          warehouseId: this.targetCoil.warehouseId,
+          team: this.targetCoil.team,
+          itemType: this.targetCoil.itemType,
+          itemId: this.targetCoil.itemId,
+          hasMergeSplit: 2, // 2表示合卷
+          newCoils: this.sourceCoils.map(item => ({
+            coilId: item.coilId,
+            currentCoilNo: item.currentCoilNo,
+            grade: item.grade,
+            thickness: item.thickness,
+            width: item.width,
+            weight: item.weight
+          }))
+        };
+
+        const response = await mergeMaterialCoil(mergeData);
+        if (response.code === 200) {
+          this.$message.success('合卷保存成功');
+          // 延迟返回，让用户看到成功提示
+          setTimeout(() => {
+            this.$router.back();
+          }, 1000);
+        } else {
+          this.$message.error(response.msg || '合卷保存失败');
+        }
+      } catch (error) {
+        this.$message.error('合卷保存失败');
+        console.error(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    
+    // 取消操作
+    handleCancel() {
+      this.$router.back();
+    }
+  }
+};
+</script>
+
+<style scoped lang="scss">
+.merge-coil-container {
+  padding: 20px;
+  background: #f5f7fa;
+  min-height: calc(100vh - 84px);
+}
+
+/* 顶部操作栏 */
+.header-bar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-title {
+  font-size: 18px;
+  font-weight: 500;
+  color: #303133;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  i {
+    color: #0066cc;
+    font-size: 20px;
+  }
+}
+
+/* 流程图容器 */
+.flow-container {
+  display: flex;
+  gap: 40px;
+  background: #fff;
+  padding: 30px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  min-height: 600px;
+}
+
+.flow-left {
+  flex: 1;
+  max-width: 350px;
+}
+
+.flow-middle {
+  flex: 0 0 120px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+
+.flow-right {
+  flex: 1;
+  max-width: 400px;
+}
+
+.flow-section-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 16px;
+  padding-left: 12px;
+  border-left: 4px solid #0066cc;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* 源卷列表 */
+.source-list {
+  max-height: 500px;
+  overflow-y: auto;
+  padding-right: 10px;
+  margin-bottom: 20px;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #dcdfe6;
+    border-radius: 3px;
+  }
+}
+
+.source-coil-card {
+  background: #fff;
+  border: 1px solid #e4e7ed;
+  border-radius: 8px;
+  margin-bottom: 12px;
+  transition: all 0.3s;
+  
+  &:hover {
+    border-color: #0066cc;
+    box-shadow: 0 2px 8px rgba(0, 102, 204, 0.15);
+  }
+}
+
+.source-coil-header {
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  border-bottom: 1px solid #f5f7fa;
+}
+
+.source-number {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: #0066cc;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.source-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.source-id {
+  font-size: 14px;
+  font-weight: 500;
+  color: #303133;
+  margin-bottom: 4px;
+}
+
+.source-weight {
+  font-size: 13px;
+  color: #909399;
+}
+
+.source-coil-body {
+  padding: 12px 16px;
+  text-align: center;
+}
+
+.btn-remove {
+  color: #f56c6c;
+  padding: 0;
+  
+  &:hover {
+    color: #f56c6c;
+  }
+}
+
+/* 流程箭头 */
+.merge-arrow-container {
+  width: 100%;
+  height: 100%;
+}
+
+.flow-label {
+  position: absolute;
+  bottom: 20px;
+  left: 50%;
+  transform: translateX(-50%);
+  background: #ecf5ff;
+  color: #0066cc;
+  padding: 8px 16px;
+  border-radius: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  border: 1px solid #d9ecff;
+}
+
+/* 目标卷卡片 */
+.target-coil-card {
+  background: #fff;
+  border: 2px solid #0066cc;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 4px 12px rgba(0, 102, 204, 0.15);
+  margin-bottom: 20px;
+}
+
+.target-coil-header {
+  background: #0066cc;
+  color: #fff;
+  padding: 16px 20px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.target-coil-body {
+  padding: 20px;
+}
+
+/* 规则说明卡片 */
+.rule-card {
+  background: #fff9f0;
+  border: 1px solid #ffe9c2;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.rule-title {
+  font-size: 14px;
+  font-weight: 500;
+  color: #e6a23c;
+  margin-bottom: 12px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.rule-list {
+  padding-left: 20px;
+  margin: 0;
+  
+  li {
+    color: #606266;
+    font-size: 13px;
+    line-height: 24px;
+  }
+}
+</style>
+