feat(table): 表格的数据列和操作列的字段可以根据权限和业务来控制是否显示

Author: zuihou

src/components/Table/src/components/TableAction.vue

@@ -37,6 +37,7 @@
   import { useTableContext } from '../hooks/useTableContext';
   import { usePermission } from '/@/hooks/web/usePermission';
 
+  import { isBoolean, isFunction } from '/@/utils/is';
   import { propTypes } from '/@/utils/propTypes';
   import { ACTION_COLUMN_FLAG } from '../const';
 
@@ -63,10 +64,24 @@
       }
 
       const { hasPermission } = usePermission();
+      function isIfShow(action: ActionItem): boolean {
+        const ifShow = action.ifShow;
+
+        let isIfShow = true;
+
+        if (isBoolean(ifShow)) {
+          isIfShow = ifShow;
+        }
+        if (isFunction(ifShow)) {
+          isIfShow = ifShow(action);
+        }
+        return isIfShow;
+      }
+
       const getActions = computed(() => {
         return (toRaw(props.actions) || [])
           .filter((action) => {
-            return hasPermission(action.auth);
+            return hasPermission(action.auth) && isIfShow(action);
           })
           .map((action) => {
             const { popConfirm } = action;
@@ -85,7 +100,7 @@
       const getDropdownList = computed(() => {
         return (toRaw(props.dropDownActions) || [])
           .filter((action) => {
-            return hasPermission(action.auth);
+            return hasPermission(action.auth) && isIfShow(action);
           })
           .map((action, index) => {
             const { label, popConfirm } = action;

src/components/Table/src/hooks/useColumns.ts

@@ -6,6 +6,7 @@ import { unref, Ref, computed, watch, ref, toRaw } from 'vue';
 
 import { renderEditCell } from '../components/editable';
 
+import { usePermission } from '/@/hooks/web/usePermission';
 import { useI18n } from '/@/hooks/web/useI18n';
 
 import { isBoolean, isArray, isString, isObject, isFunction } from '/@/utils/is';
@@ -133,31 +134,50 @@ export function useColumns(
     return cloneColumns;
   });
 
+  function isIfShow(column: BasicColumn): boolean {
+    const ifShow = column.ifShow;
+
+    let isIfShow = true;
+
+    if (isBoolean(ifShow)) {
+      isIfShow = ifShow;
+    }
+    if (isFunction(ifShow)) {
+      isIfShow = ifShow(column);
+    }
+    return isIfShow;
+  }
+  const { hasPermission } = usePermission();
+
   const getViewColumns = computed(() => {
     const viewColumns = sortFixedColumn(unref(getColumnsRef));
 
     const columns = cloneDeep(viewColumns);
-    columns.forEach((column) => {
-      const { slots, dataIndex, customRender, format, edit, editRow, flag } = column;
-
-      if (!slots || !slots?.title) {
-        column.slots = { title: `header-${dataIndex}`, ...(slots || {}) };
-        column.customTitle = column.title;
-        Reflect.deleteProperty(column, 'title');
-      }
-      const isDefaultAction = [INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG].includes(flag!);
-      if (!customRender && format && !edit && !isDefaultAction) {
-        column.customRender = ({ text, record, index }) => {
-          return formatCell(text, format, record, index);
-        };
-      }
+    return columns
+      .filter((column) => {
+        return hasPermission(column.auth) && isIfShow(column);
+      })
+      .map((column) => {
+        const { slots, dataIndex, customRender, format, edit, editRow, flag } = column;
+
+        if (!slots || !slots?.title) {
+          column.slots = { title: `header-${dataIndex}`, ...(slots || {}) };
+          column.customTitle = column.title;
+          Reflect.deleteProperty(column, 'title');
+        }
+        const isDefaultAction = [INDEX_COLUMN_FLAG, ACTION_COLUMN_FLAG].includes(flag!);
+        if (!customRender && format && !edit && !isDefaultAction) {
+          column.customRender = ({ text, record, index }) => {
+            return formatCell(text, format, record, index);
+          };
+        }
 
-      // edit table
-      if ((edit || editRow) && !isDefaultAction) {
-        column.customRender = renderEditCell(column);
-      }
-    });
-    return columns;
+        // edit table
+        if ((edit || editRow) && !isDefaultAction) {
+          column.customRender = renderEditCell(column);
+        }
+        return column;
+      });
   });
 
   watch(

src/components/Table/src/types/table.ts

@@ -8,6 +8,7 @@ import type {
 
 import { ComponentType } from './componentType';
 import { VueNode } from '/@/utils/propTypes';
+import { RoleEnum } from '/@/enums/roleEnum';
 
 export declare type SortOrder = 'ascend' | 'descend';
 
@@ -421,4 +422,8 @@ export interface BasicColumn extends ColumnProps {
   editRule?: boolean | ((text: string, record: Recordable) => Promise<string>);
   editValueMap?: (value: any) => string;
   onEditRow?: () => void;
+  // 权限编码控制是否显示
+  auth?: RoleEnum | RoleEnum[] | string | string[];
+  // 业务控制是否显示
+  ifShow?: boolean | ((column: BasicColumn) => boolean);
 }

src/components/Table/src/types/tableAction.ts

@@ -8,8 +8,10 @@ export interface ActionItem extends ButtonProps {
   popConfirm?: PopConfirm;
   disabled?: boolean;
   divider?: boolean;
-  // Permission code
+  // 权限编码控制是否显示
   auth?: RoleEnum | RoleEnum[] | string | string[];
+  // 业务控制是否显示
+  ifShow?: boolean | ((action: ActionItem) => boolean);
 }
 
 export interface PopConfirm {