mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-25 06:57:12 +08:00
feat: 新增能力开放模块应用管理功能
This commit is contained in:
橙子
73
src/apis/open/app.ts
Normal file
73
src/apis/open/app.ts
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import http from '@/utils/http'
|
||||||
|
|
||||||
|
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)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 查询应用详情 */
|
||||||
|
export function getApp(id: string) {
|
||||||
|
return http.get<AppDetailResp>(`${BASE_URL}/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 新增应用 */
|
||||||
|
export function addApp(data: any) {
|
||||||
|
return http.post(`${BASE_URL}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 修改应用 */
|
||||||
|
export function updateApp(data: any, id: string) {
|
||||||
|
return http.put(`${BASE_URL}/${id}`, data)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 删除应用 */
|
||||||
|
export function deleteApp(id: string) {
|
||||||
|
return http.del(`${BASE_URL}/${id}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 导出应用 */
|
||||||
|
export function exportApp(query: AppQuery) {
|
||||||
|
return http.download(`${BASE_URL}/export`, query)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 查看AK */
|
||||||
|
export function getAppSecret(id: string) {
|
||||||
|
return http.get(`${BASE_URL}/${id}/appsecret`)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** @desc 刷新AK */
|
||||||
|
export function refreshAppSecret(id: string) {
|
||||||
|
return http.get(`${BASE_URL}/${id}/refreshas`)
|
||||||
|
}
|
||||||
132
src/views/open/app/AppAddModal.vue
Normal file
132
src/views/open/app/AppAddModal.vue
Normal file
@@ -0,0 +1,132 @@
|
|||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="visible"
|
||||||
|
:title="title"
|
||||||
|
:mask-closable="false"
|
||||||
|
:esc-to-close="false"
|
||||||
|
:modal-style="{ maxWidth: '520px' }"
|
||||||
|
width="90%"
|
||||||
|
@before-ok="save"
|
||||||
|
@close="reset"
|
||||||
|
>
|
||||||
|
<GiForm ref="formRef" v-model="form" :options="options" :columns="columns" />
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { Message } from '@arco-design/web-vue'
|
||||||
|
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 dataId = ref('')
|
||||||
|
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: {},
|
||||||
|
col: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 },
|
||||||
|
btns: { hide: true }
|
||||||
|
}
|
||||||
|
|
||||||
|
const columns: Columns = reactive([
|
||||||
|
{
|
||||||
|
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: '请输入应用状态' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '失效时间',
|
||||||
|
field: 'expirationTime',
|
||||||
|
type: 'date-picker',
|
||||||
|
props: {
|
||||||
|
showTime: true
|
||||||
|
},
|
||||||
|
rules: [{ required: true, message: '请输入失效时间' }]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '应用描述',
|
||||||
|
field: 'appDesc',
|
||||||
|
type: 'textarea',
|
||||||
|
},
|
||||||
|
])
|
||||||
|
|
||||||
|
const { form, resetForm } = useForm({
|
||||||
|
// todo 待补充
|
||||||
|
})
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const reset = () => {
|
||||||
|
formRef.value?.formRef?.resetFields()
|
||||||
|
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 {
|
||||||
|
const isInvalid = await formRef.value?.formRef?.validate()
|
||||||
|
if (isInvalid) return false
|
||||||
|
if (isUpdate.value) {
|
||||||
|
await updateApp(form, dataId.value)
|
||||||
|
Message.success('修改成功')
|
||||||
|
} else {
|
||||||
|
await addApp(form)
|
||||||
|
Message.success('新增成功')
|
||||||
|
}
|
||||||
|
emit('save-success')
|
||||||
|
return true
|
||||||
|
} catch (error) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ onAdd, onUpdate })
|
||||||
|
</script>
|
||||||
44
src/views/open/app/AppDetailDrawer.vue
Normal file
44
src/views/open/app/AppDetailDrawer.vue
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<template>
|
||||||
|
<a-drawer v-model:visible="visible" title="应用详情" :width="width >= 580 ? 580 : '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-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>
|
||||||
|
</a-drawer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { useWindowSize } from '@vueuse/core'
|
||||||
|
import { type AppDetailResp, getApp } from '@/apis/open/app'
|
||||||
|
import { useDict } from '@/hooks/app'
|
||||||
|
|
||||||
|
const { app_type } = useDict('app_type')
|
||||||
|
const { width } = useWindowSize()
|
||||||
|
|
||||||
|
const visible = ref(false)
|
||||||
|
const dataId = ref('')
|
||||||
|
const dataDetail = ref<AppDetailResp>()
|
||||||
|
// 查询详情
|
||||||
|
const getDataDetail = async () => {
|
||||||
|
const res = await getApp(dataId.value)
|
||||||
|
dataDetail.value = res.data
|
||||||
|
}
|
||||||
|
|
||||||
|
// 打开详情
|
||||||
|
const onDetail = async (id: string) => {
|
||||||
|
dataId.value = id
|
||||||
|
await getDataDetail()
|
||||||
|
visible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
defineExpose({ onDetail })
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
60
src/views/open/app/AppGetSecretModal.vue
Normal file
60
src/views/open/app/AppGetSecretModal.vue
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
<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>
|
||||||
169
src/views/open/app/index.vue
Normal file
169
src/views/open/app/index.vue
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<div class="table-page">
|
||||||
|
<GiTable
|
||||||
|
row-key="id"
|
||||||
|
title="应用管理"
|
||||||
|
:data="dataList"
|
||||||
|
:columns="columns"
|
||||||
|
:loading="loading"
|
||||||
|
:scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
|
||||||
|
: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">
|
||||||
|
<template #prefix><icon-search /></template>
|
||||||
|
</a-input>
|
||||||
|
<a-button @click="reset">
|
||||||
|
<template #icon><icon-refresh /></template>
|
||||||
|
<template #default>重置</template>
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
<template #toolbar-right>
|
||||||
|
<a-button v-permission="['open:app:add']" type="primary" @click="onAdd">
|
||||||
|
<template #icon><icon-plus /></template>
|
||||||
|
<template #default>新增</template>
|
||||||
|
</a-button>
|
||||||
|
<a-button v-permission="['open:app:export']" @click="onExport">
|
||||||
|
<template #icon><icon-download /></template>
|
||||||
|
<template #default>导出</template>
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
<template #name="{ record }">
|
||||||
|
<a-link @click="onDetail(record)">{{ record.name }}</a-link>
|
||||||
|
</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>
|
||||||
|
<template #status="{ record }">
|
||||||
|
<GiCellTag :value="record.status" :dict="app_type" />
|
||||||
|
</template>
|
||||||
|
<template #action="{ record }">
|
||||||
|
<a-space>
|
||||||
|
<a-link v-permission="['open:app:update']" @click="onUpdate(record)">修改</a-link>
|
||||||
|
<a-link
|
||||||
|
v-permission="['open:app:delete']"
|
||||||
|
status="danger"
|
||||||
|
:disabled="record.disabled"
|
||||||
|
@click="onDelete(record)"
|
||||||
|
>
|
||||||
|
删除
|
||||||
|
</a-link>
|
||||||
|
</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 AppAddModal from './AppAddModal.vue'
|
||||||
|
import AppDetailDrawer from './AppDetailDrawer.vue'
|
||||||
|
import AppGetSecretModal from './AppGetSecretModal.vue'
|
||||||
|
import { type AppResp, type AppQuery, deleteApp, exportApp, listApp, refreshAppSecret } 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')
|
||||||
|
|
||||||
|
const queryForm = reactive<AppQuery>({
|
||||||
|
name: '',
|
||||||
|
appKey: '',
|
||||||
|
sort: ['createTime,desc']
|
||||||
|
})
|
||||||
|
|
||||||
|
const {
|
||||||
|
tableData: dataList,
|
||||||
|
loading,
|
||||||
|
pagination,
|
||||||
|
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: '操作',
|
||||||
|
slotName: 'action',
|
||||||
|
width: 130,
|
||||||
|
align: 'center',
|
||||||
|
fixed: !isMobile() ? 'right' : undefined,
|
||||||
|
show: has.hasPermOr(['open:app:update', 'open:app:delete'])
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
// 重置
|
||||||
|
const reset = () => {
|
||||||
|
queryForm.name = ''
|
||||||
|
queryForm.appKey = ''
|
||||||
|
search()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除
|
||||||
|
const onDelete = (record: AppResp) => {
|
||||||
|
return handleDelete(() => deleteApp(record.id), {
|
||||||
|
content: `是否确定删除该条数据？`,
|
||||||
|
showModal: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 导出
|
||||||
|
const onExport = () => {
|
||||||
|
useDownload(() => exportApp(queryForm))
|
||||||
|
}
|
||||||
|
|
||||||
|
const AppAddModalRef = ref<InstanceType<typeof AppAddModal>>()
|
||||||
|
// 新增
|
||||||
|
const onAdd = () => {
|
||||||
|
AppAddModalRef.value?.onAdd()
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改
|
||||||
|
const onUpdate = (record: AppResp) => {
|
||||||
|
AppAddModalRef.value?.onUpdate(record.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
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()
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
Reference in New Issue
Block a user