<template>
|
<div>
|
<el-dialog
|
v-model="dialogVisible"
|
:title="title"
|
width="600"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
<el-form
|
ref="formRef"
|
:model="form"
|
:rules="rules"
|
label-width="auto"
|
class="production-form"
|
label-position="right"
|
style="max-width: 400px; margin: 0 auto"
|
>
|
<el-form-item label="供应商名称" prop="supplierName">
|
<el-input v-model="form.supplierName" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="煤种" prop="category">
|
<el-input v-model="form.category" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="单位" prop="unit">
|
<el-input v-model="form.unit" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="采购数量" prop="purchaseAmount">
|
<el-input v-model="form.purchaseAmount" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="单价(税前)" prop="priceBeforeTax">
|
<el-input v-model="form.priceBeforeTax" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="总价(税前)" prop="totalBeforeTax">
|
<el-input v-model="form.totalBeforeTax" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="热值" prop="calorificValue">
|
<el-input v-model="form.calorificValue" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="登记人" prop="registrant">
|
<el-input v-model="form.registrant" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="登记日期" prop="registrationDate">
|
<el-date-picker
|
v-model="form.registrationDate"
|
type="date"
|
placeholder="YYYY-MM-DD"
|
style="width: 100%"
|
value-format="YYYY-MM-DD"
|
/>
|
</el-form-item>
|
</el-form>
|
<template #footer>
|
<div class="dialog-footer">
|
<el-button type="primary" @click="handleSubmit">保存</el-button>
|
<!-- 重置和取消 -->
|
<el-button
|
type="primary"
|
@click="handleClose"
|
v-if="title.includes('新增')"
|
>取消</el-button
|
>
|
<el-button
|
type="primary"
|
@click="handleReset"
|
v-if="title.includes('编辑')"
|
>重置</el-button
|
>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="ProductionDialog">
|
import { ref, defineProps, watch } from "vue";
|
import { ElMessage } from "element-plus";
|
const props = defineProps({
|
title: {
|
type: String,
|
default: "",
|
},
|
});
|
const emit = defineEmits(["update:visible", "success"]);
|
const dialogVisible = defineModel("dialogFormVisible", {
|
required: true,
|
type: Boolean,
|
});
|
const form = defineModel("form", {
|
required: true,
|
type: Object,
|
});
|
const rules = {
|
supplierName: [
|
{ required: true, message: "请输入供应商名称", trigger: "blur" },
|
],
|
category: [{ required: true, message: "请输入煤种", trigger: "blur" }],
|
unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
|
purchaseAmount: [
|
{ required: true, message: "请输入采购数量", trigger: "blur" },
|
],
|
priceBeforeTax: [{ required: true, message: "请输入单价", trigger: "blur" }],
|
totalBeforeTax: [{ required: true, message: "请输入总价", trigger: "blur" }],
|
calorificValue: [{ required: true, message: "请输入热值", trigger: "blur" }],
|
registrant: [{ required: true, message: "请输入登记人", trigger: "blur" }],
|
registrationDate: [
|
{ required: true, message: "请选择登记日期", trigger: "change" },
|
],
|
};
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogVisible.value = false;
|
console.log(form.value);
|
};
|
const handleReset = () => {
|
if (!formRef.value) return;
|
formRef.value.resetFields();
|
ElMessage.success("表单已重置");
|
};
|
// 持续监听form.value的变化
|
watch(
|
() => form.value,
|
(val) => {
|
console.log(val);
|
}
|
);
|
const formRef = ref(null);
|
// 提交表单
|
const handleSubmit = async () => {
|
if (!formRef.value) return;
|
await formRef.value.validate((valid) => {
|
if (valid) {
|
try {
|
emit("success", { ...form.value });
|
handleClose();
|
ElMessage.success("保存成功");
|
} catch (error) {
|
console.error("保存失败:", error);
|
ElMessage.error("保存失败");
|
}
|
}
|
});
|
};
|
</script>
|
|
<style lang="sass" scoped>
|
</style>
|
