fix(项目管理): 修复环境管理相关bug

2024-04-16 15:42:06 +08:00 · 2024-04-16 15:42:06 +08:00 · ff2bd397c8
parent b133d4a7ad
commit ff2bd397c8
11 changed files with 77 additions and 24 deletions
--- a/frontend/src/components/pure/ms-form-create/form-create.ts
+++ b/frontend/src/components/pure/ms-form-create/form-create.ts
@ -68,9 +68,10 @@ export const MEMBER = {
  value: '',
  options: [],
  props: {
-    multiple: false,
+    'multiple': false,
    // 'placeholder': t('formCreate.PleaseSelect'),
-    modelValue: '',
+    'modelValue': '',
+    'allow-clear': true,
  },
 };

@ -81,10 +82,11 @@ export const MULTIPLE_MEMBER = {
  value: [],
  options: [],
  props: {
-    multiple: true,
+    'multiple': true,
    // 'placeholder': t('formCreate.PleaseSelect'),
-    options: [],
-    modelValue: [],
+    'options': [],
+    'modelValue': [],
+    'allow-clear': true,
  },
 };

--- a/frontend/src/components/pure/ms-form-create/searchSelect.vue
+++ b/frontend/src/components/pure/ms-form-create/searchSelect.vue
@ -4,6 +4,7 @@
      v-model:model-value="selectValue"
      :placeholder="t(props.placeholder || 'common.pleaseSelect')"
      allow-search
+      allow-clear
      :multiple="props.multiple"
      @search="searchHandler"
    >
--- a/frontend/src/store/modules/setting/useProjectEnvStore.ts
+++ b/frontend/src/store/modules/setting/useProjectEnvStore.ts
@ -55,6 +55,14 @@ const envParamsDefaultConfig: EnvConfig = {
  },
 };

+const defaultAllParams = {
+  projectId: '',
+  globalParams: {
+    headers: [],
+    commonVariables: [],
+  },
+};
+
 const useProjectEnvStore = defineStore(
  'projectEnv',
  () => {
@ -75,7 +83,9 @@ const useProjectEnvStore = defineStore(
      description: '',
      config: cloneDeep(envParamsDefaultConfig),
    });
-    const allParamDetailInfo = ref<GlobalParams>(); // 全局参数详情
+    const allParamDetailInfo = ref<GlobalParams>(defaultAllParams); // 全局参数详情
+
+    const backupAllParamDetailInfo = ref<GlobalParams>(defaultAllParams);
    const httpNoWarning = ref(true);
    const getHttpNoWarning = computed(() => httpNoWarning.value);

@ -112,7 +122,11 @@ const useProjectEnvStore = defineStore(
            config: cloneDeep(envParamsDefaultConfig),
          };
        } else if (id === ALL_PARAM) {
-          allParamDetailInfo.value = await getGlobalParamDetail(appStore.currentProjectId);
+          const res = await getGlobalParamDetail(appStore.currentProjectId);
+          allParamDetailInfo.value = cloneDeep(res || defaultAllParams);
+          nextTick(() => {
+            backupAllParamDetailInfo.value = cloneDeep(allParamDetailInfo.value);
+          });
        } else if (id !== ALL_PARAM && id) {
          const tmpObj = await getDetailEnv(id);
          currentEnvDetailInfo.value = { ...tmpObj };
@ -187,6 +201,7 @@ const useProjectEnvStore = defineStore(
      setCurrentGroupId,
      setHttpNoWarning,
      setAllParamDetailInfo,
+      backupAllParamDetailInfo,
      initEnvDetail,
      initContentTabList,
      getContentTabList,
--- a/frontend/src/views/api-test/debug/locale/zh-CN.ts
+++ b/frontend/src/views/api-test/debug/locale/zh-CN.ts
@ -185,7 +185,7 @@ export default {
  'apiTestDebug.importByCURLTip': '支持快速导入 Chrome、Charles 或 Fiddler 等工具中的抓包数据',
  'apiTestDebug.noPluginTip': '该插件已卸载，无法查看插件详情',
  'apiTestDebug.noPlugin': '插件已卸载',
-  'apiTestDebug.unsavedLeave': '有标签页的内容未保存，离开后后未保存的内容将丢失，确定要离开吗？',
+  'apiTestDebug.unsavedLeave': '有标签页的内容未保存，离开后未保存的内容将丢失，确定要离开吗？',
  'apiTestDebug.testSuccess': '测试成功',
  'apiTestDebug.searchByDataBaseName': '按数据源名称搜索',
  'apiTestDebug.regexMatchRules': '表达式匹配规则',
--- a/frontend/src/views/case-management/caseManagementFeature/components/tableFilter.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tableFilter.vue
@ -28,7 +28,7 @@
            </a-checkbox>
          </a-checkbox-group>
        </div>
-        <div v-if="props.mode === 'remote'" class="min-h-[100px] w-[200px] p-4">
+        <div v-if="props.mode === 'remote'" class="w-[200px] p-4 pb-0">
          <MsUserSelector
            v-model="innerStatusFilters"
            :load-option-params="props.loadOptionParams"
--- a/frontend/src/views/project-management/environmental/components/AllParamBox.vue
+++ b/frontend/src/views/project-management/environmental/components/AllParamBox.vue
@ -19,6 +19,7 @@

 <script lang="ts" setup>
  import { Message } from '@arco-design/web-vue';
+  import { cloneDeep } from 'lodash-es';

  import RequestHeader from './requestHeader/index.vue';

@ -34,7 +35,6 @@
  const appStore = useAppStore();

  const activeKey = ref('requestHeader');
-  const headerParams = ref<EnvConfigItem[]>([]);
  const GlobalVariable = ref<EnvConfigItem[]>([]);
  const { t } = useI18n();
  const { setIsSave } = useLeaveUnSaveTip();
@ -54,25 +54,35 @@
    },
  ];

+  const headerParams = computed({
+    get() {
+      return projectEnvStore.allParamDetailInfo?.globalParams.headers || [];
+    },
+    set(val) {
+      projectEnvStore.allParamDetailInfo.globalParams.headers = val;
+    },
+  });
+
  function initEnvDetail() {
-    projectEnvStore.initEnvDetail().then(() => {
-      headerParams.value = projectEnvStore.allParamDetailInfo?.globalParams.headers || [];
-      GlobalVariable.value = projectEnvStore.allParamDetailInfo?.globalParams.commonVariables || [];
-    });
+    projectEnvStore.initEnvDetail();
+    headerParams.value = projectEnvStore.allParamDetailInfo.globalParams.headers || [];
  }

  function change() {
    canSave.value = true;
+    projectEnvStore.allParamDetailInfo.globalParams.headers = cloneDeep(headerParams.value);
    setIsSave(false);
  }
+
  const handleSave = async () => {
    try {
      loading.value = true;
+      const headerParamsFilter = headerParams.value.filter((item) => item.key);
      const params = {
        id: projectEnvStore.allParamDetailInfo?.id,
        projectId: appStore.currentProjectId,
        globalParams: {
-          headers: headerParams.value,
+          headers: headerParamsFilter,
          commonVariables: GlobalVariable.value.map((item) => {
            return {
              key: item.key,
--- a/frontend/src/views/project-management/environmental/components/envParams/preAndPost.vue
+++ b/frontend/src/views/project-management/environmental/components/envParams/preAndPost.vue
@ -5,7 +5,13 @@
    </a-tabs>
    <a-divider margin="0"></a-divider>
    <div v-if="activeTab === 'scenarioProcessorConfig'" class="h-[calc(100vh - 100px)] mt-4">
-      <a-alert class="mb-4" closable> {{ t('project.environmental.sceneAlertDesc') }} </a-alert>
+      <a-alert class="mb-4" closable>
+        {{
+          props.activeType === EnvTabTypeEnum.ENVIRONMENT_PRE
+            ? t('project.environmental.scenePreAlertDesc')
+            : t('project.environmental.scenePostAlertDesc')
+        }}
+      </a-alert>
      <a-scrollbar
        :style="{
          overflow: 'auto',
@ -27,7 +33,13 @@
      </a-scrollbar>
    </div>
    <div v-if="activeTab === 'requestProcessorConfig'" class="mt-4 h-full">
-      <a-alert class="mb-4" closable> {{ t('project.environmental.requestAlertDesc') }} </a-alert>
+      <a-alert class="mb-4" closable>
+        {{
+          props.activeType === EnvTabTypeEnum.ENVIRONMENT_PRE
+            ? t('project.environmental.requestPreAlertDesc')
+            : t('project.environmental.requestPostAlertDesc')
+        }}
+      </a-alert>
      <PreTab
        v-if="props.activeType === EnvTabTypeEnum.ENVIRONMENT_PRE"
        :show-associated-scene="showAssociatedScene"
--- a/frontend/src/views/project-management/environmental/index.vue
+++ b/frontend/src/views/project-management/environmental/index.vue
@ -646,7 +646,11 @@
        store.setCurrentId(id);
        return;
      }
-      if (isEqual(store.currentEnvDetailInfo, store.backupEnvDetailInfo)) {
+      const isChangeEnvValue =
+        store.currentId === ALL_PARAM
+          ? isEqual(store.allParamDetailInfo, store.backupAllParamDetailInfo)
+          : isEqual(store.currentEnvDetailInfo, store.backupEnvDetailInfo);
+      if (isChangeEnvValue) {
        store.setCurrentId(id);
      } else {
        // 如果有未保存的tab则提示用户
--- a/frontend/src/views/project-management/environmental/locale/en-US.ts
+++ b/frontend/src/views/project-management/environmental/locale/en-US.ts
@ -31,10 +31,14 @@ export default {
  'project.environmental.TCP': 'TCP',
  'project.environmental.pre': 'Pre',
  'project.environmental.post': 'Post',
-  'project.environmental.sceneAlertDesc':
+  'project.environmental.scenePreAlertDesc':
    'Perform this operation once before scenario execution, such as obtaining a token and scenario initialization',
-  'project.environmental.requestAlertDesc':
+  'project.environmental.scenePostAlertDesc':
+    'Perform this operation once after scenario execution, such as obtaining a token and scenario initialization',
+  'project.environmental.requestPreAlertDesc':
    'Each API step is executed once before execution, such as request content encryption',
+  'project.environmental.requestPostAlertDesc':
+    'Each API step is executed once after execution, such as request content encryption',
  'project.environmental.host': 'Host',
  'project.environmental.assert': 'Assertion',
  'project.environmental.displaySetting': 'Display Setting',
--- a/frontend/src/views/project-management/environmental/locale/zh-CN.ts
+++ b/frontend/src/views/project-management/environmental/locale/zh-CN.ts
@ -38,8 +38,10 @@ export default {
  'project.environmental.database': '数据库',
  'project.environmental.pre': '前置',
  'project.environmental.post': '后置',
-  'project.environmental.sceneAlertDesc': '场景执行前执行一次，如token获取及场景初始化',
-  'project.environmental.requestAlertDesc': '每一个API步骤执行前均执行一次，如请求内容加密',
+  'project.environmental.scenePreAlertDesc': '场景执行前执行一次，如token获取及场景初始化',
+  'project.environmental.scenePostAlertDesc': '场景执行后执行一次，如token获取及场景初始化',
+  'project.environmental.requestPreAlertDesc': '每一个API步骤执行前均执行一次，如请求内容加密',
+  'project.environmental.requestPostAlertDesc': '每一个API步骤执行后均执行一次，如请求内容加密',
  'project.environmental.host': '域名',
  'project.environmental.assert': '断言',
  'project.environmental.displaySetting': '显示设置',
--- a/frontend/src/views/setting/organization/template/components/addTemplate.vue
+++ b/frontend/src/views/setting/organization/template/components/addTemplate.vue
@ -375,7 +375,7 @@
  }

  function changeHandler(value: string, api: any) {
-    api.validateField(value);
+    api?.validateField(value);
  }

  // 保存回调
@ -539,7 +539,10 @@
  const confirmHandler = (dataList: DefinedFieldItem[]) => {
    const selectFieldIds = selectData.value.map((e) => e.id);
    const newData = dataList.filter((item) => !selectFieldIds.includes(item.id));
-    selectData.value = [...selectData.value, ...newData];
+    const newIds = dataList.map((item) => item.id);
+    // @desc 原先已经选择过的选项value值不能再次添加的时候置空
+    const selectDataValue = selectData.value.filter((item) => newIds.includes(item.id));
+    selectData.value = [...selectDataValue, ...newData];
  };

  function changeState(value: boolean | (string | number | boolean)[], formItem) {