feat(table): Table operation columns support permission codes

zuihou
1 parent 8b2e0f66
Showing 2 changed files with 38 additions and 25 deletions
src/components/Table/src/components/TableAction.vue
src/components/Table/src/types/tableAction.ts
@@ -25,16 +25,17 @@
 </template>
 <script lang="ts">
   import { defineComponent, PropType, computed, toRaw } from 'vue';
-
   import { MoreOutlined } from '@ant-design/icons-vue';
+  import { Divider } from 'ant-design-vue';
+
   import Icon from '/@/components/Icon/index';
   import { ActionItem, TableActionType } from '/@/components/Table';
   import { PopConfirmButton } from '/@/components/Button';
-  import { Divider } from 'ant-design-vue';
   import { Dropdown } from '/@/components/Dropdown';
  
   import { useDesign } from '/@/hooks/web/useDesign';
   import { useTableContext } from '../hooks/useTableContext';
+  import { usePermission } from '/@/hooks/web/usePermission';
  
   import { propTypes } from '/@/utils/propTypes';
   import { ACTION_COLUMN_FLAG } from '../const';
@@ -61,33 +62,42 @@
         table = useTableContext();
       }
  
+      const { hasPermission } = usePermission();
       const getActions = computed(() => {
-        return (toRaw(props.actions) || []).map((action) => {
-          const { popConfirm } = action;
-          return {
-            type: 'link',
-            size: 'small',
-            ...action,
-            ...(popConfirm || {}),
-            onConfirm: popConfirm?.confirm,
-            onCancel: popConfirm?.cancel,
-            enable: !!popConfirm,
-          };
-        });
+        return (toRaw(props.actions) || [])
+          .filter((action) => {
+            return hasPermission(action.auth);
+          })
+          .map((action) => {
+            const { popConfirm } = action;
+            return {
+              type: 'link',
+              size: 'small',
+              ...action,
+              ...(popConfirm || {}),
+              onConfirm: popConfirm?.confirm,
+              onCancel: popConfirm?.cancel,
+              enable: !!popConfirm,
+            };
+          });
       });
  
       const getDropdownList = computed(() => {
-        return (toRaw(props.dropDownActions) || []).map((action, index) => {
-          const { label, popConfirm } = action;
-          return {
-            ...action,
-            ...popConfirm,
-            onConfirm: popConfirm?.confirm,
-            onCancel: popConfirm?.cancel,
-            text: label,
-            divider: index < props.dropDownActions.length - 1 ? props.divider : false,
-          };
-        });
+        return (toRaw(props.dropDownActions) || [])
+          .filter((action) => {
+            return hasPermission(action.auth);
+          })
+          .map((action, index) => {
+            const { label, popConfirm } = action;
+            return {
+              ...action,
+              ...popConfirm,
+              onConfirm: popConfirm?.confirm,
+              onCancel: popConfirm?.cancel,
+              text: label,
+              divider: index < props.dropDownActions.length - 1 ? props.divider : false,
+            };
+          });
       });
  
       const getAlign = computed(() => {
 import { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
+import { RoleEnum } from '/@/enums/roleEnum';
 export interface ActionItem extends ButtonProps {
   onClick?: Fn;
   label: string;
@@ -7,6 +8,8 @@ export interface ActionItem extends ButtonProps {
   popConfirm?: PopConfirm;
   disabled?: boolean;
   divider?: boolean;
+  // Permission code
+  auth?: RoleEnum | RoleEnum[] | string | string[];
 }
  
 export interface PopConfirm {