feat(wms): 添加分卷操作的多仓库标签功能

在分卷操作页面中，根据工序类型动态显示对应的仓库标签，并实现标签切换时自动加载对应仓库的物料列表

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

@@ -1,5 +1,5 @@
 <template>
-  <DoPage :label="actionType" />
+  <DoPage :label="actionType" :tabs="tabs" />
 </template>
 
 <script>
@@ -12,13 +12,50 @@
     },
     data() {
       return {
-        actionType: '分卷'
+        actionType: '分卷',
+        tabs: [],
       }
     },
     watch: {
       '$route.query.actionType': {
         handler(newVal) {
-          this.actionType = newVal
+          this.actionType = newVal;
+          // 根据名字获取默认的查询参数
+          const map = {
+            '酸连轧工序': [
+              {value: '1988150099140866050', label: '酸连轧成品库'}, 
+              {value: '1988150263284953089', label: '镀锌原料库'}, 
+              {value: '1988150545175736322', label: '脱脂原料库'},
+            ],
+            '镀锌工序': [
+              {value: '1988150263284953089', label: '镀锌原料库'}, 
+              {value: '1988150323162836993', label: '镀锌成品库'},
+            ],
+            '脱脂工序': [
+              {value: '1988150545175736322', label: '脱脂原料库'}, 
+              {value: '1988150586938421250', label: '脱脂成品库'},
+            ],
+            '退火工序': [
+              {value: '1988150648993148929', label: '罩式退火原料库'}, 
+              {value: '1988150704496373761', label: '罩式退火成品库'},
+            ],
+            '拉矫平整工序': [
+              {value: '1988150854442741762', label: '拉矫原料库'}, 
+              {value: '1988150915591499777', label: '拉矫成品库'},
+            ],
+            '双机架工序': [
+              {value: '1992873386047643650', label: '双机架原料库'}, 
+              {value: '1992873437713080322', label: '双机架成品库'},
+            ],
+            '镀铬工序': [
+              {value: '1988151076996706306', label: '镀铬原料库'}, 
+              {value: '1988151132361519105', label: '镀铬成品库'},
+            ],
+          }
+          // 从map中获取默认的查询参数
+          const defaultWarehouseIds = map[this.actionType] || []
+          console.log(defaultWarehouseIds, 'defaultWarehouseIds')
+          this.tabs = defaultWarehouseIds
         },
         immediate: true
       }

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

@@ -5,29 +5,24 @@
       <el-col :span="12">
         <div class="section-card material-section">
           <div class="section-header">
-            <h3 class="section-title">待领物料列表</h3>
+            <!-- 当tab数量多余一个时，额外渲染一个el-tab-pane. 当tab切换时，切换对应的物料列表 -->
+            <el-tabs v-if="tabs.length > 1" v-model="currentTab" type="card" class="material-tabs">
+              <el-tab-pane v-for="(tab, index) in tabs" :key="tab.value" :label="tab.label"
+                :name="tab.value"></el-tab-pane>
+            </el-tabs>
+             <h3 class="section-title" v-else>待领物料列表</h3>
             <el-button size="mini" icon="el-icon-refresh" @click="getMaterialCoil">刷新</el-button>
           </div>
 
           <!-- 搜索栏 -->
           <el-form :model="materialQueryParams" ref="materialQueryForm" size="small" :inline="true" class="query-form">
             <el-form-item label="入场钢卷号" prop="enterCoilNo">
-              <el-input
+              <el-input v-model="materialQueryParams.enterCoilNo" placeholder="请输入入场钢卷号" clearable
-                v-model="materialQueryParams.enterCoilNo"
+                @keyup.enter.native="handleMaterialQuery" style="width: 150px;" />
-                placeholder="请输入入场钢卷号"
-                clearable
-                @keyup.enter.native="handleMaterialQuery"
-                style="width: 150px;"
-              />
             </el-form-item>
             <el-form-item label="当前钢卷号" prop="currentCoilNo">
-              <el-input
+              <el-input v-model="materialQueryParams.currentCoilNo" placeholder="请输入当前钢卷号" clearable
-                v-model="materialQueryParams.currentCoilNo"
+                @keyup.enter.native="handleMaterialQuery" style="width: 150px;" />
-                placeholder="请输入当前钢卷号"
-                clearable
-                @keyup.enter.native="handleMaterialQuery"
-                style="width: 150px;"
-              />
             </el-form-item>
             <el-form-item>
               <el-button type="primary" icon="el-icon-search" size="mini" @click="handleMaterialQuery">搜索</el-button>
@@ -41,25 +36,18 @@
               <i class="el-icon-box"></i>
               <p>暂无待领物料</p>
             </div>
-            <div
+
-              v-for="(item, index) in materialCoilList"
+            <div v-for="(item, index) in materialCoilList" :key="item.coilId || index" class="material-card">
-              :key="item.coilId || index"
-              class="material-card"
-            >
               <div class="card-header">
                 <div class="header-left">
                   <el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
                   <span class="material-type">{{ item.materialType || '原料' }}</span>
-                  <el-popover
+                  <el-popover v-if="item.rawMaterial || item.product" placement="top" width="280" trigger="hover"
-                    v-if="item.rawMaterial || item.product"
+                    popper-class="material-params-popover">
-                    placement="top"
-                    width="280"
-                    trigger="hover"
-                    popper-class="material-params-popover"
-                  >
                     <div class="material-params-content">
                       <div class="params-title">
-                        {{ item.itemType === 'raw_material' ? (item.rawMaterial && item.rawMaterial.rawMaterialName || '—') : (item.product && item.product.productName || '—') }}
+                        {{ item.itemType === 'raw_material' ? (item.rawMaterial && item.rawMaterial.rawMaterialName ||
+                          '—') : (item.product && item.product.productName || '—') }}
                       </div>
                       <div class="params-list">
                         <div class="param-item" v-if="item.itemType === 'raw_material' && item.rawMaterial">
@@ -152,7 +140,8 @@
                   </div>
                   <div class="info-item">
                     <span class="info-label">库区：</span>
-                    <span class="info-value" :title="item.actualWarehouseName">{{ item.actualWarehouseName || '—' }}</span>
+                    <span class="info-value" :title="item.actualWarehouseName">{{ item.actualWarehouseName || '—'
+                    }}</span>
                   </div>
                   <div class="info-item">
                     <span class="info-label">重量：</span>
@@ -162,26 +151,15 @@
               </div>
 
               <div class="card-footer">
-                <el-button
+                <el-button type="primary" icon="el-icon-check" size="mini" @click="handlePickMaterial(item)"
-                  type="primary"
+                  :loading="item.picking" class="action-btn">领料</el-button>
-                  icon="el-icon-check"
-                  size="mini"
-                  @click="handlePickMaterial(item)"
-                  :loading="item.picking"
-                  class="action-btn"
-                >领料</el-button>
               </div>
             </div>
           </div>
 
           <!-- 分页 -->
-          <pagination
+          <pagination v-show="materialTotal > 0" :total="materialTotal" :page.sync="materialQueryParams.pageNum"
-            v-show="materialTotal > 0"
+            :limit.sync="materialQueryParams.pageSize" @pagination="getMaterialCoil" />
-            :total="materialTotal"
-            :page.sync="materialQueryParams.pageNum"
-            :limit.sync="materialQueryParams.pageSize"
-            @pagination="getMaterialCoil"
-          />
         </div>
       </el-col>
 
@@ -196,13 +174,8 @@
           <!-- 搜索栏 -->
           <el-form :model="actionQueryParams" ref="actionQueryForm" size="small" :inline="true" class="query-form">
             <el-form-item label="钢卷号" prop="currentCoilNo">
-              <el-input
+              <el-input v-model="actionQueryParams.currentCoilNo" placeholder="请输入钢卷号" clearable
-                v-model="actionQueryParams.currentCoilNo"
+                @keyup.enter.native="handleActionQuery" style="width: 150px;" />
-                placeholder="请输入钢卷号"
-                clearable
-                @keyup.enter.native="handleActionQuery"
-                style="width: 150px;"
-              />
             </el-form-item>
             <el-form-item label="操作状态" prop="actionStatus">
               <el-select v-model="actionQueryParams.actionStatus" placeholder="请选择状态" clearable style="width: 120px;">
@@ -224,15 +197,10 @@
               <i class="el-icon-document"></i>
               <p>暂无待操作任务</p>
             </div>
-            <div
+            <div v-for="(item, index) in pendingActionList" :key="item.actionId || index" class="action-card" :class="{
-              v-for="(item, index) in pendingActionList"
-              :key="item.actionId || index"
-              class="action-card"
-              :class="{
               'urgent-card': item.priority === 2,
               'important-card': item.priority === 1
-              }"
+            }">
-            >
               <div class="card-header">
                 <el-tag type="info" size="small" class="coil-no-tag">{{ item.currentCoilNo }}</el-tag>
                 <div class="status-tags">
@@ -249,7 +217,8 @@
                 <div class="info-list">
                   <div class="info-item">
                     <span class="info-label">类型：</span>
-                    <dict-tag :options="dict.type.action_type" :value="item.actionType" class="action-type-tag"></dict-tag>
+                    <dict-tag :options="dict.type.action_type" :value="item.actionType"
+                      class="action-type-tag"></dict-tag>
                   </div>
                   <div class="info-item">
                     <span class="info-label">来源：</span>
@@ -280,60 +249,30 @@
               <div class="card-footer">
                 <!-- 待处理状态显示操作按钮 -->
                 <template v-if="item.actionStatus === 0">
-                  <el-button
+                  <el-button type="primary" icon="el-icon-edit" size="mini" @click="handleProcess(item)"
-                    type="primary"
+                    class="action-btn">操作</el-button>
-                    icon="el-icon-edit"
+                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAction(item)"
-                    size="mini"
+                    class="action-btn">删除</el-button>
-                    @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>
                 </template>
                 <!-- 处理中状态显示继续按钮 -->
                 <template v-else-if="item.actionStatus === 1">
-                  <el-button
+                  <el-button type="warning" icon="el-icon-edit" size="mini" @click="handleProcess(item)"
-                    type="warning"
+                    class="action-btn">继续</el-button>
-                    icon="el-icon-edit"
+                  <el-button type="info" icon="el-icon-close" size="mini" @click="handleCancel(item)"
-                    size="mini"
+                    class="action-btn">取消</el-button>
-                    @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>
                 </template>
                 <!-- 已完成或已取消状态显示删除按钮 -->
                 <template v-else>
-                  <el-button
+                  <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteAction(item)"
-                    type="danger"
+                    class="action-btn">删除</el-button>
-                    icon="el-icon-delete"
-                    size="mini"
-                    @click="handleDeleteAction(item)"
-                    class="action-btn"
-                  >删除</el-button>
                 </template>
               </div>
             </div>
           </div>
 
           <!-- 分页 -->
-          <pagination
+          <pagination v-show="actionTotal > 0" :total="actionTotal" :page.sync="actionQueryParams.pageNum"
-            v-show="actionTotal > 0"
+            :limit.sync="actionQueryParams.pageSize" @pagination="getPendingAction" />
-            :total="actionTotal"
-            :page.sync="actionQueryParams.pageNum"
-            :limit.sync="actionQueryParams.pageSize"
-            @pagination="getPendingAction"
-          />
         </div>
       </el-col>
     </el-row>
@@ -354,6 +293,10 @@ export default {
     label: {
       type: String,
       default: () => '酸连轧工序'
+    },
+    tabs: {
+      type: Array,
+      default: () => []
     }
   },
   components: {
@@ -366,6 +309,7 @@ export default {
       materialLoading: false,
       materialCoilList: [],
       materialTotal: 0,
+      currentTab: '',
       materialQueryParams: {
         pageNum: 1,
         pageSize: 20,
@@ -397,7 +341,8 @@ export default {
         return label.includes(this.label)
       })
       return acidAction ? parseInt(acidAction.value) : null
-    }
+    },
+
   },
   watch: {
     // 监听字典数据加载，当acidRollingActionType有值时自动加载待操作列表
@@ -409,11 +354,30 @@ export default {
           this.getPendingAction()
         }
       }
+    },
+    tabs: {
+      handler(newVal) {
+        if (newVal.length > 0) {
+          // this.materialQueryParams.warehouseId = newVal[0]?.value || ''
+          // 设置currentTab为第一个tab的value
+          this.currentTab = newVal[0]?.value || ''
+        }
+      },
+      immediate: true
+    },
+    currentTab: {
+      handler(newVal) {
+        if (newVal) {
+          this.materialQueryParams.warehouseId = newVal
+          this.getMaterialCoil()
+        }
+      },
+      immediate: true
     }
   },
   created() {
     // 立即加载物料列表（不依赖字典）
-    this.getMaterialCoil()
+    // this.getMaterialCoil()
 
     // 尝试加载待操作列表（如果字典已加载）
     this.$nextTick(() => {
@@ -602,7 +566,7 @@ export default {
       }).then(() => {
         this.$message.success('操作已取消')
         this.getPendingAction()
-      }).catch(() => {})
+      }).catch(() => { })
     },
     /** 删除待操作 */
     handleDeleteAction(row) {
@@ -616,7 +580,7 @@ export default {
       }).then(() => {
         this.getPendingAction()
         this.$message.success('删除成功')
-      }).catch(() => {})
+      }).catch(() => { })
     },
     /** 获取物品名称 */
     getItemName(item) {
@@ -666,6 +630,7 @@ export default {
   .section-header {
     border-bottom-color: #409eff;
   }
+
   .section-title {
     color: #409eff;
   }
@@ -675,6 +640,7 @@ export default {
   .section-header {
     border-bottom-color: #67c23a;
   }
+
   .section-title {
     color: #67c23a;
   }