refactor(项目设置): 创建环境 不需要选择项目,环境名称一行显示

--story=1003804 --user=lyh 12.项目设置下 创建环境 不需要选择项目,环境名称一行显示
https://www.tapd.cn/55049933/s/1063853
This commit is contained in:
shiziyuan9527 2021-11-03 18:38:24 +08:00 committed by 刘瑞斌
parent 52e4c2ffa8
commit 265de173b8
2 changed files with 279 additions and 300 deletions

View File

@ -1,9 +1,8 @@
<template>
<el-main v-loading="result.loading" class="environment-edit" style="margin-left: 0px">
<el-form :model="environment" :rules="rules" ref="environment">
<el-form :model="environment" :rules="rules" ref="environment" label-width="80px">
<span>{{$t('api_test.environment.name')}}</span>
<el-form-item prop="name">
<el-form-item prop="name" :label="$t('api_test.environment.name')">
<el-input v-model="environment.name" :disabled="isReadOnly" :placeholder="this.$t('commons.input_name')" clearable/>
</el-form-item>

View File

@ -42,7 +42,8 @@
:delete-permission="['PROJECT_ENVIRONMENT:READ+DELETE']"
@editClick="editEnv(scope.row)" @deleteClick="deleteEnv(scope.row)">
<template v-slot:middle>
<ms-table-operator-button v-permission="['PROJECT_ENVIRONMENT:READ+COPY']" :tip="$t('commons.copy')"
<ms-table-operator-button v-permission="['PROJECT_ENVIRONMENT:READ+COPY']"
:tip="$t('commons.copy')"
@exec="copyEnv(scope.row)"
icon="el-icon-document-copy" type="info"/>
</template>
@ -57,14 +58,6 @@
<!-- 创建编辑复制环境时的对话框 -->
<el-dialog :visible.sync="dialogVisible" :close-on-click-modal="false" :title="dialogTitle" width="66%">
<div class="project-item">
<span>
{{$t('project.select')}}
</span>
<el-select style="width: 50%" @change="handleProjectChange" v-model="currentProjectId" filterable clearable>
<el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</div>
<environment-edit :environment="currentEnvironment" ref="environmentEdit" @close="close"
:project-id="currentProjectId" @refreshAfterSave="refresh">
</environment-edit>
@ -75,28 +68,30 @@
<el-table :data="conditions">
<el-table-column prop="socket" :label="$t('load_test.domain')" show-overflow-tooltip width="180">
<template v-slot:default="{row}">
{{getUrl(row)}}
{{ getUrl(row) }}
</template>
</el-table-column>
<el-table-column prop="type" :label="$t('api_test.environment.condition_enable')" show-overflow-tooltip min-width="100px">
<el-table-column prop="type" :label="$t('api_test.environment.condition_enable')" show-overflow-tooltip
min-width="100px">
<template v-slot:default="{row}">
{{getName(row)}}
{{ getName(row) }}
</template>
</el-table-column>
<el-table-column prop="details" show-overflow-tooltip min-width="120px" :label="$t('api_test.value')">
<template v-slot:default="{row}">
{{getDetails(row)}}
{{ getDetails(row) }}
</template>
</el-table-column>
<el-table-column prop="createTime" show-overflow-tooltip min-width="120px" :label="$t('commons.create_time')">
<el-table-column prop="createTime" show-overflow-tooltip min-width="120px"
:label="$t('commons.create_time')">
<template v-slot:default="{row}">
<span>{{ row.time | timestampFormatDate }}</span>
</template>
</el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
<el-button @click="domainVisible = false" size="mini">{{$t('commons.cancel')}}</el-button>
<el-button type="primary" @click="domainVisible = false" size="mini">{{$t('commons.confirm')}}</el-button>
<el-button @click="domainVisible = false" size="mini">{{ $t('commons.cancel') }}</el-button>
<el-button type="primary" @click="domainVisible = false" size="mini">{{ $t('commons.confirm') }}</el-button>
</span>
</el-dialog>
</div>
@ -105,315 +100,300 @@
</template>
<script>
import MsTableHeader from "@/business/components/common/components/MsTableHeader";
import MsTableButton from "@/business/components/common/components/MsTableButton";
import MsTableOperator from "@/business/components/common/components/MsTableOperator";
import MsTableOperatorButton from "@/business/components/common/components/MsTableOperatorButton";
import MsTablePagination from "@/business/components/common/pagination/TablePagination";
import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
import {Environment, parseEnvironment} from "@/business/components/api/test/model/EnvironmentModel";
import EnvironmentEdit from "@/business/components/api/test/components/environment/EnvironmentEdit";
import MsAsideItem from "@/business/components/common/components/MsAsideItem";
import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
import ProjectSwitch from "@/business/components/common/head/ProjectSwitch";
import SearchList from "@/business/components/common/head/SearchList";
import {downloadFile, getCurrentProjectID} from "@/common/js/utils";
import EnvironmentImport from "@/business/components/project/menu/EnvironmentImport";
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
import MsContainer from "@/business/components/common/components/MsContainer";
import MsTableHeader from "@/business/components/common/components/MsTableHeader";
import MsTableButton from "@/business/components/common/components/MsTableButton";
import MsTableOperator from "@/business/components/common/components/MsTableOperator";
import MsTableOperatorButton from "@/business/components/common/components/MsTableOperatorButton";
import MsTablePagination from "@/business/components/common/pagination/TablePagination";
import ApiEnvironmentConfig from "@/business/components/api/test/components/ApiEnvironmentConfig";
import {Environment, parseEnvironment} from "@/business/components/api/test/model/EnvironmentModel";
import EnvironmentEdit from "@/business/components/api/test/components/environment/EnvironmentEdit";
import MsAsideItem from "@/business/components/common/components/MsAsideItem";
import MsAsideContainer from "@/business/components/common/components/MsAsideContainer";
import ProjectSwitch from "@/business/components/common/head/ProjectSwitch";
import SearchList from "@/business/components/common/head/SearchList";
import {downloadFile, getCurrentProjectID} from "@/common/js/utils";
import EnvironmentImport from "@/business/components/project/menu/EnvironmentImport";
import MsMainContainer from "@/business/components/common/components/MsMainContainer";
import MsContainer from "@/business/components/common/components/MsContainer";
export default {
name: "EnvironmentList",
components: {
MsContainer,
MsMainContainer,
EnvironmentImport,
SearchList,
ProjectSwitch,
MsAsideContainer,
MsAsideItem,
EnvironmentEdit,
ApiEnvironmentConfig,
MsTablePagination, MsTableOperatorButton, MsTableOperator, MsTableButton, MsTableHeader
export default {
name: "EnvironmentList",
components: {
MsContainer,
MsMainContainer,
EnvironmentImport,
SearchList,
ProjectSwitch,
MsAsideContainer,
MsAsideItem,
EnvironmentEdit,
ApiEnvironmentConfig,
MsTablePagination, MsTableOperatorButton, MsTableOperator, MsTableButton, MsTableHeader
},
data() {
return {
btnTips: this.$t('api_test.environment.create'),
projectList: [],
condition: {}, //
environments: [],
currentEnvironment: new Environment(),
result: {},
dialogVisible: false,
idNameMap: new Map(),
dialogTitle: '',
currentProjectId: getCurrentProjectID(), //id
selectRows: [],
isTesterPermission: false,
domainVisible: false,
conditions: [],
currentPage: 1,
pageSize: 10,
total: 0,
projectIds: [], //id
projectFilters: [],
screenHeight: 'calc(100vh - 195px)',
}
},
created() {
},
activated() {
this.list();
},
methods: {
showInfo(row) {
const config = JSON.parse(row.config);
this.conditions = config.httpConfig.conditions;
this.domainVisible = true;
},
data() {
return {
btnTips: this.$t('api_test.environment.create'),
projectList: [],
condition: {}, //
environments: [],
currentEnvironment: new Environment(),
result: {},
dialogVisible: false,
idNameMap: new Map(),
dialogTitle: '',
currentProjectId: '', //id
selectRows: [],
isTesterPermission: false,
domainVisible: false,
conditions: [],
currentPage: 1,
pageSize: 10,
total: 0,
projectIds: [], //id
projectFilters: [],
screenHeight: 'calc(100vh - 195px)',
getName(row) {
switch (row.type) {
case "NONE":
return this.$t("api_test.definition.document.data_set.none");
case "MODULE":
return this.$t("test_track.module.module");
case "PATH":
return this.$t("api_test.definition.api_path");
}
},
created() {
getUrl(row) {
return row.protocol + "://" + row.socket;
},
getDetails(row) {
if (row && row.type === "MODULE") {
if (row.details && row.details instanceof Array) {
let value = "";
row.details.forEach((item) => {
value += item.name + ",";
});
if (value.endsWith(",")) {
value = value.substr(0, value.length - 1);
}
return value;
}
} else if (row && row.type === "PATH" && row.details.length > 0 && row.details[0].name) {
return row.details[0].value === "equals" ? this.$t("commons.adv_search.operators.equals") + row.details[0].name : this.$t("api_test.request.assertions.contains") + row.details[0].name;
} else {
return "";
}
},
list() {
if (!this.projectList || this.projectList.length === 0) { //
this.$get("/project/listAll", (response) => {
this.projectList = response.data; //,
this.projectList = this.projectList.filter(project => project.id === getCurrentProjectID());
this.projectList.forEach(project => {
this.idNameMap.set(project.id, project.name);
this.projectIds.push(project.id);
this.projectFilters.push({
text: project.name,
value: project.id,
})
});
this.getEnvironments();
})
} else {
this.getEnvironments()
}
},
getEnvironments(projectIds) {
this.environments = [];
if (projectIds && projectIds.length > 0) {
this.condition.projectIds = projectIds;
} else {
this.condition.projectIds = this.projectIds;
}
let url = '/api/environment/list/' + this.currentPage + '/' + this.pageSize;
this.result = this.$post(url, this.condition, response => {
this.environments = response.data.listObject;
this.total = response.data.itemCount;
})
},
createEnv() {
this.dialogTitle = this.$t('api_test.environment.create');
this.dialogVisible = true;
this.currentEnvironment = new Environment();
this.currentEnvironment.projectId = this.currentProjectId;
},
search() {
this.list()
},
editEnv(environment) {
this.dialogTitle = this.$t('api_test.environment.config_environment');
this.currentProjectId = environment.projectId;
const temEnv = {};
Object.assign(temEnv, environment);
parseEnvironment(temEnv); //parseEnvironment
this.currentEnvironment = temEnv;
this.dialogVisible = true;
},
activated() {
copyEnv(environment) {
this.currentProjectId = environment.projectId; //
this.dialogTitle = this.$t('api_test.environment.copy_environment');
const temEnv = {};
Object.assign(temEnv, environment);
parseEnvironment(temEnv); //parseEnvironment
let newEnvironment = new Environment(temEnv);
newEnvironment.id = null;
newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
this.dialogVisible = true;
this.currentEnvironment = newEnvironment;
},
deleteEnv(environment) {
if (environment.id) {
this.$confirm(this.$t('commons.confirm_delete') + environment.name, {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: "warning"
}).then(() => {
this.result = this.$get('/api/environment/delete/' + environment.id, () => {
this.$success(this.$t('commons.delete_success'));
this.list();
});
}).catch(() => {
this.$info(this.$t('commons.delete_cancelled'));
})
}
},
getNoRepeatName(name) {
for (let i in this.environments) {
if (this.environments[i].name === name) {
return this.getNoRepeatName(name + ' copy');
}
}
return name;
},
//
// filter(filters) {
// this.getEnvironments(filters.projectId)
// },
//
close() {
this.dialogVisible = false;
this.$refs.environmentEdit.clearValidate();
},
refresh() {
this.list();
},
watch: {
//projectId
currentProjectId() {
// el-select''''projectId使
if (this.currentProjectId === '') {
this.currentEnvironment.projectId = null;
} else {
this.currentEnvironment.projectId = this.currentProjectId;
}
handleSelectionChange(value) {
this.selectRows = value;
},
importJSON() {
this.$refs.envImport.open();
},
exportJSON() {
if (this.selectRows.length < 1) {
this.$warning(this.$t('api_test.environment.select_environment'));
return;
}
//idprojectId
const envs = JSON.parse(JSON.stringify(this.selectRows));
envs.map(env => { //idprojectId
if (env.config) { //config
let tempConfig = JSON.parse(env.config);
if (tempConfig.httpConfig.conditions && tempConfig.httpConfig.conditions.length > 0) {
tempConfig.httpConfig.conditions = tempConfig.httpConfig.conditions.filter(condition => { //
return condition.type !== 'MODULE';
});
env.config = JSON.stringify(tempConfig);
}
}
delete env.id;
delete env.projectId;
})
downloadFile('MS_' + envs.length + '_Environments.json', JSON.stringify(envs));
},
methods: {
showInfo(row) {
const config = JSON.parse(row.config);
this.conditions = config.httpConfig.conditions;
this.domainVisible = true;
},
getName(row) {
switch (row.type) {
case "NONE":
return this.$t("api_test.definition.document.data_set.none");
case "MODULE":
return this.$t("test_track.module.module");
case "PATH":
return this.$t("api_test.definition.api_path");
}
},
getUrl(row) {
return row.protocol + "://" + row.socket;
},
getDetails(row) {
if (row && row.type === "MODULE") {
if (row.details && row.details instanceof Array) {
let value = "";
row.details.forEach((item) => {
value += item.name + ",";
});
if (value.endsWith(",")) {
value = value.substr(0, value.length - 1);
}
return value;
handleProjectChange() { //,
this.currentEnvironment.config.httpConfig.conditions = [];
},
parseDomainName(environment) { //
if (environment.config) {
const config = JSON.parse(environment.config);
if (config.httpConfig && !config.httpConfig.conditions) {
if (config.httpConfig.protocol && config.httpConfig.domain) {
return config.httpConfig.protocol + "://" + config.httpConfig.domain;
}
} else if (row && row.type === "PATH" && row.details.length > 0 && row.details[0].name) {
return row.details[0].value === "equals" ? this.$t("commons.adv_search.operators.equals") + row.details[0].name : this.$t("api_test.request.assertions.contains") + row.details[0].name;
} else {
return "";
}
},
list() {
if (!this.projectList || this.projectList.length === 0) { //
this.$get("/project/listAll", (response) => {
this.projectList = response.data; //,
this.projectList = this.projectList.filter(project => project.id === getCurrentProjectID());
this.projectList.forEach(project => {
this.idNameMap.set(project.id, project.name);
this.projectIds.push(project.id);
this.projectFilters.push({
text: project.name,
value: project.id,
})
});
this.getEnvironments();
})
} else {
this.getEnvironments()
}
},
getEnvironments(projectIds){
this.environments = [];
if (projectIds && projectIds.length > 0) {
this.condition.projectIds = projectIds;
} else {
this.condition.projectIds = this.projectIds;
}
let url = '/api/environment/list/' + this.currentPage + '/' + this.pageSize;
this.result = this.$post(url, this.condition, response => {
this.environments = response.data.listObject;
this.total = response.data.itemCount;
})
},
createEnv() {
this.currentProjectId = '';
this.dialogTitle = this.$t('api_test.environment.create');
this.dialogVisible = true;
this.currentEnvironment = new Environment();
},
search() {
this.list()
},
editEnv(environment) {
this.dialogTitle = this.$t('api_test.environment.config_environment');
this.currentProjectId = environment.projectId;
const temEnv = {};
Object.assign(temEnv, environment);
parseEnvironment(temEnv); //parseEnvironment
this.currentEnvironment = temEnv;
this.dialogVisible = true;
},
copyEnv(environment) {
this.currentProjectId = environment.projectId; //
this.dialogTitle = this.$t('api_test.environment.copy_environment');
const temEnv = {};
Object.assign(temEnv, environment);
parseEnvironment(temEnv); //parseEnvironment
let newEnvironment = new Environment(temEnv);
newEnvironment.id = null;
newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
this.dialogVisible = true;
this.currentEnvironment = newEnvironment;
},
deleteEnv(environment) {
if (environment.id) {
this.$confirm(this.$t('commons.confirm_delete') + environment.name, {
confirmButtonText: this.$t('commons.confirm'),
cancelButtonText: this.$t('commons.cancel'),
type: "warning"
}).then(() => {
this.result = this.$get('/api/environment/delete/' + environment.id, () => {
this.$success(this.$t('commons.delete_success'));
this.list();
});
}).catch(() => {
this.$info(this.$t('commons.delete_cancelled'));
})
}
},
getNoRepeatName(name) {
for (let i in this.environments) {
if (this.environments[i].name === name) {
return this.getNoRepeatName(name + ' copy');
}
}
return name;
},
//
// filter(filters) {
// this.getEnvironments(filters.projectId)
// },
//
close() {
this.dialogVisible = false;
this.$refs.environmentEdit.clearValidate();
},
refresh() {
this.list();
},
handleSelectionChange(value) {
this.selectRows = value;
},
importJSON() {
this.$refs.envImport.open();
},
exportJSON() {
if (this.selectRows.length < 1) {
this.$warning(this.$t('api_test.environment.select_environment'));
return;
}
//idprojectId
const envs = JSON.parse(JSON.stringify(this.selectRows));
envs.map(env => { //idprojectId
if (env.config){ //config
let tempConfig = JSON.parse(env.config);
if (tempConfig.httpConfig.conditions && tempConfig.httpConfig.conditions.length > 0) {
tempConfig.httpConfig.conditions = tempConfig.httpConfig.conditions.filter(condition => { //
return condition.type !== 'MODULE';
});
env.config = JSON.stringify(tempConfig);
if (config.httpConfig.conditions.length === 1) {
let obj = config.httpConfig.conditions[0];
if (obj.protocol && obj.domain) {
return obj.protocol + "://" + obj.domain;
}
}
delete env.id;
delete env.projectId;
})
downloadFile('MS_' + envs.length + '_Environments.json', JSON.stringify(envs));
},
handleProjectChange() { //,
this.currentEnvironment.config.httpConfig.conditions = [];
},
parseDomainName(environment) { //
if (environment.config) {
const config = JSON.parse(environment.config);
if (config.httpConfig && !config.httpConfig.conditions) {
if (config.httpConfig.protocol && config.httpConfig.domain) {
return config.httpConfig.protocol + "://" + config.httpConfig.domain;
}
return "";
} else if (config.httpConfig.conditions.length > 1) {
return "SHOW_INFO";
} else {
if (config.httpConfig.conditions.length === 1) {
let obj = config.httpConfig.conditions[0];
if (obj.protocol && obj.domain) {
return obj.protocol + "://" + obj.domain;
}
} else if (config.httpConfig.conditions.length > 1) {
return "SHOW_INFO";
}
else {
return "";
}
return "";
}
} else { //config,protocoldomain
return environment.protocol + '://' + environment.domain;
}
} else { //config,protocoldomain
return environment.protocol + '://' + environment.domain;
}
}
},
},
}
}
</script>
<style scoped>
.item-bar {
width: 100%;
background: #F9F9F9;
padding: 5px 10px;
box-sizing: border-box;
border: solid 1px #e6e6e6;
}
.item-bar {
width: 100%;
background: #F9F9F9;
padding: 5px 10px;
box-sizing: border-box;
border: solid 1px #e6e6e6;
}
.item-selected {
background: #ECF5FF;
border-left: solid #409EFF 5px;
}
.item-selected {
background: #ECF5FF;
border-left: solid #409EFF 5px;
}
.item-selected .item-right {
visibility: visible;
}
.item-selected .item-right {
visibility: visible;
}
.environment-edit {
margin-left: 0;
width: 100%;
border: 0;
}
.environment-edit {
margin-left: 0;
width: 100%;
border: 0;
}
.project-item {
padding-left: 10px;
padding-right: 20px;
}
.project-item {
padding-left: 10px;
padding-right: 20px;
}
.project-item .el-select {
margin-top: 15px;
}
.project-item .el-select {
margin-top: 15px;
}
</style>