style(工作台):接口用例&接口自动化样式调整

This commit is contained in:
RubyLiu 2023-07-12 15:14:31 +08:00 committed by 刘瑞斌
parent ae8cdfc3ff
commit 8aff69e572
2 changed files with 111 additions and 94 deletions

View File

@ -170,13 +170,8 @@
:fields-width="fieldsWidth" :fields-width="fieldsWidth"
sortable sortable
min-width="130px"> min-width="130px">
<template v-slot:default="{row}"> <template v-slot:default="{ row }">
<el-link type="success" @click="showReport(row)" v-if="row.lastResult === 'Success'"> <ms-api-report-status :status="row.lastResult" />
{{ $t('api_test.automation.success') }}
</el-link>
<el-link type="danger" @click="showReport(row)" v-else-if="row.lastResult === 'Error'">
{{ $t('api_test.automation.fail') }}
</el-link>
</template> </template>
</ms-table-column> </ms-table-column>
@ -236,6 +231,7 @@ export default {
MsTag, MsTag,
MsTableColumn, MsTableColumn,
HeaderLabelOperate, HeaderLabelOperate,
MsApiReportStatus: () => import('@/business/module/api/ApiReportStatus'),
HeaderCustom: () => import("metersphere-frontend/src/components/head/HeaderCustom"), HeaderCustom: () => import("metersphere-frontend/src/components/head/HeaderCustom"),
BatchMove: () => import("@/business/module/api/BatchMove"), BatchMove: () => import("@/business/module/api/BatchMove"),
EnvironmentSelect: () => import("@/business/module/environment/EnvSelect"), EnvironmentSelect: () => import("@/business/module/environment/EnvSelect"),
@ -629,13 +625,6 @@ export default {
} }
} }
}, },
showReport(row) {
this.showReportVisible = true;
this.infoDb = true;
this.showReportId = row.reportId;
},
// //
isSelectThissWeekData() { isSelectThissWeekData() {
let dataRange = this.$route.params.dataSelectRange; let dataRange = this.$route.params.dataSelectRange;

View File

@ -6,8 +6,8 @@
@close="close" @close="close"
:visible.sync="runModeVisible" :visible.sync="runModeVisible"
> >
<div style="margin-bottom: 10px;"> <div style="margin-bottom: 10px">
<div>{{ $t('commons.environment') }}</div> <div>{{ $t("commons.environment") }}</div>
<env-select-popover <env-select-popover
:project-ids="projectIds" :project-ids="projectIds"
:project-list="projectList" :project-list="projectList"
@ -20,60 +20,73 @@
@setProjectEnvMap="setProjectEnvMap" @setProjectEnvMap="setProjectEnvMap"
@setEnvGroup="setEnvGroup" @setEnvGroup="setEnvGroup"
ref="envSelectPopover" ref="envSelectPopover"
class="env-select-popover"></env-select-popover> class="env-select-popover"
></env-select-popover>
</div> </div>
<div> <div>
<span class="ms-mode-span">{{ $t("run_mode.title") }}</span> <div class="mode-row">{{ $t("run_mode.title") }}</div>
<div>
<el-radio-group v-model="runConfig.mode" @change="changeMode"> <el-radio-group v-model="runConfig.mode" @change="changeMode">
<el-radio label="serial">{{ $t("run_mode.serial") }}</el-radio> <el-radio label="serial">{{ $t("run_mode.serial") }}</el-radio>
<el-radio label="parallel">{{ $t("run_mode.parallel") }}</el-radio> <el-radio label="parallel">{{ $t("run_mode.parallel") }}</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
</div>
<div class="ms-mode-div"> <!-- 资源池 -->
<el-row>
<el-col :span="6">
<span class="ms-mode-span">{{ $t("run_mode.other_config") }}</span>
</el-col>
<el-col :span="18">
<div> <div>
<div class="mode-row">{{ $t("run_mode.other_config") }}</div>
<div class="mode-row">
<el-radio-group v-model="runConfig.reportType"> <el-radio-group v-model="runConfig.reportType">
<el-radio label="iddReport">{{ $t("run_mode.idd_report") }}</el-radio> <el-radio label="iddReport">{{ $t("run_mode.idd_report") }}</el-radio>
<el-radio label="setReport">{{ $t("run_mode.set_report") }}</el-radio> <el-radio label="setReport">{{ $t("run_mode.set_report") }}</el-radio>
</el-radio-group> </el-radio-group>
</div> </div>
<div style="padding-top: 10px"> <div class="mode-row">
<span style="padding-right: 10px;">{{ $t('run_mode.run_with_resource_pool') }}</span> <span>{{ $t("run_mode.run_with_resource_pool") }}</span>
<el-select :disabled="!runConfig.runWithinResourcePool" v-model="runConfig.resourcePoolId" size="mini"> <el-select
:disabled="!runConfig.runWithinResourcePool"
v-model="runConfig.resourcePoolId"
size="mini"
class="mode-row"
style="width: 100%"
>
<el-option <el-option
v-for="item in resourcePools" v-for="item in resourcePools"
:key="item.id" :key="item.id"
:label="item.name" :label="item.name"
:disabled="!item.api" :disabled="!item.api"
:value="item.id"> :value="item.id"
>
</el-option> </el-option>
</el-select> </el-select>
</div> </div>
</el-col>
</el-row>
</div>
<!--- 失败停止 -->
<div style="margin-top: 10px" v-if="runConfig.mode === 'serial'">
<el-checkbox v-model="runConfig.onSampleError" style="margin-left: 127px">
{{ $t("api_test.fail_to_stop") }}
</el-checkbox>
</div> </div>
<div class="ms-mode-div" v-if="runConfig.reportType === 'setReport'">
<span class="ms-mode-span-label">{{ $t("run_mode.report_name") }}</span> <div
class="ms-mode-span-label"
style="margin-top: 8px"
v-if="runConfig.reportType === 'setReport'"
>
{{ $t("run_mode.report_name") }}
</div>
<div class="mode-row" v-if="runConfig.reportType === 'setReport'">
<el-input <el-input
v-model="runConfig.reportName" v-model="runConfig.reportName"
:placeholder="$t('commons.input_content')" :placeholder="$t('commons.input_content')"
size="small" size="small"
style="width: 300px"/> style="width: 100%"
/>
</div>
<!--- 失败停止 -->
<div class="mode-row" v-if="runConfig.mode === 'serial'">
<el-checkbox v-model="runConfig.onSampleError">
{{ $t("api_test.fail_to_stop") }}
</el-checkbox>
</div> </div>
<template v-slot:footer> <template v-slot:footer>
<ms-dialog-footer @cancel="close" @confirm="handleRunBatch"/> <ms-dialog-footer @cancel="close" @confirm="handleRunBatch" />
</template> </template>
</el-dialog> </el-dialog>
</template> </template>
@ -81,18 +94,18 @@
<script> <script>
import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter"; import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter";
import EnvSelectPopover from "../environment/EnvSelectPopover"; import EnvSelectPopover from "../environment/EnvSelectPopover";
import {strMapToObj} from "metersphere-frontend/src/utils"; import { strMapToObj } from "metersphere-frontend/src/utils";
import {ENV_TYPE} from "metersphere-frontend/src/utils/constants"; import { ENV_TYPE } from "metersphere-frontend/src/utils/constants";
import {parseEnvironment} from "metersphere-frontend/src/model/EnvironmentModel"; import { parseEnvironment } from "metersphere-frontend/src/model/EnvironmentModel";
import { getOwnerProjects, getProjectConfig} from "@/api/project"; import { getOwnerProjects, getProjectConfig } from "@/api/project";
import {getTestResourcePools} from "@/api/test-resource-pool"; import { getTestResourcePools } from "@/api/test-resource-pool";
import {getEnvironmentByProjectId} from "metersphere-frontend/src/api/environment"; import { getEnvironmentByProjectId } from "metersphere-frontend/src/api/environment";
import { getCurrentProjectID } from 'metersphere-frontend/src/utils/token'; import { getCurrentProjectID } from "metersphere-frontend/src/utils/token";
import { getApiCaseEnvironments } from "@/api/api"; import { getApiCaseEnvironments } from "@/api/api";
export default { export default {
name: "MsApiCaseRunModeWithEnv", name: "MsApiCaseRunModeWithEnv",
components: {EnvSelectPopover, MsDialogFooter}, components: { EnvSelectPopover, MsDialogFooter },
data() { data() {
return { return {
runModeVisible: false, runModeVisible: false,
@ -106,7 +119,7 @@ export default {
resourcePoolId: null, resourcePoolId: null,
envMap: new Map(), envMap: new Map(),
environmentGroupId: "", environmentGroupId: "",
environmentType: ENV_TYPE.JSON environmentType: ENV_TYPE.JSON,
}, },
projectEnvListMap: {}, projectEnvListMap: {},
projectList: [], projectList: [],
@ -116,7 +129,7 @@ export default {
}, },
props: { props: {
runCaseIds: Array, runCaseIds: Array,
projectId: String projectId: String,
}, },
methods: { methods: {
open() { open() {
@ -127,8 +140,7 @@ export default {
this.showPopover(); this.showPopover();
}, },
getDefaultResourcePool() { getDefaultResourcePool() {
getProjectConfig(getCurrentProjectID()) getProjectConfig(getCurrentProjectID()).then((res) => {
.then((res) => {
if (res.data && res.data.poolEnable && res.data.resourcePoolId) { if (res.data && res.data.poolEnable && res.data.resourcePoolId) {
this.runConfig.resourcePoolId = res.data.resourcePoolId; this.runConfig.resourcePoolId = res.data.resourcePoolId;
} }
@ -150,25 +162,35 @@ export default {
resourcePoolId: null, resourcePoolId: null,
envMap: new Map(), envMap: new Map(),
environmentGroupId: "", environmentGroupId: "",
environmentType: ENV_TYPE.JSON environmentType: ENV_TYPE.JSON,
}; };
this.runModeVisible = false; this.runModeVisible = false;
this.$emit('close'); this.$emit("close");
}, },
handleRunBatch() { handleRunBatch() {
if ((this.runConfig.mode === 'serial' || this.runConfig.mode === 'parallel') && this.runConfig.reportType === 'setReport' && this.runConfig.reportName.trim() === "") { if (
this.$warning(this.$t('commons.input_name')); (this.runConfig.mode === "serial" ||
this.runConfig.mode === "parallel") &&
this.runConfig.reportType === "setReport" &&
this.runConfig.reportName.trim() === ""
) {
this.$warning(this.$t("commons.input_name"));
return; return;
} }
if (this.runConfig.runWithinResourcePool && this.runConfig.resourcePoolId == null) { if (
this.$warning(this.$t('workspace.env_group.please_select_run_within_resource_pool')); this.runConfig.runWithinResourcePool &&
this.runConfig.resourcePoolId == null
) {
this.$warning(
this.$t("workspace.env_group.please_select_run_within_resource_pool")
);
return; return;
} }
this.$emit("handleRunBatch", this.runConfig); this.$emit("handleRunBatch", this.runConfig);
this.close(); this.close();
}, },
getResourcePools() { getResourcePools() {
this.result = getTestResourcePools().then(response => { this.result = getTestResourcePools().then((response) => {
this.resourcePools = response.data; this.resourcePools = response.data;
}); });
}, },
@ -179,22 +201,22 @@ export default {
this.runConfig.environmentGroupId = id; this.runConfig.environmentGroupId = id;
}, },
getWsProjects() { getWsProjects() {
getOwnerProjects().then(res => { getOwnerProjects().then((res) => {
this.projectList = res.data; this.projectList = res.data;
}) });
}, },
getEnvironments() { getEnvironments() {
return new Promise((resolve) => { return new Promise((resolve) => {
if (this.projectId) { if (this.projectId) {
getEnvironmentByProjectId(this.projectId).then(response => { getEnvironmentByProjectId(this.projectId).then((response) => {
this.environments = response.data; this.environments = response.data;
this.environments.forEach(environment => { this.environments.forEach((environment) => {
parseEnvironment(environment); parseEnvironment(environment);
}); });
resolve(); resolve();
}); });
} }
}) });
}, },
showPopover() { showPopover() {
let currentProjectID = getCurrentProjectID(); let currentProjectID = getCurrentProjectID();
@ -213,24 +235,30 @@ export default {
</script> </script>
<style scoped> <style scoped>
.ms-mode-span { .mode-row-span {
margin-right: 10px; margin-right: 10px;
} }
.ms-mode-div { .mode-row-div {
margin-top: 20px; margin-top: 20px;
} }
.ms-mode-span { .mode-row-span {
margin-right: 10px; margin-right: 10px;
margin-left: 10px; margin-left: 10px;
} }
.ms-mode-span-label:before { .mode-row-span-label:before {
content: '*'; content: "*";
color: #F56C6C; color: #f56c6c;
margin-right: 4px; margin-right: 4px;
margin-left: 10px; margin-left: 10px;
} }
.mode-row {
margin-top: 8px;
}
.ms-mode-span-label:before {
content: '*';
color: #f56c6c;
}
</style> </style>