From 8af35fe57ce78f469108d09c66013b10baed0a29 Mon Sep 17 00:00:00 2001
From: baiqi <qi.bai@fit2cloud.com>
Date: Wed, 10 Apr 2024 11:55:50 +0800
Subject: [PATCH] =?UTF-8?q?fix(all):=20=E4=BF=AE=E5=A4=8D=E4=B8=A5?=
 =?UTF-8?q?=E9=87=8D=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/modules/api-test/scenario.ts |  2 +-
 .../src/components/business/ms-tree/index.vue | 34 ++++++++--------
 frontend/src/store/modules/user/index.ts      |  1 +
 .../components/common/customApiDrawer.vue     | 19 +++++----
 .../components/common/customCaseDrawer.vue    |  7 ++--
 .../step/stepNodeComposition/quoteContent.vue | 40 ++++++++++++-------
 .../scenario/components/step/stepTree.vue     |  7 +++-
 7 files changed, 64 insertions(+), 46 deletions(-)

diff --git a/frontend/src/api/modules/api-test/scenario.ts b/frontend/src/api/modules/api-test/scenario.ts
index ad6414228f..ced0cc0e66 100644
--- a/frontend/src/api/modules/api-test/scenario.ts
+++ b/frontend/src/api/modules/api-test/scenario.ts
@@ -284,5 +284,5 @@ export function updateScenarioPro(id: string | number, priority: CaseLevel | und
 
 // 获取跨项目信息
 export function getStepProjectInfo(id: string, type: ScenarioStepType) {
-  return MSR.get<ScenarioStepResourceInfo>({ url: GetStepProjectInfoUrl, params: id, data: { resourceType: type } });
+  return MSR.get<ScenarioStepResourceInfo>({ url: `${GetStepProjectInfoUrl}/${id}`, params: { resourceType: type } });
 }
diff --git a/frontend/src/components/business/ms-tree/index.vue b/frontend/src/components/business/ms-tree/index.vue
index dc71ef624a..5c1881ccb7 100644
--- a/frontend/src/components/business/ms-tree/index.vue
+++ b/frontend/src/components/business/ms-tree/index.vue
@@ -197,21 +197,6 @@
     init(true);
   });
 
-  const filterTreeData = ref<MsTreeNodeData[]>([]); // 初始化时全量的树数据或在非搜索情况下更新后的全量树数据
-
-  watch(
-    () => data.value,
-    (val) => {
-      if (!props.keyword) {
-        filterTreeData.value = cloneDeep(val);
-      }
-    },
-    {
-      deep: true,
-      immediate: true,
-    }
-  );
-
   /**
    * 根据关键字过滤树节点
    * @param keyword 搜索关键字
@@ -240,6 +225,8 @@
     return search(data.value);
   }
 
+  const filterTreeData = ref<MsTreeNodeData[]>([]); // 初始化时全量的树数据或在非搜索情况下更新后的全量树数据
+
   // 防抖搜索
   const updateDebouncedSearch = debounce(() => {
     if (props.keyword) {
@@ -251,11 +238,26 @@
     }
   }, props.searchDebounce);
 
+  watch(
+    () => data.value,
+    (val) => {
+      if (!props.keyword) {
+        filterTreeData.value = val;
+      } else {
+        updateDebouncedSearch();
+      }
+    },
+    {
+      deep: true,
+      immediate: true,
+    }
+  );
+
   watch(
     () => props.keyword,
     (val) => {
       if (!val) {
-        filterTreeData.value = cloneDeep(data.value);
+        filterTreeData.value = data.value;
       } else {
         updateDebouncedSearch();
       }
diff --git a/frontend/src/store/modules/user/index.ts b/frontend/src/store/modules/user/index.ts
index 05c60030e7..f99e95ea5f 100644
--- a/frontend/src/store/modules/user/index.ts
+++ b/frontend/src/store/modules/user/index.ts
@@ -107,6 +107,7 @@ const useUserStore = defineStore('user', {
         appStore.setCurrentOrgId(res.lastOrganizationId || '');
         appStore.setCurrentProjectId(res.lastProjectId || '');
         this.setInfo(res);
+        this.initLocalConfig(); // 获取本地执行配置
       } catch (err) {
         clearToken();
         throw err;
diff --git a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
index 1084d54d3d..f8376b57f5 100644
--- a/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customApiDrawer.vue
@@ -6,6 +6,7 @@
     :show-continue="true"
     :footer="requestVModel.isNew === true"
     :ok-disabled="requestVModel.executeLoading || (isHttpProtocol && !requestVModel.url)"
+    show-full-screen
     @confirm="handleSave"
     @continue="handleContinue"
     @close="handleClose"
@@ -23,21 +24,21 @@
         </a-tooltip>
       </div>
       <div
-        v-if="
-          props.step &&
-          !props.step.isQuoteScenarioStep &&
-          props.step.resourceId &&
-          props.step?.stepType !== ScenarioStepType.CUSTOM_REQUEST
-        "
-        class="ml-auto"
+        v-if="props.step && !props.step.isQuoteScenarioStep"
+        class="right-operation-button-icon ml-auto flex items-center"
       >
         <replaceButton
+          v-if="props.step.resourceId && props.step?.stepType !== ScenarioStepType.CUSTOM_REQUEST"
           :steps="props.steps"
           :step="props.step"
           :resource-id="props.step.resourceId"
           :scenario-id="scenarioId"
           @replace="handleReplace"
         />
+        <MsButton class="mr-4" type="icon" status="secondary" @click="emit('deleteStep')">
+          <MsIcon type="icon-icon_delete-trash_outlined" />
+          {{ t('common.delete') }}
+        </MsButton>
       </div>
       <div
         v-if="!props.step || props.step?.stepType === ScenarioStepType.CUSTOM_REQUEST"
@@ -330,6 +331,7 @@
   import { Message, SelectOptionData } from '@arco-design/web-vue';
   import { cloneDeep, debounce } from 'lodash-es';
 
+  import MsButton from '@/components/pure/ms-button/index.vue';
   import MsDrawer from '@/components/pure/ms-drawer/index.vue';
   import MsFormCreate from '@/components/pure/ms-form-create/formCreate.vue';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
@@ -437,6 +439,7 @@
     (e: 'applyStep', request: RequestParam): void;
     (e: 'execute', request: RequestParam, executeType?: 'localExec' | 'serverExec'): void;
     (e: 'stopDebug'): void;
+    (e: 'deleteStep'): void;
     (e: 'replace', newStep: ScenarioStepItem): void;
   }>();
 
@@ -446,7 +449,7 @@
   // 注入祖先组件提供的属性
   const scenarioId = inject<string | number>('scenarioId');
   const currentEnvConfig = inject<Ref<EnvConfig>>('currentEnvConfig');
-  const hasLocalExec = inject<Ref<boolean>>('isPriorityLocalExec');
+  const hasLocalExec = inject<Ref<boolean>>('hasLocalExec');
   const isPriorityLocalExec = inject<Ref<boolean>>('isPriorityLocalExec');
 
   const visible = defineModel<boolean>('visible', { required: true });
diff --git a/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue b/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
index fde28cf41f..c5cd2948f2 100644
--- a/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
+++ b/frontend/src/views/api-test/scenario/components/common/customCaseDrawer.vue
@@ -29,13 +29,13 @@
           <MsIcon type="icon-icon_edit_outlined" class="edit-script-name-icon" @click="showEditScriptNameInput" />
         </div>
         <div
-          v-if="activeStep && !activeStep.isQuoteScenarioStep && requestVModel.resourceId"
+          v-if="activeStep && !activeStep.isQuoteScenarioStep && activeStep.resourceId"
           class="right-operation-button-icon flex items-center"
         >
           <replaceButton
             :steps="props.steps"
             :step="activeStep"
-            :resource-id="requestVModel.resourceId"
+            :resource-id="activeStep.resourceId"
             :scenario-id="scenarioId"
             @replace="handleReplace"
           />
@@ -350,6 +350,7 @@
   // 注入祖先组件提供的属性
   const scenarioId = inject<string | number>('scenarioId');
   const isPriorityLocalExec = inject<Ref<boolean>>('isPriorityLocalExec');
+  const hasLocalExec = inject<Ref<boolean>>('hasLocalExec');
 
   const defaultApiParams: RequestParam = {
     name: '',
@@ -620,8 +621,6 @@
     }
   }
 
-  const hasLocalExec = ref(false); // 是否配置了api本地执行
-
   const pluginScriptMap = ref<Record<string, PluginConfig>>({}); // 存储初始化过后的插件配置
   const temporaryPluginFormMap: Record<string, any> = {}; // 缓存插件表单，避免切换传入的 API 数据导致动态表单数据丢失
   const pluginLoading = ref(false);
diff --git a/frontend/src/views/api-test/scenario/components/step/stepNodeComposition/quoteContent.vue b/frontend/src/views/api-test/scenario/components/step/stepNodeComposition/quoteContent.vue
index 6d7de16160..780c7119e1 100644
--- a/frontend/src/views/api-test/scenario/components/step/stepNodeComposition/quoteContent.vue
+++ b/frontend/src/views/api-test/scenario/components/step/stepNodeComposition/quoteContent.vue
@@ -13,20 +13,22 @@
     >
       <MsIcon type="icon-icon-draft" class="text-[var(--color-text-4)] hover:text-[rgb(var(--primary-5))]" />
       <template #content>
-        <div class="flex flex-col gap-[16px]">
-          <div>
-            <div class="mb-[2px] text-[var(--color-text-4)]">{{ t('apiScenario.belongProject') }}</div>
-            <div class="text-[14px] text-[var(--color-text-1)]">
-              {{ originProjectInfo?.projectName }}
+        <a-spin class="h-full w-full" :loading="loading">
+          <div class="flex flex-col gap-[16px]">
+            <div>
+              <div class="mb-[2px] text-[var(--color-text-4)]">{{ t('apiScenario.belongProject') }}</div>
+              <div class="text-[14px] text-[var(--color-text-1)]">
+                {{ originProjectInfo?.projectName }}
+              </div>
+            </div>
+            <div>
+              <div class="mb-[2px] text-[var(--color-text-4)]">{{ t('apiScenario.detailName') }}</div>
+              <div class="cursor-pointer text-[14px] text-[rgb(var(--primary-5))]" @click="goDetail">
+                {{ `【${originProjectInfo?.num}】${originProjectInfo?.name}` }}
+              </div>
             </div>
           </div>
-          <div>
-            <div class="mb-[2px] text-[var(--color-text-4)]">{{ t('apiScenario.detailName') }}</div>
-            <div class="cursor-pointer text-[14px] text-[rgb(var(--primary-5))]" @click="goDetail">
-              {{ `【${originProjectInfo?.num}】${originProjectInfo?.name}` }}
-            </div>
-          </div>
-        </div>
+        </a-spin>
       </template>
     </a-popover>
     <MsTag
@@ -68,10 +70,18 @@
   const { openNewPage } = useOpenNewPage();
 
   const originProjectInfo = ref<ScenarioStepResourceInfo>();
-
+  const loading = ref(false);
   async function handleVisibleChange(val: boolean) {
-    if (val && props.data.originProjectId) {
-      originProjectInfo.value = await getStepProjectInfo(props.data.resourceId || '', props.data.stepType);
+    try {
+      loading.value = true;
+      if (val && props.data.originProjectId) {
+        originProjectInfo.value = await getStepProjectInfo(props.data.resourceId || '', props.data.stepType);
+      }
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    } finally {
+      loading.value = false;
     }
   }
 
diff --git a/frontend/src/views/api-test/scenario/components/step/stepTree.vue b/frontend/src/views/api-test/scenario/components/step/stepTree.vue
index 53a751b93c..51fda01fa6 100644
--- a/frontend/src/views/api-test/scenario/components/step/stepTree.vue
+++ b/frontend/src/views/api-test/scenario/components/step/stepTree.vue
@@ -220,6 +220,7 @@
       :permission-map="permissionMap"
       :steps="steps"
       @add-step="addCustomApiStep"
+      @delete-step="deleteStep(activeStep)"
       @apply-step="applyApiStep"
       @stop-debug="handleStopExecute(activeStep)"
       @execute="handleApiExecute"
@@ -235,7 +236,7 @@
       :step-responses="scenario.stepResponses"
       :permission-map="permissionMap"
       @apply-step="applyApiStep"
-      @delete-step="deleteCaseStep(activeStep)"
+      @delete-step="deleteStep(activeStep)"
       @stop-debug="handleStopExecute(activeStep)"
       @execute="(request, executeType) => handleApiExecute((request as unknown as RequestParam), executeType)"
       @replace="handleReplaceStep"
@@ -1525,12 +1526,14 @@
   /**
    * 删除
    */
-  function deleteCaseStep(step?: ScenarioStepItem) {
+  function deleteStep(step?: ScenarioStepItem) {
     if (step) {
       customCaseDrawerVisible.value = false;
+      customApiDrawerVisible.value = false;
       deleteNode(steps.value, step.uniqueId, 'uniqueId');
       activeStep.value = undefined;
       scenario.value.unSaved = true;
+      Message.success(t('common.deleteSuccess'));
     }
   }