我想当我选择已在库中的时候再完整的使用setUserInfo这个方法,如果我选择未在库中,我只需要setUserInfo方法中的第一行: this.addForm.worker = this.showUsername;不然就会报错,请问应该怎么修改呢?
class="grid-content bg-purple"> <el-radio border size="mini" @change="existenceChange(existence)" v-model="existence" :label="1"> 已在库中 el-radio> <el-radio border size="mini" @change="existenceChange(existence)" v-model="existence" :label="0"> 未在库中 el-radio> <el-row> <el-col :span="8"> <el-form-item label="物资数量" prop="numbers" v-show="existence === 1"> <el-input v-model="addForm.numbers">el-input> el-form-item> el-col> el-row> <el-row> <el-col :span="8"> <el-form-item label="物资名称" prop="itemname" v-show="existence === 0"> <el-input v-model="addForm.itemname">el-input> el-form-item> el-col> el-row> <el-row> <el-col :span="8"> <el-form-item label="物资数量" prop="numbers" v-show="existence === 0"> <el-input v-model="addForm.numbers">el-input> el-form-item> el-col> el-row> <el-row> <el-col :span="8"> <el-form-item label="物资单位" prop="unit" v-show="existence === 0"> <el-input v-model="addForm.unit">el-input> el-form-item> el-col> el-row> existenceChange(existence) { if (existence === 1) { } else if (existence === 0) { } }, selectedItems() { return this.stockList.filter(item => this.$refs.table.selection.includes(item)) .map(item => ({ name: item.itemname, unit: item.unit })); } addIn() { this.$refs.addFormRef.validate(async valid => { if (!valid) return; this.setUserInfo(); const {data: res} = await this.$http.post("addIn", this.addForm); if (res != "success") { return this.$message.error("入库失败~"); } this.$message.success("入库成功~"); this.addDialogVisible = false; this.getStockList(); }); }, setUserInfo() { // 填入用户名 this.addForm.worker = this.showUsername; this.addForm.itemname = this.selectedItems[0].name; this.addForm.unit = this.selectedItems[0].unit; },
参考GPT和自己的思路:根据你提供的代码和问题描述,如果你选择未在库中,只需要执行 setUserInfo 方法的第一行代码:this.addForm.worker = this.showUsername;,那么你可以在代码中加上一个条件判断,只有当 existence 的值为 1 时才执行 setUserInfo 方法的其他部分。具体代码修改如下:
addIn() {
this.$refs.addFormRef.validate(async valid => {
if (!valid) return;
if (this.existence === 1) {
this.setUserInfo();
} else {
this.addForm.worker = this.showUsername;
}
const {data: res} = await this.$http.post("addIn", this.addForm);
if (res != "success") {
return this.$message.error("入库失败~");
}
this.$message.success("入库成功~");
this.addDialogVisible = false;
this.getStockList();
});
},
这样,当 existence 的值为 1 时,才会执行 setUserInfo 方法的其他部分,而当 existence 的值为 0 时,只会执行 setUserInfo 方法的第一行代码。
您可以在existenceChange
方法中根据选择的值来设置一个isInStock
的变量,然后在setUserInfo
方法中根据这个变量来决定设置哪些字段。例如:
data() {
return {
isInStock: true, // 默认为已在库中
// ...
}
},
methods: {
existenceChange(existence) {
this.isInStock = existence === 1;
},
setUserInfo() {
// 填入用户名
this.addForm.worker = this.showUsername;
if (this.isInStock) {
this.addForm.itemname = this.selectedItems[0].name;
this.addForm.unit = this.selectedItems[0].unit;
}
},
addIn() {
// ...
if (this.isInStock) {
// 验证物资数量
this.$refs.addFormRef.validateField('numbers', errorMsg => {
if (errorMsg) {
return this.$message.error(errorMsg);
}
this.setUserInfo();
// ...
});
} else {
this.setUserInfo();
// ...
}
}
}
这样,当isInStock
为true时,setUserInfo
方法会设置物资名称和单位字段;当isInStock
为false时,setUserInfo
方法只会设置工作人员字段。在addIn
方法中,当isInStock
为true时,先验证物资数量字段,然后再调用setUserInfo
方法;当isInStock
为false时,直接调用setUserInfo
方法。