Merge branch 'main' of https://github.com/vbenjs/vue-vben-admin
This commit is contained in:
commit
3f5e3ef46a
@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
|
|||||||
export namespace AuthApi {
|
export namespace AuthApi {
|
||||||
/** 登录接口参数 */
|
/** 登录接口参数 */
|
||||||
export interface LoginParams {
|
export interface LoginParams {
|
||||||
password: string;
|
password?: string;
|
||||||
username: string;
|
username?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 登录接口返回值 */
|
/** 登录接口返回值 */
|
||||||
|
@ -84,7 +84,10 @@ setupVbenForm<FormComponentType>({
|
|||||||
Upload: NUpload,
|
Upload: NUpload,
|
||||||
},
|
},
|
||||||
config: {
|
config: {
|
||||||
|
// naive-ui组件不接受onChang事件,所以需要禁用
|
||||||
disabledOnChangeListener: true,
|
disabledOnChangeListener: true,
|
||||||
|
// naive-ui组件的空值为null,不能是undefined,否则重置表单时不生效
|
||||||
|
emptyStateValue: null,
|
||||||
baseModelPropName: 'value',
|
baseModelPropName: 'value',
|
||||||
modelPropNameMap: {
|
modelPropNameMap: {
|
||||||
Checkbox: 'checked',
|
Checkbox: 'checked',
|
||||||
|
@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
|
|||||||
export namespace AuthApi {
|
export namespace AuthApi {
|
||||||
/** 登录接口参数 */
|
/** 登录接口参数 */
|
||||||
export interface LoginParams {
|
export interface LoginParams {
|
||||||
password: string;
|
password?: string;
|
||||||
username: string;
|
username?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 登录接口返回值 */
|
/** 登录接口返回值 */
|
||||||
|
@ -30,12 +30,12 @@ const submitButtonOptions = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const isQueryForm = computed(() => {
|
// const isQueryForm = computed(() => {
|
||||||
return !!unref(rootProps).showCollapseButton;
|
// return !!unref(rootProps).showCollapseButton;
|
||||||
});
|
// });
|
||||||
|
|
||||||
const queryFormStyle = computed(() => {
|
const queryFormStyle = computed(() => {
|
||||||
if (isQueryForm.value) {
|
if (!unref(rootProps).actionWrapperClass) {
|
||||||
return {
|
return {
|
||||||
'grid-column': `-2 / -1`,
|
'grid-column': `-2 / -1`,
|
||||||
marginLeft: 'auto',
|
marginLeft: 'auto',
|
||||||
|
@ -45,8 +45,13 @@ export function setupVbenForm<
|
|||||||
>(options: VbenFormAdapterOptions<T>) {
|
>(options: VbenFormAdapterOptions<T>) {
|
||||||
const { components, config, defineRules } = options;
|
const { components, config, defineRules } = options;
|
||||||
|
|
||||||
DEFAULT_FORM_COMMON_CONFIG.disabledOnChangeListener =
|
const { disabledOnChangeListener = false, emptyStateValue = undefined } =
|
||||||
config?.disabledOnChangeListener ?? false;
|
(config || {}) as FormCommonConfig;
|
||||||
|
|
||||||
|
Object.assign(DEFAULT_FORM_COMMON_CONFIG, {
|
||||||
|
disabledOnChangeListener,
|
||||||
|
emptyStateValue,
|
||||||
|
});
|
||||||
|
|
||||||
if (defineRules) {
|
if (defineRules) {
|
||||||
for (const key of Object.keys(defineRules)) {
|
for (const key of Object.keys(defineRules)) {
|
||||||
|
@ -33,6 +33,7 @@ const {
|
|||||||
description,
|
description,
|
||||||
disabled,
|
disabled,
|
||||||
disabledOnChangeListener,
|
disabledOnChangeListener,
|
||||||
|
emptyStateValue,
|
||||||
fieldName,
|
fieldName,
|
||||||
formFieldProps,
|
formFieldProps,
|
||||||
label,
|
label,
|
||||||
@ -55,7 +56,7 @@ const formApi = formRenderProps.form;
|
|||||||
|
|
||||||
const isInValid = computed(() => errors.value?.length > 0);
|
const isInValid = computed(() => errors.value?.length > 0);
|
||||||
|
|
||||||
const fieldComponent = computed(() => {
|
const FieldComponent = computed(() => {
|
||||||
const finalComponent = isString(component)
|
const finalComponent = isString(component)
|
||||||
? componentMap.value[component]
|
? componentMap.value[component]
|
||||||
: component;
|
: component;
|
||||||
@ -213,7 +214,7 @@ function fieldBindEvent(slotProps: Record<string, any>) {
|
|||||||
if (bindEventField) {
|
if (bindEventField) {
|
||||||
return {
|
return {
|
||||||
[`onUpdate:${bindEventField}`]: handler,
|
[`onUpdate:${bindEventField}`]: handler,
|
||||||
[bindEventField]: value,
|
[bindEventField]: value === undefined ? emptyStateValue : value,
|
||||||
onChange: disabledOnChangeListener
|
onChange: disabledOnChangeListener
|
||||||
? undefined
|
? undefined
|
||||||
: (e: Record<string, any>) => {
|
: (e: Record<string, any>) => {
|
||||||
@ -300,7 +301,7 @@ function autofocus() {
|
|||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
<component
|
<component
|
||||||
:is="fieldComponent"
|
:is="FieldComponent"
|
||||||
ref="fieldComponentRef"
|
ref="fieldComponentRef"
|
||||||
:class="{
|
:class="{
|
||||||
'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
|
'border-destructive focus:border-destructive hover:border-destructive/80 focus:shadow-[0_0_0_2px_rgba(255,38,5,0.06)]':
|
||||||
|
@ -87,6 +87,7 @@ const computedSchema = computed(
|
|||||||
controlClass = '',
|
controlClass = '',
|
||||||
disabled,
|
disabled,
|
||||||
disabledOnChangeListener = false,
|
disabledOnChangeListener = false,
|
||||||
|
emptyStateValue = undefined,
|
||||||
formFieldProps = {},
|
formFieldProps = {},
|
||||||
formItemClass = '',
|
formItemClass = '',
|
||||||
hideLabel = false,
|
hideLabel = false,
|
||||||
@ -107,6 +108,7 @@ const computedSchema = computed(
|
|||||||
return {
|
return {
|
||||||
disabled,
|
disabled,
|
||||||
disabledOnChangeListener,
|
disabledOnChangeListener,
|
||||||
|
emptyStateValue,
|
||||||
hideLabel,
|
hideLabel,
|
||||||
hideRequiredMark,
|
hideRequiredMark,
|
||||||
labelWidth,
|
labelWidth,
|
||||||
|
@ -153,6 +153,10 @@ export interface FormCommonConfig {
|
|||||||
* @default false
|
* @default false
|
||||||
*/
|
*/
|
||||||
disabledOnChangeListener?: boolean;
|
disabledOnChangeListener?: boolean;
|
||||||
|
/**
|
||||||
|
* 所有表单项的空状态值,默认都是undefined,naive-ui的空状态值是null
|
||||||
|
*/
|
||||||
|
emptyStateValue?: null | undefined;
|
||||||
/**
|
/**
|
||||||
* 所有表单项的控件样式
|
* 所有表单项的控件样式
|
||||||
* @default {}
|
* @default {}
|
||||||
@ -341,6 +345,7 @@ export interface VbenFormAdapterOptions<
|
|||||||
config?: {
|
config?: {
|
||||||
baseModelPropName?: string;
|
baseModelPropName?: string;
|
||||||
disabledOnChangeListener?: boolean;
|
disabledOnChangeListener?: boolean;
|
||||||
|
emptyStateValue?: null | undefined;
|
||||||
modelPropNameMap?: Partial<Record<T, string>>;
|
modelPropNameMap?: Partial<Record<T, string>>;
|
||||||
};
|
};
|
||||||
defineRules?: {
|
defineRules?: {
|
||||||
|
@ -76,3 +76,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.vxe-pager--wrapper {
|
||||||
|
@apply justify-center md:justify-end;
|
||||||
|
}
|
||||||
|
@ -19,6 +19,7 @@ import {
|
|||||||
import { usePriorityValues } from '@vben/hooks';
|
import { usePriorityValues } from '@vben/hooks';
|
||||||
import { EmptyIcon } from '@vben/icons';
|
import { EmptyIcon } from '@vben/icons';
|
||||||
import { $t } from '@vben/locales';
|
import { $t } from '@vben/locales';
|
||||||
|
import { usePreferences } from '@vben/preferences';
|
||||||
import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
|
import { cloneDeep, cn, mergeWithArrayOverride } from '@vben/utils';
|
||||||
import { VbenLoading } from '@vben-core/shadcn-ui';
|
import { VbenLoading } from '@vben-core/shadcn-ui';
|
||||||
|
|
||||||
@ -48,6 +49,8 @@ const {
|
|||||||
formOptions,
|
formOptions,
|
||||||
} = usePriorityValues(props, state);
|
} = usePriorityValues(props, state);
|
||||||
|
|
||||||
|
const { isMobile } = usePreferences();
|
||||||
|
|
||||||
const slots = useSlots();
|
const slots = useSlots();
|
||||||
|
|
||||||
const [Form, formApi] = useTableForm({});
|
const [Form, formApi] = useTableForm({});
|
||||||
@ -60,6 +63,8 @@ const options = computed(() => {
|
|||||||
const slotActions = slots['toolbar-actions']?.();
|
const slotActions = slots['toolbar-actions']?.();
|
||||||
const slotTools = slots['toolbar-tools']?.();
|
const slotTools = slots['toolbar-tools']?.();
|
||||||
|
|
||||||
|
const globalGridConfig = VxeUI?.getConfig()?.grid ?? {};
|
||||||
|
|
||||||
const forceUseToolbarOptions = showToolbar.value
|
const forceUseToolbarOptions = showToolbar.value
|
||||||
? {
|
? {
|
||||||
toolbarConfig: {
|
toolbarConfig: {
|
||||||
@ -76,6 +81,7 @@ const options = computed(() => {
|
|||||||
{},
|
{},
|
||||||
forceUseToolbarOptions,
|
forceUseToolbarOptions,
|
||||||
toRaw(gridOptions.value),
|
toRaw(gridOptions.value),
|
||||||
|
globalGridConfig,
|
||||||
),
|
),
|
||||||
);
|
);
|
||||||
|
|
||||||
@ -91,6 +97,20 @@ const options = computed(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (mergedOptions.pagerConfig) {
|
if (mergedOptions.pagerConfig) {
|
||||||
|
const mobileLayouts = [
|
||||||
|
'PrevJump',
|
||||||
|
'PrevPage',
|
||||||
|
'Number',
|
||||||
|
'NextPage',
|
||||||
|
'NextJump',
|
||||||
|
] as any;
|
||||||
|
const layouts = [
|
||||||
|
'Total',
|
||||||
|
'Sizes',
|
||||||
|
'Home',
|
||||||
|
...mobileLayouts,
|
||||||
|
'End',
|
||||||
|
] as readonly string[];
|
||||||
mergedOptions.pagerConfig = mergeWithArrayOverride(
|
mergedOptions.pagerConfig = mergeWithArrayOverride(
|
||||||
{},
|
{},
|
||||||
mergedOptions.pagerConfig,
|
mergedOptions.pagerConfig,
|
||||||
@ -99,18 +119,7 @@ const options = computed(() => {
|
|||||||
background: true,
|
background: true,
|
||||||
pageSizes: [10, 20, 30, 50, 100, 200],
|
pageSizes: [10, 20, 30, 50, 100, 200],
|
||||||
className: 'mt-2 w-full',
|
className: 'mt-2 w-full',
|
||||||
layouts: [
|
layouts: isMobile.value ? mobileLayouts : layouts,
|
||||||
'Total',
|
|
||||||
'Sizes',
|
|
||||||
'Home',
|
|
||||||
'PrevJump',
|
|
||||||
'PrevPage',
|
|
||||||
'Number',
|
|
||||||
'NextPage',
|
|
||||||
'NextJump',
|
|
||||||
'End',
|
|
||||||
// 'FullJump',
|
|
||||||
] as any[],
|
|
||||||
size: 'mini' as const,
|
size: 'mini' as const,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
@ -138,7 +147,6 @@ const vbenFormOptions = computed(() => {
|
|||||||
const formValues = formApi.form.values;
|
const formValues = formApi.form.values;
|
||||||
props.api.reload(formValues);
|
props.api.reload(formValues);
|
||||||
},
|
},
|
||||||
collapseTriggerResize: true,
|
|
||||||
commonConfig: {
|
commonConfig: {
|
||||||
componentProps: {
|
componentProps: {
|
||||||
class: 'w-full',
|
class: 'w-full',
|
||||||
@ -150,8 +158,15 @@ const vbenFormOptions = computed(() => {
|
|||||||
},
|
},
|
||||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
|
||||||
};
|
};
|
||||||
|
const finalFormOptions: VbenFormProps = mergeWithArrayOverride(
|
||||||
|
{},
|
||||||
|
formOptions.value,
|
||||||
|
defaultFormProps,
|
||||||
|
);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
...mergeWithArrayOverride({}, formOptions.value, defaultFormProps),
|
...finalFormOptions,
|
||||||
|
collapseTriggerResize: !!finalFormOptions.showCollapseButton,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
@ -193,8 +208,8 @@ async function init() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// form 由 vben-form代替,所以不适配formConfig,这里给出警告
|
// form 由 vben-form代替,所以不适配formConfig,这里给出警告
|
||||||
const formConfig = defaultGridOptions.formConfig;
|
const formConfig = gridOptions.value?.formConfig;
|
||||||
if (formConfig?.enabled) {
|
if (formConfig) {
|
||||||
console.warn(
|
console.warn(
|
||||||
'[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
|
'[Vben Vxe Table]: The formConfig in the grid is not supported, please use the `formOptions` props',
|
||||||
);
|
);
|
||||||
@ -244,7 +259,7 @@ onMounted(() => {
|
|||||||
</Form>
|
</Form>
|
||||||
</slot>
|
</slot>
|
||||||
<div
|
<div
|
||||||
class="bg-background-deep z-100 absolute -left-2 bottom-2 h-4 w-[calc(100%+1rem)] overflow-hidden"
|
class="bg-background-deep z-100 absolute -left-2 bottom-1 h-2 w-[calc(100%+1rem)] overflow-hidden md:bottom-2 md:h-3"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { acceptHMRUpdate, defineStore } from 'pinia';
|
import { acceptHMRUpdate, defineStore } from 'pinia';
|
||||||
|
|
||||||
interface BasicUserInfo {
|
interface BasicUserInfo {
|
||||||
|
[key: string]: any;
|
||||||
/**
|
/**
|
||||||
* 头像
|
* 头像
|
||||||
*/
|
*/
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
export * from './helpers';
|
export * from './helpers';
|
||||||
|
export * from '@vben-core/shared/cache';
|
||||||
export * from '@vben-core/shared/color';
|
export * from '@vben-core/shared/color';
|
||||||
export * from '@vben-core/shared/utils';
|
export * from '@vben-core/shared/utils';
|
||||||
|
@ -3,8 +3,8 @@ import { baseRequestClient, requestClient } from '#/api/request';
|
|||||||
export namespace AuthApi {
|
export namespace AuthApi {
|
||||||
/** 登录接口参数 */
|
/** 登录接口参数 */
|
||||||
export interface LoginParams {
|
export interface LoginParams {
|
||||||
password: string;
|
password?: string;
|
||||||
username: string;
|
username?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 登录接口返回值 */
|
/** 登录接口返回值 */
|
||||||
|
@ -92,7 +92,7 @@
|
|||||||
"editCell": "单元格编辑",
|
"editCell": "单元格编辑",
|
||||||
"editRow": "行编辑",
|
"editRow": "行编辑",
|
||||||
"custom-cell": "自定义单元格",
|
"custom-cell": "自定义单元格",
|
||||||
"form": "开启搜索表单"
|
"form": "搜索表单"
|
||||||
},
|
},
|
||||||
"captcha": {
|
"captcha": {
|
||||||
"title": "验证码",
|
"title": "验证码",
|
||||||
|
Loading…
Reference in New Issue
Block a user