feat(发货计划): 新增钢卷选择功能并优化界面布局

- 在发货计划页面添加钢卷选择器组件，支持从列表中选择钢卷
- 优化发货计划卡片布局，增加审批状态显示
- 新增钢卷列表查询API接口
- 调整分页大小和查询条件
- 重构CoilSelector组件，增加更多钢卷信息展示
- 添加钢卷转移组件框架

klp-ui/src/api/wms/coil.js

@@ -135,4 +135,15 @@ export function exportCoil(coilId) {
     url: '/wms/materialCoil/exportCoil/' + coilId,
     method: 'get'
   })
+}
+
+// 根据钢卷ID序列查询钢卷列表
+export function listCoilByIds(coilIds) {
+  return request({
+    url: '/wms/materialCoil/list',
+    method: 'get',
+    params: {
+      coilIds
+    }
+  })
 }

klp-ui/src/components/CoilSelector/index.vue

@@ -7,12 +7,10 @@
           <i class="el-icon-search"></i>
           <span v-if="selectedCoil">
             <span>{{ selectedCoil.currentCoilNo }}</span>
-
+            <span>({{ selectedCoil.itemName }})</span>
-            <span>({{ selectedCoil.itemName }}) </span>
-
             <span>[{{ selectedCoil.netWeight }}t]</span>
           </span>
-          <span v-else>请选择钢卷</span>
+          <span v-else>{{ placeholder }}</span>
         </el-button>
       </slot>
     </div>
@@ -38,16 +36,14 @@
       <!-- 数据表格 -->
       <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
         style="width: 100%">
-        <el-table-column type="index" width="50" align="center" label="序号" />
         <el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
+        <el-table-column label="存储位置" align="center" prop="actualWarehouseName" width="120" :show-overflow-tooltip="true" />
         <el-table-column label="物料" align="center" prop="itemName" width="100" />
+        <el-table-column label="规格" align="center" prop="specification" width="100" />
+        <el-table-column label="材质" align="center" prop="material" width="100" />
+        <el-table-column label="厂家" align="center" prop="manufacturer" width="100" />
         <el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
         <el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
-        <el-table-column label="操作" align="center" width="100">
-          <template slot-scope="scope">
-            <el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
-          </template>
-        </el-table-column>
       </el-table>
 
       <!-- 分页 -->
@@ -77,6 +73,10 @@ export default {
       type: Object,
       default: () => ({})
     },
+    placeholder: {
+      type: String,
+      default: '请选择钢卷'
+    },
     value: {
       type: [String, Number],
       default: ''
@@ -90,7 +90,7 @@ export default {
     initialCoil: {
       type: Object,
       default: null
-    }
+    },
   },
   data() {
     return {

klp-ui/src/views/wms/delivery/components/coilsTranfer.vue

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <!-- 搜索框，可以设置钢卷搜索条件 -->
+    <!-- 上方是未选的钢卷表格，包含选择按钮 -->
+    <!-- 搜索区域 -->
+    <el-row>
+      <el-form :inline="true" :model="queryParams" class="search-form">
+        <el-form-item label="卷号">
+          <el-input v-model="queryParams.currentCoilNo" placeholder="请输入卷号" clearable size="small"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <el-form-item label="钢种">
+          <el-input v-model="queryParams.grade" placeholder="请输入钢种" clearable size="small"
+            @keyup.enter.native="handleQuery" />
+        </el-form-item>
+        <!-- 分页 -->
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+
+      <!-- 数据表格 -->
+      <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
+        style="width: 100%">
+        <el-table-column type="index" width="50" align="center" label="序号" />
+        <el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
+        <el-table-column label="物料" align="center" prop="itemName" width="100" />
+        <el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
+        <el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+
+    <el-row>
+      <el-table v-loading="loading" :data="coilList" @row-click="handleRowClick" highlight-current-row height="400px"
+        style="width: 100%">
+        <el-table-column type="index" width="50" align="center" label="序号" />
+        <el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
+        <el-table-column label="物料" align="center" prop="itemName" width="100" />
+        <el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
+        <el-table-column label="库区" align="center" prop="warehouseName" width="120" :show-overflow-tooltip="true" />
+        <el-table-column label="操作" align="center" width="100">
+          <template slot-scope="scope">
+            <el-button type="text" size="small" @click.stop="handleSelect(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-row>
+  </div>
+
+
+  <!-- 下方的已选的钢卷表格，包含删除按钮 -->
+</template>
+
+<script>
+
+</script>

klp-ui/src/views/wms/delivery/plan/index.vue

@@ -2,18 +2,10 @@
   <div class="app-container">
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
       <el-form-item label="计划名称" prop="planName">
-        <el-input
+        <el-input v-model="queryParams.planName" placeholder="请输入发货计划名称" clearable @keyup.enter.native="handleQuery" />
-          v-model="queryParams.planName"
-          placeholder="请输入发货计划名称"
-          clearable
-          @keyup.enter.native="handleQuery"
-        />
       </el-form-item>
       <el-form-item label="计划日期" prop="planDate">
-        <el-date-picker clearable
+        <el-date-picker clearable v-model="queryParams.planDate" type="date" value-format="yyyy-MM-dd HH:mm:ss"
-          v-model="queryParams.planDate"
-          type="date"
-          value-format="yyyy-MM-dd HH:mm:ss"
           placeholder="请选择计划日期">
         </el-date-picker>
       </el-form-item>
@@ -25,96 +17,95 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-        >新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
-          type="success"
+          @click="handleUpdate">修改</el-button>
-          plain
-          icon="el-icon-edit"
-          size="mini"
-          :disabled="single"
-          @click="handleUpdate"
-        >修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
-          type="danger"
+          @click="handleDelete">删除</el-button>
-          plain
-          icon="el-icon-delete"
-          size="mini"
-          :disabled="multiple"
-          @click="handleDelete"
-        >删除</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
-          type="warning"
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-        >导出</el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
-    <el-row :gutter="20" v-loading="loading">
+    <el-row :gutter="10">
-      <el-col :span="6" v-for="(row, index) in deliveryPlanList" :key="row.planId">
+      <el-col :span="8">
-        <el-card shadow="hover" class="delivery-plan-card">
+        <el-row :gutter="20" v-loading="loading">
-          <div class="card-header">
+          <el-col :span="12" v-for="(row, index) in deliveryPlanList" :key="row.planId">
-            <el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
+            <el-card shadow="hover" class="delivery-plan-card" @click.native="handleCardClick(row)">
-            <div class="card-title">{{ row.planName }}</div>
+              <div class="card-header">
+                <el-checkbox v-model="row.selected" @change="handleCardSelectionChange(row)"></el-checkbox>
+                <div class="card-title">{{ row.planName }}</div>
+              </div>
+              <div class="card-content">
+                <div class="content-item">
+                  <span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
+                  <span>
+                    <el-tag type="success" v-if="row.auditStatus == 1">已审批</el-tag>
+                    <el-tag type="primary" v-else>待审批</el-tag>
+                  </span>
+                </div>
+                <div class="content-item">
+                  <span>{{ row.createBy }}({{ parseTime(row.updateTime, '{y}-{m}-{d}') }})</span>
+                </div>
+                <div class="content-item">
+                  <span class="label">备注：</span>
+                  <span>{{ row.remark || '-' }}</span>
+                </div>
+              </div>
+              <div class="card-actions">
+                 <el-button size="mini" type="text" icon="el-icon-edit" @click="handleApprove(row)" v-if="row.auditStatus != 1">审批</el-button>
+                <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(row)">修改</el-button>
+                <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(row)">删除</el-button>
+              </div>
+            </el-card>
+          </el-col>
+        </el-row>
+
+        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
+          :limit.sync="queryParams.pageSize" @pagination="getList" />
+      </el-col>
+
+      <!-- 钢卷列表 -->
+      <el-col :span="16" v-loading="rightLoading">
+        <!-- 选中的钢卷表格为空时的提示 -->
+        <div v-if="!currentPlan.planId" class="empty-tip">
+          <el-empty description="请先选择发货计划" />
+        </div>
+
+        <div v-else>
+          <coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange"></coil-selector>
+          <div v-if="selectedCoilList.length > 0 && currentPlan.planId">
+            <el-table :data="selectedCoilList" highlight-current-row height="400px" style="width: 100%">
+              <el-table-column type="index" width="50" align="center" label="序号" />
+              <el-table-column label="卷号" align="center" prop="currentCoilNo" :show-overflow-tooltip="true" />
+              <el-table-column label="存储位置" align="center" prop="actualWarehouseName" width="120"
+                :show-overflow-tooltip="true" />
+              <el-table-column label="物料" align="center" prop="itemName" width="100" />
+              <el-table-column label="规格" align="center" prop="specification" width="100" />
+              <el-table-column label="材质" align="center" prop="material" />
+              <el-table-column label="厂家" align="center" prop="manufacturer" />
+              <el-table-column label="重量(t)" align="center" prop="netWeight" width="100" />
+              <el-table-column label="库区" align="center" prop="warehouseName" :show-overflow-tooltip="true" />
+              <el-table-column label="操作" align="center" width="100">
+                <template slot-scope="scope">
+                  <el-button type="danger" size="small" @click.stop="handleDeleteCoil(scope.row)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
           </div>
-          <div class="card-content">
+          <div v-else class="empty-tip">
-            <div class="content-item">
+            <el-empty description="暂无数据" />
-              <span class="label">计划日期：</span>
-              <span>{{ parseTime(row.planDate, '{y}-{m}-{d}') }}</span>
-            </div>
-            <div class="content-item">
-              <span class="label">备注：</span>
-              <span>{{ row.remark || '-' }}</span>
-            </div>
-            <div class="content-item">
-              <span class="label">创建人：</span>
-              <span>{{ row.createBy }}</span>
-            </div>
-            <div class="content-item">
-              <span class="label">更新时间：</span>
-              <span>{{ parseTime(row.updateTime, '{y}-{m}-{d}') }}</span>
-            </div>
           </div>
-          <div class="card-actions">
+        </div>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-edit"
-              @click="handleUpdate(row)"
-            >修改</el-button>
-            <el-button
-              size="mini"
-              type="text"
-              icon="el-icon-delete"
-              @click="handleDelete(row)"
-            >删除</el-button>
-          </div>
-        </el-card>
       </el-col>
     </el-row>
 
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
 
     <!-- 添加或修改发货计划对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
@@ -123,10 +114,7 @@
           <el-input v-model="form.planName" placeholder="请输入发货计划名称" />
         </el-form-item>
         <el-form-item label="计划日期" prop="planDate">
-          <el-date-picker clearable
+          <el-date-picker clearable v-model="form.planDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
-            v-model="form.planDate"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
             placeholder="请选择计划日期">
           </el-date-picker>
         </el-form-item>
@@ -144,9 +132,14 @@
 
 <script>
 import { listDeliveryPlan, getDeliveryPlan, delDeliveryPlan, addDeliveryPlan, updateDeliveryPlan } from "@/api/wms/deliveryPlan";
+import { listCoilByIds, getMaterialCoil } from "@/api/wms/coil";
+import coilSelector from "@/components/CoilSelector";
 
 export default {
   name: "DeliveryPlan",
+  components: {
+    coilSelector,
+  },
   data() {
     return {
       // 按钮loading
@@ -165,6 +158,7 @@ export default {
       total: 0,
       // 发货计划表格数据
       deliveryPlanList: [],
+      rightLoading: false,
       // 弹出层标题
       title: "",
       // 是否显示弹出层
@@ -183,8 +177,12 @@ export default {
         planDate: '',
       },
       // 表单校验
-      rules: {
+      rules: {},
-      }
+      // 选中的钢卷列表
+      selectedCoilList: [],
+      currentPlan: {},
+      // 防抖定时器
+      debounceTimer: null,
     };
   },
   created() {
@@ -212,6 +210,99 @@ export default {
       this.open = false;
       this.reset();
     },
+    handleApprove(row) {
+      // 二次确认
+      this.$confirm('确定审批通过该发货计划吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.loading = true;
+        this.buttonLoading = true;
+        const auditTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
+        updateDeliveryPlan({
+          planId: row.planId,
+          auditStatus: 1,
+          auditBy: this.$store.getters.name,
+          auditTime: auditTime,
+        }).then(res => {
+          this.loading = false;
+          this.buttonLoading = false;
+          this.$message({
+            message: '审批成功',
+            type: 'success'
+          });
+          this.getList();
+        })
+      })
+    },
+    handleCardClick(row) {
+      // 防抖处理，防止频繁点击
+      if (this.debounceTimer) {
+        clearTimeout(this.debounceTimer);
+      }
+      this.debounceTimer = setTimeout(() => {
+        this.currentPlan = row;
+        if (!row.coil) {
+          this.selectedCoilList = [];
+          return;
+        }
+        this.rightLoading = true;
+        listCoilByIds(row.coil).then(response => {
+          this.selectedCoilList = response.rows || [];
+          this.rightLoading = false;
+        });
+      }, 300); // 300ms防抖时间
+    },
+    handleCoilChange(coilId) {
+      const ids = this.selectedCoilList.map(item => item.coilId);
+      if (coilId) {
+        // 检查是否已存在
+        if (!ids.includes(coilId)) {
+          ids.push(coilId);
+          // 从后端查询详细信息
+          this.rightLoading = true;
+          updateDeliveryPlan({
+            planId: this.currentPlan.planId,
+            coil: ids.join(',')
+          }).then(_ => {
+            this.getList();
+          })
+          getMaterialCoil(coilId).then(res => {
+            this.selectedCoilList.push(res.data);
+            this.rightLoading = false;
+            this.$message({
+              message: '添加成功',
+              type: 'success'
+            });
+          })
+        } else {
+          this.$message({
+            message: '钢卷已存在',
+            type: 'warning'
+          });
+        }
+      }
+    },
+    // 处理删除选中钢卷
+    handleDeleteCoil(row) {
+      // 从选中的钢卷列表中删除选中的行
+      this.selectedCoilList = this.selectedCoilList.filter(item => item !== row);
+      // 更新发货计划
+      this.rightLoading = true;
+      updateDeliveryPlan({
+        planId: this.currentPlan.planId,
+        coil: this.selectedCoilList.map(item => item.coilId).join(',')
+      }).then(res => {
+        this.rightLoading = false;
+        this.$message({
+          message: '删除成功',
+          type: 'success'
+        });
+        this.getList();
+      })
+
+    },
     // 表单重置
     reset() {
       this.form = {
@@ -344,8 +435,9 @@ export default {
 
 .content-item {
   margin-bottom: 10px;
-  display: flex;
+  display: flex; 
-  align-items: flex-start;
+  gap: 10px;
+  align-items: center;
 }
 
 .content-item:last-child {
@@ -361,7 +453,7 @@ export default {
 
 .card-actions {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
-  gap: 10px;
+  gap: 5px;
 }
 </style>

klp-ui/src/views/wms/delivery/waybill/index.vue

@@ -211,9 +211,10 @@ export default {
       selectedPlan: null,
       planQueryParams: {
         pageNum: 1,
-        pageSize: 100, // 增大分页大小以确保树形结构显示足够数据
+        pageSize: 20, // 增大分页大小以确保树形结构显示足够数据
         planName: undefined,
         planType: 0,
+        auditStatus: 1,
       }
     };
   },