采购开始做

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

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-form :inline="true" @submit.native.prevent>
+      <el-form-item>
+        <el-button type="success" @click="addRow">新增</el-button>
+      </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">
+        <template #default="scope">
+          <el-input v-model="scope.row.raw_material_id" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="owner" label="负责人" width="120">
+        <template #default="scope">
+          <el-input v-model="scope.row.owner" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="quantity" label="计划采购数" width="120">
+        <template #default="scope">
+          <el-input-number v-model="scope.row.quantity" :min="0" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="unit" label="单位" width="100">
+        <template #default="scope">
+          <el-input v-model="scope.row.unit" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="remark" label="备注" width="180">
+        <template #default="scope">
+          <el-input v-model="scope.row.remark" size="small" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="100">
+        <template #default="scope">
+          <el-button type="danger" size="small" @click="removeRow(scope.$index)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div style="margin-top: 20px; text-align: right;">
+      <el-button type="primary" @click="confirm">确认</el-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PurchasePlanClac',
+  props: {
+    orderId: {
+      type: [String, Number],
+      required: true
+    }
+  },
+  data() {
+    return {
+      tableData: []
+    }
+  },
+  watch: {
+    orderId: {
+      immediate: true,
+      handler(newVal) {
+        this.loadData(newVal)
+      }
+    }
+  },
+  methods: {
+    loadData(orderId) {
+      // 模拟接口返回数据，根据orderId加载不同数据
+      // 实际开发中可根据orderId请求后端接口
+      if (!orderId) {
+        this.tableData = []
+        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: ''
+      })
+    },
+    removeRow(index) {
+      this.tableData.splice(index, 1)
+    },
+    confirm() {
+      this.$message.success('操作已确认');
+      console.log(this.tableData);
+      this.$emit('confirm', this.tableData);
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-form {
+  margin-bottom: 20px;
+}
+</style>