refactor(接口测试): 优化场景变量中不同的csv切换预览显示的问题

--bug=1028092 --user=王孝刚 【接口测试】接口自动化-场景变量-预览-切换-快速切换两次显示异常
https://www.tapd.cn/55049933/s/1396590
This commit is contained in:
wxg0103 2023-07-24 15:51:27 +08:00 committed by 刘瑞斌
parent 898feefec7
commit f37a313e3e
2 changed files with 85 additions and 63 deletions

View File

@ -13,7 +13,7 @@
:placeholder="$t('commons.input_content')" :placeholder="$t('commons.input_content')"
:autosize="{ minRows: 2, maxRows: 10 }" :autosize="{ minRows: 2, maxRows: 10 }"
:rows="2" :rows="2"
size="small" /> size="small"/>
</el-form-item> </el-form-item>
<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 40px"> <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 40px">
<el-tab-pane :label="$t('variables.config')" name="config"> <el-tab-pane :label="$t('variables.config')" name="config">
@ -22,7 +22,7 @@
<span>{{ $t('variables.add_file') }}</span> <span>{{ $t('variables.add_file') }}</span>
</el-col> </el-col>
<el-col :span="19"> <el-col :span="19">
<ms-csv-file-upload :parameter="editData" :disabled="disabled"/> <ms-csv-file-upload :parameter="editData" :disabled="disabled"/>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin-top: 10px"> <el-row style="margin-top: 10px">
@ -44,7 +44,7 @@
<span>{{ $t('variables.delimiter') }}</span> <span>{{ $t('variables.delimiter') }}</span>
</el-col> </el-col>
<el-col :span="19"> <el-col :span="19">
<el-input v-model="editData.delimiter" size="small" :disabled="disabled" /> <el-input v-model="editData.delimiter" size="small" :disabled="disabled"/>
</el-col> </el-col>
</el-row> </el-row>
<el-row style="margin-top: 10px"> <el-row style="margin-top: 10px">
@ -53,15 +53,16 @@
</el-col> </el-col>
<el-col :span="19"> <el-col :span="19">
<el-select v-model="editData.quotedData" size="small" :disabled="disabled"> <el-select v-model="editData.quotedData" size="small" :disabled="disabled">
<el-option label="true" :value="true" /> <el-option label="true" :value="true"/>
<el-option label="false" :value="false" /> <el-option label="false" :value="false"/>
</el-select> </el-select>
</el-col> </el-col>
</el-row> </el-row>
</el-tab-pane> </el-tab-pane>
<el-tab-pane :label="$t('schema.preview')" name="preview"> <el-tab-pane :label="$t('schema.preview')" name="preview">
<div v-if="showMessage">{{ $t('variables.csv_message') }}</div> <div v-if="showMessage">{{ $t('variables.csv_message') }}</div>
<el-table :data="previewData" style="width: 100%" height="200px" v-loading="loading"> <el-table :data="previewData" style="width: 100%" height="200px" v-loading="loading"
:key="editData.id">
<!-- 自定义列的遍历--> <!-- 自定义列的遍历-->
<el-table-column <el-table-column
v-for="(item, index) in columns" v-for="(item, index) in columns"
@ -202,11 +203,11 @@ export default {
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 ? restaurants.filter(this.createFilter(queryString)) : restaurants; let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
// callback // callback

View File

@ -37,11 +37,13 @@
</el-input> </el-input>
</div> </div>
<div style="float: right" <div
v-permission="[ style="float: right"
'PROJECT_API_SCENARIO:READ+EDIT', v-permission="[
'PROJECT_API_SCENARIO:READ+CREATE', 'PROJECT_API_SCENARIO:READ+EDIT',
'PROJECT_API_SCENARIO:READ+COPY',]"> 'PROJECT_API_SCENARIO:READ+CREATE',
'PROJECT_API_SCENARIO:READ+COPY',
]">
<el-select <el-select
v-model="selectType" v-model="selectType"
:placeholder="$t('test_resource_pool.type')" :placeholder="$t('test_resource_pool.type')"
@ -60,7 +62,7 @@
<el-dropdown style="margin-left: 10px"> <el-dropdown style="margin-left: 10px">
<el-button size="small"> <el-button size="small">
<span class="tip-font">{{ $t('commons.more_operator') }}</span> <span class="tip-font">{{ $t('commons.more_operator') }}</span>
<i class="el-icon-arrow-down el-icon--right"/> <i class="el-icon-arrow-down el-icon--right" />
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native.stop="importVariable" :disabled="disabled"> <el-dropdown-item @click.native.stop="importVariable" :disabled="disabled">
@ -138,34 +140,45 @@
</ms-table-column> </ms-table-column>
</span> </span>
</ms-table> </ms-table>
<batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter"/> <batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter" />
</div> </div>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<ms-edit-constant v-if="editData.type == 'CONSTANT'" ref="parameters" :editData.sync="editData"/> <ms-edit-constant v-if="editData.type == 'CONSTANT'" ref="parameters" :editData.sync="editData" />
<ms-edit-counter v-if="editData.type == 'COUNTER'" ref="counter" :editData.sync="editData"/> <ms-edit-counter v-if="editData.type == 'COUNTER'" ref="counter" :editData.sync="editData" />
<ms-edit-random v-if="editData.type == 'RANDOM'" ref="random" :editData.sync="editData"/> <ms-edit-random v-if="editData.type == 'RANDOM'" ref="random" :editData.sync="editData" />
<ms-edit-list-value v-if="editData.type == 'LIST'" ref="listValue" :editData="editData"/> <ms-edit-list-value v-if="editData.type == 'LIST'" ref="listValue" :editData="editData" />
<ms-edit-csv v-if="editData.type === 'CSV' && !loading" ref="csv" :editData.sync="editData" <ms-edit-csv
:disabled="disabled"/> v-if="editData.type === 'CSV' && !loading"
ref="csv"
:editData.sync="editData"
:disabled="disabled" />
<div v-if="editData.type" style="float: right"> <div v-if="editData.type" style="float: right">
<el-button size="small" style="margin-left: 10px" type="primary" @click="confirmVariable" <el-button
v-permission="[ size="small"
'PROJECT_API_SCENARIO:READ+EDIT', style="margin-left: 10px"
'PROJECT_API_SCENARIO:READ+CREATE', type="primary"
'PROJECT_API_SCENARIO:READ+COPY', @click="confirmVariable"
]"> v-permission="[
'PROJECT_API_SCENARIO:READ+EDIT',
'PROJECT_API_SCENARIO:READ+CREATE',
'PROJECT_API_SCENARIO:READ+COPY',
]">
{{ $t('commons.confirm') }} {{ $t('commons.confirm') }}
</el-button> </el-button>
<el-button size="small" style="margin-left: 10px" @click="cancelVariable" <el-button size="small" style="margin-left: 10px" @click="cancelVariable"
>{{ $t('commons.cancel') }} >{{ $t('commons.cancel') }}
</el-button> </el-button>
<el-button v-if="showDelete" size="small" style="margin-left: 10px" @click="deleteVariable" <el-button
v-permission="[ v-if="showDelete"
'PROJECT_API_SCENARIO:READ+EDIT', size="small"
'PROJECT_API_SCENARIO:READ+CREATE', style="margin-left: 10px"
'PROJECT_API_SCENARIO:READ+COPY', @click="deleteVariable"
]"> v-permission="[
'PROJECT_API_SCENARIO:READ+EDIT',
'PROJECT_API_SCENARIO:READ+CREATE',
'PROJECT_API_SCENARIO:READ+COPY',
]">
{{ $t('commons.delete') }} {{ $t('commons.delete') }}
</el-button> </el-button>
</div> </div>
@ -182,7 +195,7 @@
placement="top-start" placement="top-start"
slot="label"> slot="label">
<span <span
>{{ $t('api_test.request.headers') }} >{{ $t('api_test.request.headers') }}
<div class="el-step__icon is-text ms-api-col ms-header" v-if="headers.length > 1"> <div class="el-step__icon is-text ms-api-col ms-header" v-if="headers.length > 1">
<div class="el-step__icon-inner"> <div class="el-step__icon-inner">
{{ headers.length - 1 }} {{ headers.length - 1 }}
@ -196,19 +209,22 @@
</el-link> </el-link>
</el-row> </el-row>
<div style="min-height: 400px"> <div style="min-height: 400px">
<ms-api-key-value :items="headers" :suggestions="headerSuggestions"/> <ms-api-key-value :items="headers" :suggestions="headerSuggestions" />
<batch-add-parameter @batchSave="batchSaveHeader" ref="batchAddHeader"/> <batch-add-parameter @batchSave="batchSaveHeader" ref="batchAddHeader" />
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<template v-slot:footer> <template v-slot:footer>
<div> <div>
<el-button type="primary" @click="save" <el-button
v-permission="[ type="primary"
'PROJECT_API_SCENARIO:READ+EDIT', @click="save"
'PROJECT_API_SCENARIO:READ+CREATE', v-permission="[
'PROJECT_API_SCENARIO:READ+COPY', 'PROJECT_API_SCENARIO:READ+EDIT',
]">{{ $t('commons.confirm') }} 'PROJECT_API_SCENARIO:READ+CREATE',
'PROJECT_API_SCENARIO:READ+COPY',
]"
>{{ $t('commons.confirm') }}
</el-button> </el-button>
</div> </div>
</template> </template>
@ -227,19 +243,18 @@ import MsEditCounter from './EditCounter';
import MsEditRandom from './EditRandom'; import MsEditRandom from './EditRandom';
import MsEditListValue from './EditListValue'; import MsEditListValue from './EditListValue';
import MsEditCsv from './EditCsv'; import MsEditCsv from './EditCsv';
import {downloadFile, getUUID} from 'metersphere-frontend/src/utils'; import { downloadFile, getUUID } from 'metersphere-frontend/src/utils';
import MsApiKeyValue from '../../../definition/components/ApiKeyValue'; import MsApiKeyValue from '../../../definition/components/ApiKeyValue';
import BatchAddParameter from '../../../definition/components/basis/BatchAddParameter'; import BatchAddParameter from '../../../definition/components/basis/BatchAddParameter';
import {KeyValue} from '../../../definition/model/ApiTestModel'; import { KeyValue } from '../../../definition/model/ApiTestModel';
import {REQUEST_HEADERS} from 'metersphere-frontend/src/utils/constants'; import { REQUEST_HEADERS } from 'metersphere-frontend/src/utils/constants';
import {diff} from 'jsondiffpatch'; import { diff } from 'jsondiffpatch';
import MsTable from 'metersphere-frontend/src/components/table/MsTable'; import MsTable from 'metersphere-frontend/src/components/table/MsTable';
import MsTableColumn from 'metersphere-frontend/src/components/table/MsTableColumn'; import MsTableColumn from 'metersphere-frontend/src/components/table/MsTableColumn';
import {getCustomTableHeader, getCustomTableWidth} from 'metersphere-frontend/src/utils/tableUtils'; import { getCustomTableHeader, getCustomTableWidth } from 'metersphere-frontend/src/utils/tableUtils';
import VariableImport from '@/business/automation/scenario/variable/VariableImport'; import VariableImport from '@/business/automation/scenario/variable/VariableImport';
import {hasPermissions} from 'metersphere-frontend/src/utils/permission'; import { hasPermissions } from 'metersphere-frontend/src/utils/permission';
export default { export default {
name: 'MsVariableList', name: 'MsVariableList',
@ -424,7 +439,7 @@ export default {
} }
}, },
handleClick(command) { handleClick(command) {
this.editData = {delimiter: ',', quotedData: 'false'}; this.editData = { delimiter: ',', quotedData: 'false' };
this.editData.type = command; this.editData.type = command;
this.addParameters(this.editData); this.addParameters(this.editData);
}, },
@ -490,10 +505,10 @@ export default {
if (messages !== '') { if (messages !== '') {
this.$alert( this.$alert(
this.$t('api_test.scenario.variables') + this.$t('api_test.scenario.variables') +
'【' + '【' +
messages.substr(0, messages.length - 1) + messages.substr(0, messages.length - 1) +
'】' + '】' +
this.$t('load_test.param_is_duplicate') this.$t('load_test.param_is_duplicate')
); );
} }
}); });
@ -502,7 +517,6 @@ export default {
this.visible = false; this.visible = false;
}, },
close() { close() {
this.visible = false;
let saveVariables = []; let saveVariables = [];
this.variables.forEach((item) => { this.variables.forEach((item) => {
item.hidden = undefined; item.hidden = undefined;
@ -510,6 +524,11 @@ export default {
item.showMore = false; item.showMore = false;
saveVariables.push(item); saveVariables.push(item);
} }
if (item.type === 'CSV' && item.files.length === 0) {
this.$warning(this.$t('api_test.variable') + item.name + ' ' + this.$t('api_test.automation.csv_warning'));
this.visible = true;
return;
}
}); });
this.selectVariable = ''; this.selectVariable = '';
this.searchType = ''; this.searchType = '';
@ -517,16 +536,18 @@ export default {
this.editData = {}; this.editData = {};
if ( if (
(diff(JSON.parse(JSON.stringify(this.variables)), this.variablesOld) || (diff(JSON.parse(JSON.stringify(this.variables)), this.variablesOld) ||
diff(JSON.parse(JSON.stringify(this.headers)), this.headersOld)) diff(JSON.parse(JSON.stringify(this.headers)), this.headersOld)) &&
&& hasPermissions('PROJECT_API_SCENARIO:READ+EDIT', hasPermissions(
'PROJECT_API_SCENARIO:READ+EDIT',
'PROJECT_API_SCENARIO:READ+CREATE', 'PROJECT_API_SCENARIO:READ+CREATE',
'PROJECT_API_SCENARIO:READ+COPY') 'PROJECT_API_SCENARIO:READ+COPY'
)
) { ) {
this.$emit('setVariables', saveVariables, this.headers); this.$emit('setVariables', saveVariables, this.headers);
} }
}, },
addVariable() { addVariable() {
this.editData = {delimiter: ',', quotedData: 'false', files: []}; this.editData = { delimiter: ',', quotedData: 'false', files: [] };
this.editData.type = this.selectType; this.editData.type = this.selectType;
this.showDelete = false; this.showDelete = false;
if (this.editData.type === 'CSV' && this.$refs.csv) { if (this.editData.type === 'CSV' && this.$refs.csv) {