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

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

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

@@ -148,4 +148,19 @@ export function listCoilByIds(coilIds) {
       pageSize: 1000
     }
   })
+}
+
+// 根据钢卷id查询最近的操作人和操作时间
+export function listCoilOperation({coilIds, planId}) {
+  return request({
+    url: '/wms/deliveryPlanCoilOperate/coilOperate',
+    method: 'get',
+    params: {
+      // 至少要穿一个空字符串兜底
+      coilIds: coilIds,
+      planId,
+      pageNum: 1,
+      pageSize: 1000
+    }
+  })
 }

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

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询发货计划钢卷操作记录列表
+export function listDeliveryPlanCoilOperate(query) {
+  return request({
+    url: '/wms/deliveryPlanCoilOperate/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询发货计划钢卷操作记录详细
+export function getDeliveryPlanCoilOperate(operateId) {
+  return request({
+    url: '/wms/deliveryPlanCoilOperate/' + operateId,
+    method: 'get'
+  })
+}
+
+// 新增发货计划钢卷操作记录
+export function addDeliveryPlanCoilOperate(data) {
+  return request({
+    url: '/wms/deliveryPlanCoilOperate',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改发货计划钢卷操作记录
+export function updateDeliveryPlanCoilOperate(data) {
+  return request({
+    url: '/wms/deliveryPlanCoilOperate',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除发货计划钢卷操作记录
+export function delDeliveryPlanCoilOperate(operateId) {
+  return request({
+    url: '/wms/deliveryPlanCoilOperate/' + operateId,
+    method: 'delete'
+  })
+}

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

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询发货计划明细列表
+export function listDeliveryPlanDetail(query) {
+  return request({
+    url: '/wms/deliveryPlanDetail/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询发货计划明细详细
+export function getDeliveryPlanDetail(detailId) {
+  return request({
+    url: '/wms/deliveryPlanDetail/' + detailId,
+    method: 'get'
+  })
+}
+
+// 新增发货计划明细
+export function addDeliveryPlanDetail(data) {
+  return request({
+    url: '/wms/deliveryPlanDetail',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改发货计划明细
+export function updateDeliveryPlanDetail(data) {
+  return request({
+    url: '/wms/deliveryPlanDetail',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除发货计划明细
+export function delDeliveryPlanDetail(detailId) {
+  return request({
+    url: '/wms/deliveryPlanDetail/' + detailId,
+    method: 'delete'
+  })
+}

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

@@ -0,0 +1,330 @@
+<template>
+  <div>
+    <el-descriptions title="订单明细">
+    </el-descriptions>
+    <el-row :gutter="10" class="mb8">
+      <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="!currentRow.detailId"
+          @click="handleUpdate"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="!currentRow.detailId"
+          @click="handleDelete"
+        >删除</el-button>
+      </el-col>
+    </el-row>
+
+    <el-table v-loading="loading" border :data="deliveryPlanDetailList" highlight-current-row @row-click="handleRowClick">
+      <!-- <el-table-column label="订单ID" align="center" prop="orderId" /> -->
+      <el-table-column label="订单详情" align="center" prop="orderDetail" width="150px" show-overflow-tooltip/>
+      <!-- <el-table-column label="客户ID" align="center" prop="customerId" /> -->
+      <el-table-column label="客户名称" align="center" prop="customerDetail" width="150px" show-overflow-tooltip/>
+      <el-table-column label="地址" align="center" prop="address" width="150px" show-overflow-tooltip/>
+      <el-table-column label="备注" align="center" prop="remark" show-overflow-tooltip/>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="150px">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+          >修改</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+          >删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <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>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="订单标识" prop="orderId">
+          <!-- 支出远程搜索的下拉选 -->
+          <!-- <el-input v-model="form.orderId" placeholder="请输入订单ID" /> -->
+          <el-select v-model="form.orderId" placeholder="选择订单后自动填写其他信息" filterable @change="handleOrderChange">
+            <el-option
+              v-for="item in orderList"
+              :key="item.orderId"
+              :label="item.orderCode"
+              :value="item.orderId"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="订单详情" prop="orderDetail">
+          <el-input v-model="form.orderDetail" placeholder="请输入内容" />
+        </el-form-item>
+        <!-- 这个不显示 -->
+        <!-- <el-form-item label="客户ID" prop="customerId">
+          <el-input v-model="form.customerId" placeholder="请输入客户ID" />
+        </el-form-item> -->
+        <el-form-item label="客户详情" prop="customerDetail">
+          <el-input v-model="form.customerDetail" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="地址" prop="address">
+          <el-input v-model="form.address" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="form.remark" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { listDeliveryPlanDetail, getDeliveryPlanDetail, delDeliveryPlanDetail, addDeliveryPlanDetail, updateDeliveryPlanDetail } from "@/api/wms/deliveryPlanDetail";
+import { listOrder } from '@/api/crm/order'
+
+export default {
+  name: "DeliveryPlanDetail",
+  props: {
+    planId: {
+      type: String,
+      default: undefined
+    }
+  },
+  data() {
+    return {
+      // 按钮loading
+      buttonLoading: false,
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 发货计划明细表格数据
+      deliveryPlanDetailList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        planId: this.planId,
+        orderId: undefined,
+        orderDetail: undefined,
+        customerId: undefined,
+        customerDetail: undefined,
+        address: undefined,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+      },
+      orderList: [],
+      currentRow: {}
+    };
+  },
+  created() {
+    // this.getList();
+    this.getOrder();
+  },
+  watch: {
+    planId: {
+      handler(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.queryParams.planId = newVal;
+          this.getList();
+          this.currentRow = {};
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    /** 查询发货计划明细列表 */
+    getList() {
+      this.loading = true;
+      listDeliveryPlanDetail(this.queryParams).then(response => {
+        this.deliveryPlanDetailList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    getOrder() {
+      listOrder({
+        orderId: this.form.orderId,
+        pageNum: 1,
+        pageSize: 999,
+        orderType: 1
+      }).then(response => {
+        this.orderList = response.rows;
+      })
+    },
+    handleRowClick(row) {
+      this.currentRow = row;
+      // this.form = {
+      //   detailId: row.detailId,
+      //   planId: this.planId,
+      //   orderId: row.orderId,
+      //   orderDetail: row.orderDetail,
+      //   customerId: row.customerId,
+      //   customerDetail: row.customerDetail,
+      //   address: row.address,
+      //   remark: row.remark,
+      //   delFlag: row.delFlag,
+      //   createTime: row.createTime,
+      //   createBy: row.createBy,
+      //   updateTime: row.updateTime,
+      //   updateBy: row.updateBy
+      // };
+    },
+    handleOrderChange(orderId) {
+      console.log(orderId);
+      // 查找改订单
+      const order = this.orderList.find(item => item.orderId === orderId);
+      console.log(order);
+      if (order) {
+        this.form.orderDetail = order.orderCode;
+        this.form.customerId = order.customerId;
+        this.form.customerDetail = order.customerCode;
+        this.form.address = order.address;
+      }
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        detailId: undefined,
+        planId: this.planId,
+        orderId: undefined,
+        orderDetail: undefined,
+        customerId: undefined,
+        customerDetail: undefined,
+        address: undefined,
+        remark: undefined,
+        delFlag: undefined,
+        createTime: undefined,
+        createBy: undefined,
+        updateTime: undefined,
+        updateBy: undefined
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map(item => item.detailId)
+      this.single = selection.length!==1
+      this.multiple = !selection.length
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加发货计划明细";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.loading = true;
+      this.reset();
+      const detailId = row.detailId || this.currentRow.detailId;
+      getDeliveryPlanDetail(detailId).then(response => {
+        this.loading = false;
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改发货计划明细";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate(valid => {
+        if (valid) {
+          this.buttonLoading = true;
+          if (this.form.detailId != null) {
+            updateDeliveryPlanDetail(this.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          } else {
+            addDeliveryPlanDetail(this.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            }).finally(() => {
+              this.buttonLoading = false;
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const detailIds = row.detailId || this.currentRow.detailId;
+      this.$modal.confirm('是否确认删除发货计划明细编号为"' + detailIds + '"的数据项？').then(() => {
+        this.loading = true;
+        return delDeliveryPlanDetail(detailIds);
+      }).then(() => {
+        this.loading = false;
+        this.getList();
+        this.$modal.msgSuccess("删除成功");
+      }).catch(() => {
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+  }
+};
+</script>

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">
+      <!-- 左侧发货计划列表 - 新增left-col类 -->
-        <el-row :gutter="20" v-loading="loading">
+      <el-col :span="5" class="left-col">
-          <el-col :span="12" v-for="(row, index) in deliveryPlanList" :key="row.planId">
+        <!-- 卡片容器 - 新增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">
+                  <span class="label">备注：</span>
-                    <el-tooltip v-if="row.orderId" :content="'已绑定订单：' + row.orderId">
-                      <el-icon class="el-icon-paperclip"></el-icon>
-                    </el-tooltip>
-                    备注：
-                  </span>
-                  <span>
-                    
-                  </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>
 
-      <!-- 钢卷列表 -->
+      <!-- 右侧钢卷列表 - 新增right-col类 -->
-      <el-col :span="16" v-loading="rightLoading">
+      <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>
-          <div v-if="selectedCoilList.length > 0 && currentPlan.planId">
+            <plan-order :plan-id="currentPlan.planId"></plan-order>
-            <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>
-          <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.getCoilList();
-          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);
+      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();
-          })
+            this.getCoilList();
-          getMaterialCoil(coilId).then(res => {
+            addDeliveryPlanCoilOperate({
-            this.selectedCoilList.push(res.data);
+              planId: this.currentPlan.planId,
-            this.rightLoading = false;
+              coilId: coilId,
-            this.$message({
+              operateType: '插入',
-              message: '添加成功',
+            })
-              type: 'success'
-            });
           })
         } 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(',')
+        coil: this.selectedCoilList.map(item => item.coilDetail.coilId).join(',')
-      }).then(res => {
-        this.rightLoading = false;
-        this.$message({
-          message: '删除成功',
-          type: 'success'
-        });
-        this.getList();
       })
-
+      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-size: 14px;
-  font-weight: bold;
+  /* 减小标题字体 */
+  font-weight: 600;
   color: #333;
 }
 
 .card-content {
-  margin-bottom: 20px;
+  margin-bottom: 6px;
+  /* 减少间距 */
 }
 
 .content-item {
-  margin-bottom: 10px;
+  margin-bottom: 4px;
-  display: flex; 
+  /* 减少内容项间距 */
-  gap: 10px;
+  display: flex;
+  gap: 6px;
+  /* 减小间距 */
   align-items: center;
-}
+  font-size: 12px;
-
+  /* 减小字体 */
-.content-item:last-child {
+  color: #606266;
-  margin-bottom: 0;
 }
 
 .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>