refactor(接口测试): 优化场景变量保存提示 (#12783)

--bug=1012377 --user=王孝刚 [接口测试]github#12753优化场景变量保存提示
https://www.tapd.cn/55049933/s/1138564

Co-authored-by: wxg0103 <727495428@qq.com>
This commit is contained in:
MeterSphere Bot 2022-04-19 14:17:02 +08:00 committed by GitHub
parent c5c5e76fed
commit 8b85321494
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 390 additions and 372 deletions

View File

@ -26,14 +26,17 @@
</div>
<div style="float: right">
<el-select v-model="selectType" :placeholder="$t('test_resource_pool.type')" style="width: 90px" size="small" @change="filter">
<el-select v-model="selectType" :placeholder="$t('test_resource_pool.type')" style="width: 90px"
size="small" @change="filter">
<el-option value="CONSTANT" :label="$t('api_test.automation.constant')"></el-option>
<el-option value="LIST" :label="$t('test_track.case.list')"></el-option>
<el-option value="CSV" label="CSV"></el-option>
<el-option value="COUNTER" :label="$t('api_test.automation.counter')"></el-option>
<el-option value="RANDOM" :label="$t('api_test.automation.random')"></el-option>
</el-select>
<el-button size="small" style="margin-left: 10px" type="primary" @click="addVariable">{{ $t('commons.add') }}</el-button>
<el-button size="small" style="margin-left: 10px" type="primary" @click="addVariable">
{{ $t('commons.add') }}
</el-button>
<el-link @click="batchAddParameter" type="primary" :disabled="disabled" style="margin-left: 10px">
{{ $t("commons.batch_add") }}
</el-link>
@ -42,56 +45,56 @@
<el-row>
<el-col :span="12">
<div style="border:1px #DCDFE6 solid; min-height: 400px;border-radius: 4px ;width: 100% ;">
<ms-table
v-loading="loading"
row-key="id"
:data="variables"
:total="variables.length"
:screen-height="screenHeight"
:batch-operators="batchButtons"
:remember-order="true"
:highlightCurrentRow="true"
:fields.sync="fields"
:field-key="tableHeaderKey"
@handleRowClick="handleRowClick"
ref="variableTable">
<ms-table
v-loading="loading"
row-key="id"
:data="variables"
:total="variables.length"
:screen-height="screenHeight"
:batch-operators="batchButtons"
:remember-order="true"
:highlightCurrentRow="true"
:fields.sync="fields"
:field-key="tableHeaderKey"
@handleRowClick="handleRowClick"
ref="variableTable">
<span v-for="item in fields" :key="item.key">
<ms-table-column
prop="num"
:field="item"
:fields-width="fieldsWidth"
sortable
label="ID"
min-width="60">
prop="num"
:field="item"
:fields-width="fieldsWidth"
sortable
label="ID"
min-width="60">
</ms-table-column>
<ms-table-column
prop="name"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.variable_name')"
min-width="100"
sortable>
prop="name"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.variable_name')"
min-width="100"
sortable>
</ms-table-column>
<ms-table-column
prop="type"
:field="item"
:fields-width="fieldsWidth"
:label="$t('test_track.case.type')"
min-width="70"
sortable>
prop="type"
:field="item"
:fields-width="fieldsWidth"
:label="$t('test_track.case.type')"
min-width="70"
sortable>
<template v-slot:default="scope">
<span>{{ types.get(scope.row.type) }}</span>
</template>
</ms-table-column>
<ms-table-column
prop="value"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.value')"
sortable>
prop="value"
:field="item"
:fields-width="fieldsWidth"
:label="$t('api_test.value')"
sortable>
</ms-table-column>
</span>
</ms-table>
</ms-table>
<batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter"/>
</div>
</el-col>
@ -102,9 +105,16 @@
<ms-edit-list-value v-if="editData.type=='LIST'" ref="listValue" :editData="editData"/>
<ms-edit-csv v-if="editData.type=='CSV'" ref="csv" :editData.sync="editData"/>
<div v-if="editData.type" style="float: right">
<el-button size="small" style="margin-left: 10px" type="primary" @click="confirmVariable">{{ $t('commons.confirm') }}</el-button>
<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">{{ $t('commons.delete') }}</el-button>
<el-button size="small" style="margin-left: 10px" type="primary" @click="confirmVariable">
{{ $t('commons.confirm') }}
</el-button>
<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">
{{ $t('commons.delete') }}
</el-button>
</div>
</el-col>
</el-row>
@ -142,374 +152,382 @@
</template>
<script>
import MsEditConstant from "./EditConstant";
import MsDialogFooter from "../../../../common/components/MsDialogFooter";
import MsTableHeader from "@/business/components/common/components/MsTableHeader";
import MsTablePagination from "@/business/components/common/pagination/TablePagination";
import MsEditCounter from "./EditCounter";
import MsEditRandom from "./EditRandom";
import MsEditListValue from "./EditListValue";
import MsEditCsv from "./EditCsv";
import {getUUID} from "@/common/js/utils";
import MsApiKeyValue from "../../../definition/components/ApiKeyValue";
import BatchAddParameter from "../../../definition/components/basis/BatchAddParameter";
import {KeyValue} from "../../../definition/model/ApiTestModel";
import {REQUEST_HEADERS} from "@/common/js/constants";
import MsEditConstant from "./EditConstant";
import MsDialogFooter from "../../../../common/components/MsDialogFooter";
import MsTableHeader from "@/business/components/common/components/MsTableHeader";
import MsTablePagination from "@/business/components/common/pagination/TablePagination";
import MsEditCounter from "./EditCounter";
import MsEditRandom from "./EditRandom";
import MsEditListValue from "./EditListValue";
import MsEditCsv from "./EditCsv";
import {getUUID} from "@/common/js/utils";
import MsApiKeyValue from "../../../definition/components/ApiKeyValue";
import BatchAddParameter from "../../../definition/components/basis/BatchAddParameter";
import {KeyValue} from "../../../definition/model/ApiTestModel";
import {REQUEST_HEADERS} from "@/common/js/constants";
import MsTable from "@/business/components/common/components/table/MsTable";
import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
import {
getCustomTableWidth,
getCustomTableHeader
} from "@/common/js/tableUtils";
import MsTable from "@/business/components/common/components/table/MsTable";
import MsTableColumn from "@/business/components/common/components/table/MsTableColumn";
import {
getCustomTableWidth,
getCustomTableHeader
} from "@/common/js/tableUtils";
export default {
name: "MsVariableList",
components: {
MsEditConstant,
MsDialogFooter,
MsTableHeader,
MsTablePagination,
MsEditCounter,
MsEditRandom,
MsEditListValue,
MsEditCsv,
MsApiKeyValue,
BatchAddParameter,
MsTableColumn,
MsTable,
const jsondiffpatch = require('jsondiffpatch');
export default {
name: "MsVariableList",
components: {
MsEditConstant,
MsDialogFooter,
MsTableHeader,
MsTablePagination,
MsEditCounter,
MsEditRandom,
MsEditListValue,
MsEditCsv,
MsApiKeyValue,
BatchAddParameter,
MsTableColumn,
MsTable,
},
data() {
return {
variables: [],
headers: [],
variablesOld: [],
headersOld: [],
activeName: "variable",
searchType: "",
selectVariable: "",
condition: {},
types: new Map([
['CONSTANT', this.$t('api_test.automation.constant')],
['LIST', this.$t('test_track.case.list')],
['CSV', 'CSV'],
['COUNTER', this.$t('api_test.automation.counter')],
['RANDOM', this.$t('api_test.automation.random')]
]),
visible: false,
selection: [],
loading: false,
currentPage: 1,
editData: {},
pageSize: 10,
total: 0,
headerSuggestions: REQUEST_HEADERS,
disabled: false,
selectType: "",
showDelete: false,
tableHeaderKey: "VARIABLE_LIST_TABLE",
fields: getCustomTableHeader('VARIABLE_LIST_TABLE'),
fieldsWidth: getCustomTableWidth('TRACK_REPORT_TABLE'),
screenHeight: '400px',
batchButtons: [
{
name: this.$t('api_test.definition.request.batch_delete'),
handleClick: this.handleDeleteBatch,
},
],
};
},
methods: {
batchAddParameter() {
this.$refs.batchAddParameter.open();
},
data() {
return {
variables: [],
headers: [],
activeName: "variable",
searchType: "",
selectVariable: "",
condition: {},
types: new Map([
['CONSTANT', this.$t('api_test.automation.constant')],
['LIST', this.$t('test_track.case.list')],
['CSV', 'CSV'],
['COUNTER', this.$t('api_test.automation.counter')],
['RANDOM', this.$t('api_test.automation.random')]
]),
visible: false,
selection: [],
loading: false,
currentPage: 1,
editData: {},
pageSize: 10,
total: 0,
headerSuggestions: REQUEST_HEADERS,
disabled: false,
selectType: "",
showDelete: false,
tableHeaderKey: "VARIABLE_LIST_TABLE",
fields: getCustomTableHeader('VARIABLE_LIST_TABLE'),
fieldsWidth: getCustomTableWidth('TRACK_REPORT_TABLE'),
screenHeight: '400px',
batchButtons: [
{
name: this.$t('api_test.definition.request.batch_delete'),
handleClick: this.handleDeleteBatch,
},
],
};
batchAddHeader() {
this.$refs.batchAddHeader.open();
},
methods: {
batchAddParameter() {
this.$refs.batchAddParameter.open();
},
batchAddHeader() {
this.$refs.batchAddHeader.open();
},
_handleBatchVars(data) {
if (data) {
let params = data.split("\n");
let keyValues = [];
params.forEach(item => {
let line = item.split(/|:/);
let required = false;
keyValues.unshift(new KeyValue({
name: line[0],
required: required,
value: line[1],
description: line[2],
type: "text",
valid: false,
file: false,
encode: true,
enable: true,
contentType: "text/plain"
}));
})
return keyValues;
}
},
batchSaveHeader(data) {
if (data) {
let keyValues = this._handleBatchVars(data);
keyValues.forEach(item => {
this.format(this.headers, item);
});
}
},
format(array, obj) {
if (array) {
let isAdd = true;
for (let i in array) {
let item = array[i];
if (item.name === obj.name) {
item.value = obj.value;
isAdd = false;
}
}
if (isAdd) {
this.headers.unshift(obj);
_handleBatchVars(data) {
if (data) {
let params = data.split("\n");
let keyValues = [];
params.forEach(item => {
let line = item.split(/|:/);
let required = false;
keyValues.unshift(new KeyValue({
name: line[0],
required: required,
value: line[1],
description: line[2],
type: "text",
valid: false,
file: false,
encode: true,
enable: true,
contentType: "text/plain"
}));
})
return keyValues;
}
},
batchSaveHeader(data) {
if (data) {
let keyValues = this._handleBatchVars(data);
keyValues.forEach(item => {
this.format(this.headers, item);
});
}
},
format(array, obj) {
if (array) {
let isAdd = true;
for (let i in array) {
let item = array[i];
if (item.name === obj.name) {
item.value = obj.value;
isAdd = false;
}
}
},
batchSaveParameter(data) {
if (data) {
let keyValues = this._handleBatchVars(data);
keyValues.forEach(item => {
item.type = 'CONSTANT';
this.addParameters(item);
});
if (isAdd) {
this.headers.unshift(obj);
}
},
handleClick(command) {
this.editData = {delimiter: ",", quotedData: 'false'};
this.editData.type = command;
this.addParameters(this.editData);
},
}
},
batchSaveParameter(data) {
if (data) {
let keyValues = this._handleBatchVars(data);
keyValues.forEach(item => {
item.type = 'CONSTANT';
this.addParameters(item);
});
}
},
handleClick(command) {
this.editData = {delimiter: ",", quotedData: 'false'};
this.editData.type = command;
this.addParameters(this.editData);
},
addParameters(v) {
v.id = getUUID();
if (v.type === 'CSV') {
v.delimiter = ",";
v.quotedData = false;
addParameters(v) {
v.id = getUUID();
if (v.type === 'CSV') {
v.delimiter = ",";
v.quotedData = false;
}
this.variables.push(v);
let index = 1;
this.variables.forEach(item => {
item.num = index;
index++;
});
},
sortParamters() {
let index = 1;
this.variables.forEach(item => {
item.num = index;
index++;
});
},
updateParameters(v) {
this.editData = JSON.parse(JSON.stringify(v));
this.updateFiles();
let datas = [];
this.variables.forEach(item => {
if (item.id === v.id) {
item = v;
}
this.variables.push(v);
let index = 1;
this.variables.forEach(item => {
item.num = index;
index++;
});
},
sortParamters() {
let index = 1;
this.variables.forEach(item => {
item.num = index;
index++;
});
},
updateParameters(v) {
this.editData = JSON.parse(JSON.stringify(v));
this.updateFiles();
let datas = [];
this.variables.forEach(item => {
if(item.id === v.id){
item = v;
}
datas.push(item);
});
this.variables = datas;
},
select(selection) {
this.selection = selection.map(s => s.id);
},
open: function (variables, headers, disabled) {
if (variables) {
this.variables = variables;
datas.push(item);
});
this.variables = datas;
},
select(selection) {
this.selection = selection.map(s => s.id);
},
open: function (variables, headers, disabled) {
if (variables) {
this.variables = variables;
}
if (headers) {
this.headers = headers;
}
this.variablesOld = JSON.parse(JSON.stringify(this.variables));
this.headersOld = JSON.parse(JSON.stringify(this.headers));
this.visible = true;
this.disabled = disabled;
},
save() {
this.visible = false;
},
close() {
this.visible = false;
let saveVariables = [];
this.variables.forEach(item => {
item.hidden = undefined;
if (item.name && item.name != "") {
saveVariables.push(item);
}
if (headers) {
this.headers = headers;
}
this.visible = true;
this.disabled = disabled;
},
save() {
this.visible = false;
},
close() {
this.visible = false;
let saveVariables = [];
this.variables.forEach(item => {
item.hidden = undefined;
if (item.name && item.name != "") {
saveVariables.push(item);
}
});
this.selectVariable = "";
this.searchType = "";
});
this.selectVariable = "";
this.searchType = "";
if (jsondiffpatch.diff(JSON.parse(JSON.stringify(this.variables)), this.variablesOld) || jsondiffpatch.diff(JSON.parse(JSON.stringify(this.headers)), this.headersOld)) {
this.$emit('setVariables', saveVariables, this.headers);
},
addVariable() {
this.editData = {delimiter: ",", quotedData: 'false',files:[]};
this.editData.type = this.selectType;
this.showDelete = false;
}
},
addVariable() {
this.editData = {delimiter: ",", quotedData: 'false', files: []};
this.editData.type = this.selectType;
this.showDelete = false;
this.$refs.variableTable.cancelCurrentRow();
},
confirmVariable() {
if (this.editData && (this.editData.name == undefined || this.editData.name == '')) {
this.$warning("变量名不能为空");
return;
}
//
if (this.showDelete) {
this.updateParameters(this.editData);
} else {
//
this.addParameters(this.editData);
this.addVariable();
this.$refs.variableTable.cancelCurrentRow();
},
confirmVariable() {
if (this.editData && (this.editData.name == undefined || this.editData.name == '')) {
this.$warning("变量名不能为空");
return;
}
this.$success(this.$t('commons.save_success'));
},
cancelVariable() {
this.$refs.variableTable.cancelCurrentRow();
//
this.editData = {};
},
deleteVariable() {
let ids = [this.editData.id];
if (ids.length == 0) {
this.$warning("请选择一条数据删除");
return;
}
let message = "";
ids.forEach(row => {
const v = this.variables.find(d => d.id === row);
if (v.name) {
message += v.name + ";";
}
//
if(this.showDelete){
this.updateParameters(this.editData);
}else{
//
this.addParameters(this.editData);
this.addVariable();
this.$refs.variableTable.cancelCurrentRow();
}
this.$success(this.$t('commons.save_success'));
},
cancelVariable() {
this.$refs.variableTable.cancelCurrentRow();
//
this.editData = {};
},
deleteVariable() {
let ids = [this.editData.id];
if (ids.length == 0) {
this.$warning("请选择一条数据删除");
return;
}
let message = "";
ids.forEach(row => {
const v = this.variables.find(d => d.id === row);
if (v.name) {
message += v.name + ";";
}
});
if (message !== "") {
message = message.substr(0, message.length - 1);
this.$alert('是否确认删除变量:【 ' + message + " 】?", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
});
this.sortParamters();
this.editData = {};
}
}
});
} else {
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
});
this.sortParamters();
this.editData = {};
}
},
handleDeleteBatch() {
this.$alert("是否确认删除所选变量" + ' ' + " ", '', {
});
if (message !== "") {
message = message.substr(0, message.length - 1);
this.$alert('是否确认删除变量:【 ' + message + " 】?", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let ids = this.$refs.variableTable.selectIds;
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
});
// this.editData = {type: "CONSTANT"};
this.sortParamters();
this.editData = {};
this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
}
}
});
},
filter() {
let datas = [];
this.variables.forEach(item => {
if (this.searchType && this.searchType != "" && this.selectVariable && this.selectVariable != "") {
if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL')
} else {
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
});
this.sortParamters();
this.editData = {};
}
},
handleDeleteBatch() {
this.$alert("是否确认删除所选变量" + ' ' + " ", '', {
confirmButtonText: this.$t('commons.confirm'),
callback: (action) => {
if (action === 'confirm') {
let ids = this.$refs.variableTable.selectIds;
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
});
// this.editData = {type: "CONSTANT"};
this.sortParamters();
this.editData = {};
this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
}
}
});
},
filter() {
let datas = [];
this.variables.forEach(item => {
if (this.searchType && this.searchType != "" && this.selectVariable && this.selectVariable != "") {
if ((item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL')
|| (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1)) {
item.hidden = true;
} else {
item.hidden = undefined;
}
} else if (this.selectVariable && this.selectVariable != "") {
if (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
item.hidden = true;
} else {
item.hidden = undefined;
}
} else if (this.searchType && this.searchType != "") {
if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL') {
item.hidden = true;
} else {
item.hidden = undefined;
}
item.hidden = true;
} else {
item.hidden = undefined;
}
if(this.searchType === 'ALL' && !((this.selectVariable && this.selectVariable != ""))){
} else if (this.selectVariable && this.selectVariable != "") {
if (item.name && item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
item.hidden = true;
} else {
item.hidden = undefined;
}
datas.push(item);
});
this.variables = datas;
},
createFilter(queryString) {
return item => {
return (item.type && item.type.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
handleRowClick(row) {
//
this.editData = JSON.parse(JSON.stringify(row));
this.updateFiles();
this.showDelete = true;
},
updateFiles(){
this.variables.forEach(item => {
if(item.id === this.editData.id){
this.editData.files = item.files
} else if (this.searchType && this.searchType != "") {
if (item.type && item.type.toLowerCase().indexOf(this.searchType.toLowerCase()) == -1 && this.searchType != 'ALL') {
item.hidden = true;
} else {
item.hidden = undefined;
}
});
}
} else {
item.hidden = undefined;
}
if (this.searchType === 'ALL' && !((this.selectVariable && this.selectVariable != ""))) {
item.hidden = undefined;
}
datas.push(item);
});
this.variables = datas;
},
createFilter(queryString) {
return item => {
return (item.type && item.type.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
handleRowClick(row) {
//
this.editData = JSON.parse(JSON.stringify(row));
this.updateFiles();
this.showDelete = true;
},
updateFiles() {
this.variables.forEach(item => {
if (item.id === this.editData.id) {
this.editData.files = item.files
}
});
}
};
}
};
</script>
<style>
.ms-variable-hidden-row {
display: none;
}
.ms-variable-hidden-row {
display: none;
}
.ms-variable-header {
background: #783887;
color: white;
height: 18px;
border-radius: 42%;
}
.ms-variable-header {
background: #783887;
color: white;
height: 18px;
border-radius: 42%;
}
.ms-variable-link {
float: right;
margin-right: 45px;
}
.ms-variable-link {
float: right;
margin-right: 45px;
}
fieldset {
padding: 0px;
margin: 0px;
min-width: 100%;
min-inline-size: 0px;
border: 0px;
}
fieldset {
padding: 0px;
margin: 0px;
min-width: 100%;
min-inline-size: 0px;
border: 0px;
}
.ms-select {
width: 100px;
margin-right: 10px;
}
.ms-select {
width: 100px;
margin-right: 10px;
}
</style>