feat(用例管理): 用例评审详情新增用例评审人快捷修改

backend/services/case-management/src/main/java/io/metersphere/functional/service/CaseReviewFunctionalCaseService.java

@@ -164,8 +164,21 @@ public class CaseReviewFunctionalCaseService {
             list.forEach(item -> {
                 item.setModuleName(moduleMap.get(item.getModuleId()));
                 item.setVersionName(versionMap.get(item.getVersionId()));
-                item.setReviewers(Collections.singletonList(userIdMap.get(item.getCaseId())));
-                item.setReviewNames(Collections.singletonList(userNameMap.get(item.getCaseId())));
+                String reviewer = userIdMap.get(item.getCaseId());
+                if (StringUtils.isNotBlank(reviewer)) {
+                    item.setReviewers(new ArrayList<>(Arrays.asList(reviewer.split(","))));
+                }
+                if (StringUtils.isNotBlank(reviewer)) {
+                    item.setReviewers(new ArrayList<>(Arrays.asList(reviewer.split(","))));
+                } else {
+                    item.setReviewers(new ArrayList<>());
+                }
+                String reviewName = userNameMap.get(item.getCaseId());
+                if (StringUtils.isNotBlank(reviewName)) {
+                    item.setReviewNames(new ArrayList<>(Arrays.asList(reviewName.split(","))));
+                } else {
+                    item.setReviewNames(new ArrayList<>());
+                }
                 item.setCustomFields(collect.get(item.getCaseId()));
                 if (request.isViewStatusFlag()) {
                     List<CaseReviewHistory> histories = caseStatusMap.get(item.getCaseId());

frontend/src/views/case-management/caseReview/components/detail/caseTable.vue

@@ -92,9 +92,31 @@
         </TableFilter>
       </template>
       <template #reviewNames="{ record }">
-        <a-tooltip :content="record.reviewNames.join('、')">
-          <div class="one-line-text">{{ record.reviewNames.join('、') }}</div>
-        </a-tooltip>
+        <MsTagGroup
+          v-if="record.showModuleTree"
+          :tag-list="record.reviewNames"
+          is-string-tag
+          :show-num="1"
+          size="small"
+          theme="outline"
+          @click="record.showModuleTree = false"
+        />
+        <MsSelect
+          v-else
+          v-model:model-value="record.reviewers"
+          v-model:loading="dialogLoading"
+          :max-tag-count="1"
+          class="w-full"
+          :options="reviewersOptions"
+          :search-keys="['label']"
+          allow-search
+          size="mini"
+          :multiple="true"
+          :placeholder="t('project.messageManagement.receiverPlaceholder')"
+          @click.stop="record.showModuleTree = true"
+          @change="() => changeReviewer(record)"
+        >
+        </MsSelect>
       </template>
       <template #status="{ record }">
         <div class="flex items-center gap-[4px]">
@@ -281,6 +303,7 @@
 </template>
 
 <script setup lang="ts">
+  import { ref } from 'vue';
   import { useRoute, useRouter } from 'vue-router';
   import { FormInstance, Message, SelectOptionData } from '@arco-design/web-vue';
 
@@ -293,6 +316,7 @@
   import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
   import type { BatchActionParams, BatchActionQueryParams, MsTableColumn } from '@/components/pure/ms-table/type';
   import useTable from '@/components/pure/ms-table/useTable';
+  import MsTagGroup from '@/components/pure/ms-tag/ms-tag-group.vue';
   import { MsFileItem } from '@/components/pure/ms-upload/types';
   import caseLevel from '@/components/business/ms-case-associate/caseLevel.vue';
   import MsSelect from '@/components/business/ms-select';
@@ -395,6 +419,7 @@
       title: 'caseManagement.caseReview.reviewer',
       dataIndex: 'reviewNames',
       slotName: 'reviewNames',
+      showInTable: true,
       width: 150,
     },
     {
@@ -441,6 +466,7 @@
       return {
         ...record,
         caseLevel: getCaseLevels(record.customFields),
+        showModuleTree: true,
       };
     }
   );
@@ -634,6 +660,7 @@
             ...tableParams.value,
           });
           Message.success(t('common.updateSuccess'));
+          dialogLoading.value = false;
           resetSelector();
           loadList();
           emit('refresh', tableParams.value);
@@ -683,7 +710,7 @@
   }
 
   // 批量更换评审人
-  function changeReviewer() {
+  function changeReviewer(record?: any) {
     dialogFormRef.value?.validate(async (errors) => {
       if (!errors) {
         try {
@@ -691,11 +718,12 @@
           await batchChangeReviewer({
             reviewId: route.query.id as string,
             userId: props.onlyMine ? userStore.id || '' : '',
-            reviewerId: dialogForm.value.reviewer,
+            reviewerId: dialogForm.value.reviewer.length > 0 ? dialogForm.value.reviewer : record.reviewers,
             append: dialogForm.value.isAppend, // 是否追加
             moduleIds: props.activeFolder === 'all' ? [] : [props.activeFolder, ...props.offspringIds],
             ...batchParams.value,
             ...tableParams.value,
+            selectIds: batchParams.value.selectIds.length > 0 ? batchParams.value.selectIds : [record.id],
           });
           Message.success(t('common.updateSuccess'));
           dialogVisible.value = false;
@@ -705,6 +733,7 @@
           // eslint-disable-next-line no-console
           console.log(error);
         } finally {
+          record.showModuleTree = true;
           dialogLoading.value = false;
         }
       }
@@ -897,5 +926,22 @@
   :deep(.arco-radio-label) {
     @apply inline-flex;
   }
+  :deep(.param-input:not(.arco-input-focus, .arco-select-view-focus)) {
+    &:not(:hover) {
+      border-color: transparent !important;
+      .arco-input::placeholder {
+        @apply invisible;
+      }
+      .arco-select-view-icon {
+        @apply invisible;
+      }
+      .arco-select-view-value {
+        color: var(--color-text-brand);
+      }
+      .arco-input-suffix {
+        @apply invisible;
+      }
+    }
+  }
   .ms-table--special-small();
 </style>