test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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

This commit is contained in:
baiqi 2023-10-31 14:46:03 +08:00 committed by 刘瑞斌
parent 6a375e5e9f
commit fdbd90c8a0
11 changed files with 148 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/config/vite.config.dev.ts
View File

@ -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,

2
frontend/src/api/http/index.ts
View File

@ -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 },

13
frontend/src/api/modules/project-management/fileManagement.ts
View File

@ -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}` });
}

2
frontend/src/api/requrls/project-management/fileManagement.ts
View File

@ -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 文件启用禁用

6
frontend/src/components/business/ms-detail-drawer/index.vue
View File

@ -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 {

3
frontend/src/components/business/ms-thumbnail-card/index.vue
View File

@ -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

5
frontend/src/components/pure/ms-drawer/index.vue
View File

@ -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;

9
frontend/src/models/projectManagement/file.ts
View File

@ -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 {

31
frontend/src/views/project-management/fileManagement/components/fileDetailDrawer.vue
View File

@ -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',
},
{

11
frontend/src/views/project-management/fileManagement/components/popConfirm.vue
View File

@ -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>

127
frontend/src/views/project-management/fileManagement/components/rightBox.vue
View File

@ -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;