From 09f7bea6cf7b1ef8b961224b1eb67f6cfb99aaa3 Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Tue, 9 Apr 2024 20:02:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E9=9A=94=E7=A6=BB=E7=AD=9B=E9=80=89=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6&=E6=8A=A5=E5=91=8A=E7=AD=9B=E9=80=89=E9=94=99?=
 =?UTF-8?q?=E8=AF=AF&=E8=84=9A=E6=9C=AC=E6=A0=B7=E5=BC=8F=E5=BE=AE?=
 =?UTF-8?q?=E8=B0=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pure/ms-advance-filter/index.vue          |   2 +-
 .../api-test/report/component/tiledList.vue   |   5 +-
 .../components/caseTable.vue                  |   2 +-
 .../components/scriptDetailDrawer.vue         |   6 +-
 .../taskCenter/component/apiCase.vue          | 110 +++++++++++++++++-
 5 files changed, 113 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/pure/ms-advance-filter/index.vue b/frontend/src/components/pure/ms-advance-filter/index.vue
index a66ad2debf..994455ccbe 100644
--- a/frontend/src/components/pure/ms-advance-filter/index.vue
+++ b/frontend/src/components/pure/ms-advance-filter/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="flex flex-row justify-between">
+  <div class="flex flex-row items-center justify-between">
     <slot name="left"></slot>
     <div class="flex flex-row gap-[8px]">
       <a-input-search
diff --git a/frontend/src/views/api-test/report/component/tiledList.vue b/frontend/src/views/api-test/report/component/tiledList.vue
index 5bdd3d669e..139b082579 100644
--- a/frontend/src/views/api-test/report/component/tiledList.vue
+++ b/frontend/src/views/api-test/report/component/tiledList.vue
@@ -98,8 +98,9 @@
       const result: ScenarioItemType[] = [];
       _data.forEach((item) => {
         if (
-          (stepType.includes(item.stepType) && item.status && item.status.includes(stepTypeStatus)) ||
-          (stepTypeStatus && stepTypeStatus.includes('scriptIdentifier') && item.scriptIdentifier)
+          stepType.includes(item.stepType) &&
+          ((item.status && item.status === stepTypeStatus && stepTypeStatus !== 'scriptIdentifier') ||
+            (stepTypeStatus.includes('scriptIdentifier') && item.scriptIdentifier))
         ) {
           result.push({ ...item, expanded: true });
         } else if (item.children) {
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
index 7de4b6bdb5..68565d6aa4 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
@@ -20,7 +20,7 @@
           <span class="text-[var(--color-text-4)]"> ({{ props.modulesCount[props.activeFolder] || 0 }})</span>
         </div>
         <template #content>
-          <div class="text-[14px] font-medium text-[var(--color-text-1)]">
+          <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>
diff --git a/frontend/src/views/project-management/commonScript/components/scriptDetailDrawer.vue b/frontend/src/views/project-management/commonScript/components/scriptDetailDrawer.vue
index 6c9746ba2a..b9cfdb7cc4 100644
--- a/frontend/src/views/project-management/commonScript/components/scriptDetailDrawer.vue
+++ b/frontend/src/views/project-management/commonScript/components/scriptDetailDrawer.vue
@@ -27,7 +27,7 @@
         </MsButton>
       </div>
     </template>
-    <a-radio-group v-model="showType" type="button" size="small">
+    <a-radio-group v-model="showType" type="button">
       <a-radio value="detail">{{ t('project.commonScript.detail') }}</a-radio>
       <a-radio value="changeHistory">{{ t('project.commonScript.changeHistory') }}</a-radio>
     </a-radio-group>
@@ -41,7 +41,7 @@
         <div class="item">
           <span class="label">{{ t('project.commonScript.tags') }}</span>
           <span class="content">
-            <MsTag v-for="tag of form.tags" :key="tag" theme="outline">{{ tag }}</MsTag>
+            <MsTag v-for="tag of form.tags" :key="tag" class="mb-2" theme="outline">{{ tag }}</MsTag>
           </span>
         </div>
       </div>
@@ -381,7 +381,7 @@
       .label {
         width: 56px;
         color: var(--color-text-3);
-        @apply mr-2;
+        @apply mr-2 flex-shrink-0;
       }
     }
   }
diff --git a/frontend/src/views/project-management/taskCenter/component/apiCase.vue b/frontend/src/views/project-management/taskCenter/component/apiCase.vue
index 810b64bef7..cfd7639879 100644
--- a/frontend/src/views/project-management/taskCenter/component/apiCase.vue
+++ b/frontend/src/views/project-management/taskCenter/component/apiCase.vue
@@ -19,6 +19,9 @@
       v-on="propsEvent"
       @batch-action="handleTableBatch"
     >
+      <template #resourceId="{ record }">
+        <div type="text" class="one-line-text flex w-full">{{ record.resourceId }}</div>
+      </template>
       <template #statusFilter="{ columnConfig }">
         <a-trigger
           v-model:popup-visible="statusFilterVisible"
@@ -34,12 +37,24 @@
           <template #content>
             <div class="arco-table-filters-content">
               <div class="flex items-center justify-center px-[6px] py-[2px]">
-                <a-checkbox-group v-model:model-value="statusListFilters" direction="vertical" size="small">
+                <a-checkbox-group
+                  v-model:model-value="statusFiltersMap[props.moduleType]"
+                  direction="vertical"
+                  size="small"
+                >
                   <a-checkbox v-for="key of statusFilters" :key="key" :value="key">
                     <ExecutionStatus :module-type="props.moduleType" :status="key" />
                   </a-checkbox>
                 </a-checkbox-group>
               </div>
+              <div class="arco-table-filters-bottom">
+                <a-button size="mini" type="secondary" @click="handleFilterReset">
+                  {{ t('common.reset') }}
+                </a-button>
+                <a-button size="mini" type="primary" @click="handleFilterSubmit()">
+                  {{ t('common.confirm') }}
+                </a-button>
+              </div>
             </div>
           </template>
         </a-trigger>
@@ -50,6 +65,19 @@
       <template #triggerMode="{ record }">
         <span>{{ t(ExecutionMethodsLabel[record.triggerMode]) }}</span>
       </template>
+      <template #triggerModeFilter="{ columnConfig }">
+        <TableFilter
+          v-model:visible="triggerModeVisible"
+          v-model:status-filters="triggerModeFiltersMap[props.moduleType]"
+          :title="(columnConfig.title as string)"
+          :list="triggerModeList"
+          @search="initData()"
+        >
+          <template #item="{ item }">
+            {{ item.label }}
+          </template>
+        </TableFilter>
+      </template>
       <template #operationTime="{ record }">
         <span>{{ dayjs(record.operationTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
       </template>
@@ -91,6 +119,7 @@
   import ExecutionStatus from './executionStatus.vue';
   import caseAndScenarioReportDrawer from '@/views/api-test/components/caseAndScenarioReportDrawer.vue';
   import ReportDetailDrawer from '@/views/api-test/report/component/reportDetailDrawer.vue';
+  import TableFilter from '@/views/case-management/caseManagementFeature/components/tableFilter.vue';
 
   import {
     batchStopRealOrdApi,
@@ -105,16 +134,19 @@
   } from '@/api/modules/project-management/taskCenter';
   import { useI18n } from '@/hooks/useI18n';
   import useModal from '@/hooks/useModal';
+  import useOpenNewPage from '@/hooks/useOpenNewPage';
   import { useTableStore } from '@/store';
   import { characterLimit } from '@/utils';
   import { hasAnyPermission } from '@/utils/permission';
 
   import { BatchApiParams } from '@/models/common';
+  import { RouteEnum } from '@/enums/routeEnum';
   import { TableKeyEnum } from '@/enums/tableEnum';
   import { ExecutionMethodsLabel, TaskCenterEnum } from '@/enums/taskCenter';
 
   import { TaskStatus } from './utils';
 
+  const { openNewPage } = useOpenNewPage();
   const tableStore = useTableStore();
 
   const { openModal } = useModal();
@@ -127,7 +159,6 @@
   }>();
   const keyword = ref<string>('');
   const statusFilterVisible = ref(false);
-  const statusListFilters = ref<string[]>([]);
 
   const permissionsMap = {
     organization: {
@@ -165,15 +196,15 @@
       dataIndex: 'resourceId',
       slotName: 'resourceId',
       width: 200,
-      showInTable: true,
       showTooltip: true,
+      showDrag: false,
     },
     {
       title: 'project.taskCenter.resourceName',
       slotName: 'resourceName',
       dataIndex: 'resourceName',
       width: 300,
-      showDrag: true,
+      showDrag: false,
       showTooltip: true,
     },
     {
@@ -181,6 +212,10 @@
       dataIndex: 'status',
       slotName: 'status',
       titleSlotName: 'statusFilter',
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+        sorter: true,
+      },
       showInTable: true,
       width: 150,
       showDrag: true,
@@ -189,6 +224,7 @@
       title: 'project.taskCenter.executionMode',
       dataIndex: 'triggerMode',
       slotName: 'triggerMode',
+      titleSlotName: 'triggerModeFilter',
       showInTable: true,
       width: 150,
       showDrag: true,
@@ -238,16 +274,64 @@
       showSelectAll: true,
     }
   );
+  const triggerModeList = ref([
+    {
+      value: 'SCHEDULE',
+      label: t('project.taskCenter.scheduledTask'),
+    },
+    {
+      value: 'MANUAL',
+      label: t('project.taskCenter.manualExecution'),
+    },
+    {
+      value: 'API',
+      label: t('project.taskCenter.interfaceCall'),
+    },
+    {
+      value: 'BATCH',
+      label: t('project.taskCenter.batchExecution'),
+    },
+  ]);
+  const triggerModeVisible = ref<boolean>(false);
+  const triggerModeApiCase = ref([]);
+  const triggerModeApiScenario = ref([]);
+
+  const triggerModeFiltersMap = ref<Record<string, string[]>>({
+    API_CASE: triggerModeApiCase.value,
+    API_SCENARIO: triggerModeApiScenario.value,
+  });
+
+  const statusFilterApiCase = ref([]);
+  const statusFilterApiScenario = ref([]);
+
+  const statusFiltersMap = ref<Record<string, string[]>>({
+    API_CASE: statusFilterApiCase.value,
+    API_SCENARIO: statusFilterApiScenario.value,
+  });
 
   function initData() {
     setLoadListParams({
       keyword: keyword.value,
       moduleType: props.moduleType,
-      filter: { status: statusListFilters.value },
+      filter: {
+        status: statusFiltersMap.value[props.moduleType],
+        triggerMode: triggerModeFiltersMap.value[props.moduleType],
+      },
     });
     loadList();
   }
 
+  function handleFilterReset() {
+    statusFiltersMap.value[props.moduleType] = [];
+    statusFilterVisible.value = false;
+    initData();
+  }
+
+  function handleFilterSubmit() {
+    statusFilterVisible.value = false;
+    initData();
+  }
+
   const tableBatchActions = {
     baseAction: [
       {
@@ -374,6 +458,22 @@
       }
     }
   );
+  /**
+   * 跳转接口用例详情 TODO 后台要加字段 加了字段再处理
+   */
+
+  function showDetail(id: string) {
+    if (props.moduleType === 'API_CASE') {
+      openNewPage(RouteEnum.API_TEST_MANAGEMENT, {
+        cId: id,
+      });
+    } else {
+      openNewPage(RouteEnum.API_TEST_MANAGEMENT, {
+        dId: id,
+      });
+    }
+  }
+
   onMounted(async () => {
     await tableStore.initColumn(TableKeyEnum.TASK_API_CASE, columns, 'drawer', true);
   });