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 }
+ }
+]