Merge branch 'native_form' of https://gitee.com/dapppp/ruoyi-plus-vben5 into dev

This commit is contained in:
dap 2025-03-08 20:05:47 +08:00
commit ab003826a3
7 changed files with 122 additions and 25 deletions

View File

@ -3,6 +3,7 @@
**FEATURES** **FEATURES**
- 代码生成支持路径方式生成 - 代码生成支持路径方式生成
- 代码生成 支持选择表单生成类型(需要模板支持)
# 1.2.1 # 1.2.1

View File

@ -1,6 +1,6 @@
{ {
"name": "@vben/web-antd", "name": "@vben/web-antd",
"version": "1.2.1", "version": "1.2.2",
"homepage": "https://vben.pro", "homepage": "https://vben.pro",
"bugs": "https://github.com/vbenjs/vue-vben-admin/issues", "bugs": "https://github.com/vbenjs/vue-vben-admin/issues",
"repository": { "repository": {

View File

@ -177,6 +177,7 @@ export interface Info {
// 树表需要添加此属性 // 树表需要添加此属性
params?: any; params?: any;
popupComponent?: string; popupComponent?: string;
formComponent?: string;
} }
export interface GenInfo { export interface GenInfo {

View File

@ -1,14 +1,23 @@
<!--
2025年03月08日重构为原生表单(反向重构??)
该文件作为例子 使用原生表单而非useVbenForm
-->
<script setup lang="ts"> <script setup lang="ts">
import type { RuleObject } from 'ant-design-vue/es/form';
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenModal } from '@vben/common-ui';
import { DictEnum } from '@vben/constants';
import { $t } from '@vben/locales'; import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils'; import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form'; import { Form, FormItem, Input, RadioGroup } from 'ant-design-vue';
import { noticeAdd, noticeInfo, noticeUpdate } from '#/api/system/notice'; import { pick } from 'lodash-es';
import { modalSchema } from './data'; import { noticeAdd, noticeInfo, noticeUpdate } from '#/api/system/notice';
import { Tinymce } from '#/components/tinymce';
import { getDictOptions } from '#/utils/dict';
const emit = defineEmits<{ reload: [] }>(); const emit = defineEmits<{ reload: [] }>();
@ -17,21 +26,59 @@ const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add'); return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
}); });
const [BasicForm, formApi] = useVbenForm({ /**
layout: 'vertical', * 定义表单数据类型
commonConfig: { */
formItemClass: 'col-span-2', interface FormData {
labelWidth: 100, noticeId?: number;
}, noticeTitle?: string;
schema: modalSchema(), status?: string;
showDefaultActions: false, noticeType?: string;
wrapperClass: 'grid-cols-2', noticeContent?: string;
}
/**
* 定义默认值 用于reset
*/
const defaultValues: FormData = {
noticeId: undefined,
noticeTitle: '',
status: '0',
noticeType: '1',
noticeContent: '',
};
/**
* 表单数据ref
*/
const formData = ref(defaultValues);
type AntdFormRules<T> = Partial<Record<keyof T, RuleObject[]>> & {
[key: string]: RuleObject[];
};
/**
* 表单校验规则
*/
const formRules = ref<AntdFormRules<FormData>>({
status: [{ required: true, message: $t('ui.formRules.selectRequired') }],
noticeContent: [{ required: true, message: $t('ui.formRules.required') }],
noticeType: [{ required: true, message: $t('ui.formRules.selectRequired') }],
noticeTitle: [{ required: true, message: $t('ui.formRules.required') }],
}); });
/**
* useForm解构出表单方法
*/
const { validate, validateInfos, resetFields } = Form.useForm(
formData,
formRules,
);
const [BasicModal, modalApi] = useVbenModal({ const [BasicModal, modalApi] = useVbenModal({
class: 'w-[800px]',
fullscreenButton: false, fullscreenButton: false,
closeOnClickModal: false, closeOnClickModal: false,
onCancel: handleCancel, onClosed: handleCancel,
onConfirm: handleConfirm, onConfirm: handleConfirm,
onOpenChange: async (isOpen) => { onOpenChange: async (isOpen) => {
if (!isOpen) { if (!isOpen) {
@ -42,7 +89,9 @@ const [BasicModal, modalApi] = useVbenModal({
isUpdate.value = !!id; isUpdate.value = !!id;
if (isUpdate.value && id) { if (isUpdate.value && id) {
const record = await noticeInfo(id); const record = await noticeInfo(id);
await formApi.setValues(record); //
const filterRecord = pick(record, Object.keys(defaultValues));
formData.value = filterRecord;
} }
modalApi.modalLoading(false); modalApi.modalLoading(false);
}, },
@ -51,11 +100,9 @@ const [BasicModal, modalApi] = useVbenModal({
async function handleConfirm() { async function handleConfirm() {
try { try {
modalApi.modalLoading(true); modalApi.modalLoading(true);
const { valid } = await formApi.validate(); await validate();
if (!valid) { // 使cloneDeep
return; const data = cloneDeep(formData.value);
}
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? noticeUpdate(data) : noticeAdd(data)); await (isUpdate.value ? noticeUpdate(data) : noticeAdd(data));
emit('reload'); emit('reload');
await handleCancel(); await handleCancel();
@ -68,12 +115,41 @@ async function handleConfirm() {
async function handleCancel() { async function handleCancel() {
modalApi.close(); modalApi.close();
await formApi.resetForm(); formData.value = defaultValues;
resetFields();
} }
</script> </script>
<template> <template>
<BasicModal :title="title" class="w-[800px]"> <BasicModal :title="title">
<BasicForm /> <Form layout="vertical">
<FormItem label="公告标题" v-bind="validateInfos.noticeTitle">
<Input
:placeholder="$t('ui.formRules.required')"
v-model:value="formData.noticeTitle"
/>
</FormItem>
<div class="grid sm:grid-cols-1 lg:grid-cols-2">
<FormItem label="公告状态" v-bind="validateInfos.status">
<RadioGroup
button-style="solid"
option-type="button"
v-model:value="formData.status"
:options="getDictOptions(DictEnum.SYS_NOTICE_STATUS)"
/>
</FormItem>
<FormItem label="公告类型" v-bind="validateInfos.noticeType">
<RadioGroup
button-style="solid"
option-type="button"
v-model:value="formData.noticeType"
:options="getDictOptions(DictEnum.SYS_NOTICE_TYPE)"
/>
</FormItem>
</div>
<FormItem label="公告内容" v-bind="validateInfos.noticeContent">
<Tinymce v-model="formData.noticeContent" />
</FormItem>
</Form>
</BasicModal> </BasicModal>
</template> </template>

View File

@ -82,6 +82,7 @@ async function handleSave() {
...requestData.params, ...requestData.params,
parentMenuId: requestData.parentMenuId, parentMenuId: requestData.parentMenuId,
popupComponent: requestData.popupComponent, popupComponent: requestData.popupComponent,
formComponent: requestData.formComponent,
}; };
} }
// //

View File

@ -109,9 +109,12 @@ onMounted(async () => {
await formApi.setValues(info); await formApi.setValues(info);
// //
if (info.options) { if (info.options) {
const popupComponent = JSON.parse(info.options)?.popupComponent; const { popupComponent, formComponent } = JSON.parse(info.options);
if (popupComponent) { if (popupComponent) {
await formApi.setFieldValue('popupComponent', popupComponent); formApi.setFieldValue('popupComponent', popupComponent);
}
if (formComponent) {
formApi.setFieldValue('formComponent', formComponent);
} }
} }
await Promise.all([initTreeSelect(info.columns), initMenuSelect()]); await Promise.all([initTreeSelect(info.columns), initMenuSelect()]);

View File

@ -157,6 +157,21 @@ export const formSchema: FormSchemaGetter = () => [
fieldName: 'popupComponent', fieldName: 'popupComponent',
label: '弹窗组件类型', label: '弹窗组件类型',
}, },
{
component: 'RadioGroup',
componentProps: {
buttonStyle: 'solid',
options: [
{ label: 'useVbenForm', value: 'useForm' },
{ label: 'antd原生表单', value: 'native' },
],
optionType: 'button',
},
help: '自定义功能, 需要后端支持\n复杂(布局, 联动等)表单建议用antd原生表单',
defaultValue: 'useForm',
fieldName: 'formComponent',
label: '生成表单类型',
},
{ {
component: 'RadioGroup', component: 'RadioGroup',
componentProps: { componentProps: {