test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(接口测试): 修复接口环境显示变量问题 

--bug=1034069 --user=王孝刚 【接口测试】api、case、场景自定义请求通过后置脚本设置环境变量-执行成功第一次查看环境变量未显示 https://www.tapd.cn/55049933/s/1448742
This commit is contained in:
wxg0103 2023-12-27 15:47:06 +08:00 committed by Craftsman
parent 08347de201
commit 7ab9c9d628
1 changed files with 238 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

474
framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
View File

@ -3,51 +3,52 @@
<div> <div>
<div style="padding-bottom: 10px; float: left"> <div style="padding-bottom: 10px; float: left">
<el-input <el-input
:placeholder="$t('api_test.search_by_variables')" :placeholder="$t('api_test.search_by_variables')"
size="mini" size="mini"
v-model="selectVariable" v-model="selectVariable"
@change="filter" @change="filter"
@keyup.enter="filter" @keyup.enter="filter"
> >
</el-input> </el-input>
</div> </div>
<div style="padding-bottom: 10px; float: right"> <div style="padding-bottom: 10px; float: right">
<ms-table-button <ms-table-button
v-permission="['PROJECT_ENVIRONMENT:READ+IMPORT']" v-permission="['PROJECT_ENVIRONMENT:READ+IMPORT']"
icon="el-icon-box" icon="el-icon-box"
:content="$t('commons.import')" :content="$t('commons.import')"
@click="importJSON" @click="importJSON"
/> />
<el-dropdown <el-dropdown
@command="handleExportCommand" @command="handleExportCommand"
class="scenario-ext-btn" class="scenario-ext-btn"
trigger="hover" trigger="hover"
v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']" v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']"
> >
<ms-table-button <ms-table-button
style="margin-left: 10px" style="margin-left: 10px"
icon="el-icon-box" icon="el-icon-box"
:content="$t('commons.export')" :content="$t('commons.export')"
/> />
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item command="exportApi">{{ <el-dropdown-item command="exportApi">{{
$t("envrionment.export_variable_tip") $t("envrionment.export_variable_tip")
}}</el-dropdown-item> }}
</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
<el-link <el-link
style="margin-left: 10px" style="margin-left: 10px"
@click="batchAdd" @click="batchAdd"
type="primary" type="primary"
:disabled="isReadOnly" :disabled="isReadOnly"
> >
{{ $t("commons.batch_add") }} {{ $t("commons.batch_add") }}
</el-link> </el-link>
</div> </div>
</div> </div>
<div <div
style=" style="
border: 1px #dcdfe6 solid; border: 1px #dcdfe6 solid;
min-height: 300px; min-height: 300px;
border-radius: 4px; border-radius: 4px;
@ -57,137 +58,137 @@
" "
> >
<ms-table <ms-table
v-loading="loading" v-loading="loading"
row-key="id" row-key="id"
:data="pageData" :data="pageData"
:screen-height="screenHeight" :screen-height="screenHeight"
:batch-operators="batchButtons" :batch-operators="batchButtons"
:remember-order="true" :remember-order="true"
:highlightCurrentRow="true" :highlightCurrentRow="true"
:page-size="pageSize" :page-size="pageSize"
:total="total" :total="total"
enableSelection enableSelection
:condition="condition" :condition="condition"
@filter="filter" @filter="filter"
@refresh="onChange" @refresh="onChange"
ref="variableTable" ref="variableTable"
> >
<ms-table-column prop="num" sortable label="ID" min-width="60" /> <ms-table-column prop="num" sortable label="ID" min-width="60"/>
<ms-table-column <ms-table-column
prop="scope" prop="scope"
sortable sortable
:label="$t('commons.scope')" :label="$t('commons.scope')"
:filters="scopeTypeFilters" :filters="scopeTypeFilters"
min-width="120" min-width="120"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-select <el-select
v-model="scope.row.scope" v-model="scope.row.scope"
:placeholder="$t('commons.please_select')" :placeholder="$t('commons.please_select')"
size="mini" size="mini"
@change="changeScope($event, scope.row)" @change="changeScope($event, scope.row)"
> >
<el-option <el-option
v-for="item in scopeTypeFilters" v-for="item in scopeTypeFilters"
:key="item.value" :key="item.value"
:label="item.text" :label="item.text"
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="name" prop="name"
:label="$t('api_test.variable_name')" :label="$t('api_test.variable_name')"
min-width="200" min-width="200"
sortable sortable
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-model="scope.row.name" v-model="scope.row.name"
size="mini" size="mini"
maxlength="200" maxlength="200"
:placeholder="$t('api_test.variable_name')" :placeholder="$t('api_test.variable_name')"
show-word-limit show-word-limit
@change="change(scope.row)" @change="change(scope.row)"
/> />
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="type" prop="type"
:label="$t('test_track.case.type')" :label="$t('test_track.case.type')"
min-width="140" min-width="140"
sortable sortable
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-select <el-select
v-model="scope.row.type" v-model="scope.row.type"
v-if="scope.row.scope == 'api'" v-if="scope.row.scope == 'api'"
:placeholder="$t('commons.please_select')" :placeholder="$t('commons.please_select')"
size="mini" size="mini"
@change="changeType($event, scope.row)" @change="changeType($event, scope.row)"
> >
<el-option <el-option
v-for="item in typeSelectOptions" v-for="item in typeSelectOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
<el-select <el-select
v-else v-else
v-model="scope.row.type" v-model="scope.row.type"
:placeholder="$t('commons.please_select')" :placeholder="$t('commons.please_select')"
size="mini" size="mini"
@change="changeUiType($event, scope.row)" @change="changeUiType($event, scope.row)"
> >
<el-option <el-option
v-for="item in uiTypeSelectOptions" v-for="item in uiTypeSelectOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
/> />
</el-select> </el-select>
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="value" prop="value"
:label="$t('api_test.value')" :label="$t('api_test.value')"
min-width="200px" min-width="200px"
sortable sortable
show-overflow-tooltip show-overflow-tooltip
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-model="scope.row.value" v-model="scope.row.value"
size="mini" size="mini"
v-if="scope.row.type !== 'CSV'" v-if="scope.row.type !== 'CSV'"
:placeholder="valueText(scope.row)" :placeholder="valueText(scope.row)"
@change="changeVariableVal(scope.row)" @change="changeVariableVal(scope.row)"
:disabled=" :disabled="
scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM' scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'
" "
/> />
<csv-file-upload <csv-file-upload
:parameter="scope.row" :parameter="scope.row"
v-if="scope.row.type === 'CSV'" v-if="scope.row.type === 'CSV'"
/> />
</template> </template>
</ms-table-column> </ms-table-column>
<ms-table-column <ms-table-column
prop="description" prop="description"
:label="$t('commons.remark')" :label="$t('commons.remark')"
min-width="160" min-width="160"
sortable sortable
> >
<template slot-scope="scope"> <template slot-scope="scope">
<el-input <el-input
v-model="scope.row.description" v-model="scope.row.description"
@change="descriptionChange(scope.row)" @change="descriptionChange(scope.row)"
size="mini" size="mini"
/> />
</template> </template>
</ms-table-column> </ms-table-column>
@ -196,56 +197,56 @@
<template v-slot:default="scope"> <template v-slot:default="scope">
<span> <span>
<el-switch <el-switch
v-model="scope.row.enable" v-model="scope.row.enable"
size="mini" size="mini"
@change="enableChange(scope.row)" @change="enableChange(scope.row)"
/> />
<el-button <el-button
icon="el-icon-delete" icon="el-icon-delete"
type="danger" type="danger"
circle circle
size="mini" size="mini"
style="margin-left: 10px" style="margin-left: 10px"
@click="remove(scope.row)" @click="remove(scope.row)"
v-if="isDisable(scope.row)" v-if="isDisable(scope.row)"
/> />
<el-button <el-button
v-if=" v-if="
(!scope.row.scope || scope.row.scope == 'api') && (!scope.row.scope || scope.row.scope == 'api') &&
scope.row.type !== 'LIST' scope.row.type !== 'LIST'
" "
icon="el-icon-setting" icon="el-icon-setting"
circle circle
size="mini" size="mini"
style="margin-left: 10px" style="margin-left: 10px"
@click="openSetting(scope.row)" @click="openSetting(scope.row)"
@blur="change" @blur="change"
/> />
</span> </span>
</template> </template>
</ms-table-column> </ms-table-column>
</ms-table> </ms-table>
<ms-table-pagination <ms-table-pagination
:change="queryPage" :change="queryPage"
:current-page.sync="currentPage" :current-page.sync="currentPage"
:page-size.sync="pageSize" :page-size.sync="pageSize"
:total="total" :total="total"
/> />
</div> </div>
<batch-add-parameter @batchSave="batchSave" ref="batchAdd" /> <batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
<api-variable-setting <api-variable-setting
ref="apiVariableSetting" ref="apiVariableSetting"
@changeData="change" @changeData="change"
></api-variable-setting> ></api-variable-setting>
<variable-import <variable-import
ref="variableImport" ref="variableImport"
@mergeData="mergeData" @mergeData="mergeData"
></variable-import> ></variable-import>
</div> </div>
</template> </template>
<script> <script>
import { KeyValue } from "../../../model/EnvTestModel"; import {KeyValue} from "../../../model/EnvTestModel";
import MsApiVariableInput from "./ApiVariableInput"; import MsApiVariableInput from "./ApiVariableInput";
import BatchAddParameter from "./BatchAddParameter"; import BatchAddParameter from "./BatchAddParameter";
import MsTableButton from "../../MsTableButton"; import MsTableButton from "../../MsTableButton";
@ -253,9 +254,9 @@ import MsTable from "../../table/MsTable";
import MsTableColumn from "../../table/MsTableColumn"; import MsTableColumn from "../../table/MsTableColumn";
import ApiVariableSetting from "./ApiVariableSetting"; import ApiVariableSetting from "./ApiVariableSetting";
import CsvFileUpload from "./variable/CsvFileUpload"; import CsvFileUpload from "./variable/CsvFileUpload";
import { downloadFile, getUUID, operationConfirm } from "../../../utils"; import {downloadFile, getUUID, operationConfirm} from "../../../utils";
import VariableImport from "./variable/VariableImport"; import VariableImport from "./variable/VariableImport";
import { forEach } from "lodash-es"; import {forEach} from "lodash-es";
import MsTablePagination from "../../pagination/TablePagination"; import MsTablePagination from "../../pagination/TablePagination";
export default { export default {
@ -301,17 +302,17 @@ export default {
}, },
], ],
typeSelectOptions: [ typeSelectOptions: [
{ value: "CONSTANT", label: this.$t("api_test.automation.constant") }, {value: "CONSTANT", label: this.$t("api_test.automation.constant")},
{ value: "LIST", label: this.$t("test_track.case.list") }, {value: "LIST", label: this.$t("test_track.case.list")},
{ value: "CSV", label: "CSV" }, {value: "CSV", label: "CSV"},
{ value: "COUNTER", label: this.$t("api_test.automation.counter") }, {value: "COUNTER", label: this.$t("api_test.automation.counter")},
{ value: "RANDOM", label: this.$t("api_test.automation.random") }, {value: "RANDOM", label: this.$t("api_test.automation.random")},
], ],
uiTypeSelectOptions: [ uiTypeSelectOptions: [
{ value: "STRING", label: this.$t("api_test.automation.string") }, {value: "STRING", label: this.$t("api_test.automation.string")},
{ value: "ARRAY", label: this.$t("api_test.automation.array") }, {value: "ARRAY", label: this.$t("api_test.automation.array")},
{ value: "JSON", label: this.$t("api_test.automation.json") }, {value: "JSON", label: this.$t("api_test.automation.json")},
{ value: "NUMBER", label: this.$t("api_test.automation.number") }, {value: "NUMBER", label: this.$t("api_test.automation.number")},
], ],
pageData: [], pageData: [],
selectVariable: "", selectVariable: "",
@ -319,8 +320,8 @@ export default {
allData: [], allData: [],
lastPage: 1, lastPage: 1,
scopeTypeFilters: [ scopeTypeFilters: [
{ text: this.$t("commons.api"), value: "api" }, {text: this.$t("commons.api"), value: "api"},
{ text: this.$t("commons.ui_test"), value: "ui" }, {text: this.$t("commons.ui_test"), value: "ui"},
], ],
condition: { condition: {
selectAll: false, selectAll: false,
@ -331,7 +332,7 @@ export default {
watch: { watch: {
items: { items: {
handler(v) { handler(v) {
this.sortParameters(); this.initData(v);
}, },
immediate: true, immediate: true,
deep: true, deep: true,
@ -378,7 +379,7 @@ export default {
repeatKey = item.name; repeatKey = item.name;
} else { } else {
itemNames.add(item.name); itemNames.add(item.name);
if(row && item.id === row.id) { if (row && item.id === row.id) {
item.name = row.name; item.name = row.name;
} }
} }
@ -393,9 +394,9 @@ export default {
// 处理重复的name // 处理重复的name
if (repeatKey !== "") { if (repeatKey !== "") {
this.$warning( this.$warning(
`${this.$t( `${this.$t(
"api_test.environment.common_config" "api_test.environment.common_config"
)}【${repeatKey}】${this.$t("load_test.param_is_duplicate")}` )}【${repeatKey}】${this.$t("load_test.param_is_duplicate")}`
); );
} }
@ -407,12 +408,12 @@ export default {
// 需要创建新的空行 // 需要创建新的空行
if (isNeedCreate) { if (isNeedCreate) {
this.items.push( this.items.push(
new KeyValue({ new KeyValue({
enable: true, enable: true,
id: getUUID(), id: getUUID(),
type: "CONSTANT", type: "CONSTANT",
scope: "api", scope: "api",
}) })
); );
this.currentPage = Math.ceil(this.items.length / this.pageSize); this.currentPage = Math.ceil(this.items.length / this.pageSize);
} }
@ -426,7 +427,7 @@ export default {
this.$emit("change", this.items); this.$emit("change", this.items);
}, },
// 接口/UI change // 接口/UI change
changeScope: function(value,row) { changeScope: function (value, row) {
if (value === "ui") { if (value === "ui") {
row.type = "STRING"; row.type = "STRING";
} else { } else {
@ -442,10 +443,10 @@ export default {
changeType(value, data) { changeType(value, data) {
data.value = '' data.value = ''
const notDelimiters = !data.delimiter || const notDelimiters = !data.delimiter ||
(!data.files && data.files.length === 0) || (!data.files && data.files.length === 0) ||
!data.quotedData !data.quotedData
if ( if (
notDelimiters notDelimiters
) { ) {
data.delimiter = ","; data.delimiter = ",";
data.files = []; data.files = [];
@ -455,7 +456,7 @@ export default {
if (item.id === data.id) { if (item.id === data.id) {
item.type = value; item.type = value;
item.value = data.value; item.value = data.value;
if(notDelimiters) { if (notDelimiters) {
item.delimiter = data.delimiter; item.delimiter = data.delimiter;
item.files = data.files; item.files = data.files;
item.quotedData = data.quotedData; item.quotedData = data.quotedData;
@ -510,15 +511,15 @@ export default {
}, },
querySearch(queryString, cb) { querySearch(queryString, cb) {
let restaurants = [ let restaurants = [
{ value: "UTF-8" }, {value: "UTF-8"},
{ value: "UTF-16" }, {value: "UTF-16"},
{ value: "GB2312" }, {value: "GB2312"},
{ value: "ISO-8859-15" }, {value: "ISO-8859-15"},
{ value: "US-ASCll" }, {value: "US-ASCll"},
]; ];
let results = queryString let results = queryString
? restaurants.filter(this.createFilter(queryString)) ? restaurants.filter(this.createFilter(queryString))
: restaurants; : restaurants;
// 调用 callback 返回建议列表的数据 // 调用 callback 返回建议列表的数据
cb(results); cb(results);
}, },
@ -544,42 +545,42 @@ export default {
}, },
handleDeleteBatch() { handleDeleteBatch() {
operationConfirm( operationConfirm(
this, this,
this.$t("api_test.environment.variables_delete_info") + " ？", this.$t("api_test.environment.variables_delete_info") + " ？",
() => { () => {
if (this.condition.selectAll) { if (this.condition.selectAll) {
let deleteRows = this.items.filter((item) => { let deleteRows = this.items.filter((item) => {
return this.condition.unSelectIds.indexOf(item.id) < 0; return this.condition.unSelectIds.indexOf(item.id) < 0;
}); });
deleteRows.forEach((deleteRow) => { deleteRows.forEach((deleteRow) => {
const index = this.items.findIndex((d) => d.id === deleteRow.id); const index = this.items.findIndex((d) => d.id === deleteRow.id);
this.items.splice(index, 1); this.items.splice(index, 1);
}); });
this.allData = this.items; this.allData = this.items;
this.currentPage = 1; this.currentPage = 1;
this.queryPage(); this.queryPage();
} else { } else {
let ids = this.$refs.variableTable.selectRows; let ids = this.$refs.variableTable.selectRows;
ids.forEach((row) => { ids.forEach((row) => {
if (row.id) { if (row.id) {
const index = this.pageData.findIndex((d) => d.id === row.id); const index = this.pageData.findIndex((d) => d.id === row.id);
const allIndex = this.allData.findIndex((d) => d.id === row.id); const allIndex = this.allData.findIndex((d) => d.id === row.id);
if (index !== this.pageData.length - 1) { if (index !== this.pageData.length - 1) {
this.pageData.splice(index, 1); this.pageData.splice(index, 1);
}
if (allIndex !== this.allData.length - 1) {
this.allData.splice(allIndex, 1);
}
} }
if (allIndex !== this.allData.length - 1) { });
this.allData.splice(allIndex, 1); }
} this.sortParameters();
} this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
this.pageData.forEach((item) => {
item.showMore = false;
}); });
} }
this.sortParameters();
this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
this.pageData.forEach((item) => {
item.showMore = false;
});
}
); );
}, },
filter() { filter() {
@ -594,9 +595,9 @@ export default {
// filter by scope // filter by scope
let scopeFilterData = []; let scopeFilterData = [];
if ( if (
!this.condition.filters || !this.condition.filters ||
!this.condition.filters.scope || !this.condition.filters.scope ||
this.condition.filters.scope.length === 0 this.condition.filters.scope.length === 0
) { ) {
// 重置或者清空 // 重置或者清空
forEach(this.items, (item) => { forEach(this.items, (item) => {
@ -627,7 +628,7 @@ export default {
scopeFilterData.forEach((filterData) => { scopeFilterData.forEach((filterData) => {
if (keyword && keyword !== "" && filterData.name) { if (keyword && keyword !== "" && filterData.name) {
if ( if (
filterData.name.toLowerCase().indexOf(keyword.toLowerCase()) === -1 filterData.name.toLowerCase().indexOf(keyword.toLowerCase()) === -1
) { ) {
filterData.hidden = true; filterData.hidden = true;
} else { } else {
@ -658,18 +659,18 @@ export default {
let values = item.substr(line[0].length + 1).trim(); let values = item.substr(line[0].length + 1).trim();
let required = false; let required = false;
keyValues.push( keyValues.push(
new KeyValue({ new KeyValue({
scope: "api", scope: "api",
name: line[0], name: line[0],
required: required, required: required,
value: values, value: values,
type: "CONSTANT", type: "CONSTANT",
valid: false, valid: false,
file: false, file: false,
encode: true, encode: true,
enable: true, enable: true,
description: undefined, description: undefined,
}) })
); );
} }
}); });
@ -691,9 +692,9 @@ export default {
}); });
if (isAdd) { if (isAdd) {
this.items.splice( this.items.splice(
this.pageData.indexOf((i) => !i.name), this.pageData.indexOf((i) => !i.name),
0, 0,
keyValue keyValue
); );
} }
this.allData = this.items; this.allData = this.items;
@ -736,8 +737,8 @@ export default {
return; return;
} }
downloadFile( downloadFile(
"MS_" + variablesJson.length + "_Environments_variables.json", "MS_" + variablesJson.length + "_Environments_variables.json",
JSON.stringify(variablesJson) JSON.stringify(variablesJson)
); );
}, },
importJSON() { importJSON() {
@ -749,7 +750,7 @@ export default {
importData.enable = true; importData.enable = true;
importData.showMore = false; importData.showMore = false;
let sameNameIndex = this.items.findIndex( let sameNameIndex = this.items.findIndex(
(d) => d.name === importData.name (d) => d.name === importData.name
); );
if (sameNameIndex !== -1) { if (sameNameIndex !== -1) {
if (modeId === "fullCoverage") { if (modeId === "fullCoverage") {
@ -768,23 +769,24 @@ export default {
handleExportCommand(command) { handleExportCommand(command) {
this.exportJSON(); this.exportJSON();
}, },
}, initData(v) {
created() { if (v.length === 0) {
if (this.items.length === 0) { v.push(new KeyValue({enable: true, scope: "api"}));
this.items.push(new KeyValue({ enable: true, scope: "api" })); } else {
} else { //历史数据默认是 api 应用场景
//历史数据默认是 api 应用场景 forEach(v, (item) => {
forEach(this.items, (item) => { delete item.hidden;
delete item.hidden; if (!item.scope) {
if (!item.scope) { this.$set(item, "scope", "api");
this.$set(item, "scope", "api"); }
} });
}); this.allData = v;
this.allData = this.items; this.sortParameters();
this.sortParameters(); this.queryPage();
this.queryPage(); }
} }
}, },
}; };
</script> </script>