refactor(接口测试): 环境通用变量列表增加分页逻辑
--bug=1023305 --user=王孝刚 【接口测试】github#21835,接口自动化场景页面,进入环境配置,当通用配置里参数过多(100以上)时,进入很慢(10s),关闭也很慢(10s)。 https://www.tapd.cn/55049933/s/1338946
This commit is contained in:
parent
f78898b0d9
commit
50f72ba4ab
|
@ -7,8 +7,7 @@
|
||||||
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">
|
||||||
|
@ -16,27 +15,20 @@
|
||||||
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" class="scenario-ext-btn" trigger="hover"
|
@command="handleExportCommand"
|
||||||
v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']">
|
class="scenario-ext-btn"
|
||||||
<ms-table-button
|
trigger="hover"
|
||||||
style="margin-left: 10px"
|
v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']">
|
||||||
icon="el-icon-box"
|
<ms-table-button style="margin-left: 10px" 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">{{ $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-menu>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
|
|
||||||
<el-link
|
<el-link style="margin-left: 10px" @click="batchAdd" type="primary" :disabled="isReadOnly">
|
||||||
style="margin-left: 10px"
|
{{ $t('commons.batch_add') }}
|
||||||
@click="batchAdd"
|
|
||||||
type="primary"
|
|
||||||
:disabled="isReadOnly"
|
|
||||||
>
|
|
||||||
{{ $t("commons.batch_add") }}
|
|
||||||
</el-link>
|
</el-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -48,23 +40,20 @@
|
||||||
width: 99%;
|
width: 99%;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
clear: both;
|
clear: both;
|
||||||
"
|
">
|
||||||
>
|
|
||||||
<ms-table
|
<ms-table
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
row-key="id"
|
row-key="id"
|
||||||
:data="variables"
|
:data="variables"
|
||||||
:total="items.length"
|
|
||||||
: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"
|
||||||
|
:total="total"
|
||||||
@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
|
<ms-table-column
|
||||||
prop="scope"
|
prop="scope"
|
||||||
sortable
|
sortable
|
||||||
|
@ -77,24 +66,13 @@
|
||||||
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="changeType(scope.row)"
|
@change="changeType(scope.row)">
|
||||||
>
|
<el-option v-for="item in scopeTypeFilters" :key="item.value" :label="item.text" :value="item.value" />
|
||||||
<el-option
|
|
||||||
v-for="item in scopeTypeFilters"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.text"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
</ms-table-column>
|
</ms-table-column>
|
||||||
|
|
||||||
<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">
|
<template slot-scope="scope">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="scope.row.name"
|
v-model="scope.row.name"
|
||||||
|
@ -102,145 +80,98 @@
|
||||||
maxlength="200"
|
maxlength="200"
|
||||||
:placeholder="$t('api_test.variable_name')"
|
:placeholder="$t('api_test.variable_name')"
|
||||||
show-word-limit
|
show-word-limit
|
||||||
@change="change"
|
@change="change" />
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</ms-table-column>
|
</ms-table-column>
|
||||||
<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">
|
<template slot-scope="scope">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="scope.row.type"
|
v-model="scope.row.type"
|
||||||
v-if="!scope.row.scope || scope.row.scope == 'api'"
|
v-if="!scope.row.scope || scope.row.scope == 'api'"
|
||||||
:placeholder="$t('commons.please_select')"
|
:placeholder="$t('commons.please_select')"
|
||||||
size="mini"
|
size="mini">
|
||||||
>
|
<el-option v-for="item in typeSelectOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
<el-option
|
|
||||||
v-for="item in typeSelectOptions"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
|
|
||||||
<el-select
|
<el-select v-else v-model="scope.row.type" :placeholder="$t('commons.please_select')" size="mini">
|
||||||
v-else
|
|
||||||
v-model="scope.row.type"
|
|
||||||
:placeholder="$t('commons.please_select')"
|
|
||||||
size="mini"
|
|
||||||
>
|
|
||||||
<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>
|
||||||
|
|
||||||
<el-table-column
|
<el-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">
|
<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)"
|
||||||
:disabled="
|
:disabled="scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'" />
|
||||||
scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'
|
<csv-file-upload :parameter="scope.row" v-if="scope.row.type === 'CSV'" />
|
||||||
"
|
|
||||||
/>
|
|
||||||
<csv-file-upload
|
|
||||||
:parameter="scope.row"
|
|
||||||
v-if="scope.row.type === 'CSV'"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<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">
|
<template slot-scope="scope">
|
||||||
<el-input v-model="scope.row.description" size="mini"/>
|
<el-input v-model="scope.row.description" size="mini" />
|
||||||
</template>
|
</template>
|
||||||
</ms-table-column>
|
</ms-table-column>
|
||||||
|
|
||||||
<ms-table-column :label="$t('commons.operating')" width="150">
|
<ms-table-column :label="$t('commons.operating')" width="150">
|
||||||
<template v-slot:default="scope">
|
<template v-slot:default="scope">
|
||||||
<span>
|
<span>
|
||||||
<el-switch v-model="scope.row.enable" size="mini"/>
|
<el-switch v-model="scope.row.enable" size="mini" />
|
||||||
<el-tooltip
|
<el-button
|
||||||
effect="dark"
|
icon="el-icon-delete"
|
||||||
:content="$t('commons.remove')"
|
type="danger"
|
||||||
placement="top-start"
|
circle
|
||||||
>
|
size="mini"
|
||||||
<el-button
|
style="margin-left: 10px"
|
||||||
icon="el-icon-delete"
|
@click="remove(scope.row)"
|
||||||
type="danger"
|
v-if="isDisable(scope.row)" />
|
||||||
circle
|
<el-button
|
||||||
size="mini"
|
v-if="(!scope.row.scope || scope.row.scope == 'api') && scope.row.type !== 'LIST'"
|
||||||
style="margin-left: 10px"
|
icon="el-icon-setting"
|
||||||
@click="remove(scope.row)"
|
circle
|
||||||
v-if="isDisable(scope.row)"
|
size="mini"
|
||||||
/>
|
style="margin-left: 10px"
|
||||||
</el-tooltip>
|
@click="openSetting(scope.row)"
|
||||||
<el-tooltip
|
@change="change" />
|
||||||
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>
|
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</ms-table-column>
|
</ms-table-column>
|
||||||
</ms-table>
|
</ms-table>
|
||||||
|
<ms-table-pagination
|
||||||
|
:change="nextPage"
|
||||||
|
:current-page.sync="currentPage"
|
||||||
|
:page-size.sync="pageSize"
|
||||||
|
:total="total" />
|
||||||
</div>
|
</div>
|
||||||
<batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
|
<batch-add-parameter @batchSave="batchSave" ref="batchAdd" />
|
||||||
<api-variable-setting ref="apiVariableSetting"></api-variable-setting>
|
<api-variable-setting ref="apiVariableSetting"></api-variable-setting>
|
||||||
<variable-import
|
<variable-import ref="variableImport" @mergeData="mergeData"></variable-import>
|
||||||
ref="variableImport"
|
|
||||||
@mergeData="mergeData"
|
|
||||||
></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';
|
||||||
import MsTable from "../../table/MsTable";
|
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 _ from "lodash";
|
import _ from 'lodash';
|
||||||
|
import MsTablePagination from '../../pagination/TablePagination';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "MsApiScenarioVariables",
|
name: 'MsApiScenarioVariables',
|
||||||
components: {
|
components: {
|
||||||
BatchAddParameter,
|
BatchAddParameter,
|
||||||
MsApiVariableInput,
|
MsApiVariableInput,
|
||||||
|
@ -250,6 +181,7 @@ export default {
|
||||||
ApiVariableSetting,
|
ApiVariableSetting,
|
||||||
CsvFileUpload,
|
CsvFileUpload,
|
||||||
VariableImport,
|
VariableImport,
|
||||||
|
MsTablePagination,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
items: Array,
|
items: Array,
|
||||||
|
@ -268,41 +200,49 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
currentPage: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
total: 0,
|
||||||
loading: false,
|
loading: false,
|
||||||
screenHeight: "400px",
|
screenHeight: '400px',
|
||||||
batchButtons: [
|
batchButtons: [
|
||||||
{
|
{
|
||||||
name: this.$t("api_test.definition.request.batch_delete"),
|
name: this.$t('api_test.definition.request.batch_delete'),
|
||||||
handleClick: this.handleDeleteBatch,
|
handleClick: this.handleDeleteBatch,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
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') },
|
||||||
],
|
],
|
||||||
variables: {},
|
variables: {},
|
||||||
selectVariable: "",
|
selectVariable: '',
|
||||||
editData: {},
|
editData: {},
|
||||||
|
allData: [],
|
||||||
|
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' },
|
||||||
]
|
],
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
watch: {
|
watch: {
|
||||||
items: {
|
items: {
|
||||||
handler(v) {
|
handler(v) {
|
||||||
this.variables = v;
|
this.allData = v;
|
||||||
|
this.pageSize = 10;
|
||||||
|
this.total = this.allData.length;
|
||||||
this.sortParameters();
|
this.sortParameters();
|
||||||
|
this.nextPage();
|
||||||
},
|
},
|
||||||
immediate: true,
|
immediate: true,
|
||||||
deep: true,
|
deep: true,
|
||||||
|
@ -312,14 +252,35 @@ export default {
|
||||||
remove: function (index) {
|
remove: function (index) {
|
||||||
const dataIndex = this.variables.findIndex((d) => d.name === index.name);
|
const dataIndex = this.variables.findIndex((d) => d.name === index.name);
|
||||||
this.variables.splice(dataIndex, 1);
|
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 () {
|
change: function () {
|
||||||
let isNeedCreate = true;
|
let isNeedCreate = true;
|
||||||
let removeIndex = -1;
|
let removeIndex = -1;
|
||||||
let repeatKey = "";
|
let repeatKey = '';
|
||||||
this.variables.forEach((item, index) => {
|
this.items.forEach((item, index) => {
|
||||||
this.variables.forEach((row, rowIndex) => {
|
this.items.forEach((row, rowIndex) => {
|
||||||
if (item.name === row.name && index !== rowIndex) {
|
if (item.name === row.name && index !== rowIndex) {
|
||||||
repeatKey = item.name;
|
repeatKey = item.name;
|
||||||
}
|
}
|
||||||
|
@ -333,118 +294,106 @@ export default {
|
||||||
isNeedCreate = false;
|
isNeedCreate = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (repeatKey !== "") {
|
if (repeatKey !== '') {
|
||||||
this.$warning(
|
this.$warning(
|
||||||
this.$t("api_test.environment.common_config") +
|
this.$t('api_test.environment.common_config') +
|
||||||
"【" +
|
'【' +
|
||||||
repeatKey +
|
repeatKey +
|
||||||
"】" +
|
'】' +
|
||||||
this.$t("load_test.param_is_duplicate")
|
this.$t('load_test.param_is_duplicate')
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (isNeedCreate) {
|
if (isNeedCreate) {
|
||||||
this.variables.push(
|
this.items.push(new KeyValue({ enable: true, id: getUUID(), type: 'CONSTANT', scope: 'api' }));
|
||||||
new KeyValue({enable: true, id: getUUID(), type: "CONSTANT", scope: "api"})
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
this.$emit("change", this.variables);
|
this.$emit('change', this.items);
|
||||||
// TODO 检查key重复
|
// TODO 检查key重复
|
||||||
},
|
},
|
||||||
changeType(data) {
|
changeType(data) {
|
||||||
data.value = "";
|
data.value = '';
|
||||||
if (
|
if (!data.delimiter || (!data.files && data.files.length === 0) || !data.quotedData) {
|
||||||
!data.delimiter ||
|
data.delimiter = ',';
|
||||||
(!data.files && data.files.length === 0) ||
|
|
||||||
!data.quotedData
|
|
||||||
) {
|
|
||||||
data.delimiter = ",";
|
|
||||||
data.files = [];
|
data.files = [];
|
||||||
data.quotedData = "false";
|
data.quotedData = 'false';
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!data.scope || data.scope == "ui") {
|
if (!data.scope || data.scope == 'ui') {
|
||||||
data.type = 'STRING';
|
data.type = 'STRING';
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
valueText(data) {
|
valueText(data) {
|
||||||
switch (data.type) {
|
switch (data.type) {
|
||||||
case "LIST":
|
case 'LIST':
|
||||||
return this.$t("api_test.environment.list_info");
|
return this.$t('api_test.environment.list_info');
|
||||||
case "CONSTANT":
|
case 'CONSTANT':
|
||||||
return this.$t("api_test.value");
|
return this.$t('api_test.value');
|
||||||
case "COUNTER":
|
case 'COUNTER':
|
||||||
case "RANDOM":
|
case 'RANDOM':
|
||||||
return this.$t("api_test.environment.advanced_setting");
|
return this.$t('api_test.environment.advanced_setting');
|
||||||
default:
|
default:
|
||||||
return this.$t("api_test.value");
|
return this.$t('api_test.value');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
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;
|
||||||
? restaurants.filter(this.createFilter(queryString))
|
|
||||||
: restaurants;
|
|
||||||
// 调用 callback 返回建议列表的数据
|
// 调用 callback 返回建议列表的数据
|
||||||
cb(results);
|
cb(results);
|
||||||
},
|
},
|
||||||
sortParameters() {
|
sortParameters() {
|
||||||
let index = 1;
|
let index = 1;
|
||||||
this.variables.forEach((item) => {
|
this.allData.forEach((item) => {
|
||||||
item.num = index;
|
item.num = index;
|
||||||
if (!item.type || item.type === "text") {
|
if (!item.type || item.type === 'text') {
|
||||||
item.type = "CONSTANT";
|
item.type = 'CONSTANT';
|
||||||
}
|
}
|
||||||
if (!item.id) {
|
if (!item.id) {
|
||||||
item.id = getUUID();
|
item.id = getUUID();
|
||||||
}
|
}
|
||||||
if (item.remark) {
|
if (item.remark) {
|
||||||
this.$set(item, "description", item.remark);
|
this.$set(item, 'description', item.remark);
|
||||||
item.remark = undefined;
|
item.remark = undefined;
|
||||||
}
|
}
|
||||||
if (!item.scope) {
|
if (!item.scope) {
|
||||||
this.$set(item, "scope", "api");
|
this.$set(item, 'scope', 'api');
|
||||||
}
|
}
|
||||||
index++;
|
index++;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleDeleteBatch() {
|
handleDeleteBatch() {
|
||||||
operationConfirm(
|
operationConfirm(this, this.$t('api_test.environment.variables_delete_info') + ' ?', () => {
|
||||||
this,
|
let ids = this.$refs.variableTable.selectRows;
|
||||||
this.$t("api_test.environment.variables_delete_info") + " ?",
|
ids.forEach((row) => {
|
||||||
() => {
|
if (row.id) {
|
||||||
let ids = this.$refs.variableTable.selectRows;
|
const index = this.variables.findIndex((d) => d.id === row.id);
|
||||||
ids.forEach((row) => {
|
const allIndex = this.allData.findIndex((d) => d.id === row.id);
|
||||||
if (row.id) {
|
if (index !== this.variables.length - 1) {
|
||||||
const index = this.variables.findIndex((d) => d.id === row.id);
|
this.variables.splice(index, 1);
|
||||||
if (index !== this.variables.length - 1) {
|
|
||||||
this.variables.splice(index, 1);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
});
|
if (allIndex !== this.allData.length - 1) {
|
||||||
this.sortParameters();
|
this.allData.splice(allIndex, 1);
|
||||||
this.$refs.variableTable.cancelCurrentRow();
|
}
|
||||||
this.$refs.variableTable.clear();
|
}
|
||||||
this.variables.forEach((item) => {
|
});
|
||||||
item.showMore = false;
|
this.sortParameters();
|
||||||
});
|
this.$refs.variableTable.cancelCurrentRow();
|
||||||
}
|
this.$refs.variableTable.clear();
|
||||||
);
|
this.variables.forEach((item) => {
|
||||||
|
item.showMore = false;
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
filter(scope) {
|
filter(scope) {
|
||||||
let datas = [];
|
let datas = [];
|
||||||
this.variables.forEach((item) => {
|
this.variables.forEach((item) => {
|
||||||
if (this.selectVariable && this.selectVariable != "" && item.name) {
|
if (this.selectVariable && this.selectVariable != '' && item.name) {
|
||||||
if (
|
if (item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
|
||||||
item.name
|
|
||||||
.toLowerCase()
|
|
||||||
.indexOf(this.selectVariable.toLowerCase()) == -1
|
|
||||||
) {
|
|
||||||
item.hidden = true;
|
item.hidden = true;
|
||||||
} else {
|
} else {
|
||||||
item.hidden = undefined;
|
item.hidden = undefined;
|
||||||
|
@ -457,20 +406,20 @@ export default {
|
||||||
this.variables = datas;
|
this.variables = datas;
|
||||||
},
|
},
|
||||||
filterScope(value, row) {
|
filterScope(value, row) {
|
||||||
if (value == "ui") {
|
if (value == 'ui') {
|
||||||
return row.scope == "ui";
|
return row.scope == 'ui';
|
||||||
}
|
}
|
||||||
return !row.scope || row.scope == "api";
|
return !row.scope || row.scope == 'api';
|
||||||
},
|
},
|
||||||
openSetting(data) {
|
openSetting(data) {
|
||||||
this.$refs.apiVariableSetting.open(data);
|
this.$refs.apiVariableSetting.open(data);
|
||||||
},
|
},
|
||||||
isDisable: function (row) {
|
isDisable: function (row) {
|
||||||
const index = this.variables.findIndex((d) => d.name === row.name);
|
const index = this.items.findIndex((d) => d.name === row.name);
|
||||||
return this.variables.length - 1 !== index;
|
return this.items.length - 1 !== index;
|
||||||
},
|
},
|
||||||
_handleBatchVars(data) {
|
_handleBatchVars(data) {
|
||||||
let params = data.split("\n");
|
let params = data.split('\n');
|
||||||
let keyValues = [];
|
let keyValues = [];
|
||||||
params.forEach((item) => {
|
params.forEach((item) => {
|
||||||
if (item) {
|
if (item) {
|
||||||
|
@ -479,10 +428,11 @@ export default {
|
||||||
let required = false;
|
let required = false;
|
||||||
keyValues.push(
|
keyValues.push(
|
||||||
new KeyValue({
|
new KeyValue({
|
||||||
|
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,
|
||||||
|
@ -502,14 +452,14 @@ export default {
|
||||||
let keyValues = this._handleBatchVars(data);
|
let keyValues = this._handleBatchVars(data);
|
||||||
keyValues.forEach((keyValue) => {
|
keyValues.forEach((keyValue) => {
|
||||||
let isAdd = true;
|
let isAdd = true;
|
||||||
this.variables.forEach((item) => {
|
this.items.forEach((item) => {
|
||||||
if (item.name === keyValue.name) {
|
if (item.name === keyValue.name) {
|
||||||
item.value = keyValue.value;
|
item.value = keyValue.value;
|
||||||
isAdd = false;
|
isAdd = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (isAdd) {
|
if (isAdd) {
|
||||||
this.variables.splice(
|
this.items.splice(
|
||||||
this.variables.indexOf((i) => !i.name),
|
this.variables.indexOf((i) => !i.name),
|
||||||
0,
|
0,
|
||||||
keyValue
|
keyValue
|
||||||
|
@ -524,34 +474,31 @@ export default {
|
||||||
exportJSON() {
|
exportJSON() {
|
||||||
let apiVariable = [];
|
let apiVariable = [];
|
||||||
this.$refs.variableTable.selectRows.forEach((r) => {
|
this.$refs.variableTable.selectRows.forEach((r) => {
|
||||||
if (!r.scope || r.scope != "ui") {
|
if (!r.scope || r.scope != 'ui') {
|
||||||
apiVariable.push(r);
|
apiVariable.push(r);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
if (apiVariable.length < 1) {
|
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;
|
return;
|
||||||
}
|
}
|
||||||
let variablesJson = [];
|
let variablesJson = [];
|
||||||
let messages = "";
|
let messages = '';
|
||||||
let rows = this.$refs.variableTable.selectRows;
|
let rows = this.$refs.variableTable.selectRows;
|
||||||
rows.forEach((row) => {
|
rows.forEach((row) => {
|
||||||
if (row.type === "CSV") {
|
if (row.type === 'CSV') {
|
||||||
messages = this.$t("variables.csv_download");
|
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);
|
variablesJson.push(row);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
if (messages !== "") {
|
if (messages !== '') {
|
||||||
this.$warning(messages);
|
this.$warning(messages);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
downloadFile(
|
downloadFile('MS_' + variablesJson.length + '_Environments_variables.json', JSON.stringify(variablesJson));
|
||||||
"MS_" + variablesJson.length + "_Environments_variables.json",
|
|
||||||
JSON.stringify(variablesJson)
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
importJSON() {
|
importJSON() {
|
||||||
this.$refs.variableImport.open();
|
this.$refs.variableImport.open();
|
||||||
|
@ -561,11 +508,9 @@ export default {
|
||||||
importData.id = getUUID();
|
importData.id = getUUID();
|
||||||
importData.enable = true;
|
importData.enable = true;
|
||||||
importData.showMore = false;
|
importData.showMore = false;
|
||||||
let sameNameIndex = this.variables.findIndex(
|
let sameNameIndex = this.variables.findIndex((d) => d.name === importData.name);
|
||||||
(d) => d.name === importData.name
|
|
||||||
);
|
|
||||||
if (sameNameIndex !== -1) {
|
if (sameNameIndex !== -1) {
|
||||||
if (modeId === "fullCoverage") {
|
if (modeId === 'fullCoverage') {
|
||||||
this.variables.splice(sameNameIndex, 1, importData);
|
this.variables.splice(sameNameIndex, 1, importData);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
@ -573,22 +518,24 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleExportCommand(command){
|
handleExportCommand(command) {
|
||||||
this.exportJSON();
|
this.exportJSON();
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
if (this.items.length === 0) {
|
if (this.items.length === 0) {
|
||||||
this.items.push(new KeyValue({enable: true, scope: "api"}));
|
this.items.push(new KeyValue({ enable: true, scope: 'api' }));
|
||||||
} else {
|
} else {
|
||||||
//历史数据默认是 api 应用场景
|
//历史数据默认是 api 应用场景
|
||||||
_.forEach(this.items, item => {
|
_.forEach(this.items, (item) => {
|
||||||
if (!item.scope) {
|
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>
|
</script>
|
||||||
|
|
Loading…
Reference in New Issue