fix(接口测试): 前后置条件及断言添加没有删除二次提醒

--bug=1037910 --user=宋昌昌【接口测试】定义-调试-断言-脚本重命名输入一个超长的名称 https://www.tapd.cn/55049933/s/1490281 --bug=1037488 --user=宋昌昌【接口测试】定义-调试-后置-脚本操作-删除存在内容的脚本没有二次确认 https://www.tapd.cn/55049933/s/1490326
2024-04-08 16:20:54 +08:00 · 2024-04-08 16:20:54 +08:00 · 6934478aec
parent 1bcbb6a306
commit 6934478aec
8 changed files with 104 additions and 14 deletions
--- a/frontend/src/components/business/ms-assertion/comp/ScriptTab.vue
+++ b/frontend/src/components/business/ms-assertion/comp/ScriptTab.vue
@ -1,5 +1,5 @@
 <template>
-  <conditionContent v-model:data="condition" :disabled="props.disabled" />
+  <conditionContent v-model:data="condition" :disabled="props.disabled" @delete="deleteItem" />
 </template>

 <script lang="ts" setup>
@ -25,6 +25,7 @@
  const emit = defineEmits<{
    (e: 'change', val: ScriptItem): void; //  数据发生变化
    (e: 'update:data'): void; //  数据发生变化
+    (e: 'deleteScriptItem', id: string | number): void; //  删除脚本
  }>();

  const condition = useVModel(props, 'data', emit);
@ -39,6 +40,13 @@
  /** 向孙组件提供属性 */
  provide('currentEnvConfig', readonly(currentEnvConfig));

+  /**
+   * 删除列表项
+   */
+  function deleteItem(id: string | number) {
+    emit('deleteScriptItem', id);
+  }
+
  onBeforeMount(() => {
    initEnvironment();
  });
--- a/frontend/src/components/business/ms-assertion/index.vue
+++ b/frontend/src/components/business/ms-assertion/index.vue
@ -40,9 +40,13 @@
          >
            <div class="ms-assertion-body-left-item-row">
              <span class="ms-assertion-body-left-item-row-num">{{ index + 1 }}</span>
-              <div class="one-line-text" :class="{ 'text-[rgb(var(--primary-5))]': activeKey === item.id }">{{
-                item.name
-              }}</div>
+              <a-tooltip :content="item.name">
+                <div
+                  class="one-line-text max-w-[80px]"
+                  :class="{ 'text-[rgb(var(--primary-5))]': activeKey === item.id }"
+                  >{{ item.name }}</div
+                >
+              </a-tooltip>
            </div>
            <div class="ms-assertion-body-left-item-switch">
              <div v-show="!props.disabled" class="ms-assertion-body-left-item-switch-action">
@ -128,6 +132,7 @@
          v-model:data="getCurrentItemState"
          :disabled="props.disabled"
          @change="handleChange"
+          @deleteScriptItem="deleteScriptItem"
        />
      </div>
    </div>
@ -152,14 +157,17 @@
  import ScriptTab from './comp/ScriptTab.vue';
  import StatusCodeTab from './comp/StatusCodeTab.vue';
  import VariableTab from './comp/VariableTab.vue';
-
  import { useI18n } from '@/hooks/useI18n';
+  import useModal from '@/hooks/useModal';
+  import { characterLimit } from '@/utils';

  import { ExecuteAssertionConfig } from '@/models/apiTest/common';
  import { ResponseAssertionType, ResponseBodyAssertionType } from '@/enums/apiEnum';

  import { MsAssertionItem } from './type';

+  const { openModal } = useModal();
+
  defineOptions({
    name: 'MsAssertion',
  });
@ -358,8 +366,25 @@
  const handleMoreActionSelect = (event: ActionsItem, item: MsAssertionItem) => {
    const currentIndex = assertions.value.findIndex((tmpItem) => tmpItem.id === item.id);
    if (event.eventTag === 'delete') {
-      assertions.value.splice(currentIndex, 1);
-      activeKey.value = currentIndex > 0 ? assertions.value[currentIndex - 1].id : '';
+      openModal({
+        type: 'error',
+        title: t('system.orgTemplate.deleteTemplateTitle', { name: characterLimit(item.name) }),
+        content: t('script.delete.confirm'),
+        okText: t('system.userGroup.confirmDelete'),
+        cancelText: t('system.userGroup.cancel'),
+        okButtonProps: {
+          status: 'danger',
+        },
+        onBeforeOk: async () => {
+          try {
+            assertions.value.splice(currentIndex, 1);
+            activeKey.value = currentIndex > 0 ? assertions.value[currentIndex - 1].id : '';
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        hideCancel: false,
+      });
    } else {
      // copy 当前item
      const tmpObj = { ...cloneDeep(assertions.value[currentIndex]), id: new Date().getTime().valueOf().toString() };
@ -370,6 +395,15 @@
    }
  };

+  /**
+   * 删除脚本项
+   */
+  const deleteScriptItem = (id: string | number) => {
+    const currentIndex = assertions.value.findIndex((tmpItem) => tmpItem.id === id);
+    assertions.value.splice(currentIndex, 1);
+    activeKey.value = currentIndex > 0 ? assertions.value[currentIndex - 1].id : '';
+  };
+
  // item点击
  const handleItemClick = (item: MsAssertionItem) => {
    activeKey.value = item.id;
--- a/frontend/src/components/business/ms-assertion/type.ts
+++ b/frontend/src/components/business/ms-assertion/type.ts
@ -8,6 +8,7 @@ export interface MsAssertionItem {
  id: string;
  label: string;
  value: string;
+  name: string;
  valueObj: ValueObject;
 }

--- a/frontend/src/views/api-test/components/condition/content.vue
+++ b/frontend/src/views/api-test/components/condition/content.vue
@ -457,9 +457,7 @@
  import MsCodeEditor from '@/components/pure/ms-code-editor/index.vue';
  import { LanguageEnum } from '@/components/pure/ms-code-editor/types';
  import MsIcon from '@/components/pure/ms-icon-font/index.vue';
-  import MsBaseTable from '@/components/pure/ms-table/base-table.vue';
  import type { MsTableColumn } from '@/components/pure/ms-table/type';
-  import useTable from '@/components/pure/ms-table/useTable';
  import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
  import InsertCommonScript from '@/components/business/ms-common-script/insertCommonScript.vue';
  import AddScriptDrawer from '@/components/business/ms-common-script/ms-addScriptDrawer.vue';
@ -472,7 +470,9 @@

  import { getProtocolList } from '@/api/modules/api-test/common';
  import { useI18n } from '@/hooks/useI18n';
+  import useModal from '@/hooks/useModal';
  import useAppStore from '@/store/modules/app';
+  import { characterLimit } from '@/utils';
  import { hasAnyPermission } from '@/utils/permission';

  import {
@ -497,6 +497,8 @@

  import { defaultKeyValueParamItem } from '@/views/api-test/components/config';

+  const { openModal } = useModal();
+
  export type ExpressionConfig = (RegexExtract | JSONPathExtract | XPathExtract) & Record<string, any>;
  const appStore = useAppStore();
  const props = withDefaults(
@ -604,7 +606,24 @@ if (!result){
   * 删除条件
   */
  function deleteCondition() {
-    emit('delete', condition.value.id);
+    openModal({
+      type: 'error',
+      title: t('system.orgTemplate.deleteTemplateTitle', { name: characterLimit(condition.value.name) }),
+      content: t('script.delete.confirm'),
+      okText: t('system.userGroup.confirmDelete'),
+      cancelText: t('system.userGroup.cancel'),
+      okButtonProps: {
+        status: 'danger',
+      },
+      onBeforeOk: async () => {
+        try {
+          emit('delete', condition.value.id);
+        } catch (error) {
+          console.log(error);
+        }
+      },
+      hideCancel: false,
+    });
  }

  const commonScriptShowType = ref<'parameters' | 'scriptContent'>('parameters');
--- a/frontend/src/views/api-test/components/condition/list.vue
+++ b/frontend/src/views/api-test/components/condition/list.vue
@ -67,6 +67,8 @@

  import { conditionTypeNameMap } from '@/config/apiTest';
  import { useI18n } from '@/hooks/useI18n';
+  import useModal from '@/hooks/useModal';
+  import { characterLimit } from '@/utils';

  import { ExecuteConditionProcessor } from '@/models/apiTest/common';
  import { RequestConditionProcessor } from '@/enums/apiEnum';
@ -86,6 +88,7 @@

  const { t } = useI18n();
  const data = useVModel(props, 'list', emit);
+  const { openModal } = useModal();

  // 当前聚焦的列表项
  const focusItemKey = ref<any>('');
@ -206,7 +209,24 @@
    if (event.eventTag === 'copy') {
      copyListItem(item);
    } else if (event.eventTag === 'delete') {
-      deleteListItem(item);
+      openModal({
+        type: 'error',
+        title: t('system.orgTemplate.deleteTemplateTitle', { name: characterLimit(item.name) }),
+        content: t('script.delete.confirm'),
+        okText: t('system.userGroup.confirmDelete'),
+        cancelText: t('system.userGroup.cancel'),
+        okButtonProps: {
+          status: 'danger',
+        },
+        onBeforeOk: async () => {
+          try {
+            deleteListItem(item);
+          } catch (error) {
+            console.log(error);
+          }
+        },
+        hideCancel: false,
+      });
    }
  }
 </script>
--- a/frontend/src/views/bug-management/components/bug-detail-drawer.vue
+++ b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
@ -632,6 +632,12 @@
    (val) => {
      if (val) {
        activeTab.value = 'detail';
+      } else {
+        const query = { ...route.query };
+        delete query.id;
+        router.replace({
+          query,
+        });
      }
    }
  );
--- a/frontend/src/views/project-management/environmental/locale/en-US.ts
+++ b/frontend/src/views/project-management/environmental/locale/en-US.ts
@ -128,4 +128,5 @@ export default {
  'project.environmental.database.nameIsExist': 'Database name already exists',
  'project.environmental.http.noneDataExist': 'There is already a domain name with an enabled range of none!',
  'project.environmental.http.selectModule': 'Please select module',
+  'script.delete.confirm': 'After deletion, it cannot be restored. Please exercise caution.',
 };
--- a/frontend/src/views/project-management/environmental/locale/zh-CN.ts
+++ b/frontend/src/views/project-management/environmental/locale/zh-CN.ts
@ -132,4 +132,5 @@ export default {
  'project.environmental.database.nameIsExist': '数据源名称已存在',
  'project.environmental.http.noneDataExist': '已存在启用范围为无的域名！',
  'project.environmental.http.selectModule': '请选择模块',
+  'script.delete.confirm': '删除后无法恢复, 请谨慎操作！',
 };