yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat: 增加 useVbenForm 样式，去掉data.ts 中 字段class

pull/84/head
xingyu4j 2025-04-27 14:59:53 +08:00
parent 2a805f560f
commit 1c2da07ded
37 changed files with 168 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
apps/web-antd/src/views/system/area/modules/form.vue
View File

@ -10,6 +10,13 @@ import { $t } from '#/locales';
import { useFormSchema } from '../data';
const [Form, { setFieldValue, validate, getValues }] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

3
apps/web-antd/src/views/system/dept/data.ts
View File

@ -40,7 +40,6 @@ export function useFormSchema(): VbenFormSchema[] {
});
return handleTree(data);
},
class: 'w-full',
labelField: 'name',
valueField: 'id',
childrenField: 'children',
@ -64,7 +63,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 0,
class: 'w-full',
controlsPosition: 'right',
placeholder: '请输入显示顺序',
},
@ -76,7 +74,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: getSimpleUserList,
class: 'w-full',
labelField: 'nickname',
valueField: 'id',
placeholder: '请选择负责人',

7
apps/web-antd/src/views/system/dept/modules/form.vue
View File

@ -22,6 +22,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

2
apps/web-antd/src/views/system/dict/data.ts
View File

@ -239,7 +239,6 @@ export function useDataFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
placeholder: '请输入显示排序',
class: 'w-full',
},
rules: 'required',
},
@ -262,7 +261,6 @@ export function useDataFormSchema(): VbenFormSchema[] {
componentProps: {
options: colorOptions,
placeholder: '请选择颜色类型',
class: 'w-full',
},
},
{

7
apps/web-antd/src/views/system/dict/modules/data-form.vue
View File

@ -28,6 +28,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useDataFormSchema(),
showDefaultActions: false,

7
apps/web-antd/src/views/system/dict/modules/type-form.vue
View File

@ -26,6 +26,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useTypeFormSchema(),
showDefaultActions: false,

10
apps/web-antd/src/views/system/mail/account/modules/form.vue
View File

@ -26,12 +26,16 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 140,
},
});
const [Modal, modalApi] = useVbenModal({

1
apps/web-antd/src/views/system/mail/template/data.ts
View File

@ -47,7 +47,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: async () => await getSimpleMailAccountList(),
class: 'w-full',
labelField: 'mail',
valueField: 'id',
placeholder: '请选择邮箱账号',

7
apps/web-antd/src/views/system/mail/template/modules/form.vue
View File

@ -26,6 +26,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

7
apps/web-antd/src/views/system/mail/template/modules/send-form.vue
View File

@ -16,6 +16,13 @@ const emit = defineEmits(['success']);
const formData = ref<SystemMailTemplateApi.MailTemplate>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
showDefaultActions: false,
});

2
apps/web-antd/src/views/system/menu/data.ts
View File

@ -44,7 +44,6 @@ export function useFormSchema(): VbenFormSchema[] {
} as SystemMenuApi.Menu);
return handleTree(data);
},
class: 'w-full',
labelField: 'name',
valueField: 'id',
childrenField: 'children',
@ -203,7 +202,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 0,
class: 'w-full',
controlsPosition: 'right',
placeholder: '请输入显示顺序',
},

9
apps/web-antd/src/views/system/menu/modules/form.vue
View File

@ -22,6 +22,13 @@ const getTitle = computed(() =>
);
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 100,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
@ -75,7 +82,7 @@ const [Modal, modalApi] = useVbenModal({
</script>
<template>
<Modal :title="getTitle">
<Modal class="w-[40%]" :title="getTitle">
<Form class="mx-4" />
</Modal>
</template>

7
apps/web-antd/src/views/system/notice/modules/form.vue
View File

@ -22,6 +22,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

1
apps/web-antd/src/views/system/notify/template/data.ts
View File

@ -68,7 +68,6 @@ export function useFormSchema(): VbenFormSchema[] {
DICT_TYPE.SYSTEM_NOTIFY_TEMPLATE_TYPE,
'number',
),
class: 'w-full',
placeholder: '请选择模板类型',
},
rules: 'required',

7
apps/web-antd/src/views/system/notify/template/modules/form.vue
View File

@ -26,6 +26,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

10
apps/web-antd/src/views/system/notify/template/modules/send-form.vue
View File

@ -17,11 +17,15 @@ const emit = defineEmits(['success']);
const formData = ref<SystemNotifyTemplateApi.NotifyTemplate>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
showDefaultActions: false,
commonConfig: {
labelWidth: 120,
},
});
const [Modal, modalApi] = useVbenModal({

8
apps/web-antd/src/views/system/oauth2/client/data.ts
View File

@ -84,7 +84,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入访问令牌的有效期，单位：秒',
min: 0,
class: 'w-full',
controlsPosition: 'right',
},
rules: 'required',
@ -96,7 +95,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入刷新令牌的有效期，单位：秒',
min: 0,
class: 'w-full',
controlsPosition: 'right',
},
rules: 'required',
@ -109,7 +107,6 @@ export function useFormSchema(): VbenFormSchema[] {
options: getDictOptions(DICT_TYPE.SYSTEM_OAUTH2_GRANT_TYPE),
mode: 'multiple',
placeholder: '请输入授权类型',
class: 'w-full',
},
rules: 'required',
},
@ -120,7 +117,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入授权范围',
mode: 'tags',
class: 'w-full',
},
},
{
@ -130,7 +126,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入自动授权范围',
mode: 'multiple',
class: 'w-full',
// TODO @芋艿：根据权限，自动授权范围
},
},
@ -141,7 +136,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入可重定向的 URI 地址',
mode: 'tags',
class: 'w-full',
},
rules: 'required',
},
@ -152,7 +146,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
placeholder: '请输入权限',
mode: 'tags',
class: 'w-full',
},
},
{
@ -162,7 +155,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
mode: 'tags',
placeholder: '请输入资源',
class: 'w-full',
},
},
{

10
apps/web-antd/src/views/system/oauth2/client/modules/form.vue
View File

@ -26,12 +26,16 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 140,
},
});
const [Modal, modalApi] = useVbenModal({

2
apps/web-antd/src/views/system/role/data.ts
View File

@ -40,7 +40,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'InputNumber',
componentProps: {
min: 0,
class: 'w-full',
controlsPosition: 'right',
placeholder: '请输入显示顺序',
},
@ -97,7 +96,6 @@ export function useAssignDataPermissionFormSchema(): VbenFormSchema[] {
fieldName: 'dataScope',
label: '权限范围',
componentProps: {
class: 'w-full',
options: getDictOptions(DICT_TYPE.SYSTEM_DATA_SCOPE, 'number'),
},
},

7
apps/web-antd/src/views/system/role/modules/assign-menu-form.vue
View File

@ -25,6 +25,13 @@ const isExpanded = ref(false); // 展开状态
const expandedKeys = ref<number[]>([]); // 展开的节点
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useAssignMenuFormSchema(),
showDefaultActions: false,

5
apps/web-antd/src/views/system/role/modules/form.vue
View File

@ -22,6 +22,11 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

1
apps/web-antd/src/views/system/sms/channel/data.ts
View File

@ -37,7 +37,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, 'string'),
class: 'w-full',
placeholder: '请选择短信渠道',
},
rules: 'required',

10
apps/web-antd/src/views/system/sms/channel/modules/form.vue
View File

@ -26,12 +26,16 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 120,
},
});
const [Modal, modalApi] = useVbenModal({

2
apps/web-antd/src/views/system/sms/template/data.ts
View File

@ -29,7 +29,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE, 'number'),
class: 'w-full',
placeholder: '请选择短信类型',
},
rules: 'required',
@ -58,7 +57,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: async () => await getSimpleSmsChannelList(),
class: 'w-full',
labelField: 'signature',
valueField: 'id',
placeholder: '请选择短信渠道',

10
apps/web-antd/src/views/system/sms/template/modules/form.vue
View File

@ -26,12 +26,16 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
commonConfig: {
labelWidth: 140,
},
});
const [Modal, modalApi] = useVbenModal({

10
apps/web-antd/src/views/system/sms/template/modules/send-form.vue
View File

@ -16,11 +16,15 @@ const emit = defineEmits(['success']);
const formData = ref<SystemSmsTemplateApi.SmsTemplate>();
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
showDefaultActions: false,
commonConfig: {
labelWidth: 120,
},
});
const [Modal, modalApi] = useVbenModal({

1
apps/web-antd/src/views/system/social/client/data.ts
View File

@ -36,7 +36,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'Select',
componentProps: {
options: getDictOptions(DICT_TYPE.SYSTEM_SOCIAL_TYPE, 'number'),
class: 'w-full',
},
rules: 'required',
},

7
apps/web-antd/src/views/system/social/client/modules/form.vue
View File

@ -26,6 +26,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

25
apps/web-antd/src/views/system/tenant/data.ts
View File

@ -27,9 +27,6 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '租户名称',
component: 'Input',
componentProps: {
placeholder: '请输入租户名称',
},
rules: 'required',
},
{
@ -38,7 +35,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: () => getTenantPackageList(),
class: 'w-full',
labelField: 'name',
valueField: 'id',
placeholder: '请选择租户套餐',
@ -49,26 +45,18 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'contactName',
label: '联系人',
component: 'Input',
componentProps: {
placeholder: '请输入联系人',
},
rules: 'required',
},
{
fieldName: 'contactMobile',
label: '联系手机',
component: 'Input',
componentProps: {
placeholder: '请输入联系手机',
},
rules: 'mobile',
},
{
label: '用户名称',
fieldName: 'username',
component: 'Input',
componentProps: {
placeholder: '请输入用户名称',
},
rules: 'required',
dependencies: {
triggerFields: ['id'],
@ -79,9 +67,6 @@ export function useFormSchema(): VbenFormSchema[] {
label: '用户密码',
fieldName: 'password',
component: 'InputPassword',
componentProps: {
placeholder: '请输入用户密码',
},
rules: 'required',
dependencies: {
triggerFields: ['id'],
@ -92,10 +77,6 @@ export function useFormSchema(): VbenFormSchema[] {
label: '账号额度',
fieldName: 'accountCount',
component: 'InputNumber',
componentProps: {
class: 'w-full',
placeholder: '请输入账号额度',
},
rules: 'required',
},
{
@ -105,7 +86,6 @@ export function useFormSchema(): VbenFormSchema[] {
componentProps: {
format: 'YYYY-MM-DD',
valueFormat: 'x',
class: 'w-full',
placeholder: '请选择过期时间',
},
rules: 'required',
@ -114,9 +94,6 @@ export function useFormSchema(): VbenFormSchema[] {
label: '绑定域名',
fieldName: 'website',
component: 'Input',
componentProps: {
placeholder: '请输入绑定域名',
},
rules: 'required',
},
{

7
apps/web-antd/src/views/system/tenant/modules/form.vue
View File

@ -22,6 +22,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

6
apps/web-antd/src/views/system/tenantPackage/data.ts
View File

@ -26,9 +26,6 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'name',
label: '套餐名称',
component: 'Input',
componentProps: {
placeholder: '请输入套餐名称',
},
rules: 'required',
},
{
@ -52,9 +49,6 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
];
}

7
apps/web-antd/src/views/system/tenantPackage/modules/form.vue
View File

@ -34,6 +34,13 @@ const isExpanded = ref(false); // 展开状态
const expandedKeys = ref<number[]>([]); // 展开的节点
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

21
apps/web-antd/src/views/system/user/data.ts
View File

@ -29,18 +29,12 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'username',
label: '用户名称',
component: 'Input',
componentProps: {
placeholder: '请输入用户名称',
},
rules: 'required',
},
{
label: '用户密码',
fieldName: 'password',
component: 'InputPassword',
componentProps: {
placeholder: '请输入用户密码',
},
rules: 'required',
dependencies: {
triggerFields: ['id'],
@ -51,9 +45,6 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'nickname',
label: '用户昵称',
component: 'Input',
componentProps: {
placeholder: '请输入用户昵称',
},
rules: 'required',
},
{
@ -65,7 +56,6 @@ export function useFormSchema(): VbenFormSchema[] {
const data = await getDeptList();
return handleTree(data);
},
class: 'w-full',
labelField: 'name',
valueField: 'id',
childrenField: 'children',
@ -79,7 +69,6 @@ export function useFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: getSimplePostList,
class: 'w-full',
labelField: 'name',
valueField: 'id',
mode: 'multiple',
@ -90,18 +79,12 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'email',
label: '邮箱',
component: 'Input',
componentProps: {
placeholder: '请输入邮箱',
},
rules: z.string().email('邮箱格式不正确').optional(),
},
{
fieldName: 'mobile',
label: '手机号码',
component: 'Input',
componentProps: {
placeholder: '请输入手机号码',
},
},
{
fieldName: 'sex',
@ -129,9 +112,6 @@ export function useFormSchema(): VbenFormSchema[] {
fieldName: 'remark',
label: '备注',
component: 'Textarea',
componentProps: {
placeholder: '请输入备注',
},
},
];
}
@ -210,7 +190,6 @@ export function useAssignRoleFormSchema(): VbenFormSchema[] {
component: 'ApiSelect',
componentProps: {
api: getSimpleRoleList,
class: 'w-full',
labelField: 'name',
valueField: 'id',
mode: 'multiple',

7
apps/web-antd/src/views/system/user/modules/assign-role-form.vue
View File

@ -13,6 +13,13 @@ import { useAssignRoleFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useAssignRoleFormSchema(),
showDefaultActions: false,

7
apps/web-antd/src/views/system/user/modules/form.vue
View File

@ -22,6 +22,13 @@ const getTitle = computed(() => {
});
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,

7
apps/web-antd/src/views/system/user/modules/import-form.vue
View File

@ -15,6 +15,13 @@ import { useImportFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useImportFormSchema(),
showDefaultActions: false,

7
apps/web-antd/src/views/system/user/modules/reset-password-form.vue
View File

@ -13,6 +13,13 @@ import { useResetPasswordFormSchema } from '../data';
const emit = defineEmits(['success']);
const [Form, formApi] = useVbenForm({
commonConfig: {
componentProps: {
class: 'w-full',
},
formItemClass: 'col-span-2',
labelWidth: 80,
},
layout: 'horizontal',
schema: useResetPasswordFormSchema(),
showDefaultActions: false,