From 1a36a195f36a7a50aa49c53d5084a55ea8a0b482 Mon Sep 17 00:00:00 2001 From: xingyu <xingyu4j@vip.qq.com> Date: Tue, 21 Mar 2023 23:16:08 +0800 Subject: [PATCH] feat: token views --- src/views/system/oauth2/token/index.vue | 55 ++++++++++++++++- src/views/system/oauth2/token/token.data.ts | 68 +++++++++++++++++++++ 2 files changed, 122 insertions(+), 1 deletion(-) create mode 100644 src/views/system/oauth2/token/token.data.ts diff --git a/src/views/system/oauth2/token/index.vue b/src/views/system/oauth2/token/index.vue index 3b64cfc4..5d1813c3 100644 --- a/src/views/system/oauth2/token/index.vue +++ b/src/views/system/oauth2/token/index.vue @@ -1,3 +1,56 @@ <template> - <div>开发中</div> + <div> + <BasicTable @register="registerTable"> + <template #bodyCell="{ column, record }"> + <template v-if="column.key === 'action'"> + <TableAction + :actions="[ + { + icon: 'ant-design:delete-outlined', + color: 'error', + label: '强退', + popConfirm: { + title: '是否确认强退', + placement: 'left', + confirm: handleDelete.bind(null, record) + } + } + ]" + /> + </template> + </template> + </BasicTable> + </div> </template> +<script lang="ts" setup name="Token"> +import { BasicTable, useTable, TableAction } from '@/components/Table' +import { deleteAccessTokenApi, getAccessTokenPageApi } from '@/api/system/oauth2/token' +import { columns, searchFormSchema } from './token.data' +import { useMessage } from '@/hooks/web/useMessage' + +const { createMessage } = useMessage() +const [registerTable, { reload }] = useTable({ + title: 'Token列表', + api: getAccessTokenPageApi, + columns, + formConfig: { + labelWidth: 120, + schemas: searchFormSchema + }, + useSearchForm: true, + showTableSetting: true, + showIndexColumn: false, + actionColumn: { + width: 100, + title: '操作', + dataIndex: 'action', + fixed: 'right' + } +}) + +async function handleDelete(record: Recordable) { + await deleteAccessTokenApi(record.id) + createMessage.success('删除成功') + reload() +} +</script> diff --git a/src/views/system/oauth2/token/token.data.ts b/src/views/system/oauth2/token/token.data.ts new file mode 100644 index 00000000..d9c5d020 --- /dev/null +++ b/src/views/system/oauth2/token/token.data.ts @@ -0,0 +1,68 @@ +import { BasicColumn, FormSchema, useRender } from '@/components/Table' +import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' + +export const columns: BasicColumn[] = [ + { + title: '访问令牌', + dataIndex: 'accessToken', + width: 300 + }, + { + title: '刷新令牌', + dataIndex: 'refreshToken', + width: 300 + }, + { + title: '用户编号', + dataIndex: 'userId', + width: 100 + }, + { + title: '用户类型', + dataIndex: 'userType', + width: 120, + customRender: ({ text }) => { + return useRender.renderDict(text, DICT_TYPE.USER_TYPE) + } + }, + { + title: '创建时间', + dataIndex: 'createTime', + width: 180, + customRender: ({ text }) => { + return useRender.renderDate(text) + } + }, + { + title: '过期时间', + dataIndex: 'expiresTime', + width: 180, + customRender: ({ text }) => { + return useRender.renderDate(text) + } + } +] + +export const searchFormSchema: FormSchema[] = [ + { + label: '用户编号', + field: 'userId', + component: 'Input', + colProps: { span: 8 } + }, + { + label: '客户端编号', + field: 'clientId', + component: 'Input', + colProps: { span: 8 } + }, + { + label: '用户类型', + field: 'userType', + component: 'Select', + componentProps: { + options: getIntDictOptions(DICT_TYPE.USER_TYPE) + }, + colProps: { span: 8 } + } +]