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

refactor(接口测试): 环境通用变量列表增加分页逻辑 

--bug=1023305 --user=王孝刚
【接口测试】github#21835，接口自动化场景页面，进入环境配置，当通用配置里参数过多（100以上）时，进入很慢（10s），关闭也很慢（10s）。
https://www.tapd.cn/55049933/s/1338946
This commit is contained in:
wxg0103 2023-02-20 18:35:08 +08:00 committed by fit2-zhao
parent 506d29765d
commit 7de31289ee
1 changed files with 198 additions and 251 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -7,8 +7,7 @@
size="mini"
v-model="selectVariable"
@change="filter"
@keyup.enter="filter"
>
@keyup.enter="filter">
</el-input>
</div>
<div style="padding-bottom: 10px; float: right">
@ -16,27 +15,20 @@
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']">
<ms-table-button
style="margin-left: 10px"
icon="el-icon-box"
:content="$t('commons.export')"
/>
@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')" />
<el-dropdown-menu slot="dropdown">
<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>
@ -48,23 +40,20 @@
width: 99%;
margin-top: 10px;
clear: both;
"
>
">
<ms-table
v-loading="loading"
row-key="id"
:data="variables"
:total="items.length"
:screen-height="screenHeight"
:batch-operators="batchButtons"
:remember-order="true"
:highlightCurrentRow="true"
:page-size="pageSize"
:total="total"
@refresh="onChange"
ref="variableTable"
>
<ms-table-column prop="num" sortable label="ID" min-width="60">
</ms-table-column>
ref="variableTable">
<ms-table-column prop="num" sortable label="ID" min-width="60" />
<ms-table-column
prop="scope"
sortable
@ -77,24 +66,13 @@
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(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"
@ -102,145 +80,98 @@
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"
>
<el-option
v-for="item in typeSelectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
size="mini">
<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
>
<el-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"
size="mini"
v-if="scope.row.type !== 'CSV'"
:placeholder="valueText(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 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" 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-tooltip
effect="dark"
:content="$t('commons.remove')"
placement="top-start"
>
<el-button
icon="el-icon-delete"
type="danger"
circle
size="mini"
style="margin-left: 10px"
@click="remove(scope.row)"
v-if="isDisable(scope.row)"
/>
</el-tooltip>
<el-tooltip
v-if="!scope.row.scope || scope.row.scope == 'api'"
effect="dark"
:content="$t('schema.adv_setting')"
placement="top-start"
>
<el-button
icon="el-icon-setting"
circle
size="mini"
style="margin-left: 10px"
@click="openSetting(scope.row)"
v-if="scope.row.type !== 'LIST'"
@change="change"
/>
</el-tooltip>
<el-switch v-model="scope.row.enable" size="mini" />
<el-button
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="(!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)"
@change="change" />
</span>
</template>
</ms-table-column>
</ms-table>
<ms-table-pagination
:change="nextPage"
: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"></api-variable-setting>
<variable-import
ref="variableImport"
@mergeData="mergeData"
></variable-import>
<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 _ from "lodash";
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 _ from 'lodash';
import MsTablePagination from '../../pagination/TablePagination';
export default {
name: "MsApiScenarioVariables",
name: 'MsApiScenarioVariables',
components: {
BatchAddParameter,
MsApiVariableInput,
@ -250,6 +181,7 @@ export default {
ApiVariableSetting,
CsvFileUpload,
VariableImport,
MsTablePagination,
},
props: {
items: Array,
@ -268,41 +200,49 @@ export default {
},
data() {
return {
currentPage: 1,
pageSize: 10,
total: 0,
loading: false,
screenHeight: "400px",
screenHeight: '400px',
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') },
],
variables: {},
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' },
],
};
},
watch: {
items: {
handler(v) {
this.variables = v;
this.allData = v;
this.pageSize = 10;
this.total = this.allData.length;
this.sortParameters();
this.nextPage();
},
immediate: true,
deep: true,
@ -312,14 +252,35 @@ export default {
remove: function (index) {
const dataIndex = this.variables.findIndex((d) => d.name === index.name);
this.variables.splice(dataIndex, 1);
this.$emit("change", this.variables);
const allDataIndex = this.allData.findIndex((d) => d.name === index.name);
this.allData.splice(allDataIndex, 1);
this.nextPage();
},
nextPage() {
if (
this.$refs.variableTable &&
this.$refs.variableTable.selectRows &&
this.$refs.variableTable.selectRows.size > 0
) {
return;
}
// 如果是第一页，则截取0到pageSize（每页显示多少条数据）即可
if (this.currentPage == 1) {
this.variables = this.allData.slice(0, this.pageSize);
return;
}
let start = (this.currentPage - 1) * this.pageSize;
let end = this.currentPage * this.pageSize;
this.variables = this.allData.slice(start, end);
this.total = this.allData.length;
},
change: function () {
let isNeedCreate = true;
let removeIndex = -1;
let repeatKey = "";
this.variables.forEach((item, index) => {
this.variables.forEach((row, rowIndex) => {
let repeatKey = '';
this.items.forEach((item, index) => {
this.items.forEach((row, rowIndex) => {
if (item.name === row.name && index !== rowIndex) {
repeatKey = item.name;
}
@ -333,118 +294,106 @@ export default {
isNeedCreate = false;
}
});
if (repeatKey !== "") {
if (repeatKey !== '') {
this.$warning(
this.$t("api_test.environment.common_config") +
"【" +
this.$t('api_test.environment.common_config') +
'【' +
repeatKey +
"】" +
this.$t("load_test.param_is_duplicate")
'】' +
this.$t('load_test.param_is_duplicate')
);
}
if (isNeedCreate) {
this.variables.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.$emit("change", this.variables);
this.$emit('change', this.items);
// TODO 检查key重复
},
changeType(data) {
data.value = "";
if (
!data.delimiter ||
(!data.files && data.files.length === 0) ||
!data.quotedData
) {
data.delimiter = ",";
data.value = '';
if (!data.delimiter || (!data.files && data.files.length === 0) || !data.quotedData) {
data.delimiter = ',';
data.files = [];
data.quotedData = "false";
data.quotedData = 'false';
}
if (!data.scope || data.scope == "ui") {
if (!data.scope || data.scope == 'ui') {
data.type = 'STRING';
}
},
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);
},
sortParameters() {
let index = 1;
this.variables.forEach((item) => {
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") + " ？",
() => {
let ids = this.$refs.variableTable.selectRows;
ids.forEach((row) => {
if (row.id) {
const index = this.variables.findIndex((d) => d.id === row.id);
if (index !== this.variables.length - 1) {
this.variables.splice(index, 1);
}
operationConfirm(this, this.$t('api_test.environment.variables_delete_info') + ' ？', () => {
let ids = this.$refs.variableTable.selectRows;
ids.forEach((row) => {
if (row.id) {
const index = this.variables.findIndex((d) => d.id === row.id);
const allIndex = this.allData.findIndex((d) => d.id === row.id);
if (index !== this.variables.length - 1) {
this.variables.splice(index, 1);
}
});
this.sortParameters();
this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
this.variables.forEach((item) => {
item.showMore = false;
});
}
);
if (allIndex !== this.allData.length - 1) {
this.allData.splice(allIndex, 1);
}
}
});
this.sortParameters();
this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
this.variables.forEach((item) => {
item.showMore = false;
});
});
},
filter(scope) {
let datas = [];
this.variables.forEach((item) => {
if (this.selectVariable && this.selectVariable != "" && item.name) {
if (
item.name
.toLowerCase()
.indexOf(this.selectVariable.toLowerCase()) == -1
) {
if (this.selectVariable && this.selectVariable != '' && item.name) {
if (item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
item.hidden = true;
} else {
item.hidden = undefined;
@ -457,20 +406,20 @@ export default {
this.variables = datas;
},
filterScope(value, row) {
if (value == "ui") {
return row.scope == "ui";
if (value == 'ui') {
return row.scope == 'ui';
}
return !row.scope || row.scope == "api";
return !row.scope || row.scope == 'api';
},
openSetting(data) {
this.$refs.apiVariableSetting.open(data);
},
isDisable: function (row) {
const index = this.variables.findIndex((d) => d.name === row.name);
return this.variables.length - 1 !== index;
const index = this.items.findIndex((d) => d.name === row.name);
return this.items.length - 1 !== index;
},
_handleBatchVars(data) {
let params = data.split("\n");
let params = data.split('\n');
let keyValues = [];
params.forEach((item) => {
if (item) {
@ -479,10 +428,11 @@ export default {
let required = false;
keyValues.push(
new KeyValue({
scope: 'api',
name: line[0],
required: required,
value: values,
type: "CONSTANT",
type: 'CONSTANT',
valid: false,
file: false,
encode: true,
@ -502,14 +452,14 @@ export default {
let keyValues = this._handleBatchVars(data);
keyValues.forEach((keyValue) => {
let isAdd = true;
this.variables.forEach((item) => {
this.items.forEach((item) => {
if (item.name === keyValue.name) {
item.value = keyValue.value;
isAdd = false;
}
});
if (isAdd) {
this.variables.splice(
this.items.splice(
this.variables.indexOf((i) => !i.name),
0,
keyValue
@ -524,34 +474,31 @@ 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;
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();
@ -561,11 +508,9 @@ export default {
importData.id = getUUID();
importData.enable = true;
importData.showMore = false;
let sameNameIndex = this.variables.findIndex(
(d) => d.name === importData.name
);
let sameNameIndex = this.variables.findIndex((d) => d.name === importData.name);
if (sameNameIndex !== -1) {
if (modeId === "fullCoverage") {
if (modeId === 'fullCoverage') {
this.variables.splice(sameNameIndex, 1, importData);
}
} else {
@ -573,22 +518,24 @@ export default {
}
});
},
handleExportCommand(command){
handleExportCommand(command) {
this.exportJSON();
}
},
},
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 => {
_.forEach(this.items, (item) => {
if (!item.scope) {
this.$set(item, "scope", "api");
this.$set(item, 'scope', 'api');
}
})
this.variables = this.items;
});
this.allData = this.items;
this.nextPage();
}
this.total = this.allData.length;
},
};
</script>