This commit is contained in:
dap 2024-10-05 23:43:39 +08:00
commit 3f5e3ef46a
14 changed files with 70 additions and 33 deletions

View File

@ -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;
} }
/** 登录接口返回值 */ /** 登录接口返回值 */

View File

@ -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',

View File

@ -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;
} }
/** 登录接口返回值 */ /** 登录接口返回值 */

View File

@ -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',

View File

@ -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)) {

View File

@ -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)]':

View File

@ -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,

View File

@ -153,6 +153,10 @@ export interface FormCommonConfig {
* @default false * @default false
*/ */
disabledOnChangeListener?: boolean; disabledOnChangeListener?: boolean;
/**
* ,undefinednaive-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?: {

View File

@ -76,3 +76,7 @@
} }
} }
} }
.vxe-pager--wrapper {
@apply justify-center md:justify-end;
}

View File

@ -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-formformConfig // form vben-formformConfig
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>

View File

@ -1,6 +1,7 @@
import { acceptHMRUpdate, defineStore } from 'pinia'; import { acceptHMRUpdate, defineStore } from 'pinia';
interface BasicUserInfo { interface BasicUserInfo {
[key: string]: any;
/** /**
* *
*/ */

View File

@ -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';

View File

@ -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;
} }
/** 登录接口返回值 */ /** 登录接口返回值 */

View File

@ -92,7 +92,7 @@
"editCell": "单元格编辑", "editCell": "单元格编辑",
"editRow": "行编辑", "editRow": "行编辑",
"custom-cell": "自定义单元格", "custom-cell": "自定义单元格",
"form": "开启搜索表单" "form": "搜索表单"
}, },
"captcha": { "captcha": {
"title": "验证码", "title": "验证码",