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:
xinxin.wu 2024-08-01 14:07:10 +08:00 committed by 刘瑞斌
parent b5a3592e46
commit 0deac9e9f4
13 changed files with 147 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -46,6 +46,16 @@ export default mergeConfig(
changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/front\/test-plan\/report/, ''),
},
'/organization': {
target: process.env.VITE_DEV_DOMAIN,
changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/front\/organization/, ''),
},
'/project': {
target: process.env.VITE_DEV_DOMAIN,
changeOrigin: true,
rewrite: (path: string) => path.replace(/^\/front\/project/, ''),
},
'/plugin/image': {
target: process.env.VITE_DEV_DOMAIN,
changeOrigin: true,

11
frontend/src/api/modules/setting/template.ts
View File

@ -26,6 +26,7 @@ import {
OrdUpdateFlowStatusUrl,
OrdUpdateStateFlowUrl,
OrdWorkFlowUrl,
orgRichUploadImageUrl,
ProjectCreateFlowStatusUrl,
ProjectDeleteFlowStatusUrl,
ProjectSetStateUrl,
@ -33,6 +34,7 @@ import {
ProjectUpdateFlowStatusUrl,
ProjectUpdateStateFlowUrl,
ProjectWorkFlowUrl,
proRichUploadImageUrl,
SetProjectTemplateUrl,
UpdateFieldUrl,
UpdateOrganizeTemplateUrl,
@ -40,11 +42,10 @@ import {
UpdateProjectTemplateUrl,
} from '@/api/requrls/setting/template';
import { CommonList, TableQueryParams } from '@/models/common';
import { TableQueryParams } from '@/models/common';
import type {
ActionTemplateManage,
AddOrUpdateField,
OrdTemplateManagement,
OrdWorkStatus,
SeneType,
SetStateType,
@ -178,6 +179,12 @@ export function getProjectFieldDetail(id: string) {
return MSR.get({ url: GetFieldProjectDetailUrl, params: id });
}
// 富文本编辑器上传图片文件
export function editorUploadFile(data: { fileList: File[] }, mode: 'organization' | 'project') {
const url = mode === 'organization' ? orgRichUploadImageUrl : proRichUploadImageUrl;
return MSR.uploadFile({ url }, { fileList: data.fileList }, '', false);
}
/** *
* 模板(项目)
*/

8
frontend/src/api/requrls/setting/template.ts
View File

@ -93,3 +93,11 @@ export const ProjectSetStateUrl = '/project/status/flow/setting/status/definitio
export const ProjectStateSortUrl = '/project/status/flow/setting/status/sort';
// 更新状态流转
export const ProjectUpdateStateFlowUrl = '/project/status/flow/setting/status/flow/update';
// 组织模板富文本图片链接
export const orgRichUploadImageUrl = '/organization/template/upload/temp/img';
// 项目模板富文本图片链接
export const proRichUploadImageUrl = '/project/template/upload/temp/img';
// 组织预览富文本图片
export const previewOrgImageUrl = '/organization/template/img/preview';
// 项目预览富文本图片
export const previewProImageUrl = '/project/template/img/preview';

10
frontend/src/components/pure/ms-rich-text/MsRichText.vue
View File

@ -12,6 +12,7 @@
* import rehypeStringify from 'rehype-stringify';
* return unified().use(rehypeParse).use(rehypeFormat).use(rehypeStringify).processSync(content.value);
*/
import { useRoute } from 'vue-router';
import { useDebounceFn, useVModel } from '@vueuse/core';
import type { MsFileItem } from '@/components/pure/ms-upload/types';
@ -20,7 +21,6 @@
import { editorUploadFile } from '@/api/modules/case-management/featureCase';
import { useI18n } from '@/hooks/useI18n';
import useLocale from '@/locale/useLocale';
import { useAppStore } from '@/store';
import '@halo-dev/richtext-editor/dist/style.css';
import ExtensionImage from './extensions/image/index';
@ -70,10 +70,8 @@
import type { queueAsPromised } from 'fastq';
import * as fastq from 'fastq';
const appStore = useAppStore();
const { t } = useI18n();
// image drag and paste upload
const route = useRoute();
type Task = {
file: File;
process: (permalink: string, fileId: string) => void;
@ -122,8 +120,8 @@
}
const uploadFileId = await props.uploadImage(arg.file);
if (uploadFileId) {
// const permanentUrl = `${PreviewEditorImageUrl}/${appStore.currentProjectId}/${uploadFileId}/${true}`;
const permanentUrl = `${props.previewUrl}/${appStore.currentProjectId}/${uploadFileId}/${true}`;
const infoId = route.query.orgId && route.query.pId ? route.query.pId : route.query.orgId;
const permanentUrl = `${props.previewUrl}/${infoId}/${uploadFileId}/${true}`;
arg.process(permanentUrl, uploadFileId);
}
}

1
frontend/src/models/setting/template.ts
View File

@ -120,6 +120,7 @@ export interface ActionTemplateManage {
enablePlatformDefault?: boolean;
internal?: boolean; // 是否为系统模板
platForm?: string;
uploadImgFileIds: string[]; // 模板附件
[key: string]: any;
}

3
frontend/src/views/project-management/template/components/templateManagement.vue
View File

@ -315,6 +315,7 @@
router.push({
name: routeName.value,
query: {
...route.query,
type: route.query.type,
},
params: {
@ -328,6 +329,7 @@
router.push({
name: routeName.value,
query: {
...route.query,
id,
type: route.query.type,
},
@ -342,6 +344,7 @@
router.push({
name: routeName.value,
query: {
...route.query,
id,
type: route.query.type,
},

6
frontend/src/views/project-management/template/index.vue
View File

@ -30,7 +30,7 @@
* @description 项目设置--模板
*/
import { useRouter } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import MsCard from '@/components/pure/ms-card/index.vue';
import MsCardList from '@/components/business/ms-card-list/index.vue';
@ -43,12 +43,14 @@
import { getCardList } from '@/views/setting/organization/template/components/fieldSetting';
const router = useRouter();
const route = useRoute();
const templateStore = useTemplateStore();
// 字段设置
const fieldSetting = (key: string) => {
router.push({
name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_TEMPLATE_FIELD_SETTING,
query: {
...route.query,
type: key,
},
});
@ -59,6 +61,7 @@
router.push({
name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_TEMPLATE_MANAGEMENT,
query: {
...route.query,
type: key,
},
});
@ -69,6 +72,7 @@
router.push({
name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_TEMPLATE_MANAGEMENT_WORKFLOW,
query: {
...route.query,
type: key,
},
});

21
frontend/src/views/setting/organization/template/components/addTemplate.vue
View File

@ -56,8 +56,18 @@
</template>
<div class="wrapper-preview">
<div class="preview-left pr-4">
<DefectTemplateLeftContent v-if="route.query.type === 'BUG'" v-model:defaultForm="defaultBugForm" />
<CaseTemplateLeftContent v-else v-model:defaultForm="defaultCaseForm" />
<DefectTemplateLeftContent
v-if="route.query.type === 'BUG'"
v-model:uploadImgFileIds="uploadBugImgFileIds"
v-model:defaultForm="defaultBugForm"
:mode="props.mode"
/>
<CaseTemplateLeftContent
v-else
v-model:uploadImgFileIds="uploadCaseImgFileIds"
v-model:defaultForm="defaultCaseForm"
:mode="props.mode"
/>
</div>
<div class="preview-right px-4">
<!-- 系统内置的字段 {处理人, 状态...} -->
@ -308,6 +318,7 @@
scopeId: props.mode === 'organization' ? currentOrgId.value : currentProjectId.value,
enableThirdPart: false,
platForm: '',
uploadImgFileIds: [],
};
const initBugForm = {
@ -359,6 +370,9 @@
// 缺陷默认字段
const defaultBugForm = ref<defaultBugField>(cloneDeep(defaultTemplateBugDetail));
const uploadBugImgFileIds = ref<string[]>([]);
const uploadCaseImgFileIds = ref<string[]>([]);
// 获取系统默认字段
function getSystemFields(form: Record<string, any>) {
const tempFormField: Record<string, any>[] = [];
@ -397,6 +411,8 @@
const systemFields: Record<string, any>[] =
route.query.type === 'BUG' ? getSystemFields(defaultBugForm.value) : getSystemFields(defaultCaseForm.value);
const uploadImgFileIds = route.query.type === 'BUG' ? uploadBugImgFileIds.value : uploadCaseImgFileIds.value;
const { name, remark, enableThirdPart, id } = templateForm.value;
return {
id,
@ -407,6 +423,7 @@
scopeId: props.mode === 'organization' ? currentOrgId.value : currentProjectId.value,
scene: route.query.type,
systemFields,
uploadImgFileIds,
};
}

52
frontend/src/views/setting/organization/template/components/caseTemplateLeftContent.vue
View File

@ -20,7 +20,7 @@
v-model:raw="form.prerequisite"
v-model:filed-ids="prerequisiteFileIds"
:upload-image="handleUploadImage"
:preview-url="PreviewEditorImageUrl"
:preview-url="previewEditorImageUrl"
:editable="!props.isDisabled"
/>
</a-form-item>
@ -55,7 +55,7 @@
v-model:raw="form.textDescription"
v-model:filed-ids="textDescriptionFileIds"
:upload-image="handleUploadImage"
:preview-url="PreviewEditorImageUrl"
:preview-url="previewEditorImageUrl"
:editable="!props.isDisabled"
/>
</a-form-item>
@ -68,7 +68,7 @@
v-model:raw="form.expectedResult"
v-model:filed-ids="expectedResultFileIds"
:upload-image="handleUploadImage"
:preview-url="PreviewEditorImageUrl"
:preview-url="previewEditorImageUrl"
:editable="!props.isDisabled"
/>
</a-form-item>
@ -77,7 +77,7 @@
v-model:raw="form.description"
v-model:filed-ids="descriptionFileIds"
:upload-image="handleUploadImage"
:preview-url="PreviewEditorImageUrl"
:preview-url="previewEditorImageUrl"
:editable="!props.isDisabled"
/>
</a-form-item>
@ -95,8 +95,8 @@
import AddAttachment from '@/components/business/ms-add-attachment/index.vue';
import AddStep from '@/views/case-management/caseManagementFeature/components/addStep.vue';
import { editorUploadFile } from '@/api/modules/case-management/featureCase';
import { PreviewEditorImageUrl } from '@/api/requrls/case-management/featureCase';
import { editorUploadFile } from '@/api/modules/setting/template';
import { previewOrgImageUrl, previewProImageUrl } from '@/api/requrls/setting/template';
import { defaultTemplateCaseDetail } from '@/config/template';
import { useI18n } from '@/hooks/useI18n';
import { getGenerateId } from '@/utils';
@ -107,12 +107,16 @@
const { t } = useI18n();
const props = defineProps<{
mode: 'organization' | 'project';
isDisabled?: boolean;
}>();
const form = defineModel<defaultCaseField>('defaultForm', {
default: defaultTemplateCaseDetail,
});
const uploadImgFileIds = defineModel<string[]>('uploadImgFileIds', {
default: [],
});
const fileList = ref([]);
@ -177,13 +181,41 @@
}
}
);
// TODO 上传需要接口
// 上传图片
async function handleUploadImage(file: File) {
const { data } = await editorUploadFile({
fileList: [file],
});
const { data } = await editorUploadFile(
{
fileList: [file],
},
props.mode
);
return data;
}
const previewEditorImageUrl = computed(() =>
props.mode === 'organization' ? previewOrgImageUrl : previewProImageUrl
);
const fileIds = computed(() => {
return [
...prerequisiteFileIds.value,
...textDescriptionFileIds.value,
...expectedResultFileIds.value,
...descriptionFileIds.value,
];
});
watch(
() => fileIds.value,
(val) => {
if (val) {
uploadImgFileIds.value = val;
}
},
{
deep: true,
}
);
</script>
<style scoped></style>

38
frontend/src/views/setting/organization/template/components/defectTemplateLeftContent.vue
View File

@ -17,7 +17,7 @@
v-model:raw="form.description"
v-model:filed-ids="descriptionFileIds"
:upload-image="handleUploadImage"
:preview-url="EditorPreviewFileUrl"
:preview-url="previewEditorImageUrl"
:editable="!props.isDisabled"
/>
</a-form-item>
@ -34,8 +34,8 @@
import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
import AddAttachment from '@/components/business/ms-add-attachment/index.vue';
import { editorUploadFile } from '@/api/modules/bug-management';
import { EditorPreviewFileUrl } from '@/api/requrls/bug-management';
import { editorUploadFile } from '@/api/modules/setting/template';
import { previewOrgImageUrl, previewProImageUrl } from '@/api/requrls/setting/template';
import { defaultTemplateBugDetail } from '@/config/template';
import { useI18n } from '@/hooks/useI18n';
@ -44,6 +44,7 @@
const { t } = useI18n();
const props = defineProps<{
mode: 'organization' | 'project';
isDisabled?: boolean;
}>();
@ -53,16 +54,39 @@
default: defaultTemplateBugDetail,
});
const uploadImgFileIds = defineModel<string[]>('uploadImgFileIds', {
default: [],
});
// 富文本附件ID
const descriptionFileIds = ref<string[]>([]);
// TODO 上传图片需要接口
// 上传图片
async function handleUploadImage(file: File) {
const { data } = await editorUploadFile({
fileList: [file],
});
const { data } = await editorUploadFile(
{
fileList: [file],
},
props.mode
);
return data;
}
const previewEditorImageUrl = computed(() =>
props.mode === 'organization' ? previewOrgImageUrl : previewProImageUrl
);
watch(
() => descriptionFileIds.value,
(val) => {
if (val) {
uploadImgFileIds.value = val;
}
},
{
deep: true,
}
);
</script>
<style scoped></style>

3
frontend/src/views/setting/organization/template/components/templateManagement.vue
View File

@ -238,6 +238,7 @@
router.push({
name: routeName.value,
query: {
...route.query,
type: route.query.type,
},
params: {
@ -251,6 +252,7 @@
router.push({
name: routeName.value,
query: {
...route.query,
id,
type: route.query.type,
},
@ -265,6 +267,7 @@
router.push({
name: routeName.value,
query: {
...route.query,
id,
type: route.query.type,
},

9
frontend/src/views/setting/organization/template/components/viewTemplate.vue
View File

@ -1,8 +1,13 @@
<template>
<div class="wrapper-preview">
<div class="preview-left pr-4">
<DefectTemplateLeftContent v-if="props.templateType === 'BUG'" v-model:defaultForm="defaultBugForm" is-disabled />
<CaseTemplateLeftContent v-else v-model:defaultForm="defaultCaseForm" is-disabled />
<DefectTemplateLeftContent
v-if="props.templateType === 'BUG'"
v-model:defaultForm="defaultBugForm"
mode="project"
is-disabled
/>
<CaseTemplateLeftContent v-else v-model:defaultForm="defaultCaseForm" mode="project" is-disabled />
</div>
<div class="preview-right px-4">
<!-- 系统内置的字段 {处理人, 状态...} -->

6
frontend/src/views/setting/organization/template/index.vue
View File

@ -39,7 +39,7 @@
/**
* @description 系统设置--组织--模版
*/
import { useRouter } from 'vue-router';
import { useRoute, useRouter } from 'vue-router';
import MsCard from '@/components/pure/ms-card/index.vue';
import MsCardList from '@/components/business/ms-card-list/index.vue';
@ -56,6 +56,7 @@
const templateStore = useTemplateStore();
const { t } = useI18n();
const router = useRouter();
const route = useRoute();
const visitedKey = 'notRemind';
const { addVisited } = useVisit(visitedKey);
const { getIsVisited } = useVisit(visitedKey);
@ -78,6 +79,7 @@
router.push({
name: SettingRouteEnum.SETTING_ORGANIZATION_TEMPLATE_FILED_SETTING,
query: {
...route.query,
type: key,
},
});
@ -88,6 +90,7 @@
router.push({
name: SettingRouteEnum.SETTING_ORGANIZATION_TEMPLATE_MANAGEMENT,
query: {
...route.query,
type: key,
},
});
@ -98,6 +101,7 @@
router.push({
name: SettingRouteEnum.SETTING_ORGANIZATION_TEMPLATE_MANAGEMENT_WORKFLOW,
query: {
...route.query,
type: key,
},
});