refactor: oauth2 vxe

yudao-ui-admin-vue3/src/views/system/oauth2/token/index.vue

@@ -1,92 +1,69 @@
-<script setup lang="ts">
-import dayjs from 'dayjs'
-import { useTable } from '@/hooks/web/useTable'
-import { allSchemas } from './token.data'
-import { DICT_TYPE } from '@/utils/dict'
-import { useI18n } from '@/hooks/web/useI18n'
-import type { OAuth2TokenVo } from '@/api/system/oauth2/token.types'
-import * as TokenApi from '@/api/system/oauth2/token'
-import { ref } from 'vue'
-const { t } = useI18n() // 国际化
-// ========== 列表相关 ==========
-const { register, tableObject, methods } = useTable<OAuth2TokenVo>({
-  getListApi: TokenApi.getAccessTokenPageApi,
-  delListApi: TokenApi.deleteAccessTokenApi
-})
-// ========== 详情相关 ==========
-const detailRef = ref() // 详情 Ref
-const dialogVisible = ref(false) // 是否显示弹出层
-const dialogTitle = ref(t('action.detail')) // 弹出层标题
-const { getList, setSearchParams, delList } = methods
-// 详情
-const handleDetail = (row: OAuth2TokenVo) => {
-  // 设置数据
-  detailRef.value = row
-  dialogVisible.value = true
-}
-// 强退操作
-const handleForceLogout = (row: OAuth2TokenVo) => {
-  delList(row.id, false)
-}
-getList()
-</script>
 <template>
   <ContentWrap>
-    <Search :schema="allSchemas.searchSchema" @search="setSearchParams" @reset="setSearchParams" />
-  </ContentWrap>
-  <ContentWrap>
-    <Table
-      :columns="allSchemas.tableColumns"
-      :selection="false"
-      :data="tableObject.tableList"
-      :loading="tableObject.loading"
-      :pagination="{
-        total: tableObject.total
-      }"
-      v-model:pageSize="tableObject.pageSize"
-      v-model:currentPage="tableObject.currentPage"
-      @register="register"
-    >
-      <template #userType="{ row }">
-        <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
-      </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #expiresTime="{ row }">
-        <span>{{ dayjs(row.expiresTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #action="{ row }">
-        <el-button link type="primary" @click="handleDetail(row)">
-          <Icon icon="ep:view" class="mr-1px" /> {{ t('action.detail') }}
-        </el-button>
-        <el-button
-          link
-          type="primary"
+    <!-- 列表 -->
+    <vxe-grid ref="xGrid" v-bind="gridOptions" class="xtable-scrollbar">
+      <template #actionbtns_default="{ row }">
+        <!-- 操作：详情 -->
+        <XTextButton preIcon="ep:view" :title="t('action.detail')" @click="handleDetail(row)" />
+        <!-- 操作：删除 -->
+        <XTextButton
+          preIcon="ep:delete"
+          :title="t('action.logout')"
           v-hasPermi="['system:oauth2-token:delete']"
-          @click="handleForceLogout(row)"
-        >
-          <Icon icon="ep:delete" class="mr-1px" /> {{ t('action.logout') }}
-        </el-button>
+          @click="handleForceLogout(row.id)"
+        />
       </template>
-    </Table>
+    </vxe-grid>
   </ContentWrap>
   <Dialog v-model="dialogVisible" :title="dialogTitle">
     <!-- 对话框(详情) -->
-    <Descriptions :schema="allSchemas.detailSchema" :data="detailRef">
-      <template #userType="{ row }">
-        <DictTag :type="DICT_TYPE.USER_TYPE" :value="row.userType" />
-      </template>
-      <template #createTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-      <template #expiresTime="{ row }">
-        <span>{{ dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-      </template>
-    </Descriptions>
+    <Descriptions :schema="allSchemas.detailSchema" :data="detailRef" />
     <!-- 操作按钮 -->
     <template #footer>
       <el-button @click="dialogVisible = false">{{ t('dialog.close') }}</el-button>
     </template>
   </Dialog>
 </template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { useMessage } from '@/hooks/web/useMessage'
+import { useVxeGrid } from '@/hooks/web/useVxeGrid'
+import { VxeGridInstance } from 'vxe-table'
+
+import { allSchemas } from './token.data'
+import * as TokenApi from '@/api/system/oauth2/token'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+// 列表相关的变量
+const xGrid = ref<VxeGridInstance>() // 列表 Grid Ref
+const { gridOptions } = useVxeGrid<TokenApi.OAuth2TokenVO>({
+  allSchemas: allSchemas,
+  getListApi: TokenApi.getAccessTokenPageApi
+})
+// ========== 详情相关 ==========
+const detailRef = ref() // 详情 Ref
+const dialogVisible = ref(false) // 是否显示弹出层
+const dialogTitle = ref(t('action.detail')) // 弹出层标题
+// 详情
+const handleDetail = async (row: TokenApi.OAuth2TokenVO) => {
+  // 设置数据
+  detailRef.value = row
+  dialogVisible.value = true
+}
+// 强退操作
+const handleForceLogout = (rowId: number) => {
+  message
+    .delConfirm()
+    .then(async () => {
+      await TokenApi.deleteAccessTokenApi(rowId)
+      message.success(t('common.delSuccess'))
+    })
+    .finally(() => {
+      // 刷新列表
+      xGrid.value?.commitProxy('query')
+    })
+}
+</script>