feat(文件管理): 文件管理部分接口

2023-10-31 14:46:03 +08:00 · 2023-10-31 14:46:03 +08:00 · fdbd90c8a0
parent 6a375e5e9f
commit fdbd90c8a0
11 changed files with 148 additions and 66 deletions
--- a/frontend/config/vite.config.dev.ts
+++ b/frontend/config/vite.config.dev.ts
@ -17,6 +17,11 @@ export default mergeConfig(
          changeOrigin: true,
          rewrite: (path: string) => path.replace(/^\/front/, ''),
        },
+        '/file': {
+          target: 'http://172.16.200.18:8081/',
+          changeOrigin: true,
+          rewrite: (path: string) => path.replace(/^\/front\/file/, ''),
+        },
        '/base-display': {
          target: 'http://172.16.200.18:8081/',
          changeOrigin: true,
--- a/frontend/src/api/http/index.ts
+++ b/frontend/src/api/http/index.ts
@ -183,7 +183,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
        // authenticationScheme: 'Bearer',
        authenticationScheme: '',
        baseURL: `${window.location.origin}/${import.meta.env.VITE_API_BASE_URL as string}`,
-        timeout: 30 * 1000,
+        timeout: 60 * 1000,
        headers: { 'Content-Type': ContentTypeEnum.JSON },
        // 如果是form-data格式
        // headers: { 'Content-Type': ContentTypeEnum.FORM_URLENCODED },
--- a/frontend/src/api/modules/project-management/fileManagement.ts
+++ b/frontend/src/api/modules/project-management/fileManagement.ts
@ -6,11 +6,13 @@ import {
  DeleteModuleUrl,
  DownloadFileUrl,
  FilePageUrl,
+  GetFileDetailUrl,
  GetFileTypesUrl,
  GetModuleCountUrl,
  GetModuleUrl,
  MoveModuleUrl,
  ReuploadFileUrl,
+  ToggleJarFileUrl,
  UpdateFileUrl,
  UpdateModuleUrl,
  UploadFileUrl,
@ -20,6 +22,7 @@ import type { CommonList } from '@/models/common';
 import type {
  AddModuleParams,
  BatchFileApiParams,
+  FileDetail,
  FileItem,
  FileListQueryParams,
  ModuleCount,
@ -100,3 +103,13 @@ export function deleteModule(id: string) {
 export function getFileTypes(id: string) {
  return MSR.get<string[]>({ url: GetFileTypesUrl, params: id });
 }
+
+// 获取文件详情
+export function getFileDetail(id: string) {
+  return MSR.get<FileDetail>({ url: GetFileDetailUrl, params: id });
+}
+
+// jar文件启用禁用
+export function toggleJarFileStatus(id: string, status: boolean) {
+  return MSR.get({ url: `${ToggleJarFileUrl}/${id}/${status}` });
+}
--- a/frontend/src/api/requrls/project-management/fileManagement.ts
+++ b/frontend/src/api/requrls/project-management/fileManagement.ts
@ -14,3 +14,5 @@ export const GetModuleCountUrl = '/project/file/module/count'; // 模块统计
 export const OriginImgUrl = '/file/preview/original'; // 预览图片文件接口-原图
 export const CompressImgUrl = '/file/preview/compressed'; // 预览图片文件接口-缩略图
 export const GetFileTypesUrl = '/project/file/type'; // 获取文件类型集合
+export const GetFileDetailUrl = '/project/file/get'; // 查看文件详情
+export const ToggleJarFileUrl = '/project/file/jar-file-status'; // jar 文件启用禁用
--- a/frontend/src/components/business/ms-detail-drawer/index.vue
+++ b/frontend/src/components/business/ms-detail-drawer/index.vue
@ -65,12 +65,12 @@
    visible: boolean;
    title: string;
    width: number;
-    detailId: string | number; // 详情 id
+    detailId: string; // 详情 id
    detailIndex: number; // 详情 下标
    tableData: any[]; // 表格数据
    pagination?: MsPaginationI; // 分页器对象
    pageChange: (page: number) => Promise<void>; // 分页变更函数
-    getDetailFunc: (id: string | number) => Promise<any>; // 获取详情的请求函数
+    getDetailFunc: (id: string) => Promise<any>; // 获取详情的请求函数
  }>();

  const emit = defineEmits(['update:visible', 'loaded']);
@ -95,7 +95,7 @@
  const loading = ref(false);
  const detail = ref<any>({});

-  const activeDetailId = ref<string | number>(props.detailId);
+  const activeDetailId = ref<string>(props.detailId);

  async function initDetail() {
    try {
--- a/frontend/src/components/business/ms-thumbnail-card/index.vue
+++ b/frontend/src/components/business/ms-thumbnail-card/index.vue
@ -7,8 +7,11 @@
      <a-image
        v-if="fileType === 'image'"
        :src="props.url"
+        fit="contain"
        class="absolute top-0 h-full w-full"
        :preview="false"
+        width="100%"
+        height="100%"
        hide-footer
      />
      <MsIcon
--- a/frontend/src/components/pure/ms-drawer/index.vue
+++ b/frontend/src/components/pure/ms-drawer/index.vue
@ -153,8 +153,8 @@
    const handleMouseMove = (_event: MouseEvent) => {
      if (resizing.value) {
        const newWidth = initialWidth + (startX - _event.clientX); // 新的宽度等于当前抽屉宽度+鼠标移动的距离
-        if (newWidth >= (props.width || 480) && newWidth <= window.innerWidth * 0.8) {
-          // 最大最小宽度限制，最小宽度为传入的width或480，最大宽度为视图窗口宽度的80%
+        if (newWidth >= (props.width || 480) && newWidth <= window.innerWidth * 0.9) {
+          // 最大最小宽度限制，最小宽度为传入的width或480，最大宽度为视图窗口宽度的90%
          drawerWidth.value = newWidth;
        }
      }
@ -215,6 +215,7 @@
  .handle {
    @apply absolute left-0 top-0 flex h-full items-center;

+    z-index: 1;
    width: 8px;
    background-color: var(--color-neutral-3);
    cursor: col-resize;
--- a/frontend/src/models/projectManagement/file.ts
+++ b/frontend/src/models/projectManagement/file.ts
@ -21,6 +21,15 @@ export interface FileItem {
  updateTime: number;
  previewSrc: string; // 预览地址
  size: number;
+  enable: boolean; // jar文件启用禁用
+}
+// 文件详情
+export interface FileDetail extends FileItem {
+  projectId: string;
+  moduleName: string; // 所属模块名
+  moduleId: string;
+  createUser: string;
+  createTime: number;
 }
 // 上传文件参数
 export interface UploadFileParams {
--- a/frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue
+++ b/frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue
@ -7,7 +7,7 @@
    :title="t('project.fileManagement.detail')"
    :detail-id="props.fileId"
    :detail-index="props.activeFileIndex"
-    :get-detail-func="async () => ({})"
+    :get-detail-func="getFileDetail"
    :pagination="props.pagination"
    :table-data="props.tableData"
    :page-change="props.pageChange"
@ -56,9 +56,9 @@
            </a-space>
          </a-skeleton>
          <template v-else>
-            <div class="mb-[16px] w-[102px]">
-              <a-spin :loading="replaceLoading">
-                <MsPreviewCard
+            <div class="mb-[16px] h-[102px] w-[102px]">
+              <a-spin class="h-full w-full" :loading="replaceLoading">
+                <MsThumbnailCard
                  mode="hover"
                  :type="detail?.fileType"
                  :url="`${CompressImgUrl}/${userStore.id}/${detail.id}`"
@ -75,7 +75,7 @@
              <template #value="{ item }">
                <div class="flex flex-wrap items-center">
                  <a-tooltip
-                    :content="(item.value as string)"
+                    :content="`${item.value}`"
                    :mouse-enter-delay="300"
                    :disabled="item.value === undefined || item.value === null || item.value?.toString() === ''"
                    mini
@ -91,7 +91,11 @@
                  <template v-if="item.key === 'name'">
                    <popConfirm
                      mode="fileRename"
-                      :field-config="{ placeholder: t('project.fileManagement.fileNamePlaceholder') }"
+                      :field-config="{
+                        field: detail.name,
+                        placeholder: t('project.fileManagement.fileNamePlaceholder'),
+                      }"
+                      :node-id="detail.id"
                      :all-names="[]"
                      @rename-finish="detailDrawerRef?.initDetail"
                    >
@ -117,6 +121,7 @@
                        maxLength: 250,
                        isTextArea: true,
                      }"
+                      :node-id="detail.id"
                      :all-names="[]"
                      @update-desc-finish="detailDrawerRef?.initDetail"
                    >
@ -189,15 +194,15 @@
  import useTable from '@/components/pure/ms-table/useTable';
  import { getFileEnum } from '@/components/pure/ms-upload/iconMap';
  import MsDetailDrawer from '@/components/business/ms-detail-drawer/index.vue';
-  import MsPreviewCard from '@/components/business/ms-thumbnail-card/index.vue';
+  import MsThumbnailCard from '@/components/business/ms-thumbnail-card/index.vue';
  import popConfirm from './popConfirm.vue';

-  import { reuploadFile, updateFile } from '@/api/modules/project-management/fileManagement';
+  import { getFileDetail, reuploadFile, updateFile } from '@/api/modules/project-management/fileManagement';
  import { CompressImgUrl, OriginImgUrl } from '@/api/requrls/project-management/fileManagement';
  import { useI18n } from '@/hooks/useI18n';
  import useLocale from '@/locale/useLocale';
  import useUserStore from '@/store/modules/user';
-  import { downloadUrlFile } from '@/utils';
+  import { downloadUrlFile, formatFileSize } from '@/utils';

  import { TableKeyEnum } from '@/enums/tableEnum';

@ -249,11 +254,13 @@
  }

  const fileType = ref('unknown');
+  const renameTitle = ref(''); // 重命名的文件名称

  function loadedFile(detail: any) {
    if (detail.fileType) {
      fileType.value = getFileEnum(`/${detail.fileType.toLowerCase()}`);
    }
+    renameTitle.value = detail.name;
    fileDescriptions.value = [
      {
        label: t('project.fileManagement.name'),
@ -271,15 +278,15 @@
      },
      {
        label: t('project.fileManagement.size'),
-        value: detail.size,
+        value: formatFileSize(detail.size),
      },
      {
        label: t('project.fileManagement.creator'),
-        value: detail.creator,
+        value: detail.createUser,
      },
      {
        label: t('project.fileManagement.fileModule'),
-        value: detail.fileModule,
+        value: detail.moduleName,
        key: 'fileModule',
      },
      {
--- a/frontend/src/views/project-management/fileManagement/components/popConfirm.vue
+++ b/frontend/src/views/project-management/fileManagement/components/popConfirm.vue
@ -92,6 +92,9 @@
    () => props.fieldConfig?.field,
    (val) => {
      form.value.field = val || '';
+    },
+    {
+      deep: true,
    }
  );

@ -177,10 +180,12 @@
    }
  }

-  function reset() {
+  function reset(val: boolean) {
+    if (!val) {
      form.value.field = '';
      formRef.value?.resetFields();
    }
+  }
 </script>

 <style lang="less" scoped></style>
--- a/frontend/src/views/project-management/fileManagement/components/rightBox.vue
+++ b/frontend/src/views/project-management/fileManagement/components/rightBox.vue
@ -50,12 +50,15 @@
            </a-button>
          </a-tooltip>
        </template>
+        <template #size="{ record }">
+          <span>{{ formatFileSize(record.size) }}</span>
+        </template>
        <template #action="{ record }">
          <MsButton type="text" class="mr-[8px]" @click="handleDownload(record)">
            {{ t('project.fileManagement.download') }}
          </MsButton>
          <MsTableMoreAction
-            :list="record.fileType === 'jar' ? jarFileActions : normalFileActions"
+            :list="record.fileType === 'jar' ? getJarFileActions(record) : normalFileActions"
            @select="handleMoreActionSelect($event, record)"
          />
        </template>
@ -88,7 +91,7 @@
            :type="item.fileType"
            :url="`${CompressImgUrl}/${userStore.id}/${item.id}`"
            :footer-text="item.name"
-            :more-actions="item.fileType === 'JAR' ? jarFileActions : normalFileActions"
+            :more-actions="item.fileType === 'JAR' ? getJarFileActions(item) : normalFileActions"
            @click="openFileDetail(item.id, index)"
            @action-select="handleMoreActionSelect($event, item)"
          />
@ -293,6 +296,7 @@
    downloadFile,
    getFileList,
    getFileTypes,
+    toggleJarFileStatus,
    updateFile,
    uploadFile,
  } from '@/api/modules/project-management/fileManagement';
@ -303,7 +307,7 @@
  import useAppStore from '@/store/modules/app';
  import useAsyncTaskStore from '@/store/modules/app/asyncTask';
  import useUserStore from '@/store/modules/user';
-  import { characterLimit, downloadByteFile } from '@/utils';
+  import { characterLimit, downloadByteFile, formatFileSize } from '@/utils';

  import type { FileItem, FileListQueryParams } from '@/models/projectManagement/file';
  import { RouteEnum } from '@/enums/routeEnum';
@ -343,6 +347,7 @@
      const res = await getFileTypes(appStore.currentProjectId);
      tableFileTypeOptions.value = res;
    } catch (error) {
+      // eslint-disable-next-line no-console
      console.log(error);
    } finally {
      fileTypeLoading.value = false;
@ -376,14 +381,19 @@
    },
  ];

+  function getJarFileActions(record: FileItem) {
    const jarFileActions: ActionsItem[] = [
      {
        label: 'project.fileManagement.move',
        eventTag: 'move',
      },
+      {
+        label: 'common.enable',
+        eventTag: 'toggle',
+      },
      {
        label: 'common.disable',
-      eventTag: 'disabled',
+        eventTag: 'toggle',
      },
      {
        isDivider: true,
@ -394,6 +404,11 @@
        danger: true,
      },
    ];
+    if (record.enable) {
+      return jarFileActions.filter((e) => e.label !== 'common.enable');
+    }
+    return jarFileActions.filter((e) => e.label !== 'common.disable');
+  }

  const columns: MsTableColumn = [
    {
@ -407,6 +422,11 @@
      dataIndex: 'fileType',
      width: 90,
    },
+    {
+      title: 'project.fileManagement.size',
+      dataIndex: 'size',
+      slotName: 'size',
+    },
    {
      title: 'project.fileManagement.tag',
      dataIndex: 'tags',
@ -722,9 +742,11 @@
  }

  /**
-   * 禁用 jar 文件
+   * 启用/禁用 jar 文件
   */
-  function disabledFile(record: FileItem) {
+  async function toggleJarFile(record: FileItem) {
+    if (record.enable) {
+      // 禁用
      openModal({
        type: 'warning',
        title: t('project.fileManagement.disabledFileTipTitle', { name: characterLimit(record.name) }),
@ -734,6 +756,7 @@
        maskClosable: false,
        onBeforeOk: async () => {
          try {
+            await toggleJarFileStatus(record.id, !record.enable);
            Message.success(t('common.disableSuccess'));
            if (showType.value === 'card') {
              cardListRef.value?.reload();
@ -747,6 +770,20 @@
        },
        hideCancel: false,
      });
+    } else {
+      try {
+        await toggleJarFileStatus(record.id, !record.enable);
+        Message.success(t('common.enableSuccess'));
+        if (showType.value === 'card') {
+          cardListRef.value?.reload();
+        } else {
+          loadList();
+        }
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
+    }
  }

  /**
@ -763,8 +800,8 @@
      case 'delete':
        delFile(record, false);
        break;
-      case 'disabled':
-        disabledFile(record);
+      case 'toggle':
+        toggleJarFile(record);
        break;
      default:
        break;