chore: hide some table search item

buqiyuan · Feb 25, 2024 · 48ab779 · 48ab779
1 parent 3a358ce
commit 48ab779
Show file tree

Hide file tree

Showing 12 changed files with 71 additions and 122 deletions.
diff --git a/.env.development b/.env.development
@@ -1,7 +1,7 @@
 # 只在开发模式中被载入
 ENV = 'development'
 
-# 网站前缀
+# 公共基础路径, 所有资源的路径都将据此配置重写。
 VITE_BASE_URL = /
 
 # base api url

diff --git a/.env.production b/.env.production
@@ -5,7 +5,7 @@ ENV = 'production'
 VITE_BASE_API_URL = 'https://nest-api.buqiyuan.site'
 # VITE_BASE_API_URL = 'http://127.0.0.1:7001' 
 
-# 网站前缀
+# 公共基础路径, 所有资源的路径都将据此配置重写。
 VITE_BASE_URL = /vue3-antdv-admin/
 
 VITE_DROP_CONSOLE = true
diff --git a/src/components/basic/context-menu/src/ContextMenu.vue b/src/components/basic/context-menu/src/ContextMenu.vue
@@ -1,12 +1,10 @@
 <script lang="tsx">
-  import { defineComponent, nextTick, onMounted, computed, ref, unref, onUnmounted } from 'vue';
-  import { Menu, Divider } from 'ant-design-vue';
+  import { defineComponent, computed, ref, unref } from 'vue';
+  import { Menu, Dropdown } from 'ant-design-vue';
   import type { ContextMenuItem, ItemContentProps, Axis } from './typing';
   import type { FunctionalComponent, CSSProperties, PropType } from 'vue';
   import { IconFont } from '@/components/basic/icon';
 
-  const prefixCls = 'context-menu';
-
   const props = {
     width: { type: Number, default: 156 },
     customEvent: { type: Object as PropType<Event>, default: null },
@@ -45,9 +43,8 @@
   export default defineComponent({
     name: 'ContextMenu',
     props,
-    setup(props) {
-      const wrapRef = ref(null);
-      const showRef = ref(false);
+    setup(props, { expose }) {
+      const open = ref(true);
 
       const getStyle = computed((): CSSProperties => {
         const { axis, items, styles, width } = props;
@@ -59,33 +56,27 @@
         const left = body.clientWidth < x + menuWidth ? x - menuWidth : x;
         const top = body.clientHeight < y + menuHeight ? y - menuHeight : y;
         return {
-          ...styles,
           position: 'absolute',
           width: `${width}px`,
           left: `${left + 1}px`,
           top: `${top + 1}px`,
-          zIndex: 9999,
+          ...styles,
         };
       });
 
-      onMounted(() => {
-        nextTick(() => (showRef.value = true));
-      });
-
-      onUnmounted(() => {
-        const el = unref(wrapRef);
-        el && document.body.removeChild(el);
-      });
+      const close = () => {
+        open.value = false;
+      };
 
       function handleAction(item: ContextMenuItem, e: MouseEvent) {
         const { handler, disabled } = item;
         if (disabled) {
           return;
         }
-        showRef.value = false;
         e?.stopPropagation();
         e?.preventDefault();
         handler?.();
+        close();
       }
 
       function renderMenuItem(items: ContextMenuItem[]) {
@@ -102,17 +93,16 @@
           if (!children || children.length === 0) {
             return (
               <>
-                <Menu.Item disabled={disabled} class={`${prefixCls}__item`} key={label}>
+                <Menu.Item disabled={disabled} key={label}>
                   <ItemContent {...contentProps} />
                 </Menu.Item>
-                {divider ? <Divider key={`d-${label}`} /> : null}
+                {divider ? <Menu.Divider key={`d-${label}`} /> : null}
               </>
             );
           }
-          if (!unref(showRef)) return null;
 
           return (
-            <Menu.SubMenu key={label} disabled={disabled} popupClassName={`${prefixCls}__popup`}>
+            <Menu.SubMenu key={label} disabled={disabled}>
               {{
                 title: () => <ItemContent {...contentProps} />,
                 default: () => renderMenuItem(children),
@@ -121,90 +111,26 @@
           );
         });
       }
+
+      expose({
+        close,
+      });
+
       return () => {
-        if (!unref(showRef)) {
-          return null;
-        }
         const { items } = props;
         return (
-          <div class={prefixCls}>
-            <Menu inlineIndent={12} mode="vertical" ref={wrapRef} style={unref(getStyle)}>
-              {renderMenuItem(items)}
-            </Menu>
-          </div>
+          <Dropdown open={open.value}>
+            {{
+              default: () => <div style={unref(getStyle)}></div>,
+              overlay: () => (
+                <Menu inlineIndent={12} mode="vertical">
+                  {renderMenuItem(items)}
+                </Menu>
+              ),
+            }}
+          </Dropdown>
         );
       };
     },
   });
 </script>
-<style lang="less">
-  @default-height: 42px !important;
-
-  @small-height: 36px !important;
-
-  @large-height: 36px !important;
-
-  .item-style() {
-    li {
-      display: inline-block;
-      width: 100%;
-      height: @default-height;
-      margin: 0 !important;
-      line-height: @default-height;
-
-      span {
-        line-height: @default-height;
-      }
-
-      > div {
-        margin: 0 !important;
-      }
-
-      &:not(.ant-menu-item-disabled):hover {
-        background-color: rgb(0 0 0 / 4%);
-      }
-    }
-  }
-
-  .context-menu {
-    display: block;
-    position: fixed;
-    z-index: 200;
-    top: 0;
-    left: 0;
-    width: 156px;
-    margin: 0;
-    border: 1px solid rgb(0 0 0 / 8%);
-    border-radius: 0.25rem;
-    background-clip: padding-box;
-    background-color: var(--component-background);
-    box-shadow:
-      0 2px 2px 0 rgb(0 0 0 / 14%),
-      0 3px 1px -2px rgb(0 0 0 / 10%),
-      0 1px 5px 0 rgb(0 0 0 / 6%);
-    list-style: none;
-    user-select: none;
-
-    &__item {
-      margin: 0 !important;
-    }
-    .item-style();
-
-    .ant-divider {
-      margin: 0;
-    }
-
-    &__popup {
-      .ant-divider {
-        margin: 0;
-      }
-
-      .item-style();
-    }
-
-    .ant-menu-submenu-title,
-    .ant-menu-item {
-      padding: 0 !important;
-    }
-  }
-</style>
diff --git a/src/components/basic/context-menu/src/createContextMenu.ts b/src/components/basic/context-menu/src/createContextMenu.ts
@@ -23,7 +23,9 @@ export const createContextMenu = function (options: CreateContextOptions) {
     const body = document.body;
 
     const container = document.createElement('div');
-    const propsData: Partial<ContextMenuProps> = {};
+    const propsData: Partial<ContextMenuProps> = {
+      getPopupContainer: () => container,
+    };
     if (options.styles) {
       propsData.styles = options.styles;
     }
@@ -57,6 +59,7 @@ export const createContextMenu = function (options: CreateContextOptions) {
     };
 
     menuManager.resolve = function (arg) {
+      vm.component?.exposed?.close();
       remove();
       resolve(arg);
     };

diff --git a/src/components/basic/context-menu/src/typing.ts b/src/components/basic/context-menu/src/typing.ts
@@ -1,3 +1,5 @@
+import type { DropdownProps } from 'ant-design-vue/es/dropdown';
+
 export interface Axis {
   x: number;
   y: number;
@@ -19,7 +21,7 @@ export interface CreateContextOptions {
   items?: ContextMenuItem[];
 }
 
-export interface ContextMenuProps {
+export interface ContextMenuProps extends DropdownProps {
   event?: MouseEvent;
   styles?: any;
   items: ContextMenuItem[];

diff --git a/src/components/core/dynamic-table/src/hooks/useColumns.ts b/src/components/core/dynamic-table/src/hooks/useColumns.ts
@@ -2,7 +2,7 @@ import { ref, watchEffect, unref, useSlots, h } from 'vue';
 import { cloneDeep, isFunction, mergeWith } from 'lodash-es';
 import { Input } from 'ant-design-vue';
 import { EditableCell } from '../components';
-import { ColumnKeyFlag, type CustomRenderParams } from '../types/column';
+import { ColumnKeyFlag, columnKeyFlags, type CustomRenderParams } from '../types/column';
 import tableConfig from '../dynamic-table.config';
 import type { Slots } from 'vue';
 import type {
@@ -33,13 +33,13 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum
 
   watchEffect(() => {
     const innerProps = { ...unref(getProps) };
-    const ColumnKeyFlags = Object.keys(ColumnKeyFlag);
+
     const columns = cloneDeep(innerProps!.columns!.filter((n) => !n.hideInTable));
 
     // 是否添加序号列
     if (innerProps?.showIndex) {
       columns.unshift({
-        dataIndex: 'ACTION',
+        dataIndex: ColumnKeyFlag.INDEX,
         title: '序号',
         width: 60,
         align: 'center',
@@ -79,7 +79,7 @@ export const useColumns = ({ state, methods, props, tableAction }: UseTableColum
         const isShowEditable =
           (isEditableRow || isEditableCell) &&
           isCellEditable &&
-          !ColumnKeyFlags.includes(columnKey);
+          !columnKeyFlags.includes(columnKey);
 
         return isShowEditable
           ? h(

diff --git a/src/components/core/dynamic-table/src/hooks/useExportData2Excel.ts b/src/components/core/dynamic-table/src/hooks/useExportData2Excel.ts
@@ -1,4 +1,5 @@
 import { get, isEmpty } from 'lodash-es';
+import { columnKeyFlags } from '../types';
 import type { DynamicTableProps } from '../dynamic-table';
 import type { TableMethods, TableState } from './index';
 import { exportJson2Excel } from '@/utils/Export2Excel';
@@ -20,7 +21,10 @@ export const useExportData2Excel = ({ props, state, methods }: UseExportData2Exc
     const { getColumnKey } = methods;
     const { tableData } = state;
 
-    const theaders = columns.filter((n) => getColumnKey(n) && getColumnKey(n) !== 'INDEX');
+    const theaders = columns.filter((n) => {
+      const key = getColumnKey(n);
+      return key && !columnKeyFlags.includes(key);
+    });
 
     if (exportFormatter) {
       const { header, data } = exportFormatter(theaders, tableData.value);

diff --git a/src/components/core/dynamic-table/src/types/column.ts b/src/components/core/dynamic-table/src/types/column.ts
@@ -64,4 +64,6 @@ export enum ColumnKeyFlag {
   ACTION = 'ACTION',
   INDEX = 'INDEX',
 }
+
+export const columnKeyFlags = Object.values(ColumnKeyFlag) as string[];
 export type ColumnKeyFlagType = `${ColumnKeyFlag}`;
diff --git a/src/views/demos/tables/lol-table/index.vue b/src/views/demos/tables/lol-table/index.vue
@@ -10,7 +10,7 @@
         :data-request="getLolHeroList"
         :columns="columns"
         row-key="heroid"
-        export-file-name="表格自带导出"
+        export-file-name="英雄联盟"
         :custom-row="customRow"
       >
         <template #export-button> <a-button type="primary">表格自带导出</a-button> </template>
@@ -27,7 +27,7 @@
   import { useRouter } from 'vue-router';
   import { Alert, Card } from 'ant-design-vue';
   import { columns } from './columns';
-  import { useTable } from '@/components/core/dynamic-table';
+  import { columnKeyFlags, useTable } from '@/components/core/dynamic-table';
   import { getLolHeroList } from '@/api/demo/hero';
   import { useContextMenu } from '@/hooks/functions/useContextMenu';
   import { useExportExcelModal, jsonToSheetXlsx, aoaToSheetXlsx } from '@/components/basic/excel';
@@ -36,20 +36,19 @@
     name: 'DemosTablesLolTable',
   });
 
-  const [DynamicTable] = useTable();
+  const [DynamicTable, dynamicTableInstance] = useTable();
 
   const router = useRouter();
   const [createContextMenu] = useContextMenu();
 
   const exportExcelModal = useExportExcelModal();
-  const tableData: any[] = [];
 
   const aoaToExcel = () => {
-    const colFilters = columns.filter((n) => n.dataIndex !== 'INDEX');
+    const colFilters = columns.filter((n) => !columnKeyFlags.includes(n.dataIndex as string));
     const colFilterKeys = colFilters.map((n) => n.dataIndex);
     // 保证data顺序与header一致
     aoaToSheetXlsx({
-      data: tableData
+      data: dynamicTableInstance.tableData
         .map((item) => {
           return colFilterKeys.reduce<Recordable>((p, k: string) => {
             p[k] = Array.isArray(item[k]) ? item[k].toString() : item[k];
@@ -68,7 +67,7 @@
       onOk: ({ filename, bookType }) => {
         // 默认Object.keys(data[0])作为header
         jsonToSheetXlsx({
-          data: tableData,
+          data: dynamicTableInstance.tableData,
           filename,
           write2excelOpts: {
             bookType,

diff --git a/src/views/demos/tables/wzry-table/columns.tsx b/src/views/demos/tables/wzry-table/columns.tsx
@@ -4,7 +4,6 @@ import type { TableColumn } from '@/components/core/dynamic-table';
 export const columns: TableColumn[] = [
   {
     title: '头像',
-
     width: 100,
     hideInSearch: true,
     dataIndex: 'faceimg',
@@ -14,17 +13,14 @@ export const columns: TableColumn[] = [
   },
   {
     title: '英雄名称',
-
     dataIndex: 'cname',
   },
   {
     title: '英雄称号',
-
     dataIndex: 'title',
   },
   {
     title: '定位',
-
     dataIndex: 'occupation',
   },
   {
@@ -57,7 +53,6 @@ export const columns: TableColumn[] = [
   },
   {
     title: '操作',
-
     width: 120,
     dataIndex: 'ACTION',
     actions: ({ record }) => [