style(接口测试): 更改接口批量操作的部分样式和文案

--bug=1038863 --user=宋天阳 https://www.tapd.cn/55049933/s/1492638
2024-04-10 14:35:27 +08:00 · 2024-04-10 14:35:27 +08:00 · b744fc9935
parent a06eb32fcc
commit b744fc9935
6 changed files with 279 additions and 18 deletions
--- a/frontend/src/views/api-test/scenario/components/batchRunModal.vue
+++ b/frontend/src/views/api-test/scenario/components/batchRunModal.vue
@ -0,0 +1,263 @@
+<template>
+  <a-modal v-model:visible="showBatchExecute" title-align="start" class="ms-modal-upload ms-modal-medium" :width="480">
+    <template #title>
+      {{ t('report.trigger.batch.execution') }}
+      <div class="text-[var(--color-text-4)]">
+        {{
+          t('api_scenario.table.batchModalSubTitle', {
+            count: props.batchParams?.currentSelectCount || tableSelected.length,
+          })
+        }}
+      </div>
+    </template>
+
+    <a-form ref="batchExecuteFormRef" class="ms-form rounded-[4px]" :model="batchExecuteForm" layout="vertical">
+      <a-form-item field="defaultEnv" :label="t('case.execute.selectEnv')">
+        <a-radio-group v-model="batchExecuteForm.defaultEnv">
+          <a-radio value="true"
+            >{{ t('case.execute.defaultEnv') }}
+            <a-tooltip :content="t('apiScenario.save.env')" position="top">
+              <icon-question-circle
+                class="text-[var(--color-text-brand)] hover:text-[rgb(var(--primary-5))]"
+                size="16"
+              />
+            </a-tooltip>
+          </a-radio>
+          <a-radio value="false">{{ t('case.execute.newEnv') }}</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        v-if="batchExecuteForm.defaultEnv == 'false'"
+        field="environmentId"
+        :label="t('case.execute.newEnv')"
+        :rules="[{ required: true, message: t('apiTestManagement.envRequired') }]"
+        asterisk-position="end"
+        required
+      >
+        <a-select v-model="batchExecuteForm.environmentId" :placeholder="t('common.pleaseSelect')">
+          <a-option v-for="item of environmentList" :key="item.id" :value="item.id">
+            {{ t(item.name) }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+      <a-form-item field="runMode" :label="t('case.execute.model')">
+        <a-radio-group v-model="batchExecuteForm.runMode">
+          <a-radio value="SERIAL">{{ t('case.execute.serial') }}</a-radio>
+          <a-radio value="PARALLEL">{{ t('case.execute.parallel') }}</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <div v-if="batchExecuteForm.runMode == 'SERIAL'" class="ms-switch">
+        <a-switch
+          v-model="batchExecuteForm.stopOnFailure"
+          type="line"
+          class="ms-form-table-input-switch execute-form-table-input-switch"
+          size="small"
+        />
+        <span class="ml-3 font-normal text-[var(--color-text-1)]">{{ t('case.execute.StopOnFailure') }}</span>
+      </div>
+      <a-form-item field="integratedReport" :label="t('case.execute.reportSetting')">
+        <a-radio-group v-model="batchExecuteForm.integratedReport" type="button">
+          <a-radio value="false">{{ t('case.execute.independentReporting') }}</a-radio>
+          <a-radio value="true">{{ t('case.execute.CollectionReport') }}</a-radio>
+        </a-radio-group>
+      </a-form-item>
+      <a-form-item
+        v-if="batchExecuteForm.integratedReport == 'true'"
+        field="integratedReportName"
+        :label="t('case.execute.reportName')"
+        :rules="[{ required: true, message: t('apiTestManagement.reportNameRequired') }]"
+        :validate-trigger="['blur', 'input']"
+        asterisk-position="end"
+      >
+        <a-input
+          v-model="batchExecuteForm.integratedReportName"
+          :max-length="255"
+          :placeholder="t('formCreate.PleaseEnter')"
+        />
+      </a-form-item>
+      <a-form-item
+        field="poolId"
+        :label="t('case.execute.pool')"
+        asterisk-position="end"
+        :rules="[{ required: true, message: t('apiTestManagement.poolRequired') }]"
+      >
+        <a-select v-model="batchExecuteForm.poolId" :placeholder="t('common.pleaseSelect')">
+          <a-option v-for="item of resourcePoolList" :key="item.id" :value="item.id">
+            {{ t(item.name) }}
+          </a-option>
+        </a-select>
+      </a-form-item>
+    </a-form>
+    <template #footer>
+      <a-button type="secondary" :disabled="batchExecuteLoading" @click="cancelBatchExecute">
+        {{ t('common.cancel') }}
+      </a-button>
+      <a-button type="primary" :loading="batchExecuteLoading" @click="handleBatchExecuteCase">
+        {{ t('system.log.operateType.execute') }}
+      </a-button>
+    </template>
+  </a-modal>
+</template>
+
+<script setup lang="ts">
+  import { ref, watch } from 'vue';
+  import { FormInstance, Message } from '@arco-design/web-vue';
+
+  import { BatchActionQueryParams } from '@/components/pure/ms-table/type';
+
+  import { getEnvList, getPoolId, getPoolOption } from '@/api/modules/api-test/management';
+  import { useI18n } from '@/hooks/useI18n';
+  import useAppStore from '@/store/modules/app';
+
+  import { Environment } from '@/models/apiTest/management';
+  import { ResourcePoolItem } from '@/models/setting/resourcePool';
+
+  const { t } = useI18n();
+  const batchExecuteFormRef = ref<FormInstance>();
+  const batchExecuteForm = ref({
+    defaultEnv: 'true',
+    runMode: 'SERIAL',
+    integratedReport: 'false',
+    integratedReportName: '',
+    stopOnFailure: false,
+    poolId: '',
+    grouped: false,
+    environmentId: '',
+  });
+
+  const environmentList = ref<Environment[]>();
+  const resourcePoolList = ref<ResourcePoolItem[]>();
+  const defaultPoolId = ref<string>();
+  const appStore = useAppStore();
+  const showBatchExecute = ref(false);
+
+  const props = withDefaults(
+    defineProps<{
+      tableSelected: (string | number)[];
+      visible: boolean;
+      batchParams?: BatchActionQueryParams;
+      batchConditionParams: any;
+      batchRunFunc: (a: any) => Promise<any>;
+    }>(),
+    {
+      visible: false,
+    }
+  );
+
+  // 初始化资源池列表
+  async function initPoolList() {
+    resourcePoolList.value = await getPoolOption(appStore.currentProjectId);
+  }
+
+  // 获取项目配置的默认资源池
+  async function getDefaultPoolId() {
+    try {
+      defaultPoolId.value = await getPoolId(appStore.currentProjectId);
+      batchExecuteForm.value.poolId = defaultPoolId.value || '';
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.log(error);
+    }
+  }
+
+  // 初始化环境列表
+  async function initEnvList() {
+    environmentList.value = await getEnvList(appStore.currentProjectId);
+  }
+
+  const batchExecuteLoading = ref(false);
+
+  const emit = defineEmits(['update:visible', 'finished']);
+
+  function cancelBatchExecute() {
+    showBatchExecute.value = false;
+  }
+
+  function resetBatchExecuteForm() {
+    batchExecuteForm.value = {
+      defaultEnv: 'true',
+      runMode: 'SERIAL',
+      integratedReport: 'false',
+      integratedReportName: '',
+      stopOnFailure: false,
+      poolId: '',
+      grouped: false,
+      environmentId: '',
+    };
+  }
+
+  function handleBatchExecuteCase() {
+    batchExecuteFormRef.value?.validate(async (errors) => {
+      const { batchParams } = props;
+      const { batchConditionParams } = props;
+      if (!errors) {
+        try {
+          batchExecuteLoading.value = true;
+          await props?.batchRunFunc({
+            selectIds: batchParams?.selectedIds || [],
+            selectAll: !!batchParams?.selectAll,
+            excludeIds: batchParams?.excludeIds || [],
+            projectId: appStore.currentProjectId,
+            ...batchConditionParams,
+            runModeConfig: {
+              runMode: batchExecuteForm.value.runMode,
+              integratedReport: batchExecuteForm.value.integratedReport === 'true',
+              integratedReportName: batchExecuteForm.value.integratedReportName,
+              stopOnFailure: batchExecuteForm.value.stopOnFailure,
+              poolId: batchExecuteForm.value.poolId,
+              grouped: batchExecuteForm.value.grouped,
+              environmentId: batchExecuteForm.value.environmentId,
+            },
+            apiDefinitionId: '',
+            versionId: '',
+            refId: '',
+          });
+          Message.success(t('case.detail.execute.success'));
+          cancelBatchExecute();
+          resetBatchExecuteForm();
+          emit('finished');
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.log(error);
+        } finally {
+          resetBatchExecuteForm();
+          batchExecuteLoading.value = false;
+        }
+      }
+    });
+  }
+
+  watch(
+    () => props.visible,
+    (val) => {
+      if (val) {
+        showBatchExecute.value = true;
+        initEnvList();
+        initPoolList();
+        getDefaultPoolId();
+      }
+    },
+    {
+      immediate: true,
+    }
+  );
+
+  watch(
+    () => showBatchExecute.value,
+    (val) => {
+      emit('update:visible', val);
+    }
+  );
+</script>
+
+<style scoped lang="less">
+  :deep(.arco-radio-group) {
+    margin-left: -5px;
+  }
+  .ms-switch {
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    margin-bottom: 16px;
+  }
+</style>
--- a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/index.vue
+++ b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/index.vue
@ -50,6 +50,9 @@
            :case-id="props.caseId"
            :api-id="props.apiId"
            :single-select="props.singleSelect"
+            :search-placeholder="
+              activeKey === 'scenario' ? t('apiScenario.quoteTableSearchTip2') : t('apiScenario.quoteTableSearchTip')
+            "
            @select="handleTableSelect"
          />
        </div>
--- a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/table.vue
+++ b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/table.vue
@ -9,7 +9,7 @@
      </div>
      <a-input-search
        v-model:model-value="keyword"
-        :placeholder="t('apiScenario.quoteTableSearchTip')"
+        :placeholder="props.searchPlaceholder"
        allow-clear
        class="mr-[8px] w-[240px]"
        @search="() => loadPage()"
@ -122,6 +122,7 @@
    caseId?: string | number;
    apiId?: string | number;
    singleSelect?: boolean; // 是否单选
+    searchPlaceholder: string; // 搜索框提示词。场景和接口、用例不一样，需要区分。
  }>();
  const emit = defineEmits<{
    (e: 'select', data: MsTableDataItem<ApiCaseDetail | ApiDefinitionDetail | ApiScenarioTableItem>[]): void;
--- a/frontend/src/views/api-test/scenario/components/scenarioTable.vue
+++ b/frontend/src/views/api-test/scenario/components/scenarioTable.vue
@ -551,19 +551,10 @@
  >
    <template #title>
      <div class="flex items-center">
-        <div v-if="isBatchCopy">
-          {{ t('common.batchCopy') }}
+        <div class="float-left">
+          {{ isBatchCopy ? t('common.batchCopy') : t('common.batchMove') }}
          <div
-            class="one-line-text ml-[4px] max-w-[100%] text-[var(--color-text-4)]"
-            :title="t('api_scenario.table.batchModalSubTitle', { count: tableSelected.length })"
-          >
-            {{ t('api_scenario.table.batchModalSubTitle', { count: tableSelected.length }) }}
-          </div>
-        </div>
-        <div v-else-if="isBatchMove" class="flex items-center">
-          {{ t('common.batchMove') }}
-          <div
-            class="one-line-text ml-[4px] max-w-[100%] text-[var(--color-text-4)]"
+            class="one-line-text float-right ml-[4px] max-w-[100%] text-[var(--color-text-4)]"
            :title="t('api_scenario.table.batchModalSubTitle', { count: batchOptionScenarioCount })"
          >
            {{ t('api_scenario.table.batchModalSubTitle', { count: batchOptionScenarioCount }) }}
@ -606,8 +597,8 @@
  import type { CaseLevel } from '@/components/business/ms-case-associate/types';
  import type { MsTreeNodeData } from '@/components/business/ms-tree/types';
  import apiStatus from '@/views/api-test/components/apiStatus.vue';
-  import BatchRunModal from '@/views/api-test/components/batchRunModal.vue';
  import ExecutionStatus from '@/views/api-test/report/component/reportStatus.vue';
+  import BatchRunModal from '@/views/api-test/scenario/components/batchRunModal.vue';
  import operationScenarioModuleTree from '@/views/api-test/scenario/components/operationScenarioModuleTree.vue';
  import TableFilter from '@/views/case-management/caseManagementFeature/components/tableFilter.vue';

--- a/frontend/src/views/api-test/scenario/locale/en-US.ts
+++ b/frontend/src/views/api-test/scenario/locale/en-US.ts
@ -259,4 +259,5 @@ export default {
  'apiScenario.schedule.table.tooltip.enable.one': 'Scheduled task is enabled',
  'apiScenario.schedule.table.tooltip.enable.two': 'Next run time: {time}',
  'apiScenario.schedule.table.tooltip.disable': 'Scheduled task is disabled',
+  'apiScenario.save.env': 'Scenario Environment',
 };
--- a/frontend/src/views/api-test/scenario/locale/zh-CN.ts
+++ b/frontend/src/views/api-test/scenario/locale/zh-CN.ts
@ -3,7 +3,7 @@ export default {
  'apiScenario.allScenario': '全部场景',
  'apiScenario.createScenario': '新建场景',
  'apiScenario.importScenario': '导入场景',
-  'apiScenario.tree.selectorPlaceholder': '请输入模块名称',
+  'apiScenario.tree.selectorPlaceholder': '请输入模块名称进行搜索',
  'apiScenario.tree.folder.allScenario': '全部场景',
  'apiScenario.tree.recycleBin': '回收站',
  'apiScenario.tree.noMatchModule': '暂无匹配的模块/场景',
@ -49,13 +49,13 @@ export default {
  'apiScenario.table.columns.deleteUser': '删除人',
  'apiScenario.table.columns.deleteTime': '删除时间',
  'api_scenario.table.searchPlaceholder': '通过 ID/名称/标签搜索',
-  'api_scenario.table.batchModalSubTitle': '（已选 {count} 个场景）',
+  'api_scenario.table.batchModalSubTitle': '（已选 {count} 条场景）',
  'api_scenario.table.chooseAttr': '选择属性',
  'api_scenario.table.attrRequired': '属性不能为空',
  'api_scenario.table.batchUpdate': '批量更新为',
  'api_scenario.table.valueRequired': '属性值不能为空',
  'api_scenario.table.deleteScenarioTipTitle': '确认删除 {name} 吗？',
-  'api_scenario.table.batchDeleteScenarioTip': '确认删除已选中的 {count} 个场景吗？',
+  'api_scenario.table.batchDeleteScenarioTip': '确认删除已选中的 {count} 条场景吗？',
  'api_scenario.table.deleteScenarioTip': '删除后，可能导致引用该场景的资源执行失败，请谨慎操作！',
  'api_scenario.table.apiStatus': '状态',
  'api_scenario.table.status.underway': '进行中',
@ -74,7 +74,7 @@ export default {
  'apiScenario.replaceSuccess': '步骤替换成功',
  // 批量操作文案
  'api_scenario.batch_operation.success': '成功{opt} {success} 条，失败 {error} 条',
-  'api_scenario.table.batchMoveConfirm': '{opt}{count}个场景至已选模块',
+  'api_scenario.table.batchMoveConfirm': '{opt}{count}条场景至已选模块',
  'apiScenario.name': '场景名称',
  'apiScenario.nameRequired': '场景名称不能为空',
  'apiScenario.namePlaceholder': '请输入场景名称',
@ -212,6 +212,7 @@ export default {
  'apiScenario.quoteTreeNoData': '暂无可引用数据，可切换项目获取数据',
  'apiScenario.quoteTreeSearchTip': '输入模块名称搜索',
  'apiScenario.quoteTableSearchTip': '通过路径或名称搜索',
+  'apiScenario.quoteTableSearchTip2': '通过名称搜索',
  'apiScenario.collapseAll': '收起全部子模块',
  'apiScenario.expandAll': '展开全部子模块',

@ -245,4 +246,5 @@ export default {
  'apiScenario.schedule.table.tooltip.enable.one': '定时任务已开启',
  'apiScenario.schedule.table.tooltip.enable.two': '下次运行时间：{time}',
  'apiScenario.schedule.table.tooltip.disable': '定时任务未开启',
+  'apiScenario.save.env': '场景保存的环境',
 };