新增采购计划

klp-ui/src/views/wms/order/index.vue

@@ -157,10 +157,10 @@
       <OrderDetailPanel :orderId="detailOrderId" />
     </el-dialog>
 
-    <!-- 智能采购单弹窗 -->
+    <!-- 智能采购单弹窗, 底部弹出 -->
-    <el-dialog :title="`智能采购单（订单ID：${clacOrderId}）`" :visible.sync="clacDialogVisible" width="90%" append-to-body>
+    <el-drawer :title="`智能采购单（订单ID：${clacOrderId}）`" direction="btt" :visible.sync="clacDialogVisible"  width="100%" size="90%" append-to-body>
       <clac-panel :orderId="clacOrderId" @confirm="handleRecommendConfirm" />
-    </el-dialog>
+    </el-drawer>
   </div>
 </template>
 

klp-ui/src/views/wms/purchasePlan/index.vue

@@ -239,6 +239,25 @@
         <el-button @click="detailOpen = false">关 闭</el-button>
       </div>
     </el-dialog>
+
+    <!-- 新增采购计划底部抽屉 -->
+    <el-drawer
+      title="新增采购计划"
+      :visible.sync="addDrawerOpen"
+      direction="btt"
+      size="90%"
+      :with-header="true"
+      :wrapperClosable="false"
+      custom-class="purchase-drawer"
+      append-to-body
+      mask-closable="false"
+    >
+      <CreatePurchasePanel
+        :order-id="''"
+        :recommend-data="{}"
+        @confirm="onAddConfirm"
+      />
+    </el-drawer>
   </div>
 </template>
 
@@ -247,13 +266,15 @@ import { listPurchasePlan, getPurchasePlan, delPurchasePlan, addPurchasePlan, up
 import { listOrder } from "@/api/wms/order";
 import PurchasePlanClac from "./panels/clac.vue";
 import PurchasePlanDetail from "./panels/detail.vue";
+import CreatePurchasePanel from "./panels/CreatePurchasePanel.vue";
 import { EOrderStatus } from "../../../utils/enums";
 
 export default {
   name: "PurchasePlan",
   components: {
     PurchasePlanClac,
-    PurchasePlanDetail
+    PurchasePlanDetail,
+    CreatePurchasePanel
   },
   dicts: ['order_status'],
   data() {
@@ -327,7 +348,8 @@ export default {
         status: [
           { required: true, message: "状态不能为空", trigger: "change" }
         ],
-      }
+      },
+      addDrawerOpen: false,
     };
   },
   mounted() {
@@ -383,9 +405,7 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
-      this.reset();
+      this.addDrawerOpen = true;
-      this.open = true;
-      this.title = "添加采购计划主";
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
@@ -498,7 +518,19 @@ export default {
     handleDetail(row) {
       this.selectedPlanId = row.planId;
       this.detailOpen = true;
+    },
+    onAddConfirm() {
+      this.addDrawerOpen = false;
+      this.getList();
     }
   }
 };
 </script>
+
+<style>
+.purchase-drawer .el-drawer__body {
+  padding: 24px;
+  background: #f9f9f9;
+  overflow-y: auto;
+}
+</style>

klp-ui/src/views/wms/purchasePlan/panels/CreatePurchasePanel.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="purchase-plan-transfer">
+    <!-- 采购单信息区 -->
+    <el-card class="section-card" shadow="never">
+      <div slot="header" class="section-title">采购单信息</div>
+      <el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 0;" v-loading="formLoading" element-loading-text="正在加载主数据...">
+        <el-form-item label="计划编号" prop="planCode">
+          <el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="负责人" prop="owner">
+          <el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
+        </el-form-item>
+        <el-form-item label="备注" prop="remark">
+          <el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <div class="transfer-content">
+      <!-- 原料区（待筛选） -->
+      <el-card class="section-card left-table" shadow="never">
+        <div slot="header" class="section-title">原料区（待筛选）</div>
+        <div class="filter-bar">
+          <el-input
+            v-model="rawMaterialNameFilter"
+            placeholder="请输入原材料名称"
+            size="small"
+            style="width: 200px; margin-bottom: 10px;"
+            @keyup.enter.native="handleRawMaterialFilter"
+            clearable
+          />
+          <el-button type="primary" size="small" @click="handleRawMaterialFilter" style="margin-left: 8px;">筛选</el-button>
+        </div>
+        <el-table
+          :data="rawMaterialList"
+          @selection-change="handleSelectionChange"
+          style="width: 100%"
+          ref="leftTable"
+          border
+          :loading="rawMaterialLoading"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="rawMaterialName" label="原材料名称" />
+          <el-table-column prop="rawMaterialCode" label="原材料编码" />
+          <el-table-column prop="unit" label="单位" />
+        </el-table>
+        <el-pagination
+          :current-page="pageNum"
+          :page-size="pageSize"
+          :total="total"
+          @current-change="handlePageChange"
+          layout="total, prev, pager, next"
+        />
+      </el-card>
+      <!-- 中间操作按钮 -->
+      <div class="transfer-actions">
+        <el-button @click="addToPurchase" :disabled="!leftSelected.length" type="primary">添加到采购 &gt;&gt;</el-button>
+        <el-button @click="removeFromPurchase" :disabled="!rightSelected.length" type="danger" style="margin-top: 10px;">&lt;&lt; 移除</el-button>
+      </div>
+      <!-- 采购单明细区 -->
+      <el-card class="section-card right-table" shadow="never">
+        <div slot="header" class="section-title">采购单明细</div>
+        <el-table
+          :data="purchaseList"
+          @selection-change="handleRightSelectionChange"
+          style="width: 100%"
+          ref="rightTable"
+          border
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column prop="rawMaterialName" label="原材料名称" />
+          <el-table-column prop="rawMaterialCode" label="原材料编码" />
+          <el-table-column prop="unit" label="单位" />
+          <el-table-column prop="quantity" label="计划采购数">
+            <template #default="scope">
+              <el-input-number v-model="scope.row.quantity" :min="0" size="small" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="owner" label="负责人">
+            <template #default="scope">
+              <el-input v-model="scope.row.owner" size="small" />
+            </template>
+          </el-table-column>
+          <el-table-column prop="remark" label="备注">
+            <template #default="scope">
+              <el-input v-model="scope.row.remark" size="small" />
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+    <div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
+      <el-button type="primary" @click="confirm" :loading="submitLoading">{{ submitLoading ? '提交中...' : '确认' }}</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { createPurchasePlan } from '@/api/wms/purchasePlan'
+import { listRawMaterial } from '@/api/wms/rawMaterial'
+
+export default {
+  name: 'CreatePurchasePanel',
+  props: {
+    orderId: {
+      type: [String, Number],
+      required: true
+    },
+    recommendData: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      // 原材料表格相关
+      rawMaterialList: [],
+      total: 0,
+      pageNum: 1,
+      pageSize: 10,
+      rawMaterialLoading: false,
+      leftSelected: [],
+      rightSelected: [],
+      rawMaterialNameFilter: '',
+      // 采购列表
+      purchaseList: [],
+      // 细化的loading状态
+      formLoading: false,
+      submitLoading: false,
+      mainForm: {
+         planCode: '',
+         owner: '',
+         remark: ''
+       },
+      mainFormRules: {
+        planCode: [
+          { required: true, message: '请输入计划编号', trigger: 'blur' }
+        ],
+        owner: [
+          { required: true, message: '请输入负责人', trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  watch: {
+    recommendData: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal && newVal.detailList) {
+          this.purchaseList = newVal.detailList
+          this.mainForm = {
+            planCode: newVal.planCode || '',
+            owner: newVal.owner || '',
+            remark: newVal.remark || ''
+          }
+        }
+      }
+    }
+  },
+  mounted() {
+    this.fetchRawMaterials();
+  },
+  methods: {
+    // 原材料分页查询
+    fetchRawMaterials() {
+      this.rawMaterialLoading = true;
+      listRawMaterial({ pageNum: this.pageNum, pageSize: this.pageSize, rawMaterialName: this.rawMaterialNameFilter }).then(res => {
+        // 过滤掉已在采购列表中的原材料
+        const purchaseIds = this.purchaseList.map(item => item.rawMaterialId);
+        this.rawMaterialList = (res.rows || []).filter(item => !purchaseIds.includes(item.rawMaterialId));
+        this.total = res.total || 0;
+        this.rawMaterialLoading = false;
+      }).catch(() => {
+        this.rawMaterialLoading = false;
+      });
+    },
+    handlePageChange(page) {
+      this.pageNum = page;
+      this.fetchRawMaterials();
+    },
+    handleSelectionChange(selection) {
+      this.leftSelected = selection;
+    },
+    handleRightSelectionChange(selection) {
+      this.rightSelected = selection;
+    },
+    handleRawMaterialFilter() {
+      this.pageNum = 1;
+      this.fetchRawMaterials();
+    },
+    addToPurchase() {
+      // 去重添加
+      const ids = this.purchaseList.map(item => item.rawMaterialId);
+      const newItems = this.leftSelected.filter(item => !ids.includes(item.rawMaterialId)).map(item => ({
+        ...item,
+        quantity: 0,
+        owner: '',
+        remark: ''
+      }));
+      this.purchaseList = this.purchaseList.concat(newItems);
+      this.$refs.leftTable.clearSelection();
+      this.fetchRawMaterials();
+    },
+    removeFromPurchase() {
+      const removeIds = this.rightSelected.map(item => item.rawMaterialId);
+      this.purchaseList = this.purchaseList.filter(item => !removeIds.includes(item.rawMaterialId));
+      this.$refs.rightTable.clearSelection();
+      this.fetchRawMaterials();
+    },
+    confirm() {
+      this.submitLoading = true;
+      this.$refs.mainFormRef.validate(async(valid) => {
+        if (!valid) {
+          this.$message.error('请完整填写主数据信息');
+          this.submitLoading = false;
+          return;
+        }
+        // 校验采购列表数据（除remark外都不能为空）
+        const filtered = this.purchaseList.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
+        const invalid = filtered.some(row => {
+          return !row.rawMaterialId || !row.owner || !row.unit || row.quantity === '' || row.quantity === null || row.quantity === undefined;
+        });
+        if (invalid) {
+          this.$message.error('请完整填写所有必填项');
+          this.submitLoading = false;
+          return;
+        }
+        // 合并主数据和明细数据
+        const submitData = {
+          ...this.mainForm,
+          orderId: this.orderId,
+          detailList: filtered
+        };
+        await createPurchasePlan(submitData);
+        this.$emit('confirm', submitData);
+        this.submitLoading = false;
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+.purchase-plan-transfer {
+  display: flex;
+  flex-direction: column;
+}
+.section-card {
+  margin-bottom: 20px;
+}
+.section-title {
+  font-weight: bold;
+  font-size: 16px;
+  color: #333;
+}
+.transfer-content {
+  display: flex;
+  align-items: flex-start;
+}
+.left-table {
+  width: 30%;
+}
+.right-table {
+  width: 60%;
+}
+.transfer-actions {
+  width: 10%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.transfer-actions .el-button {
+  margin: 10px 0;
+}
+.filter-bar {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+}
+</style> 

klp-ui/src/views/wms/purchasePlan/panels/RecommendPurchasePanel.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <el-button v-if="showButton" type="primary" @click="handleRecommend" :loading="loading">推荐采购计划</el-button>
+  </div>
+</template>
+
+<script>
+import { recommendPurchasePlan } from '@/api/wms/purchasePlan'
+
+export default {
+  name: 'RecommendPurchasePanel',
+  props: {
+    orderId: {
+      type: [String, Number],
+      required: true
+    },
+    showButton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      loading: false
+    }
+  },
+  mounted() {
+    if (!this.showButton) {
+      this.handleRecommend();
+    }
+  },
+  methods: {
+    async handleRecommend() {
+      if (!this.orderId) {
+        this.$message.error('缺少订单ID');
+        return;
+      }
+      this.loading = true;
+      try {
+        const res = await recommendPurchasePlan(this.orderId);
+        this.$emit('recommend', res.data);
+      } catch (e) {
+        this.$message.error('推荐失败');
+      } finally {
+        this.loading = false;
+      }
+    }
+  }
+}
+</script> 

klp-ui/src/views/wms/purchasePlan/panels/clac.vue

@@ -1,122 +1,27 @@
 <template>
   <div class="purchase-plan-transfer">
-    <!-- 全局loading遮罩 -->
+    <!-- 推荐采购计划（自动推荐，无按钮） -->
-    <div v-if="globalLoading" class="global-loading-overlay">
+    <recommend-purchase-panel :order-id="orderId" :show-button="false" @recommend="onRecommend" />
-      <el-loading-spinner></el-loading-spinner>
-      <p>正在加载推荐数据...</p>
-    </div>
 
-    <!-- 采购单信息区 -->
+    <!-- 创建采购计划表单及明细 -->
-    <el-card class="section-card" shadow="never">
+    <create-purchase-panel
-      <div slot="header" class="section-title">采购单信息</div>
+      :order-id="orderId"
-      <el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 0;" v-loading="formLoading" element-loading-text="正在加载主数据...">
+      :recommend-data="recommendData"
-        <el-form-item label="计划编号" prop="planCode">
+      @confirm="onConfirm"
-          <el-input v-model="mainForm.planCode" placeholder="请输入计划编号" style="width: 200px;" />
-        </el-form-item>
-        <el-form-item label="负责人" prop="owner">
-          <el-input v-model="mainForm.owner" placeholder="请输入负责人" style="width: 200px;" />
-        </el-form-item>
-        <el-form-item label="备注" prop="remark">
-          <el-input v-model="mainForm.remark" placeholder="请输入备注" style="width: 300px;" />
-        </el-form-item>
-      </el-form>
-    </el-card>
-
-    <div class="transfer-content">
-      <!-- 原料区（待筛选） -->
-      <el-card class="section-card left-table" shadow="never">
-        <div slot="header" class="section-title">原料区（待筛选）</div>
-        <div class="filter-bar">
-          <el-input
-            v-model="rawMaterialNameFilter"
-            placeholder="请输入原材料名称"
-            size="small"
-            style="width: 200px; margin-bottom: 10px;"
-            @keyup.enter.native="handleRawMaterialFilter"
-            clearable
     />
-          <el-button type="primary" size="small" @click="handleRawMaterialFilter" style="margin-left: 8px;">筛选</el-button>
-        </div>
-        <el-table
-          :data="rawMaterialList"
-          @selection-change="handleSelectionChange"
-          style="width: 100%"
-          ref="leftTable"
-          border
-          :loading="rawMaterialLoading"
-        >
-          <el-table-column type="selection" width="55" />
-          <el-table-column prop="rawMaterialName" label="原材料名称" />
-          <el-table-column prop="rawMaterialCode" label="原材料编码" />
-          <el-table-column prop="unit" label="单位" />
-        </el-table>
-        <el-pagination
-          :current-page="pageNum"
-          :page-size="pageSize"
-          :total="total"
-          @current-change="handlePageChange"
-          layout="total, prev, pager, next"
-        />
-      </el-card>
-      <!-- 中间操作按钮 -->
-      <div class="transfer-actions">
-        <el-button @click="addToPurchase" :disabled="!leftSelected.length" type="primary">添加到采购 &gt;&gt;</el-button>
-        <el-button @click="removeFromPurchase" :disabled="!rightSelected.length" type="danger" style="margin-top: 10px;">&lt;&lt; 移除</el-button>
-      </div>
-      <!-- 采购单明细区 -->
-      <el-card class="section-card right-table" shadow="never">
-        <div slot="header" class="section-title">采购单明细</div>
-        <el-table
-          :data="purchaseList"
-          @selection-change="handleRightSelectionChange"
-          style="width: 100%"
-          ref="rightTable"
-          border
-        >
-          <el-table-column type="selection" width="55" />
-          <el-table-column prop="rawMaterialName" label="原材料名称" />
-          <el-table-column prop="rawMaterialCode" label="原材料编码" />
-          <el-table-column prop="unit" label="单位" />
-          <el-table-column prop="quantity" label="计划采购数">
-            <template #default="scope">
-              <el-input-number v-model="scope.row.quantity" :min="0" size="small" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="owner" label="负责人">
-            <template #default="scope">
-              <el-input v-model="scope.row.owner" size="small" />
-            </template>
-          </el-table-column>
-          <el-table-column prop="remark" label="备注">
-            <template #default="scope">
-              <el-input v-model="scope.row.remark" size="small" />
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-card>
-    </div>
-    <div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
-      <el-button type="primary" @click="confirm" :loading="submitLoading" :disabled="globalLoading || rawMaterialLoading || formLoading">
-        {{ submitLoading ? '提交中...' : '确认' }}
-      </el-button>
-    </div>
   </div>
 </template>
 
 <script>
-import { recommendPurchasePlan, createPurchasePlan } from '@/api/wms/purchasePlan'
+import RecommendPurchasePanel from './RecommendPurchasePanel.vue'
-import { listRawMaterial } from '@/api/wms/rawMaterial'
+import CreatePurchasePanel from './CreatePurchasePanel.vue'
-import { updateOrder } from '@/api/wms/order'
-
-const EOrderStatus = {
-  NEW: 0,
-  PRODUCTIONING: 1,
-  FINISH: 2,
-  CANCEL: 3
-}
 
 export default {
   name: 'PurchasePlanClac',
+  components: {
+    RecommendPurchasePanel,
+    CreatePurchasePanel
+  },
   props: {
     orderId: {
       type: [String, Number],
@@ -125,147 +30,15 @@ export default {
   },
   data() {
     return {
-      // 原材料表格相关
+      recommendData: {}
-      rawMaterialList: [],
-      total: 0,
-      pageNum: 1,
-      pageSize: 10,
-      rawMaterialLoading: false,
-      leftSelected: [],
-      rightSelected: [],
-      rawMaterialNameFilter: '',
-      // 采购列表
-      purchaseList: [],
-      // 细化的loading状态
-      globalLoading: false, // 全局loading
-      formLoading: false,   // 表单loading
-      submitLoading: false, // 提交loading
-      mainForm: {
-         planCode: '',
-         owner: '',
-         remark: ''
-       },
-      mainFormRules: {
-        planCode: [
-          { required: true, message: '请输入计划编号', trigger: 'blur' }
-        ],
-        owner: [
-          { required: true, message: '请输入负责人', trigger: 'blur' }
-        ]
     }
-    }
-  },
-  watch: {
-    orderId: {
-      immediate: true,
-      handler(newVal) {
-        this.loadData(newVal)
-      }
-    }
-  },
-  mounted() {
-    this.fetchRawMaterials();
   },
   methods: {
-    // 推荐采购计划主数据
+    onRecommend(data) {
-    loadData(orderId) {
+      this.recommendData = data
-      this.globalLoading = true;
-      this.formLoading = true;
-      if (!orderId) {
-        this.purchaseList = [];
-        this.clearAllLoading();
-        return;
-      }
-      recommendPurchasePlan(orderId).then(res => {
-        this.purchaseList = res.data.detailList || [];
-        this.mainForm = res.data;
-      }).finally(() => {
-        this.clearAllLoading();
-      })
     },
-    clearAllLoading() {
+    onConfirm(submitData) {
-      this.globalLoading = false;
+      this.$emit('confirm', submitData)
-      this.formLoading = false;
-    },
-    // 原材料分页查询
-    fetchRawMaterials() {
-      this.rawMaterialLoading = true;
-      listRawMaterial({ pageNum: this.pageNum, pageSize: this.pageSize, rawMaterialName: this.rawMaterialNameFilter }).then(res => {
-        // 过滤掉已在采购列表中的原材料
-        const purchaseIds = this.purchaseList.map(item => item.rawMaterialId);
-        this.rawMaterialList = (res.rows || []).filter(item => !purchaseIds.includes(item.rawMaterialId));
-        this.total = res.total || 0;
-        this.rawMaterialLoading = false;
-      }).catch(() => {
-        this.rawMaterialLoading = false;
-      });
-    },
-    handlePageChange(page) {
-      this.pageNum = page;
-      this.fetchRawMaterials();
-    },
-    handleSelectionChange(selection) {
-      this.leftSelected = selection;
-    },
-    handleRightSelectionChange(selection) {
-      this.rightSelected = selection;
-    },
-    handleRawMaterialFilter() {
-      this.pageNum = 1;
-      this.fetchRawMaterials();
-    },
-    addToPurchase() {
-      // 去重添加
-      const ids = this.purchaseList.map(item => item.rawMaterialId);
-      const newItems = this.leftSelected.filter(item => !ids.includes(item.rawMaterialId)).map(item => ({
-        ...item,
-        quantity: 0,
-        owner: '',
-        remark: ''
-      }));
-      this.purchaseList = this.purchaseList.concat(newItems);
-      this.$refs.leftTable.clearSelection();
-      this.fetchRawMaterials();
-    },
-    removeFromPurchase() {
-      const removeIds = this.rightSelected.map(item => item.rawMaterialId);
-      this.purchaseList = this.purchaseList.filter(item => !removeIds.includes(item.rawMaterialId));
-      this.$refs.rightTable.clearSelection();
-      this.fetchRawMaterials();
-    },
-    confirm() {
-      this.submitLoading = true;
-      // 校验主数据表单
-      this.$refs.mainFormRef.validate(async(valid) => {
-        if (!valid) {
-          this.$message.error('请完整填写主数据信息');
-          this.submitLoading = false;
-          return;
-        }
-        // 校验采购列表数据（除remark外都不能为空）
-        const filtered = this.purchaseList.filter(row => row.rawMaterialId && row.rawMaterialId !== '');
-        const invalid = filtered.some(row => {
-          return !row.rawMaterialId || !row.owner || !row.unit || row.quantity === '' || row.quantity === null || row.quantity === undefined;
-        });
-        if (invalid) {
-          this.$message.error('请完整填写所有必填项');
-          this.submitLoading = false;
-          return;
-        }
-        // 合并主数据和明细数据
-        const submitData = {
-          ...this.mainForm,
-          orderId: this.orderId,
-          detailList: filtered
-        };
-        await createPurchasePlan(submitData);
-        await updateOrder({
-          orderId: this.orderId,
-          orderStatus: EOrderStatus.PRODUCTIONING
-        })
-        this.$emit('confirm', submitData);
-        this.submitLoading = false;
-      });
     }
   }
 }