fix(测试用例&测试计划): 用例详情-状态筛选调整

--bug=1045020 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001045020

frontend/src/components/pure/ms-checkbox-dropdown/index.vue

@@ -0,0 +1,53 @@
+<template>
+  <a-dropdown v-model:popup-visible="visible" :hide-on-select="false">
+    <MsButton
+      type="icon"
+      status="secondary"
+      :class="`!rounded-[var(--border-radius-medium)] px-[4px] py-[2px] hover:!bg-[rgb(var(--primary-1))] ${
+        visible || selectList?.length
+          ? 'bg-[rgb(var(--primary-1))] !text-[rgb(var(--primary-5))] '
+          : 'hover:!text-[var(--color-text-2)]'
+      }`"
+      @click="visible = !visible"
+    >
+      <span class="mr-[8px] font-medium"> {{ props.title }} </span>
+      <svg-icon
+        width="16px"
+        height="16px"
+        :name="visible || selectList?.length ? 'filter-icon-color' : 'filter-icon'"
+        class="text-[12px] font-medium"
+      />
+    </MsButton>
+    <template #content>
+      <a-checkbox-group v-model="selectList" direction="vertical" @change="handleChange">
+        <a-checkbox v-for="item in props.options" :key="item.value" :value="item.value">
+          <slot name="item" :filter-item="item">
+            <div class="one-line-text max-w-[120px]">{{ item.label }}</div>
+          </slot>
+        </a-checkbox>
+      </a-checkbox-group>
+    </template>
+  </a-dropdown>
+</template>
+
+<script lang="ts" setup>
+  import MsButton from '@/components/pure/ms-button/index.vue';
+
+  const props = defineProps<{
+    title: string;
+    options: { label: string; value: string }[];
+  }>();
+  const emit = defineEmits<{
+    (e: 'handleChange', val: string[]): void;
+  }>();
+
+  const selectList = defineModel<string[]>('selectList', {
+    required: false,
+  });
+
+  const visible = ref(false);
+
+  function handleChange(val: (string | number | boolean)[]) {
+    emit('handleChange', val as string[]);
+  }
+</script>

frontend/src/views/case-management/caseReview/caseDetail.vue

@@ -28,19 +28,19 @@
             v-model:model-value="keyword"
             :placeholder="t('caseManagement.caseReview.searchPlaceholder')"
             allow-clear
-            class="mr-[8px] w-[240px]"
+            class="mr-[8px] flex-1"
             @search="loadCaseList"
             @press-enter="loadCaseList"
             @clear="loadCaseList"
           />
-          <a-select
+          <MsCheckboxDropdown
-            v-model:model-value="type"
+            v-model:selectList="type"
-            :options="typeOptions"
-            class="w-[92px]"
             :disabled="onlyMineStatus"
-            @change="loadCaseList"
+            :options="typeOptions"
+            :title="t('caseManagement.featureCase.reviewResult')"
+            @handle-change="handleExecResultChange"
           >
-          </a-select>
+          </MsCheckboxDropdown>
         </div>
         <a-spin :loading="caseListLoading" class="h-[calc(100%-46px)] w-full">
           <div class="case-list">
@@ -290,6 +290,7 @@
 
   import MSAvatar from '@/components/pure/ms-avatar/index.vue';
   import MsCard from '@/components/pure/ms-card/index.vue';
+  import MsCheckboxDropdown from '@/components/pure/ms-checkbox-dropdown/index.vue';
   import MsDescription, { Description } from '@/components/pure/ms-description/index.vue';
   import MsEmpty from '@/components/pure/ms-empty/index.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
@@ -341,9 +342,9 @@
     }
   }
 
-  const type = ref('');
+  const type = ref<string[]>([]);
+  const tableFilter = ref();
   const typeOptions = ref([
-    { label: t('common.all'), value: '' },
     { label: t(reviewResultMap.UN_REVIEWED.label), value: 'UN_REVIEWED' },
     { label: t(reviewResultMap.PASS.label), value: 'PASS' },
     { label: t(reviewResultMap.UN_PASS.label), value: 'UN_PASS' },
@@ -374,11 +375,10 @@
         keyword: keyword.value,
         current: pageNation.value.current || 1,
         pageSize: pageNation.value.pageSize,
-        filter: type.value
+        filter: {
-          ? {
+          ...tableFilter.value,
-              status: [type.value],
+          status: type.value,
-            }
+        },
-          : undefined,
         ...otherListQueryParams.value,
       });
       caseList.value = res.list;
@@ -391,6 +391,11 @@
     }
   }
 
+  function handleExecResultChange(val: string[]) {
+    type.value = val;
+    loadCaseList();
+  }
+
   watch(
     () => onlyMineStatus.value,
     () => {
@@ -526,8 +531,8 @@
 
   watch(
     () => activeCaseId.value,
-    () => {
+    async () => {
-      loadCaseDetail();
+      await loadCaseDetail();
       initReviewerAndStatus();
       initReviewHistoryList();
     }
@@ -555,7 +560,7 @@
       const index = caseList.value.findIndex((e) => e.caseId === activeCaseId.value);
 
       // 如果过滤的状态和评审状态不一样，则这条将从当前列表排除
-      const oneMissingCase = type.value !== '' && status !== type.value;
+      const oneMissingCase = type.value.length && !type.value.includes(status);
       if (oneMissingCase) {
         if ((pageNation.value.current - 1) * pageNation.value.pageSize + index + 1 < pageNation.value.total) {
           // 不是最后一个
@@ -583,14 +588,14 @@
         // 当前是最后一个，刷新数据
         loadCaseDetail();
         initReviewHistoryList();
-        loadCaseList();
+        await loadCaseList();
         initReviewerAndStatus();
       }
     } else {
       // 不自动下一个才请求详情
       loadCaseDetail();
       initReviewHistoryList();
-      loadCaseList();
+      await loadCaseList();
       initReviewerAndStatus();
     }
   }
@@ -611,6 +616,7 @@
         current,
         viewFlag: _onlyMine,
         keyword: _keyword,
+        filter,
         combine,
         sort,
         searchMode,
@@ -623,6 +629,8 @@
       };
       viewFlag.value = !!_onlyMine;
       keyword.value = _keyword;
+      tableFilter.value = filter;
+      type.value = filter.status;
       otherListQueryParams.value = {
         combine,
         sort,
@@ -633,7 +641,7 @@
       keyword.value = route.query.reviewId as string;
     }
     await initDetail();
-    loadCase();
+    await loadCase();
     initReviewerAndStatus();
     if (showTab.value === 'detail') {
       initReviewHistoryList();

frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue

@@ -14,18 +14,21 @@
             v-model:model-value="keyword"
             :placeholder="t('caseManagement.caseReview.searchPlaceholder')"
             allow-clear
-            class="mr-[8px] w-[176px]"
+            class="mr-[8px] flex-1"
             @search="loadCaseList"
             @press-enter="loadCaseList"
             @clear="loadCaseList"
           />
-          <a-select
+          <MsCheckboxDropdown
-            v-model:model-value="lastExecResult"
+            v-model:selectList="lastExecResult"
             :options="executeResultOptions"
-            class="flex-1"
+            :title="t('common.executionResult')"
-            @change="loadCaseList"
+            @handle-change="handleExecResultChange"
           >
-          </a-select>
+            <template #item="{ filterItem }">
+              <ExecuteResult :execute-result="filterItem.value as LastExecuteResults" />
+            </template>
+          </MsCheckboxDropdown>
         </div>
         <a-spin :loading="caseListLoading" class="w-full flex-1 overflow-hidden">
           <div class="case-list">
@@ -241,6 +244,7 @@
 
   import MsButton from '@/components/pure/ms-button/index.vue';
   import MsCard from '@/components/pure/ms-card/index.vue';
+  import MsCheckboxDropdown from '@/components/pure/ms-checkbox-dropdown/index.vue';
   import MsDescription, { Description } from '@/components/pure/ms-description/index.vue';
   import MsEmpty from '@/components/pure/ms-empty/index.vue';
   import MsPagination from '@/components/pure/ms-pagination/index';
@@ -302,10 +306,10 @@
   const activeId = ref(route.query.testPlanCaseId as string);
   const canEdit = ref(route.query.canEdit === 'true');
   const keyword = ref('');
-  const lastExecResult = ref('');
+  const lastExecResult = ref<string[]>([]);
+  const tableFilter = ref();
   const executeResultOptions = computed(() => {
     return [
-      { label: t('common.all'), value: '' },
       ...Object.keys(executionResultMap).map((key) => {
         return {
           value: key,
@@ -331,11 +335,10 @@
         keyword: keyword.value,
         current: pageNation.value.current || 1,
         pageSize: pageNation.value.pageSize,
-        filter: lastExecResult.value
+        filter: {
-          ? {
+          ...tableFilter.value,
-              lastExecResult: [lastExecResult.value],
+          lastExecResult: lastExecResult.value,
-            }
+        },
-          : undefined,
         ...otherListQueryParams.value,
       });
       caseList.value = res.list;
@@ -348,6 +351,11 @@
     }
   }
 
+  function handleExecResultChange(val: string[]) {
+    lastExecResult.value = val;
+    loadCaseList();
+  }
+
   function goCaseDetail() {
     openNewPage(CaseManagementRouteEnum.CASE_MANAGEMENT_CASE, {
       id: activeCaseId.value,
@@ -464,7 +472,7 @@
       const index = caseList.value.findIndex((e) => e.id === activeId.value);
 
       // 如果过滤的状态和执行状态不一样，则这条将从当前列表排除
-      const oneMissingCase = lastExecResult.value !== '' && status !== lastExecResult.value;
+      const oneMissingCase = lastExecResult.value.length && !lastExecResult.value.includes(status);
       if (oneMissingCase) {
         if ((pageNation.value.current - 1) * pageNation.value.pageSize + index + 1 < pageNation.value.total) {
           // 不是最后一个
@@ -594,6 +602,7 @@
         total,
         pageSize,
         current,
+        filter,
         keyword: _keyword,
         sort,
         moduleIds,
@@ -607,6 +616,8 @@
         current,
       };
       keyword.value = _keyword;
+      tableFilter.value = filter;
+      lastExecResult.value = filter.lastExecResult;
       otherListQueryParams.value = {
         sort,
         moduleIds,