<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);
|
// formRef.value?.resetFields()
|
// Object.assign(form, {
|
// })
|
};
|
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="less" scoped>
|
</style>
|
|
<!-- <template>
|
<el-dialog
|
v-model="dialogFormVisible"
|
title="采购登记新增"
|
width="500px"
|
:close-on-click-modal="false"
|
@close="handleClose"
|
>
|
|
</el-dialog>
|
</template>
|
|
<script setup>
|
import { ref, reactive, defineProps, defineEmits } from 'vue'
|
import { ElMessage } from 'element-plus'
|
|
const props = defineProps({
|
visible: {
|
type: Boolean,
|
default: false
|
}
|
})
|
|
const emit = defineEmits(['update:visible', 'success'])
|
|
const dialogFormVisible = ref(false)
|
const formRef = ref(null)
|
|
// 表单数据
|
const form = reactive({
|
supplierName: '',
|
category: '',
|
unit: '',
|
purchaseAmount: '',
|
priceBeforeTax: '',
|
totalBeforeTax: '',
|
calorificValue: '',
|
registrant: '',
|
registrationDate: ''
|
})
|
|
// 表单验证规则
|
|
|
// 监听visible变化
|
watch(() => props.visible, (val) => {
|
dialogFormVisible.value = val
|
})
|
|
// 监听dialogFormVisible变化
|
watch(() => dialogFormVisible.value, (val) => {
|
emit('update:visible', val)
|
})
|
|
// 提交表单
|
const handleSubmit = async () => {
|
if (!formRef.value) return
|
|
await formRef.value.validate((valid) => {
|
if (valid) {
|
try {
|
emit('success', { ...form })
|
handleClose()
|
ElMessage.success('保存成功')
|
} catch (error) {
|
console.error('保存失败:', error)
|
ElMessage.error('保存失败')
|
}
|
}
|
})
|
}
|
|
// 取消
|
const handleCancel = () => {
|
handleClose()
|
}
|
</script>
|
|
<style scoped>
|
.production-form {
|
padding: 20px;
|
}
|
|
.dialog-footer {
|
display: flex;
|
justify-content: center;
|
gap: 20px;
|
}
|
|
:deep(.el-form-item__label) {
|
font-weight: normal;
|
}
|
|
:deep(.el-input),
|
:deep(.el-date-picker) {
|
width: 100%;
|
}
|
|
:deep(.el-dialog__body) {
|
padding-top: 10px;
|
}
|
</style> -->
|
