ci: 👷commit

packages/ui/src/components/grid/types.ts

@@ -42,6 +42,7 @@ export interface GridState {
   total?: number;
   filters?: VxeTableDefines.FilterCheckedParams[];
   sorts?: VxeTableDefines.SortCheckedParams[];
+  form?: Record<string, any>;
   [index: string]: any;
 }
 

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<PickerEmits>();
@@ -47,24 +47,18 @@
   const dialogVisible = ref(false);
   const selectRef = ref();
   const dialogRef = ref();
-  const formModel = ref<Record<string, any>>({});
+
   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
   });
 </script>

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<Record<string, any>>({});
+
+  watch(
+    () => props.model,
+    (model: any) => {
+      formModel.value = model || {};
+    },
+    {
+      immediate: true
+    }
+  );
+
+  return {
+    formModel
+  };
+}

packages/ui/src/components/picker/props.ts

@@ -21,6 +21,13 @@ export const pickerProps = {
     type: Array as PropType<PickerFields>
   },
 
+  /**
+   * 查询表单字段值
+   */
+  model: {
+    type: Object as PropType<Record<string, any>>
+  },
+
   /**
    * 表格数据加载器
    */
@@ -90,12 +97,6 @@ export const pickerProps = {
     type: Boolean
   },
 
-  /**
-   * 初始默认查询参数
-   */
-  defaultQuery: {
-    type: Function as PropType<() => any>
-  },
   /**
    *  弹窗组件配置参数
    */

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<Partial<DialogProps>>;
 
 export type PickerGridProps = UnReadOnly<Partial<GridProps>>;

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