From fdbd90c8a0a10adfd59049cc0c1b735c0f63c89e Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Tue, 31 Oct 2023 14:46:03 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86=E9=83=A8=E5=88=86=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/config/vite.config.dev.ts            |   5 +
 frontend/src/api/http/index.ts                |   2 +-
 .../project-management/fileManagement.ts      |  13 ++
 .../project-management/fileManagement.ts      |   2 +
 .../business/ms-detail-drawer/index.vue       |   6 +-
 .../business/ms-thumbnail-card/index.vue      |   3 +
 .../src/components/pure/ms-drawer/index.vue   |   5 +-
 frontend/src/models/projectManagement/file.ts |   9 ++
 .../components/fileDetailDrawer.vue           |  31 +++--
 .../fileManagement/components/popConfirm.vue  |  11 +-
 .../fileManagement/components/rightBox.vue    | 127 +++++++++++-------
 11 files changed, 148 insertions(+), 66 deletions(-)

diff --git a/frontend/config/vite.config.dev.ts b/frontend/config/vite.config.dev.ts
index 837860fcda..62fbe187a8 100644
--- 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,
diff --git a/frontend/src/api/http/index.ts b/frontend/src/api/http/index.ts
index 119ce565b4..69c7e9d2dd 100644
--- 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 },
diff --git a/frontend/src/api/modules/project-management/fileManagement.ts b/frontend/src/api/modules/project-management/fileManagement.ts
index c50a14e008..7616dda895 100644
--- 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}` });
+}
diff --git a/frontend/src/api/requrls/project-management/fileManagement.ts b/frontend/src/api/requrls/project-management/fileManagement.ts
index 6008ab7ba4..3064d3cdb8 100644
--- 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 文件启用禁用
diff --git a/frontend/src/components/business/ms-detail-drawer/index.vue b/frontend/src/components/business/ms-detail-drawer/index.vue
index 54bb8e2d4d..df41f5e6ea 100644
--- 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 {
diff --git a/frontend/src/components/business/ms-thumbnail-card/index.vue b/frontend/src/components/business/ms-thumbnail-card/index.vue
index c460b6fd7e..10f66ee6c7 100644
--- 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
diff --git a/frontend/src/components/pure/ms-drawer/index.vue b/frontend/src/components/pure/ms-drawer/index.vue
index 3897638a40..4fca279db7 100644
--- 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;
diff --git a/frontend/src/models/projectManagement/file.ts b/frontend/src/models/projectManagement/file.ts
index 8ca6bea333..d1aa0dcbd0 100644
--- 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 {
diff --git a/frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue b/frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue
index f504014b9e..a69b5052f7 100644
--- 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',
       },
       {
diff --git a/frontend/src/views/project-management/fileManagement/components/popConfirm.vue b/frontend/src/views/project-management/fileManagement/components/popConfirm.vue
index 3ba72ef878..8fb63a733d 100644
--- 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,9 +180,11 @@
     }
   }
 
-  function reset() {
-    form.value.field = '';
-    formRef.value?.resetFields();
+  function reset(val: boolean) {
+    if (!val) {
+      form.value.field = '';
+      formRef.value?.resetFields();
+    }
   }
 </script>
 
diff --git a/frontend/src/views/project-management/fileManagement/components/rightBox.vue b/frontend/src/views/project-management/fileManagement/components/rightBox.vue
index d286f5c9af..4b4510937d 100644
--- 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,24 +381,34 @@
     },
   ];
 
-  const jarFileActions: ActionsItem[] = [
-    {
-      label: 'project.fileManagement.move',
-      eventTag: 'move',
-    },
-    {
-      label: 'common.disable',
-      eventTag: 'disabled',
-    },
-    {
-      isDivider: true,
-    },
-    {
-      label: 'project.fileManagement.delete',
-      eventTag: 'delete',
-      danger: true,
-    },
-  ];
+  function getJarFileActions(record: FileItem) {
+    const jarFileActions: ActionsItem[] = [
+      {
+        label: 'project.fileManagement.move',
+        eventTag: 'move',
+      },
+      {
+        label: 'common.enable',
+        eventTag: 'toggle',
+      },
+      {
+        label: 'common.disable',
+        eventTag: 'toggle',
+      },
+      {
+        isDivider: true,
+      },
+      {
+        label: 'project.fileManagement.delete',
+        eventTag: 'delete',
+        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,31 +742,48 @@
   }
 
   /**
-   * 禁用 jar 文件
+   * 启用/禁用 jar 文件
    */
-  function disabledFile(record: FileItem) {
-    openModal({
-      type: 'warning',
-      title: t('project.fileManagement.disabledFileTipTitle', { name: characterLimit(record.name) }),
-      content: t('project.fileManagement.disabledFileTipContent'),
-      okText: t('common.confirmDisable'),
-      cancelText: t('common.cancel'),
-      maskClosable: false,
-      onBeforeOk: async () => {
-        try {
-          Message.success(t('common.disableSuccess'));
-          if (showType.value === 'card') {
-            cardListRef.value?.reload();
-          } else {
-            loadList();
+  async function toggleJarFile(record: FileItem) {
+    if (record.enable) {
+      // 禁用
+      openModal({
+        type: 'warning',
+        title: t('project.fileManagement.disabledFileTipTitle', { name: characterLimit(record.name) }),
+        content: t('project.fileManagement.disabledFileTipContent'),
+        okText: t('common.confirmDisable'),
+        cancelText: t('common.cancel'),
+        maskClosable: false,
+        onBeforeOk: async () => {
+          try {
+            await toggleJarFileStatus(record.id, !record.enable);
+            Message.success(t('common.disableSuccess'));
+            if (showType.value === 'card') {
+              cardListRef.value?.reload();
+            } else {
+              loadList();
+            }
+          } catch (error) {
+            // eslint-disable-next-line no-console
+            console.log(error);
           }
-        } catch (error) {
-          // eslint-disable-next-line no-console
-          console.log(error);
+        },
+        hideCancel: false,
+      });
+    } else {
+      try {
+        await toggleJarFileStatus(record.id, !record.enable);
+        Message.success(t('common.enableSuccess'));
+        if (showType.value === 'card') {
+          cardListRef.value?.reload();
+        } else {
+          loadList();
         }
-      },
-      hideCancel: false,
-    });
+      } 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;