From eb9e4253e758a727e6b0d91d18ba0148298982a9 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Thu, 2 Nov 2023 10:13: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&=E9=83=A8=E5=88=86=E7=BB=84=E4=BB=B6=E8=B0=83?=
 =?UTF-8?q?=E6=95=B4&=E6=97=A0=E6=9D=83=E9=99=90=E7=99=BB=E5=BD=95?=
 =?UTF-8?q?=E6=97=A0=E9=99=90=E9=87=8D=E5=AE=9A=E5=90=91=E9=97=AE=E9=A2=98?=
 =?UTF-8?q?=E8=A7=A3=E5=86=B3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/ms-detail-drawer/index.vue       | 14 ++-
 .../src/components/pure/ms-button/index.vue   |  4 +-
 .../components/pure/ms-description/index.vue  | 15 ++-
 .../src/components/pure/ms-tag/ms-tag.vue     |  9 +-
 frontend/src/models/projectManagement/file.ts |  3 +-
 frontend/src/router/guard/index.ts            |  4 +-
 .../components/fileDetailDrawer.vue           | 91 +++++++++++++------
 .../fileManagement/components/rightBox.vue    | 32 +++++--
 8 files changed, 120 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/business/ms-detail-drawer/index.vue b/frontend/src/components/business/ms-detail-drawer/index.vue
index df41f5e6ea..62f3da004c 100644
--- a/frontend/src/components/business/ms-detail-drawer/index.vue
+++ b/frontend/src/components/business/ms-detail-drawer/index.vue
@@ -129,11 +129,11 @@
   // 当前查看的是否是总数据的第一条数据，用当前查看数据的下标是否等于0，且当前页码是否等于1
   const activeDetailIsFirst = computed(() => activeDetailIndex.value === 0 && props.pagination?.current === 1);
   const activeDetailIsLast = computed(
-    // 当前查看的是否是总数据的最后一条数据，用当前页码*每页条数+当前查看的条数下标，是否等于总条数
+    // 当前查看的是否是总数据的最后一条数据，用(当前页码-1)*每页条数+当前查看的条数下标，是否等于总条数
     () =>
       activeDetailIndex.value === props.tableData.length - 1 &&
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      props.pagination!.current * props.pagination!.pageSize + activeDetailIndex.value >=
+      (props.pagination!.current - 1) * props.pagination!.pageSize + (activeDetailIndex.value + 1) >=
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         props.pagination!.total
   );
@@ -158,6 +158,7 @@
         activeDetailId.value = props.tableData[activeDetailIndex.value - 1].id;
         activeDetailIndex.value -= 1;
       }
+      initDetail();
     }
   }
 
@@ -181,13 +182,16 @@
         activeDetailId.value = props.tableData[activeDetailIndex.value + 1].id;
         activeDetailIndex.value += 1;
       }
+      initDetail();
     }
   }
 
   watch(
-    () => activeDetailId.value,
-    () => {
-      initDetail();
+    () => innerVisible.value,
+    (val) => {
+      if (val) {
+        initDetail();
+      }
     }
   );
 
diff --git a/frontend/src/components/pure/ms-button/index.vue b/frontend/src/components/pure/ms-button/index.vue
index 5b078fa297..0a13eafbf0 100644
--- a/frontend/src/components/pure/ms-button/index.vue
+++ b/frontend/src/components/pure/ms-button/index.vue
@@ -1,11 +1,12 @@
 <template>
   <div
     :class="`ms-button ms-button-${props.type} ms-button--${props.status} ${
-      props.disabled ? 'ms-button--disabled' : ''
+      props.disabled || props.loading ? 'ms-button--disabled' : ''
     }`"
     @click="clickHandler"
   >
     <slot></slot>
+    <icon-loading v-if="props.loading" />
   </div>
 </template>
 
@@ -15,6 +16,7 @@
       type?: 'text' | 'icon' | 'button';
       status?: 'primary' | 'danger' | 'secondary';
       disabled?: boolean;
+      loading?: boolean;
     }>(),
     {
       type: 'text',
diff --git a/frontend/src/components/pure/ms-description/index.vue b/frontend/src/components/pure/ms-description/index.vue
index dbdf9720a0..3090ef0d03 100644
--- a/frontend/src/components/pure/ms-description/index.vue
+++ b/frontend/src/components/pure/ms-description/index.vue
@@ -22,11 +22,13 @@
         <slot name="item-value" :item="item">
           <template v-if="item.isTag">
             <MsTag
-              v-for="tag of item.value"
+              v-for="tag of Array.isArray(item.value) ? item.value : [item.value]"
               :key="`${tag}`"
               theme="outline"
               color="var(--color-text-n8)"
               class="mb-[8px] mr-[8px] font-normal !text-[var(--color-text-1)]"
+              :closable="item.closable"
+              @close="emit('tagClose', tag, item)"
             >
               {{ tag }}
             </MsTag>
@@ -106,6 +108,7 @@
     value: (string | number) | (string | number)[];
     key?: string;
     isTag?: boolean; // 是否标签
+    closable?: boolean; // 标签是否可关闭
     showTagAdd?: boolean; // 是否显示添加标签
     isButton?: boolean;
     showCopy?: boolean;
@@ -120,7 +123,7 @@
       column?: number;
       descriptions: Description[];
       labelWidth?: string;
-      addTagFunc?: (val: string) => Promise<void>;
+      addTagFunc?: (val: string, item: Description) => Promise<void>;
     }>(),
     {
       column: 1,
@@ -128,6 +131,7 @@
   );
   const emit = defineEmits<{
     (e: 'addTag', val: string): void;
+    (e: 'tagClose', tag: string | number, item: Description): void;
   }>();
 
   const { t } = useI18n();
@@ -163,6 +167,10 @@
    * @param item 当前标签项
    */
   async function handleAddTag(item: Description) {
+    if (addTagInput.value.trim() === '') {
+      showTagInput.value = false;
+      return;
+    }
     if (Array.isArray(item.value) && item.value.includes(addTagInput.value)) {
       tagInputError.value = t('ms.description.addTagRepeat');
       return;
@@ -171,7 +179,7 @@
     try {
       tagInputLoading.value = true;
       if (props.addTagFunc && typeof props.addTagFunc === 'function') {
-        await props.addTagFunc(addTagInput.value);
+        await props.addTagFunc(addTagInput.value, item);
         if (Array.isArray(item.value)) {
           item.value.push(addTagInput.value);
         } else {
@@ -180,6 +188,7 @@
       } else {
         emit('addTag', addTagInput.value);
       }
+      addTagInput.value = '';
       showTagInput.value = false;
     } catch (error) {
       // eslint-disable-next-line no-console
diff --git a/frontend/src/components/pure/ms-tag/ms-tag.vue b/frontend/src/components/pure/ms-tag/ms-tag.vue
index c45439edd9..2af564c2de 100644
--- a/frontend/src/components/pure/ms-tag/ms-tag.vue
+++ b/frontend/src/components/pure/ms-tag/ms-tag.vue
@@ -3,17 +3,18 @@
     v-bind="attrs"
     :type="props.type"
     defer
+    :size="props.size"
     :style="{
       ...typeStyle,
       'margin-right': tagMargin,
       'min-width': props.width && `${props.width}ch`,
-      'max-width: 144px': !props.width,
+      'max-width': '144px',
     }"
-    :size="props.size"
-    class="inline-block"
   >
     <slot name="icon"></slot>
-    <slot></slot>
+    <div class="one-line-text">
+      <slot></slot>
+    </div>
   </a-tag>
 </template>
 
diff --git a/frontend/src/models/projectManagement/file.ts b/frontend/src/models/projectManagement/file.ts
index 18e89bfb62..fd5e6ea787 100644
--- a/frontend/src/models/projectManagement/file.ts
+++ b/frontend/src/models/projectManagement/file.ts
@@ -28,6 +28,7 @@ export interface FileDetail extends FileItem {
   projectId: string;
   moduleName: string; // 所属模块名
   moduleId: string;
+  storage?: string; // 存储方式
   createUser: string;
   createTime: number;
 }
@@ -43,7 +44,7 @@ export interface UploadFileParams {
 export interface UpdateFileParams {
   id: string;
   name?: string;
-  tags?: string[];
+  tags?: (string | number)[];
   description?: string;
   moduleId?: string;
 }
diff --git a/frontend/src/router/guard/index.ts b/frontend/src/router/guard/index.ts
index ca76b5dbde..7f8613d3f9 100644
--- a/frontend/src/router/guard/index.ts
+++ b/frontend/src/router/guard/index.ts
@@ -28,7 +28,7 @@ function setupPageGuard(router: Router) {
     }
     switch (getRouteLevelByKey(to.name as PathMapRoute)) {
       case MENU_LEVEL[1]: // 组织级别的页面，需要给页面携带上组织 ID
-        if (!urlOrgId) {
+        if (urlOrgId === undefined) {
           to.query = {
             ...to.query,
             organizationId: appStore.currentOrgId,
@@ -38,7 +38,7 @@ function setupPageGuard(router: Router) {
         }
         break;
       case MENU_LEVEL[2]: // 项目级别的页面，需要给页面携带上组织 ID和项目 ID
-        if (!urlOrgId && !urlProjectId) {
+        if (urlOrgId === undefined && urlProjectId === undefined) {
           to.query = {
             ...to.query,
             organizationId: appStore.currentOrgId,
diff --git a/frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue b/frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue
index a69b5052f7..cd628145a4 100644
--- a/frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue
+++ b/frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue
@@ -16,7 +16,7 @@
     <template #titleRight="{ loading, detail }">
       <a-switch
         v-if="fileType === 'jar'"
-        :default-checked="detail?.enable"
+        v-model:model-value="detail.enable"
         :before-change="handleEnableIntercept"
         :disabled="loading"
         size="small"
@@ -27,7 +27,8 @@
         status="secondary"
         class="!rounded-[var(--border-radius-small)] !text-[var(--color-text-1)]"
         :disabled="loading"
-        @click="handleDownload"
+        :loading="downLoading"
+        @click="handleDownload(detail)"
       >
         <MsIcon type="icon-icon_bottom-align_outlined" class="mr-[4px]" />
         {{ t('project.fileManagement.download') }}
@@ -71,6 +72,7 @@
               :descriptions="fileDescriptions"
               :label-width="currentLocale === 'zh-CN' ? '80px' : '100px'"
               :add-tag-func="addFileTag"
+              @tag-close="handleFileTagClose"
             >
               <template #value="{ item }">
                 <div class="flex flex-wrap items-center">
@@ -197,13 +199,20 @@
   import MsThumbnailCard from '@/components/business/ms-thumbnail-card/index.vue';
   import popConfirm from './popConfirm.vue';
 
-  import { getFileDetail, reuploadFile, updateFile } from '@/api/modules/project-management/fileManagement';
+  import {
+    downloadFile,
+    getFileDetail,
+    reuploadFile,
+    toggleJarFileStatus,
+    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, formatFileSize } from '@/utils';
+  import { downloadByteFile, downloadUrlFile, formatFileSize } from '@/utils';
 
+  import { FileDetail } from '@/models/projectManagement/file';
   import { TableKeyEnum } from '@/enums/tableEnum';
 
   const props = defineProps<{
@@ -241,22 +250,38 @@
   );
 
   async function handleEnableIntercept(newValue: string | number | boolean) {
-    await new Promise((resolve) => {
-      setTimeout(() => {
-        resolve(true);
-      }, 1000);
-    });
-    return true;
+    try {
+      await toggleJarFileStatus(props.fileId, newValue as boolean);
+      return true;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+      return false;
+    }
   }
 
-  function handleDownload(detail: any) {
-    downloadUrlFile(detail.url, detail.name);
+  const downLoading = ref(false);
+  /**
+   * 下载单个文件
+   * @param record 表格数据项
+   */
+  async function handleDownload(detail: FileDetail) {
+    try {
+      downLoading.value = true;
+      const res = await downloadFile(detail.id);
+      downloadByteFile(res, `${detail.name}.${detail.fileType}`);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      downLoading.value = false;
+    }
   }
 
   const fileType = ref('unknown');
   const renameTitle = ref(''); // 重命名的文件名称
 
-  function loadedFile(detail: any) {
+  function loadedFile(detail: FileDetail) {
     if (detail.fileType) {
       fileType.value = getFileEnum(`/${detail.fileType.toLowerCase()}`);
     }
@@ -269,7 +294,7 @@
       },
       {
         label: t('project.fileManagement.desc'),
-        value: detail.desc,
+        value: detail.description,
         key: 'desc',
       },
       {
@@ -291,9 +316,10 @@
       },
       {
         label: t('project.fileManagement.tag'),
-        value: detail.tag,
+        value: detail.tags,
         isTag: true,
         showTagAdd: true,
+        closable: true,
         key: 'tag',
       },
       {
@@ -306,18 +332,18 @@
         3,
         0,
         ...[
-          {
-            label: t('project.fileManagement.gitBranch'),
-            value: detail.gitBranch,
-          },
-          {
-            label: t('project.fileManagement.gitPath'),
-            value: detail.gitPath,
-          },
-          {
-            label: t('project.fileManagement.gitVersion'),
-            value: detail.gitVersion,
-          },
+          // {
+          //   label: t('project.fileManagement.gitBranch'),
+          //   value: detail.gitBranch,
+          // },
+          // {
+          //   label: t('project.fileManagement.gitPath'),
+          //   value: detail.gitPath,
+          // },
+          // {
+          //   label: t('project.fileManagement.gitVersion'),
+          //   value: detail.gitVersion,
+          // },
         ]
       );
     }
@@ -359,10 +385,17 @@
 
   const previewVisible = ref(false);
 
-  async function addFileTag(val: string) {
+  async function addFileTag(val: string, item: Description) {
     await updateFile({
       id: props.fileId,
-      tags: [val],
+      tags: Array.isArray(item.value) ? [...item.value, val] : [item.value, val],
+    });
+  }
+
+  async function handleFileTagClose(tag: string | number, item: Description) {
+    await updateFile({
+      id: props.fileId,
+      tags: Array.isArray(item.value) ? item.value.filter((e) => e !== tag) : [],
     });
   }
 
diff --git a/frontend/src/views/project-management/fileManagement/components/rightBox.vue b/frontend/src/views/project-management/fileManagement/components/rightBox.vue
index 351c3db473..e3d409b21f 100644
--- a/frontend/src/views/project-management/fileManagement/components/rightBox.vue
+++ b/frontend/src/views/project-management/fileManagement/components/rightBox.vue
@@ -466,12 +466,21 @@
   ];
   const tableStore = useTableStore();
   tableStore.initColumn(TableKeyEnum.FILE_MANAGEMENT_FILE, columns, 'drawer');
-  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(getFileList, {
-    tableKey: TableKeyEnum.FILE_MANAGEMENT_FILE,
-    showSetting: true,
-    selectable: true,
-    showSelectAll: true,
-  });
+  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(
+    getFileList,
+    {
+      tableKey: TableKeyEnum.FILE_MANAGEMENT_FILE,
+      showSetting: true,
+      selectable: true,
+      showSelectAll: true,
+    },
+    (item) => {
+      return {
+        ...item,
+        tags: item.tags?.map((e: string) => ({ id: e, name: e })) || [],
+      };
+    }
+  );
   const moduleFileBatchActions = {
     baseAction: [
       {
@@ -653,7 +662,7 @@
     try {
       batchMoveFileLoading.value = true;
       await batchMoveFile({
-        selectIds: batchParams.value?.selectedIds || [activeFile.value?.id || ''],
+        selectIds: isBatchMove.value ? batchParams.value?.selectedIds || [] : [activeFile.value?.id || ''],
         selectAll: !!batchParams.value?.selectAll,
         excludeIds: batchParams.value?.excludeIds || [],
         condition: { keyword: keyword.value, comebine: combine.value },
@@ -834,6 +843,15 @@
     activeFileIndex.value = index;
   }
 
+  watch(
+    () => showDetailDrawer.value,
+    (val) => {
+      if (!val) {
+        loadList();
+      }
+    }
+  );
+
   const uploadDrawerVisible = ref(false); // 模块-上传文件抽屉
   const fileList = ref<MsFileItem[]>(asyncTaskStore.uploadFileTask.fileList);
   // 是否非上传中状态