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-11-20 18:23:34 +08:00 committed by Craftsman
parent 58fb5d7357
commit 4bf12605ad
10 changed files with 149 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,6 +12,7 @@ import {
FilePageUrl,
GetAssociationListUrl,
GetFileDetailUrl,
GetFileHistoryListUrl,
GetFileTypesUrl,
GetModuleCountUrl,
GetModuleUrl,
@ -37,6 +38,7 @@ import type {
AssociationItem,
BatchFileApiParams,
FileDetail,
FileHistoryItem,
FileItem,
FileListQueryParams,
ModuleCount,
@ -127,6 +129,11 @@ export function getFileDetail(id: string) {
return MSR.get<FileDetail>({ url: GetFileDetailUrl, params: id });
}
// 获取文件历史版本列表
export function getFileHistoryList(params: { id: string }) {
return MSR.get<FileHistoryItem[]>({ url: GetFileHistoryListUrl, params: params.id });
}
// jar文件启用禁用
export function toggleJarFileStatus(id: string, status: boolean) {
return MSR.get({ url: `${ToggleJarFileUrl}/${id}/${status}` });

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

@ -28,3 +28,4 @@ export const GetRepositoryInfoUrl = '/project/file/repository/info'; // 获取
export const DeleteAssociationUrl = '/project/file/association/delete'; // 删除关联用例
export const UpgradeAssociationUrl = '/project/file/association/upgrade'; // 更新关联用例文件
export const GetAssociationListUrl = '/project/file/association/list'; // 获取关联用例列表
export const GetFileHistoryListUrl = '/project/file/file-version'; // 获取文件历史版本列表

19
frontend/src/components/pure/ms-card/index.vue
View File

@ -8,6 +8,7 @@
props.isFullscreen ? 'ms-card--no-radius' : '',
props.autoHeight ? '' : 'min-h-[500px]',
props.noContentPadding ? 'ms-card--noContentPadding' : 'p-[24px]',
props.noBottomRadius ? 'ms-card--noBottomRadius' : '',
]"
>
<div v-if="!props.simple" class="card-header">
@ -20,7 +21,7 @@
</div>
<a-divider v-if="!props.simple" class="mb-[16px]" />
<div class="ms-card-container">
<a-scrollbar class="pr-[5px]" :style="getComputedContentStyle">
<a-scrollbar :class="props.noContentPadding ? '' : 'pr-[5px]'" :style="getComputedContentStyle">
<div class="relative h-full w-full" :style="{ minWidth: `${props.minWidth || 1000}px` }">
<slot></slot>
</div>
@ -74,6 +75,7 @@
minWidth: number; // 卡片最小宽度
hasBreadcrumb: boolean; // 是否有面包屑，如果有面包屑，高度需要减去面包屑的高度
noContentPadding: boolean; // 内容区域是否有padding
noBottomRadius?: boolean; // 底部是否有圆角
isFullscreen?: boolean; // 是否全屏
handleBack: () => void; // 自定义返回按钮触发事件
}>
@ -88,6 +90,7 @@
autoHeight: false,
hasBreadcrumb: false,
noContentPadding: false,
noBottomRadius: false,
}
);
@ -107,7 +110,7 @@
const cardOverHeight = computed(() => {
if (props.simple) {
// 简单模式没有标题、没有底部
return 136 + _specialHeight;
return props.noContentPadding ? 88 : 136 + _specialHeight;
}
if (props.hideFooter) {
// 隐藏底部
@ -117,6 +120,13 @@
});
const getComputedContentStyle = computed(() => {
if (props.noContentPadding) {
return {
overflow: 'auto',
width: 'auto',
height: props.autoHeight ? 'auto' : `calc(100vh - ${cardOverHeight.value}px)`,
};
}
if (props.isFullscreen) {
return {
overflow: 'auto',
@ -149,7 +159,7 @@
border-radius: var(--border-radius-large);
box-shadow: 0 0 10px rgb(120 56 135 / 5%);
&--noContentPadding {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
border-radius: var(--border-radius-large);
.card-header {
padding: 24px 24px 0;
}
@ -157,6 +167,9 @@
@apply mb-0;
}
}
&--noBottomRadius {
border-radius: var(--border-radius-large) var(--border-radius-large) 0 0;
}
.card-header {
@apply flex items-center;
.back-btn {

2
frontend/src/components/pure/ms-tab-card/index.vue
View File

@ -1,5 +1,5 @@
<template>
<MsCard class="mb-[16px]" :title="props.title" hide-back hide-footer auto-height no-content-padding>
<MsCard class="mb-[16px]" :title="props.title" hide-back hide-footer auto-height no-content-padding no-bottom-radius>
<a-tabs v-model:active-key="innerTab" class="no-content">
<a-tab-pane v-for="item of tabList" :key="item.key" :title="item.title" />
</a-tabs>

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

@ -22,6 +22,9 @@ export interface FileItem {
previewSrc: string; // 预览地址
size: number;
enable: boolean; // jar文件启用禁用
branch?: string; // 分支
filePath?: string; // 文件路径
fileVersion?: string; // 文件版本
}
// 文件详情
export interface FileDetail extends FileItem {
@ -88,6 +91,14 @@ export interface ModuleTreeNode {
type: string;
children: ModuleTreeNode[];
}
// 文件历史列表项
export interface FileHistoryItem {
id: string;
fileVersion: string;
updateHistory: string;
operator: string;
operateTime: number;
}
// 存储库列表
export interface Repository {
id: string;

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

@ -46,7 +46,7 @@
</MsButton>
</template>
<template #default="{ loading, detail }">
<div class="flex h-full">
<div class="flex h-full w-full">
<div class="file-detail">
<a-skeleton v-if="loading" :loading="loading" :animation="true">
<a-skeleton-shape size="large" class="mb-[16px] h-[102px] w-[102px]" />
@ -149,33 +149,33 @@
:placeholder="t('project.fileManagement.search')"
allow-clear
class="w-[240px]"
@press-enter="searchCase"
@search="searchCase"
>
</a-input-search>
</div>
<div class="p-[16px]">
<a-spin class="w-full" :loading="caseLoading">
<ms-base-table
v-if="activeTab === 'case'"
v-bind="caseTableProps"
:data="caseList"
no-disable
:action-config="caseBatchActions"
v-on="caseTableEvent"
>
<template #action="{ record }">
<MsButton type="text" class="mr-[8px]" @click="updateCase(record)">
{{ t('project.fileManagement.updateCaseFile') }}
</MsButton>
</template>
</ms-base-table>
</a-spin>
<ms-base-table
v-if="activeTab === 'case'"
v-bind="caseTableProps"
:data="caseList"
no-disable
:action-config="caseBatchActions"
v-on="caseTableEvent"
>
<template #action="{ record }">
<MsButton type="text" class="mr-[8px]" @click="updateCase(record)">
{{ t('project.fileManagement.updateCaseFile') }}
</MsButton>
</template>
</ms-base-table>
<!-- <ms-base-table
v-if="activeTab === 'version'"
v-bind="versionTableProps"
no-disable
v-on="versionTableEvent"
>
</ms-base-table> -->
</ms-base-table>
</div>
</div>
</div>
@ -185,7 +185,7 @@
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { computed, ref, watch } from 'vue';
import { useFileSystemAccess } from '@vueuse/core';
import { Message } from '@arco-design/web-vue';
import dayjs from 'dayjs';
@ -205,18 +205,21 @@
downloadFile,
getAssociationList,
getFileDetail,
getFileHistoryList,
reuploadFile,
toggleJarFileStatus,
updateFile,
updateRepositoryFile,
upgradeAssociation,
} 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 { useAppStore } from '@/store';
import useUserStore from '@/store/modules/user';
import { downloadByteFile, formatFileSize } from '@/utils';
import { FileDetail } from '@/models/projectManagement/file';
import { AssociationItem, FileDetail } from '@/models/projectManagement/file';
const props = defineProps<{
visible: boolean;
@ -233,6 +236,7 @@
const { t } = useI18n();
const { currentLocale } = useLocale();
const userStore = useUserStore();
const appStore = useAppStore();
const innerVisible = ref(false);
const fileDescriptions = ref<Description[]>([]);
@ -335,18 +339,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.branch || '',
},
{
label: t('project.fileManagement.gitPath'),
value: detail.filePath || '',
},
{
label: t('project.fileManagement.gitVersion'),
value: detail.fileVersion || '',
},
]
);
}
@ -454,7 +458,6 @@
propsEvent: caseTableEvent,
loadList: loadCaseList,
setLoadListParams,
setKeyword,
} = useTable(getAssociationList, {
scroll: { x: 800 },
columns: caseColumns,
@ -474,65 +477,82 @@
};
const keyword = ref('');
const caseList = ref<any[]>([]);
const caseList = computed(() => caseTableProps.value.data.filter((item) => item.sourceName.includes(keyword.value)));
const caseLoading = ref(false);
function filterCaseList() {
caseList.value = caseTableProps.value.data.filter((item) => item.sourceName.includes(keyword.value));
async function updateCase(record: AssociationItem) {
try {
caseLoading.value = true;
await upgradeAssociation(appStore.currentProjectId, record.id);
Message.success(t('project.fileManagement.updateCaseFileSuccess'));
loadCaseList();
} catch (error) {
// eslint-disable-next-line no-console
console.log(error);
} finally {
caseLoading.value = false;
}
}
async function searchCase() {
setKeyword(keyword.value);
await loadCaseList();
filterCaseList();
}
const versionColumns: MsTableColumn = [
{
title: 'project.fileManagement.fileVersion',
dataIndex: 'fileVersion',
showTooltip: true,
width: 180,
},
{
title: 'project.fileManagement.record',
dataIndex: 'updateHistory',
showTooltip: true,
},
{
title: 'project.fileManagement.operator',
dataIndex: 'operator',
showTooltip: true,
},
{
title: 'project.fileManagement.operatorTime',
dataIndex: 'operateTime',
width: 180,
},
];
const {
propsRes: versionTableProps,
propsEvent: versionTableEvent,
loadList: loadVersionList,
setLoadListParams: setVersionLoadListParams,
} = useTable(
getFileHistoryList,
{
scroll: { x: '100%' },
columns: versionColumns,
selectable: false,
showPagination: false,
},
(item) => {
return {
...item,
operateTime: dayjs(item.operateTime).format('YYYY-MM-DD HH:mm:ss'),
};
}
);
function updateCase(record: any) {
console.log(record);
}
// const versionColumns: MsTableColumn = [
// {
// title: 'project.fileManagement.fileVersion',
// dataIndex: 'fileVersion',
// },
// {
// title: 'project.fileManagement.record',
// dataIndex: 'record',
// showTooltip: true,
// },
// {
// title: 'project.fileManagement.creator',
// dataIndex: 'creator',
// showTooltip: true,
// },
// {
// title: 'project.fileManagement.createTime',
// dataIndex: 'createTime',
// width: 180,
// },
// ];
// const {
// propsRes: versionTableProps,
// propsEvent: versionTableEvent,
// loadList: loadVersionList,
// } = useTable(getFileVersions, {
// tableKey: TableKeyEnum.FILE_MANAGEMENT_VERSION,
// scroll: { x: '100%' },
// columns: versionColumns,
// selectable: false,
// });
watchEffect(async () => {
watchEffect(() => {
if (innerVisible.value) {
if (activeTab.value === 'case') {
setLoadListParams({
id: props.fileId,
});
await loadCaseList();
filterCaseList();
loadCaseList();
} else {
// loadVersionList();
setVersionLoadListParams({
id: props.fileId,
});
loadVersionList();
}
} else {
activeTab.value = 'case';
}
});
</script>
@ -546,7 +566,7 @@
border-right: 1px solid var(--color-text-n8);
}
.file-relation {
width: 660px;
width: calc(100% - 300px);
}
:deep(.no-content) {
.arco-tabs-tab {

1
frontend/src/views/project-management/fileManagement/components/folderTree.vue
View File

@ -161,6 +161,7 @@
hideMoreAction: e.id === 'root',
draggable: e.id !== 'root' && !props.isModal,
disabled: e.id === props.activeFolder && props.isModal,
count: props.modulesCount?.[e.id] || 0,
};
});
if (isSetDefaultKey) {

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

@ -587,7 +587,7 @@
condition: { keyword: keyword.value, combine: combine.value },
projectId: appStore.currentProjectId,
fileType: tableFileType.value,
moduleIds: [props.activeFolder],
moduleIds: isMyOrAllFolder.value ? [] : [props.activeFolder],
});
downloadByteFile(res, 'files.zip');
resetSelector();
@ -603,7 +603,7 @@
emit('init', {
keyword: keyword.value,
fileType: tableFileType.value,
moduleIds: isMyOrAllFolder.value ? [] : [props.activeFolder],
moduleIds: [],
projectId: appStore.currentProjectId,
current: propsRes.value.msPagination?.current,
pageSize: propsRes.value.msPagination?.pageSize,
@ -649,7 +649,7 @@
condition: { keyword: keyword.value, combine: combine.value },
projectId: appStore.currentProjectId,
fileType: tableFileType.value,
moduleIds: [props.activeFolder],
moduleIds: isMyOrAllFolder.value ? [] : [props.activeFolder],
});
Message.success(t('common.deleteSuccess'));
if (showType.value === 'card') {
@ -717,7 +717,7 @@
condition: { keyword: keyword.value, combine: combine.value },
projectId: appStore.currentProjectId,
fileType: tableFileType.value,
moduleIds: [props.activeFolder],
moduleIds: isMyOrAllFolder.value ? [] : [props.activeFolder],
moveModuleId: selectedModuleKeys.value[0],
});
Message.success(t('project.fileManagement.batchMoveSuccess'));

3
frontend/src/views/project-management/fileManagement/locale/en-US.ts
View File

@ -108,9 +108,12 @@ export default {
'project.fileManagement.cases': 'Related Use Cases',
'project.fileManagement.versionHistory': 'Version history',
'project.fileManagement.updateCaseFile': 'Update use case file',
'project.fileManagement.updateCaseFileSuccess': 'Use case file updated successfully',
'project.fileManagement.id': 'ID',
'project.fileManagement.fileVersion': 'File version',
'project.fileManagement.record': 'Update history',
'project.fileManagement.operator': 'Operator',
'project.fileManagement.operatorTime': 'Operating time',
'project.fileManagement.caseList': 'Use case list',
'project.fileManagement.search': 'Enter name to search',
'project.fileManagement.storagePlaceholder': 'Please select a repository',

3
frontend/src/views/project-management/fileManagement/locale/zh-CN.ts
View File

@ -100,9 +100,12 @@ export default {
'project.fileManagement.cases': '关联用例',
'project.fileManagement.versionHistory': '版本历史',
'project.fileManagement.updateCaseFile': '更新用例文件',
'project.fileManagement.updateCaseFileSuccess': '用例文件更新成功',
'project.fileManagement.id': 'ID',
'project.fileManagement.fileVersion': '文件版本',
'project.fileManagement.record': '更新历史',
'project.fileManagement.operator': '操作人',
'project.fileManagement.operatorTime': '操作时间',
'project.fileManagement.caseList': '用例列表',
'project.fileManagement.search': '输入名称搜索',
'project.fileManagement.storagePlaceholder': '请选择存储库',