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

--bug=1045020 --user=吕梦园 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001045020
2024-08-16 17:21:07 +08:00 · 2024-08-16 17:21:07 +08:00 · d4e9bfedd3
parent b26444f210
commit d4e9bfedd3
3 changed files with 106 additions and 34 deletions
--- a/frontend/src/components/pure/ms-checkbox-dropdown/index.vue
+++ b/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>
--- a/frontend/src/views/case-management/caseReview/caseDetail.vue
+++ b/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
-            v-model:model-value="type"
-            :options="typeOptions"
-            class="w-[92px]"
+          <MsCheckboxDropdown
+            v-model:selectList="type"
            :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
-          ? {
-              status: [type.value],
-            }
-          : undefined,
+        filter: {
+          ...tableFilter.value,
+          status: type.value,
+        },
        ...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,
-    () => {
-      loadCaseDetail();
+    async () => {
+      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();
--- a/frontend/src/views/test-plan/testPlan/detail/featureCase/detail/index.vue
+++ b/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
-            v-model:model-value="lastExecResult"
+          <MsCheckboxDropdown
+            v-model:selectList="lastExecResult"
            :options="executeResultOptions"
-            class="flex-1"
-            @change="loadCaseList"
+            :title="t('common.executionResult')"
+            @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
-          ? {
-              lastExecResult: [lastExecResult.value],
-            }
-          : undefined,
+        filter: {
+          ...tableFilter.value,
+          lastExecResult: lastExecResult.value,
+        },
        ...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,