From 1b5e25846133b88a78becca3747bfb55a765b8b1 Mon Sep 17 00:00:00 2001
From: bqy_fe <1743369777@qq.com>
Date: Wed, 5 Jan 2022 17:11:48 +0800
Subject: [PATCH] =?UTF-8?q?feat(page):=20=E6=96=B0=E5=A2=9E=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=E8=A1=A8=E6=A0=BC=E4=BD=BF=E7=94=A8=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 babel.config.js                               |   1 -
 package.json                                  |   8 +-
 src/components/basic/check-box/index.vue      |   2 +-
 src/components/basic/image-preview/index.tsx  |   2 +-
 src/components/basic/split-panel/index.vue    |   2 +-
 .../table-settings/column-setting.vue         |   2 +-
 .../core/dynamic-table/dynamic-table.vue      |   2 +-
 .../hooks/useExportData2Excel.ts              |   2 +-
 .../core/schema-form/hooks/useFormContext.ts  |  12 ++
 .../core/schema-form/schema-form-item.vue     |  37 +++--
 .../core/schema-form/schema-form.vue          |  23 +++-
 src/components/core/schema-form/types/form.ts |  15 ++-
 src/core/socket/socket-io.ts                  |   2 +-
 src/hooks/useDomWidth.ts                      |   2 +-
 src/hooks/useModal/modal.tsx                  |   2 +-
 src/locales/lang/en-US/routes/demo.ts         |   1 +
 src/locales/lang/zh-CN/routes/demo.ts         |   1 +
 src/router/asyncModules/test.ts               |   1 +
 src/router/staticModules/demos.ts             |  13 ++
 src/utils/index.ts                            |   9 ++
 .../demos/tables/search-table/columns.tsx     | 127 ++++++++++++++++++
 src/views/demos/tables/search-table/index.vue |  59 ++++++++
 .../components/multiple-cascader/index.vue    |   2 +-
 src/views/system/permission/menu/index.vue    |   2 +-
 vue.config.js                                 |   4 -
 yarn.lock                                     |  60 +++------
 26 files changed, 314 insertions(+), 79 deletions(-)
 create mode 100644 src/components/core/schema-form/hooks/useFormContext.ts
 create mode 100644 src/views/demos/tables/search-table/columns.tsx
 create mode 100644 src/views/demos/tables/search-table/index.vue

diff --git a/babel.config.js b/babel.config.js
index bc26531b8..05b626959 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,7 +1,6 @@
 module.exports = {
   presets: ['@vue/cli-plugin-babel/preset'],
   plugins: [
-    'lodash',
     [
       'import',
       {
diff --git a/package.json b/package.json
index 02a181d6b..613523561 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/basic/check-box/index.vue b/src/components/basic/check-box/index.vue
index 18f259a7b..b2fce1452 100644
--- a/src/components/basic/check-box/index.vue
+++ b/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(),
diff --git a/src/components/basic/image-preview/index.tsx b/src/components/basic/image-preview/index.tsx
index fa87626c3..6a1d6d1c3 100644
--- a/src/components/basic/image-preview/index.tsx
+++ b/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
diff --git a/src/components/basic/split-panel/index.vue b/src/components/basic/split-panel/index.vue
index 507907c16..872be8a5a 100644
--- a/src/components/basic/split-panel/index.vue
+++ b/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>();
 
diff --git a/src/components/core/dynamic-table/components/table-settings/column-setting.vue b/src/components/core/dynamic-table/components/table-settings/column-setting.vue
index b3947699b..60292723c 100644
--- a/src/components/core/dynamic-table/components/table-settings/column-setting.vue
+++ b/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';
diff --git a/src/components/core/dynamic-table/dynamic-table.vue b/src/components/core/dynamic-table/dynamic-table.vue
index 759556eb3..1343ec65b 100644
--- a/src/components/core/dynamic-table/dynamic-table.vue
+++ b/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';
diff --git a/src/components/core/dynamic-table/hooks/useExportData2Excel.ts b/src/components/core/dynamic-table/hooks/useExportData2Excel.ts
index c0426c40b..36108f2e9 100644
--- a/src/components/core/dynamic-table/hooks/useExportData2Excel.ts
+++ b/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';
diff --git a/src/components/core/schema-form/hooks/useFormContext.ts b/src/components/core/schema-form/hooks/useFormContext.ts
new file mode 100644
index 000000000..e2a301b91
--- /dev/null
+++ b/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;
+}
diff --git a/src/components/core/schema-form/schema-form-item.vue b/src/components/core/schema-form/schema-form-item.vue
index 52b3f4c1c..0d88fdfd2 100644
--- a/src/components/core/schema-form/schema-form-item.vue
+++ b/src/components/core/schema-form/schema-form-item.vue
@@ -14,10 +14,15 @@
         :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>
@@ -25,7 +30,7 @@
 <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;
       }
     }
   });
diff --git a/src/components/core/schema-form/schema-form.vue b/src/components/core/schema-form/schema-form.vue
index 76aac7e43..d740003fe 100644
--- a/src/components/core/schema-form/schema-form.vue
+++ b/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);
diff --git a/src/components/core/schema-form/types/form.ts b/src/components/core/schema-form/types/form.ts
index 522ebd198..c26d8863c 100644
--- a/src/components/core/schema-form/types/form.ts
+++ b/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
diff --git a/src/core/socket/socket-io.ts b/src/core/socket/socket-io.ts
index 8d51d384a..a53abf3c6 100644
--- a/src/core/socket/socket-io.ts
+++ b/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';
diff --git a/src/hooks/useDomWidth.ts b/src/hooks/useDomWidth.ts
index eadd7de94..1a0bc5a98 100644
--- a/src/hooks/useDomWidth.ts
+++ b/src/hooks/useDomWidth.ts
@@ -1,5 +1,5 @@
 import { ref, onMounted, onUnmounted } from 'vue';
-import { debounce } from 'lodash';
+import { debounce } from 'lodash-es';
 
 /**
  * description: 获取页面宽度
diff --git a/src/hooks/useModal/modal.tsx b/src/hooks/useModal/modal.tsx
index fab265e15..2d43919d2 100644
--- a/src/hooks/useModal/modal.tsx
+++ b/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({
diff --git a/src/locales/lang/en-US/routes/demo.ts b/src/locales/lang/en-US/routes/demo.ts
index ee32b1dff..154a8f736 100644
--- a/src/locales/lang/en-US/routes/demo.ts
+++ b/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',
   },
diff --git a/src/locales/lang/zh-CN/routes/demo.ts b/src/locales/lang/zh-CN/routes/demo.ts
index dff404928..19cb8422f 100644
--- a/src/locales/lang/zh-CN/routes/demo.ts
+++ b/src/locales/lang/zh-CN/routes/demo.ts
@@ -9,6 +9,7 @@ export default {
   },
   table: {
     demo: '表格演示',
+    searchTable: '查询表格',
     wzry: '王者荣耀',
     lol: '英雄联盟',
   },
diff --git a/src/router/asyncModules/test.ts b/src/router/asyncModules/test.ts
index dd73ad07b..ced9000ac 100644
--- a/src/router/asyncModules/test.ts
+++ b/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`), // 自定义模态框
 };
diff --git a/src/router/staticModules/demos.ts b/src/router/staticModules/demos.ts
index a54260fb3..4951f171c 100644
--- a/src/router/staticModules/demos.ts
+++ b/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`,
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 6a8ccc676..b91930e73 100644
--- a/src/utils/index.ts
+++ b/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) => {
diff --git a/src/views/demos/tables/search-table/columns.tsx b/src/views/demos/tables/search-table/columns.tsx
new file mode 100644
index 000000000..2a17f83ac
--- /dev/null
+++ b/src/views/demos/tables/search-table/columns.tsx
@@ -0,0 +1,127 @@
+import type { TableColumn } from '@/components/core/dynamic-table';
+import { Tag } from 'ant-design-vue';
+
+const names = ['王路飞', '王大蛇', '李白', '刺客伍六七'];
+const clothes = ['西装', '领带', '裙子', '包包'];
+export const tableData = Array.from({ length: 30 }).map((_, i) => ({
+  id: i + 1,
+  date: new Date().toLocaleString(),
+  name: names[~~(Math.random() * 4)],
+  clothes: clothes[~~(Math.random() * 4)],
+  gender: ~~(Math.random() * 2),
+  status: ~~(Math.random() * 2),
+}));
+
+const getClothesByGender = (gender: number) => {
+  if (gender === 1) {
+    // 男
+    return [
+      {
+        label: '西装',
+        value: 1,
+      },
+      {
+        label: '领带',
+        value: 0,
+      },
+    ];
+  } else if (gender === 0) {
+    //女
+    return [
+      {
+        label: '裙子',
+        value: 1,
+      },
+      {
+        label: '包包',
+        value: 0,
+      },
+    ];
+  }
+  return [];
+};
+
+// 数据项类型
+export type ListItemType = typeof tableData[number];
+// 使用TableColumn<ListItemType> 将会限制dataIndex的类型，但换来的是dataIndex有类型提示
+export const columns: TableColumn<ListItemType>[] = [
+  {
+    title: '姓名',
+    align: 'center',
+    dataIndex: 'name',
+    formItemProps: {
+      required: true,
+    },
+  },
+  {
+    title: '性别',
+    align: 'center',
+    dataIndex: 'gender',
+    formItemProps: {
+      component: 'Select',
+      componentProps: ({ schemaFormRef, formModel }) => ({
+        options: [
+          {
+            label: '男',
+            value: 1,
+          },
+          {
+            label: '女',
+            value: 0,
+          },
+        ],
+        onChange() {
+          // 根据当前选择的性别，更新衣服可选项
+          schemaFormRef.updateSchema({
+            field: 'clothes',
+            componentProps: {
+              options: getClothesByGender(formModel.gender),
+            },
+          });
+          formModel['clothes'] = undefined;
+        },
+      }),
+    },
+    bodyCell: ({ record }) => <>{['女', '男'][record.gender]}</>,
+  },
+  {
+    title: '衣服',
+    align: 'center',
+    dataIndex: 'clothes',
+    formItemProps: {
+      component: 'Select',
+    },
+  },
+  {
+    title: '状态',
+    align: 'center',
+    dataIndex: 'status',
+    formItemProps: {
+      component: 'Select',
+      componentProps: {
+        request: () => {
+          return new Promise((resolve) => {
+            setTimeout(() => {
+              const data = [
+                {
+                  label: '已售罄',
+                  value: 0,
+                },
+                {
+                  label: '热卖中',
+                  value: 1,
+                },
+              ];
+              resolve(data);
+            }, 1500);
+          });
+        },
+      },
+    },
+    bodyCell: ({ record }) => (
+      <Tag color={record.status == 1 ? 'red' : 'default'}>
+        {['已售罄', '热卖中'][record.status]}
+      </Tag>
+    ),
+  },
+];
diff --git a/src/views/demos/tables/search-table/index.vue b/src/views/demos/tables/search-table/index.vue
new file mode 100644
index 000000000..0aaea9f06
--- /dev/null
+++ b/src/views/demos/tables/search-table/index.vue
@@ -0,0 +1,59 @@
+<template>
+  <div>
+    <Alert message="查询表格" type="info" show-icon>
+      <template #description> 查询表格-查询表单使用示例 </template>
+    </Alert>
+    <Card title="查询表单基本使用示例" style="margin-top: 20px">
+      <dynamic-table
+        ref="dynamicTableRef"
+        size="small"
+        bordered
+        :data-request="loadData"
+        :columns="columns"
+        rowKey="heroid"
+        @toggle-advanced="toggleAdvanced"
+      />
+    </Card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { Alert, Card } from 'ant-design-vue';
+  import { DynamicTable, type DynamicTableInstance } from '@/components/core/dynamic-table';
+  import { columns, tableData } from './columns';
+  import { ref } from 'vue';
+
+  const dynamicTableRef = ref<DynamicTableInstance>();
+
+  // 展开搜索表单时更新英雄皮肤选项值
+  const toggleAdvanced = (e) => {
+    if (e) {
+      dynamicTableRef.value?.getQueryFormRef().updateSchema([
+        {
+          field: 'skin_name',
+          componentProps: {
+            options: [
+              {
+                label: '皮肤1',
+                value: 'aa',
+              },
+              {
+                label: '皮肤2',
+                value: 'bb',
+              },
+            ],
+          },
+        },
+      ]);
+    }
+  };
+
+  const loadData = async (params) => {
+    return {
+      list: tableData,
+      ...params,
+    };
+  };
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/system/permission/menu/components/multiple-cascader/index.vue b/src/views/system/permission/menu/components/multiple-cascader/index.vue
index 27a25ae2c..2a50c438b 100644
--- a/src/views/system/permission/menu/components/multiple-cascader/index.vue
+++ b/src/views/system/permission/menu/components/multiple-cascader/index.vue
@@ -22,7 +22,7 @@
   import NodePanel from './node-panel.vue';
   import { useVModel } from '@vueuse/core';
   import { CloseCircleOutlined } from '@ant-design/icons-vue';
-  // import { cloneDeep } from 'lodash';
+  // import { cloneDeep } from 'lodash-es';
   import { updateNodeCheckStatus, CascaderOptionType, Key } from './utils';
 
   type TagItem = {
diff --git a/src/views/system/permission/menu/index.vue b/src/views/system/permission/menu/index.vue
index 93849f465..b3ff64271 100644
--- a/src/views/system/permission/menu/index.vue
+++ b/src/views/system/permission/menu/index.vue
@@ -36,7 +36,7 @@
   import { baseColumns, type TableListItem, type TableColumnItem } from './columns';
   import { menuSchemas } from './formSchemas';
   import { formatMenu2Tree } from '@/core/permission/utils';
-  import { cloneDeep } from 'lodash';
+  import { cloneDeep } from 'lodash-es';
 
   const menuTree = ref<TreeSelectProps['treeData']>([]);
   const dynamicTableRef = ref<InstanceType<typeof DynamicTable>>();
diff --git a/vue.config.js b/vue.config.js
index 9caef5904..6a4ce9e73 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,10 +1,8 @@
 const { defineConfig } = require('@vue/cli-service');
-const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 // const CompressionPlugin = require('compression-webpack-plugin');
 // 去除console
 const TerserPlugin = require('terser-webpack-plugin');
-// const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
 const path = require('path');
 const resolve = (dir) => path.join(__dirname, dir); // 路径
 
@@ -99,8 +97,6 @@ module.exports = defineConfig({
         symbolId: 'icon-[name]',
       });
     config.when(IS_PROD, (config) => {
-      // loadsh
-      config.plugin('loadshReplace').use(new LodashModuleReplacementPlugin());
       // gzipped
       // config.plugin('CompressionPlugin').use(
       //   new CompressionPlugin({
diff --git a/yarn.lock b/yarn.lock
index 3f18ec216..36b690bbf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -184,7 +184,7 @@
   dependencies:
     "@babel/types" "^7.16.0"
 
-"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.0.0-beta.49", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
+"@babel/helper-module-imports@^7.0.0", "@babel/helper-module-imports@^7.12.13", "@babel/helper-module-imports@^7.16.0":
   version "7.16.0"
   resolved "https://registry.npmmirror.com/@babel/helper-module-imports/download/@babel/helper-module-imports-7.16.0.tgz#90538e60b672ecf1b448f5f4f5433d37e79a3ec3"
   integrity sha1-kFOOYLZy7PG0SPX09UM9N+eaPsM=
@@ -950,7 +950,7 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.16.0", "@babel/types@^7.4.4":
+"@babel/types@^7.0.0", "@babel/types@^7.16.0", "@babel/types@^7.4.4":
   version "7.16.0"
   resolved "https://registry.npmmirror.com/@babel/types/download/@babel/types-7.16.0.tgz#db3b313804f96aadd0b776c4823e127ad67289ba"
   integrity sha1-2zsxOAT5aq3Qt3bEgj4SetZyibo=
@@ -1401,7 +1401,14 @@
   resolved "https://registry.npmmirror.com/@types/json-schema/download/@types/json-schema-7.0.9.tgz?cache=0&sync_timestamp=1637265456183&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Fjson-schema%2Fdownload%2F%40types%2Fjson-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha1-l+3JA36gw4WFMgsolk3eOznkZg0=
 
-"@types/lodash@^4.14.165", "@types/lodash@^4.14.178":
+"@types/lodash-es@^4.17.5":
+  version "4.17.5"
+  resolved "https://registry.npmmirror.com/@types/lodash-es/download/@types/lodash-es-4.17.5.tgz?cache=0&sync_timestamp=1637268491938&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2F%40types%2Flodash-es%2Fdownload%2F%40types%2Flodash-es-4.17.5.tgz#1c3fdd16849d84aea43890b1c60da379fb501353"
+  integrity sha1-HD/dFoSdhK6kOJCxxg2jeftQE1M=
+  dependencies:
+    "@types/lodash" "*"
+
+"@types/lodash@*", "@types/lodash@^4.14.165":
   version "4.14.178"
   resolved "https://registry.npmmirror.com/@types/lodash/download/@types/lodash-4.14.178.tgz#341f6d2247db528d4a13ddbb374bcdc80406f4f8"
   integrity sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==
@@ -2060,18 +2067,18 @@
   resolved "https://registry.npm.taobao.org/@vue/web-component-wrapper/download/@vue/web-component-wrapper-1.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fweb-component-wrapper%2Fdownload%2F%40vue%2Fweb-component-wrapper-1.3.0.tgz#b6b40a7625429d2bd7c2281ddba601ed05dc7f1a"
   integrity sha1-trQKdiVCnSvXwigd26YB7QXcfxo=
 
-"@vueuse/core@^7.5.1":
-  version "7.5.1"
-  resolved "https://registry.npmmirror.com/@vueuse/core/download/@vueuse/core-7.5.1.tgz#3038a0ca6e16f6885d2457778260712180422526"
-  integrity sha512-GczfdTWqH483zkUHdDYiLm0Tn51OtsQXYc+eBKKIeolh0mgn682KbSYmkrjNytaF7qGc74YxMDAYjkPBW6V2Pg==
+"@vueuse/core@^7.5.2":
+  version "7.5.2"
+  resolved "https://registry.npmmirror.com/@vueuse/core/download/@vueuse/core-7.5.2.tgz#96a46ebc1e64e14a0c0e265eceed2c4e7e5f4d9e"
+  integrity sha512-Y9bdJ7pTP6sckO2qbyfqm2fCsADCWwVck5ABimlnhMkuOZ2qq99ee6ABpc8EFCA2fdYf8DbedTNvJ2u7g+7Z7A==
   dependencies:
-    "@vueuse/shared" "7.5.1"
+    "@vueuse/shared" "7.5.2"
     vue-demi "*"
 
-"@vueuse/shared@7.5.1":
-  version "7.5.1"
-  resolved "https://registry.npmmirror.com/@vueuse/shared/download/@vueuse/shared-7.5.1.tgz#d88a8d8a4799c30e7dd4f965808e78b3793c3da6"
-  integrity sha512-zMQEuYJyTmr5Hj2rYgSbb4H/cSI8mdaa9dUuw20j6rPV+xLV11y7vCyIkxo31uODDr0p77FMlProKzNDiK9rAA==
+"@vueuse/shared@7.5.2":
+  version "7.5.2"
+  resolved "https://registry.npmmirror.com/@vueuse/shared/download/@vueuse/shared-7.5.2.tgz#eec2e8f3d4202cd53a06e75be5005fd2b4465214"
+  integrity sha512-sq006pazeTU2EcjEIitCkaN3MpUaTk39/WKDowxqBA6y8HwvclETIJsKJdpbL88tc+w2WmbcurWps4AJm5R77A==
   dependencies:
     vue-demi "*"
 
@@ -2588,17 +2595,6 @@ babel-plugin-import@^1.13.3:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/runtime" "^7.0.0"
 
-babel-plugin-lodash@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.npm.taobao.org/babel-plugin-lodash/download/babel-plugin-lodash-3.3.4.tgz#4f6844358a1340baed182adbeffa8df9967bc196"
-  integrity sha1-T2hENYoTQLrtGCrb7/qN+ZZ7wZY=
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0-beta.49"
-    "@babel/types" "^7.0.0-beta.49"
-    glob "^7.1.1"
-    lodash "^4.17.10"
-    require-package-name "^2.0.1"
-
 babel-plugin-polyfill-corejs2@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmmirror.com/babel-plugin-polyfill-corejs2/download/babel-plugin-polyfill-corejs2-0.3.0.tgz?cache=0&sync_timestamp=1636800035591&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fbabel-plugin-polyfill-corejs2%2Fdownload%2Fbabel-plugin-polyfill-corejs2-0.3.0.tgz#407082d0d355ba565af24126fb6cb8e9115251fd"
@@ -4916,7 +4912,7 @@ glob@7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.1.1, glob@^7.1.3, glob@^7.1.6:
+glob@^7.1.3, glob@^7.1.6:
   version "7.2.0"
   resolved "https://registry.npmmirror.com/glob/download/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
   integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
@@ -6003,18 +5999,11 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.15:
+lodash-es@^4.17.15, lodash-es@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npm.taobao.org/lodash-es/download/lodash-es-4.17.21.tgz?cache=0&sync_timestamp=1613835893273&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Flodash-es%2Fdownload%2Flodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha1-Q+YmxG5lkbd1C+srUBFzkMYJ4+4=
 
-lodash-webpack-plugin@^0.11.6:
-  version "0.11.6"
-  resolved "https://registry.npm.taobao.org/lodash-webpack-plugin/download/lodash-webpack-plugin-0.11.6.tgz#8204c6b78beb62ce5211217dfe783c21557ecd33"
-  integrity sha1-ggTGt4vrYs5SESF9/ng8IVV+zTM=
-  dependencies:
-    lodash "^4.17.20"
-
 lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.npm.taobao.org/lodash.debounce/download/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
@@ -6065,7 +6054,7 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.npm.taobao.org/lodash.uniq/download/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.17.10, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
+lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npmmirror.com/lodash/download/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -7713,11 +7702,6 @@ require-from-string@^2.0.2:
   resolved "https://registry.npm.taobao.org/require-from-string/download/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha1-iaf92TgmEmcxjq/hT5wy5ZjDaQk=
 
-require-package-name@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npm.taobao.org/require-package-name/download/require-package-name-2.0.1.tgz#c11e97276b65b8e2923f75dabf5fb2ef0c3841b9"
-  integrity sha1-wR6XJ2tluOKSP3Xav1+y7ww4Qbk=
-
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npm.taobao.org/requires-port/download/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"