mirror of
https://github.com/continew-org/continew-admin-ui.git
synced 2025-09-10 20:57:10 +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