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

View File

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