feat(缺陷管理): 优化附件关联逻辑

.vscode/settings.json

@@ -1,9 +1,9 @@
 {
   "typescript.tsdk": "/frontend/node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "eslint.autoFixOnSave": true,
+    "eslint.autoFixOnSave": "explicit",
-    "source.fixAll.stylelint": true, // 开启stylelint自动修复
+    "source.fixAll.stylelint": "explicit",
-    "source.fixAll.eslint": true, // 开启eslint自动修复
+    "source.fixAll.eslint": "explicit"
   },
   "editor.formatOnSave": true,
   "eslint.validate": [

frontend/src/components/pure/ms-table/base-table.vue

@@ -245,8 +245,7 @@
 </template>
 
 <script lang="ts" setup>
-  import { computed, nextTick, onMounted, ref, useAttrs, watch } from 'vue';
+  import { computed, defineModel, nextTick, onMounted, ref, useAttrs, watch } from 'vue';
-  import { useVModel } from '@vueuse/core';
 
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsPagination from '@/components/pure/ms-pagination/index';

frontend/src/views/bug-management/components/bugDetailTab.vue

@@ -220,8 +220,10 @@
   // 富文本编辑器是否可编辑
   const contentEditAble = ref(false);
   const currentProjectId = computed(() => appStore.currentProjectId);
+  // 前端保存的fileList
   const fileList = ref<MsFileItem[]>([]);
   const bugId = computed(() => props.detailInfo.id);
+  // 后端保存的文件list
   const attachmentsList = ref<AttachFileInfo[]>([]);
   const getListFunParams = ref<TableQueryParams>({
     combine: {
@@ -339,60 +341,24 @@
     associatedDrawer.value = true;
   }
 
-  // 后台传过来的local文件的item列表
+  // 处理文件参数
-  const oldLocalFileList = computed(() => {
-    return attachmentsList.value.filter((item) => item.local).map((item: any) => item.uid);
-  });
-
-  // 已经关联过的id列表
-  const associateFileIds = computed(() => {
-    return attachmentsList.value.filter((item: any) => !item.local).map((item: any) => item.id);
-  });
-
-  // 当前新增传过来的关联list
-  const currentAlreadyAssociateFileList = computed(() => {
-    return fileList.value
-      .filter((item) => !item.local && !associateFileIds.value.includes(item.uid))
-      .map((item: any) => item.uid);
-  });
-
-  // 后台已保存本地文件的item列表
-  const currentOldLocalFileList = computed(() => {
-    return fileList.value.filter((item) => item.local && item.status !== 'init').map((item: any) => item.uid);
-  });
-
-  // 新增关联文件ID列表
-  const newAssociateFileListIds = computed(() => {
-    return fileList.value
-      .filter((item: any) => !item.local && !associateFileIds.value.includes(item.uid))
-      .map((item: any) => item.uid);
-  });
-
-  // 取消关联文件id TODO
-  const unLinkFilesIds = computed(() => {
-    const deleteAssociateFileIds = fileList.value
-      .filter(
-        (item: any) =>
-          !currentAlreadyAssociateFileList.value.includes(item.uid) && associateFileIds.value.includes(item.uid)
-      )
-      .map((item) => item.uid);
-    return associateFileIds.value.filter(
-      (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;
+    const associateFileIds = attachmentsList.value.filter((item) => !item.local).map((item) => item.id);
-    form.value.unLinkRefIds = unLinkFilesIds.value;
+    const newAssociateFileListIds = fileList.value
-    form.value.linkFileIds = newAssociateFileListIds.value;
+      .filter((item) => !item.local && !associateFileIds.includes(item.uid))
+      .map((item) => item.uid);
+
+    const currentOldLocalFileList = fileList.value
+      .filter((item) => item.local && item.status !== 'init')
+      .map((item) => item.uid);
+
+    // 更新form的值
+    form.value.deleteLocalFileIds = attachmentsList.value
+      .filter((item) => item.local && !currentOldLocalFileList.includes(item.uid))
+      .map((item) => item.uid);
+
+    form.value.unLinkRefIds = associateFileIds.filter((id) => !newAssociateFileListIds.includes(id));
+    form.value.linkFileIds = newAssociateFileListIds;
   }
 
   async function startUpload() {

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

@@ -263,7 +263,9 @@
   });
   const formRef = ref();
   const formCreateRef = ref();
-
+  // 保存后端传进来的文件(初始状态)
+  const attachmentsList = ref<AttachFileInfo[]>([]);
+  // 前端展示的文件(当前状态)
   const fileList = ref<MsFileItem[]>([]);
   const formRules = ref<FormItem[]>([]);
   const formItem = ref<FormRuleItem[]>([]);
@@ -287,62 +289,24 @@
     return isEdit.value ? t('bugManagement.editBug') : t('bugManagement.createBug');
   });
 
-  const attachmentsList = ref<AttachFileInfo[]>([]);
+  // 处理文件参数
-
-  // 已经关联过的id列表
-  const associateFileIds = computed(() => {
-    return attachmentsList.value.filter((item: any) => !item.local).map((item: any) => item.id);
-  });
-
-  // 当前新增传过来的关联list
-  const currentAlreadyAssociateFileList = computed(() => {
-    return fileList.value
-      .filter((item) => !item.local && !associateFileIds.value.includes(item.uid))
-      .map((item: any) => item.uid);
-  });
-
-  // 后台已保存本地文件的item列表
-  const currentOldLocalFileList = computed(() => {
-    return fileList.value.filter((item) => item.local && item.status !== 'init').map((item: any) => item.uid);
-  });
-
-  // 后台传过来的local文件的item列表
-  const oldLocalFileList = computed(() => {
-    return attachmentsList.value.filter((item) => item.local).map((item: any) => item.uid);
-  });
-
-  // 新增关联文件ID列表
-  const newAssociateFileListIds = computed(() => {
-    return fileList.value
-      .filter((item: any) => !item.local && !associateFileIds.value.includes(item.uid))
-      .map((item: any) => item.uid);
-  });
-
-  // 取消关联文件id TODO
-  const unLinkFilesIds = computed(() => {
-    const deleteAssociateFileIds = fileList.value
-      .filter(
-        (item: any) =>
-          !currentAlreadyAssociateFileList.value.includes(item.uid) && associateFileIds.value.includes(item.uid)
-      )
-      .map((item) => item.uid);
-    return associateFileIds.value.filter(
-      (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;
+    const associateFileIds = attachmentsList.value.filter((item) => !item.local).map((item) => item.id);
-    form.value.unLinkRefIds = unLinkFilesIds.value;
+    const newAssociateFileListIds = fileList.value
-    form.value.linkFileIds = newAssociateFileListIds.value;
+      .filter((item) => !item.local && !associateFileIds.includes(item.uid))
+      .map((item) => item.uid);
+
+    const currentOldLocalFileList = fileList.value
+      .filter((item) => item.local && item.status !== 'init')
+      .map((item) => item.uid);
+
+    // 更新form的值
+    form.value.deleteLocalFileIds = attachmentsList.value
+      .filter((item) => item.local && !currentOldLocalFileList.includes(item.uid))
+      .map((item) => item.uid);
+
+    form.value.unLinkRefIds = associateFileIds.filter((id) => !newAssociateFileListIds.includes(id));
+    form.value.linkFileIds = newAssociateFileListIds;
   }
 
   // 监视文件列表处理关联和本地文件