feat: 对接oss

src/router/elegant/imports.ts

@@ -32,6 +32,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   system_dict_type: () => import("@/views/system/dict/type/index.vue"),
   system_menu: () => import("@/views/system/menu/index.vue"),
   system_notice: () => import("@/views/system/notice/index.vue"),
+  system_oss: () => import("@/views/system/oss/index.vue"),
   system_post: () => import("@/views/system/post/index.vue"),
   system_tenant: () => import("@/views/system/tenant/index.vue"),
   system_user: () => import("@/views/system/user/index.vue"),

src/router/elegant/routes.ts

@@ -202,6 +202,15 @@ export const generatedRoutes: GeneratedRoute[] = [
           i18nKey: 'route.system_notice'
         }
       },
+      {
+        name: 'system_oss',
+        path: '/system/oss',
+        component: 'view.system_oss',
+        meta: {
+          title: 'system_oss',
+          i18nKey: 'route.system_oss'
+        }
+      },
       {
         name: 'system_post',
         path: '/system/post',

src/router/elegant/transform.ts

@@ -182,6 +182,7 @@ const routeMap: RouteMap = {
   "system_dict_type": "/system/dict/type",
   "system_menu": "/system/menu",
   "system_notice": "/system/notice",
+  "system_oss": "/system/oss",
   "system_post": "/system/post",
   "system_tenant": "/system/tenant",
   "system_user": "/system/user",

src/service/api/system/config.ts

@@ -43,6 +43,14 @@ export function fetchBatchDeleteConfig(configIds: CommonType.IdType[]) {
   });
 }
 
+/** 根据Key获取值 */
+export function fetchGetConfigByKey(configKey: string) {
+  return request<string>({
+    url: `/system/config/configKey/${configKey}`,
+    method: 'get'
+  });
+}
+
 /** 刷新缓存 */
 export function fetchRefreshCache() {
   return request<boolean>({

src/service/api/system/oss.ts

@@ -0,0 +1,18 @@
+import { request } from '@/service/request';
+
+/** 获取文件管理列表 */
+export function fetchGetOssList(params?: Api.System.OssSearchParams) {
+  return request<Api.System.OssList>({
+    url: '/resource/oss/list',
+    method: 'get',
+    params
+  });
+}
+
+/** 批量删除文件管理 */
+export function fetchBatchDeleteOss(ossIds: CommonType.IdType[]) {
+  return request<boolean>({
+    url: `/resource/oss/${ossIds.join(',')}`,
+    method: 'delete'
+  });
+}

src/typings/api/system.api.d.ts

@@ -612,5 +612,32 @@ declare namespace Api {
       | 'wechat_mp'
       | 'wechat_enterprise'
       | 'gitlab';
+
+    /** oss */
+    type Oss = Common.CommonRecord<{
+      /** 对象存储主键 */
+      ossId: CommonType.IdType;
+      /** 租户编号 */
+      tenantId: CommonType.IdType;
+      /** 文件名 */
+      fileName: string;
+      /** 原名 */
+      originalName: string;
+      /** 后缀名 */
+      fileSuffix: string;
+      /** 文件预览 */
+      url: string;
+      /** 服务商 */
+      service: string;
+      /** 创建者 */
+      createByName: string;
+    }>;
+
+    /** oss search params */
+    type OssSearchParams = CommonType.RecordNullable<
+      Pick<Api.System.Oss, 'fileName' | 'originalName' | 'fileSuffix' | 'service'> & Api.Common.CommonSearchParams
+    >;
+    /** oss list */
+    type OssList = Api.Common.PaginatingQueryRecord<Oss>;
   }
 }

src/typings/elegant-router.d.ts

@@ -36,6 +36,7 @@ declare module "@elegant-router/types" {
     "system_dict_type": "/system/dict/type";
     "system_menu": "/system/menu";
     "system_notice": "/system/notice";
+    "system_oss": "/system/oss";
     "system_post": "/system/post";
     "system_tenant": "/system/tenant";
     "system_user": "/system/user";
@@ -115,6 +116,7 @@ declare module "@elegant-router/types" {
     | "system_dict_type"
     | "system_menu"
     | "system_notice"
+    | "system_oss"
     | "system_post"
     | "system_tenant"
     | "system_user"

src/utils/common.ts

@@ -85,6 +85,12 @@ export function isNull(value: any) {
   return value === undefined || value === null || value === '' || value === 'undefined' || value === 'null';
 }
 
+/** 判断是否为图片类型 */
+export function isImage(suffix: string) {
+  const imgSuffixList = ['.jpg', '.jpeg', '.png', '.gif', '.webp'];
+  return imgSuffixList.includes(suffix.toLowerCase());
+}
+
 /**
  * 构造树型结构数据
  *

src/views/system/oss/index.vue

@@ -0,0 +1,227 @@
+<script setup lang="tsx">
+import { ref } from 'vue';
+import { NButton, NImage, NPopconfirm } from 'naive-ui';
+import { fetchBatchDeleteOss, fetchGetOssList } from '@/service/api/system/oss';
+import { fetchGetConfigByKey } from '@/service/api/system/config';
+import { useAppStore } from '@/store/modules/app';
+import { useAuth } from '@/hooks/business/auth';
+import { useTable, useTableOperate } from '@/hooks/common/table';
+import { useDownload } from '@/hooks/business/download';
+import { isImage } from '@/utils/common';
+import { $t } from '@/locales';
+import OssSearch from './modules/oss-search.vue';
+import type { TableDataWithIndex } from '~/packages/hooks/src';
+
+defineOptions({
+  name: 'OssList'
+});
+
+const appStore = useAppStore();
+const { hasAuth } = useAuth();
+const { oss } = useDownload();
+const preview = ref(false);
+
+const {
+  columns,
+  columnChecks,
+  data,
+  getData,
+  getDataByPage,
+  loading,
+  mobilePagination,
+  searchParams,
+  resetSearchParams
+} = useTable({
+  apiFn: fetchGetOssList,
+  apiParams: {
+    pageNum: 1,
+    pageSize: 10,
+    // if you want to use the searchParams in Form, you need to define the following properties, and the value is null
+    // the value can not be undefined, otherwise the property in Form will not be reactive
+    fileName: null,
+    originalName: null,
+    fileSuffix: null,
+    service: null
+  },
+  columns: () => [
+    {
+      type: 'selection',
+      align: 'center',
+      width: 48
+    },
+    {
+      key: 'index',
+      title: $t('common.index'),
+      align: 'center',
+      width: 64
+    },
+    {
+      key: 'fileName',
+      title: '文件名',
+      align: 'center',
+      ellipsis: {
+        tooltip: true
+      },
+      minWidth: 120
+    },
+    {
+      key: 'originalName',
+      title: '原名',
+      align: 'center',
+      ellipsis: {
+        tooltip: true
+      },
+      minWidth: 120
+    },
+    {
+      key: 'fileSuffix',
+      title: '后缀名',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'url',
+      title: '文件预览',
+      align: 'center',
+      ellipsis: {
+        tooltip: true
+      },
+      minWidth: 120,
+      render: row => {
+        if (preview.value && isImage(row.fileSuffix)) {
+          return <NImage class="h-40px w-40px object-contain" src={row.url} />;
+        }
+        return <span>{row.url}</span>;
+      }
+    },
+    {
+      key: 'createTime',
+      title: '创建时间',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'createByName',
+      title: '上传人',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'service',
+      title: '服务商',
+      align: 'center',
+      minWidth: 120
+    },
+    {
+      key: 'operate',
+      title: $t('common.operate'),
+      align: 'center',
+      width: 130,
+      render: row => {
+        const downloadBtn = () => {
+          return (
+            <NButton type="primary" ghost size="small" onClick={() => handleDownload(row)}>
+              下载
+            </NButton>
+          );
+        };
+
+        const deleteBtn = () => {
+          if (!hasAuth('system:oss:remove')) {
+            return null;
+          }
+          return (
+            <NPopconfirm onPositiveClick={() => handleDelete(row.ossId!)}>
+              {{
+                default: () => $t('common.confirmDelete'),
+                trigger: () => (
+                  <NButton type="error" ghost size="small">
+                    {$t('common.delete')}
+                  </NButton>
+                )
+              }}
+            </NPopconfirm>
+          );
+        };
+
+        return (
+          <div class="flex-center gap-8px">
+            {downloadBtn()}
+            {deleteBtn()}
+          </div>
+        );
+      }
+    }
+  ]
+});
+
+const { checkedRowKeys, onBatchDeleted, onDeleted } = useTableOperate(data, getData);
+
+async function handleBatchDelete() {
+  // request
+  const { error } = await fetchBatchDeleteOss(checkedRowKeys.value);
+  if (error) return;
+  onBatchDeleted();
+}
+
+async function handleDelete(ossId: CommonType.IdType) {
+  // request
+  const { error } = await fetchBatchDeleteOss([ossId]);
+  if (error) return;
+  onDeleted();
+}
+
+async function getConfigKey() {
+  const { data: previewStr, error } = await fetchGetConfigByKey('sys.oss.previewListResource');
+  if (error) return;
+  preview.value = previewStr === 'true';
+}
+getConfigKey();
+
+function handleDownload(row: TableDataWithIndex<Api.System.Oss>) {
+  oss(row.ossId);
+}
+</script>
+
+<template>
+  <div class="min-h-500px flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
+    <OssSearch v-model:model="searchParams" @reset="resetSearchParams" @search="getDataByPage" />
+    <NCard title="文件管理列表" :bordered="false" size="small" class="sm:flex-1-hidden card-wrapper">
+      <template #header-extra>
+        <TableHeaderOperation
+          v-model:columns="columnChecks"
+          :disabled-delete="checkedRowKeys.length === 0"
+          :loading="loading"
+          :show-add="false"
+          :show-delete="hasAuth('system:oss:remove')"
+          :show-export="false"
+          @delete="handleBatchDelete"
+          @refresh="getData"
+        >
+          <template #prefix>
+            <NSwitch v-model:value="preview">
+              <template #checked>开启预览</template>
+              <template #unchecked>关闭预览</template>
+            </NSwitch>
+          </template>
+        </TableHeaderOperation>
+      </template>
+      <NDataTable
+        v-model:checked-row-keys="checkedRowKeys"
+        :columns="columns"
+        :data="data"
+        size="small"
+        :flex-height="!appStore.isMobile"
+        :scroll-x="962"
+        :loading="loading"
+        remote
+        :row-key="row => row.ossId"
+        :pagination="mobilePagination"
+        :row-props="() => ({ class: 'w-70px h-70px' })"
+        class="sm:h-full"
+      />
+    </NCard>
+  </div>
+</template>
+
+<style scoped></style>

src/views/system/oss/modules/oss-search.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { useNaiveForm } from '@/hooks/common/form';
+
+defineOptions({
+  name: 'OssSearch'
+});
+
+interface Emits {
+  (e: 'reset'): void;
+  (e: 'search'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { formRef, validate, restoreValidation } = useNaiveForm();
+
+const model = defineModel<Api.System.OssSearchParams>('model', { required: true });
+
+async function reset() {
+  await restoreValidation();
+  emit('reset');
+}
+
+async function search() {
+  await validate();
+  emit('search');
+}
+</script>
+
+<template>
+  <NCard :bordered="false" size="small" class="card-wrapper">
+    <NCollapse>
+      <NCollapseItem :title="$t('common.search')" name="user-search">
+        <NForm ref="formRef" :model="model" label-placement="left" :label-width="80">
+          <NGrid responsive="screen" item-responsive>
+            <NFormItemGi span="24 s:12 m:6" label="文件名" path="fileName" class="pr-24px">
+              <NInput v-model:value="model.fileName" placeholder="请输入文件名" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="原名" path="originalName" class="pr-24px">
+              <NInput v-model:value="model.originalName" placeholder="请输入原名" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="后缀名" path="fileSuffix" class="pr-24px">
+              <NInput v-model:value="model.fileSuffix" placeholder="请输入后缀名" />
+            </NFormItemGi>
+            <NFormItemGi span="24 s:12 m:6" label="服务商" path="service" class="pr-24px">
+              <NInput v-model:value="model.service" placeholder="请输入服务商" />
+            </NFormItemGi>
+            <NFormItemGi span="24" class="pr-24px">
+              <NSpace class="w-full" justify="end">
+                <NButton @click="reset">
+                  <template #icon>
+                    <icon-ic-round-refresh class="text-icon" />
+                  </template>
+                  {{ $t('common.reset') }}
+                </NButton>
+                <NButton type="primary" ghost @click="search">
+                  <template #icon>
+                    <icon-ic-round-search class="text-icon" />
+                  </template>
+                  {{ $t('common.search') }}
+                </NButton>
+              </NSpace>
+            </NFormItemGi>
+          </NGrid>
+        </NForm>
+      </NCollapseItem>
+    </NCollapse>
+  </NCard>
+</template>
+
+<style scoped></style>