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 f78898b0d9
commit 50f72ba4ab
1 changed files with 198 additions and 251 deletions

View File

@ -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;
}
// 0pageSize
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>