diff --git a/packages/ui/src/components/grid/types.ts b/packages/ui/src/components/grid/types.ts index b176c6caa..010cb56f8 100644 --- a/packages/ui/src/components/grid/types.ts +++ b/packages/ui/src/components/grid/types.ts @@ -42,6 +42,7 @@ export interface GridState { total?: number; filters?: VxeTableDefines.FilterCheckedParams[]; sorts?: VxeTableDefines.SortCheckedParams[]; + form?: Record; [index: string]: any; } diff --git a/packages/ui/src/components/picker/Picker.vue b/packages/ui/src/components/picker/Picker.vue index cf532da2c..176696c73 100644 --- a/packages/ui/src/components/picker/Picker.vue +++ b/packages/ui/src/components/picker/Picker.vue @@ -38,8 +38,8 @@ import { MoreFilled } from '@vtj/icons'; import Dialog from './Dialog.vue'; import { pickerProps } from './props'; - import type { PickerEmits, PickerLoader } from './types'; - import { useOptions, useGridColumns } from './hooks'; + import type { PickerEmits, PickerLoader, PickerState } from './types'; + import { useOptions, useGridColumns, useModel } from './hooks'; const props = defineProps(pickerProps); const emit = defineEmits(); @@ -47,24 +47,18 @@ const dialogVisible = ref(false); const selectRef = ref(); const dialogRef = ref(); - const formModel = ref>({}); + const { options, setOptions, current } = useOptions(props, emit); + const { formModel } = useModel(props); const columns = useGridColumns(props); const disabled = computed(() => { return dialogVisible.value ? true : !!props.disabled; }); - const setDefaultQuery = async () => { - if (props.defaultQuery) { - const query = await props.defaultQuery(); - Object.assign(formModel.value, query || {}); - } - }; - - const dataLoader: PickerLoader = (params: any) => { - params.form = formModel.value; + const dataLoader: PickerLoader = (params: PickerState) => { if (props.loader) { + params.form = formModel.value; return props.loader(params); } return { @@ -83,11 +77,10 @@ const onEnter = async (e: any) => { const inputValue = e.target.value; - focus(); - await setDefaultQuery(); if (props.queryKey) { formModel.value[props.queryKey] = inputValue; } + focus(); if (!props.multiple && props.preload) { const res = await dataLoader({}); // 有且只有一条数据,自动返回,不打开弹窗 @@ -100,12 +93,11 @@ dialogVisible.value = true; } }; - const onClick = async (e: any) => { + const onClick = (e: any) => { if (props.disabled) return; const tags = ['I', 'SVG', 'PATH']; if (tags.includes(e.target.nodeName.toUpperCase())) { blur(); - await setDefaultQuery(); dialogVisible.value = true; } }; @@ -131,6 +123,7 @@ setOptions, current, visible: dialogVisible, - dialogRef + dialogRef, + formModel }); diff --git a/packages/ui/src/components/picker/hooks.ts b/packages/ui/src/components/picker/hooks.ts index 79d38a5d1..e85e5c8a1 100644 --- a/packages/ui/src/components/picker/hooks.ts +++ b/packages/ui/src/components/picker/hooks.ts @@ -96,3 +96,21 @@ export function useGridColumns(props: PickerProps) { return presets.concat(columns); }); } + +export function useModel(props: PickerProps) { + const formModel = ref>({}); + + watch( + () => props.model, + (model: any) => { + formModel.value = model || {}; + }, + { + immediate: true + } + ); + + return { + formModel + }; +} diff --git a/packages/ui/src/components/picker/props.ts b/packages/ui/src/components/picker/props.ts index a7b4d28d5..93274b4c5 100644 --- a/packages/ui/src/components/picker/props.ts +++ b/packages/ui/src/components/picker/props.ts @@ -21,6 +21,13 @@ export const pickerProps = { type: Array as PropType }, + /** + * 查询表单字段值 + */ + model: { + type: Object as PropType> + }, + /** * 表格数据加载器 */ @@ -90,12 +97,6 @@ export const pickerProps = { type: Boolean }, - /** - * 初始默认查询参数 - */ - defaultQuery: { - type: Function as PropType<() => any> - }, /** * 弹窗组件配置参数 */ diff --git a/packages/ui/src/components/picker/types.ts b/packages/ui/src/components/picker/types.ts index 802a24bb9..2a359a8a3 100644 --- a/packages/ui/src/components/picker/types.ts +++ b/packages/ui/src/components/picker/types.ts @@ -4,7 +4,8 @@ import type { QueryFormItems, DialogProps, GridProps, - GridLoader + GridLoader, + GridState } from '../'; import { pickerProps } from './props'; @@ -14,6 +15,8 @@ export type PickerFields = QueryFormItems; export type PickerLoader = GridLoader; +export type PickerState = GridState; + export type PickerDialogProps = UnReadOnly>; export type PickerGridProps = UnReadOnly>; diff --git a/packages/ui/src/style/base.scss b/packages/ui/src/style/base.scss index 97b183cf7..3868499f6 100644 --- a/packages/ui/src/style/base.scss +++ b/packages/ui/src/style/base.scss @@ -31,6 +31,10 @@ body.is-resizing { margin-left: 5px; } +.el-loading-mask { + background-color: var(--el-mask-color-extra-light) !important; +} + // for common // // for tiny components