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>
|