feat(page): 新增查询表格使用示例

babel.config.js

@@ -1,7 +1,6 @@
 module.exports = {
   presets: ['@vue/cli-plugin-babel/preset'],
   plugins: [
-    'lodash',
     [
       'import',
       {

package.json

@@ -22,13 +22,13 @@
     "test prod gzip": "npx http-server dist --cors --gzip -c-1"
   },
   "dependencies": {
-    "@vueuse/core": "^7.5.1",
+    "@vueuse/core": "^7.5.2",
     "ant-design-vue": "3.0.0-beta.4",
     "axios": "^0.24.0",
     "core-js": "^3.20.2",
     "dayjs": "^1.10.7",
     "file-saver": "^2.0.5",
-    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
     "mitt": "^3.0.0",
     "mockjs": "^1.1.0",
     "nprogress": "^1.0.0-1",
@@ -44,7 +44,7 @@
   "devDependencies": {
     "@commitlint/cli": "^16.0.1",
     "@commitlint/config-conventional": "^16.0.0",
-    "@types/lodash": "^4.14.178",
+    "@types/lodash-es": "^4.17.5",
     "@types/node": "^17.0.8",
     "@types/webpack-env": "^1.16.3",
     "@typescript-eslint/eslint-plugin": "^5.9.0",
@@ -58,7 +58,6 @@
     "@vue/compiler-sfc": "^3.2.26",
     "@vue/eslint-config-typescript": "^10.0.0",
     "babel-plugin-import": "^1.13.3",
-    "babel-plugin-lodash": "^3.3.4",
     "commitizen": "^4.2.4",
     "compression-webpack-plugin": "^9.2.0",
     "conventional-changelog-cli": "^2.2.2",
@@ -70,7 +69,6 @@
     "less": "^4.1.2",
     "less-loader": "10.2.0",
     "lint-staged": "^12.1.5",
-    "lodash-webpack-plugin": "^0.11.6",
     "path-browserify": "^1.0.1",
     "postcss-html": "^1.3.0",
     "prettier": "^2.5.1",

src/components/basic/check-box/index.vue

@@ -14,7 +14,7 @@
   import { computed } from 'vue';
   import { Checkbox } from 'ant-design-vue';
   import { checkboxProps } from 'ant-design-vue/lib/checkbox';
-  import { omit } from 'lodash';
+  import { omit } from 'lodash-es';
 
   const props = defineProps({
     ...checkboxProps(),

src/components/basic/image-preview/index.tsx

@@ -2,7 +2,7 @@ import { type PropType, defineComponent, ref, computed, watchEffect } from 'vue'
 import { Image, type ImageProps } from 'ant-design-vue';
 import { imageProps } from 'ant-design-vue/lib/image';
 import { type ImagePreviewType } from 'ant-design-vue/lib/vc-image/src/Image';
-import { omit } from 'lodash';
+import { omit } from 'lodash-es';
 
 interface PreviewType extends ImagePreviewType {
   src?: string; // V4.10.0

src/components/basic/split-panel/index.vue

@@ -15,7 +15,7 @@
 <script setup lang="ts">
   import { ref } from 'vue';
 
-  import { throttle } from 'lodash';
+  import { throttle } from 'lodash-es';
 
   const scalable = ref<HTMLDivElement>();
 

src/components/core/dynamic-table/components/table-settings/column-setting.vue

@@ -77,7 +77,7 @@
     DragOutlined,
   } from '@ant-design/icons-vue';
   import { useTableContext } from '../../hooks/useTableContext';
-  import { cloneDeep } from 'lodash';
+  import { cloneDeep } from 'lodash-es';
   import Checkbox from '@/components/basic/check-box/index.vue';
   import type { TableColumn } from '../../typing';
   import { useSortable } from '@/hooks/useSortable';

src/components/core/dynamic-table/dynamic-table.vue

@@ -84,7 +84,7 @@
   import { usePagination, createTableContext, useExportData2Excel } from './hooks/';
   import type { TableColumn, OnChangeCallbackParams } from './typing';
   import { isBoolean, isObject } from '@/utils/is';
-  import { omit } from 'lodash';
+  import { omit } from 'lodash-es';
   import { TableAction, QueryForm, ToolBar } from './components';
   import dynamicTableProps, { TableProps } from './props';
   import { type SchemaFormRef } from '@/components/core/schema-form';

src/components/core/dynamic-table/hooks/useExportData2Excel.ts

@@ -1,4 +1,4 @@
-import { isEmpty } from 'lodash';
+import { isEmpty } from 'lodash-es';
 import { export_json_to_excel } from '@/utils/Export2Excel';
 import { type DynamicTableInstance } from '../typing';
 import { type ComponentInternalInstance } from 'vue';

src/components/core/schema-form/hooks/useFormContext.ts

@@ -0,0 +1,12 @@
+import type { FormActionType } from '../types/form';
+import { provide, inject, type ComponentInternalInstance } from 'vue';
+
+const key = Symbol('schema-form');
+
+export function createFormContext(instance: ComponentInternalInstance) {
+  provide(key, instance.proxy);
+}
+
+export function useFormContext() {
+  return inject(key) as FormActionType;
+}

src/components/core/schema-form/schema-form-item.vue

@@ -14,18 +14,23 @@
         :is="getComponent"
         :ref="setItemRef"
         :key="schemaItem.field"
+        :allowClear="true"
         v-bind="getComponentProps"
         v-on="componentEvents"
         v-model:[modelValueType]="modelValue[schemaItem.field]"
-      />
+      >
+        <template v-if="Object.is(schemaItem.loading, true)" #notFoundContent>
+          <Spin size="small" />
+        </template>
+      </component>
     </Form.Item>
   </Col>
 </template>
 
 <script setup lang="tsx">
   import { PropType, Ref } from 'vue';
   import { computed, unref, toRefs, onMounted } from 'vue';
-  import { Form, Col } from 'ant-design-vue';
+  import { Form, Col, Spin } from 'ant-design-vue';
   import type { ValidationRule } from 'ant-design-vue/lib/form/Form';
   import { componentMap, ComponentMapType } from './componentMap';
   import { FormItemSchema, FormSchema } from './types/form';
@@ -36,6 +41,7 @@
   import { createPlaceholderMessage } from './helper';
   import BasicHelp from '@/components/basic/basic-help/index.vue';
   import { AllComponentProps } from './types';
+  import { useFormContext } from './hooks/useFormContext';
 
   const props = defineProps({
     formModel: {
@@ -64,6 +70,8 @@
   const emit = defineEmits(['update:formModel']);
 
   // const currentInstance = getCurrentInstance();
+  // schemaForm组件实例
+  const schemaFormRef = useFormContext();
 
   const modelValue = useVModel(props, 'formModel', emit);
 
@@ -118,7 +126,11 @@
     const { componentProps = {}, component, label = '' } = schemaItem;
 
     if (isFunction(componentProps)) {
-      const compProps = componentProps({ formModel, schemaItem }) as AllComponentProps;
+      const compProps = componentProps({
+        formModel,
+        schemaFormRef,
+        schemaItem,
+      }) as AllComponentProps;
 
       compProps.placeholder ??= isString(component)
         ? createPlaceholderMessage(component, label)
@@ -175,7 +187,7 @@
     const { schemaItem, formModel } = props;
     let { componentProps = {} } = schemaItem;
     if (isFunction(componentProps)) {
-      componentProps = componentProps({ schemaItem, formModel }) ?? {};
+      componentProps = componentProps({ schemaItem, schemaFormRef, formModel }) ?? {};
     }
     return componentProps as Recordable;
   });
@@ -290,12 +302,17 @@
   onMounted(async () => {
     if (getComponentProps.value?.request) {
       const compProps = getComponentProps.value;
-      const compName = props.schemaItem.component;
-      if (['Select', 'RadioGroup', 'CheckBoxGroup'].some((n) => n === compName)) {
-        compProps.options = await getComponentProps.value?.request();
-        console.log('compProps.options', compProps.options);
-      } else if (['TreeSelect', 'Tree'].some((n) => n === compName)) {
-        compProps.treeData = await getComponentProps.value?.request();
+      const compName = schemaItem.value.component;
+      schemaItem.value.loading = true;
+      try {
+        if (['Select', 'RadioGroup', 'CheckBoxGroup'].some((n) => n === compName)) {
+          compProps.options = await getComponentProps.value?.request();
+          console.log('compProps.options', compProps.options);
+        } else if (['TreeSelect', 'Tree'].some((n) => n === compName)) {
+          compProps.treeData = await getComponentProps.value?.request();
+        }
+      } finally {
+        schemaItem.value.loading = false;
       }
     }
   });

src/components/core/schema-form/schema-form.vue

@@ -26,16 +26,27 @@
 </template>
 
 <script lang="ts">
-  import { reactive, ref, PropType, unref, defineComponent, computed, watchEffect } from 'vue';
+  import {
+    reactive,
+    ref,
+    PropType,
+    unref,
+    defineComponent,
+    computed,
+    watchEffect,
+    getCurrentInstance,
+  } from 'vue';
   import { Form, Row } from 'ant-design-vue';
   import { formProps } from 'ant-design-vue/lib/form';
-  import { isNullOrUnDef, isObject, isArray, isFunction } from '@/utils/is';
+  import { isNullOrUnDef, isObject, isArray, isFunction, isBoolean } from '@/utils/is';
+  import { deepMerge } from '@/utils/';
   import SchemaFormItem from './schema-form-item.vue';
   import type { FormItemSchema, FormSchema, FormActionType } from './types/form';
   import { NamePath } from 'ant-design-vue/lib/form/interface';
-  import { merge, uniqBy, cloneDeep, isBoolean } from 'lodash';
+  import { uniqBy, cloneDeep } from 'lodash-es';
   import { dateItemType, handleInputNumberValue } from './helper';
   import dayjs from 'dayjs';
+  import { createFormContext } from './hooks/useFormContext';
 
   export default defineComponent({
     name: 'SchemaForm',
@@ -55,6 +66,8 @@
     },
     emits: ['submit', 'reset'],
     setup(props, { attrs, emit }) {
+      // provide schemaForm instance
+      createFormContext(getCurrentInstance()!);
       let oldFormSchema: FormSchema;
       // TODO 将formSchema克隆一份，避免修改原有的formSchema
       // TODO 类型为FormSchema 提示：类型实例化过深，且可能无限
@@ -84,7 +97,7 @@
       watchEffect(() => {
         if (Object.is(props.formSchema, oldFormSchema)) {
           // console.log('相同');
-          merge(formSchemaRef.value, cloneDeep(props.formSchema));
+          deepMerge(formSchemaRef.value, cloneDeep(props.formSchema));
         } else {
           // console.log('不相同');
           formSchemaRef.value = cloneDeep(props.formSchema);
@@ -244,7 +257,7 @@
         updateData.forEach((item) => {
           unref(formSchemaRef).schemas.forEach((val) => {
             if (val.field === item.field) {
-              const newSchema = merge(val, item);
+              const newSchema = deepMerge(val, item);
               schema.push(newSchema);
             } else {
               schema.push(val);

src/components/core/schema-form/types/form.ts

@@ -117,7 +117,7 @@ export interface FormSchema extends FormProps {
 }
 /** 表单项 */
 export interface FormItemSchema<T = string> {
-  // Field name
+  /** 字段名 */
   field: T extends string ? string : keyof T;
   // Event name triggered by internal value change, default change
   changeEvent?: string;
@@ -140,12 +140,15 @@ export interface FormItemSchema<T = string> {
   disabledLabelWidth?: boolean;
   // render component
   component: ComponentMapType | Component;
-  // Component parameters
+  // 组件参数
   componentProps?:
     | ComponentProps
     | ((opt: {
+        /** 当前表单项 */
         schemaItem: FormItemSchema;
-        formActionType?: FormActionType;
+        /** 动态表单实例 */
+        schemaFormRef: FormActionType;
+        /** 当前表单数据模型 */
         formModel: Recordable;
       }) => ComponentProps);
 
@@ -164,6 +167,8 @@ export interface FormItemSchema<T = string> {
   rules?: Rule[];
   // Check whether the information is added to the label
   rulesMessageJoinLabel?: boolean;
+  /** 组件加载状态 */
+  loading?: boolean;
 
   // Reference formModelItem
   formItemProps?: Partial<FormItemProps>;
@@ -177,9 +182,9 @@ export interface FormItemSchema<T = string> {
 
   // Matching details components
   span?: number;
-
+  /** 作用同v-show */
   vShow?: boolean | ((renderCallbackParams: RenderCallbackParams<T>) => boolean);
-
+  /** 作用同v-if */
   vIf?: boolean | ((renderCallbackParams: RenderCallbackParams<T>) => boolean);
 
   // Render the content in the form-item tag

src/core/socket/socket-io.ts

@@ -1,4 +1,4 @@
-import { isEmpty, isFunction } from 'lodash';
+import { isEmpty, isFunction } from 'lodash-es';
 import IO from 'socket.io-client';
 import type { Socket } from 'socket.io-client';
 import { useUserStore } from '@/store/modules/user';

src/hooks/useDomWidth.ts

@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted } from 'vue';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 
 /**
  * description: 获取页面宽度

src/hooks/useModal/modal.tsx

@@ -3,7 +3,7 @@ import { defineComponent, reactive, watchEffect, watch, ref } from 'vue';
 import type { HookModalProps } from './types';
 import { isFunction } from '@/utils/is';
 import { ConfigProvider } from 'ant-design-vue';
-import { omit } from 'lodash';
+import { omit } from 'lodash-es';
 import { useLocale } from '@/locales/useLocale';
 
 export const MyModal = defineComponent({

src/locales/lang/en-US/routes/demo.ts

@@ -9,6 +9,7 @@ export default {
   },
   table: {
     demo: 'Table Demo',
+    searchTable: 'Search Table',
     wzry: 'Honor of Kings',
     lol: 'League of Legends',
   },

src/locales/lang/zh-CN/routes/demo.ts

@@ -9,6 +9,7 @@ export default {
   },
   table: {
     demo: '表格演示',
+    searchTable: '查询表格',
     wzry: '王者荣耀',
     lol: '英雄联盟',
   },

src/router/asyncModules/test.ts

@@ -7,6 +7,7 @@ export default {
   'views/shared/demos/icons/Iconfont.vue': getAsyncPage(`${prefix}icons/Iconfont.vue`), // 自定义图标
   [`views/${prefix}tables/lol-table/index.vue`]: getAsyncPage(`${prefix}tables/lol-table`), // lol
   [`views/${prefix}tables/wzry-table/index.vue`]: getAsyncPage(`${prefix}tables/wzry-table`), // wzry
+  [`views/${prefix}tables/search-table/index.vue`]: getAsyncPage(`${prefix}tables/search-table`), // search-table
   'views/shared/demos/button.vue': getAsyncPage(`${prefix}button.vue`), // 自定义按钮
   'views/shared/demos/custom-modal.vue': getAsyncPage(`${prefix}custom-modal.vue`), // 自定义模态框
 };

src/router/staticModules/demos.ts

@@ -86,6 +86,19 @@ const routes: Array<RouteRecordRaw> = [
         redirect: { name: `${moduleName}-table-wzry` },
         component: RouterView,
         children: [
+          {
+            path: 'search-table',
+            name: `${moduleName}-query-form`,
+            meta: {
+              title: t('routes.demo.table.searchTable'),
+              icon: 'icon-zhuomian',
+              keepAlive: false,
+            },
+            component: () =>
+              import(
+                /* webpackChunkName: "search-table" */ '@/views/demos/tables/search-table/index.vue'
+              ),
+          },
           {
             path: 'wzry',
             name: `${moduleName}-table-wzry`,

src/utils/index.ts

@@ -1,4 +1,5 @@
 import { type App } from 'vue';
+import { isObject } from './is';
 
 /**
  *
@@ -21,6 +22,14 @@ export function formatSizeUnits(bytes, decimals = 2) {
   return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
 }
 
+export function deepMerge<T = any>(src: any = {}, target: any = {}): T {
+  let key: string;
+  for (key in target) {
+    src[key] = isObject(src[key]) ? deepMerge(src[key], target[key]) : (src[key] = target[key]);
+  }
+  return src;
+}
+
 export const withInstall = <T>(component: T, alias?: string) => {
   const comp = component as any;
   comp.install = (app: App) => {