fix(测试跟踪): 优化测试计划内批量编辑接口和场景用例的环境,增加已选环境的反显
--bug=1024643 --user=宋天阳 【测试跟踪】测试计划-接口用例tab-批量编辑接口case页面显示运行环境信息优化 https://www.tapd.cn/55049933/s/1354319
This commit is contained in:
parent
1dda504ebb
commit
091c41cccd
|
@ -9,43 +9,115 @@
|
|||
@close="handleClose"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
v-loading="loading">
|
||||
<span class="select-row">{{$t('test_track.batch_operate_select_row_count', [size])}}</span>
|
||||
v-loading="loading"
|
||||
>
|
||||
<span class="select-row">{{
|
||||
$t("test_track.batch_operate_select_row_count", [size])
|
||||
}}</span>
|
||||
|
||||
<el-form :model="form" label-position="top" label-width="180px" size="small" ref="form" :rules="rules" style="margin-top: 24px" class="batchEditForm">
|
||||
<el-form
|
||||
:model="form"
|
||||
label-position="top"
|
||||
label-width="180px"
|
||||
size="small"
|
||||
ref="form"
|
||||
:rules="rules"
|
||||
style="margin-top: 24px"
|
||||
class="batchEditForm"
|
||||
>
|
||||
<el-form-item :label="$t('test_track.case.select_attr')" prop="type">
|
||||
<el-select v-model="form.type" style="width: 100%" @change="changeType">
|
||||
<el-option v-for="(type, index) in typeArr" :key="index" :value="type.custom ? type.custom : type.id"
|
||||
:label="type.name"/>
|
||||
<el-select
|
||||
v-model="form.type"
|
||||
style="width: 100%"
|
||||
@change="changeType"
|
||||
>
|
||||
<el-option
|
||||
v-for="(type, index) in typeArr"
|
||||
:key="index"
|
||||
:value="type.custom ? type.custom : type.id"
|
||||
:label="type.name"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === 'projectEnv'" :label="$t('test_track.case.batch_update_to')">
|
||||
<env-popover :env-map="projectEnvMap"
|
||||
<el-form-item
|
||||
v-if="form.type === 'projectEnv'"
|
||||
:label="$t('test_track.case.batch_update_to')"
|
||||
>
|
||||
<env-popover
|
||||
:env-map="projectEnvMap"
|
||||
:project-ids="projectIds"
|
||||
@setProjectEnvMap="setProjectEnvMap"
|
||||
:show-config-button-with-out-permission="showConfigButtonWithOutPermission"
|
||||
:show-config-button-with-out-permission="
|
||||
showConfigButtonWithOutPermission
|
||||
"
|
||||
:project-list="projectList"
|
||||
:environment-type.sync="environmentType"
|
||||
:group-id="envGroupId"
|
||||
:is-scenario="false"
|
||||
@setEnvGroup="setEnvGroup"
|
||||
ref="envPopover"/>
|
||||
ref="envPopover"
|
||||
/>
|
||||
<div v-if="showProjectEnv" type="flex" style="margin-top: 5px">
|
||||
<div
|
||||
v-for="(values, key) in projectEnvDescMap"
|
||||
:key="key"
|
||||
style="margin-right: 10px"
|
||||
>
|
||||
<el-row>
|
||||
{{ key + ":" }}
|
||||
<ms-tag
|
||||
:key="values"
|
||||
type="success"
|
||||
:content="values"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else-if="form.type === 'tags'" :label="$t('test_track.case.batch_update_to')">
|
||||
<ms-input-tag :currentScenario="form" v-if="showInputTag" ref="tag" class="ms-case-input"></ms-input-tag>
|
||||
<el-form-item
|
||||
v-else-if="form.type === 'tags'"
|
||||
:label="$t('test_track.case.batch_update_to')"
|
||||
>
|
||||
<ms-input-tag
|
||||
:currentScenario="form"
|
||||
v-if="showInputTag"
|
||||
ref="tag"
|
||||
class="ms-case-input"
|
||||
></ms-input-tag>
|
||||
<el-checkbox v-model="form.appendTag">
|
||||
{{ $t('commons.append_tag') }}
|
||||
<el-tooltip class="item" effect="dark" :content="$t('commons.append_tag_tip')" placement="top">
|
||||
{{ $t("commons.append_tag") }}
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="$t('commons.append_tag_tip')"
|
||||
placement="top"
|
||||
>
|
||||
<i class="el-icon-question"></i>
|
||||
</el-tooltip>
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else-if="form.type === 'reviewers'" :label="$t('test_track.case.batch_update_to')" prop="value">
|
||||
<el-select multiple v-model="form.value" style="width: 100%" :filterable="filterable" :disabled="!form.type">
|
||||
<el-option v-for="(option, index) in options" :key="index" :value="option.id" :label="option.name">
|
||||
<el-form-item
|
||||
v-else-if="form.type === 'reviewers'"
|
||||
:label="$t('test_track.case.batch_update_to')"
|
||||
prop="value"
|
||||
>
|
||||
<el-select
|
||||
multiple
|
||||
v-model="form.value"
|
||||
style="width: 100%"
|
||||
:filterable="filterable"
|
||||
:disabled="!form.type"
|
||||
>
|
||||
<el-option
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
:value="option.id"
|
||||
:label="option.name"
|
||||
>
|
||||
<div v-if="option.email">
|
||||
<span>{{ option.id }}({{ option.name }})</span>
|
||||
</div>
|
||||
|
@ -53,17 +125,40 @@
|
|||
</el-select>
|
||||
|
||||
<el-checkbox v-model="form.appendTag">
|
||||
{{ $t('commons.append_reviewer') }}
|
||||
{{ $t("commons.append_reviewer") }}
|
||||
</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else-if="fieldType === 'custom'" prop="customFieldValue" :label="$t('test_track.case.batch_update_to')">
|
||||
<custom-filed-component v-if="customField" :data="customField" prop="defaultValue"/>
|
||||
<el-form-item
|
||||
v-else-if="fieldType === 'custom'"
|
||||
prop="customFieldValue"
|
||||
:label="$t('test_track.case.batch_update_to')"
|
||||
>
|
||||
<custom-filed-component
|
||||
v-if="customField"
|
||||
:data="customField"
|
||||
prop="defaultValue"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-else prop="value" :label="$t('test_track.case.batch_update_to')">
|
||||
<el-select v-model="form.value" style="width: 100%" :filterable="filterable" :disabled="!form.type" @change="changeValue">
|
||||
<el-option v-for="(option, index) in options" :key="index" :value="option.id" :label="option.name">
|
||||
<el-form-item
|
||||
v-else
|
||||
prop="value"
|
||||
:label="$t('test_track.case.batch_update_to')"
|
||||
>
|
||||
<el-select
|
||||
v-model="form.value"
|
||||
style="width: 100%"
|
||||
:filterable="filterable"
|
||||
:disabled="!form.type"
|
||||
@change="changeValue"
|
||||
>
|
||||
<el-option
|
||||
v-for="(option, index) in options"
|
||||
:key="index"
|
||||
:value="option.id"
|
||||
:label="option.name"
|
||||
>
|
||||
<div v-if="option.email">
|
||||
<span>{{ option.id }}({{ option.name }})</span>
|
||||
</div>
|
||||
|
@ -71,25 +166,48 @@
|
|||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === 'status' && this.showDescription"
|
||||
:label="$t('commons.description')" :label-width="formLabelWidth" prop="description">
|
||||
<el-input v-model="form.description"
|
||||
<el-form-item
|
||||
v-if="form.type === 'status' && this.showDescription"
|
||||
:label="$t('commons.description')"
|
||||
:label-width="formLabelWidth"
|
||||
prop="description"
|
||||
>
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 2, maxRows: 4 }"
|
||||
:rows="2"
|
||||
:placeholder="$t('commons.input_un_pass_reason')"/>
|
||||
:placeholder="$t('commons.input_un_pass_reason')"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item v-if="form.type === 'reviewStatus'"
|
||||
:label="$t('原因')" :label-width="formLabelWidth" prop="description">
|
||||
<comment-edit-input :placeholder="'请输入原因'" :data="form" ref="commentEditInput"/>
|
||||
<el-form-item
|
||||
v-if="form.type === 'reviewStatus'"
|
||||
:label="$t('原因')"
|
||||
:label-width="formLabelWidth"
|
||||
prop="description"
|
||||
>
|
||||
<comment-edit-input
|
||||
:placeholder="'请输入原因'"
|
||||
:data="form"
|
||||
ref="commentEditInput"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
<template v-slot:footer>
|
||||
<el-button @click="dialogVisible = false" size="small">{{ $t('commons.cancel') }}</el-button>
|
||||
<el-button v-prevent-re-click :type="!form.type ? 'info' : 'primary'" @click="submit('form')"
|
||||
@keydown.enter.native.prevent size="small" :disabled="!form.type" style="margin-left: 12px">{{ $t('commons.confirm') }}</el-button>
|
||||
<el-button @click="dialogVisible = false" size="small">{{
|
||||
$t("commons.cancel")
|
||||
}}</el-button>
|
||||
<el-button
|
||||
v-prevent-re-click
|
||||
:type="!form.type ? 'info' : 'primary'"
|
||||
@click="submit('form')"
|
||||
@keydown.enter.native.prevent
|
||||
size="small"
|
||||
:disabled="!form.type"
|
||||
style="margin-left: 12px"
|
||||
>{{ $t("commons.confirm") }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
@ -97,8 +215,12 @@
|
|||
|
||||
<script>
|
||||
import MsDialogFooter from "metersphere-frontend/src/components/MsDialogFooter";
|
||||
import {listenGoBack, removeGoBackListener} from "metersphere-frontend/src/utils";
|
||||
import {
|
||||
listenGoBack,
|
||||
removeGoBackListener,
|
||||
} from "metersphere-frontend/src/utils";
|
||||
import EnvPopover from "@/business/plan/env/EnvPopover";
|
||||
import MsTag from "metersphere-frontend/src/components/MsTag";
|
||||
import { ENV_TYPE } from "metersphere-frontend/src/utils/constants";
|
||||
import CustomFiledComponent from "metersphere-frontend/src/components/template/CustomFiledComponent";
|
||||
import MsInputTag from "metersphere-frontend/src/components/MsInputTag";
|
||||
|
@ -114,7 +236,8 @@ export default {
|
|||
CustomFiledComponent,
|
||||
EnvPopover,
|
||||
MsDialogFooter,
|
||||
MsInputTag
|
||||
MsInputTag,
|
||||
MsTag,
|
||||
},
|
||||
props: {
|
||||
typeArr: Array,
|
||||
|
@ -122,8 +245,8 @@ export default {
|
|||
dialogTitle: {
|
||||
type: String,
|
||||
default() {
|
||||
return this.$t('test_track.case.batch_operate')
|
||||
}
|
||||
return this.$t("test_track.case.batch_operate");
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
|
@ -134,32 +257,36 @@ export default {
|
|||
appendTag: true,
|
||||
customFieldValue: null,
|
||||
tags: null,
|
||||
value: null
|
||||
value: null,
|
||||
},
|
||||
formLabelWidth: "100px",
|
||||
size: 0,
|
||||
rules: {
|
||||
type: {required: true, message: this.$t('test_track.case.please_select_attr'), trigger: ['blur', 'change']},
|
||||
type: {
|
||||
required: true,
|
||||
message: this.$t("test_track.case.please_select_attr"),
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
value: {
|
||||
required: true,
|
||||
message: this.$t('test_track.case.please_select_required_value'),
|
||||
trigger: ['blur', 'change']
|
||||
message: this.$t("test_track.case.please_select_required_value"),
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
tags: {
|
||||
required: true,
|
||||
message: this.$t('test_track.case.please_select_required_value'),
|
||||
trigger: ['blur', 'change']
|
||||
message: this.$t("test_track.case.please_select_required_value"),
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
customFieldValue: {
|
||||
required: true,
|
||||
message: this.$t('test_track.case.please_select_required_value'),
|
||||
trigger: ['blur', 'change']
|
||||
message: this.$t("test_track.case.please_select_required_value"),
|
||||
trigger: ["blur", "change"],
|
||||
},
|
||||
description: {
|
||||
required: true,
|
||||
message: this.$t('test_track.case.please_select_required_value'),
|
||||
trigger: ['blur']
|
||||
}
|
||||
message: this.$t("test_track.case.please_select_required_value"),
|
||||
trigger: ["blur"],
|
||||
},
|
||||
},
|
||||
options: [],
|
||||
filterable: false,
|
||||
|
@ -168,26 +295,33 @@ export default {
|
|||
selectRows: new Set(),
|
||||
allDataRows: new Set(),
|
||||
projectEnvMap: new Map(),
|
||||
projectEnvDescMap: {},
|
||||
map: new Map(),
|
||||
isScenario: '',
|
||||
isScenario: "",
|
||||
showDescription: false,
|
||||
loading: false,
|
||||
environmentType: ENV_TYPE.JSON,
|
||||
envGroupId: "",
|
||||
customField: null,
|
||||
fieldType: "",
|
||||
showInputTag: true
|
||||
}
|
||||
showInputTag: true,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
ENV_TYPE() {
|
||||
return ENV_TYPE;
|
||||
}
|
||||
},
|
||||
showProjectEnv() {
|
||||
return (
|
||||
this.projectEnvDescMap &&
|
||||
JSON.stringify(this.projectEnvDescMap) !== "{}"
|
||||
);
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'customField.defaultValue'() {
|
||||
this.$set(this.form, 'customFieldValue', this.customField.defaultValue);
|
||||
}
|
||||
"customField.defaultValue"() {
|
||||
this.$set(this.form, "customFieldValue", this.customField.defaultValue);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
submit(form) {
|
||||
|
@ -198,8 +332,8 @@ export default {
|
|||
this.$refs[form].validate(async (valid) => {
|
||||
if (valid) {
|
||||
this.form.projectEnvMap = this.projectEnvMap;
|
||||
if (this.form.type === 'projectEnv') {
|
||||
if (!await this.$refs.envPopover.checkEnv()) {
|
||||
if (this.form.type === "projectEnv") {
|
||||
if (!(await this.$refs.envPopover.checkEnv())) {
|
||||
return false;
|
||||
}
|
||||
this.form.map = this.map;
|
||||
|
@ -218,14 +352,19 @@ export default {
|
|||
});
|
||||
},
|
||||
validateReviewStatus() {
|
||||
if (this.form.type === 'reviewStatus' && this.form.value === 'UnPass' && !this.form.description) {
|
||||
if (
|
||||
this.form.type === "reviewStatus" &&
|
||||
this.form.value === "UnPass" &&
|
||||
!this.form.description
|
||||
) {
|
||||
this.$refs.commentEditInput.inputLight();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
},
|
||||
setProjectEnvMap(projectEnvMap) {
|
||||
setProjectEnvMap(projectEnvMap, projectEnvDescMap) {
|
||||
this.projectEnvMap = projectEnvMap;
|
||||
this.projectEnvDescMap = projectEnvDescMap;
|
||||
},
|
||||
setEnvGroup(id) {
|
||||
this.envGroupId = id;
|
||||
|
@ -234,8 +373,8 @@ export default {
|
|||
this.dialogVisible = true;
|
||||
this.projectEnvMap.clear();
|
||||
this.form = {
|
||||
appendTag: true
|
||||
}
|
||||
appendTag: true,
|
||||
};
|
||||
if (size) {
|
||||
this.size = size;
|
||||
} else {
|
||||
|
@ -247,9 +386,9 @@ export default {
|
|||
setSelectRows(rows) {
|
||||
this.selectRows = rows;
|
||||
this.projectIds.clear();
|
||||
this.selectRows.forEach(row => {
|
||||
this.projectIds.add(row.projectId)
|
||||
})
|
||||
this.selectRows.forEach((row) => {
|
||||
this.projectIds.add(row.projectId);
|
||||
});
|
||||
},
|
||||
setScenarioSelectRows(rows, sign) {
|
||||
this.selectRows = rows;
|
||||
|
@ -269,8 +408,7 @@ export default {
|
|||
let id = val.slice(6);
|
||||
this.fieldType = "custom";
|
||||
this.loading = true;
|
||||
getCustomField(id)
|
||||
.then(res => {
|
||||
getCustomField(id).then((res) => {
|
||||
this.loading = false;
|
||||
if (res) {
|
||||
res.data.defaultValue = null;
|
||||
|
@ -279,7 +417,10 @@ export default {
|
|||
this.customField = { defaultValue: null };
|
||||
}
|
||||
this.customField.options = JSON.parse(this.customField.options);
|
||||
if (this.customField.type === 'checkbox' || this.customField.type === 'multipleMember') {
|
||||
if (
|
||||
this.customField.type === "checkbox" ||
|
||||
this.customField.type === "multipleMember"
|
||||
) {
|
||||
this.customField.defaultValue = [];
|
||||
}
|
||||
});
|
||||
|
@ -289,7 +430,7 @@ export default {
|
|||
if (val && val.startsWith("custom")) {
|
||||
this._handleCustomField(val);
|
||||
}
|
||||
if (val === 'tags') {
|
||||
if (val === "tags") {
|
||||
// 跳过form rules的检查
|
||||
this.$set(this.form, "value", "tags");
|
||||
} else {
|
||||
|
@ -298,7 +439,7 @@ export default {
|
|||
|
||||
this.filterable = val === "maintainer" || val === "executor";
|
||||
this.options = this.valueArr[val];
|
||||
this.typeArr.forEach(item => {
|
||||
this.typeArr.forEach((item) => {
|
||||
if (item.id === val) {
|
||||
if (item.optionMethod) {
|
||||
this.options = [];
|
||||
|
@ -307,35 +448,35 @@ export default {
|
|||
return;
|
||||
}
|
||||
});
|
||||
this.typeArr.forEach(item => {
|
||||
this.typeArr.forEach((item) => {
|
||||
if (item.id === val && item.uuid) {
|
||||
this.$set(this.form, "id", item.uuid);
|
||||
}
|
||||
});
|
||||
|
||||
if (val === 'projectEnv' && this.isScenario !== '') {
|
||||
if (val === "projectEnv" && this.isScenario !== "") {
|
||||
this.projectIds.clear();
|
||||
this.map.clear();
|
||||
if (this.allDataRows != null && this.allDataRows.length > 0) {
|
||||
this.allDataRows.forEach(row => {
|
||||
this.allDataRows.forEach((row) => {
|
||||
this.getApiScenarioProjectId(row);
|
||||
});
|
||||
} else {
|
||||
this.selectRows.forEach(row => {
|
||||
this.selectRows.forEach((row) => {
|
||||
this.getApiScenarioProjectId(row);
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
changeValue(val) {
|
||||
if (val === 'UnPass') {
|
||||
if (val === "UnPass") {
|
||||
this.showDescription = true;
|
||||
} else {
|
||||
this.showDescription = false;
|
||||
}
|
||||
|
||||
if (this.form.type === 'reviewStatus') {
|
||||
if (val === 'UnPass') {
|
||||
if (this.form.type === "reviewStatus") {
|
||||
if (val === "UnPass") {
|
||||
this.rules.description.required = true;
|
||||
} else {
|
||||
this.rules.description.required = false;
|
||||
|
@ -343,34 +484,32 @@ export default {
|
|||
}
|
||||
},
|
||||
getApiScenarioProjectId(row) {
|
||||
let id = this.isScenario === 'scenario' ? row.id : row.caseId;
|
||||
let id = this.isScenario === "scenario" ? row.id : row.caseId;
|
||||
this.loading = true;
|
||||
getApiScenarioEnvByProjectId(id)
|
||||
.then(res => {
|
||||
getApiScenarioEnvByProjectId(id).then((res) => {
|
||||
this.loading = false;
|
||||
let data = res.data;
|
||||
data.projectIds.forEach(d => this.projectIds.add(d));
|
||||
data.projectIds.forEach((d) => this.projectIds.add(d));
|
||||
this.map.set(row.id, data.projectIds);
|
||||
});
|
||||
},
|
||||
getWsProjects() {
|
||||
getOwnerProjects()
|
||||
.then(res => {
|
||||
getOwnerProjects().then((res) => {
|
||||
this.projectList = res.data;
|
||||
});
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.select-row {
|
||||
font-family: 'PingFang SC';
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #646A73;
|
||||
color: #646a73;
|
||||
flex: none;
|
||||
order: 1;
|
||||
align-self: center;
|
||||
|
@ -378,12 +517,12 @@ export default {
|
|||
}
|
||||
|
||||
:deep(.el-form-item__label) {
|
||||
font-family: 'PingFang SC';
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
color: #1F2329;
|
||||
color: #1f2329;
|
||||
flex: none;
|
||||
order: 0;
|
||||
flex-grow: 0;
|
||||
|
@ -391,7 +530,7 @@ export default {
|
|||
}
|
||||
|
||||
:deep(.el-button--small span) {
|
||||
font-family: 'PingFang SC';
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
|
@ -416,19 +555,19 @@ export default {
|
|||
|
||||
.batchEditForm :deep(.el-form-item.is-required > .el-form-item__label:after) {
|
||||
content: "*";
|
||||
color: #F56C6C;
|
||||
color: #f56c6c;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.ms-case-input :deep(.el-tag.el-tag--info) {
|
||||
background-color: rgba(31, 35, 41, 0.1);
|
||||
font-family: 'PingFang SC';
|
||||
font-family: "PingFang SC";
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
align-items: center;
|
||||
color: #1F2329;
|
||||
color: #1f2329;
|
||||
flex: none;
|
||||
order: 1;
|
||||
flex-grow: 0;
|
||||
|
@ -442,7 +581,7 @@ export default {
|
|||
}
|
||||
|
||||
.ms-case-input :deep(.el-tag.el-tag--info .el-icon-close:hover) {
|
||||
color: #783887;;
|
||||
color: #783887;
|
||||
background-color: transparent;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -5,19 +5,32 @@
|
|||
width="400"
|
||||
:disabled="isReadOnly"
|
||||
@show="showPopover"
|
||||
trigger="click">
|
||||
<env-select :project-ids="projectIds" :env-map="envMap" @close="visible = false"
|
||||
:show-config-button-with-out-permission="showConfigButtonWithOutPermission"
|
||||
ref="envSelect" @setProjectEnvMap="setProjectEnvMap" :project-list="projectList"/>
|
||||
<el-button type="primary" slot="reference" size="mini" style="margin-top: 2px;">
|
||||
{{ $t('api_test.definition.request.run_env') }}
|
||||
trigger="click"
|
||||
>
|
||||
<env-select
|
||||
:project-ids="projectIds"
|
||||
:env-map="envMap"
|
||||
@close="visible = false"
|
||||
:show-config-button-with-out-permission="
|
||||
showConfigButtonWithOutPermission
|
||||
"
|
||||
ref="envSelect"
|
||||
@setProjectEnvMap="setProjectEnvMap"
|
||||
:project-list="projectList"
|
||||
/>
|
||||
<el-button
|
||||
type="primary"
|
||||
slot="reference"
|
||||
size="mini"
|
||||
style="margin-top: 2px"
|
||||
>
|
||||
{{ $t("api_test.definition.request.run_env") }}
|
||||
<i class="el-icon-caret-bottom el-icon--right"></i>
|
||||
</el-button>
|
||||
</el-popover>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import EnvSelect from "@/business/plan/env/EnvSelect";
|
||||
export default {
|
||||
name: "EnvPopover",
|
||||
|
@ -30,35 +43,32 @@ export default {
|
|||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
isReadOnly: {
|
||||
type: Boolean,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false
|
||||
visible: false,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
showPopover() {
|
||||
this.$refs.envSelect.open();
|
||||
},
|
||||
setProjectEnvMap(map) {
|
||||
this.$emit("setProjectEnvMap", map);
|
||||
setProjectEnvMap(map, groupDescMap) {
|
||||
this.$emit("setProjectEnvMap", map, groupDescMap);
|
||||
},
|
||||
checkEnv() {
|
||||
return this.$refs.envSelect.checkEnv();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
<style scoped></style>
|
||||
|
|
|
@ -1,20 +1,41 @@
|
|||
<template>
|
||||
<div v-loading="result.loading">
|
||||
<div v-for="pe in data" :key="pe.id" style="margin-left: 20px;">
|
||||
<el-select v-model="pe['selectEnv']" filterable :placeholder="$t('api_test.environment.select_environment')"
|
||||
style="margin-top: 8px;width: 200px;" size="small">
|
||||
<el-option v-for="(environment, index) in pe.envs" :key="index"
|
||||
<div v-for="pe in data" :key="pe.id" style="margin-left: 20px">
|
||||
<el-select
|
||||
v-model="pe['selectEnv']"
|
||||
filterable
|
||||
:placeholder="$t('api_test.environment.select_environment')"
|
||||
style="margin-top: 8px; width: 200px"
|
||||
size="small"
|
||||
>
|
||||
<el-option
|
||||
v-for="(environment, index) in pe.envs"
|
||||
:key="index"
|
||||
:label="environment.name"
|
||||
:value="environment.id"/>
|
||||
<el-button class="ms-scenario-button" v-if="isShowConfirmButton(pe.id)" size="mini" type="primary"
|
||||
@click="openEnvironmentConfig(pe.id)">
|
||||
{{ $t('api_test.environment.environment_config') }}
|
||||
:value="environment.id"
|
||||
/>
|
||||
<el-button
|
||||
class="ms-scenario-button"
|
||||
v-if="isShowConfirmButton(pe.id)"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="openEnvironmentConfig(pe.id)"
|
||||
>
|
||||
{{ $t("api_test.environment.environment_config") }}
|
||||
</el-button>
|
||||
<template v-slot:empty>
|
||||
<!--这里只做没有可搜索内容时使用,否则如果没有符合搜索条件的,也会显示该项,与上面的btn重复显示 -->
|
||||
<div v-if="isShowConfirmButton(pe.id) && pe.envs.length===0" class="empty-environment">
|
||||
<el-button class="ms-scenario-button" size="mini" type="primary" @click="openEnvironmentConfig(pe.id)">
|
||||
{{ $t('api_test.environment.environment_config') }}
|
||||
<div
|
||||
v-if="isShowConfirmButton(pe.id) && pe.envs.length === 0"
|
||||
class="empty-environment"
|
||||
>
|
||||
<el-button
|
||||
class="ms-scenario-button"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="openEnvironmentConfig(pe.id)"
|
||||
>
|
||||
{{ $t("api_test.environment.environment_config") }}
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -24,11 +45,19 @@
|
|||
</span>
|
||||
</div>
|
||||
|
||||
<el-button type="primary" @click="handleConfirm" size="small" class="env-confirm">{{ $t('commons.confirm') }}
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleConfirm"
|
||||
size="small"
|
||||
class="env-confirm"
|
||||
>{{ $t("commons.confirm") }}
|
||||
</el-button>
|
||||
|
||||
<!-- 环境配置 -->
|
||||
<api-environment-config ref="environmentConfig" @close="environmentConfigClose"/>
|
||||
<api-environment-config
|
||||
ref="environmentConfig"
|
||||
@close="environmentConfigClose"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
@ -41,7 +70,7 @@ import {getEnvironmentByProjectId} from "@/api/remote/api/api-environment";
|
|||
export default {
|
||||
name: "EnvSelect",
|
||||
components: {
|
||||
ApiEnvironmentConfig
|
||||
ApiEnvironmentConfig,
|
||||
},
|
||||
props: {
|
||||
envMap: Map,
|
||||
|
@ -50,9 +79,9 @@ export default {
|
|||
type: Boolean,
|
||||
default() {
|
||||
return true;
|
||||
}
|
||||
},
|
||||
projectList: Array
|
||||
},
|
||||
projectList: Array,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
@ -87,26 +116,26 @@ export default {
|
|||
this.getUserPermissionProjectIds();
|
||||
}
|
||||
|
||||
this.projectIds.forEach(id => {
|
||||
const project = this.projectList.find(p => p.id === id);
|
||||
this.projectIds.forEach((id) => {
|
||||
const project = this.projectList.find((p) => p.id === id);
|
||||
if (project) {
|
||||
let item = { id: id, envs: [], selectEnv: "" };
|
||||
this.data.push(item);
|
||||
this.result.loading = true;
|
||||
getEnvironmentByProjectId(id)
|
||||
.then(res => {
|
||||
getEnvironmentByProjectId(id).then((res) => {
|
||||
this.result.loading = false;
|
||||
let envs = res.data;
|
||||
envs.forEach(environment => {
|
||||
envs.forEach((environment) => {
|
||||
parseEnvironment(environment);
|
||||
});
|
||||
// 固定环境列表渲染顺序
|
||||
let temp = this.data.find(dt => dt.id === id);
|
||||
let temp = this.data.find((dt) => dt.id === id);
|
||||
temp.envs = envs;
|
||||
if (this.envMap && this.envMap.size > 0) {
|
||||
let envId = this.envMap.get(id);
|
||||
// 选中环境是否存在
|
||||
temp.selectEnv = envs.filter(e => e.id === envId).length === 0 ? null : envId;
|
||||
temp.selectEnv =
|
||||
envs.filter((e) => e.id === envId).length === 0 ? null : envId;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -119,12 +148,12 @@ export default {
|
|||
}
|
||||
},
|
||||
getProjectName(id) {
|
||||
const project = this.projectList.find(p => p.id === id);
|
||||
const project = this.projectList.find((p) => p.id === id);
|
||||
return project ? project.name : "";
|
||||
},
|
||||
openEnvironmentConfig(projectId) {
|
||||
if (!projectId) {
|
||||
this.$error(this.$t('api_test.select_project'));
|
||||
this.$error(this.$t("api_test.select_project"));
|
||||
return;
|
||||
}
|
||||
this.$refs.environmentConfig.open(projectId);
|
||||
|
@ -132,25 +161,30 @@ export default {
|
|||
handleConfirm() {
|
||||
let map = new Map();
|
||||
let sign = true;
|
||||
this.data.forEach(dt => {
|
||||
let projectEnvDesc = {};
|
||||
this.data.forEach((dt) => {
|
||||
if (!dt.selectEnv) {
|
||||
sign = false;
|
||||
return;
|
||||
}
|
||||
map.set(dt.id, dt.selectEnv);
|
||||
let filteredEnv = dt.envs.filter((e) => e.id === dt.selectEnv);
|
||||
if (filteredEnv.length > 0) {
|
||||
projectEnvDesc[this.getProjectName(dt.id)] = filteredEnv[0].name;
|
||||
}
|
||||
});
|
||||
if (!sign) {
|
||||
this.$warning("请为当前场景选择一个运行环境!");
|
||||
return;
|
||||
}
|
||||
this.$emit('setProjectEnvMap', map);
|
||||
this.$emit('close');
|
||||
this.$emit("setProjectEnvMap", map, projectEnvDesc);
|
||||
this.$emit("close");
|
||||
},
|
||||
checkEnv() {
|
||||
let sign = true;
|
||||
this.isFullUrl = true;
|
||||
if (this.data.length > 0) {
|
||||
this.data.forEach(dt => {
|
||||
this.data.forEach((dt) => {
|
||||
if (!dt.selectEnv) {
|
||||
sign = false;
|
||||
return false;
|
||||
|
@ -159,7 +193,7 @@ export default {
|
|||
} else {
|
||||
// 如果有环境,检查环境
|
||||
if (this.envMap && this.envMap.size > 0) {
|
||||
this.projectIds.forEach(id => {
|
||||
this.projectIds.forEach((id) => {
|
||||
if (!this.envMap.get(id)) {
|
||||
sign = false;
|
||||
return false;
|
||||
|
@ -180,12 +214,11 @@ export default {
|
|||
// todo 关闭处理
|
||||
},
|
||||
getUserPermissionProjectIds() {
|
||||
getOwnerProjectIds()
|
||||
.then(res => {
|
||||
getOwnerProjectIds().then((res) => {
|
||||
this.permissionProjectIds = res.data;
|
||||
});
|
||||
},
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in New Issue