From 7afaa4251315ae2f04a6080a6d6d8ab06fa4ccaa Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Thu, 23 May 2024 11:54:16 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20?=
 =?UTF-8?q?=20=20csv/mock=20=E5=8A=9F=E8=83=BD=20bug=20=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/business/ms-tree/index.vue | 10 ++++---
 .../components/pure/ms-detail-card/index.vue  | 14 +++++-----
 .../views/api-test/components/paramTable.vue  | 26 +++++++++----------
 .../management/mock/mockDetailDrawer.vue      |  9 ++++---
 .../management/mock/mockMatchRuleForm.vue     | 12 +++++++++
 .../components/management/mock/mockTable.vue  | 23 +++++++++++++---
 .../components/common/csvParamsTable.vue      |  3 ++-
 .../components/common/quoteCsvDrawer.vue      |  2 +-
 .../api-test/scenario/components/config.ts    |  2 +-
 .../src/views/api-test/scenario/index.vue     |  6 ++---
 10 files changed, 70 insertions(+), 37 deletions(-)

diff --git a/frontend/src/components/business/ms-tree/index.vue b/frontend/src/components/business/ms-tree/index.vue
index 0dc7c8eab1..8461e800fc 100644
--- a/frontend/src/components/business/ms-tree/index.vue
+++ b/frontend/src/components/business/ms-tree/index.vue
@@ -27,7 +27,7 @@
               class="cursor-pointer"
               @click.stop="handleExpand(_props)"
             >
-              <icon-caret-down v-if="_props.expanded" class="text-[var(--color-text-4)]" />
+              <icon-caret-down v-if="_props.expanded || props.expandAll" class="text-[var(--color-text-4)]" />
               <icon-caret-right v-else class="text-[var(--color-text-4)]" />
             </div>
             <div v-else class="h-full w-[16px]"></div>
@@ -98,6 +98,7 @@
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
 
   import useContainerShadow from '@/hooks/useContainerShadow';
+  import { mapTree } from '@/utils';
 
   import type { MsTreeExpandedData, MsTreeFieldNames, MsTreeNodeData, MsTreeSelectedData } from './types';
   import { VirtualListProps } from '@arco-design/web-vue/es/_components/virtual-list-v2/interface';
@@ -190,12 +191,17 @@
     overHeight: 32,
     containerClassName: 'ms-tree-container',
   });
+  const filterTreeData = ref<MsTreeNodeData[]>([]); // 初始化时全量的树数据或在非搜索情况下更新后的全量树数据
 
   function init(isFirstInit = false) {
     nextTick(() => {
       if (isFirstInit) {
         if (props.defaultExpandAll) {
           treeRef.value?.expandAll(true);
+          filterTreeData.value = mapTree(filterTreeData.value, (node) => {
+            node.expanded = true;
+            return node;
+          });
         }
         if (!isInitListener.value && treeRef.value) {
           setContainer(
@@ -240,8 +246,6 @@
     return search(data.value);
   }
 
-  const filterTreeData = ref<MsTreeNodeData[]>([]); // 初始化时全量的树数据或在非搜索情况下更新后的全量树数据
-
   // 防抖搜索
   const updateDebouncedSearch = debounce(() => {
     if (props.keyword) {
diff --git a/frontend/src/components/pure/ms-detail-card/index.vue b/frontend/src/components/pure/ms-detail-card/index.vue
index b8217c8079..bdd12e7389 100644
--- a/frontend/src/components/pure/ms-detail-card/index.vue
+++ b/frontend/src/components/pure/ms-detail-card/index.vue
@@ -1,15 +1,15 @@
 <template>
   <div class="ms-detail-card">
-    <div class="ms-detail-card-title flex items-center justify-between">
-      <div class="flex items-center gap-[8px]">
+    <div class="ms-detail-card-title">
+      <div class="flex flex-1 items-center gap-[8px]">
         <a-tooltip :content="t(props.title)">
-          <div class="one-line-text flex-1 font-medium text-[var(--color-text-1)]">
+          <div class="one-line-text max-w-[300px] flex-1 font-medium text-[var(--color-text-1)]">
             {{ t(props.title) }}
           </div>
         </a-tooltip>
         <slot name="titleAppend"></slot>
       </div>
-      <div v-if="$slots.titleRight" class="flex items-center">
+      <div v-if="$slots.titleRight" class="flex items-center overflow-hidden">
         <slot name="titleRight"></slot>
       </div>
     </div>
@@ -104,8 +104,10 @@
     border-radius: var(--border-radius-small);
     background-color: var(--color-text-n9);
     gap: 8px;
-    .one-line-text {
-      max-width: 300px;
+    .ms-detail-card-title {
+      @apply flex items-center justify-between overflow-hidden;
+
+      gap: 16px;
     }
     .ms-detail-card-desc {
       @apply flex flex-wrap overflow-hidden; // TODO:过渡动画
diff --git a/frontend/src/views/api-test/components/paramTable.vue b/frontend/src/views/api-test/components/paramTable.vue
index ef66d98271..63471ef9bb 100644
--- a/frontend/src/views/api-test/components/paramTable.vue
+++ b/frontend/src/views/api-test/components/paramTable.vue
@@ -25,7 +25,7 @@
     </template>
     <template #typeTitle="{ columnConfig }">
       <div class="flex items-center text-[var(--color-text-3)]">
-        {{ t('apiTestDebug.paramType') }}
+        {{ t((columnConfig.title as string) || 'apiTestDebug.paramType') }}
         <a-tooltip :disabled="!columnConfig.typeTitleTooltip" position="right">
           <template #content>
             <template v-if="Array.isArray(columnConfig.typeTitleTooltip)">
@@ -299,7 +299,6 @@
         input-size="small"
         tag-size="small"
         @change="(files, file) => handleFileChange(files, record, rowIndex, file)"
-        @delete-file="() => handleSingleFileDelete(record)"
       />
     </template>
     <!-- 长度范围 -->
@@ -1028,6 +1027,18 @@
           fileName: files[0].originalName || '',
           fileAlias: files[0].name || '',
         };
+      } else {
+        paramsData.value.forEach((e) => {
+          if (e.id === record.id) {
+            e.file = {
+              fileId: '',
+              fileName: '',
+              fileAlias: '',
+              local: false,
+              delete: false,
+            };
+          }
+        });
       }
       addTableLine(rowIndex);
       emitChange('handleFileChange');
@@ -1039,17 +1050,6 @@
     }
   }
 
-  function handleSingleFileDelete(record: Record<string, any>) {
-    record.file = {
-      fileId: '',
-      fileName: '',
-      fileAlias: '',
-      local: false,
-      delete: false,
-    };
-    emitChange('deleteFile');
-  }
-
   const showQuickInputParam = ref(false);
   const activeQuickInputRecord = ref<any>({});
   const quickInputParamValue = ref('');
diff --git a/frontend/src/views/api-test/management/components/management/mock/mockDetailDrawer.vue b/frontend/src/views/api-test/management/components/management/mock/mockDetailDrawer.vue
index 87d15d1881..7763187bb6 100644
--- a/frontend/src/views/api-test/management/components/management/mock/mockDetailDrawer.vue
+++ b/frontend/src/views/api-test/management/components/management/mock/mockDetailDrawer.vue
@@ -45,15 +45,15 @@
         class="mb-[16px]"
       >
         <template #titleRight>
-          <div class="flex items-center gap-[16px]">
+          <div class="flex items-center gap-[16px] overflow-hidden">
             <div class="flex items-center gap-[8px]">
               <div class="whitespace-nowrap text-[var(--color-text-4)]">{{ t('apiTestManagement.apiType') }}</div>
               <apiMethodName :method="props.definitionDetail.method" tag-size="small" is-tag />
             </div>
-            <div class="flex items-center gap-[8px]">
+            <div class="flex items-center gap-[8px] overflow-hidden">
               <div class="whitespace-nowrap text-[var(--color-text-4)]">{{ t('apiTestManagement.path') }}</div>
-              <a-tooltip :content="props.definitionDetail.url">
-                <div class="one-line-text">{{ props.definitionDetail.url }}</div>
+              <a-tooltip :content="props.definitionDetail.url || props.definitionDetail.path" position="tl">
+                <div class="one-line-text">{{ props.definitionDetail.url || props.definitionDetail.path }}</div>
               </a-tooltip>
             </div>
           </div>
@@ -104,6 +104,7 @@
         v-model:matchRules="currentMatchRules"
         :key-options="currentKeyOptions"
         :disabled="isReadOnly"
+        :form-key="activeTab"
       />
       <template v-else>
         <div class="mb-[8px] flex items-center justify-between">
diff --git a/frontend/src/views/api-test/management/components/management/mock/mockMatchRuleForm.vue b/frontend/src/views/api-test/management/components/management/mock/mockMatchRuleForm.vue
index 48e5a421b7..bee2c5e1b5 100644
--- a/frontend/src/views/api-test/management/components/management/mock/mockMatchRuleForm.vue
+++ b/frontend/src/views/api-test/management/components/management/mock/mockMatchRuleForm.vue
@@ -173,6 +173,7 @@
 
   const props = defineProps<{
     id?: string;
+    formKey?: string;
     keyOptions: SelectOptionData[];
     disabled: boolean;
   }>();
@@ -203,6 +204,17 @@
     matchRules: matchRules.value,
   });
 
+  watch(
+    () => props.formKey,
+    () => {
+      formModel.value = {
+        matchAll: matchAll.value,
+        matchRules: matchRules.value,
+      };
+      formRef.value?.clearValidate();
+    }
+  );
+
   function handleDeleteItem(index: number) {
     matchRules.value.splice(index, 1);
   }
diff --git a/frontend/src/views/api-test/management/components/management/mock/mockTable.vue b/frontend/src/views/api-test/management/components/management/mock/mockTable.vue
index 5720c83080..6008caee93 100644
--- a/frontend/src/views/api-test/management/components/management/mock/mockTable.vue
+++ b/frontend/src/views/api-test/management/components/management/mock/mockTable.vue
@@ -49,6 +49,9 @@
           :disabled="!hasAnyPermission(['PROJECT_API_DEFINITION_MOCK:READ+UPDATE'])"
         ></a-switch>
       </template>
+      <template #apiMethod="{ record }">
+        <apiMethodName :method="record.apiMethod" is-tag />
+      </template>
       <template #action="{ record }">
         <MsButton
           v-permission="['PROJECT_API_DEFINITION_MOCK:READ+UPDATE']"
@@ -205,6 +208,7 @@
   import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
   import MsTagsInput from '@/components/pure/ms-tags-input/index.vue';
   import mockDetailDrawer from './mockDetailDrawer.vue';
+  import apiMethodName from '@/views/api-test/components/apiMethodName.vue';
   import { RequestParam } from '@/views/api-test/components/requestComposition/index.vue';
 
   import {
@@ -274,10 +278,11 @@
       width: 200,
     },
     {
-      title: 'common.tag',
-      dataIndex: 'tags',
-      isTag: true,
-      isStringTag: true,
+      title: 'apiTestManagement.apiType',
+      dataIndex: 'apiMethod',
+      slotName: 'apiMethod',
+      width: 200,
+      showDrag: true,
     },
     {
       title: 'mockManagement.apiPath',
@@ -285,12 +290,21 @@
       slotName: 'apiPath',
       showTooltip: true,
       width: 200,
+      showDrag: true,
+    },
+    {
+      title: 'common.tag',
+      dataIndex: 'tags',
+      isTag: true,
+      isStringTag: true,
+      showDrag: true,
     },
     {
       title: 'common.status',
       dataIndex: 'enable',
       slotName: 'enable',
       width: 100,
+      showDrag: true,
     },
     {
       title: 'mockManagement.operationUser',
@@ -306,6 +320,7 @@
         sortDirections: ['ascend', 'descend'],
         sorter: true,
       },
+      showDrag: true,
       width: 180,
     },
     {
diff --git a/frontend/src/views/api-test/scenario/components/common/csvParamsTable.vue b/frontend/src/views/api-test/scenario/components/common/csvParamsTable.vue
index 58ef03161a..dae7507df0 100644
--- a/frontend/src/views/api-test/scenario/components/common/csvParamsTable.vue
+++ b/frontend/src/views/api-test/scenario/components/common/csvParamsTable.vue
@@ -18,8 +18,9 @@
       <a-trigger
         v-model:popup-visible="record.settingVisible"
         trigger="click"
-        position="br"
+        position="left"
         class="scenario-csv-trigger"
+        :popup-translate="[-2, 244]"
       >
         <MsButton type="text" class="!mr-0" @click="handleRecordConfig(record)">
           {{ t('apiScenario.params.config') }}
diff --git a/frontend/src/views/api-test/scenario/components/common/quoteCsvDrawer.vue b/frontend/src/views/api-test/scenario/components/common/quoteCsvDrawer.vue
index 8205956725..c3a0c51760 100644
--- a/frontend/src/views/api-test/scenario/components/common/quoteCsvDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/quoteCsvDrawer.vue
@@ -10,7 +10,7 @@
   >
     <MsBaseTable v-bind="propsRes" v-model:selected-key="selectedKey" v-on="propsEvent">
       <template #scope="{ record }">
-        {{ record.scope === 'scenario' ? t('apiScenario.scenario') : t('apiScenario.step') }}
+        {{ record.scope === 'SCENARIO' ? t('apiScenario.scenario') : t('apiScenario.step') }}
       </template>
       <template #file="{ record }">
         <a-tooltip :content="record.file?.name">
diff --git a/frontend/src/views/api-test/scenario/components/config.ts b/frontend/src/views/api-test/scenario/components/config.ts
index 00596d5025..6082cb5bbb 100644
--- a/frontend/src/views/api-test/scenario/components/config.ts
+++ b/frontend/src/views/api-test/scenario/components/config.ts
@@ -204,7 +204,7 @@ export const defaultCsvParamItem: CsvVariable = {
   ignoreFirstLine: false,
   delimiter: ',',
   allowQuotedData: false,
-  recycleOnEof: false,
+  recycleOnEof: true,
   stopThreadOnEof: false,
   settingVisible: false,
   file: {
diff --git a/frontend/src/views/api-test/scenario/index.vue b/frontend/src/views/api-test/scenario/index.vue
index 04e3b39092..eae194bf76 100644
--- a/frontend/src/views/api-test/scenario/index.vue
+++ b/frontend/src/views/api-test/scenario/index.vue
@@ -546,8 +546,7 @@
               ).validParams,
               csvVariables: filterKeyValParams(
                 activeScenarioTab.value.scenarioConfig.variable.csvVariables,
-                defaultCsvParamItem,
-                true
+                defaultCsvParamItem
               ).validParams,
             },
           },
@@ -610,8 +609,7 @@
               ).validParams,
               csvVariables: filterKeyValParams(
                 activeScenarioTab.value.scenarioConfig.variable.csvVariables,
-                defaultCsvParamItem,
-                true
+                defaultCsvParamItem
               ).validParams,
             },
           },