fix(测试计划): 关联用例抽屉表格排序&修改高级搜索组件

--bug=1040867 --user=吕梦园 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001040867
2024-05-27 16:49:18 +08:00 · 2024-05-27 16:49:18 +08:00 · 386e1d91c6
parent 8d6ba0bfce
commit 386e1d91c6
7 changed files with 61 additions and 69 deletions
--- a/frontend/src/components/business/ms-case-associate/index.vue
+++ b/frontend/src/components/business/ms-case-associate/index.vue
@ -458,22 +458,20 @@
      slotName: 'num',
      sortIndex: 1,
      showTooltip: true,
-      // TODO 后台没有加
-      // sortable: {
-      //   sortDirections: ['ascend', 'descend'],
-      //   sorter: true,
-      // },
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+        sorter: true,
+      },
      width: 120,
      fixed: 'left',
    },
    {
      title: 'ms.case.associate.caseName',
      dataIndex: 'name',
-      // TODO 后台没有加
-      // sortable: {
-      //   sortDirections: ['ascend', 'descend'],
-      //   sorter: true,
-      // },
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+        sorter: true,
+      },
      showTooltip: true,
      width: 250,
    },
@ -496,10 +494,10 @@
      title: 'caseManagement.featureCase.tableColumnCreateTime',
      slotName: 'createTime',
      dataIndex: 'createTime',
-      // sortable: {
-      //   sortDirections: ['ascend', 'descend'],
-      //   sorter: true,
-      // },
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+        sorter: true,
+      },
      width: 200,
      showDrag: true,
    },
--- a/frontend/src/components/pure/ms-advance-filter/index.vue
+++ b/frontend/src/components/pure/ms-advance-filter/index.vue
@ -1,6 +1,21 @@
 <template>
  <div class="flex flex-row items-center justify-between">
-    <slot name="left"></slot>
+    <slot name="left">
+      <a-popover v-if="props.name" title="" position="bottom">
+        <div class="flex">
+          <div class="one-line-text mr-1 max-h-[32px] max-w-[300px] text-[var(--color-text-1)]">
+            {{ props.name }}
+          </div>
+          <span class="text-[var(--color-text-4)]"> ({{ props.count }})</span>
+        </div>
+        <template #content>
+          <div class="max-w-[400px] text-[14px] font-medium text-[var(--color-text-1)]">
+            {{ props.name }}
+            <span class="text-[var(--color-text-4)]">({{ props.count }})</span>
+          </div>
+        </template>
+      </a-popover>
+    </slot>
    <div class="flex flex-row gap-[12px]">
      <a-input-search
        v-model:modelValue="innerKeyword"
@ -65,6 +80,8 @@
    filterConfigList: FilterFormItem[]; // 系统字段
    customFieldsConfigList?: FilterFormItem[]; // 自定义字段
    searchPlaceholder?: string;
+    name?: string;
+    count?: number;
  }>();

  const emit = defineEmits<{
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
@ -9,26 +9,12 @@
        :custom-fields-config-list="searchCustomFields"
        :search-placeholder="t('caseManagement.featureCase.searchPlaceholder')"
        :row-count="filterRowCount"
+        :count="props.modulesCount[props.activeFolder] || 0"
+        :name="moduleNamePath"
        @keyword-search="fetchData"
        @adv-search="handleAdvSearch"
        @refresh="fetchData()"
      >
-        <template #left>
-          <a-popover title="" position="bottom">
-            <div class="show-table-top-title">
-              <div class="one-line-text max-h-[32px] max-w-[300px] text-[var(--color-text-1)]">
-                {{ moduleNamePath }}
-              </div>
-              <span class="text-[var(--color-text-4)]"> ({{ props.modulesCount[props.activeFolder] || 0 }})</span>
-            </div>
-            <template #content>
-              <div class="max-w-[400px] text-[14px] font-medium text-[var(--color-text-1)]">
-                {{ moduleNamePath }}
-                <span class="text-[var(--color-text-4)]">({{ props.modulesCount[props.activeFolder] || 0 }})</span>
-              </div>
-            </template>
-          </a-popover>
-        </template>
        <template #right>
          <!-- <a-radio-group v-model:model-value="showType" type="button" size="small" class="list-show-type">
            <a-radio value="list" class="show-type-icon !m-[2px]">
--- a/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
@ -69,28 +69,13 @@
            :filter-config-list="filterConfigList"
            :custom-fields-config-list="searchCustomFields"
            :row-count="filterRowCount"
+            :count="recycleModulesCount[activeFolder] || 0"
+            :name="moduleNamePath"
            :search-placeholder="t('caseManagement.featureCase.searchPlaceholder')"
            @keyword-search="fetchData"
            @adv-search="handleAdvSearch"
            @refresh="fetchData()"
-          >
-            <template #left>
-              <a-popover title="" position="bottom">
-                <div class="show-table-top-title">
-                  <div class="one-line-text max-h-[32px] max-w-[116px] text-[var(--color-text-1)]">
-                    {{ moduleNamePath }}
-                  </div>
-                  <span class="text-[var(--color-text-4)]"> ({{ recycleModulesCount[activeFolder] || 0 }})</span>
-                </div>
-                <template #content>
-                  <div class="max-w-[400px] text-[14px] font-medium text-[var(--color-text-1)]">
-                    {{ moduleNamePath }}
-                    <span class="text-[var(--color-text-4)]">({{ recycleModulesCount[activeFolder] || 0 }})</span>
-                  </div>
-                </template>
-              </a-popover>
-            </template>
-          </MsAdvanceFilter>
+          />
          <ms-base-table
            class="my-4"
            v-bind="propsRes"
--- a/frontend/src/views/test-plan/testPlan/detail/featureCase/components/caseTable.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/featureCase/components/caseTable.vue
@ -1,23 +1,20 @@
 <template>
  <div class="p-[16px]">
-    <div class="mb-[16px] flex justify-end">
-      <a-input-search
-        v-model:model-value="keyword"
-        :placeholder="t('ms.case.associate.searchPlaceholder')"
-        allow-clear
-        class="mr-[8px] w-[240px]"
-        @search="loadCaseList"
-        @press-enter="loadCaseList"
-        @clear="loadCaseList"
-      />
-      <a-button type="outline" class="arco-btn-outline--secondary !p-[8px]" @click="loadCaseList">
-        <template #icon>
-          <icon-refresh class="text-[var(--color-text-4)]" />
-        </template>
-      </a-button>
-    </div>
+    <MsAdvanceFilter
+      v-model:keyword="keyword"
+      :filter-config-list="[]"
+      :custom-fields-config-list="[]"
+      :row-count="0"
+      :count="props.modulesCount[props.activeModule] || 0"
+      :name="moduleNamePath"
+      :search-placeholder="t('ms.case.associate.searchPlaceholder')"
+      @keyword-search="loadCaseList"
+      @adv-search="loadCaseList"
+      @refresh="loadCaseList"
+    />
    <MsBaseTable
      ref="tableRef"
+      class="mt-[16px]"
      v-bind="propsRes"
      :action-config="batchActions"
      :selectable="hasOperationPermission"
@ -172,6 +169,7 @@
  import { useRoute, useRouter } from 'vue-router';
  import { FormInstance, Message, SelectOptionData } from '@arco-design/web-vue';

+  import { MsAdvanceFilter } from '@/components/pure/ms-advance-filter';
  import MsButton from '@/components/pure/ms-button/index.vue';
  import MsPopconfirm from '@/components/pure/ms-popconfirm/index.vue';
  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
@ -221,6 +219,8 @@
  } from '@/views/case-management/caseManagementFeature/components/utils';

  const props = defineProps<{
+    modulesCount: Record<string, number>; // 模块数量统计对象
+    moduleName: string;
    activeModule: string;
    offspringIds: string[];
    planId: string;
@ -243,6 +243,9 @@
  const { openModal } = useModal();

  const keyword = ref('');
+  const moduleNamePath = computed(() => {
+    return props.activeModule === 'all' ? t('caseManagement.featureCase.allCase') : props.moduleName;
+  });

  const hasOperationPermission = computed(
    () => hasAnyPermission(['PROJECT_TEST_PLAN:READ+EXECUTE', 'PROJECT_TEST_PLAN:READ+ASSOCIATION']) && props.canEdit
--- a/frontend/src/views/test-plan/testPlan/detail/featureCase/components/caseTree.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/featureCase/components/caseTree.vue
@ -39,7 +39,6 @@
          count: 'count',
        }"
        block-node
-        title-tooltip-position="left"
        @select="folderNodeSelect"
      >
        <template #title="nodeData">
@ -74,7 +73,7 @@
    selectedKeys: string[]; // 选中的节点 key
  }>();
  const emit = defineEmits<{
-    (e: 'folderNodeSelect', ids: string[], _offspringIds: string[]): void;
+    (e: 'folderNodeSelect', ids: string[], _offspringIds: string[], nodeName?: string): void;
    (e: 'init', params: ModuleTreeNode[]): void;
  }>();

@ -144,7 +143,7 @@
      return e;
    });
    activeFolder.value = node.id;
-    emit('folderNodeSelect', _selectedKeys as string[], offspringIds);
+    emit('folderNodeSelect', _selectedKeys as string[], offspringIds, node.name);
  }

  onBeforeMount(() => {
--- a/frontend/src/views/test-plan/testPlan/detail/featureCase/index.vue
+++ b/frontend/src/views/test-plan/testPlan/detail/featureCase/index.vue
@ -15,6 +15,8 @@
      <CaseTable
        ref="caseTableRef"
        :plan-id="planId"
+        :modules-count="modulesCount"
+        :module-name="moduleName"
        :repeat-case="props.repeatCase"
        :active-module="activeFolderId"
        :offspring-ids="offspringIds"
@ -65,14 +67,16 @@

  const caseTableRef = ref<InstanceType<typeof CaseTable>>();
  const activeFolderId = ref<string>('all');
+  const moduleName = ref<string>('');
  const offspringIds = ref<string[]>([]);
  const selectedKeys = computed({
    get: () => [activeFolderId.value],
    set: (val) => val,
  });
-  function handleFolderNodeSelect(ids: string[], _offspringIds: string[]) {
+  function handleFolderNodeSelect(ids: string[], _offspringIds: string[], name?: string) {
    [activeFolderId.value] = ids;
    offspringIds.value = [..._offspringIds];
+    moduleName.value = name ?? '';
    caseTableRef.value?.resetSelector();
  }