From 6af8dceb6447ebc140a53b63b70c3575b2f0e464 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A0=82=E7=B3=96?= <qq2178503051@163.com>
Date: Mon, 17 Nov 2025 13:22:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(wms):=20=E4=BC=98=E5=8C=96=E9=92=A2?=
 =?UTF-8?q?=E5=8D=B7=E5=85=A5=E5=BA=93=E5=92=8C=E5=8F=91=E8=B4=A7=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=9A=84UI=E5=B8=83=E5=B1=80=E5=92=8C=E4=BA=A4?=
 =?UTF-8?q?=E4=BA=92?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

重构入库和发货页面的UI布局，使用卡片式设计提升视觉效果和用户体验：
1. 将表单和记录列表分别放入卡片容器中
2. 添加查询表单和刷新按钮功能
3. 使用网格布局展示待操作任务卡片
4. 为不同优先级任务添加视觉区分
5. 优化滚动条样式和空状态提示
6. 统一两个页面的样式和交互逻辑
---
 klp-ui/src/views/wms/coil/do/ship.vue        | 696 +++++++++++++++----
 klp-ui/src/views/wms/coil/do/warehousing.vue | 678 ++++++++++++++----
 2 files changed, 1094 insertions(+), 280 deletions(-)

diff --git a/klp-ui/src/views/wms/coil/do/ship.vue b/klp-ui/src/views/wms/coil/do/ship.vue
index c796a55e..c35e61e9 100644
--- a/klp-ui/src/views/wms/coil/do/ship.vue
+++ b/klp-ui/src/views/wms/coil/do/ship.vue
@@ -2,160 +2,188 @@
   <div class="app-container">
     <el-row :gutter="20">
       <el-col :span="12" v-loading="formLoading">
-        <!-- 入库 -->
-        <h3 style="text-align: center; margin-bottom: 10px;">钢卷发货</h3>
-        <!-- 选择产品 -->
-        <el-form label-width="100px">
-          <el-form-item label="钢卷" prop="coilId">
-            <el-button size="small" @click="showCoilSelector">
-              <i class="el-icon-search"></i> 选择钢卷
-            </el-button>
-            <span v-if="form.currentCoilNo" style="margin-left: 10px;">
-              <el-tag type="info">{{ form.currentCoilNo }}</el-tag>
-            </span>
-          </el-form-item>
-        </el-form>
-        <el-form ref="form" :model="form" :rules="rules" label-width="100px" disabled>
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="入场钢卷号" prop="enterCoilNo">
-                <el-input v-model="form.enterCoilNo" placeholder="请输入入场钢卷号" :disabled="form.coilId" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="当前钢卷号" prop="currentCoilNo">
-                <el-input v-model="form.currentCoilNo" placeholder="请输入当前钢卷号" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="!form.coilId" label="厂家原料卷号" prop="supplierCoilNo">
-                <el-input v-model="form.supplierCoilNo" placeholder="请输入厂家原料卷号" />
-              </el-form-item>
-            </el-col>
-          </el-row>
+        <div class="section-card">
+           <div class="section-header">
+            <h3 class="section-title">钢卷发货</h3>
+          </div>
+          <!-- 选择产品 -->
+          <el-form label-width="100px">
+            <el-form-item label="钢卷" prop="coilId">
+              <el-button size="small" @click="showCoilSelector">
+                <i class="el-icon-search"></i> 选择钢卷
+              </el-button>
+              <span v-if="form.currentCoilNo" style="margin-left: 10px;">
+                <el-tag type="info">{{ form.currentCoilNo }}</el-tag>
+              </span>
+            </el-form-item>
+          </el-form>
+          <el-form ref="form" :model="form" :rules="rules" label-width="100px" disabled>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="入场钢卷号" prop="enterCoilNo">
+                  <el-input v-model="form.enterCoilNo" placeholder="请输入入场钢卷号" :disabled="form.coilId" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="当前钢卷号" prop="currentCoilNo">
+                  <el-input v-model="form.currentCoilNo" placeholder="请输入当前钢卷号" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="!form.coilId" label="厂家原料卷号" prop="supplierCoilNo">
+                  <el-input v-model="form.supplierCoilNo" placeholder="请输入厂家原料卷号" />
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="所在库位" prop="warehouseId">
-                <warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="实际库区" prop="actualWarehouseId">
-                <actual-warehouse-select v-model="form.actualWarehouseId" placeholder="请选择实际库区" style="width: 100%;"
-                  clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="班组" prop="team">
-                <el-input v-model="form.team" placeholder="请输入班组" />
-              </el-form-item>
-            </el-col>
-          </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="所在库位" prop="warehouseId">
+                  <warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;"
+                    clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="实际库区" prop="actualWarehouseId">
+                  <actual-warehouse-select v-model="form.actualWarehouseId" placeholder="请选择实际库区" style="width: 100%;"
+                    clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="班组" prop="team">
+                  <el-input v-model="form.team" placeholder="请输入班组" />
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="材料类型" prop="materialType" v-if="!form.coilId">
-                <el-select v-model="form.materialType" placeholder="请选择材料类型" @change="handleMaterialTypeChange">
-                  <el-option label="成品" value="成品" />
-                  <el-option label="原料" value="原料" />
-                  <el-option label="废品" value="废品" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item :label="getItemLabel" prop="itemId" v-if="!form.coilId">
-                <product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品"
-                  style="width: 100%;" clearable />
-                <raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId"
-                  placeholder="请选择原料" style="width: 100%;" clearable />
-                <div v-else>请先选择材料类型</div>
-              </el-form-item>
-            </el-col>
-          </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="材料类型" prop="materialType" v-if="!form.coilId">
+                  <el-select v-model="form.materialType" placeholder="请选择材料类型" @change="handleMaterialTypeChange">
+                    <el-option label="成品" value="成品" />
+                    <el-option label="原料" value="原料" />
+                    <el-option label="废品" value="废品" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="getItemLabel" prop="itemId" v-if="!form.coilId">
+                  <product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品"
+                    style="width: 100%;" clearable />
+                  <raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId"
+                    placeholder="请选择原料" style="width: 100%;" clearable />
+                  <div v-else>请先选择材料类型</div>
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-          <el-row v-if="form.materialType === '成品'">
-            <el-col :span="12">
-              <el-form-item v-if="form.materialType === '成品'" label="质量状态" prop="qualityStatus">
-                <el-input v-model="form.qualityStatus" placeholder="请输入质量状态" :disabled="readonly">
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="form.materialType === '成品'" label="切边要求" prop="trimmingRequirement">
-                <el-input v-model="form.trimmingRequirement" placeholder="请输入切边要求" :disabled="readonly">
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="form.materialType === '成品'" label="打包状态" prop="packingStatus">
-                <el-input v-model="form.packingStatus" placeholder="请输入打包状态" :disabled="readonly">
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="form.materialType === '成品'" label="包装要求" prop="packagingRequirement">
-                <el-input v-model="form.packagingRequirement" placeholder="请输入包装要求" :disabled="readonly">
-                </el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+            <el-row v-if="form.materialType === '成品'">
+              <el-col :span="12">
+                <el-form-item v-if="form.materialType === '成品'" label="质量状态" prop="qualityStatus">
+                  <el-input v-model="form.qualityStatus" placeholder="请输入质量状态" :disabled="readonly">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="form.materialType === '成品'" label="切边要求" prop="trimmingRequirement">
+                  <el-input v-model="form.trimmingRequirement" placeholder="请输入切边要求" :disabled="readonly">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="form.materialType === '成品'" label="打包状态" prop="packingStatus">
+                  <el-input v-model="form.packingStatus" placeholder="请输入打包状态" :disabled="readonly">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="form.materialType === '成品'" label="包装要求" prop="packagingRequirement">
+                  <el-input v-model="form.packagingRequirement" placeholder="请输入包装要求" :disabled="readonly">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="毛重" prop="grossWeight">
-                <el-input v-model="form.grossWeight" placeholder="请输入毛重" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="净重" prop="netWeight">
-                <el-input v-model="form.netWeight" placeholder="请输入净重" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="备注" prop="remark">
-                <el-input v-model="form.remark" placeholder="请输入备注" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-        </el-form>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="毛重" prop="grossWeight">
+                  <el-input v-model="form.grossWeight" placeholder="请输入毛重" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="净重" prop="netWeight">
+                  <el-input v-model="form.netWeight" placeholder="请输入净重" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="备注" prop="remark">
+                  <el-input v-model="form.remark" placeholder="请输入备注" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
 
-        <div style="display: flex; justify-content: center; gap: 10px;">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">发 货</el-button>
-          <el-button @click="cancel">重 置</el-button>
+          <div style="display: flex; justify-content: center; gap: 10px;">
+            <el-button :loading="buttonLoading" type="primary" @click="submitForm">发 货</el-button>
+            <el-button @click="cancel">重 置</el-button>
+          </div>
         </div>
       </el-col>
 
       <el-col :span="12">
-        <!-- 入库记录 -->
-        <h3 style="text-align: center;">发货记录</h3>
-        <el-table v-loading="loading" height="400" :data="pendingActions" title="入库记录">
-          <el-table-column label="钢卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true">
-            <template slot-scope="scope">
-              <el-tag type="info" size="small">{{ scope.row.currentCoilNo }}</el-tag>
-            </template>
-          </el-table-column>
+        <div class="section-card">
+          <!-- 入库记录 -->
+          <div class="section-header">
+            <h3 class="section-title">发货记录</h3>
+            <el-button size="mini" icon="el-icon-refresh" @click="getList">刷新</el-button>
+          </div>
+          <el-form inline class="query-form">
+            <el-form-item label="钢卷号" prop="currentCoilNo">
+              <el-input v-model="queryForm.currentCoilNo" placeholder="请输入钢卷号" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="getList">查询</el-button>
+            </el-form-item>
+          </el-form>
+            
+           <!-- 待操作卡片列表 -->
+          <div v-loading="actionLoading" class="card-grid-container">
+            <div v-if="pendingActions.length === 0" class="empty-state">
+              <i class="el-icon-document"></i>
+              <p>暂无待操作任务</p>
+            </div>
+            <div
+              v-for="(item, index) in pendingActions"
+              :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>
+              
+              <div class="card-body">
+                <div class="info-list">
+                  <div class="info-item">
+                    <span class="info-label">创建人：</span>
+                    <span class="info-value">{{ item.createBy || '—' }}</span>
+                  </div>
+                  <div class="info-item">
+                    <span class="info-label">创建时间：</span>
+                    <span class="info-value">{{ parseTime(item.createTime, '{m}-{d} {h}:{i}') || '—' }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-          <el-table-column label="优先级" align="center" prop="priority" width="90">
-            <template slot-scope="scope">
-              <el-tag v-if="scope.row.priority === 0" type="info" size="mini">普通</el-tag>
-              <el-tag v-else-if="scope.row.priority === 1" type="warning" size="mini">重要</el-tag>
-              <el-tag v-else-if="scope.row.priority === 2" type="danger" size="mini">紧急</el-tag>
-            </template>
-          </el-table-column>
+          <Pagination v-show="total > 0" :total="total" :page.sync="pagination.currentPage"
+            :limit.sync="pagination.pageSize" @pagination="getList" />
+          </div>
 
-          <el-table-column label="创建人" align="center" prop="createBy" width="100" />
-          <el-table-column label="创建时间" align="center" prop="createTime" width="155" :show-overflow-tooltip="true">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-        </el-table>
-
-        <Pagination v-show="total > 0" :total="total" :page.sync="pagination.currentPage"
-          :limit.sync="pagination.pageSize" @pagination="getList" />
       </el-col>
     </el-row>
 
@@ -198,6 +226,9 @@ export default {
       coilSelectorVisible: false,
       loading: false,
       buttonLoading: false,
+      queryForm: {
+        currentCoilNo: null,
+      },
       // 分页参数
       pagination: {
         currentPage: 1,
@@ -271,7 +302,7 @@ export default {
     getList() {
       // 获取发货历史
       this.loading = true
-      listPendingAction({ actionType: 402, ...this.pagination }).then(res => {
+      listPendingAction({ actionType: 402, ...this.pagination, ...this.queryForm }).then(res => {
         this.pendingActions = res.rows
         this.total = res.total
         this.loading = false
@@ -291,6 +322,7 @@ export default {
               actionType: 402,
               currentCoilNo: this.form.currentCoilNo,
               coilId: this.form.coilId,
+              sourceType: 'manual',
               priority: 0,
               remark: this.form.remark,
               actionStatus: 2,
@@ -312,4 +344,378 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+.acid-do-container {
+  background-color: #f5f7fa;
+  padding: 20px;
+  min-height: calc(100vh - 84px);
+}
+
+.section-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e4e7ed;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.material-section {
+  .section-header {
+    border-bottom-color: #409eff;
+  }
+  .section-title {
+    color: #409eff;
+  }
+}
+
+.action-section {
+  .section-header {
+    border-bottom-color: #67c23a;
+  }
+  .section-title {
+    color: #67c23a;
+  }
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 12px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+}
+
+// 卡片网格容器
+.card-grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  max-height: calc(100vh - 320px);
+  overflow-y: auto;
+  padding-right: 4px;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+    
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+  
+  @media (min-width: 1600px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+// 空状态
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: #909399;
+  
+  i {
+    font-size: 48px;
+    margin-bottom: 16px;
+    display: block;
+    color: #c0c4cc;
+  }
+  
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+// 物料卡片
+.material-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  height: 100%;
+  
+  &:hover {
+    border-color: #409eff;
+    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12);
+  }
+  
+  .card-header {
+    padding: 6px 8px;
+    border-bottom: 1px solid #e4e7ed;
+    background-color: #fafafa;
+    
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    
+    .coil-no-tag {
+      font-weight: 600;
+      font-size: 11px;
+      padding: 2px 6px;
+    }
+    
+    .material-type {
+      font-size: 11px;
+      color: #606266;
+      font-weight: 500;
+    }
+    
+    .param-icon {
+      font-size: 13px;
+      color: #909399;
+      cursor: pointer;
+      transition: color 0.3s;
+      
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+  
+  .card-body {
+    padding: 8px;
+    flex: 1;
+    
+    .info-list {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+        font-size: 11px;
+        line-height: 1.4;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .info-label {
+          color: #909399;
+          white-space: nowrap;
+          margin-right: 4px;
+          min-width: 40px;
+          font-size: 11px;
+        }
+        
+        .info-value {
+          color: #303133;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 11px;
+        }
+      }
+    }
+  }
+  
+  .card-footer {
+    padding: 6px 8px;
+    border-top: 1px solid #e4e7ed;
+    background-color: #fafafa;
+    display: flex;
+    justify-content: center;
+    
+    .action-btn {
+      width: 100%;
+      padding: 5px 10px;
+      font-size: 11px;
+    }
+  }
+}
+
+// 待操作卡片
+.action-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  height: 100%;
+  
+  &:hover {
+    border-color: #67c23a;
+    box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15);
+  }
+  
+  &.urgent-card {
+    border-left: 4px solid #f56c6c;
+    background-color: #fef0f0;
+    
+    &:hover {
+      border-color: #f56c6c;
+      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
+    }
+  }
+  
+  &.important-card {
+    border-left: 4px solid #e6a23c;
+    background-color: #fdf6ec;
+    
+    &:hover {
+      border-color: #e6a23c;
+      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
+    }
+  }
+  
+  .card-header {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e4e7ed;
+    background-color: #fafafa;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    .coil-no-tag {
+      font-weight: 600;
+      font-size: 12px;
+    }
+    
+    .status-tags {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .card-body {
+    padding: 12px;
+    flex: 1;
+    
+    .info-list {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+        font-size: 12px;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .info-label {
+          color: #909399;
+          white-space: nowrap;
+          margin-right: 6px;
+          min-width: 50px;
+        }
+        
+        .info-value {
+          color: #303133;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        
+        .action-type-tag {
+          font-size: 11px;
+        }
+      }
+    }
+  }
+  
+  .card-footer {
+    padding: 10px 12px;
+    border-top: 1px solid #e4e7ed;
+    background-color: #fafafa;
+    display: flex;
+    justify-content: center;
+    gap: 6px;
+    
+    .action-btn {
+      flex: 1;
+      font-size: 12px;
+      padding: 6px 8px;
+    }
+  }
+}
+
+// 分页样式
+::v-deep .pagination-container {
+  margin-top: 16px;
+  padding: 12px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+}
+
+// 参数弹出框样式
+::v-deep .material-params-popover {
+  .material-params-content {
+    .params-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #303133;
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #e4e7ed;
+    }
+    
+    .params-list {
+      .param-item {
+        .param-row {
+          display: flex;
+          margin-bottom: 6px;
+          font-size: 12px;
+          line-height: 1.5;
+          
+          &:last-child {
+            margin-bottom: 0;
+          }
+          
+          .param-label {
+            color: #909399;
+            min-width: 70px;
+            margin-right: 8px;
+          }
+          
+          .param-value {
+            color: #303133;
+            flex: 1;
+            word-break: break-all;
+          }
+        }
+      }
+      
+      .param-divider {
+        height: 1px;
+        background-color: #e4e7ed;
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/klp-ui/src/views/wms/coil/do/warehousing.vue b/klp-ui/src/views/wms/coil/do/warehousing.vue
index 05d271e1..828fa10a 100644
--- a/klp-ui/src/views/wms/coil/do/warehousing.vue
+++ b/klp-ui/src/views/wms/coil/do/warehousing.vue
@@ -2,148 +2,178 @@
   <div class="app-container">
     <el-row :gutter="20">
       <el-col :span="12">
-        <!-- 入库 -->
-        <h3 style="text-align: center; margin-bottom: 10px;">新增入库</h3>
-        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="入场钢卷号" prop="enterCoilNo">
-                <el-input v-model="form.enterCoilNo" placeholder="请输入入场钢卷号" :disabled="form.coilId" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="当前钢卷号" prop="currentCoilNo">
-                <el-input v-model="form.currentCoilNo" placeholder="请输入当前钢卷号" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="!form.coilId" label="厂家原料卷号" prop="supplierCoilNo">
-                <el-input v-model="form.supplierCoilNo" placeholder="请输入厂家原料卷号" />
-              </el-form-item>
-            </el-col>
-          </el-row>
+        <div class="section-card">
+          <!-- 入库 -->
+          <div class="section-header">
+            <h3 class="section-title">新增入库</h3>
+          </div>
+          <el-form ref="form" :model="form" :rules="rules" label-width="100px">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="入场钢卷号" prop="enterCoilNo">
+                  <el-input v-model="form.enterCoilNo" placeholder="请输入入场钢卷号" :disabled="form.coilId" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="当前钢卷号" prop="currentCoilNo">
+                  <el-input v-model="form.currentCoilNo" placeholder="请输入当前钢卷号" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="!form.coilId" label="厂家原料卷号" prop="supplierCoilNo">
+                  <el-input v-model="form.supplierCoilNo" placeholder="请输入厂家原料卷号" />
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="所在库位" prop="warehouseId">
-                <warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;" clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="实际库区" prop="actualWarehouseId">
-                <actual-warehouse-select v-model="form.actualWarehouseId" placeholder="请选择实际库区" style="width: 100%;"
-                  clearable />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="班组" prop="team">
-                <el-input v-model="form.team" placeholder="请输入班组" />
-              </el-form-item>
-            </el-col>
-          </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="所在库位" prop="warehouseId">
+                  <warehouse-select v-model="form.warehouseId" placeholder="请选择仓库/库区/库位" style="width: 100%;"
+                    clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="实际库区" prop="actualWarehouseId">
+                  <actual-warehouse-select v-model="form.actualWarehouseId" placeholder="请选择实际库区" style="width: 100%;"
+                    clearable />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="班组" prop="team">
+                  <el-input v-model="form.team" placeholder="请输入班组" />
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="材料类型" prop="materialType" v-if="!form.coilId">
-                <el-select v-model="form.materialType" placeholder="请选择材料类型" @change="handleMaterialTypeChange">
-                  <el-option label="成品" value="成品" />
-                  <el-option label="原料" value="原料" />
-                  <el-option label="废品" value="废品" />
-                </el-select>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item :label="getItemLabel" prop="itemId" v-if="!form.coilId">
-                <product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品"
-                  style="width: 100%;" clearable />
-                <raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId"
-                  placeholder="请选择原料" style="width: 100%;" clearable />
-                <div v-else>请先选择材料类型</div>
-              </el-form-item>
-            </el-col>
-          </el-row>
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="材料类型" prop="materialType" v-if="!form.coilId">
+                  <el-select v-model="form.materialType" placeholder="请选择材料类型" @change="handleMaterialTypeChange">
+                    <el-option label="成品" value="成品" />
+                    <el-option label="原料" value="原料" />
+                    <el-option label="废品" value="废品" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="getItemLabel" prop="itemId" v-if="!form.coilId">
+                  <product-select v-if="form.itemType == 'product'" v-model="form.itemId" placeholder="请选择成品"
+                    style="width: 100%;" clearable />
+                  <raw-material-select v-else-if="form.itemType == 'raw_material'" v-model="form.itemId"
+                    placeholder="请选择原料" style="width: 100%;" clearable />
+                  <div v-else>请先选择材料类型</div>
+                </el-form-item>
+              </el-col>
+            </el-row>
 
-          <el-row v-if="form.materialType === '成品'">
-             <el-col :span="12">
-              <el-form-item v-if="form.materialType === '成品'" label="质量状态" prop="qualityStatus">
-                <el-input v-model="form.qualityStatus" placeholder="请输入质量状态" :disabled="readonly">
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="form.materialType === '成品'" label="切边要求" prop="trimmingRequirement">
-                <el-input v-model="form.trimmingRequirement" placeholder="请输入切边要求" :disabled="readonly">
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="form.materialType === '成品'" label="打包状态" prop="packingStatus">
-                <el-input v-model="form.packingStatus" placeholder="请输入打包状态" :disabled="readonly">
-                </el-input>
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item v-if="form.materialType === '成品'" label="包装要求" prop="packagingRequirement">
-                <el-input v-model="form.packagingRequirement" placeholder="请输入包装要求" :disabled="readonly">
-                </el-input>
-              </el-form-item>
-            </el-col>
-          </el-row>
+            <el-row v-if="form.materialType === '成品'">
+              <el-col :span="12">
+                <el-form-item v-if="form.materialType === '成品'" label="质量状态" prop="qualityStatus">
+                  <el-input v-model="form.qualityStatus" placeholder="请输入质量状态" :disabled="readonly">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="form.materialType === '成品'" label="切边要求" prop="trimmingRequirement">
+                  <el-input v-model="form.trimmingRequirement" placeholder="请输入切边要求" :disabled="readonly">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="form.materialType === '成品'" label="打包状态" prop="packingStatus">
+                  <el-input v-model="form.packingStatus" placeholder="请输入打包状态" :disabled="readonly">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item v-if="form.materialType === '成品'" label="包装要求" prop="packagingRequirement">
+                  <el-input v-model="form.packagingRequirement" placeholder="请输入包装要求" :disabled="readonly">
+                  </el-input>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="12">
+                <el-form-item label="毛重" prop="grossWeight">
+                  <el-input v-model="form.grossWeight" placeholder="请输入毛重" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item label="净重" prop="netWeight">
+                  <el-input v-model="form.netWeight" placeholder="请输入净重" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="24">
+                <el-form-item label="备注" prop="remark">
+                  <el-input v-model="form.remark" placeholder="请输入备注" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-form-item>
+              <el-button :loading="buttonLoading" type="primary" @click="submitForm">入 库</el-button>
+              <el-button @click="cancel">重 置</el-button>
+            </el-form-item>
+          </el-form>
+        </div>
 
-          <el-row>
-            <el-col :span="12">
-              <el-form-item label="毛重" prop="grossWeight">
-                <el-input v-model="form.grossWeight" placeholder="请输入毛重" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="12">
-              <el-form-item label="净重" prop="netWeight">
-                <el-input v-model="form.netWeight" placeholder="请输入净重" />
-              </el-form-item>
-            </el-col>
-            <el-col :span="24">
-              <el-form-item label="备注" prop="remark">
-                <el-input v-model="form.remark" placeholder="请输入备注" />
-              </el-form-item>
-            </el-col>
-          </el-row>
-          <el-form-item>
-            <el-button :loading="buttonLoading" type="primary" @click="submitForm">入 库</el-button>
-            <el-button @click="cancel">重 置</el-button>
-          </el-form-item>
-        </el-form>
       </el-col>
 
       <el-col :span="12">
-        <!-- 入库记录 -->
-        <h3 style="text-align: center;">入库记录</h3>
-        <el-table v-loading="loading" height="400" :data="pendingActions" title="入库记录">
-          <el-table-column label="钢卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true">
-            <template slot-scope="scope">
-              <el-tag type="info" size="small">{{ scope.row.currentCoilNo }}</el-tag>
-            </template>
-          </el-table-column>
+        <div class="section-card">
+          <!-- 入库记录 -->
+           <div class="section-header">
+            <h3 class="section-title">入库记录</h3>
+            <el-button size="mini" icon="el-icon-refresh" @click="getList">刷新</el-button>
+          </div>
+          <el-form inline class="query-form">
+            <el-form-item label="钢卷号" prop="currentCoilNo">
+              <el-input v-model="queryForm.currentCoilNo" placeholder="请输入钢卷号" />
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="getList">查询</el-button>
+            </el-form-item>
+          </el-form>
+          
+            <!-- 待操作卡片列表 -->
+          <div v-loading="actionLoading" class="card-grid-container">
+            <div v-if="pendingActions.length === 0" class="empty-state">
+              <i class="el-icon-document"></i>
+              <p>暂无待操作任务</p>
+            </div>
+            <div
+              v-for="(item, index) in pendingActions"
+              :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>
+              
+              <div class="card-body">
+                <div class="info-list">
+                  <div class="info-item">
+                    <span class="info-label">创建人：</span>
+                    <span class="info-value">{{ item.createBy || '—' }}</span>
+                  </div>
+                  <div class="info-item">
+                    <span class="info-label">创建时间：</span>
+                    <span class="info-value">{{ parseTime(item.createTime, '{m}-{d} {h}:{i}') || '—' }}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
 
-          <el-table-column label="优先级" align="center" prop="priority" width="90">
-            <template slot-scope="scope">
-              <el-tag v-if="scope.row.priority === 0" type="info" size="mini">普通</el-tag>
-              <el-tag v-else-if="scope.row.priority === 1" type="warning" size="mini">重要</el-tag>
-              <el-tag v-else-if="scope.row.priority === 2" type="danger" size="mini">紧急</el-tag>
-            </template>
-          </el-table-column>
+          <Pagination v-show="total > 0" :total="total" :page.sync="pagination.currentPage"
+            :limit.sync="pagination.pageSize" @pagination="getList" />
+          </div>
 
-          <el-table-column label="创建人" align="center" prop="createBy" width="100" />
-          <el-table-column label="创建时间" align="center" prop="createTime" width="155" :show-overflow-tooltip="true">
-            <template slot-scope="scope">
-              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
-            </template>
-          </el-table-column>
-
-          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-        </el-table>
-
-        <Pagination v-show="total > 0" :total="total" :page.sync="pagination.currentPage"
-          :limit.sync="pagination.pageSize" @pagination="getList" />
       </el-col>
     </el-row>
   </div>
@@ -176,6 +206,9 @@ export default {
       form: {},
       loading: false,
       buttonLoading: false,
+      queryForm: {
+        currentCoilNo: null,
+      },
       // 分页参数
       pagination: {
         currentPage: 1,
@@ -235,7 +268,7 @@ export default {
     getList() {
       // 获取入库历史
       this.loading = true
-      listPendingAction({ actionType: 401, ...this.pagination }).then(res => {
+      listPendingAction({ actionType: 401, ...this.pagination, ...this.queryForm }).then(res => {
         this.pendingActions = res.rows
         this.total = res.total
         this.loading = false
@@ -250,6 +283,7 @@ export default {
             addPendingAction({
               actionType: 401,
               currentCoilNo: this.form.currentCoilNo,
+              sourceType: 'manual',
               coilId: response.data.coilId,
               priority: 0,
               remark: this.form.remark,
@@ -272,4 +306,378 @@ export default {
     }
   }
 }
-</script>
\ No newline at end of file
+</script>
+
+<style scoped lang="scss">
+.acid-do-container {
+  background-color: #f5f7fa;
+  padding: 20px;
+  min-height: calc(100vh - 84px);
+}
+
+.section-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 16px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.section-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding-bottom: 12px;
+  border-bottom: 2px solid #e4e7ed;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+}
+
+.material-section {
+  .section-header {
+    border-bottom-color: #409eff;
+  }
+  .section-title {
+    color: #409eff;
+  }
+}
+
+.action-section {
+  .section-header {
+    border-bottom-color: #67c23a;
+  }
+  .section-title {
+    color: #67c23a;
+  }
+}
+
+.query-form {
+  margin-bottom: 16px;
+  padding: 12px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+}
+
+// 卡片网格容器
+.card-grid-container {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 8px;
+  max-height: calc(100vh - 320px);
+  overflow-y: auto;
+  padding-right: 4px;
+  
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+  
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+    
+    &:hover {
+      background: #a8a8a8;
+    }
+  }
+  
+  @media (min-width: 1600px) {
+    grid-template-columns: repeat(4, 1fr);
+  }
+}
+
+// 空状态
+.empty-state {
+  text-align: center;
+  padding: 60px 20px;
+  color: #909399;
+  
+  i {
+    font-size: 48px;
+    margin-bottom: 16px;
+    display: block;
+    color: #c0c4cc;
+  }
+  
+  p {
+    margin: 0;
+    font-size: 14px;
+  }
+}
+
+// 物料卡片
+.material-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  height: 100%;
+  
+  &:hover {
+    border-color: #409eff;
+    box-shadow: 0 2px 6px rgba(64, 158, 255, 0.12);
+  }
+  
+  .card-header {
+    padding: 6px 8px;
+    border-bottom: 1px solid #e4e7ed;
+    background-color: #fafafa;
+    
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    
+    .coil-no-tag {
+      font-weight: 600;
+      font-size: 11px;
+      padding: 2px 6px;
+    }
+    
+    .material-type {
+      font-size: 11px;
+      color: #606266;
+      font-weight: 500;
+    }
+    
+    .param-icon {
+      font-size: 13px;
+      color: #909399;
+      cursor: pointer;
+      transition: color 0.3s;
+      
+      &:hover {
+        color: #409eff;
+      }
+    }
+  }
+  
+  .card-body {
+    padding: 8px;
+    flex: 1;
+    
+    .info-list {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 4px;
+        font-size: 11px;
+        line-height: 1.4;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .info-label {
+          color: #909399;
+          white-space: nowrap;
+          margin-right: 4px;
+          min-width: 40px;
+          font-size: 11px;
+        }
+        
+        .info-value {
+          color: #303133;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          font-size: 11px;
+        }
+      }
+    }
+  }
+  
+  .card-footer {
+    padding: 6px 8px;
+    border-top: 1px solid #e4e7ed;
+    background-color: #fafafa;
+    display: flex;
+    justify-content: center;
+    
+    .action-btn {
+      width: 100%;
+      padding: 5px 10px;
+      font-size: 11px;
+    }
+  }
+}
+
+// 待操作卡片
+.action-card {
+  background-color: #ffffff;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.3s ease;
+  height: 100%;
+  
+  &:hover {
+    border-color: #67c23a;
+    box-shadow: 0 2px 8px rgba(103, 194, 58, 0.15);
+  }
+  
+  &.urgent-card {
+    border-left: 4px solid #f56c6c;
+    background-color: #fef0f0;
+    
+    &:hover {
+      border-color: #f56c6c;
+      box-shadow: 0 2px 8px rgba(245, 108, 108, 0.2);
+    }
+  }
+  
+  &.important-card {
+    border-left: 4px solid #e6a23c;
+    background-color: #fdf6ec;
+    
+    &:hover {
+      border-color: #e6a23c;
+      box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
+    }
+  }
+  
+  .card-header {
+    padding: 10px 12px;
+    border-bottom: 1px solid #e4e7ed;
+    background-color: #fafafa;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    
+    .coil-no-tag {
+      font-weight: 600;
+      font-size: 12px;
+    }
+    
+    .status-tags {
+      display: flex;
+      gap: 4px;
+      flex-wrap: wrap;
+    }
+  }
+  
+  .card-body {
+    padding: 12px;
+    flex: 1;
+    
+    .info-list {
+      .info-item {
+        display: flex;
+        align-items: center;
+        margin-bottom: 8px;
+        font-size: 12px;
+        
+        &:last-child {
+          margin-bottom: 0;
+        }
+        
+        .info-label {
+          color: #909399;
+          white-space: nowrap;
+          margin-right: 6px;
+          min-width: 50px;
+        }
+        
+        .info-value {
+          color: #303133;
+          flex: 1;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        
+        .action-type-tag {
+          font-size: 11px;
+        }
+      }
+    }
+  }
+  
+  .card-footer {
+    padding: 10px 12px;
+    border-top: 1px solid #e4e7ed;
+    background-color: #fafafa;
+    display: flex;
+    justify-content: center;
+    gap: 6px;
+    
+    .action-btn {
+      flex: 1;
+      font-size: 12px;
+      padding: 6px 8px;
+    }
+  }
+}
+
+// 分页样式
+::v-deep .pagination-container {
+  margin-top: 16px;
+  padding: 12px;
+  background-color: #fafafa;
+  border-radius: 4px;
+  border: 1px solid #e4e7ed;
+}
+
+// 参数弹出框样式
+::v-deep .material-params-popover {
+  .material-params-content {
+    .params-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #303133;
+      margin-bottom: 12px;
+      padding-bottom: 8px;
+      border-bottom: 1px solid #e4e7ed;
+    }
+    
+    .params-list {
+      .param-item {
+        .param-row {
+          display: flex;
+          margin-bottom: 6px;
+          font-size: 12px;
+          line-height: 1.5;
+          
+          &:last-child {
+            margin-bottom: 0;
+          }
+          
+          .param-label {
+            color: #909399;
+            min-width: 70px;
+            margin-right: 8px;
+          }
+          
+          .param-value {
+            color: #303133;
+            flex: 1;
+            word-break: break-all;
+          }
+        }
+      }
+      
+      .param-divider {
+        height: 1px;
+        background-color: #e4e7ed;
+        margin: 10px 0;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file