From 01d874746808094013f19fcd2fc9fd3dc4ce4874 Mon Sep 17 00:00:00 2001
From: RubyLiu <liulubingjava@163.com>
Date: Mon, 5 Feb 2024 22:25:33 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E7=BC=BA=E9=99=B7=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E8=AF=A6=E6=83=85=E7=BC=96=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/api/modules/bug-management/index.ts   |  29 +-
 frontend/src/api/requrls/bug-management.ts    |  13 +
 .../components/bug-detail-drawer.vue          |  30 +-
 .../bug-management/components/bugCaseTab.vue  | 338 ++++++++----
 .../components/bugDetailTab.vue               | 511 +++++++++++++++---
 .../views/bug-management/createSuccess.vue    |  24 +-
 frontend/src/views/bug-management/edit.vue    |  16 +-
 7 files changed, 771 insertions(+), 190 deletions(-)

diff --git a/frontend/src/api/modules/bug-management/index.ts b/frontend/src/api/modules/bug-management/index.ts
index 150c0697ae..810db6ae33 100644
--- a/frontend/src/api/modules/bug-management/index.ts
+++ b/frontend/src/api/modules/bug-management/index.ts
@@ -4,7 +4,7 @@ import MSR from '@/api/http/index';
 import * as bugURL from '@/api/requrls/bug-management';
 
 import { BugEditFormObject, BugExportParams, BugListItem } from '@/models/bug-management';
-import { AssociatedList, OperationFile } from '@/models/caseManagement/featureCase';
+import { AssociatedList, CreateOrUpdateDemand, DemandItem, OperationFile } from '@/models/caseManagement/featureCase';
 import { CommonList, TableQueryParams, TemplateOption } from '@/models/common';
 
 /**
@@ -181,3 +181,30 @@ export function deleteSingleByRecycle(id: string) {
 export function deleteBatchByRecycle(data: TableQueryParams) {
   return MSR.post({ url: bugURL.getBatchDeleteUrl, data });
 }
+
+// ----------------------关联需求
+
+// 已关联需求列表
+export function getAssociatedList(data: TableQueryParams) {
+  return MSR.post<CommonList<DemandItem[]>>({ url: bugURL.getDemandListUrl, data });
+}
+
+// 缺陷管理-关联用例-未关联用例-列表分页
+export function getUnAssociatedList(data: TableQueryParams) {
+  return MSR.post({ url: bugURL.getUnrelatedDemandListUrl, data });
+}
+
+// 未关联用例-模块树
+export function getModuleTree(data: TableQueryParams) {
+  return MSR.post({ url: `${bugURL.getUnrelatedModuleTreeUrl}`, data });
+}
+
+// 批量关联需求
+export function batchAssociation(data: TableQueryParams) {
+  return MSR.post({ url: bugURL.postAddDemandUrl, data });
+}
+
+// 取消关联
+export function cancelAssociation(id: string) {
+  return MSR.get({ url: `${bugURL.getCancelDemandUrl}/${id}` });
+}
diff --git a/frontend/src/api/requrls/bug-management.ts b/frontend/src/api/requrls/bug-management.ts
index 5bf02bafd4..aa20b9d847 100644
--- a/frontend/src/api/requrls/bug-management.ts
+++ b/frontend/src/api/requrls/bug-management.ts
@@ -51,3 +51,16 @@ export const getBatchRecoverUrl = '/bug/trash/batch-recover';
 export const getDeleteSingleUrl = '/bug/trash/delete/';
 // 批量删除
 export const getBatchDeleteUrl = '/bug/trash/batch-delete';
+
+// 获取关联的需求列表
+export const getDemandListUrl = '/bug/case/page';
+// 批量添加关联
+export const postAddDemandUrl = '/bug/case/relate';
+// 单个取消关联
+export const getCancelDemandUrl = '/bug/case/un-relate/';
+// 未关联的用例列表
+export const getUnrelatedDemandListUrl = '/bug/case/un-relate/page';
+// 未关联的模块树
+export const getUnrelatedModuleTreeUrl = '/bug/case/un-relate/module/tree';
+// 未关联的模块树 数量
+export const getUnrelatedModuleTreeCountUrl = '/bug/case/un-relate/module/count';
diff --git a/frontend/src/views/bug-management/components/bug-detail-drawer.vue b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
index 9a41b87589..7d3554255c 100644
--- a/frontend/src/views/bug-management/components/bug-detail-drawer.vue
+++ b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
@@ -88,20 +88,19 @@
                     <template #title>
                       {{ t('bugManagement.detail.detail') }}
                     </template>
-                    <BugDetailTab />
+                    <BugDetailTab :allow-edit="true" :detail-info="detailInfo" @update-success="updateSuccess" />
                   </a-tab-pane>
                   <a-tab-pane key="case">
                     <template #title>
                       {{ t('bugManagement.detail.case') }}
-                      <a-badge class="relative top-1 ml-1" :count="1000" :max-count="99" />
                     </template>
-                    <BugCaseTab />
+                    <BugCaseTab :bug-id="detailInfo.id" />
                   </a-tab-pane>
                   <a-tab-pane key="comment">
                     <template #title>
                       {{ t('bugManagement.detail.comment') }}
                     </template>
-                    <CommentTab ref="commentRef" bug-id="detailInfo.id" />
+                    <CommentTab ref="commentRef" :bug-id="detailInfo.id" />
                   </a-tab-pane>
                 </a-tabs>
               </div>
@@ -119,6 +118,7 @@
                 :form-rule="formRules"
                 class="w-full"
                 :option="options"
+                @change="handleOK"
               />
               <!-- 自定义字段结束 -->
               <div class="baseItem">
@@ -175,6 +175,7 @@
     followBug,
     getBugDetail,
     getTemplateById,
+    updateBug,
   } from '@/api/modules/bug-management/index';
   import useFullScreen from '@/hooks/useFullScreen';
   import { useI18n } from '@/hooks/useI18n';
@@ -214,7 +215,7 @@
 
   const activeTab = ref<string | number>('detail');
 
-  const detailInfo = ref<Record<string, any>>({}); // 存储当前详情信息，通过loadBug 获取
+  const detailInfo = ref<Record<string, any>>({ match: [] }); // 存储当前详情信息，通过loadBug 获取
   const tags = ref([]);
 
   // 处理表单格式
@@ -332,6 +333,25 @@
     });
   }
 
+  const handleOK = async () => {
+    const values = await fApi.value.validate();
+    if (values) {
+      const params = {
+        id: detailInfo.value.id,
+        projectId: currentProjectId.value,
+        ...values,
+      };
+      try {
+        await updateBug(params);
+        Message.success(t('common.editSuccess'));
+        detailDrawerRef.value?.initDetail();
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      }
+    }
+  };
+
   // 表单配置项
   const options = {
     resetBtn: false, // 不展示默认配置的重置和提交
diff --git a/frontend/src/views/bug-management/components/bugCaseTab.vue b/frontend/src/views/bug-management/components/bugCaseTab.vue
index 24d1ba47c0..50d7686a7d 100644
--- a/frontend/src/views/bug-management/components/bugCaseTab.vue
+++ b/frontend/src/views/bug-management/components/bugCaseTab.vue
@@ -1,148 +1,286 @@
 <template>
-  <div class="p-[16px]">
-    <div class="flex flex-row justify-between">
-      <a-dropdown trigger="hover">
+  <div>
+    <div class="flex items-center justify-between">
+      <a-dropdown @select="handleSelect">
+        <a-button type="primary"> {{ t('caseManagement.featureCase.linkCase') }} </a-button>
         <template #content>
-          <a-doption @click="showRelatedDrawer('api')">{{ t('bugManagement.detail.apiCase') }}</a-doption>
-          <a-doption @click="showRelatedDrawer('scenario')">{{ t('bugManagement.detail.scenarioCase') }}</a-doption>
-          <a-doption @click="showRelatedDrawer('ui')">{{ t('bugManagement.detail.uiCase') }}</a-doption>
-          <a-doption @click="showRelatedDrawer('performance')">{{
-            t('bugManagement.detail.performanceCase')
+          <a-doption v-for="item of caseTypeOptions" :key="item.value" :value="item.value">{{
+            t(item.label)
           }}</a-doption>
         </template>
-        <a-button type="primary">{{ t('bugManagement.edit.linkCase') }}</a-button>
       </a-dropdown>
       <a-input-search
         v-model:model-value="keyword"
+        :placeholder="t('caseManagement.featureCase.searchByNameAndId')"
         allow-clear
-        :placeholder="t('bugManagement.detail.searchCase')"
-        class="w-[230px]"
-        @search="searchUser"
-        @press-enter="searchUser"
+        class="mx-[8px] w-[240px]"
+        @search="searchCase"
+        @press-enter="searchCase"
       ></a-input-search>
     </div>
-    <ms-base-table class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
-      <template #name="{ record }">
-        <span>{{ record.name }}</span>
-        <span v-if="record.adminFlag" class="ml-[4px] text-[var(--color-text-4)]">{{ `(${t('common.admin')})` }}</span>
+    <ms-base-table v-bind="propsRes" v-on="propsEvent">
+      <template #defectName="{ record }">
+        <span class="one-line-text max-w[300px]"> {{ record.name }}</span
+        ><span class="ml-1 text-[rgb(var(--primary-5))]">{{ t('caseManagement.featureCase.preview') }}</span>
       </template>
       <template #operation="{ record }">
-        <MsRemoveButton
-          :title="t('system.organization.removeName', { name: record.name })"
-          :sub-title-tip="t('system.organization.removeTip')"
-          @ok="handleRemove()"
-        />
+        <MsButton @click="cancelLink(record)">{{ t('caseManagement.featureCase.cancelLink') }}</MsButton>
+      </template>
+      <template v-if="(keyword || '').trim() === ''" #empty>
+        <div class="flex w-full items-center justify-center">
+          {{ t('caseManagement.caseReview.tableNoData') }}
+          <a-dropdown @select="handleSelect">
+            <MsButton class="ml-[8px]">
+              {{ t('caseManagement.featureCase.linkCase') }}
+            </MsButton>
+            <template #content>
+              <a-doption v-for="item of caseTypeOptions" :key="item.value" :value="item.value">{{
+                t(item.label)
+              }}</a-doption>
+            </template>
+          </a-dropdown>
+        </div>
       </template>
     </ms-base-table>
+    <MsCaseAssociate
+      v-model:visible="innerVisible"
+      v-model:project-id="innerProject"
+      v-model:currentSelectCase="currentSelectCase"
+      :ok-button-disabled="associateForm.reviewers.length === 0"
+      :get-modules-func="getModuleTree"
+      :modules-params="modulesTreeParams"
+      :get-table-func="getUnAssociatedList"
+      :table-params="getTableParams"
+      :modules-count="modulesCount"
+      :module-options="caseTypeOptions"
+      :confirm-loading="confirmLoading"
+      :case-id="props.bugId"
+      :associated-ids="associatedIds"
+      :type="RequestModuleEnum.API_CASE"
+      @close="emit('close')"
+      @save="saveHandler"
+    >
+    </MsCaseAssociate>
   </div>
-  <MsDrawer
-    :width="680"
-    :visible="relatedVisible"
-    unmount-on-close
-    :footer="false"
-    :mask="false"
-    @cancel="relatedVisible = false"
-  >
-    <template #title>
-      <div class="flex flex-row items-center gap-[4px]">
-        <div>{{ t('bugManagement.detail.relatedCase') }}</div>
-        <a-select>
-          <a-option>1</a-option>
-          <a-option>2</a-option>
-          <a-option>3</a-option>
-        </a-select>
-      </div>
-    </template>
-  </MsDrawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
   import { ref } from 'vue';
-  import { Message } from '@arco-design/web-vue';
 
-  import MsDrawer from '@/components/pure/ms-drawer/index.vue';
+  import MsButton from '@/components/pure/ms-button/index.vue';
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
-  import { MsTableColumn } from '@/components/pure/ms-table/type';
+  import type { MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
-  import MsRemoveButton from '@/components/business/ms-remove-button/MsRemoveButton.vue';
+  import MsCaseAssociate from '@/components/business/ms-case-associate/index.vue';
+  import { RequestModuleEnum } from '@/components/business/ms-case-associate/utils';
 
-  import { postProjectMemberByProjectId } from '@/api/modules/setting/organizationAndProject';
+  import {
+    batchAssociation,
+    cancelAssociation,
+    getAssociatedList,
+    getModuleTree,
+    getUnAssociatedList,
+  } from '@/api/modules/bug-management';
+  import { postTabletList } from '@/api/modules/project-management/menuManagement';
   import { useI18n } from '@/hooks/useI18n';
-  import { formatPhoneNumber } from '@/utils';
+  import { useAppStore } from '@/store';
+  import useFeatureCaseStore from '@/store/modules/case/featureCase';
+
+  import type { TableQueryParams } from '@/models/common';
+  import { TableKeyEnum } from '@/enums/tableEnum';
+
+  import Message from '@arco-design/web-vue/es/message';
+
+  const appStore = useAppStore();
+  const featureCaseStore = useFeatureCaseStore();
 
   const { t } = useI18n();
 
-  const relatedVisible = ref(false);
-  const relatedType = ref('api');
+  const currentProjectId = computed(() => appStore.currentProjectId);
 
-  const showRelatedDrawer = (type: string) => {
-    relatedType.value = type;
-  };
+  const props = defineProps<{
+    bugId: string; // 缺陷id
+  }>();
 
-  const keyword = ref('');
+  const emit = defineEmits<{
+    (e: 'update:visible', val: boolean): void;
+    (e: 'update:project', val: string): void;
+    (e: 'success', val: string[]): void;
+    (e: 'close'): void;
+  }>();
+  const keyword = ref<string>('');
 
-  const projectColumn: MsTableColumn = [
+  const columns: MsTableColumn = [
     {
-      title: 'system.organization.userName',
+      title: 'caseManagement.featureCase.tableColumnID',
+      dataIndex: 'id',
+      width: 200,
+      showInTable: true,
+      showTooltip: true,
+      ellipsis: true,
+      showDrag: false,
+    },
+    {
+      title: 'caseManagement.featureCase.tableColumnName',
       slotName: 'name',
       dataIndex: 'name',
+      showInTable: true,
       showTooltip: true,
-      width: 200,
+      width: 300,
+      ellipsis: true,
+      showDrag: false,
     },
     {
-      title: 'system.organization.email',
-      dataIndex: 'email',
+      title: 'caseManagement.featureCase.projectName',
+      slotName: 'projectName',
+      dataIndex: 'projectName',
+      showInTable: true,
       showTooltip: true,
-      width: 200,
+      width: 300,
+      ellipsis: true,
+      showDrag: false,
     },
     {
-      title: 'system.organization.phone',
-      dataIndex: 'phone',
+      title: 'caseManagement.featureCase.tableColumnVersion',
+      slotName: 'version',
+      dataIndex: 'version',
+      showInTable: true,
+      showTooltip: true,
+      width: 300,
+      ellipsis: true,
+      showDrag: false,
+    },
+    {
+      title: 'caseManagement.featureCase.changeType',
+      slotName: 'type',
+      dataIndex: 'type',
+      showInTable: true,
+      showTooltip: true,
+      width: 300,
+      ellipsis: true,
+      showDrag: false,
+    },
+    {
+      title: 'caseManagement.featureCase.tableColumnActions',
+      slotName: 'operation',
+      dataIndex: 'operation',
+      fixed: 'right',
+      width: 140,
+      showInTable: true,
+      showDrag: false,
     },
-    { title: 'system.organization.operation', slotName: 'operation' },
   ];
 
-  const { propsRes, propsEvent, loadList, setKeyword } = useTable(
-    postProjectMemberByProjectId,
-    {
-      heightUsed: 240,
-      columns: projectColumn,
-      scroll: { x: '100%' },
-      selectable: false,
-      noDisable: false,
-      pageSimple: true,
-    },
-    (record) => {
-      return {
-        ...record,
-        phone: formatPhoneNumber(record.phone || ''),
-      };
-    }
-  );
+  const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(getAssociatedList, {
+    columns,
+    scroll: { x: '100%' },
+    heightUsed: 340,
+    enableDrag: true,
+  });
 
-  async function searchUser() {
+  const innerVisible = ref(false);
+  const innerProject = ref(currentProjectId.value);
+
+  const associateForm = ref({
+    reviewers: [],
+  });
+
+  const associatedIds = ref<string[]>([]);
+
+  const currentSelectCase = ref<string>('');
+
+  const modulesTreeParams = ref<TableQueryParams>({});
+
+  const getTableParams = ref<TableQueryParams>({});
+
+  function handleSelect(value: string | number | Record<string, any> | undefined) {
+    currentSelectCase.value = value as string;
+    innerVisible.value = true;
+  }
+
+  async function getFetch() {
+    setLoadListParams({
+      keyword: keyword.value,
+      bugId: props.bugId,
+    });
+    await loadList();
+    const { msPagination } = propsRes.value;
+    featureCaseStore.setListCount(featureCaseStore.activeTab, msPagination?.total || 0);
+  }
+
+  async function cancelLink(record: any) {
+    try {
+      const { id } = record;
+      await cancelAssociation(id);
+    } catch (error) {
+      console.log(error);
+    }
+  }
+
+  const caseTypeOptions = ref<{ label: string; value: string }[]>([]);
+
+  const modulesCount = ref<Record<string, any>>({});
+
+  const confirmLoading = ref<boolean>(false);
+
+  async function saveHandler(params: TableQueryParams) {
+    try {
+      confirmLoading.value = true;
+      await batchAssociation(params);
+      Message.success(t('caseManagement.featureCase.AssociatedSuccess'));
+      innerVisible.value = false;
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      confirmLoading.value = false;
+    }
+  }
+
+  const moduleMaps: Record<string, { label: string; value: string }[]> = {
+    apiTest: [
+      {
+        value: 'API',
+        label: t('caseManagement.featureCase.apiCase'),
+      },
+      {
+        value: 'SCENARIO',
+        label: t('caseManagement.featureCase.sceneCase'),
+      },
+    ],
+    uiTest: [
+      {
+        value: 'UI',
+        label: t('caseManagement.featureCase.uiCase'),
+      },
+    ],
+    loadTest: [
+      {
+        value: 'PERFORMANCE',
+        label: t('caseManagement.featureCase.propertyCase'),
+      },
+    ],
+  };
+
+  async function getEnabledModules() {
+    const result = await postTabletList({ projectId: currentProjectId.value });
+    const caseArr = result.filter((item) => Object.keys(moduleMaps).includes(item.module));
+    caseArr.forEach((item: any) => {
+      const currentModule = moduleMaps[item.module];
+      caseTypeOptions.value.push(...currentModule);
+    });
+    currentSelectCase.value = caseTypeOptions.value[0].value;
+  }
+
+  async function searchCase() {
     setKeyword(keyword.value);
     await loadList();
   }
 
-  const fetchData = async () => {
-    await loadList();
-  };
-
-  const handleRemove = async () => {
-    try {
-      Message.success(t('common.removeSuccess'));
-      fetchData();
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.error(error);
-    }
-  };
+  onMounted(async () => {
+    getEnabledModules();
+    getFetch();
+  });
 </script>
 
-<style lang="less" scoped>
-  :deep(.custom-height) {
-    height: 100vh !important;
-    border: 1px solid red;
-  }
-</style>
+<style scoped></style>
diff --git a/frontend/src/views/bug-management/components/bugDetailTab.vue b/frontend/src/views/bug-management/components/bugDetailTab.vue
index 92b0aef1b4..49198a306f 100644
--- a/frontend/src/views/bug-management/components/bugDetailTab.vue
+++ b/frontend/src/views/bug-management/components/bugDetailTab.vue
@@ -2,111 +2,479 @@
   <div class="p-[16px]">
     <div class="header">
       <div class="header-title">{{ t('bugManagement.edit.content') }}</div>
-      <div class="header-action">
-        <a-button>
+      <div v-if="!contentEditAble" v-permission="['PROJECT_BUG:READ+UPDATE']" class="header-action">
+        <a-button type="text" @click="contentEditAble = true">
           <template #icon> <MsIconfont type="icon-icon_edit_outlined" /> </template>
           {{ t('bugManagement.edit.contentEdit') }}
         </a-button>
       </div>
     </div>
-    <div class="header">
-      <div class="header-title">{{ t('bugManagement.edit.content') }}</div>
-    </div>
     <div class="mt-[8]" :class="{ 'max-h-[260px]': contentEditAble }">
       <MsRichText
-        v-if="form.content"
+        v-if="contentEditAble"
         v-model:raw="form.content"
+        v-model:filed-ids="fileIds"
         :disabled="!contentEditAble"
         :placeholder="t('bugManagement.edit.contentPlaceholder')"
+        :upload-image="handleUploadImage"
       />
-      <div v-else>-</div>
+      <div v-else v-dompurify-html="form?.content || '-'" class="text-[var(--color-text-3)]"></div>
     </div>
-  </div>
-  <a-dropdown trigger="hover">
-    <template #content>
-      <MsUpload
-        v-model:file-list="fileList"
-        :auto-upload="false"
-        multiple
-        draggable
-        accept="unknown"
-        is-limit
-        size-unit="MB"
-        :max-size="500"
-      >
-        <a-doption>{{ t('bugManagement.edit.localUpload') }}</a-doption>
-      </MsUpload>
-      <a-doption @click="handleLineFile">{{ t('bugManagement.edit.linkFile') }}</a-doption>
-    </template>
-    <a-button type="outline">
-      <template #icon>
-        <icon-plus />
+    <div v-if="contentEditAble" class="flex justify-end">
+      <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
+      <a-button class="ml-[12px]" type="primary" :loading="confirmLoading">
+        {{ t('common.save') }}
+      </a-button></div
+    >
+    <div v-if="props.allowEdit">
+      <div class="font-medium text-[var(--color-text-1)]">
+        {{ t('bugManagement.edit.file') }}
+      </div>
+      <div class="mb-1">
+        <a-dropdown position="tr" trigger="hover">
+          <a-button v-permission="['PROJECT_BUG:READ+UPDATE']" type="outline">
+            <template #icon> <icon-plus class="text-[14px]" /> </template
+            >{{ t('system.orgTemplate.addAttachment') }}</a-button
+          >
+          <template #content>
+            <a-upload
+              ref="uploadRef"
+              v-model:file-list="fileList"
+              :auto-upload="false"
+              :show-file-list="false"
+              :before-upload="beforeUpload"
+            >
+              <template #upload-button>
+                <a-button type="text" class="!text-[var(--color-text-1)]">
+                  <icon-upload />{{ t('caseManagement.featureCase.uploadFile') }}
+                </a-button>
+              </template>
+            </a-upload>
+            <a-button type="text" class="!text-[var(--color-text-1)]" @click="associatedFile">
+              <MsIcon type="icon-icon_link-copy_outlined" size="16" />
+              {{ t('caseManagement.featureCase.associatedFile') }}
+            </a-button>
+          </template>
+        </a-dropdown>
+      </div>
+    </div>
+    <div class="mb-[8px] mt-[2px] text-[var(--color-text-4)]">{{ t('bugManagement.edit.fileExtra') }}</div>
+    <MsFileList
+      ref="fileListRef"
+      v-model:file-list="fileList"
+      :show-tab="false"
+      :request-params="{
+        bugId: bugId,
+        projectId: currentProjectId,
+      }"
+      :upload-func="uploadOrAssociationFile"
+      :handle-delete="deleteFileHandler"
+      :show-delete="props.allowEdit"
+    >
+      <template #actions="{ item }">
+        <div v-if="props.allowEdit">
+          <!-- 本地文件 -->
+          <div v-if="item.local || item.status === 'init'" class="flex flex-nowrap">
+            <MsButton
+              v-if="item.status !== 'init'"
+              type="button"
+              status="primary"
+              class="!mr-[4px]"
+              @click="handlePreview(item)"
+            >
+              {{ t('ms.upload.preview') }}
+            </MsButton>
+            <MsButton type="button" status="primary" class="!mr-[4px]" @click="transferVisible = true">
+              {{ t('caseManagement.featureCase.storage') }}
+            </MsButton>
+            <TransferModal
+              v-model:visible="transferVisible"
+              :request-fun="transferFileRequest"
+              :params="{
+                projectId: currentProjectId,
+                bugId: bugId,
+                fileId: item.uid,
+                local: true,
+              }"
+              @success="emit('updateSuccess')"
+            />
+            <MsButton
+              v-if="item.status === 'done'"
+              type="button"
+              status="primary"
+              class="!mr-[4px]"
+              @click="downloadFile(item)"
+            >
+              {{ t('caseManagement.featureCase.download') }}
+            </MsButton>
+          </div>
+          <!-- 关联文件 -->
+          <div v-else class="flex flex-nowrap">
+            <MsButton
+              v-if="item.status !== 'init'"
+              type="button"
+              status="primary"
+              class="!mr-[4px]"
+              @click="handlePreview(item)"
+            >
+              {{ t('ms.upload.preview') }}
+            </MsButton>
+            <MsButton
+              v-if="item.status === 'done'"
+              type="button"
+              status="primary"
+              class="!mr-[4px]"
+              @click="downloadFile(item)"
+            >
+              {{ t('caseManagement.featureCase.download') }}
+            </MsButton>
+            <MsButton
+              v-if="item.isUpdateFlag"
+              type="button"
+              status="primary"
+              class="!mr-[4px]"
+              @click="handleUpdateFile(item)"
+            >
+              {{ t('common.update') }}
+            </MsButton>
+          </div>
+        </div>
       </template>
-      {{ t('bugManagement.edit.uploadFile') }}
-    </a-button>
-  </a-dropdown>
-  <div class="mb-[8px] mt-[2px] text-[var(--color-text-4)]">{{ t('bugManagement.edit.fileExtra') }}</div>
-  <FileList
-    :show-tab="false"
-    :file-list="fileList"
-    :upload-func="uploadFile"
-    @delete-file="deleteFile"
-    @reupload="reupload"
-    @handle-preview="handlePreview"
-  >
-  </FileList>
+      <template #title="{ item }">
+        <span v-if="item.isUpdateFlag" class="ml-4 flex items-center font-normal text-[rgb(var(--warning-6))]"
+          ><icon-exclamation-circle-fill /> <span>{{ t('caseManagement.featureCase.fileIsUpdated') }}</span>
+        </span>
+      </template>
+    </MsFileList>
+  </div>
+  <RelateFileDrawer
+    v-model:visible="associatedDrawer"
+    :get-tree-request="getModules"
+    :get-count-request="getModulesCount"
+    :get-list-request="getAssociatedFileList"
+    :get-list-fun-params="getListFunParams"
+    @save="saveSelectAssociatedFile"
+  />
+  <a-image-preview v-model:visible="previewVisible" :src="imageUrl" />
 </template>
 
 <script setup lang="ts">
-  import { FileItem } from '@arco-design/web-vue';
+  import { Message } from '@arco-design/web-vue';
 
+  import MsButton from '@/components/pure/ms-button/index.vue';
   import MsIconfont from '@/components/pure/ms-icon-font/index.vue';
   import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
-  import FileList from '@/components/pure/ms-upload/fileList.vue';
-  import MsUpload from '@/components/pure/ms-upload/index.vue';
+  import MsFileList from '@/components/pure/ms-upload/fileList.vue';
+  import { MsFileItem } from '@/components/pure/ms-upload/types';
+  import RelateFileDrawer from '@/components/business/ms-link-file/associatedFileDrawer.vue';
+  import TransferModal from '@/views/case-management/caseManagementFeature/components/tabContent/transferModal.vue';
 
+  import {
+    checkFileIsUpdateRequest,
+    deleteFileOrCancelAssociation,
+    downloadFileRequest,
+    editorUploadFile,
+    getAssociatedFileList,
+    previewFile,
+    transferFileRequest,
+    updateFile,
+    uploadOrAssociationFile,
+  } from '@/api/modules/bug-management';
+  import { updateCaseRequest } from '@/api/modules/case-management/featureCase';
+  import { getModules, getModulesCount } from '@/api/modules/project-management/fileManagement';
   import { useI18n } from '@/hooks/useI18n';
+  import { useAppStore } from '@/store';
+  import { downloadByteFile, sleep } from '@/utils';
+  import { scrollIntoView } from '@/utils/dom';
+
+  import { BugEditFormObject } from '@/models/bug-management';
+  import { AssociatedList, AttachFileInfo } from '@/models/caseManagement/featureCase';
+  import { TableQueryParams } from '@/models/common';
+
+  import { convertToFileByBug } from '@/views/bug-management/utils';
 
   const { t } = useI18n();
 
+  const props = defineProps<{
+    detailInfo: BugEditFormObject;
+    allowEdit?: boolean; // 是否允许编辑
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'updateSuccess'): void;
+  }>();
+
+  const appStore = useAppStore();
+  const transferVisible = ref<boolean>(false);
+  const previewVisible = ref<boolean>(false);
+  // 富文本附件id
+  const fileIds = ref<string[]>([]);
+  const imageUrl = ref<string>('');
+  const associatedDrawer = ref(false);
+  const fileListRef = ref<InstanceType<typeof MsFileList>>();
+  // 富文本编辑器是否可编辑
   const contentEditAble = ref(false);
-  const fileList = ref<FileItem[]>([]);
+  const currentProjectId = computed(() => appStore.currentProjectId);
+  const fileList = ref<MsFileItem[]>([]);
+  const bugId = computed(() => props.detailInfo.id);
+  const attachmentsList = ref<AttachFileInfo[]>([]);
+  const getListFunParams = ref<TableQueryParams>({
+    combine: {
+      hiddenIds: [],
+    },
+  });
   const form = ref({
     content: '',
-    fileList: [],
+    deleteLocalFileIds: [] as string[],
+    unLinkRefIds: [] as string[],
+    linkFileIds: [] as string[],
   });
-  const uploadFile = (file: File) => {
-    const fileItem: FileItem = {
-      uid: `${Date.now()}`,
-      name: file.name,
-      status: 'init',
-      file,
-    };
-    fileList.value.push(fileItem);
-    return Promise.resolve(fileItem);
-  };
-  const handlePreview = (item: FileItem) => {
-    const { url } = item;
-    window.open(url);
+
+  const handleFileFunc = async (attachments: AttachFileInfo[]) => {
+    if (attachments && attachments.length) {
+      attachmentsList.value = attachments;
+      // 检查文件是否有更新
+      const checkUpdateFileIds = await checkFileIsUpdateRequest(attachments.map((item: any) => item.fileId));
+      // 处理文件列表
+      fileList.value =
+        attachments
+          .map((fileInfo: any) => {
+            return {
+              ...fileInfo,
+              name: fileInfo.fileName,
+              isUpdateFlag: checkUpdateFileIds.includes(fileInfo.id),
+            };
+          })
+          .map((fileInfo: any) => {
+            return convertToFileByBug(fileInfo);
+          }) || [];
+    }
   };
 
-  const deleteFile = (item: FileItem) => {
-    fileList.value = fileList.value.filter((e) => e.uid !== item.uid);
+  function handleCancel() {
+    contentEditAble.value = false;
+  }
+  const confirmLoading = ref<boolean>(false);
+
+  // function handleOK() {
+  //   caseFormRef.value?.validate().then(async (res: any) => {
+  //     if (!res) {
+  //       try {
+  //         confirmLoading.value = true;
+  //         await updateCaseRequest();
+  //         Message.success(t('caseManagement.featureCase.editSuccess'));
+  //         handleCancel();
+  //         emit('updateSuccess');
+  //       } catch (error) {
+  //         // eslint-disable-next-line no-console
+  //         console.log(error);
+  //       } finally {
+  //         confirmLoading.value = false;
+  //       }
+  //     }
+  //     return scrollIntoView(document.querySelector('.arco-form-item-message'), { block: 'center' });
+  //   });
+  // }
+
+  const initCurrentDetail = async (detail: BugEditFormObject) => {
+    const { attachments, content } = detail;
+    form.value.content = content;
+    handleFileFunc(attachments);
   };
 
-  const reupload = (item: FileItem) => {
-    fileList.value = fileList.value.map((e) => {
-      if (e.uid === item.uid) {
-        return {
-          ...e,
-          status: 'init',
-        };
-      }
-      return e;
+  // 删除本地文件
+  async function deleteFileHandler(item: MsFileItem) {
+    try {
+      const params = {
+        id: item.uid,
+        local: item.local,
+        bugId,
+        projectId: currentProjectId.value,
+      };
+      await deleteFileOrCancelAssociation(params);
+      Message.success(
+        item.local ? t('caseManagement.featureCase.deleteSuccess') : t('caseManagement.featureCase.cancelLinkSuccess')
+      );
+      emit('updateSuccess');
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  function beforeUpload(file: File) {
+    const _maxSize = 50 * 1024 * 1024;
+    if (file.size > _maxSize) {
+      Message.warning(t('ms.upload.overSize'));
+      return Promise.resolve(false);
+    }
+    return Promise.resolve(true);
+  }
+
+  function handleChange(_fileList: MsFileItem[]) {
+    fileList.value = _fileList.map((e) => {
+      return {
+        ...e,
+        enable: true, // 是否启用
+        local: true, // 是否本地文件
+      };
     });
-  };
+  }
 
-  const handleLineFile = () => {};
+  // 预览图片
+  async function handlePreview(item: MsFileItem) {
+    try {
+      previewVisible.value = true;
+      if (item.status !== 'init') {
+        const res = await previewFile({
+          projectId: currentProjectId.value,
+          bugId: bugId.value as string,
+          fileId: item.uid,
+          associated: !item.local,
+        });
+        const blob = new Blob([res], { type: 'image/jpeg' });
+        imageUrl.value = URL.createObjectURL(blob);
+      } else {
+        imageUrl.value = item.url || '';
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  // 下载
+  async function downloadFile(item: MsFileItem) {
+    try {
+      const res = await downloadFileRequest({
+        projectId: currentProjectId.value,
+        bugId: bugId.value as string,
+        fileId: item.uid,
+        associated: !item.local,
+      });
+      downloadByteFile(res, `${item.name}`);
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  function associatedFile() {
+    associatedDrawer.value = true;
+  }
+
+  // 处理关联文件
+  function saveSelectAssociatedFile(fileData: AssociatedList[]) {
+    const fileResultList = fileData.map((fileInfo) => convertToFileByBug(fileInfo));
+    fileList.value.push(...fileResultList);
+  }
+
+  // 后台传过来的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;
+    form.value.unLinkRefIds = unLinkFilesIds.value;
+    form.value.linkFileIds = newAssociateFileListIds.value;
+  }
+
+  async function startUpload() {
+    await sleep(300);
+    fileListRef.value?.startUpload();
+    emit('updateSuccess');
+  }
+
+  // 文件列表单个上传
+  watch(
+    () => fileList.value,
+    async (val) => {
+      const isNewFiles = val.filter((item) => item.status === 'init').length;
+      if (val && isNewFiles) {
+        startUpload();
+      }
+    }
+  );
+
+  // 更新文件
+  async function handleUpdateFile(item: MsFileItem) {
+    try {
+      await updateFile(currentProjectId.value, item.associationId);
+      Message.success(t('common.updateSuccess'));
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  async function handleUploadImage(file: File) {
+    const { data } = await editorUploadFile({
+      fileList: [file],
+    });
+    return data;
+  }
+
+  // 监视文件列表处理关联和本地文件
+  watch(
+    () => fileList.value,
+    (val) => {
+      if (val) {
+        getListFunParams.value.combine.hiddenIds = fileList.value.filter((item) => !item.local).map((item) => item.uid);
+        getFilesParams();
+      }
+    },
+    { deep: true }
+  );
+
+  watchEffect(() => {
+    initCurrentDetail(props.detailInfo);
+  });
 </script>
 
 <style lang="less" scoped>
@@ -115,6 +483,7 @@
     justify-content: space-between;
     align-items: center;
     &-title {
+      font-weight: 500;
       color: var(--color-text-1);
     }
     &-action {
diff --git a/frontend/src/views/bug-management/createSuccess.vue b/frontend/src/views/bug-management/createSuccess.vue
index fa83fced13..ec4baf8690 100644
--- a/frontend/src/views/bug-management/createSuccess.vue
+++ b/frontend/src/views/bug-management/createSuccess.vue
@@ -80,20 +80,20 @@
   ]);
 
   const isNextTip = ref<boolean>(false);
-  const countDown = ref<number>(5);
+  const countDown = ref<number>(15);
   const timer = ref<any>(null);
   function setCountdown() {
-    // timer.value = setInterval(() => {
-    //   if (countDown.value > 1) {
-    //     --countDown.value;
-    //   } else {
-    //     clearInterval(timer.value);
-    //     router.push({
-    //       name: BugManagementRouteEnum.BUG_MANAGEMENT_INDEX,
-    //     });
-    //   }
-    // }, 1000);
-    timer.value = 5;
+    timer.value = setInterval(() => {
+      if (countDown.value > 1) {
+        --countDown.value;
+      } else {
+        clearInterval(timer.value);
+        router.push({
+          name: BugManagementRouteEnum.BUG_MANAGEMENT_INDEX,
+        });
+      }
+    }, 1000);
+    timer.value = 15;
   }
 
   function isDoNotShowAgainChecked() {
diff --git a/frontend/src/views/bug-management/edit.vue b/frontend/src/views/bug-management/edit.vue
index 33b21371d4..98ee8ade52 100644
--- a/frontend/src/views/bug-management/edit.vue
+++ b/frontend/src/views/bug-management/edit.vue
@@ -218,6 +218,7 @@
   } from '@/api/modules/bug-management';
   import { getModules, getModulesCount } from '@/api/modules/project-management/fileManagement';
   import { useI18n } from '@/hooks/useI18n';
+  import useVisit from '@/hooks/useVisit';
   import router from '@/router';
   import { useAppStore } from '@/store';
   import { downloadByteFile } from '@/utils';
@@ -274,9 +275,12 @@
   const isEdit = computed(() => !!route.query.id && route.params.mode === 'edit');
   const bugId = computed(() => route.query.id || '');
   const isEditOrCopy = computed(() => !!bugId.value);
+  const isCopy = computed(() => route.params.mode === 'copy');
   const imageUrl = ref('');
   const previewVisible = ref<boolean>(false);
   const richTextFileIds = ref<string[]>([]);
+  const visitedKey = 'doNotNextTipCreateBug';
+  const { getIsVisited } = useVisit(visitedKey);
 
   const title = computed(() => {
     return isEdit.value ? t('bugManagement.editBug') : t('bugManagement.createBug');
@@ -507,10 +511,13 @@
                   });
                 });
               }
-              const tmpObj = {
+              const tmpObj: BugEditFormObject = {
                 ...form.value,
                 customFields,
               };
+              if (isCopy.value) {
+                delete tmpObj.id;
+              }
               // 执行保存操作
               const res = await createOrUpdateBug({ request: tmpObj, fileList: fileList.value as unknown as File[] });
               if (isEdit.value) {
@@ -520,6 +527,7 @@
                 });
               } else {
                 Message.success(t('common.createSuccess'));
+
                 if (isContinue) {
                   // 如果是保存并继续创建
                   const { templateId } = form.value;
@@ -536,6 +544,12 @@
                   fileList.value = [];
                 } else {
                   // 否则跳转到成功页
+                  if (getIsVisited()) {
+                    router.push({
+                      name: BugManagementRouteEnum.BUG_MANAGEMENT_INDEX,
+                    });
+                    return;
+                  }
                   router.push({
                     name: BugManagementRouteEnum.BUG_MANAGEMENT_CREATE_SUCCESS,
                     query: {