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

fix(接口测试): 环境配置-通用配置相关问题修复

This commit is contained in:
RubyLiu 2023-12-19 17:57:25 +08:00 committed by 刘瑞斌
parent ab8607555f
commit d065f461f3
1 changed files with 306 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,7 +7,8 @@
size="mini"
v-model="selectVariable"
@change="filter"
@keyup.enter="filter">
@keyup.enter="filter"
>
</el-input>
</div>
<div style="padding-bottom: 10px; float: right">
@ -15,20 +16,33 @@
v-permission="['PROJECT_ENVIRONMENT:READ+IMPORT']"
icon="el-icon-box"
:content="$t('commons.import')"
@click="importJSON"/>
@click="importJSON"
/>
<el-dropdown
@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')"/>
v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']"
>
<ms-table-button
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>
<el-dropdown-item command="exportApi">{{
$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">
{{ $t('commons.batch_add') }}
<el-link
style="margin-left: 10px"
@click="batchAdd"
type="primary"
:disabled="isReadOnly"
>
{{ $t("commons.batch_add") }}
</el-link>
</div>
</div>
@ -40,7 +54,8 @@
width: 99%;
margin-top: 10px;
clear: both;
">
"
>
<ms-table
v-loading="loading"
row-key="id"
@ -55,26 +70,39 @@
:condition="condition"
@filter="filter"
@refresh="onChange"
ref="variableTable">
<ms-table-column prop="num" sortable label="ID" min-width="60"/>
ref="variableTable"
>
<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">
min-width="120"
>
<template slot-scope="scope">
<el-select
v-model="scope.row.scope"
:placeholder="$t('commons.please_select')"
size="mini"
@change="changeType(scope.row)">
<el-option v-for="item in scopeTypeFilters" :key="item.value" :label="item.text" :value="item.value"/>
@change="changeType($event, scope.row)"
>
<el-option
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>
<ms-table-column
prop="name"
:label="$t('api_test.variable_name')"
min-width="200"
sortable
>
<template slot-scope="scope">
<el-input
v-model="scope.row.name"
@ -82,31 +110,55 @@
maxlength="200"
:placeholder="$t('api_test.variable_name')"
show-word-limit
@change="change"/>
@change="change"
/>
</template>
</ms-table-column>
<ms-table-column prop="type" :label="$t('test_track.case.type')" min-width="140" sortable>
<ms-table-column
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 || scope.row.scope == 'api'"
:placeholder="$t('commons.please_select')"
size="mini"
@change="changeType(scope.row)">
<el-option v-for="item in typeSelectOptions" :key="item.value" :label="item.label" :value="item.value"/>
@change="changeType($event, scope.row)"
>
<el-option
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">
<el-select
v-else
v-model="scope.row.type"
:placeholder="$t('commons.please_select')"
size="mini"
>
<el-option
v-for="item in uiTypeSelectOptions"
:key="item.value"
:label="item.label"
:value="item.value"/>
:value="item.value"
/>
</el-select>
</template>
</ms-table-column>
<el-table-column prop="value" :label="$t('api_test.value')" min-width="200px" sortable show-overflow-tooltip>
<ms-table-column
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"
@ -114,20 +166,39 @@
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'"/>
:disabled="
scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'
"
/>
<csv-file-upload
:parameter="scope.row"
v-if="scope.row.type === 'CSV'"
/>
</template>
</el-table-column>
<ms-table-column prop="description" :label="$t('commons.remark')" min-width="160" sortable>
</ms-table-column>
<ms-table-column
prop="description"
:label="$t('commons.remark')"
min-width="160"
sortable
>
<template slot-scope="scope">
<el-input v-model="scope.row.description" size="mini"/>
<el-input
v-model="scope.row.description"
@change="descriptionChange(scope.row)"
size="mini"
/>
</template>
</ms-table-column>
<ms-table-column :label="$t('commons.operating')" width="150">
<template v-slot:default="scope">
<span>
<el-switch v-model="scope.row.enable" size="mini"/>
<el-switch
v-model="scope.row.enable"
size="mini"
@change="enableChange(scope.row)"
/>
<el-button
icon="el-icon-delete"
type="danger"
@ -135,15 +206,20 @@
size="mini"
style="margin-left: 10px"
@click="remove(scope.row)"
v-if="isDisable(scope.row)"/>
v-if="isDisable(scope.row)"
/>
<el-button
v-if="(!scope.row.scope || scope.row.scope == 'api') && scope.row.type !== 'LIST'"
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"/>
@blur="change"
/>
</span>
</template>
</ms-table-column>
@ -152,30 +228,37 @@
:change="queryPage"
:current-page.sync="currentPage"
:page-size.sync="pageSize"
:total="total"/>
:total="total"
/>
</div>
<batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
<api-variable-setting ref="apiVariableSetting" @changeData="change"></api-variable-setting>
<variable-import ref="variableImport" @mergeData="mergeData"></variable-import>
<batch-add-parameter @batchSave="batchSave" ref="batchAdd" />
<api-variable-setting
ref="apiVariableSetting"
@changeData="change"
></api-variable-setting>
<variable-import
ref="variableImport"
@mergeData="mergeData"
></variable-import>
</div>
</template>
<script>
import {KeyValue} from '../../../model/EnvTestModel';
import MsApiVariableInput from './ApiVariableInput';
import BatchAddParameter from './BatchAddParameter';
import MsTableButton from '../../MsTableButton';
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 VariableImport from './variable/VariableImport';
import {forEach} from 'lodash-es';
import MsTablePagination from '../../pagination/TablePagination';
import { KeyValue } from "../../../model/EnvTestModel";
import MsApiVariableInput from "./ApiVariableInput";
import BatchAddParameter from "./BatchAddParameter";
import MsTableButton from "../../MsTableButton";
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 VariableImport from "./variable/VariableImport";
import { forEach } from "lodash-es";
import MsTablePagination from "../../pagination/TablePagination";
export default {
name: 'MsApiScenarioVariables',
name: "MsApiScenarioVariables",
components: {
BatchAddParameter,
MsApiVariableInput,
@ -209,34 +292,34 @@ export default {
total: 0,
loading: false,
refreshOver: true,
screenHeight: '460px',
screenHeight: "460px",
batchButtons: [
{
name: this.$t('api_test.definition.request.batch_delete'),
name: this.$t("api_test.definition.request.batch_delete"),
handleClick: this.handleDeleteBatch,
},
],
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: '',
selectVariable: "",
editData: {},
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,
@ -281,85 +364,133 @@ export default {
delete item.hashTree;
});
},
// 变量名 change
change: function () {
let isNeedCreate = true;
let removeIndex = -1;
let repeatKey = '';
let repeatKey = "";
const itemNames = new Set();
this.items.forEach((item, index) => {
this.items.forEach((row, rowIndex) => {
if (item.name === row.name && index !== rowIndex) {
// 检查重复的name
if (itemNames.has(item.name)) {
repeatKey = item.name;
} else {
itemNames.add(item.name);
}
});
// 检查空行
if (!item.name && !item.value) {
// 多余的空行
if (index !== this.items.length - 1) {
removeIndex = index;
}
// 没有空行，需要创建空行
removeIndex = index !== this.items.length - 1 ? index : removeIndex;
isNeedCreate = false;
}
});
if (repeatKey !== '') {
// 处理重复的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")}`
);
}
// 移除多余的空行
if (removeIndex !== -1) {
this.items.splice(removeIndex, 1);
}
// 需要创建新的空行
if (isNeedCreate) {
this.items.push(new KeyValue({enable: true, id: getUUID(), type: 'CONSTANT', scope: 'api'}));
this.items.push(
new KeyValue({
enable: true,
id: getUUID(),
type: "CONSTANT",
scope: "api",
})
);
this.currentPage = Math.ceil(this.allData.length / this.pageSize);
}
// 需过滤数据
// 重置并过滤数据
this.allData = [];
this._filter();
this.queryPage();
this.$emit('change', this.items);
},
changeType(data) {
data.value = '';
if (!data.delimiter || (!data.files && data.files.length === 0) || !data.quotedData) {
data.delimiter = ',';
data.files = [];
data.quotedData = 'false';
}
if (!data.scope || data.scope == 'ui') {
data.type = 'STRING';
// 触发变更事件
this.$emit("change", this.items);
},
changeType(value, data) {
data.value = "";
if (
!data.delimiter ||
(!data.files && data.files.length === 0) ||
!data.quotedData
) {
data.delimiter = ",";
data.files = [];
data.quotedData = "false";
}
if (!data.scope || data.scope == "ui") {
data.type = "STRING";
}
this.items.forEach((item) => {
if (item.name === data.name) {
item.scope = value;
item.type = data.type;
item.value = data.value;
}
});
},
changeVariableVal(data) {
this.items.forEach(item => {
this.items.forEach((item) => {
if (item.name === data.name) {
item.value = data.value;
}
})
});
},
// 备注修改
descriptionChange(data) {
this.items.forEach((item) => {
if (item.name === data.name) {
item.description = data.description;
}
});
},
// 启用禁用
enableChange(data) {
this.items.forEach((item) => {
if (item.name === data.name) {
item.enable = data.enable;
}
});
},
valueText(data) {
switch (data.type) {
case 'LIST':
return this.$t('api_test.environment.list_info');
case 'CONSTANT':
return this.$t('api_test.value');
case 'COUNTER':
case 'RANDOM':
return this.$t('api_test.environment.advanced_setting');
case "LIST":
return this.$t("api_test.environment.list_info");
case "CONSTANT":
return this.$t("api_test.value");
case "COUNTER":
case "RANDOM":
return this.$t("api_test.environment.advanced_setting");
default:
return this.$t('api_test.value');
return this.$t("api_test.value");
}
},
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;
let results = queryString
? restaurants.filter(this.createFilter(queryString))
: restaurants;
// 调用 callback 返回建议列表的数据
cb(results);
},
@ -367,33 +498,35 @@ export default {
let index = 1;
this.allData.forEach((item) => {
item.num = index;
if (!item.type || item.type === 'text') {
item.type = 'CONSTANT';
if (!item.type || item.type === "text") {
item.type = "CONSTANT";
}
if (!item.id) {
item.id = getUUID();
}
if (item.remark) {
this.$set(item, 'description', item.remark);
this.$set(item, "description", item.remark);
item.remark = undefined;
}
if (!item.scope) {
this.$set(item, 'scope', 'api');
this.$set(item, "scope", "api");
}
index++;
});
},
handleDeleteBatch() {
operationConfirm(this, this.$t('api_test.environment.variables_delete_info') + ' ？', () => {
operationConfirm(
this,
this.$t("api_test.environment.variables_delete_info") + " ？",
() => {
if (this.condition.selectAll) {
let deleteIndex = 0;
let deleteRows = this.items.filter((item) => {
return this.condition.unSelectIds.indexOf(item.id) < 0;
});
deleteRows.forEach(deleteRow => {
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();
@ -418,8 +551,8 @@ export default {
this.pageData.forEach((item) => {
item.showMore = false;
});
});
}
);
},
filter() {
// 过滤
@ -432,12 +565,16 @@ export default {
_filter() {
// filter by scope
let scopeFilterData = [];
if (!this.condition.filters || !this.condition.filters.scope || this.condition.filters.scope.length === 0) {
if (
!this.condition.filters ||
!this.condition.filters.scope ||
this.condition.filters.scope.length === 0
) {
// 重置或者清空
forEach(this.items, (item) => {
delete item.hidden;
if (!item.scope) {
this.$set(item, 'scope', 'api');
this.$set(item, "scope", "api");
}
});
scopeFilterData = this.items;
@ -460,8 +597,10 @@ export default {
}
let keyword = this.selectVariable;
scopeFilterData.forEach((filterData) => {
if (keyword && keyword !== '' && filterData.name) {
if (filterData.name.toLowerCase().indexOf(keyword.toLowerCase()) === -1) {
if (keyword && keyword !== "" && filterData.name) {
if (
filterData.name.toLowerCase().indexOf(keyword.toLowerCase()) === -1
) {
filterData.hidden = true;
} else {
filterData.hidden = undefined;
@ -492,11 +631,11 @@ export default {
let required = false;
keyValues.push(
new KeyValue({
scope: 'api',
scope: "api",
name: line[0],
required: required,
value: values,
type: 'CONSTANT',
type: "CONSTANT",
valid: false,
file: false,
encode: true,
@ -541,34 +680,37 @@ export default {
exportJSON() {
let apiVariable = [];
this.$refs.variableTable.selectRows.forEach((r) => {
if (!r.scope || r.scope != 'ui') {
if (!r.scope || r.scope != "ui") {
apiVariable.push(r);
}
});
if (apiVariable.length < 1) {
this.$warning(this.$t('api_test.environment.select_api_variable'));
this.$warning(this.$t("api_test.environment.select_api_variable"));
return;
}
let variablesJson = [];
let messages = '';
let messages = "";
let rows = this.$refs.variableTable.selectRows;
if (this.condition.selectAll) {
rows = this.allData;
}
rows.forEach((row) => {
if (row.type === 'CSV') {
messages = this.$t('variables.csv_download');
if (row.type === "CSV") {
messages = this.$t("variables.csv_download");
}
if (row.name && (!row.scope || row.scope == 'api')) {
if (row.name && (!row.scope || row.scope == "api")) {
variablesJson.push(row);
}
});
if (messages !== '') {
if (messages !== "") {
this.$warning(messages);
return;
}
downloadFile('MS_' + variablesJson.length + '_Environments_variables.json', JSON.stringify(variablesJson));
downloadFile(
"MS_" + variablesJson.length + "_Environments_variables.json",
JSON.stringify(variablesJson)
);
},
importJSON() {
this.$refs.variableImport.open();
@ -578,9 +720,11 @@ export default {
importData.id = getUUID();
importData.enable = true;
importData.showMore = false;
let sameNameIndex = this.items.findIndex((d) => d.name === importData.name);
let sameNameIndex = this.items.findIndex(
(d) => d.name === importData.name
);
if (sameNameIndex !== -1) {
if (modeId === 'fullCoverage') {
if (modeId === "fullCoverage") {
this.items.splice(sameNameIndex, 1, importData);
}
} else {
@ -599,13 +743,13 @@ export default {
},
created() {
if (this.items.length === 0) {
this.items.push(new KeyValue({enable: true, scope: 'api'}));
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.$set(item, "scope", "api");
}
});
this.allData = this.items;
@ -633,5 +777,4 @@ export default {
.kv-delete {
width: 60px;
}
</style>