feat(wms): 新增发货计划订单明细组件和操作记录功能

添加发货计划订单明细组件planOrder.vue，实现订单明细的增删改查功能
新增发货计划钢卷操作记录API和相关功能，记录钢卷的插入和删除操作
优化发货计划页面布局和样式，分离订单明细和钢卷管理区域

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

@@ -19,14 +19,6 @@
       <el-col :span="1.5">
         <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
       </el-col>
-      <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single"
-          @click="handleUpdate">修改</el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
-          @click="handleDelete">删除</el-button>
-      </el-col>
       <el-col :span="1.5">
         <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
       </el-col>
@@ -34,40 +26,28 @@
     </el-row>
 
     <el-row :gutter="10">
-      <el-col :span="8">
-        <el-row :gutter="20" v-loading="loading">
-          <el-col :span="12" v-for="(row, index) in deliveryPlanList" :key="row.planId">
+      <!-- 左侧发货计划列表 - 新增left-col类 -->
+      <el-col :span="5" class="left-col">
+        <!-- 卡片容器 - 新增left-card-container类 -->
+        <el-row :gutter="10" v-loading="loading" class="left-card-container">
+          <el-col :span="24" v-for="(row, index) in deliveryPlanList" :key="row.planId">
             <el-card shadow="hover" class="delivery-plan-card" @click.native="handleCardClick(row)">
               <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">
-                    <el-tooltip v-if="row.orderId" :content="'已绑定订单：' + row.orderId">
-                      <el-icon class="el-icon-paperclip"></el-icon>
-                    </el-tooltip>
-                    备注：
-                  </span>
-                  <span>
-                    
-                  </span>
+                  <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.stop="handleApprove(row)" v-if="row.auditStatus != 1">审批</el-button>
                 <el-button size="mini" type="text" icon="el-icon-edit" @click.stop="handleUpdate(row)">修改</el-button>
                 <el-button size="mini" type="text" icon="el-icon-delete" @click.stop="handleDelete(row)">删除</el-button>
               </div>
@@ -75,46 +55,63 @@
           </el-col>
         </el-row>
 
+        <!-- 分页组件 -->
         <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
-          :limit.sync="queryParams.pageSize" @pagination="getList" />
+          :limit.sync="queryParams.pageSize" @pagination="getList" class="pagination-container" />
       </el-col>
 
-      <!-- 钢卷列表 -->
-      <el-col :span="16" v-loading="rightLoading">
+      <!-- 右侧钢卷列表 - 新增right-col类 -->
+      <el-col :span="19" v-loading="rightLoading" class="right-col">
         <!-- 选中的钢卷表格为空时的提示 -->
         <div v-if="!currentPlan.planId" class="empty-tip">
           <el-empty description="请先选择发货计划" />
         </div>
 
         <div v-else>
-          <coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange" :filters="coilFilters"></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" v-if="currentPlan.auditStatus != 1">
-                <template slot-scope="scope">
-                  <el-button type="danger" size="small" @click.stop="handleDeleteCoil(scope.row)">删除</el-button>
-                </template>
-              </el-table-column>
-            </el-table>
+          <div>
+            <plan-order :plan-id="currentPlan.planId"></plan-order>
           </div>
-          <div v-else class="empty-tip">
-            <el-empty description="暂无数据" />
+
+          <div>
+            <el-descriptions title="配卷">
+            </el-descriptions>
+            <coil-selector ref="coilSelector" placeholder="请选择钢卷添加至计划" @change="handleCoilChange"
+              :filters="coilFilters"></coil-selector>
+            <div v-if="selectedCoilList.length > 0 && currentPlan.planId">
+              <el-table :data="selectedCoilList" border highlight-current-row style="width: 100%" max-height="400px">
+                <el-table-column type="index" width="50" align="center" label="序号" />
+                <el-table-column label="卷号" align="center" prop="coilDetail.currentCoilNo"
+                  :show-overflow-tooltip="true" />
+                <el-table-column label="存储位置" align="center" prop="coilDetail.actualWarehouseName" width="120"
+                  :show-overflow-tooltip="true" />
+                <el-table-column label="物料" align="center" prop="coilDetail.itemName" width="100" />
+                <el-table-column label="规格" align="center" prop="coilDetail.specification" width="100" />
+                <el-table-column label="材质" align="center" prop="coilDetail.material" />
+                <el-table-column label="厂家" align="center" prop="coilDetail.manufacturer" />
+                <el-table-column label="重量(t)" align="center" prop="coilDetail.netWeight" width="100" />
+                <el-table-column label="库区" align="center" prop="coilDetail.warehouseName" width="120"
+                  :show-overflow-tooltip="true" />
+                <el-table-column label="操作时间" align="center" prop="createTime"
+                  :show-overflow-tooltip="true"><template slot-scope="scope">
+                  {{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}
+                </template></el-table-column>
+                <el-table-column label="操作人" align="center" prop="createBy" width="120"
+                  :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 v-else class="empty-tip">
+              <el-empty description="暂无数据" />
+            </div>
           </div>
         </div>
       </el-col>
     </el-row>
 
-
     <!-- 添加或修改发货计划对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
@@ -126,9 +123,6 @@
             placeholder="请选择计划日期">
           </el-date-picker>
         </el-form-item>
-        <!-- <el-form-item label="绑定订单" prop="orderId">
-          <el-input v-model="form.orderId" placeholder="请输入订单号" />
-        </el-form-item> -->
         <el-form-item label="备注" prop="remark">
           <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
         </el-form-item>
@@ -143,13 +137,16 @@
 
 <script>
 import { listDeliveryPlan, getDeliveryPlan, delDeliveryPlan, addDeliveryPlan, updateDeliveryPlan } from "@/api/wms/deliveryPlan";
-import { listCoilByIds, getMaterialCoil } from "@/api/wms/coil";
+import { listCoilOperation } from "@/api/wms/coil";
+import { addDeliveryPlanCoilOperate } from "@/api/wms/deliveryPlanCoilOperate";
 import coilSelector from "@/components/CoilSelector";
+import PlanOrder from "../components/planOrder.vue";
 
 export default {
   name: "DeliveryPlan",
   components: {
     coilSelector,
+    PlanOrder,
   },
   data() {
     return {
@@ -197,7 +194,9 @@ export default {
       // 防抖定时器
       debounceTimer: null,
       coilFilters: {
-        status: 0
+        status: 0,
+        materialType: '成品',
+        selectType: 'product'
       }
     };
   },
@@ -226,36 +225,46 @@ export default {
       this.open = false;
       this.reset();
     },
-    handleApprove(row) {
+    async handleApprove(row) {
       // 二次确认
-      this.$confirm('确定审批通过该发货计划吗？', '提示', {
+      await 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;
-
-          // 如何当前选中的计划是被审批的计划，需要同步修改数据
-          if (row.planId == this.currentPlan.planId) {
-            this.currentPlan.auditStatus = 1;
-          }
-          this.$message({
-            message: '审批成功',
-            type: 'success'
-          });
-          this.getList();
-        })
       })
+      this.loading = true;
+      this.buttonLoading = true;
+      const auditTime = this.parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}');
+      await updateDeliveryPlan({
+        planId: row.planId,
+        auditStatus: 1,
+        auditBy: this.$store.getters.name,
+        auditTime: auditTime,
+      })
+      this.loading = false;
+      this.buttonLoading = false;
+      // 如何当前选中的计划是被审批的计划，需要同步修改数据
+      if (row.planId == this.currentPlan.planId) {
+        this.currentPlan.auditStatus = 1;
+      }
+      this.$message({
+        message: '审批成功',
+        type: 'success'
+      });
+      this.getList();
+
+    },
+    getCoilList() {
+      if (!this.currentPlan.planId) {
+        this.selectedCoilList = [];
+        return;
+      }
+      this.rightLoading = true;
+      console.log(this.currentPlan)
+      listCoilOperation({ coilIds: this.currentPlan.coil, planId: this.currentPlan.planId }).then(response => {
+        this.selectedCoilList = response.data || [];
+        this.rightLoading = false;
+      });
     },
     handleCardClick(row) {
       // 防抖处理，防止频繁点击
@@ -264,23 +273,17 @@ export default {
       }
       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;
-        });
+        this.getCoilList();
       }, 300); // 300ms防抖时间
     },
     handleCoilChange(coilId) {
-      const ids = this.selectedCoilList.map(item => item.coilId);
+      const ids = this.selectedCoilList.map(item => item.coilDetail.coilId);
       if (coilId) {
         // 检查是否已存在
         if (!ids.includes(coilId)) {
           ids.push(coilId);
+          const idsStr = ids.join(',');
+          this.currentPlan.coil = idsStr;
           // 从后端查询详细信息
           this.rightLoading = true;
           updateDeliveryPlan({
@@ -288,14 +291,12 @@ export default {
             coil: ids.join(',')
           }).then(_ => {
             this.getList();
-          })
-          getMaterialCoil(coilId).then(res => {
-            this.selectedCoilList.push(res.data);
-            this.rightLoading = false;
-            this.$message({
-              message: '添加成功',
-              type: 'success'
-            });
+            this.getCoilList();
+            addDeliveryPlanCoilOperate({
+              planId: this.currentPlan.planId,
+              coilId: coilId,
+              operateType: '插入',
+            })
           })
         } else {
           this.$message({
@@ -306,23 +307,31 @@ export default {
       }
     },
     // 处理删除选中钢卷
-    handleDeleteCoil(row) {
+    async handleDeleteCoil(row) {
+      await this.$modal.confirm('确定删除选中的钢卷吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      })
       // 从选中的钢卷列表中删除选中的行
       this.selectedCoilList = this.selectedCoilList.filter(item => item !== row);
       // 更新发货计划
       this.rightLoading = true;
-      updateDeliveryPlan({
+      await 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();
+        coil: this.selectedCoilList.map(item => item.coilDetail.coilId).join(',')
       })
-
+      this.rightLoading = false;
+      this.$message({
+        message: '删除成功',
+        type: 'success'
+      });
+      addDeliveryPlanCoilOperate({
+        planId: this.currentPlan.planId,
+        coilId: row.coilId,
+        operateType: '删除',
+      })
+      this.getList();
     },
     // 表单重置
     reset() {
@@ -433,8 +442,64 @@ export default {
 </script>
 
 <style scoped>
+/* 左侧列容器样式 */
+.left-col {
+  height: calc(100vh - 180px);
+  /* 自适应高度，减去顶部栏高度 */
+  box-sizing: border-box;
+  padding-right: 8px;
+}
+
+/* 左侧卡片容器 - 独立滚动 */
+.left-card-container {
+  height: calc(100% - 50px);
+  /* 减去分页高度 */
+  overflow-y: auto;
+  padding-right: 5px;
+  /* 避免滚动条遮挡内容 */
+}
+
+/* 左侧滚动条美化 */
+.left-card-container::-webkit-scrollbar {
+  width: 6px;
+}
+
+.left-card-container::-webkit-scrollbar-thumb {
+  background-color: #e6e6e6;
+  border-radius: 3px;
+}
+
+.left-card-container::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+/* 右侧列容器样式 - 独立滚动 */
+.right-col {
+  height: calc(100vh - 180px);
+  /* 和左侧等高 */
+  overflow-y: auto;
+  box-sizing: border-box;
+  padding-left: 8px;
+}
+
+/* 右侧滚动条美化 */
+.right-col::-webkit-scrollbar {
+  width: 6px;
+}
+
+.right-col::-webkit-scrollbar-thumb {
+  background-color: #e6e6e6;
+  border-radius: 3px;
+}
+
+.right-col::-webkit-scrollbar-track {
+  background-color: #f5f5f5;
+}
+
+/* 发货计划卡片样式 - 更紧凑 */
 .delivery-plan-card {
-  margin-bottom: 20px;
+  margin-bottom: 8px;
+  /* 减少卡片间距 */
   height: 100%;
 }
 
@@ -442,40 +507,60 @@ export default {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 15px;
+  margin-bottom: 6px;
+  /* 减少间距 */
 }
 
 .card-title {
-  font-size: 16px;
-  font-weight: bold;
+  font-size: 14px;
+  /* 减小标题字体 */
+  font-weight: 600;
   color: #333;
 }
 
 .card-content {
-  margin-bottom: 20px;
+  margin-bottom: 6px;
+  /* 减少间距 */
 }
 
 .content-item {
-  margin-bottom: 10px;
-  display: flex; 
-  gap: 10px;
+  margin-bottom: 4px;
+  /* 减少内容项间距 */
+  display: flex;
+  gap: 6px;
+  /* 减小间距 */
   align-items: center;
-}
-
-.content-item:last-child {
-  margin-bottom: 0;
+  font-size: 12px;
+  /* 减小字体 */
+  color: #606266;
 }
 
 .label {
-  width: 80px;
+  width: 50px;
+  /* 减小标签宽度 */
   font-weight: 500;
   color: #606266;
-  margin-right: 10px;
+  margin-right: 4px;
 }
 
 .card-actions {
   display: flex;
   justify-content: center;
   gap: 5px;
+  font-size: 12px;
 }
-</style>
+
+/* 空状态提示 */
+.empty-tip {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+/* 分页容器 */
+.pagination-container {
+  margin-top: 10px;
+  text-align: right;
+}
+</style>