refactor: 重构及优化应用管理

src/views/open/app/index.vue

@@ -1,22 +1,19 @@
 <template>
   <div class="table-page">
     <GiTable
-      row-key="id"
       title="应用管理"
+      row-key="id"
       :data="dataList"
       :columns="columns"
       :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1300 }"
       :pagination="pagination"
       :disabled-tools="['size']"
       :disabled-column-keys="['name']"
       @refresh="search"
     >
       <template #toolbar-left>
-        <a-input v-model="queryForm.name" placeholder="请输入应用名称" allow-clear @change="search">
-          <template #prefix><icon-search /></template>
-        </a-input>
-        <a-input v-model="queryForm.appKey" placeholder="请输入APPKEY" allow-clear @change="search">
+        <a-input v-model="queryForm.description" placeholder="请输入名称/描述" allow-clear @change="search">
           <template #prefix><icon-search /></template>
         </a-input>
         <a-button @click="reset">
@@ -34,61 +31,84 @@
           <template #default>导出</template>
         </a-button>
       </template>
-      <template #name="{ record }">
-        <a-link @click="onDetail(record)">{{ record.name }}</a-link>
+      <template #accessKey="{ record }">
+        <CellCopy :content="record.accessKey" />
       </template>
-      <template #appSecret="{ record }">
-        *********
-        <a-button size="mini" style="margin-left: 10px" @click="onGetSecret(record)">
-          <template #icon><icon-eye /></template>
-        </a-button>
-        <a-button size="mini" style="margin-left: 2px" @click="onRefreshAK(record)">
-          <template #icon><icon-refresh /></template>
-        </a-button>
+      <template #secretKey="{ record }">
+        <a-space v-if="record.secretKey" :size="[2]">
+          <CellCopy :content="record.secretKey" />
+          <a-tooltip content="隐藏">
+            <a-button type="text" size="mini" @click="onSecretHide(record)">
+              <template #icon><icon-eye-invisible size="16" /></template>
+            </a-button>
+          </a-tooltip>
+        </a-space>
+        <a-space v-else :size="[2]">
+          <span>********************</span>
+          <a-tooltip content="显示">
+            <a-button v-permission="['open:app:secret']" type="text" size="mini" @click="onSecret(record)">
+              <template #icon><icon-eye size="16" /></template>
+            </a-button>
+          </a-tooltip>
+        </a-space>
       </template>
       <template #status="{ record }">
-        <GiCellTag :value="record.status" :dict="app_type" />
+        <GiCellStatus :status="record.status" />
       </template>
       <template #action="{ record }">
         <a-space>
-          <a-link v-permission="['open:app:update']" @click="onUpdate(record)">修改</a-link>
+          <a-link v-permission="['open:app:detail']" title="详情" @click="onDetail(record)">详情</a-link>
+          <a-link v-permission="['open:app:update']" title="修改" @click="onUpdate(record)">修改</a-link>
           <a-link
             v-permission="['open:app:delete']"
             status="danger"
             :disabled="record.disabled"
+            :title="record.disabled ? '禁止删除' : '删除'"
             @click="onDelete(record)"
           >
             删除
           </a-link>
+          <a-dropdown>
+            <a-button v-if="has.hasPermOr(['open:app:resetSecret'])" type="text" size="mini" title="更多">
+              <template #icon>
+                <icon-more :size="16" />
+              </template>
+            </a-button>
+            <template #content>
+              <a-doption v-permission="['open:app:resetSecret']" title="重置密钥" @click="onResetSecret(record)">重置密钥</a-doption>
+            </template>
+          </a-dropdown>
         </a-space>
       </template>
     </GiTable>
+
     <AppAddModal ref="AppAddModalRef" @save-success="search" />
     <AppDetailDrawer ref="AppDetailDrawerRef" />
-    <AppGetSecretModal ref="AppGetSecretModalRef" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { Message } from '@arco-design/web-vue'
+import { Message, Modal } from '@arco-design/web-vue'
 import AppAddModal from './AppAddModal.vue'
 import AppDetailDrawer from './AppDetailDrawer.vue'
-import AppGetSecretModal from './AppGetSecretModal.vue'
-import { type AppQuery, type AppResp, deleteApp, exportApp, listApp, refreshAppSecret } from '@/apis/open/app'
+import {
+  type AppQuery,
+  type AppResp,
+  deleteApp,
+  exportApp,
+  getAppSecret,
+  listApp,
+  resetAppSecret,
+} from '@/apis/open/app'
 import type { TableInstanceColumns } from '@/components/GiTable/type'
 import { useDownload, useTable } from '@/hooks'
 import { isMobile } from '@/utils'
 import has from '@/utils/has'
-import { useDict } from '@/hooks/app'
 
-defineOptions({ name: 'App' })
-
-const { app_type } = useDict('app_type')
+defineOptions({ name: 'OpenApp' })
 
 const queryForm = reactive<AppQuery>({
-  name: '',
-  appKey: '',
-  sort: ['createTime,desc'],
+  sort: ['id,desc'],
 })
 
 const {
@@ -98,34 +118,50 @@ const {
   search,
   handleDelete,
 } = useTable((page) => listApp({ ...queryForm, ...page }), { immediate: true })
-
 const columns: TableInstanceColumns[] = [
-  { title: '应用名称', dataIndex: 'name', slotName: 'name' },
-  { title: '应用密钥', dataIndex: 'appKey', slotName: 'appKey' },
-  { title: '应用密码', dataIndex: 'appSecret', slotName: 'appSecret' },
-  { title: '应用状态', dataIndex: 'status', slotName: 'status' },
-  { title: '失效时间', dataIndex: 'expirationTime', slotName: 'expirationTime' },
+  {
+    title: '序号',
+    width: 66,
+    align: 'center',
+    render: ({ rowIndex }) => h('span', {}, rowIndex + 1 + (pagination.current - 1) * pagination.pageSize),
+    fixed: !isMobile() ? 'left' : undefined,
+  },
+  { title: '名称', dataIndex: 'name', slotName: 'name', fixed: !isMobile() ? 'left' : undefined },
+  { title: 'Access Key', dataIndex: 'accessKey', slotName: 'accessKey', width: 200 },
+  { title: 'Secret Key', dataIndex: 'secretKey', slotName: 'secretKey', width: 200 },
+  { title: '失效时间', dataIndex: 'expireTime', width: 180 },
+  { title: '状态', dataIndex: 'status', slotName: 'status', width: 80, align: 'center' },
+  { title: '描述', dataIndex: 'description', ellipsis: true, tooltip: true },
+  { title: '创建人', dataIndex: 'createUserString', ellipsis: true, tooltip: true, show: false },
+  { title: '创建时间', dataIndex: 'createTime', width: 180 },
+  { title: '修改人', dataIndex: 'updateUserString', ellipsis: true, tooltip: true, show: false },
+  { title: '修改时间', dataIndex: 'updateTime', width: 180, show: false },
   {
     title: '操作',
+    dataIndex: 'action',
     slotName: 'action',
-    width: 130,
+    width: 190,
     align: 'center',
     fixed: !isMobile() ? 'right' : undefined,
-    show: has.hasPermOr(['open:app:update', 'open:app:delete']),
+    show: has.hasPermOr([
+      'open:app:detail',
+      'open:app:update',
+      'open:app:delete',
+      'open:app:resetSecret',
+    ]),
   },
 ]
 
 // 重置
 const reset = () => {
-  queryForm.name = ''
-  queryForm.appKey = ''
+  queryForm.description = undefined
   search()
 }
 
 // 删除
 const onDelete = (record: AppResp) => {
   return handleDelete(() => deleteApp(record.id), {
-    content: `是否确定删除该条数据？`,
+    content: `是否确定删除应用「${record.name}」？`,
     showModal: true,
   })
 }
@@ -135,6 +171,38 @@ const onExport = () => {
   useDownload(() => exportApp(queryForm))
 }
 
+// 查看密钥
+const onSecret = async (record: AppResp) => {
+  const { data } = await getAppSecret(record.id)
+  record.secretKey = data.secretKey
+}
+
+// 隐藏显示密钥
+const onSecretHide = (record: AppResp) => {
+  record.secretKey = undefined
+}
+
+// 重置密钥
+const onResetSecret = async (record: AppResp) => {
+  Modal.warning({
+    title: '提示',
+    content: `是否确定重置应用「${record.name}」密钥？`,
+    okButtonProps: { status: 'warning' },
+    hideCancel: false,
+    maskClosable: false,
+    onBeforeOk: async () => {
+      try {
+        await resetAppSecret(record.id)
+        Message.success('重置成功')
+        search()
+        return true
+      } catch (error) {
+        return false
+      }
+    },
+  })
+}
+
 const AppAddModalRef = ref<InstanceType<typeof AppAddModal>>()
 // 新增
 const onAdd = () => {
@@ -149,20 +217,7 @@ const onUpdate = (record: AppResp) => {
 const AppDetailDrawerRef = ref<InstanceType<typeof AppDetailDrawer>>()
 // 详情
 const onDetail = (record: AppResp) => {
-  AppDetailDrawerRef.value?.onDetail(record.id)
-}
-
-// 查看应用密钥/密码
-const AppGetSecretModalRef = ref<InstanceType<typeof AppGetSecretModal>>()
-const onGetSecret = (record: AppResp) => {
-  AppGetSecretModalRef.value?.onGetSecret(record.id)
-}
-
-// 刷新应用密码
-const onRefreshAK = async (record: AppResp) => {
-  await refreshAppSecret(record.id)
-  Message.success('刷新成功')
-  search()
+  AppDetailDrawerRef.value?.onOpen(record.id)
 }
 </script>