feat(demo): add permission table demo
| | |
| | | footerTable: 'Footer', |
| | | editCellTable: 'Editable cell', |
| | | editRowTable: 'Editable row', |
| | | authColumn: 'Auth column', |
| | | }; |
| | |
| | | footerTable: '表尾行合计', |
| | | editCellTable: '可编辑单元格', |
| | | editRowTable: '可编辑行', |
| | | authColumn: '权限列', |
| | | }; |
| | |
| | | path: 'editRowTable', |
| | | name: t('routes.demo.table.editRowTable'), |
| | | }, |
| | | { |
| | | path: 'authColumn', |
| | | name: t('routes.demo.table.authColumn'), |
| | | }, |
| | | ], |
| | | }, |
| | | { |
| | |
| | | title: t('routes.demo.table.editRowTable'), |
| | | }, |
| | | }, |
| | | { |
| | | path: 'authColumn', |
| | | name: 'AuthColumnDemo', |
| | | component: () => import('/@/views/demo/table/AuthColumn.vue'), |
| | | meta: { |
| | | title: t('routes.demo.table.authColumn'), |
| | | }, |
| | | }, |
| | | ], |
| | | }, |
| | | { |
New file |
| | |
| | | <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'; // 根据业务控制是否显示: 非enable状态的不显示启用按钮 |
| | | }, |
| | | }, |
| | | { |
| | | 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> |