<template>
|
<div>
|
<el-dialog
|
v-model="dialogFormVisible"
|
: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="coal">
|
<el-input v-model="form.coal" 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="purchaseQuantity">
|
<el-input v-model="form.purchaseQuantity" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="单价(不含税)" prop="priceExcludingTax">
|
<el-input v-model="form.priceExcludingTax" placeholder="请输入" >
|
<template v-slot:suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="总价(不含税)" prop="totalPriceExcludingTax">
|
<el-input v-model="form.totalPriceExcludingTax" placeholder="请输入" >
|
<template v-slot:suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="单价(含税)" prop="priceIncludingTax">
|
<el-input v-model="form.priceIncludingTax" placeholder="请输入" >
|
<template v-slot:suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="总价(含税)" prop="totalPriceIncludingTax">
|
<el-input v-model="form.totalPriceIncludingTax" placeholder="请输入" >
|
<template v-slot:suffix>
|
<i style="font-style:normal;">元</i>
|
</template>
|
</el-input>
|
</el-form-item>
|
<el-form-item label="税率" prop="taxRate">
|
<el-input v-model="form.taxRate" placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="登记人" prop="registrantId">
|
<el-input v-model="form.registrantId" disabled placeholder="请输入" />
|
</el-form-item>
|
<el-form-item label="登记日期" prop="registrationDate">
|
<el-date-picker
|
disabled
|
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
|
@click="handleClose"
|
v-if="title.includes('新增')"
|
>取消</el-button
|
>
|
<el-button
|
@click="handleReset"
|
v-if="title.includes('编辑')"
|
>重置</el-button
|
>
|
<el-button type="primary" @click="handleSubmit">确认</el-button>
|
</div>
|
</template>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script setup name="ProductionDialog">
|
import { ref, defineProps, watch, onMounted, nextTick } from "vue";
|
import { ElMessage } from "element-plus";
|
import useUserStore from '@/store/modules/user'
|
import {addOrEditPR} from "@/api/procureMent";
|
const props = defineProps({
|
title: {
|
type: String,
|
default: "",
|
},
|
});
|
const emit = defineEmits(["update:dialogFormVisible", "success"]);
|
const dialogFormVisible = defineModel("dialogFormVisible", {
|
required: true,
|
type: Boolean,
|
});
|
const form = defineModel("form", {
|
required: true,
|
type: Object,
|
});
|
const copyForm = defineModel("copyForm", {
|
required: true,
|
type: Object,
|
});
|
const userStore = useUserStore()
|
const userInfo = ref({});
|
onMounted(async () => {
|
let res = await userStore.getInfo()
|
userInfo.value = res;
|
})
|
const rules = {
|
supplierName: [
|
{ required: true, message: "请输入供应商名称", trigger: "blur" },
|
],
|
coal: [{ required: true, message: "请输入煤种", trigger: "blur" }],
|
unit: [{ required: true, message: "请输入单位", trigger: "blur" }],
|
purchaseQuantity: [
|
{ required: true, message: "请输入采购数量", trigger: "blur" },
|
],
|
priceExcludingTax: [{ required: true, message: "请输入单价", trigger: "blur" }],
|
totalPriceExcludingTax: [{ required: true, message: "请输入总价", trigger: "blur" }],
|
priceIncludingTax: [{ required: true, message: "请输入含税单价", trigger: "blur" }],
|
totalPriceIncludingTax: [{ required: true, message: "请输入含税总价", trigger: "blur" }],
|
taxRate: [{ required: true, message: "请输入税率", trigger: "blur" }],
|
registrantId: [{ required: true, message: "请输入登记人", trigger: "blur" }],
|
registrationDate: [
|
{ required: true, message: "请选择登记日期", trigger: "change" },
|
],
|
};
|
// 关闭弹窗
|
const handleClose = () => {
|
dialogFormVisible.value = false;
|
};
|
const handleReset = async () => {
|
// 重置表单数据
|
form.value = JSON.parse(JSON.stringify(copyForm.value));
|
// 等待DOM更新完成后清除表单验证状态
|
await nextTick();
|
if (formRef.value) {
|
formRef.value.clearValidate();
|
}
|
console.log(form.value);
|
};
|
const formRef = ref(null);
|
// 提交表单
|
const handleSubmit = async () => {
|
if (!formRef.value) return;
|
await formRef.value.validate(async (valid) => {
|
if (valid) {
|
console.log("表单验证通过", form.value);
|
const obj = ref({});
|
if (props.title.includes('新增')) {
|
let result = await addOrEditPR({
|
...form.value,
|
})
|
obj.value = {
|
title: "新增",
|
...form.value,
|
result
|
};
|
} else {
|
delete form.value.updateTime
|
delete form.value.createTime
|
let result = await addOrEditPR({
|
...form.value,
|
})
|
obj.value = {
|
title: "编辑",
|
...form.value,
|
result
|
};
|
}
|
emit("submit", obj.value);
|
}
|
});
|
};
|
</script>
|
|
<style lang="sass" scoped>
|
</style>
|
