From 5a3861b9cfc79da3297f8ddd045b88f0daca0ada Mon Sep 17 00:00:00 2001 From: zuihou <244387066@qq.com> Date: Tue, 27 Apr 2021 00:20:20 +0800 Subject: [PATCH] =?UTF-8?q?feat(table):=20=E8=A1=A8=E6=A0=BC=E7=9A=84?= =?UTF-8?q?=E6=95=B0=E6=8D=AE=E5=88=97=E5=92=8C=E6=93=8D=E4=BD=9C=E5=88=97?= =?UTF-8?q?=E7=9A=84=E5=AD=97=E6=AE=B5=E5=8F=AF=E4=BB=A5=E6=A0=B9=E6=8D=AE?= =?UTF-8?q?=E6=9D=83=E9=99=90=E5=92=8C=E4=B8=9A=E5=8A=A1=E6=9D=A5=E6=8E=A7?= =?UTF-8?q?=E5=88=B6=E6=98=AF=E5=90=A6=E6=98=BE=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Table/src/components/TableAction.vue | 19 +++++- src/components/Table/src/hooks/useColumns.ts | 58 +++++++++++++------ src/components/Table/src/types/table.ts | 5 ++ src/components/Table/src/types/tableAction.ts | 4 +- 4 files changed, 64 insertions(+), 22 deletions(-) diff --git a/src/components/Table/src/components/TableAction.vue b/src/components/Table/src/components/TableAction.vue index 358c19f8..9303abaf 100644 --- a/src/components/Table/src/components/TableAction.vue +++ b/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; diff --git a/src/components/Table/src/hooks/useColumns.ts b/src/components/Table/src/hooks/useColumns.ts index 7a53db91..9671c73f 100644 --- a/src/components/Table/src/hooks/useColumns.ts +++ b/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; + 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); - }; - } + 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( diff --git a/src/components/Table/src/types/table.ts b/src/components/Table/src/types/table.ts index 7532f8cd..7e61c015 100644 --- a/src/components/Table/src/types/table.ts +++ b/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); editValueMap?: (value: any) => string; onEditRow?: () => void; + // 权限编码控制是否显示 + auth?: RoleEnum | RoleEnum[] | string | string[]; + // 业务控制是否显示 + ifShow?: boolean | ((column: BasicColumn) => boolean); } diff --git a/src/components/Table/src/types/tableAction.ts b/src/components/Table/src/types/tableAction.ts index 1a863592..19ada7a3 100644 --- a/src/components/Table/src/types/tableAction.ts +++ b/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 {