feat(分卷): 实现镀锌工序特殊分卷功能

新增特殊分卷功能，包括分步分条界面、API接口及状态管理。主要修改：
1. 添加分步分条组件，支持新增、编辑、删除分条
2. 扩展分卷API接口，包括开始/完成/取消特殊分卷
3. 优化操作按钮加载状态和错误处理
4. 调整界面布局和样式

klp-ui/src/views/wms/coil/panels/do.vue

@@ -167,7 +167,8 @@
 
                   <i class="el-icon-view param-icon" @click="handlePreviewLabel(item)" title="查看标签"></i>
                   <!-- <el-button style="margin-left: 0px; padding: 4px !important;" type="text" size="mini" @click="handlePreviewLabel(item)" title="查看标签">预览</el-button> -->
-                  <el-button style="margin-left: 0px; padding: 4px !important;" type="text" size="mini" @click="handlePrintLabel(item)" title="打印标签">打印</el-button>
+                  <el-button v-loading="buttonLoading" style="margin-left: 0px; padding: 4px !important;" type="text"
+                    size="mini" @click="handlePrintLabel(item)" title="打印标签">打印</el-button>
                 </div>
               </div>
 
@@ -196,15 +197,15 @@
                   </div>
                 </div>
 
-                <el-button style="position: absolute; bottom: 10px; right: 10px;" type="success" icon="el-icon-scissors" size="mini" @click="handleStartSplit(item)"
-                  :loading="item.picking" class="action-btn">分条</el-button>
+                <el-button style="position: absolute; bottom: 10px; right: 10px;" type="success" icon="el-icon-scissors"
+                  size="mini" @click="handleStartSplit(item)" :loading="buttonLoading" class="action-btn">分条</el-button>
               </div>
 
               <div class="card-footer">
                 <el-button type="primary" icon="el-icon-check" size="mini" @click="handlePickMaterial(item)"
-                  :loading="item.picking" class="action-btn">领料</el-button>
+                  :loading="buttonLoading" class="action-btn">领料</el-button>
                 <el-button type="danger" icon="el-icon-alarm-clock" :plain="item.abnormalCount == 0" size="mini"
-                  @click="handleAddAbnormal(item)" :loading="item.cancelling" class="action-btn">
+                  @click="handleAddAbnormal(item)" :loading="buttonLoading" class="action-btn">
                   异常
                   <span v-if="item.abnormalCount > 0">({{ item.abnormalCount }})</span>
                 </el-button>
@@ -220,9 +221,25 @@
 
       <!-- 右侧：待操作列表 -->
       <el-col :span="12">
+        <div v-if="useSpecialSplit" style="margin-bottom: 20px;" v-loading="stepSpilt.loading">
+          <div class="section-header">
+            <h3 class="section-title">进行中的镀锌工序</h3>
+            <el-button size="mini" icon="el-icon-refresh" @click="getStepSplitList">刷新</el-button>
+          </div>
+          <div style="display: flex; align-items: center; gap: 10px;">
+            <div v-for="item in stepSpilt.list" :key="item.coilId || index" style="text-align: center; padding: 10px; border: 2px solid #e4e7ed; border-radius: 4px;">
+              <div class="step-item" style="font-size: 24px; font-weight: bold; ">
+                <span class="step-value">{{ item.currentCoilNo }}</span>
+              </div>
+               <el-button type="primary" size="mini" @click="handleContinueSplit(item)">查看</el-button>
+              <el-button size="mini" @click="handleCancelSplit(item)">取消操作</el-button>
+            </div>
+          </div>
+        </div>
+
         <div class="section-card action-section">
           <div class="section-header">
-            <h3 class="section-title">{{ label }}待操作</h3>
+            <h3 class="section-title">{{ label }}操作记录</h3>
             <el-button size="mini" icon="el-icon-refresh" @click="getPendingAction">刷新</el-button>
           </div>
 
@@ -301,27 +318,32 @@
                 </div>
               </div>
 
-              <div class="card-footer">
+              <div class="card-footer" v-if="!useSpecialSplit">
                 <!-- 待处理状态显示操作按钮 -->
                 <template v-if="item.actionStatus === 0">
-                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleProcess(item)"
-                    class="action-btn">操作</el-button>
-                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAction(item)"
-                    class="action-btn">删除</el-button>
+                  <el-button :loading="buttonLoading" type="primary" icon="el-icon-edit" size="mini"
+                    @click="handleProcess(item)" class="action-btn">操作</el-button>
+                  <el-button :loading="buttonLoading" type="danger" icon="el-icon-delete" size="mini"
+                    @click="handleDeleteAction(item)" class="action-btn">删除</el-button>
                 </template>
                 <!-- 处理中状态显示继续按钮 -->
                 <template v-else-if="item.actionStatus === 1">
-                  <el-button type="warning" icon="el-icon-edit" size="mini" @click="handleProcess(item)"
-                    class="action-btn">继续</el-button>
-                  <el-button type="info" icon="el-icon-close" size="mini" @click="handleCancel(item)"
-                    class="action-btn">取消</el-button>
+                  <el-button :loading="buttonLoading" type="warning" icon="el-icon-edit" size="mini"
+                    @click="handleProcess(item)" class="action-btn">继续</el-button>
+                  <el-button :loading="buttonLoading" type="info" icon="el-icon-close" size="mini"
+                    @click="handleCancel(item)" class="action-btn">取消</el-button>
                 </template>
                 <!-- 已完成或已取消状态显示删除按钮 -->
                 <template v-else>
-                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAction(item)"
-                    class="action-btn">删除</el-button>
+                  <el-button :loading="buttonLoading" type="danger" icon="el-icon-delete" size="mini"
+                    @click="handleDeleteAction(item)" class="action-btn">删除</el-button>
                 </template>
               </div>
+
+              <div class="card-footer" v-else="!useSpecialSplit">
+                 <el-button :loading="buttonLoading" type="primary" icon="el-icon-edit" size="mini"
+                    @click="handleProcess(item)" class="action-btn">查看</el-button>
+              </div>
             </div>
           </div>
 
@@ -371,18 +393,24 @@
       <label-render :content="labelRender.data" :labelType="labelRender.type" />
     </el-dialog>
 
+    <el-dialog title="分步分条" :visible.sync="stepSpilt.visible" width="1400px" append-to-body>
+      <step-split @print="handlePrintLabel" @complete="stepSpilt.visible = false" :actionId="stepSpilt.actionId"
+        :coilId="stepSpilt.coilId" :actionStatus="stepSpilt.actionStatus" />
+    </el-dialog>
+
     <label-render ref="labelRender" v-show="false" :content="labelRender.data" :labelType="labelRender.type" />
   </div>
 </template>
 
 <script>
-import { listMaterialCoil } from '@/api/wms/coil'
+import { listMaterialCoil, startSpecialSplit, cancelSpecialSplit } from '@/api/wms/coil'
 import { listPendingAction, startProcess, cancelAction, delPendingAction, addPendingAction } from '@/api/wms/pendingAction'
 import { parseTime } from '@/utils/klp'
 import ProductInfo from '@/components/KLPService/Renderer/ProductInfo'
 import RawMaterialInfo from '@/components/KLPService/Renderer/RawMaterialInfo'
 import { addCoilAbnormal } from '@/api/wms/coilAbnormal'
 import LabelRender from './LabelRender/index.vue'
+import StepSplit from './stepSplit.vue'
 
 export default {
   name: 'DoPage',
@@ -395,12 +423,17 @@ export default {
     tabs: {
       type: Array,
       default: () => []
+    },
+    useSpecialSplit: {
+      type: Boolean,
+      default: false
     }
   },
   components: {
     ProductInfo,
     RawMaterialInfo,
-    LabelRender
+    LabelRender,
+    StepSplit
   },
   data() {
     return {
@@ -434,7 +467,7 @@ export default {
         actionType: null, // 将在created中设置为酸连轧工序的actionType
         actionStatus: null
       },
-
+      buttonLoading: false,
       exceptionDialogVisible: false,
       exceptionForm: {
         coilId: null,
@@ -443,6 +476,14 @@ export default {
         defectCode: null,
         degree: null,
         remark: null
+      },
+      stepSpilt: {
+        list: [],
+        loading: false,
+        visible: false,
+        coilId: null,
+        actionId: null,
+        actionStatus: null
       }
     }
   },
@@ -492,7 +533,6 @@ export default {
   created() {
     // 立即加载物料列表（不依赖字典）
     // this.getMaterialCoil()
-
     // 尝试加载待操作列表（如果字典已加载）
     this.$nextTick(() => {
       if (this.acidRollingActionType) {
@@ -500,6 +540,7 @@ export default {
         this.getPendingAction()
       }
     })
+    this.getStepSplitList()
   },
   mounted() {
     // 确保在mounted时也尝试加载（字典数据可能此时才加载完成）
@@ -528,7 +569,21 @@ export default {
       })
     },
 
-     /** 预览标签 */
+    getStepSplitList() {
+      this.stepSpilt.loading = true
+      listPendingAction({ actionType: 501, actionStatus: 0 }).then(response => {
+        this.stepSpilt.list = response.rows || []
+        this.stepSpilt.loading = false
+      })
+    },
+
+    handleComposeSplit() {
+      this.stepSpilt.visible = false;
+      this.getStepSplitList()
+      this.getPendingAction()
+    },
+
+    /** 预览标签 */
     handlePreviewLabel(row) {
       this.labelRender.visible = true;
       const item = row.itemType === 'product' ? row.product : row.rawMaterial;
@@ -631,6 +686,19 @@ export default {
       }
       this.getPendingAction()
     },
+    async handleCancelSplit(row) {
+      this.$modal.confirm('是否取消分卷操作？').then(_ => {
+        this.stepSpilt.loading = true
+        this.buttonLoading = true
+        cancelSpecialSplit(row.actionId).then(response => {
+          this.$message.success('取消分卷成功')
+          this.stepSpilt.loading = false
+          this.buttonLoading = false
+          this.getPendingAction() // 刷新待操作列表
+          this.getStepSplitList()
+        })
+      })
+    },
     /** 重置待操作搜索 */
     resetActionQuery() {
       this.resetForm('actionQueryForm')
@@ -652,6 +720,12 @@ export default {
         return
       }
 
+      if (actionType === 501) {
+        // 特殊分条，打开弹窗操作
+        this.handleContinueSplit(row)
+        return;
+      }
+
       // 根据操作类型跳转到不同页面
       let path = ''
 
@@ -753,6 +827,44 @@ export default {
         }
       })
     },
+    handleStartSplit(row) {
+      this.buttonLoading = true
+      this.$modal.confirm('是否确认领料开始分条操作？')
+      .then(_ => {
+        this.stepSpilt.loading = true
+        addPendingAction({
+          coilId: row.coilId,
+          currentCoilNo: row.currentCoilNo,
+          actionType: 501,
+          actionStatus: 0,
+          sourceType: 'manual',
+          priority: 0,
+        }).then(_ => {
+          startSpecialSplit(row.coilId).then(_ => {
+            this.$message.success('分条操作已创建')
+            this.stepSpilt.loading = false
+            this.getPendingAction()
+            // this.getMaterialCoil()
+            this.getStepSplitList()
+          }).finally(() => {
+            this.buttonLoading = false
+          })
+        })
+      })
+      .finally(() => {
+        this.buttonLoading = false
+      })  
+    },
+    handleContinueSplit(row) {
+      this.stepSpilt.coilId = row.coilId
+      this.stepSpilt.actionId = row.actionId
+      this.stepSpilt.actionStatus = row.actionStatus
+      this.stepSpilt.visible = true
+      // this.buttonLoading = true
+      // this.getPendingAction()
+      // this.getMaterialCoil()
+      // this.buttonLoading = false
+    },
     cancelException() {
       // 重置表单
       this.exceptionForm = {
@@ -855,7 +967,7 @@ export default {
     }
   }
 
-  @media (min-width: 1600px) {
+  @media (min-width: 2000px) {
     grid-template-columns: repeat(4, 1fr);
   }
 }