feat: 新增能力开放模块应用管理功能

src/apis/open/app.ts

@@ -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`)
+}

src/views/open/app/AppAddModal.vue

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

src/views/open/app/AppDetailDrawer.vue

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

src/views/open/app/AppGetSecretModal.vue

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