refactor: 重构及优化应用管理

This commit is contained in:
2024-11-17 22:05:00 +08:00
parent 0bd0ff5e21
commit 2b7c09966f
12 changed files with 238 additions and 240 deletions

View File

@@ -1,45 +1,18 @@
import type * as T from './type'
import http from '@/utils/http'
export type * from './type'
const BASE_URL = '/open/app'
export interface AppResp {
id: string
name: string
appKey: string
status: string
expirationTime: string
appDesc: string
createUserString: string
updateUserString: string
}
export interface AppDetailResp {
id: string
name: string
appKey: string
status: string
expirationTime: string
appDesc: string
createTime: string
updateUser: string
updateTime: string
createUserString: string
updateUserString: string
}
export interface AppQuery {
name: string
appKey: string
sort: Array<string>
}
export interface AppPageQuery extends AppQuery, PageQuery {}
/** @desc 查询应用列表 */
export function listApp(query: AppPageQuery) {
return http.get<PageRes<AppResp[]>>(`${BASE_URL}`, query)
export function listApp(query: T.AppPageQuery) {
return http.get<PageRes<T.AppResp[]>>(`${BASE_URL}`, query)
}
/** @desc 查询应用详情 */
export function getApp(id: string) {
return http.get<AppDetailResp>(`${BASE_URL}/${id}`)
return http.get<T.AppResp>(`${BASE_URL}/${id}`)
}
/** @desc 新增应用 */
@@ -58,16 +31,16 @@ export function deleteApp(id: string) {
}
/** @desc 导出应用 */
export function exportApp(query: AppQuery) {
export function exportApp(query: T.AppQuery) {
return http.download(`${BASE_URL}/export`, query)
}
/** @desc 查看AK */
/** @desc 获取密钥 */
export function getAppSecret(id: string) {
return http.get(`${BASE_URL}/${id}/appsecret`)
return http.get(`${BASE_URL}/${id}/secret`)
}
/** @desc 刷新AK */
export function refreshAppSecret(id: string) {
return http.get(`${BASE_URL}/${id}/refreshas`)
/** @desc 重置密钥 */
export function resetAppSecret(id: string) {
return http.patch(`${BASE_URL}/${id}/secret`)
}

21
src/apis/open/type.ts Normal file
View File

@@ -0,0 +1,21 @@
/** 应用类型 */
export interface AppResp {
id: string
name: string
accessKey: string
secretKey: string
expireTime: string
description: string
status: 1 | 2
createUserString: string
createTime: string
updateUserString: string
updateTime: string
}
export interface AppQuery {
description?: string
sort: Array<string>
}
export interface AppPageQuery extends AppQuery, PageQuery {}

View File

@@ -43,8 +43,7 @@ export interface UserQuery {
userIds?: Array<string>
}
export interface UserPageQuery extends UserQuery, PageQuery {
}
export interface UserPageQuery extends UserQuery, PageQuery {}
/** 系统角色类型 */
export interface RoleResp {
@@ -62,23 +61,11 @@ export interface RoleResp {
disabled: boolean
}
export interface RoleDetailResp {
id: string
name: string
code: string
sort: number
description: string
export type RoleDetailResp = RoleResp & {
menuIds: Array<number>
dataScope: number
deptIds: Array<number>
isSystem: boolean
menuCheckStrictly: boolean
deptCheckStrictly: boolean
createUserString: string
createTime: string
updateUserString: string
updateTime: string
disabled: boolean
}
export interface RoleQuery {
@@ -86,8 +73,7 @@ export interface RoleQuery {
sort: Array<string>
}
export interface RolePageQuery extends RoleQuery, PageQuery {
}
export interface RolePageQuery extends RoleQuery, PageQuery {}
/** 系统菜单类型 */
export interface MenuResp {

View File

@@ -0,0 +1,28 @@
<template>
<a-space :size="[2]">
<a-typography-paragraph
:ellipsis="{
rows: 1,
showTooltip: true,
css: true,
}"
>
{{ content }}
</a-typography-paragraph>
<a-typography-paragraph copyable :copy-text="content" />
</a-space>
</template>
<script setup lang="ts">
defineOptions({ name: 'CellCopy' })
withDefaults(defineProps<Props>(), {
content: '',
})
interface Props {
content: string
}
</script>
<style scoped lang="scss"></style>

View File

@@ -68,7 +68,7 @@ export function useTable<T extends U, U = T>(api: Api<T>, options?: Options<T, U
if (res.success) {
Message.success(options?.successTip || '删除成功')
selectedKeys.value = []
getTableData()
await getTableData()
}
return res.success
} catch (error) {

View File

@@ -135,7 +135,7 @@ const logout = () => {
onBeforeOk: async () => {
try {
await userStore.logout()
router.replace('/login')
await router.replace('/login')
return true
} catch (error) {
return false

View File

@@ -9,6 +9,7 @@ declare module 'vue' {
export interface GlobalComponents {
Avatar: typeof import('./../components/Avatar/index.vue')['default']
Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
Chart: typeof import('./../components/Chart/index.vue')['default']
CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
CronModel: typeof import('./../components/GenCron/CronModel/index.vue')['default']

View File

@@ -4,8 +4,8 @@
:title="title"
:mask-closable="false"
:esc-to-close="false"
:modal-style="{ maxWidth: '520px' }"
width="90%"
:width="width >= 500 ? 500 : '100%'"
draggable
@before-ok="save"
@close="reset"
>
@@ -15,74 +15,69 @@
<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import { useWindowSize } from '@vueuse/core'
import { addApp, getApp, updateApp } from '@/apis/open/app'
import { type Columns, GiForm, type Options } from '@/components/GiForm'
import { useForm } from '@/hooks'
import { useDict } from '@/hooks/app'
const emit = defineEmits<{
(e: 'save-success'): void
}>()
const { width } = useWindowSize()
const dataId = ref('')
const visible = ref(false)
const isUpdate = computed(() => !!dataId.value)
const title = computed(() => (isUpdate.value ? '修改应用' : '新增应用'))
const formRef = ref<InstanceType<typeof GiForm>>()
const { app_type } = useDict('app_type')
const options: Options = {
form: {},
form: { size: 'large' },
btns: { hide: true },
}
const columns: Columns = reactive([
{
label: '应用名称',
label: '名称',
field: 'name',
type: 'input',
rules: [{ required: true, message: '请输入应用名称' }],
},
{
label: 'APPKEY',
field: 'appKey',
type: 'input',
rules: [{ required: true, message: '请输入APPKEY' }],
},
{
label: '应用状态',
field: 'status',
type: 'switch',
options: app_type,
props: {
type: 'round',
defaultChecked: true,
checkedValue: '1',
uncheckedValue: '0',
checkedText: '启用',
uncheckedText: '禁用',
checkedColor: 'green',
},
rules: [{ required: false, message: '请输入应用状态' }],
rules: [{ required: true, message: '请输入名称' }],
},
{
label: '失效时间',
field: 'expirationTime',
type: 'date-picker',
props: {
placeholder: '请选择失效时间',
showTime: true,
},
rules: [{ required: true, message: '请输入失效时间' }],
},
{
label: '应用描述',
field: 'appDesc',
label: '描述',
field: 'description',
type: 'textarea',
props: {
maxLength: 200,
autoSize: { minRows: 3, maxRows: 5 },
},
},
{
label: '状态',
field: 'status',
type: 'switch',
props: {
type: 'round',
checkedValue: 1,
uncheckedValue: 2,
checkedText: '启用',
uncheckedText: '禁用',
},
},
])
const { form, resetForm } = useForm({
// todo 待补充
status: 1,
})
// 重置
@@ -91,23 +86,6 @@ const reset = () => {
resetForm()
}
const visible = ref(false)
// 新增
const onAdd = () => {
reset()
dataId.value = ''
visible.value = true
}
// 修改
const onUpdate = async (id: string) => {
reset()
dataId.value = id
const res = await getApp(id)
Object.assign(form, res.data)
visible.value = true
}
// 保存
const save = async () => {
try {
@@ -127,5 +105,21 @@ const save = async () => {
}
}
// 新增
const onAdd = () => {
reset()
dataId.value = ''
visible.value = true
}
// 修改
const onUpdate = async (id: string) => {
reset()
dataId.value = id
const { data } = await getApp(id)
Object.assign(form, data)
visible.value = true
}
defineExpose({ onAdd, onUpdate })
</script>

View File

@@ -1,44 +1,44 @@
<template>
<a-drawer v-model:visible="visible" title="应用详情" :width="width >= 600 ? 600 : '100%'" :footer="false">
<a-descriptions :column="1" size="large" class="general-description" bordered>
<a-descriptions-item label="应用名称">{{ dataDetail?.name }}</a-descriptions-item>
<a-descriptions-item label="APPKEY">{{ dataDetail?.appKey }}</a-descriptions-item>
<a-descriptions-item label="应用状态"><GiCellTag :value="dataDetail?.status" :dict="app_type" /></a-descriptions-item>
<a-descriptions-item label="失效时间">{{ dataDetail?.expirationTime }}</a-descriptions-item>
<a-descriptions :column="2" size="large" class="general-description">
<a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
<a-descriptions-item label="名称">{{ dataDetail?.name }}</a-descriptions-item>
<a-descriptions-item label="Access Key" :span="2"><CellCopy :content="dataDetail?.accessKey" /></a-descriptions-item>
<a-descriptions-item label="状态"><GiCellStatus :status="dataDetail?.status" /></a-descriptions-item>
<a-descriptions-item label="失效时间">{{ dataDetail?.expireTime }}</a-descriptions-item>
<a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
<a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
<a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
<a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
<a-descriptions-item label="应用描述">{{ dataDetail?.appDesc }}</a-descriptions-item>
<a-descriptions-item label="描述">{{ dataDetail?.description }}</a-descriptions-item>
</a-descriptions>
</a-drawer>
</template>
<script setup lang="ts">
import { useWindowSize } from '@vueuse/core'
import { type AppDetailResp, getApp } from '@/apis/open/app'
import { useDict } from '@/hooks/app'
import { type AppResp, getApp as getData } from '@/apis/open/app'
const { app_type } = useDict('app_type')
const { width } = useWindowSize()
const visible = ref(false)
const dataId = ref('')
const dataDetail = ref<AppDetailResp>()
const dataDetail = ref<AppResp>()
const visible = ref(false)
// 查询详情
const getDataDetail = async () => {
const res = await getApp(dataId.value)
dataDetail.value = res.data
const { data } = await getData(dataId.value)
dataDetail.value = data
}
// 打开详情
const onDetail = async (id: string) => {
// 打开
const onOpen = async (id: string) => {
dataId.value = id
await getDataDetail()
visible.value = true
}
defineExpose({ onDetail })
defineExpose({ onOpen })
</script>
<style scoped lang="scss"></style>

View File

@@ -1,60 +0,0 @@
<template>
<a-modal
v-model:visible="visible"
title="应用密钥/密码信息"
:mask-closable="false"
:esc-to-close="false"
:modal-style="{ maxWidth: '520px' }"
width="90%"
>
<a-watermark :content="content" :gap="[10, 10]">
<div style="width: 100%; height: 150px;">
<a-alert type="warning" style="margin-bottom: 18px">应用密码仅可查看一次请妥善保管遗失请刷新</a-alert>
<a-descriptions :data="data" :column="1" bordered />
</div>
</a-watermark>
</a-modal>
</template>
<script setup lang="ts">
import type { DescData } from '@arco-design/web-vue'
import dayjs from 'dayjs'
import { getAppSecret } from '@/apis/open/app'
import { useUserStore } from '@/stores'
const dataId = ref('')
const initData = [{
label: '应用密钥appkey',
value: '*********',
}, {
label: '应用密码appsecret',
value: '*********',
}]
const userStore = useUserStore()
const content = ref([userStore.userInfo.username, dayjs().format('YYYY-MM-DD HH:mm:ss')])
let data = reactive<DescData[]>(initData)
const visible = ref(false)
const getAppSecretData = async (id: string) => {
await getAppSecret(id).then((res) => {
data = [{
label: '应用密钥appkey',
value: res.data.appKey,
}, {
label: '应用密码appsecret',
value: res.data.appSecret,
}]
})
}
// 查看应用密钥/密码
const onGetSecret = async (id: string) => {
dataId.value = ''
await getAppSecretData(id)
visible.value = true
}
defineExpose({ onGetSecret })
</script>

View File

@@ -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>

View File

@@ -70,7 +70,7 @@
删除
</a-link>
<a-dropdown>
<a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini">
<a-button v-if="has.hasPermOr(['system:user:resetPwd', 'system:user:updateRole'])" type="text" size="mini" title="更多">
<template #icon>
<icon-more :size="16" />
</template>