删除frappe-gantt

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

@@ -1,14 +1,38 @@
 <template>
   <div>
-    <el-form :inline="true" @submit.native.prevent>
-      <el-form-item>
-        <el-button type="success" @click="addRow">新增</el-button>
+    <!-- 全局loading遮罩 -->
+    <div v-if="globalLoading" class="global-loading-overlay">
+      <el-loading-spinner></el-loading-spinner>
+      <p>正在加载推荐数据...</p>
+    </div>
+
+    <!-- 采购计划主数据表单 -->
+    <el-form :model="mainForm" :rules="mainFormRules" ref="mainFormRef" :inline="true" label-width="120px" style="margin-bottom: 20px;" 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-table :data="tableData" style="width: 100%; margin-top: 20px" border>
-      <el-table-column prop="raw_material_id" label="原材料ID" width="120">
+
+    <el-form :inline="true" @submit.native.prevent>
+    </el-form>
+    <el-table 
+      :data="tableData" 
+      style="width: 100%; margin-top: 20px" 
+      border 
+      :loading="tableLoading" 
+      element-loading-text="正在加载明细数据..."
+      element-loading-spinner="el-icon-loading"
+      :empty-text="tableLoading ? '正在加载数据...' : '暂无数据'"
+    >
+      <el-table-column prop="rawMaterialId" label="原材料ID" width="120">
         <template #default="scope">
-          <el-input v-model="scope.row.raw_material_id" size="small" />
+          <RawMaterialSelect v-model="scope.row.rawMaterialId" size="small" :loading="selectLoading" />
         </template>
       </el-table-column>
       <el-table-column prop="owner" label="负责人" width="120">
@@ -37,15 +61,21 @@
         </template>
       </el-table-column>
     </el-table>
-    <div style="margin-top: 20px; text-align: right;">
-      <el-button type="primary" @click="confirm">确认</el-button>
+    <div style="margin-top: 20px; text-align: right;" v-loading="submitLoading" element-loading-text="正在提交数据...">
+      <el-button type="primary" @click="confirm" :loading="submitLoading" :disabled="globalLoading || tableLoading || formLoading">
+        {{ submitLoading ? '提交中...' : '确认' }}
+      </el-button>
     </div>
   </div>
 </template>
 
 <script>
+import { recommendPurchasePlan, createPurchasePlan } from '@/api/wms/purchasePlan'
+import RawMaterialSelect from '@/components/KLPService/RawMaterialSelect'
+
 export default {
   name: 'PurchasePlanClac',
+  components: { RawMaterialSelect },
   props: {
     orderId: {
       type: [String, Number],
@@ -54,7 +84,26 @@ export default {
   },
   data() {
     return {
-      tableData: []
+      tableData: [],
+      // 细化的loading状态
+      globalLoading: false, // 全局loading
+      formLoading: false,   // 表单loading
+      tableLoading: false,  // 表格loading
+      selectLoading: false, // 选择器loading
+      submitLoading: false, // 提交loading
+      mainForm: {
+         planCode: '',
+         owner: '',
+         remark: ''
+       },
+      mainFormRules: {
+        planCode: [
+          { required: true, message: '请输入计划编号', trigger: 'blur' }
+        ],
+        owner: [
+          { required: true, message: '请输入负责人', trigger: 'blur' }
+        ]
+      }
     }
   },
   watch: {
@@ -63,49 +112,97 @@ export default {
       handler(newVal) {
         this.loadData(newVal)
       }
+    },
+    tableData: {
+      handler() {
+        this.ensureEmptyRow();
+      },
+      deep: true
     }
   },
   methods: {
     loadData(orderId) {
-      // 模拟接口返回数据，根据orderId加载不同数据
-      // 实际开发中可根据orderId请求后端接口
+      // 设置全局loading
+      this.globalLoading = true;
+      this.formLoading = true;
+      this.tableLoading = true;
+      this.selectLoading = true;
+
       if (!orderId) {
         this.tableData = []
+        this.clearAllLoading();
+        this.ensureEmptyRow();
         return
       }
-      this.tableData = [
-        {
-          raw_material_id: 1,
-          owner: '张三',
-          quantity: 100,
-          unit: 'kg',
-          remark: '紧急采购'
-        },
-        {
-          raw_material_id: 2,
-          owner: '李四',
-          quantity: 50,
-          unit: '件',
-          remark: ''
-        }
-      ]
-    },
-    addRow() {
-      this.tableData.push({
-        raw_material_id: '',
-        owner: '',
-        quantity: 0,
-        unit: '',
-        remark: ''
+
+      recommendPurchasePlan(orderId).then(res => {
+        console.log(res, '推荐数据')
+        this.tableData = res.data.detailList;
+        this.mainForm = res.data;
+        this.ensureEmptyRow();
+      }).finally(() => {
+        this.clearAllLoading();
       })
     },
+    clearAllLoading() {
+      this.globalLoading = false;
+      this.formLoading = false;
+      this.tableLoading = false;
+      this.selectLoading = false;
+    },
     removeRow(index) {
       this.tableData.splice(index, 1)
+      this.ensureEmptyRow();
     },
     confirm() {
-      this.$message.success('操作已确认');
-      console.log(this.tableData);
-      this.$emit('confirm', this.tableData);
+      this.submitLoading = true;
+
+      // 校验主数据表单
+      this.$refs.mainFormRef.validate((valid) => {
+        if (!valid) {
+          this.$message.error('请完整填写主数据信息');
+          this.submitLoading = false;
+          return;
+        }
+
+        // 校验表格数据（除remark外都不能为空）
+        const filtered = this.tableData.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
+        };
+        createPurchasePlan(submitData);
+        this.$message.success('操作已确认');
+        console.log(submitData);
+        this.$emit('confirm', submitData);
+        this.submitLoading = false;
+      });
+    },
+    ensureEmptyRow() {
+      // 如果tableData为空，或最后一行已填写原材料，则补充一个空行
+      if (
+        this.tableData.length === 0 ||
+        (this.tableData[this.tableData.length - 1] && this.tableData[this.tableData.length - 1].rawMaterialId)
+      ) {
+        this.tableData.push({
+          rawMaterialId: '',
+          owner: '',
+          quantity: 0,
+          unit: '',
+          remark: ''
+        });
+      }
     }
   }
 }
@@ -115,4 +212,36 @@ export default {
 .el-form {
   margin-bottom: 20px;
 }
+
+.global-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  z-index: 2000;
+  border-radius: 4px;
+}
+
+.global-loading-overlay p {
+  margin-top: 10px;
+  color: #409EFF;
+  font-size: 14px;
+}
+
+/* 表格loading样式优化 */
+.el-table .el-loading-mask {
+  background-color: rgba(255, 255, 255, 0.8);
+}
+
+.el-table .el-loading-spinner .el-loading-text {
+  color: #409EFF;
+  font-size: 14px;
+  margin-top: 10px;
+}
 </style>

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

@@ -112,6 +112,12 @@ import { listPurchasePlanDetail, getPurchasePlanDetail, delPurchasePlanDetail, a
 
 export default {
   name: "PurchasePlanDetail",
+  props: {
+    planId: {
+      type: [String, Number],
+      default: null
+    }
+  },
   data() {
     return {
       // 按钮loading
@@ -169,6 +175,17 @@ export default {
   created() {
     this.getList();
   },
+  watch: {
+    planId: {
+      handler(newVal) {
+        if (newVal) {
+          this.queryParams.planId = newVal;
+          this.getList();
+        }
+      },
+      immediate: true
+    }
+  },
   methods: {
     /** 查询采购计划明细列表 */
     getList() {
@@ -221,6 +238,9 @@ export default {
     /** 新增按钮操作 */
     handleAdd() {
       this.reset();
+      if (this.planId) {
+        this.form.planId = this.planId;
+      }
       this.open = true;
       this.title = "添加采购计划明细";
     },