fix(接口测试): 修复环境配置复制环境,复制成功后页面关闭的缺陷

--bug=1015758 --user=王孝刚 【接口测试】github#16797,环境配置,点击复制环境,复制成功,但环境配置窗口关闭了
https://www.tapd.cn/55049933/s/1222041
This commit is contained in:
wxg0103 2022-08-11 13:47:15 +08:00 committed by 刘瑞斌
parent f5ab742d5e
commit 2297374a46
2 changed files with 333 additions and 323 deletions

View File

@ -7,177 +7,182 @@
:env-add-permission="['PROJECT_ENVIRONMENT:READ+CREATE']" :env-add-permission="['PROJECT_ENVIRONMENT:READ+CREATE']"
:data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment" :data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment"
:delete-fuc="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/> :delete-fuc="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/>
<environment-edit :if-create="ifCreate" :environment="currentEnvironment" ref="environmentEdit" @close="close" :is-read-only="isReadOnly"/> <environment-edit :if-create="ifCreate" :environment="currentEnvironment" ref="environmentEdit" @close="close"
:is-read-only="isReadOnly"/>
</el-container> </el-container>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
import MsApiCollapse from "../collapse/ApiCollapse"; import MsApiCollapse from "../collapse/ApiCollapse";
import MsApiCollapseItem from "../collapse/ApiCollapseItem"; import MsApiCollapseItem from "../collapse/ApiCollapseItem";
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import MsContainer from "../../../../common/components/MsContainer"; import MsContainer from "../../../../common/components/MsContainer";
import MsAsideContainer from "../../../../common/components/MsAsideContainer"; import MsAsideContainer from "../../../../common/components/MsAsideContainer";
import MsMainContainer from "../../../../common/components/MsMainContainer"; import MsMainContainer from "../../../../common/components/MsMainContainer";
import MsAsideItem from "../../../../common/components/MsAsideItem"; import MsAsideItem from "../../../../common/components/MsAsideItem";
import EnvironmentEdit from "./EnvironmentEdit"; import EnvironmentEdit from "./EnvironmentEdit";
import {deepClone, hasPermission, listenGoBack, removeGoBackListener} from "@/common/js/utils"; import {hasPermission, listenGoBack, removeGoBackListener} from "@/common/js/utils";
import {Environment, parseEnvironment} from "../../model/EnvironmentModel"; import {Environment, parseEnvironment} from "../../model/EnvironmentModel";
export default { export default {
name: "ApiEnvironmentConfig", name: "ApiEnvironmentConfig",
components: { components: {
EnvironmentEdit, EnvironmentEdit,
MsAsideItem, MsAsideItem,
MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable
},
data() {
return {
result: {},
visible: false,
projectId: '',
environments: [],
currentEnvironment: new Environment(),
environmentOperators: [
{
icon: 'el-icon-document-copy',
func: this.copyEnvironment,
permissions: ['PROJECT_ENVIRONMENT:READ+COPY']
},
{
icon: 'el-icon-delete',
func: this.deleteEnvironment,
permissions: ['PROJECT_ENVIRONMENT:READ+DELETE']
}
],
selectEnvironmentId: '',
ifCreate: false, //
isCopy: false
}
},
computed: {
isReadOnly() {
return !hasPermission('PROJECT_ENVIRONMENT:READ+EDIT');
}
},
methods: {
open: function (projectId, envId) {
this.visible = true;
this.projectId = projectId;
this.selectEnvironmentId = envId;
this.getEnvironments();
listenGoBack(this.close);
}, },
data() { deleteEnvironment(environment, index) {
return { this.ifCreate = false;
result: {}, if (environment.id) {
visible: false, this.result = this.$get('/api/environment/delete/' + environment.id, () => {
projectId: '', this.$success(this.$t('commons.delete_success'));
environments: [], this.getEnvironments();
currentEnvironment: new Environment(),
environmentOperators: [
{
icon: 'el-icon-document-copy',
func: this.copyEnvironment,
permissions: ['PROJECT_ENVIRONMENT:READ+COPY']
},
{
icon: 'el-icon-delete',
func: this.deleteEnvironment,
permissions: ['PROJECT_ENVIRONMENT:READ+DELETE']
}
],
selectEnvironmentId: '',
ifCreate: false, //
}
},
computed: {
isReadOnly() {
return !hasPermission('PROJECT_ENVIRONMENT:READ+EDIT');
}
},
methods: {
open: function (projectId, envId) {
this.visible = true;
this.projectId = projectId;
this.selectEnvironmentId = envId;
this.getEnvironments();
listenGoBack(this.close);
},
deleteEnvironment(environment, index) {
this.ifCreate = false;
if (environment.id) {
this.result = this.$get('/api/environment/delete/' + environment.id, () => {
this.$success(this.$t('commons.delete_success'));
this.getEnvironments();
});
}
else {
this.environments.splice(index, 1);
}
},
copyEnvironment(environment) {
this.ifCreate = false;
this.currentEnvironment = environment;
if (!environment.id) {
this.$warning(this.$t('commons.please_save'));
return;
}
let newEnvironment = {};
newEnvironment = new Environment(environment);
newEnvironment.id = null;
newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
if (!this.validateEnvironment(newEnvironment)) {
return;
}
this.$refs.environmentEdit._save(newEnvironment);
this.environments.push(newEnvironment);
this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
},
validateEnvironment(environment) {
if (!this.$refs.environmentEdit.validate()) {
this.$error(this.$t('commons.formatErr'));
return false;
}
return true;
},
getNoRepeatName(name) {
for (let i in this.environments) {
if (this.environments[i].name === name) {
return this.getNoRepeatName(name + ' copy');
}
}
return name;
},
addEnvironment() {
this.ifCreate = true;
let newEnvironment = new Environment({
projectId: this.projectId
}); });
this.environments.push(newEnvironment); } else {
this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment); this.environments.splice(index, 1);
}, }
environmentSelected(environment) { },
this.getEnvironment(environment); copyEnvironment(environment) {
}, this.ifCreate = false;
getEnvironments() { this.isCopy = true;
if (this.projectId) { this.currentEnvironment = environment;
this.result = this.$get('/api/environment/list/' + this.projectId, response => { if (!environment.id) {
this.environments = response.data; this.$warning(this.$t('commons.please_save'));
if (this.environments.length > 0) { return;
if (this.selectEnvironmentId) { }
const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId); let newEnvironment = {};
if (index !== -1) { newEnvironment = new Environment(environment);
this.$refs.environmentItems.itemSelected(index, this.environments[index]); newEnvironment.id = null;
} else { newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
this.$refs.environmentItems.itemSelected(0, this.environments[0]); if (!this.validateEnvironment(newEnvironment)) {
} return;
}
this.$refs.environmentEdit._save(newEnvironment);
this.environments.unshift(newEnvironment);
this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
},
validateEnvironment(environment) {
if (!this.$refs.environmentEdit.validate()) {
this.$error(this.$t('commons.formatErr'));
return false;
}
return true;
},
getNoRepeatName(name) {
for (let i in this.environments) {
if (this.environments[i].name === name) {
return this.getNoRepeatName(name + ' copy');
}
}
return name;
},
addEnvironment() {
this.ifCreate = true;
let newEnvironment = new Environment({
projectId: this.projectId
});
this.environments.push(newEnvironment);
this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
},
environmentSelected(environment) {
this.getEnvironment(environment);
},
getEnvironments() {
if (this.projectId) {
this.result = this.$get('/api/environment/list/' + this.projectId, response => {
this.environments = response.data;
if (this.environments.length > 0) {
if (this.selectEnvironmentId) {
const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId);
if (index !== -1) {
this.$refs.environmentItems.itemSelected(index, this.environments[index]);
} else { } else {
this.$refs.environmentItems.itemSelected(0, this.environments[0]); this.$refs.environmentItems.itemSelected(0, this.environments[0]);
} }
} else { } else {
let item = new Environment({ this.$refs.environmentItems.itemSelected(0, this.environments[0]);
projectId: this.projectId
});
this.environments.push(item);
this.$refs.environmentItems.itemSelected(0, item);
} }
}); } else {
} let item = new Environment({
}, projectId: this.projectId
getEnvironment(environment) { });
parseEnvironment(environment); this.environments.push(item);
this.currentEnvironment = environment; this.$refs.environmentItems.itemSelected(0, item);
if(this.currentEnvironment.name){ }
this.ifCreate = false; });
}
},
close() {
this.$emit('close');
this.visible = false;
this.$refs.environmentEdit.clearValidate();
removeGoBackListener(this.close);
} }
},
getEnvironment(environment) {
parseEnvironment(environment);
this.currentEnvironment = environment;
if (this.currentEnvironment.name) {
this.ifCreate = false;
}
},
close() {
this.$emit('close');
if (!this.isCopy) {
this.visible = false;
}
this.$refs.environmentEdit.clearValidate();
removeGoBackListener(this.close);
this.isCopy = false;
} }
} }
}
</script> </script>
<style scoped> <style scoped>
.environment-dialog >>> .el-dialog__body { .environment-dialog >>> .el-dialog__body {
padding-top: 20px; padding-top: 20px;
} }
.el-container { .el-container {
position: relative; position: relative;
} }
.ms-aside-container { .ms-aside-container {
height: 100%; height: 100%;
position: absolute; position: absolute;
} }
</style> </style>

View File

@ -7,7 +7,8 @@
:data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment" :data="environments" :item-operators="environmentOperators" :add-fuc="addEnvironment"
:env-add-permission="ENV_CREATE" :env-add-permission="ENV_CREATE"
:delete-fuc="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/> :delete-fuc="deleteEnvironment" @itemSelected="environmentSelected" ref="environmentItems"/>
<environment-edit :if-create="ifCreate" :project-id="projectId" :environment="currentEnvironment" ref="environmentEdit" :is-read-only="isReadOnly" <environment-edit :if-create="ifCreate" :project-id="projectId" :environment="currentEnvironment"
ref="environmentEdit" :is-read-only="isReadOnly"
@confirm="save" @confirm="save"
@close="close"/> @close="close"/>
</el-container> </el-container>
@ -15,197 +16,201 @@
</template> </template>
<script> <script>
import MsApiCollapse from "./collapse/ApiCollapse"; import MsApiCollapse from "./collapse/ApiCollapse";
import MsApiCollapseItem from "./collapse/ApiCollapseItem"; import MsApiCollapseItem from "./collapse/ApiCollapseItem";
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import MsContainer from "../../../common/components/MsContainer"; import MsContainer from "../../../common/components/MsContainer";
import MsAsideContainer from "../../../common/components/MsAsideContainer"; import MsAsideContainer from "../../../common/components/MsAsideContainer";
import MsMainContainer from "../../../common/components/MsMainContainer"; import MsMainContainer from "../../../common/components/MsMainContainer";
import MsAsideItem from "../../../common/components/MsAsideItem"; import MsAsideItem from "../../../common/components/MsAsideItem";
import EnvironmentEdit from "./environment/EnvironmentEdit"; import EnvironmentEdit from "./environment/EnvironmentEdit";
import {deepClone, hasPermission, listenGoBack, removeGoBackListener} from "../../../../../common/js/utils"; import {hasPermission, listenGoBack, removeGoBackListener} from "../../../../../common/js/utils";
import {Environment, parseEnvironment} from "../model/EnvironmentModel"; import {Environment, parseEnvironment} from "../model/EnvironmentModel";
import MsDialogHeader from "@/business/components/common/components/MsDialogHeader"; import MsDialogHeader from "@/business/components/common/components/MsDialogHeader";
export default { export default {
name: "ApiEnvironmentConfig", name: "ApiEnvironmentConfig",
components: { components: {
EnvironmentEdit, EnvironmentEdit,
MsAsideItem, MsAsideItem,
MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable, MsDialogHeader MsMainContainer, MsAsideContainer, MsContainer, MsApiCollapseItem, MsApiCollapse, draggable, MsDialogHeader
}, },
data() { data() {
return { return {
result: {}, result: {},
visible: false, visible: false,
projectId: '', projectId: '',
environments: [], environments: [],
currentEnvironment: new Environment(), currentEnvironment: new Environment(),
environmentOperators: [ environmentOperators: [
{ {
icon: 'el-icon-document-copy', icon: 'el-icon-document-copy',
func: this.copyEnvironment, func: this.copyEnvironment,
permissions: this.type === 'project' ? permissions: this.type === 'project' ?
['PROJECT_ENVIRONMENT:READ+COPY'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY'] ['PROJECT_ENVIRONMENT:READ+COPY'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+COPY']
}, },
{ {
icon: 'el-icon-delete', icon: 'el-icon-delete',
func: this.deleteEnvironment, func: this.deleteEnvironment,
permissions: this.type === 'project' ? permissions: this.type === 'project' ?
['PROJECT_ENVIRONMENT:READ+DELETE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE'] ['PROJECT_ENVIRONMENT:READ+DELETE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+DELETE']
} }
], ],
selectEnvironmentId: '', selectEnvironmentId: '',
ifCreate: false, // ifCreate: false, //
isCopy: false
}
},
props: {
type: {
type: String,
default() {
return "project";
} }
}
},
computed: {
ENV_CREATE() {
return this.type === 'project' ?
['PROJECT_ENVIRONMENT:READ+CREATE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE'];
}, },
props: { ENV_EDIT() {
type: { return this.type === 'project' ?
type: String, ['PROJECT_ENVIRONMENT:READ+EDIT'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT'];
default() {
return "project";
}
}
}, },
computed: { isReadOnly() {
ENV_CREATE() { // /
return this.type === 'project' ? return this.type === 'project' ?
['PROJECT_ENVIRONMENT:READ+CREATE'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+CREATE']; !hasPermission('PROJECT_ENVIRONMENT:READ+EDIT') : !hasPermission('WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT');
}, }
ENV_EDIT() { },
return this.type === 'project' ? methods: {
['PROJECT_ENVIRONMENT:READ+EDIT'] : ['WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT']; open: function (projectId, envId) {
}, this.visible = true;
isReadOnly() { this.projectId = projectId;
// / this.selectEnvironmentId = envId;
return this.type === 'project' ? this.getEnvironments();
!hasPermission('PROJECT_ENVIRONMENT:READ+EDIT') : !hasPermission('WORKSPACE_PROJECT_ENVIRONMENT:READ+EDIT'); listenGoBack(this.close);
}
}, },
methods: { deleteEnvironment(environment, index) {
open: function (projectId, envId) { this.ifCreate = false;
this.visible = true; if (environment.id) {
this.projectId = projectId; this.result = this.$get('/api/environment/delete/' + environment.id, () => {
this.selectEnvironmentId = envId; this.$success(this.$t('commons.delete_success'));
this.getEnvironments(); this.getEnvironments();
listenGoBack(this.close);
},
deleteEnvironment(environment, index) {
this.ifCreate = false;
if (environment.id) {
this.result = this.$get('/api/environment/delete/' + environment.id, () => {
this.$success(this.$t('commons.delete_success'));
this.getEnvironments();
});
}
else {
this.environments.splice(index, 1);
}
},
copyEnvironment(environment) {
this.ifCreate = false;
//
this.environmentSelected(environment);
this.currentEnvironment = environment;
if (!environment.id) {
this.$warning(this.$t('commons.please_save'));
return;
}
let newEnvironment = {};
newEnvironment = new Environment(environment);
newEnvironment.id = null;
newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
if (!this.validateEnvironment(newEnvironment)) {
return;
}
this.$refs.environmentEdit._save(newEnvironment);
this.environments.push(newEnvironment);
this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
},
validateEnvironment(environment) {
if (!this.$refs.environmentEdit.validate()) {
this.$error(this.$t('commons.formatErr'));
return false;
}
return true;
},
getNoRepeatName(name) {
for (let i in this.environments) {
if (this.environments[i].name === name) {
return this.getNoRepeatName(name + ' copy');
}
}
return name;
},
addEnvironment() {
this.ifCreate = true;
let newEnvironment = new Environment({
projectId: this.projectId
}); });
this.environments.push(newEnvironment); } else {
this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment); this.environments.splice(index, 1);
}, }
environmentSelected(environment) { },
this.getEnvironment(environment); copyEnvironment(environment) {
}, this.ifCreate = false;
getEnvironments() { this.isCopy = true;
if (this.projectId) { //
this.result = this.$get('/api/environment/list/' + this.projectId, response => { this.environmentSelected(environment);
this.environments = response.data; this.currentEnvironment = environment;
if (this.environments.length > 0) { if (!environment.id) {
if (this.selectEnvironmentId) { this.$warning(this.$t('commons.please_save'));
const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId); return;
if (index !== -1) { }
this.$refs.environmentItems.itemSelected(index, this.environments[index]); let newEnvironment = {};
} else { newEnvironment = new Environment(environment);
this.$refs.environmentItems.itemSelected(0, this.environments[0]); newEnvironment.id = null;
} newEnvironment.name = this.getNoRepeatName(newEnvironment.name);
if (!this.validateEnvironment(newEnvironment)) {
return;
}
this.$refs.environmentEdit._save(newEnvironment);
this.environments.unshift(newEnvironment);
this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
},
validateEnvironment(environment) {
if (!this.$refs.environmentEdit.validate()) {
this.$error(this.$t('commons.formatErr'));
return false;
}
return true;
},
getNoRepeatName(name) {
for (let i in this.environments) {
if (this.environments[i].name === name) {
return this.getNoRepeatName(name + ' copy');
}
}
return name;
},
addEnvironment() {
this.ifCreate = true;
let newEnvironment = new Environment({
projectId: this.projectId
});
this.environments.push(newEnvironment);
this.$refs.environmentItems.itemSelected(this.environments.length - 1, newEnvironment);
},
environmentSelected(environment) {
this.getEnvironment(environment);
},
getEnvironments() {
if (this.projectId) {
this.result = this.$get('/api/environment/list/' + this.projectId, response => {
this.environments = response.data;
if (this.environments.length > 0) {
if (this.selectEnvironmentId) {
const index = this.environments.findIndex(e => e.id === this.selectEnvironmentId);
if (index !== -1) {
this.$refs.environmentItems.itemSelected(index, this.environments[index]);
} else { } else {
this.$refs.environmentItems.itemSelected(0, this.environments[0]); this.$refs.environmentItems.itemSelected(0, this.environments[0]);
} }
} else { } else {
let item = new Environment({ this.$refs.environmentItems.itemSelected(0, this.environments[0]);
projectId: this.projectId
});
this.environments.push(item);
this.$refs.environmentItems.itemSelected(0, item);
} }
}); } else {
} let item = new Environment({
}, projectId: this.projectId
getEnvironment(environment) { });
parseEnvironment(environment); this.environments.push(item);
this.currentEnvironment = environment; this.$refs.environmentItems.itemSelected(0, item);
if(this.currentEnvironment.name){ }
this.ifCreate = false; });
}
},
save(){
this.$refs.environmentEdit.save();
},
close() {
this.$emit('close');
this.visible = false;
this.$refs.environmentEdit.clearValidate();
removeGoBackListener(this.close);
} }
},
getEnvironment(environment) {
parseEnvironment(environment);
this.currentEnvironment = environment;
if (this.currentEnvironment.name) {
this.ifCreate = false;
}
},
save() {
this.$refs.environmentEdit.save();
},
close() {
this.$emit('close');
if (!this.isCopy) {
this.visible = false;
}
this.$refs.environmentEdit.clearValidate();
removeGoBackListener(this.close);
this.isCopy = false;
} }
} }
}
</script> </script>
<style scoped> <style scoped>
.environment-dialog >>> .el-dialog__body { .environment-dialog >>> .el-dialog__body {
padding-top: 20px; padding-top: 20px;
} }
.el-container { .el-container {
position: relative; position: relative;
} }
.ms-aside-container { .ms-aside-container {
height: 100%; height: 100%;
position: absolute; position: absolute;
} }
</style> </style>