fix Bug or add example

src/components/Table/README.md

@@ -43,7 +43,11 @@ const columns = [
     },
     {
       title: '地址',
-      key: 'address'
+      key: 'address',
+      auth: ['amdin'], // 同时根据权限控制是否显示
+      ifShow: (row) => {
+        return true; // 根据业务控制是否显示
+      },
     },
     {
       title: '日期',

src/components/Table/index.ts

@@ -1 +1,5 @@
 export { default as BasicTable } from './src/Table.vue';
+export { default as TableAction } from './src/components/TableAction.vue';
+export * from './src/types/table';
+export * from './src/types/tableAction';
+

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="tableAction">
+    <div class="flex items-center justify-center">
+      <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
+        <n-button v-bind="action" class="mx-2">{{ action.label }}</n-button>
+      </template>
+      <n-dropdown
+          v-if="dropDownActions && getDropdownList.length"
+          trigger="hover"
+          :options="getDropdownList"
+          @select="select"
+      >
+        <slot name="more"></slot>
+        <n-button v-bind="getMoreProps" class="mx-2" v-if="!$slots.more" icon-placement="right">
+
+          <div class="flex items-center">
+            <span>更多</span>
+            <n-icon size="14" class="ml-1">
+              <DownOutlined/>
+            </n-icon>
+          </div>
+          <!--          <template #icon>-->
+          <!--            -->
+          <!--          </template>-->
+        </n-button>
+      </n-dropdown>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType, computed, toRaw } from 'vue';
+import { ActionItem } from '@/components/Table';
+import { usePermission } from '@/hooks/web/usePermission';
+import { isString, isBoolean, isFunction } from "@/utils/is";
+import { DownOutlined } from '@vicons/antd'
+
+export default defineComponent({
+  name: 'TableAction',
+  components: { DownOutlined },
+  props: {
+    actions: {
+      type: Array as PropType<ActionItem[]>,
+      default: null,
+    },
+    dropDownActions: {
+      type: Array as PropType<ActionItem[]>,
+      default: null,
+    },
+    style: {
+      type: String as PropType<String>,
+      default: 'button'
+    },
+    select:{
+      type: Function as PropType<Function>,
+      default: () =>{ }
+    }
+  },
+  setup(props, { emit }) {
+    const { hasPermission } = usePermission();
+
+    const getTooltip = computed(() => {
+      return (data: string | TooltipProps): TooltipProps => {
+        if (isString(data)) {
+          return { title: data, placement: 'bottom' };
+        } else {
+          return Object.assign({ placement: 'bottom' }, data);
+        }
+      };
+    });
+
+    const actionType = props.style === 'button' ? 'default' : props.style === 'text' ? 'primary' : 'default'
+    const actionText = props.style === 'button' ? undefined : props.style === 'text' ? true : undefined
+
+    const getMoreProps  = computed(() => {
+        return {
+          text: actionText,
+          type: actionType,
+          size: "small"
+        }
+    })
+
+    const getDropdownList = computed(() => {
+      return (toRaw(props.dropDownActions) || [])
+          .filter((action) => {
+            return hasPermission(action.auth) && isIfShow(action);
+          })
+          .map((action, index) => {
+            const { label, popConfirm } = action;
+            return {
+              size: 'small',
+              text: actionText,
+              type: actionType,
+              ...action,
+              ...popConfirm,
+              onConfirm: popConfirm?.confirm,
+              onCancel: popConfirm?.cancel
+            };
+          });
+    });
+
+    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) && isIfShow(action);
+          })
+          .map((action) => {
+            const { popConfirm } = action;
+            //需要展示什么风格，自己修改一下参数
+            return {
+              size: 'small',
+              text: actionText,
+              type: actionType,
+              ...action,
+              ...(popConfirm || {}),
+              onConfirm: popConfirm?.confirm,
+              onCancel: popConfirm?.cancel,
+              enable: !!popConfirm,
+            };
+          });
+    });
+
+    return {
+      getActions,
+      getDropdownList,
+      getTooltip,
+      getMoreProps
+    }
+  }
+})
+</script>

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

@@ -2,6 +2,9 @@ import { ref, Ref, ComputedRef, unref, computed, watch, toRaw } from 'vue';
 import type { BasicColumn, BasicTableProps } from '../types/table';
 import { isEqual, cloneDeep } from 'lodash-es';
 import { isArray, isString } from '@/utils/is';
+import { usePermission } from '@/hooks/web/usePermission';
+import { isString, isBoolean, isFunction } from "@/utils/is";
+import { ActionItem } from "@/components/Table";
 
 export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
     const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
@@ -9,13 +12,34 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
 
     const getColumnsRef = computed(() => {
         const columns = cloneDeep(unref(columnsRef));
+
+        handleActionColumn(propsRef, columns);
+        if (!columns) return [];
         return columns;
     })
 
+    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 getPageColumns = computed(() => {
         const pageColumns = unref(getColumnsRef);
         const columns = cloneDeep(pageColumns);
-        return columns
+        return columns.filter((column) => {
+            return hasPermission(column.auth) && isIfShow(column);
+        })
     })
 
     watch(
@@ -26,6 +50,13 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
         }
     );
 
+    function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns: BasicColumn[]) {
+        const { actionColumn } = unref(propsRef);
+        if (!actionColumn) return;
+        columns.push({
+            ...actionColumn
+        });
+    }
 
     //设置
     function setColumns(columnList: string[]) {

src/components/Table/src/props.ts

@@ -41,5 +41,9 @@ export const basicProps = {
     showPagination: {
         type: [String, Boolean],
         default: 'auto'
-    }
+    },
+    actionColumn: {
+        type: Object as PropType<BasicColumn>,
+        default: null,
+    },
 }

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

@@ -0,0 +1,26 @@
+import { NButton, NTooltip } from 'naive-ui';
+import { RoleEnum } from '/@/enums/roleEnum';
+
+export interface ActionItem extends NButton.props {
+    onClick?: Fn;
+    label?: string;
+    color?: 'success' | 'error' | 'warning';
+    icon?: string;
+    popConfirm?: PopConfirm;
+    disabled?: boolean;
+    divider?: boolean;
+    // 权限编码控制是否显示
+    auth?: RoleEnum | RoleEnum[] | string | string[];
+    // 业务控制是否显示
+    ifShow?: boolean | ((action: ActionItem) => boolean);
+    tooltip?: string | TooltipProps;
+}
+
+export interface PopConfirm {
+    title: string;
+    okText?: string;
+    cancelText?: string;
+    confirm: Fn;
+    cancel?: Fn;
+    icon?: string;
+}