heli-mes/mes-ui/mes-ui-admin-vue3/src/views/heli/purchaseorder/PurchaseOrderForm.vue
2025-01-09 18:29:48 +08:00

202 lines
7.1 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<el-form
ref="formRef"
:model="formData"
:rules="formRules"
label-width="100px"
v-loading="formLoading"
>
<el-form-item label="采购单号" prop="purchaseNo">
<el-input v-model="formData.purchaseNo" placeholder="请输入采购单号" />
</el-form-item>
<el-form-item label="供应商id" prop="supplierId">
<el-input v-model="formData.supplierId" placeholder="请输入供应商id" />
</el-form-item>
<el-form-item label="采购合同号" prop="contractNo">
<el-input v-model="formData.contractNo" placeholder="请输入采购合同号" />
</el-form-item>
<el-form-item label="采购单类型1按物料需求计划采购2备库采购" prop="purchaseType">
<el-radio-group v-model="formData.purchaseType">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.HELI_PROJECT_PURCHASE_ORDER_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="供应商id" prop="projectMaterialPlanId">
<el-input v-model="formData.projectMaterialPlanId" placeholder="请输入供应商id" />
</el-form-item>
<el-form-item label="采购物类型1物料2加工件" prop="goodsType">
<el-radio-group v-model="formData.goodsType">
<el-radio
v-for="dict in getIntDictOptions(DICT_TYPE.HELI_PROJECT_PURCHASE_GOODS_TYPE)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="结算币种" prop="currencyType">
<el-select v-model="formData.currencyType" placeholder="请选择结算币种">
<el-option label="请选择字典生成" value="" />
</el-select>
</el-form-item>
<el-form-item label="税率" prop="taxRatio">
<el-input v-model="formData.taxRatio" placeholder="请输入税率" />
</el-form-item>
<el-form-item label="暂估价金额" prop="estimatedPrice">
<el-input v-model="formData.estimatedPrice" placeholder="请输入暂估价金额" />
</el-form-item>
<el-form-item label="实际价金额" prop="actualPrice">
<el-input v-model="formData.actualPrice" placeholder="请输入实际价金额" />
</el-form-item>
<el-form-item label="状态,1已保存2已送审3已审核4已打回 默认是1" prop="status">
<el-radio-group v-model="formData.status">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.HELI_PURCHASE_ORDER_STATUS)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="送审人" prop="submitUserId">
<el-input v-model="formData.submitUserId" placeholder="请输入送审人" />
</el-form-item>
<el-form-item label="送审时间" prop="submitTime">
<el-date-picker
v-model="formData.submitTime"
type="date"
value-format="x"
placeholder="选择送审时间"
/>
</el-form-item>
<el-form-item label="审核人" prop="auditor">
<el-input v-model="formData.auditor" placeholder="请输入审核人" />
</el-form-item>
<el-form-item label="审核时间" prop="auditTime">
<el-date-picker
v-model="formData.auditTime"
type="date"
value-format="x"
placeholder="选择审核时间"
/>
</el-form-item>
<el-form-item label="备注" prop="description">
<el-input v-model="formData.description" type="textarea" placeholder="请输入备注" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading"> </el-button>
<el-button @click="dialogVisible = false"> </el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import * as PurchaseOrderApi from '@/api/heli/purchaseorder'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中1修改时的数据加载2提交的按钮禁用
const formType = ref('') // 表单的类型create - 新增update - 修改
const formData = ref({
id: undefined,
purchaseNo: undefined,
supplierId: undefined,
contractNo: undefined,
purchaseType: undefined,
projectMaterialPlanId: undefined,
goodsType: undefined,
currencyType: undefined,
taxRatio: undefined,
estimatedPrice: undefined,
actualPrice: undefined,
status: undefined,
submitUserId: undefined,
submitTime: undefined,
auditor: undefined,
auditTime: undefined,
description: undefined,
})
const formRules = reactive({
purchaseNo: [{ required: true, message: '采购单号不能为空', trigger: 'blur' }],
goodsType: [{ required: true, message: '采购物类型1物料2加工件不能为空', trigger: 'blur' }],
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
// 修改时,设置数据
if (id) {
formLoading.value = true
try {
formData.value = await PurchaseOrderApi.getPurchaseOrder(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法,用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value as unknown as PurchaseOrderApi.PurchaseOrderVO
if (formType.value === 'create') {
await PurchaseOrderApi.createPurchaseOrder(data)
message.success(t('common.createSuccess'))
} else {
await PurchaseOrderApi.updatePurchaseOrder(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
purchaseNo: undefined,
supplierId: undefined,
contractNo: undefined,
purchaseType: undefined,
projectMaterialPlanId: undefined,
goodsType: undefined,
currencyType: undefined,
taxRatio: undefined,
estimatedPrice: undefined,
actualPrice: undefined,
status: undefined,
submitUserId: undefined,
submitTime: undefined,
auditor: undefined,
auditTime: undefined,
description: undefined,
}
formRef.value?.resetFields()
}
</script>