mirror of
				https://github.com/continew-org/continew-admin-ui.git
				synced 2025-11-04 08:59:22 +08:00 
			
		
		
		
	refactor: 重构及优化应用管理
This commit is contained in:
		@@ -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
									
								
							
							
						
						
									
										21
									
								
								src/apis/open/type.ts
									
									
									
									
									
										Normal 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 {}
 | 
			
		||||
@@ -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 {
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										28
									
								
								src/components/CellCopy/index.vue
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										28
									
								
								src/components/CellCopy/index.vue
									
									
									
									
									
										Normal 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>
 | 
			
		||||
@@ -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) {
 | 
			
		||||
 
 | 
			
		||||
@@ -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
 | 
			
		||||
 
 | 
			
		||||
							
								
								
									
										1
									
								
								src/types/components.d.ts
									
									
									
									
										vendored
									
									
								
							
							
						
						
									
										1
									
								
								src/types/components.d.ts
									
									
									
									
										vendored
									
									
								
							@@ -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']
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
@@ -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>
 | 
			
		||||
      <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-button size="mini" style="margin-left: 2px" @click="onRefreshAK(record)">
 | 
			
		||||
          <template #icon><icon-refresh /></template>
 | 
			
		||||
          </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>
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user