141 lines
4.3 KiB
Vue
141 lines
4.3 KiB
Vue
<template>
|
||
<el-dialog :model-value="visible" @update:model-value="handleUpdateVisible" title="添加药材" width="600px"
|
||
destroy-on-close :close-on-click-modal="false">
|
||
<el-form :model="form" label-width="120px" ref="formRef" class="mt-2" :rules="formRules">
|
||
<!-- 药材下拉 + 未找到按钮 -->
|
||
<el-form-item v-if="!isAddingNew" label="药材名称" prop="Id" style="display: flex; align-items: center">
|
||
<el-select v-model="form.Id" placeholder="请选择药材" filterable style="flex: 1; margin-right: 8px">
|
||
<el-option v-for="item in medicinalList" :key="item.id" :label="item.medicinalName" :value="item.id" />
|
||
</el-select>
|
||
<el-button type="text" @click="handleNotFound">未找到</el-button>
|
||
</el-form-item>
|
||
<!-- 新药材输入框 -->
|
||
<el-form-item label="新药材名称" v-if="isAddingNew" prop="medicinalName">
|
||
<el-input v-model="form.medicinalName" placeholder="请输入新药材名称" />
|
||
</el-form-item>
|
||
|
||
<el-form-item label="添加量（g）" prop="addWeight">
|
||
<el-input v-model.number="form.addWeight" type="number" min="0.01" step="0.01" placeholder="请输入添加量" />
|
||
</el-form-item>
|
||
|
||
<!-- 改为总价输入 -->
|
||
<el-form-item label="总价" prop="totalPrice">
|
||
<el-input v-model.number="form.totalPrice" type="number" min="0" step="0.01" placeholder="请输入总价（元）" />
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<template #footer>
|
||
<el-button @click="handleCancel">取消</el-button>
|
||
<el-button type="primary" @click="handleSubmit">确认添加</el-button>
|
||
</template>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, reactive, watch, computed } from "vue";
|
||
import { medicinalApi } from "@/api/modules/biz/WeiBingJu/medicinal";
|
||
import { ElMessage, ElForm, FormRules } from "element-plus";
|
||
|
||
const props = defineProps({
|
||
visible: { type: Boolean, default: false }
|
||
});
|
||
const emit = defineEmits(["update:visible", "close", "refreshList"]);
|
||
|
||
const medicinalList = ref<any[]>([]);
|
||
const isAddingNew = ref(false);
|
||
|
||
const formRef = ref<InstanceType<typeof ElForm>>();
|
||
const form = reactive({
|
||
Id: null as number | null,
|
||
addWeight: 0,
|
||
// 前端改为 totalPrice
|
||
totalPrice: 0,
|
||
medicinalName: ""
|
||
});
|
||
|
||
// 动态表单校验（注意 totalPrice 字段）
|
||
const formRules = computed<FormRules>(() => ({
|
||
Id: [{ required: !isAddingNew.value, message: "请选择药材", trigger: "change" }],
|
||
medicinalName: [{ required: isAddingNew.value, message: "请输入新药材名称", trigger: "blur" }],
|
||
addWeight: [
|
||
{ required: true, message: "请输入添加量", trigger: "blur" },
|
||
{ type: "number", min: 0.01, message: "添加量不能小于0.01", trigger: "blur" }
|
||
],
|
||
totalPrice: [
|
||
{ required: true, message: "请输入总价", trigger: "blur" },
|
||
{ type: "number", min: 0, message: "总价不能为负", trigger: "blur" }
|
||
]
|
||
}));
|
||
|
||
const fetchMedicinalList = async () => {
|
||
try {
|
||
const res = await medicinalApi.getDictList();
|
||
medicinalList.value = res.data || [];
|
||
} catch (err) {
|
||
medicinalList.value = [];
|
||
}
|
||
};
|
||
|
||
watch(
|
||
() => props.visible,
|
||
async newVal => {
|
||
if (newVal) {
|
||
handleResetForm();
|
||
await fetchMedicinalList();
|
||
}
|
||
}
|
||
);
|
||
|
||
const handleUpdateVisible = (newVisible: boolean) => {
|
||
emit("update:visible", newVisible);
|
||
if (!newVisible) {
|
||
handleResetForm();
|
||
emit("close");
|
||
}
|
||
};
|
||
const handleCancel = () => emit("update:visible", false);
|
||
const handleResetForm = () => {
|
||
form.Id = null;
|
||
form.addWeight = 0;
|
||
form.totalPrice = 0;
|
||
form.medicinalName = "";
|
||
isAddingNew.value = false;
|
||
formRef.value?.resetFields();
|
||
};
|
||
|
||
const handleNotFound = () => {
|
||
isAddingNew.value = true;
|
||
form.Id = null;
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
if (!formRef.value) return;
|
||
|
||
try {
|
||
await formRef.value.validate();
|
||
} catch {
|
||
return;
|
||
}
|
||
|
||
// 计算单价，并校验 addWeight > 0
|
||
if (!form.addWeight || form.addWeight <= 0) {
|
||
ElMessage.warning("添加量需大于 0");
|
||
return;
|
||
}
|
||
const payload: any = {
|
||
Id: form.Id,
|
||
addWeight: form.addWeight,
|
||
totalPrice: form.totalPrice,
|
||
medicinalName: form.medicinalName
|
||
};
|
||
|
||
try {
|
||
await medicinalApi.addMedicinal(payload);
|
||
ElMessage.success("添加成功");
|
||
emit("update:visible", false);
|
||
emit("refreshList");
|
||
} catch (err: any) {
|
||
}
|
||
};
|
||
</script>
|