fix(环境管理): 修复环境更新或清除后选中数据无法回显问题 #1005471

--bug=1005471 --user=赵勇 【环境配置】选中环境... https://www.tapd.cn/55049933/s/1030097
This commit is contained in:
fit2-zhao 2021-07-28 14:19:53 +08:00 committed by fit2-zhao
parent 1ffbee6435
commit 861ddfec53
1 changed files with 285 additions and 283 deletions

View File

@ -3,7 +3,7 @@
<el-form :model="condition" :rules="rules" ref="httpConfig" class="ms-el-form-item__content" :disabled="isReadOnly"> <el-form :model="condition" :rules="rules" ref="httpConfig" class="ms-el-form-item__content" :disabled="isReadOnly">
<div class="ms-border"> <div class="ms-border">
<el-form-item prop="socket"> <el-form-item prop="socket">
<span class="ms-env-span">{{$t('api_test.environment.socket')}}</span> <span class="ms-env-span">{{ $t('api_test.environment.socket') }}</span>
<el-input v-model="condition.socket" style="width: 80%" :placeholder="$t('api_test.request.url_description')" clearable size="small"> <el-input v-model="condition.socket" style="width: 80%" :placeholder="$t('api_test.request.url_description')" clearable size="small">
<template slot="prepend"> <template slot="prepend">
<el-select v-model="condition.protocol" class="request-protocol-select" size="small"> <el-select v-model="condition.protocol" class="request-protocol-select" size="small">
@ -14,11 +14,11 @@
</el-input> </el-input>
</el-form-item> </el-form-item>
<el-form-item prop="enable"> <el-form-item prop="enable">
<span class="ms-env-span">{{$t('api_test.environment.condition_enable')}}</span> <span class="ms-env-span">{{ $t('api_test.environment.condition_enable') }}</span>
<el-radio-group v-model="condition.type" @change="typeChange"> <el-radio-group v-model="condition.type" @change="typeChange">
<el-radio label="NONE">{{ $t('api_test.definition.document.data_set.none') }}</el-radio> <el-radio label="NONE">{{ $t('api_test.definition.document.data_set.none') }}</el-radio>
<el-radio label="MODULE">{{$t('test_track.module.module')}}</el-radio> <el-radio label="MODULE">{{ $t('test_track.module.module') }}</el-radio>
<el-radio label="PATH">{{$t('api_test.definition.api_path')}}</el-radio> <el-radio label="PATH">{{ $t('api_test.definition.api_path') }}</el-radio>
</el-radio-group> </el-radio-group>
<div v-if="condition.type === 'MODULE'" style="margin-top: 6px"> <div v-if="condition.type === 'MODULE'" style="margin-top: 6px">
<ms-select-tree size="small" :data="moduleOptions" :default-key="condition.ids" @getValue="setModule" :obj="moduleObj" clearable checkStrictly multiple v-if="!loading"/> <ms-select-tree size="small" :data="moduleOptions" :default-key="condition.ids" @getValue="setModule" :obj="moduleObj" clearable checkStrictly multiple v-if="!loading"/>
@ -34,32 +34,32 @@
</el-input> </el-input>
</div> </div>
<p>{{$t('api_test.request.headers')}}</p> <p>{{ $t('api_test.request.headers') }}</p>
<ms-api-key-value :items="condition.headers" :isShowEnable="true" :suggestions="headerSuggestions"/> <ms-api-key-value :items="condition.headers" :isShowEnable="true" :suggestions="headerSuggestions"/>
<div style="margin-top: 20px"> <div style="margin-top: 20px">
<el-button v-if="!condition.id" type="primary" style="float: right" size="mini" @click="add">{{$t('commons.add')}}</el-button> <el-button v-if="!condition.id" type="primary" style="float: right" size="mini" @click="add">{{ $t('commons.add') }}</el-button>
<div v-else> <div v-else>
<el-button type="primary" style="float: right;margin-left: 10px" size="mini" @click="clear">{{$t('commons.clear')}}</el-button> <el-button type="primary" style="float: right;margin-left: 10px" size="mini" @click="clear">{{ $t('commons.clear') }}</el-button>
<el-button type="primary" style="float: right" size="mini" @click="update">{{$t('commons.update')}}</el-button> <el-button type="primary" style="float: right" size="mini" @click="update">{{ $t('commons.update') }}</el-button>
</div> </div>
</div> </div>
</el-form-item> </el-form-item>
</div> </div>
<div class="ms-border"> <div class="ms-border">
<el-table :data="httpConfig.conditions" highlight-current-row @current-change="selectRow"> <el-table :data="httpConfig.conditions" highlight-current-row @current-change="selectRow" ref="envTable">
<el-table-column prop="socket" :label="$t('load_test.domain')" show-overflow-tooltip width="180"> <el-table-column prop="socket" :label="$t('load_test.domain')" show-overflow-tooltip width="180">
<template v-slot:default="{row}"> <template v-slot:default="{row}">
{{getUrl(row)}} {{ getUrl(row) }}
</template> </template>
</el-table-column> </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}"> <template v-slot:default="{row}">
{{getName(row)}} {{ getName(row) }}
</template> </template>
</el-table-column> </el-table-column>
<el-table-column prop="details" show-overflow-tooltip min-width="120px" :label="$t('api_test.value')"> <el-table-column prop="details" show-overflow-tooltip min-width="120px" :label="$t('api_test.value')">
<template v-slot:default="{row}"> <template v-slot:default="{row}">
{{getDetails(row)}} {{ getDetails(row) }}
</template> </template>
</el-table-column> </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')">
@ -83,16 +83,16 @@
</template> </template>
<script> <script>
import {HttpConfig} from "../../model/EnvironmentModel"; import {HttpConfig} from "../../model/EnvironmentModel";
import MsApiKeyValue from "../ApiKeyValue"; import MsApiKeyValue from "../ApiKeyValue";
import {REQUEST_HEADERS} from "@/common/js/constants"; import {REQUEST_HEADERS} from "@/common/js/constants";
import MsSelectTree from "../../../../common/select-tree/SelectTree"; import MsSelectTree from "../../../../common/select-tree/SelectTree";
import MsTableOperatorButton from "@/business/components/common/components/MsTableOperatorButton"; import MsTableOperatorButton from "@/business/components/common/components/MsTableOperatorButton";
import {getUUID} from "@/common/js/utils"; import {getUUID} from "@/common/js/utils";
import {KeyValue} from "../../../definition/model/ApiTestModel"; import {KeyValue} from "../../../definition/model/ApiTestModel";
import Vue from "vue"; import Vue from "vue";
export default { export default {
name: "MsEnvironmentHttpConfig", name: "MsEnvironmentHttpConfig",
components: {MsApiKeyValue, MsSelectTree, MsTableOperatorButton}, components: {MsApiKeyValue, MsSelectTree, MsTableOperatorButton},
props: { props: {
@ -267,9 +267,11 @@
this.condition = {type: "NONE", details: [new KeyValue({name: "", value: "contains"})], protocol: "http", socket: "", domain: "", headers: [new KeyValue()]}; this.condition = {type: "NONE", details: [new KeyValue({name: "", value: "contains"})], protocol: "http", socket: "", domain: "", headers: [new KeyValue()]};
this.reload(); this.reload();
} }
this.$refs.envTable.setCurrentRow(-1);
}, },
clear() { clear() {
this.condition = {type: "NONE", details: [new KeyValue({name: "", value: "contains"})], protocol: "http", socket: "", domain: "", headers: [new KeyValue()]}; this.condition = {type: "NONE", details: [new KeyValue({name: "", value: "contains"})], protocol: "http", socket: "", domain: "", headers: [new KeyValue()]};
this.$refs.envTable.setCurrentRow(-1);
}, },
reload() { reload() {
this.loading = true this.loading = true
@ -281,7 +283,7 @@
let index = 1; let index = 1;
this.httpConfig.conditions.forEach(item => { this.httpConfig.conditions.forEach(item => {
if (item.type === "NONE") { if (item.type === "NONE") {
if(!id || id !== item.id) { if (!id || id !== item.id) {
index++; index++;
} }
} }
@ -352,23 +354,23 @@
return isValidate; return isValidate;
}, },
}, },
}; };
</script> </script>
<style scoped> <style scoped>
.request-protocol-select { .request-protocol-select {
width: 90px; width: 90px;
} }
.ms-env-span { .ms-env-span {
margin-right: 10px; margin-right: 10px;
} }
/deep/ .el-form-item { /deep/ .el-form-item {
margin-bottom: 15px; margin-bottom: 15px;
} }
.ms-el-form-item__content >>> .el-form-item__content { .ms-el-form-item__content >>> .el-form-item__content {
line-height: 20px; line-height: 20px;
} }
</style> </style>