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

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

frontend/src/components/business/ms-case-associate/index.vue

@@ -458,22 +458,20 @@
       slotName: 'num',
       sortIndex: 1,
       showTooltip: true,
-      // TODO 后台没有加
+      sortable: {
-      // sortable: {
+        sortDirections: ['ascend', 'descend'],
-      //   sortDirections: ['ascend', 'descend'],
+        sorter: true,
-      //   sorter: true,
+      },
-      // },
       width: 120,
       fixed: 'left',
     },
     {
       title: 'ms.case.associate.caseName',
       dataIndex: 'name',
-      // TODO 后台没有加
+      sortable: {
-      // sortable: {
+        sortDirections: ['ascend', 'descend'],
-      //   sortDirections: ['ascend', 'descend'],
+        sorter: true,
-      //   sorter: true,
+      },
-      // },
       showTooltip: true,
       width: 250,
     },
@@ -496,10 +494,10 @@
       title: 'caseManagement.featureCase.tableColumnCreateTime',
       slotName: 'createTime',
       dataIndex: 'createTime',
-      // sortable: {
+      sortable: {
-      //   sortDirections: ['ascend', 'descend'],
+        sortDirections: ['ascend', 'descend'],
-      //   sorter: true,
+        sorter: true,
-      // },
+      },
       width: 200,
       showDrag: true,
     },

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<{

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]">

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"

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">
+    <MsAdvanceFilter
-      <a-input-search
+      v-model:keyword="keyword"
-        v-model:model-value="keyword"
+      :filter-config-list="[]"
-        :placeholder="t('ms.case.associate.searchPlaceholder')"
+      :custom-fields-config-list="[]"
-        allow-clear
+      :row-count="0"
-        class="mr-[8px] w-[240px]"
+      :count="props.modulesCount[props.activeModule] || 0"
-        @search="loadCaseList"
+      :name="moduleNamePath"
-        @press-enter="loadCaseList"
+      :search-placeholder="t('ms.case.associate.searchPlaceholder')"
-        @clear="loadCaseList"
+      @keyword-search="loadCaseList"
+      @adv-search="loadCaseList"
+      @refresh="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>
     <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

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(() => {

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();
   }