feat(缺陷管理): 关联文件接口对接

frontend/src/api/modules/bug-management/index.ts

@@ -155,3 +155,7 @@ export function deleteFileOrCancelAssociation(data: OperationFile) {
 export function getAttachmentList(bugId: string) {
   return MSR.get({ url: `${bugURL.getAttachmentListUrl}${bugId}` });
 }
+// 富文本编辑器上传图片文件
+export function editorUploadFile(data: { fileList: File[] }) {
+  return MSR.uploadFile({ url: bugURL.editorUploadFileUrl }, { fileList: data.fileList }, '', false);
+}

frontend/src/api/requrls/bug-management.ts

@@ -38,3 +38,5 @@ export const getFileIsUpdateUrl = '/bug/attachment/update';
 export const deleteFileOrCancelAssociationUrl = '/bug/attachment/delete';
 // 获取附件列表
 export const getAttachmentListUrl = '/bug/attachment/list/';
+// 富文本编辑器上传图片
+export const editorUploadFileUrl = '/bug/attachment/upload/editor';

frontend/src/views/bug-management/edit.vue

@@ -33,7 +33,11 @@
             <a-input v-model="form.title" :max-length="255" />
           </a-form-item>
           <a-form-item field="description" :label="t('bugManagement.edit.content')">
-            <MsRichText v-model:raw="form.description" />
+            <MsRichText
+              v-model:raw="form.description"
+              v-model:filed-ids="richTextFileIds"
+              :upload-image="handleUploadImage"
+            />
           </a-form-item>
           <a-form-item field="attachment" :label="t('bugManagement.edit.file')">
             <div class="flex flex-col">
@@ -145,13 +149,7 @@
         </div>
         <a-divider class="ml-[16px]" direction="vertical" />
         <div class="right mt-[16px] max-w-[433px] grow pr-[24px]">
-          <MsFormCreate
+          <MsFormCreate ref="formCreateRef" v-model:formItem="formItem" v-model:api="fApi" :form-rule="formRules" />
-            v-if="formRules.length"
-            ref="formCreateRef"
-            v-model:formItem="formItem"
-            v-model:api="fApi"
-            :form-rule="formRules"
-          />
           <a-form-item field="tag" :label="t('bugManagement.tag')">
             <MsTagsInput
               v-model:model-value="form.tags"
@@ -209,6 +207,7 @@
     checkFileIsUpdateRequest,
     createOrUpdateBug,
     downloadFileRequest,
+    editorUploadFile,
     getAssociatedFileList,
     getBugDetail,
     getTemplateById,
@@ -230,7 +229,9 @@
   import { SelectValue } from '@/models/projectManagement/menuManagement';
   import { BugManagementRouteEnum } from '@/enums/routeEnum';
 
-  import { convertToFile } from '../case-management/caseManagementFeature/components/utils';
+  import { convertToFileByBug } from './utils';
+
+  defineOptions({ name: 'BugEditPage' });
 
   const { t } = useI18n();
 
@@ -240,8 +241,6 @@
   }
 
   const appStore = useAppStore();
-  // const formCreateStore = useFormCreateStore();
-
   const route = useRoute();
   const templateOption = ref<TemplateOption[]>([]);
   const form = ref<BugEditFormObject>({
@@ -250,6 +249,9 @@
     description: '',
     templateId: '',
     tags: [],
+    deleteLocalFileIds: [],
+    unLinkRefIds: [],
+    linkFileIds: [],
   });
 
   const getListFunParams = ref<TableQueryParams>({
@@ -271,8 +273,10 @@
 
   const isEdit = computed(() => !!route.query.id && route.params.mode === 'edit');
   const bugId = computed(() => route.query.id || '');
+  const isEditOrCopy = computed(() => !!bugId.value);
   const imageUrl = ref('');
   const previewVisible = ref<boolean>(false);
+  const richTextFileIds = ref<string[]>([]);
 
   const title = computed(() => {
     return isEdit.value ? t('bugManagement.editBug') : t('bugManagement.createBug');
@@ -302,13 +306,6 @@
     return attachmentsList.value.filter((item) => item.local).map((item: any) => item.uid);
   });
 
-  // 删除本地上传的文件id
-  const deleteFileMetaIds = computed(() => {
-    return oldLocalFileList.value
-      .filter((item: any) => !currentOldLocalFileList.value.includes(item.id))
-      .map((item: any) => item.id);
-  });
-
   // 新增关联文件ID列表
   const newAssociateFileListIds = computed(() => {
     return fileList.value
@@ -328,6 +325,33 @@
       (id: string) => !currentAlreadyAssociateFileList.value.includes(id) && !deleteAssociateFileIds.includes(id)
     );
   });
+
+  // 删除本地上传的文件id
+  const deleteFileMetaIds = computed(() => {
+    return oldLocalFileList.value
+      .filter((item: any) => !currentOldLocalFileList.value.includes(item.id))
+      .map((item: any) => item.id);
+  });
+
+  // 处理关联文件和已关联文件本地文件和已上传文本文件
+  function getFilesParams() {
+    form.value.deleteLocalFileIds = deleteFileMetaIds.value;
+    form.value.unLinkRefIds = unLinkFilesIds.value;
+    form.value.linkFileIds = newAssociateFileListIds.value;
+  }
+
+  // 监视文件列表处理关联和本地文件
+  watch(
+    () => fileList.value,
+    (val) => {
+      if (val) {
+        getListFunParams.value.combine.hiddenIds = fileList.value.filter((item) => !item.local).map((item) => item.uid);
+        getFilesParams();
+      }
+    },
+    { deep: true }
+  );
+
   const transferVisible = ref<boolean>(false);
   // 转存
   function transferFile() {
@@ -460,7 +484,7 @@
 
   // 处理关联文件
   function saveSelectAssociatedFile(fileData: AssociatedList[]) {
-    const fileResultList = fileData.map((fileInfo) => convertToFile(fileInfo));
+    const fileResultList = fileData.map((fileInfo) => convertToFileByBug(fileInfo));
     fileList.value.push(...fileResultList);
   }
 
@@ -532,31 +556,32 @@
     });
     scrollIntoView(document.querySelector('.arco-form-item-message'), { block: 'center' });
   };
-
+  // 获取详情
   const getDetailInfo = async () => {
     const id = route.query.id as string;
     if (!id) return;
     const res = await getBugDetail(id);
     const { customFields, templateId, attachments } = res;
+    // 根据模板ID 初始化自定义字段
+    await templateChange(templateId);
     if (attachments && attachments.length) {
       attachmentsList.value = attachments;
       // 检查文件是否有更新
-      const checkUpdateFileIds = await checkFileIsUpdateRequest(attachments.value.map((item: any) => item.id));
+      const checkUpdateFileIds = await checkFileIsUpdateRequest(attachments.map((item: any) => item.fileId));
       // 处理文件列表
       fileList.value = attachments
         .map((fileInfo: any) => {
           return {
             ...fileInfo,
             name: fileInfo.fileName,
-            isUpdateFlag: checkUpdateFileIds.value.includes(fileInfo.id),
+            isUpdateFlag: checkUpdateFileIds.includes(fileInfo.id),
           };
         })
         .map((fileInfo: any) => {
-          return convertToFile(fileInfo);
+          return convertToFileByBug(fileInfo);
         });
     }
-    // 根据模板ID 初始化自定义字段
+
-    await templateChange(templateId);
     const tmpObj = {};
     if (customFields && Array.isArray(customFields)) {
       customFields.forEach((item) => {
@@ -576,17 +601,10 @@
     };
   };
 
-  const initDefaultFields = () => {
+  const initDefaultFields = async () => {
-    getTemplateOptions();
+    await getTemplateOptions();
   };
 
-  // 处理关联文件和已关联文件本地文件和已上传文本文件
-  function getFilesParams() {
-    form.value.deleteFileMetaIds = deleteFileMetaIds.value;
-    form.value.unLinkFilesIds = unLinkFilesIds.value;
-    form.value.relateFileMetaIds = newAssociateFileListIds.value;
-  }
-
   // 监视文件列表处理关联和本地文件
   watch(
     () => fileList.value,
@@ -601,16 +619,18 @@
     { deep: true }
   );
 
-  onBeforeMount(() => {
+  async function handleUploadImage(file: File) {
-    const { mode } = route.params;
+    const { data } = await editorUploadFile({
-    if (mode === 'edit') {
+      fileList: [file],
+    });
+    return data;
+  }
+
+  onMounted(async () => {
+    await initDefaultFields();
+    if (isEditOrCopy.value) {
       // 详情
-      getDetailInfo();
+      await getDetailInfo();
-    } else if (mode === 'copy') {
-      getDetailInfo();
-      initDefaultFields();
-    } else {
-      initDefaultFields();
     }
   });
 </script>

frontend/src/views/bug-management/utils.ts

@@ -0,0 +1,35 @@
+/** *
+ * 缺陷管理
+ * @description 将文件信息转换为文件格式
+ * @param {stafileInfotus} 文件file
+ */
+
+import { MsFileItem } from '@/components/pure/ms-upload/types';
+
+import { AssociatedList } from '@/models/caseManagement/featureCase';
+
+export function convertToFileByBug(fileInfo: AssociatedList): MsFileItem {
+  const gatewayAddress = `${window.location.protocol}//${window.location.hostname}:${window.location.port}`;
+  const fileName = fileInfo.fileType ? `${fileInfo.name}.${fileInfo.fileType || ''}` : `${fileInfo.name}`;
+  const type = fileName.split('.')[1];
+  const file = new File([new Blob()], `${fileName}`, {
+    type: `application/${type}`,
+  });
+  Object.defineProperty(file, 'size', { value: fileInfo.fileSize });
+  const { fileId, associated, isUpdateFlag, refId } = fileInfo;
+  return {
+    enable: fileInfo.enable || false,
+    file,
+    name: fileName,
+    percent: 0,
+    status: 'done',
+    uid: fileId,
+    url: `${gatewayAddress}/${fileInfo.filePath || ''}`,
+    local: !associated,
+    deleteContent: associated ? 'caseManagement.featureCase.cancelLink' : '',
+    isUpdateFlag,
+    associateId: refId,
+  };
+}
+
+export default {};