119 lines
3.1 KiB
Vue
119 lines
3.1 KiB
Vue
<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>
|