From 69d528bb7be60626e585763cfd25985ff3361029 Mon Sep 17 00:00:00 2001 From: baiqi Date: Mon, 30 Oct 2023 18:23:41 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86):=20?= =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E7=BB=84=E4=BB=B6=E6=8E=92=E5=BA=8F=E3=80=81?= =?UTF-8?q?=E6=A0=87=E7=AD=BE&=E6=96=87=E4=BB=B6=E7=AE=A1=E7=90=86?= =?UTF-8?q?=E9=83=A8=E5=88=86=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../project-management/fileManagement.ts | 6 ++ .../project-management/fileManagement.ts | 4 +- .../business/ms-card-list/index.vue | 11 +++ .../components/pure/ms-table/base-table.vue | 18 ++-- .../components/fileDetailDrawer.vue | 9 +- .../fileManagement/components/folderTree.vue | 17 ++-- .../fileManagement/components/rightBox.vue | 82 ++++++++++++------- .../fileManagement/index.vue | 27 +++++- .../src/views/setting/system/user/index.vue | 12 +-- 9 files changed, 119 insertions(+), 67 deletions(-) diff --git a/frontend/src/api/modules/project-management/fileManagement.ts b/frontend/src/api/modules/project-management/fileManagement.ts index e4478af9f9..c50a14e008 100644 --- a/frontend/src/api/modules/project-management/fileManagement.ts +++ b/frontend/src/api/modules/project-management/fileManagement.ts @@ -6,6 +6,7 @@ import { DeleteModuleUrl, DownloadFileUrl, FilePageUrl, + GetFileTypesUrl, GetModuleCountUrl, GetModuleUrl, MoveModuleUrl, @@ -94,3 +95,8 @@ export function getModules(id: string) { export function deleteModule(id: string) { return MSR.get({ url: DeleteModuleUrl, params: id }); } + +// 获取文件类型集合 +export function getFileTypes(id: string) { + return MSR.get({ url: GetFileTypesUrl, params: id }); +} diff --git a/frontend/src/api/requrls/project-management/fileManagement.ts b/frontend/src/api/requrls/project-management/fileManagement.ts index cf56b4f21b..6008ab7ba4 100644 --- a/frontend/src/api/requrls/project-management/fileManagement.ts +++ b/frontend/src/api/requrls/project-management/fileManagement.ts @@ -11,4 +11,6 @@ export const AddModuleUrl = '/project/file-module/add'; // 添加模块 export const GetModuleUrl = '/project/file-module/tree'; // 查找模块 export const DeleteModuleUrl = '/project/file-module/delete'; // 删除模块 export const GetModuleCountUrl = '/project/file/module/count'; // 模块统计文件数量 -export const PreviewImgUrl = '/project/file/download/preview-img'; // 预览图片文件接口 +export const OriginImgUrl = '/file/preview/original'; // 预览图片文件接口-原图 +export const CompressImgUrl = '/file/preview/compressed'; // 预览图片文件接口-缩略图 +export const GetFileTypesUrl = '/project/file/type'; // 获取文件类型集合 diff --git a/frontend/src/components/business/ms-card-list/index.vue b/frontend/src/components/business/ms-card-list/index.vue index f98ddc03c9..94d0bc8305 100644 --- a/frontend/src/components/business/ms-card-list/index.vue +++ b/frontend/src/components/business/ms-card-list/index.vue @@ -24,6 +24,11 @@ + @@ -33,6 +38,7 @@ import { debounce } from 'lodash-es'; import useContainerShadow from '@/hooks/useContainerShadow'; + import { useI18n } from '@/hooks/useI18n'; import type { CommonList } from '@/models/common'; @@ -55,6 +61,8 @@ } ); + const { t } = useI18n(); + const msCardListRef: Ref = ref(null); const msCardListContainerRef: Ref = ref(null); @@ -255,4 +263,7 @@ } } } + :deep(.arco-icon-empty) { + font-size: 48px; + } diff --git a/frontend/src/components/pure/ms-table/base-table.vue b/frontend/src/components/pure/ms-table/base-table.vue index b400ad7e50..740716e7e6 100644 --- a/frontend/src/components/pure/ms-table/base-table.vue +++ b/frontend/src/components/pure/ms-table/base-table.vue @@ -86,11 +86,12 @@ @@ -193,8 +193,10 @@ import popConfirm from './popConfirm.vue'; import { 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 { TableKeyEnum } from '@/enums/tableEnum'; @@ -213,6 +215,7 @@ const { file: newFile, open } = useFileSystemAccess(); const { t } = useI18n(); const { currentLocale } = useLocale(); + const userStore = useUserStore(); const innerVisible = ref(false); const fileDescriptions = ref([]); diff --git a/frontend/src/views/project-management/fileManagement/components/folderTree.vue b/frontend/src/views/project-management/fileManagement/components/folderTree.vue index bfba41b6e7..b1883886c3 100644 --- a/frontend/src/views/project-management/fileManagement/components/folderTree.vue +++ b/frontend/src/views/project-management/fileManagement/components/folderTree.vue @@ -95,6 +95,7 @@ isExpandAll: boolean; selectedKeys?: Array; // 选中的节点 key isModal?: boolean; // 是否是弹窗模式 + modulesCount?: Record; // 模块数量统计对象 }>(); const emit = defineEmits(['update:selectedKeys', 'init', 'folderNodeSelect']); @@ -265,9 +266,9 @@ } catch (error) { // eslint-disable-next-line no-console console.log(error); - initModules(); } finally { loading.value = false; + initModules(); } } @@ -285,24 +286,20 @@ /** * 初始化模块文件数量 */ - async function initModulesCount(params: FileListQueryParams) { - try { - const res = await getModulesCount(params); + watch( + () => props.modulesCount, + (obj) => { folderTree.value = mapTree(folderTree.value, (node) => { return { ...node, - count: res[node.id] || 0, + count: obj?.[node.id] || 0, }; }); - } catch (error) { - // eslint-disable-next-line no-console - console.log(error); } - } + ); defineExpose({ initModules, - initModulesCount, }); diff --git a/frontend/src/views/project-management/fileManagement/components/rightBox.vue b/frontend/src/views/project-management/fileManagement/components/rightBox.vue index 958c904117..49ad54ba82 100644 --- a/frontend/src/views/project-management/fileManagement/components/rightBox.vue +++ b/frontend/src/views/project-management/fileManagement/components/rightBox.vue @@ -3,7 +3,7 @@
{{ t('project.fileManagement.addFile') }}
- + {{ t('common.all') }} {{ item }} @@ -14,6 +14,8 @@ :placeholder="t('project.fileManagement.folderSearchPlaceholder')" allow-clear class="w-[240px]" + @search="searchList" + @press-enter="searchList" /> ('none'); // 模块-上传文件类型 const isUploading = ref(false); const keyword = ref(''); - const tableFileType = ref(''); - const tableFileTypeOptions = ref(['JPG', 'PNG']); const loading = ref(false); - watch( - () => props.activeFolderType, - (val) => { - if (val === 'folder') { - fileType.value = 'module'; - } else { - fileType.value = val; - } - } - ); + const tableFileType = ref(''); + const tableFileTypeOptions = ref([]); + const fileTypeLoading = ref(false); - function changeFileType() {} + async function initFileTypes() { + try { + fileTypeLoading.value = true; + const res = await getFileTypes(appStore.currentProjectId); + tableFileTypeOptions.value = res; + } catch (error) { + console.log(error); + } finally { + fileTypeLoading.value = false; + } + } const showType = ref<'list' | 'card'>('list'); // 文件列表展示形式 @@ -406,7 +410,6 @@ { title: 'project.fileManagement.tag', dataIndex: 'tags', - slotName: 'tag', isTag: true, }, { @@ -648,19 +651,42 @@ selectedModuleKeys.value = []; } - const searchList = debounce(() => { + function setTableParams() { + const combine: Record = {}; + if (props.activeFolder === 'my') { + combine.createUser = userStore.id; + } + if (fileType.value === 'storage') { + combine.storage = 'git'; + } setLoadListParams({ keyword: keyword.value, fileType: tableFileType.value, moduleIds: ['all', 'my'].includes(props.activeFolder) ? [] : [props.activeFolder], projectId: appStore.currentProjectId, - comebine: - props.activeFolder === 'my' - ? { - createUser: userStore.id, - } - : {}, + comebine: combine, }); + } + + function changeFileType() { + setTableParams(); + loadList(); + } + + watch( + () => props.activeFolderType, + (val) => { + if (val === 'folder') { + fileType.value = 'module'; + } else { + fileType.value = val; + } + setTableParams(); + } + ); + + const searchList = debounce(() => { + setTableParams(); if (showType.value === 'card') { cardListRef.value?.reload(); } else { @@ -678,13 +704,6 @@ { immediate: true } ); - watch( - () => keyword.value, - () => { - searchList(); - } - ); - /** * 下载单个文件 * @param record 表格数据项 @@ -858,6 +877,7 @@ type RouteQueryPosition = 'uploadDrawer' | null; onBeforeMount(() => { + initFileTypes(); if (route.query.position) { switch ( route.query.position as RouteQueryPosition // 定位到上传文件抽屉，自动打开 diff --git a/frontend/src/views/project-management/fileManagement/index.vue b/frontend/src/views/project-management/fileManagement/index.vue index c44df40496..af88f6bb8b 100644 --- a/frontend/src/views/project-management/fileManagement/index.vue +++ b/frontend/src/views/project-management/fileManagement/index.vue @@ -57,6 +57,7 @@ ref="folderTreeRef" v-model:selected-keys="selectedKeys" :is-expand-all="isExpandAll" + :modules-count="modulesCount" @init="setRootModules" @folder-node-select="folderNodeSelect" /> @@ -92,14 +93,14 @@ import rightBox from './components/rightBox.vue'; import StorageList from './components/storageList.vue'; + import { getModulesCount } from '@/api/modules/project-management/fileManagement'; import { useI18n } from '@/hooks/useI18n'; + import { mapTree } from '@/utils'; - import { FileListQueryParams } from '@/models/projectManagement/file'; + import { FileListQueryParams, ModuleTreeNode } from '@/models/projectManagement/file'; const { t } = useI18n(); - const myFileCount = ref(0); - const allFileCount = ref(0); const isExpandAll = ref(false); const activeFolderType = ref<'folder' | 'module' | 'storage'>('folder'); const storageDrawerVisible = ref(false); @@ -181,12 +182,30 @@ } } + const modulesCount = ref>({}); + const myFileCount = ref(0); + const allFileCount = ref(0); + + /** + * 初始化模块文件数量 + */ + async function initModulesCount(params: FileListQueryParams) { + try { + modulesCount.value = await getModulesCount(params); + myFileCount.value = modulesCount.value.my || 0; + allFileCount.value = modulesCount.value.all || 0; + } catch (error) { + // eslint-disable-next-line no-console + console.log(error); + } + } + /** * 右侧表格数据刷新后，若当前展示的是模块，则刷新模块树的统计数量 */ function handleModuleTableInit(params: FileListQueryParams) { if (showType.value === 'Module') { - folderTreeRef.value?.initModulesCount(params); + initModulesCount(params); } } diff --git a/frontend/src/views/setting/system/user/index.vue b/frontend/src/views/setting/system/user/index.vue index d41cfcacce..1372835bb3 100644 --- a/frontend/src/views/setting/system/user/index.vue +++ b/frontend/src/views/setting/system/user/index.vue @@ -25,12 +25,6 @@ v-on="propsEvent" @batch-action="handleTableBatch" > - -