|
|
<script>
|
import {modelInfo} from "#/api/system/model/index.js";
|
import {pick} from "lodash-es";
|
import {useVbenModal} from "@vben/common-ui";
|
import {ref, computed} from "vue";
|
import { $t } from '@vben/locales';
|
const defaultValues = {
|
id: undefined,
|
name: undefined,
|
}
|
|
const isUpdate = ref(false);
|
const title = computed(() => {
|
return isUpdate.value ? $t('编辑') : $t('新增');
|
});
|
const { validate, validateInfos, resetFields } = Form.useForm(
|
formData,
|
formRules,
|
);
|
const [BasicModal, modalApi] = useVbenModal({
|
class: 'w-[550px]',
|
fullscreenButton: false,
|
closeOnClickModal: false,
|
onClosed: handleCancel,
|
onConfirm: handleConfirm,
|
onOpenChange: async (isOpen) => {
|
if (!isOpen) {
|
return null;
|
}
|
modalApi.modalLoading(true);
|
|
const { id } = modalApi.getData() as { id?: number | string };
|
isUpdate.value = !!id;
|
|
if (isUpdate.value && id) {
|
const record = await modelInfo(id);
|
// 只赋值存在的字段
|
const filterRecord = pick(record, Object.keys(defaultValues));
|
formData.value = filterRecord;
|
}
|
|
modalApi.modalLoading(false);
|
},
|
});
|
|
|
</script>
|
<template>
|
<BasicModal :title="title">
|
<Form :label-col="{ span: 4 }">
|
<FormItem label="名称" v-bind="validateInfos.name">
|
<Input
|
v-model:value="formData.name"
|
:placeholder="$t('ui.formRules.required')"
|
/>
|
</FormItem>
|
</Form>
|
</BasicModal>
|
</template>
|
<style scoped>
|
|
</style>
|
