fix(缺陷管理): 多平台切换查看详情展示问题

--bug=1037280 --user=宋昌昌 【缺陷管理】用户无评论权限-展示评论输入框 https://www.tapd.cn/55049933/s/1477061
--bug=1037220 --user=宋昌昌 【缺陷管理】项目集成jira平台，查看缺陷详情页，切换下一条缺陷时可以编辑/查看MS平台的旧缺陷 https://www.tapd.cn/55049933/s/1477062

backend/framework/sdk/src/main/resources/i18n/bug.properties

@@ -80,7 +80,7 @@ bug_relation_case.create_user.length_range=创建人长度必须在1-50之间
 bug_not_exist=缺陷不存在
 not_local_bug_error=非本地缺陷，无法操作
 bug_tags_size_large_than=缺陷标签数量超过{0}个
-third_party_not_config=项目应用设置的同步配置未启用, 或服务集成配置为空及未启用;
+third_party_not_config=请正确配置服务集成或项目应用设置的参数, 并启用;
 bug_attachment_upload_error=缺陷附件上传失败
 bug_attachment_link_error=缺陷附件关联失败
 bug_attachment_delete_error=缺陷附件删除失败

backend/framework/sdk/src/main/resources/i18n/bug_en_US.properties

@@ -80,7 +80,7 @@ bug_relation_case.create_user.length_range=createUser length must be between 1-5
 bug_not_exist=Bug does not exist
 bug_tags_size_large_than=Bug size large than {0}
 not_local_bug_error=Not local bug, error
-third_party_not_config=Please correctly configure the  service integration or project application settings and enable them;
+third_party_not_config=Please configure the service integration or project application settings correctly and enable them;
 bug_attachment_upload_error=Bug attachment upload error
 bug_attachment_link_error=Bug attachment link error
 bug_attachment_delete_error=Bug attachment delete error

backend/framework/sdk/src/main/resources/i18n/bug_zh_CN.properties

@@ -80,7 +80,7 @@ bug_relation_case.create_user.length_range=创建人长度必须在1-50之间
 bug_not_exist=缺陷不存在
 not_local_bug_error=非本地缺陷，无法操作
 bug_tags_size_large_than=缺陷标签数量超过{0}个
-third_party_not_config=请正确配置服务集成或项目应用设置的同步缺陷参数, 并启用;
+third_party_not_config=请正确配置服务集成或项目应用设置的参数, 并启用;
 bug_attachment_upload_error=缺陷附件上传失败
 bug_attachment_link_error=缺陷附件关联失败
 bug_attachment_delete_error=缺陷附件删除失败

backend/framework/sdk/src/main/resources/i18n/bug_zh_TW.properties

@@ -79,7 +79,7 @@ bug_relation_case.create_user.length_range=创建人長度必須在1-50之間
 # error
 bug_not_exist=缺陷不存在
 not_local_bug_error=非本地缺陷，無法操作
-third_party_not_config=請正確配置服務集成或項目應用設置的同步缺陷參數, 並啟用;
+third_party_not_config=請正確配置服務集成或項目應用設置的參數, 並啟用;
 bug_tags_size_large_than=缺陷标签数量超过{0}个
 bug_attachment_upload_error=缺陷附件上傳失敗
 bug_attachment_link_error=缺陷附件關聯失敗

backend/services/bug-management/src/main/java/io/metersphere/bug/dto/response/BugDetailDTO.java

@@ -46,6 +46,9 @@ public class BugDetailDTO {
     @Schema(description = "是否平台默认模板")
     private Boolean platformDefault;
 
+    @Schema(description = "所属平台")
+    private String platform;
+
     @Schema(description = "是否关注")
     private Boolean followFlag;
 

backend/services/bug-management/src/main/java/io/metersphere/bug/service/BugService.java

@@ -254,6 +254,7 @@ public class BugService {
         detail.setNum(bug.getNum());
         detail.setProjectId(bug.getProjectId());
         detail.setTemplateId(template.getId());
+        detail.setPlatform(bug.getPlatform());
         detail.setPlatformDefault(template.getPlatformDefault());
         detail.setStatus(bug.getStatus());
         detail.setPlatformBugId(bug.getPlatformBugId());

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

@@ -5,6 +5,7 @@
     unmount-on-close
     :footer="false"
     :title="t('msTable.columnSetting.display')"
+    class="column-drawer"
     @cancel="handleCancel"
   >
     <div class="ms-table-column-selector">
@@ -88,7 +89,7 @@
       >
       <VueDraggable v-model="couldSortColumn" handle=".sort-handle" ghost-class="ghost" @change="handleSwitchChange">
         <div v-for="element in couldSortColumn" :key="element.dataIndex" class="column-drag-item">
-          <div class="flex w-[90%] items-center">
+          <div class="flex w-[60%] items-center">
             <MsIcon type="icon-icon_drag" class="sort-handle cursor-move text-[16px] text-[var(--color-text-4)]" />
             <span class="ml-[8px]">{{ t((element.title || element.columnTitle) as string) }}</span>
           </div>
@@ -254,3 +255,9 @@
     line-height: 16px;
   }
 </style>
+
+<style>
+  .column-drawer .ms-drawer-body-scrollbar {
+    min-width: auto !important;
+  }
+</style>

frontend/src/views/bug-management/components/bug-detail-drawer.vue

@@ -17,6 +17,18 @@
     :mask="false"
     @loaded="loadedBug"
   >
+    <template #titleLeft>
+      <div class="flex items-center">
+        <MsTag
+          size="medium"
+          :closable="false"
+          :type="props.currentPlatform === detailInfo.platform ? 'primary' : 'default'"
+          theme="light"
+        >
+          {{ detailInfo['platform'] }}
+        </MsTag>
+      </div>
+    </template>
     <template #titleRight="{ loading }">
       <div class="rightButtons flex items-center">
         <MsButton
@@ -25,7 +37,7 @@
           status="secondary"
           class="mr-4 !rounded-[var(--border-radius-small)]"
           :loading="editLoading"
-          :disabled="loading"
+          :disabled="loading || props.currentPlatform !== detailInfo.platform"
           @click="updateHandler"
         >
           <MsIcon type="icon-icon_edit_outlined" class="mr-1 font-[16px]" />
@@ -66,7 +78,7 @@
               <span> {{ t('caseManagement.featureCase.more') }}</span>
             </div>
             <template #content>
-              <a-doption @click="handleCopy">
+              <a-doption :disabled="props.currentPlatform !== detailInfo.platform" @click="handleCopy">
                 <MsIcon type="icon-icon_copy_filled" class="font-[16px]" />
                 {{ t('common.copy') }}
               </a-doption>
@@ -107,6 +119,7 @@
                     :detail-info="detailInfo"
                     :is-platform-default-template="isPlatformDefaultTemplate"
                     :platform-system-fields="platformSystemFields"
+                    :current-platform="props.currentPlatform"
                     @update-success="updateSuccess"
                   />
 
@@ -124,67 +137,74 @@
             </div>
           </template>
           <template #second>
-            <div class="rightWrapper p-[24px]">
-              <!-- 自定义字段开始 -->
-              <div class="inline-block w-full break-words">
-                <a-skeleton v-if="loading" class="w-full" :loading="loading" :animation="true">
-                  <a-space direction="vertical" class="w-[100%]" size="large">
-                    <a-skeleton-line :rows="14" :line-height="30" :line-spacing="30" />
-                  </a-space>
-                </a-skeleton>
-                <div v-if="!loading" class="mb-4 font-medium">
-                  <strong>
-                    {{ t('bugManagement.detail.basicInfo') }}
-                  </strong>
-                </div>
-                <MsFormCreate
-                  v-if="!loading"
-                  ref="formCreateRef"
-                  v-model:form-item="formItem"
-                  v-model:api="fApi"
-                  :form-rule="formRules"
-                  class="w-full"
-                  :option="options"
-                  @change="handelFormCreateChange"
-                />
-                <!-- 自定义字段结束 -->
-                <div
-                  v-if="!isPlatformDefaultTemplate && hasAnyPermission(['PROJECT_BUG:READ+UPDATE']) && !loading"
-                  class="baseItem"
-                >
-                  <a-form
-                    :model="{}"
-                    :label-col-props="{
-                      span: 9,
-                    }"
-                    :wrapper-col-props="{
-                      span: 15,
-                    }"
-                    label-align="left"
-                    content-class="tags-class"
+            <a-spin :loading="rightLoading" class="w-full">
+              <!-- 所属平台一致, 详情展示 -->
+              <div v-if="props.currentPlatform === detailInfo.platform" class="rightWrapper p-[24px]">
+                <!-- 自定义字段开始 -->
+                <div class="inline-block w-full break-words">
+                  <a-skeleton v-if="loading" class="w-full" :loading="loading" :animation="true">
+                    <a-space direction="vertical" class="w-[100%]" size="large">
+                      <a-skeleton-line :rows="14" :line-height="30" :line-spacing="30" />
+                    </a-space>
+                  </a-skeleton>
+                  <div v-if="!loading" class="mb-4 font-medium">
+                    <strong>
+                      {{ t('bugManagement.detail.basicInfo') }}
+                    </strong>
+                  </div>
+                  <MsFormCreate
+                    v-if="!loading"
+                    ref="formCreateRef"
+                    v-model:form-item="formItem"
+                    v-model:api="fApi"
+                    :form-rule="formRules"
+                    class="w-full"
+                    :option="options"
+                    @change="handelFormCreateChange"
+                  />
+                  <!-- 自定义字段结束 -->
+                  <div
+                    v-if="!isPlatformDefaultTemplate && hasAnyPermission(['PROJECT_BUG:READ+UPDATE']) && !loading"
+                    class="baseItem"
                   >
-                    <a-form-item field="tags" :label="t('system.orgTemplate.tags')">
-                      <MsTagsInput
-                        v-model:model-value="tags"
-                        :disabled="!hasAnyPermission(['PROJECT_BUG:READ+UPDATE'])"
-                      />
-                    </a-form-item>
-                  </a-form>
+                    <a-form
+                      :model="{}"
+                      :label-col-props="{
+                        span: 9,
+                      }"
+                      :wrapper-col-props="{
+                        span: 15,
+                      }"
+                      label-align="left"
+                      content-class="tags-class"
+                    >
+                      <a-form-item field="tags" :label="t('system.orgTemplate.tags')">
+                        <MsTagsInput
+                          v-model:model-value="tags"
+                          :disabled="!hasAnyPermission(['PROJECT_BUG:READ+UPDATE'])"
+                        />
+                      </a-form-item>
+                    </a-form>
 
-                  <!--                <span class="label"> {{ t('bugManagement.detail.tag') }}</span>-->
-                  <!--                <span style="width: 200px">-->
-                  <!--                  <MsTag v-for="item of tags" :key="item"> {{ item }} </MsTag>-->
-                  <!--                </span>-->
+                    <!--                <span class="label"> {{ t('bugManagement.detail.tag') }}</span>-->
+                    <!--                <span style="width: 200px">-->
+                    <!--                  <MsTag v-for="item of tags" :key="item"> {{ item }} </MsTag>-->
+                    <!--                </span>-->
+                  </div>
                 </div>
-              </div>
 
-              <!-- 内置基础信息结束 -->
-            </div>
+                <!-- 内置基础信息结束 -->
+              </div>
+              <!-- 所属平台不一致, 详情不展示, 展示空面板 -->
+              <div v-else>
+                <a-empty> 暂无内容 </a-empty>
+              </div>
+            </a-spin>
           </template>
         </MsSplitBox>
       </div>
       <CommentInput
-        v-if="activeTab === 'comment'"
+        v-if="activeTab === 'comment' && hasAnyPermission(['PROJECT_BUG:READ+COMMENT'])"
         :content="commentContent"
         is-show-avatar
         :upload-image="handleUploadImage"
@@ -209,6 +229,7 @@
   import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
   import MsTab from '@/components/pure/ms-tab/index.vue';
   import type { MsPaginationI } from '@/components/pure/ms-table/type';
+  import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
   import CommentInput from '@/components/business/ms-comment/input.vue';
   import { CommentParams } from '@/components/business/ms-comment/types';
@@ -257,6 +278,7 @@
     tableData: any[]; // 表格数据
     pagination: MsPaginationI; // 分页器对象
     pageChange: (page: number) => Promise<void>; // 分页变更函数
+    currentPlatform: string;
   }>();
   const caseCount = ref(0);
   const appStore = useAppStore();
@@ -270,6 +292,7 @@
   const showDrawerVisible = defineModel<boolean>('visible', { default: false });
   const bugDetailTabRef = ref();
   const isPlatformDefaultTemplate = ref(false);
+  const rightLoading = ref(false);
   const rowLength = ref<number>(0);
   const activeTab = ref<string>('detail');
 
@@ -415,6 +438,7 @@
   const editLoading = ref<boolean>(false);
 
   function updateSuccess() {
+    rightLoading.value = false;
     detailDrawerRef.value?.initDetail();
     emit('submit');
   }
@@ -535,6 +559,7 @@
   }
 
   const handelFormCreateChange = debounce(() => {
+    rightLoading.value = true;
     bugDetailTabRef.value?.handleSave();
   }, 300);
 

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

@@ -1,5 +1,6 @@
 <template>
-  <div class="relative p-[16px] pb-[16px]">
+  <!-- 所属平台一致, 详情展示 -->
+  <div v-if="props.currentPlatform === props.detailInfo.platform" class="relative p-[16px] pb-[16px]">
     <div class="header">
       <div v-permission="['PROJECT_BUG:READ+UPDATE']" class="header-action">
         <a-button type="text" @click="contentEditAble = !contentEditAble">
@@ -8,55 +9,62 @@
         </a-button>
       </div>
     </div>
-    <!-- 左侧布局默认内容(非平台默认模板时默认展示) -->
-    <div v-if="!isPlatformDefaultTemplate" class="default-content !break-words break-all">
-      <div class="header-title">{{ t('bugManagement.edit.content') }}</div>
-      <div class="mb-4 mt-[16px]" :class="{ 'max-h-[260px]': contentEditAble }">
-        <MsRichText
-          v-if="contentEditAble"
-          v-model:raw="form.description"
-          v-model:filed-ids="descriptionFileIds"
-          :disabled="!contentEditAble"
-          :placeholder="t('editor.placeholder')"
-          :upload-image="handleUploadImage"
-        />
-        <div v-else v-dompurify-html="form?.description || '-'" class="markdown-body"></div>
-      </div>
-      <div v-if="contentEditAble" class="mt-[8px] flex justify-end">
-        <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
-        <a-button class="ml-[12px]" type="primary" :loading="confirmLoading" @click="handleSave">
-          {{ t('common.save') }}
-        </a-button>
-      </div>
-    </div>
-    <!-- 特殊布局内容(平台默认模板时展示) -->
-    <div v-if="isPlatformDefaultTemplate" class="special-content">
-      <div v-for="(item, index) in platformSystemFields" :key="index">
-        <div v-if="item.fieldId !== 'summary'">
-          <h1 class="header-title">
-            <strong>{{ item.fieldName }}</strong>
-          </h1>
-          <div class="mb-4 mt-[16px]" :class="{ 'max-h-[260px]': contentEditAble }">
-            <MsRichText
-              v-if="contentEditAble"
-              v-model:raw="item.defaultValue"
-              :disabled="!contentEditAble"
-              :placeholder="t('editor.placeholder')"
-            />
-            <div v-else v-dompurify-html="item?.defaultValue || '-'" class="markdown-body"></div>
-          </div>
+    <a-form ref="caseFormRef" class="rounded-[4px]" :model="form" layout="vertical">
+      <!-- 左侧布局默认内容(非平台默认模板时默认展示) -->
+      <div v-if="!isPlatformDefaultTemplate" class="default-content !break-words break-all">
+        <div class="header-title">
+          <strong>
+            {{ t('bugManagement.edit.content') }}
+          </strong>
+        </div>
+        <div class="mb-4 mt-[16px]" :class="{ 'max-h-[260px]': contentEditAble }">
+          <MsRichText
+            v-if="contentEditAble"
+            v-model:raw="form.description"
+            v-model:filed-ids="descriptionFileIds"
+            :disabled="!contentEditAble"
+            :placeholder="t('editor.placeholder')"
+            :upload-image="handleUploadImage"
+          />
+          <div v-else v-dompurify-html="form?.description || '-'" class="markdown-body"></div>
+        </div>
+        <div v-if="contentEditAble" class="mt-[8px] flex justify-end">
+          <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
+          <a-button class="ml-[12px]" type="primary" :loading="confirmLoading" @click="handleSave">
+            {{ t('common.save') }}
+          </a-button>
         </div>
       </div>
-      <div v-if="contentEditAble" class="mt-[8px] flex justify-end">
-        <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
-        <a-button class="ml-[12px]" type="primary" :loading="confirmLoading" @click="handleSave">
-          {{ t('common.save') }}
-        </a-button>
+      <!-- 特殊布局内容(平台默认模板时展示) -->
+      <div v-if="isPlatformDefaultTemplate" class="special-content">
+        <div v-for="(item, index) in platformSystemFields" :key="index">
+          <div v-if="item.fieldId !== 'summary'">
+            <h1 class="header-title">
+              <strong>{{ item.fieldName }}</strong>
+            </h1>
+            <div class="mb-4 mt-[16px]" :class="{ 'max-h-[260px]': contentEditAble }">
+              <MsRichText
+                v-if="contentEditAble"
+                v-model:raw="item.defaultValue"
+                :disabled="!contentEditAble"
+                :placeholder="t('editor.placeholder')"
+              />
+              <div v-else v-dompurify-html="item?.defaultValue || '-'" class="markdown-body"></div>
+            </div>
+          </div>
+        </div>
+        <div v-if="contentEditAble" class="mt-[8px] flex justify-end">
+          <a-button type="secondary" @click="handleCancel">{{ t('common.cancel') }}</a-button>
+          <a-button class="ml-[12px]" type="primary" :loading="confirmLoading" @click="handleSave">
+            {{ t('common.save') }}
+          </a-button>
+        </div>
       </div>
-    </div>
-    <div class="mt-4">
-      <AddAttachment v-model:file-list="fileList" @link-file="associatedFile" />
-    </div>
+      <!-- 附件布局 -->
+      <div class="mt-6">
+        <AddAttachment v-model:file-list="fileList" @link-file="associatedFile" />
+      </div>
+    </a-form>
     <MsFileList
       ref="fileListRef"
       v-model:file-list="fileList"
@@ -152,6 +160,11 @@
       </template>
     </MsFileList>
   </div>
+
+  <!-- 所属平台不一致, 详情不展示, 展示空面板 -->
+  <div v-else class="empty-panel">
+    <a-empty> {{ t('bugManagement.detail.platform_no_active') }} </a-empty>
+  </div>
   <div>
     <MsUpload
       v-model:file-list="fileList"
@@ -228,6 +241,7 @@
     allowEdit?: boolean; // 是否允许编辑
     isPlatformDefaultTemplate: boolean; // 是否是平台默认模板
     platformSystemFields: BugEditCustomField[]; // 平台系统字段
+    currentPlatform: string; // 当前平台
   }>();
 
   const emit = defineEmits<{
@@ -504,6 +518,8 @@
   }
 
   watchEffect(() => {
+    console.log(props.currentPlatform);
+    console.log(props.detailInfo.platform);
     initCurrentDetail(props.detailInfo);
   });
   defineExpose({
@@ -528,3 +544,9 @@
     }
   }
 </style>
+
+<style scoped lang="less">
+  :deep(.arco-form-item-label) {
+    font-weight: bold !important;
+  }
+</style>

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

@@ -30,13 +30,7 @@
     >
       <!-- ID -->
       <template #num="{ record, rowIndex }">
-        <a-button
-          type="text"
-          class="px-0"
-          :disabled="currentPlatform !== record.platform"
-          @click="handleShowDetail(record.id, rowIndex)"
-          >{{ record.num }}</a-button
-        >
+        <a-button type="text" class="px-0" @click="handleShowDetail(record.id, rowIndex)">{{ record.num }}</a-button>
       </template>
       <template #operation="{ record }">
         <div class="flex flex-nowrap items-center">
@@ -191,6 +185,7 @@
     v-model:visible="detailVisible"
     :detail-id="activeDetailId"
     :detail-index="activeCaseIndex"
+    :current-platform="currentPlatform"
     :table-data="propsRes.data"
     :page-change="propsEvent.pageChange"
     :pagination="propsRes.msPagination!"
@@ -875,4 +870,4 @@
   :deep(.arco-divider-vertical) {
     margin: 0 8px;
   }
-</style>
+</style>

frontend/src/views/bug-management/locale/en-US.ts

@@ -81,6 +81,7 @@ export default {
       shareTip: 'Share link has been copied to clipboard',
       deleteTitle: 'Delete {name} ？',
       deleteContent: 'Bug witch created by MeterSphere will in recycle bin and third plant bug will be deleted',
+      platform_no_active: 'The bug platform has not been integrated, can not preview and edit details normally',
     },
     batchUpdate: {
       attribute: 'Select attribute',

frontend/src/views/bug-management/locale/zh-CN.ts

@@ -81,6 +81,7 @@ export default {
       shareTip: '分享链接已复制到剪贴板',
       deleteTitle: '确认删除 {name} 吗？',
       deleteContent: '删除后，MeterSphere 创建的缺陷进入回收站；第三方平台同步的缺陷将不做回收',
+      platform_no_active: '该缺陷平台未对接, 无法正常预览及编辑详情相关内容',
     },
     batchUpdate: {
       attribute: '选择属性',