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')"
:autosize="{ minRows: 2, maxRows: 10 }"
:rows="2"
size="small" />
size="small"/>
</el-form-item>
<el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 40px">
<el-tab-pane :label="$t('variables.config')" name="config">
@ -44,7 +44,7 @@
<span>{{ $t('variables.delimiter') }}</span>
</el-col>
<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-row>
<el-row style="margin-top: 10px">
@ -53,15 +53,16 @@
</el-col>
<el-col :span="19">
<el-select v-model="editData.quotedData" size="small" :disabled="disabled">
<el-option label="true" :value="true" />
<el-option label="false" :value="false" />
<el-option label="true" :value="true"/>
<el-option label="false" :value="false"/>
</el-select>
</el-col>
</el-row>
</el-tab-pane>
<el-tab-pane :label="$t('schema.preview')" name="preview">
<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
v-for="(item, index) in columns"
@ -202,11 +203,11 @@ export default {
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;
// callback

View File

@ -37,11 +37,13 @@
</el-input>
</div>
<div style="float: right"
<div
style="float: right"
v-permission="[
'PROJECT_API_SCENARIO:READ+EDIT',
'PROJECT_API_SCENARIO:READ+CREATE',
'PROJECT_API_SCENARIO:READ+COPY',]">
'PROJECT_API_SCENARIO:READ+COPY',
]">
<el-select
v-model="selectType"
:placeholder="$t('test_resource_pool.type')"
@ -60,7 +62,7 @@
<el-dropdown style="margin-left: 10px">
<el-button size="small">
<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-dropdown-menu slot="dropdown">
<el-dropdown-item @click.native.stop="importVariable" :disabled="disabled">
@ -138,18 +140,25 @@
</ms-table-column>
</span>
</ms-table>
<batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter"/>
<batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter" />
</div>
</el-col>
<el-col :span="12">
<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-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-csv v-if="editData.type === 'CSV' && !loading" ref="csv" :editData.sync="editData"
:disabled="disabled"/>
<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-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-csv
v-if="editData.type === 'CSV' && !loading"
ref="csv"
:editData.sync="editData"
:disabled="disabled" />
<div v-if="editData.type" style="float: right">
<el-button size="small" style="margin-left: 10px" type="primary" @click="confirmVariable"
<el-button
size="small"
style="margin-left: 10px"
type="primary"
@click="confirmVariable"
v-permission="[
'PROJECT_API_SCENARIO:READ+EDIT',
'PROJECT_API_SCENARIO:READ+CREATE',
@ -160,7 +169,11 @@
<el-button size="small" style="margin-left: 10px" @click="cancelVariable"
>{{ $t('commons.cancel') }}
</el-button>
<el-button v-if="showDelete" size="small" style="margin-left: 10px" @click="deleteVariable"
<el-button
v-if="showDelete"
size="small"
style="margin-left: 10px"
@click="deleteVariable"
v-permission="[
'PROJECT_API_SCENARIO:READ+EDIT',
'PROJECT_API_SCENARIO:READ+CREATE',
@ -196,19 +209,22 @@
</el-link>
</el-row>
<div style="min-height: 400px">
<ms-api-key-value :items="headers" :suggestions="headerSuggestions"/>
<batch-add-parameter @batchSave="batchSaveHeader" ref="batchAddHeader"/>
<ms-api-key-value :items="headers" :suggestions="headerSuggestions" />
<batch-add-parameter @batchSave="batchSaveHeader" ref="batchAddHeader" />
</div>
</el-tab-pane>
</el-tabs>
<template v-slot:footer>
<div>
<el-button type="primary" @click="save"
<el-button
type="primary"
@click="save"
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>
</div>
</template>
@ -227,19 +243,18 @@ import MsEditCounter from './EditCounter';
import MsEditRandom from './EditRandom';
import MsEditListValue from './EditListValue';
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 BatchAddParameter from '../../../definition/components/basis/BatchAddParameter';
import {KeyValue} from '../../../definition/model/ApiTestModel';
import {REQUEST_HEADERS} from 'metersphere-frontend/src/utils/constants';
import { KeyValue } from '../../../definition/model/ApiTestModel';
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 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 {hasPermissions} from 'metersphere-frontend/src/utils/permission';
import { hasPermissions } from 'metersphere-frontend/src/utils/permission';
export default {
name: 'MsVariableList',
@ -424,7 +439,7 @@ export default {
}
},
handleClick(command) {
this.editData = {delimiter: ',', quotedData: 'false'};
this.editData = { delimiter: ',', quotedData: 'false' };
this.editData.type = command;
this.addParameters(this.editData);
},
@ -502,7 +517,6 @@ export default {
this.visible = false;
},
close() {
this.visible = false;
let saveVariables = [];
this.variables.forEach((item) => {
item.hidden = undefined;
@ -510,6 +524,11 @@ export default {
item.showMore = false;
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.searchType = '';
@ -517,16 +536,18 @@ export default {
this.editData = {};
if (
(diff(JSON.parse(JSON.stringify(this.variables)), this.variablesOld) ||
diff(JSON.parse(JSON.stringify(this.headers)), this.headersOld))
&& hasPermissions('PROJECT_API_SCENARIO:READ+EDIT',
diff(JSON.parse(JSON.stringify(this.headers)), this.headersOld)) &&
hasPermissions(
'PROJECT_API_SCENARIO:READ+EDIT',
'PROJECT_API_SCENARIO:READ+CREATE',
'PROJECT_API_SCENARIO:READ+COPY')
'PROJECT_API_SCENARIO:READ+COPY'
)
) {
this.$emit('setVariables', saveVariables, this.headers);
}
},
addVariable() {
this.editData = {delimiter: ',', quotedData: 'false', files: []};
this.editData = { delimiter: ',', quotedData: 'false', files: [] };
this.editData.type = this.selectType;
this.showDelete = false;
if (this.editData.type === 'CSV' && this.$refs.csv) {