From 9e208411a24d4ccc9306555cc45aa7135d0df78f Mon Sep 17 00:00:00 2001
From: zuihou <244387066@qq.com>
Date: 星期二, 27 四月 2021 00:22:05 +0800
Subject: [PATCH] feat(demo): add permission table demo
---
src/locales/lang/zh_CN/routes/demo/table.ts | 1
src/router/menus/modules/demo/comp.ts | 4 +
src/router/routes/modules/demo/comp.ts | 8 ++
src/locales/lang/en/routes/demo/table.ts | 1
src/views/demo/table/AuthColumn.vue | 127 ++++++++++++++++++++++++++++++++++++++++++
5 files changed, 141 insertions(+), 0 deletions(-)
diff --git a/src/locales/lang/en/routes/demo/table.ts b/src/locales/lang/en/routes/demo/table.ts
index 5f50b03..c5a2dcc 100644
--- a/src/locales/lang/en/routes/demo/table.ts
+++ b/src/locales/lang/en/routes/demo/table.ts
@@ -16,4 +16,5 @@
footerTable: 'Footer',
editCellTable: 'Editable cell',
editRowTable: 'Editable row',
+ authColumn: 'Auth column',
};
diff --git a/src/locales/lang/zh_CN/routes/demo/table.ts b/src/locales/lang/zh_CN/routes/demo/table.ts
index 498f285..254b10e 100644
--- a/src/locales/lang/zh_CN/routes/demo/table.ts
+++ b/src/locales/lang/zh_CN/routes/demo/table.ts
@@ -16,4 +16,5 @@
footerTable: '琛ㄥ熬琛屽悎璁�',
editCellTable: '鍙紪杈戝崟鍏冩牸',
editRowTable: '鍙紪杈戣',
+ authColumn: '鏉冮檺鍒�',
};
diff --git a/src/router/menus/modules/demo/comp.ts b/src/router/menus/modules/demo/comp.ts
index 71bb106..611135a 100644
--- a/src/router/menus/modules/demo/comp.ts
+++ b/src/router/menus/modules/demo/comp.ts
@@ -118,6 +118,10 @@
path: 'editRowTable',
name: t('routes.demo.table.editRowTable'),
},
+ {
+ path: 'authColumn',
+ name: t('routes.demo.table.authColumn'),
+ },
],
},
{
diff --git a/src/router/routes/modules/demo/comp.ts b/src/router/routes/modules/demo/comp.ts
index 6d6756e..88e9608 100644
--- a/src/router/routes/modules/demo/comp.ts
+++ b/src/router/routes/modules/demo/comp.ts
@@ -230,6 +230,14 @@
title: t('routes.demo.table.editRowTable'),
},
},
+ {
+ path: 'authColumn',
+ name: 'AuthColumnDemo',
+ component: () => import('/@/views/demo/table/AuthColumn.vue'),
+ meta: {
+ title: t('routes.demo.table.authColumn'),
+ },
+ },
],
},
{
diff --git a/src/views/demo/table/AuthColumn.vue b/src/views/demo/table/AuthColumn.vue
new file mode 100644
index 0000000..a611324
--- /dev/null
+++ b/src/views/demo/table/AuthColumn.vue
@@ -0,0 +1,127 @@
+<template>
+ <div class="p-4">
+ <BasicTable @register="registerTable">
+ <template #action="{ record }">
+ <TableAction
+ :actions="[
+ {
+ label: '缂栬緫',
+ onClick: handleEdit.bind(null, record),
+ auth: 'other', // 鏍规嵁鏉冮檺鎺у埗鏄惁鏄剧ず: 鏃犳潈闄愶紝涓嶆樉绀�
+ },
+ {
+ label: '鍒犻櫎',
+ icon: 'ic:outline-delete-outline',
+ onClick: handleDelete.bind(null, record),
+ auth: 'super', // 鏍规嵁鏉冮檺鎺у埗鏄惁鏄剧ず: 鏈夋潈闄愶紝浼氭樉绀�
+ },
+ ]"
+ :dropDownActions="[
+ {
+ label: '鍚敤',
+ popConfirm: {
+ title: '鏄惁鍚敤锛�',
+ confirm: handleOpen.bind(null, record),
+ },
+ ifShow: (_action) => {
+ return record.status !== 'enable'; // 鏍规嵁涓氬姟鎺у埗鏄惁鏄剧ず: 闈瀍nable鐘舵�佺殑涓嶆樉绀哄惎鐢ㄦ寜閽�
+ },
+ },
+ {
+ label: '绂佺敤',
+ popConfirm: {
+ title: '鏄惁绂佺敤锛�',
+ confirm: handleOpen.bind(null, record),
+ },
+ ifShow: () => {
+ return record.status === 'enable'; // 鏍规嵁涓氬姟鎺у埗鏄惁鏄剧ず: enable鐘舵�佺殑鏄剧ず绂佺敤鎸夐挳
+ },
+ },
+ {
+ label: '鍚屾椂鎺у埗',
+ popConfirm: {
+ title: '鏄惁鍔ㄦ�佹樉绀猴紵',
+ confirm: handleOpen.bind(null, record),
+ },
+ auth: 'super', // 鍚屾椂鏍规嵁鏉冮檺鍜屼笟鍔℃帶鍒舵槸鍚︽樉绀�
+ ifShow: () => {
+ return true;
+ },
+ },
+ ]"
+ />
+ </template>
+ </BasicTable>
+ </div>
+</template>
+<script lang="ts">
+ import { defineComponent } from 'vue';
+ import { BasicTable, useTable, BasicColumn, TableAction } from '/@/components/Table';
+
+ import { demoListApi } from '/@/api/demo/table';
+ const columns: BasicColumn[] = [
+ {
+ title: '缂栧彿',
+ dataIndex: 'no',
+ width: 100,
+ },
+ {
+ title: '濮撳悕',
+ dataIndex: 'name',
+ auth: 'test', // 鏍规嵁鏉冮檺鎺у埗鏄惁鏄剧ず: 鏃犳潈闄愶紝涓嶆樉绀�
+ },
+ {
+ title: '鐘舵��',
+ dataIndex: 'status',
+ },
+ {
+ title: '鍦板潃',
+ dataIndex: 'address',
+ auth: 'super', // 鍚屾椂鏍规嵁鏉冮檺鍜屼笟鍔℃帶鍒舵槸鍚︽樉绀�
+ ifShow: (_column) => {
+ return true;
+ },
+ },
+ {
+ title: '寮�濮嬫椂闂�',
+ dataIndex: 'beginTime',
+ },
+ {
+ title: '缁撴潫鏃堕棿',
+ dataIndex: 'endTime',
+ width: 200,
+ },
+ ];
+ export default defineComponent({
+ components: { BasicTable, TableAction },
+ setup() {
+ const [registerTable] = useTable({
+ title: 'TableAction缁勪欢鍙婂浐瀹氬垪绀轰緥',
+ api: demoListApi,
+ columns: columns,
+ bordered: true,
+ actionColumn: {
+ width: 250,
+ title: 'Action',
+ dataIndex: 'action',
+ slots: { customRender: 'action' },
+ },
+ });
+ function handleEdit(record: Recordable) {
+ console.log('鐐瑰嚮浜嗙紪杈�', record);
+ }
+ function handleDelete(record: Recordable) {
+ console.log('鐐瑰嚮浜嗗垹闄�', record);
+ }
+ function handleOpen(record: Recordable) {
+ console.log('鐐瑰嚮浜嗗惎鐢�', record);
+ }
+ return {
+ registerTable,
+ handleEdit,
+ handleDelete,
+ handleOpen,
+ };
+ },
+ });
+</script>
--
Gitblit v1.8.0