test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(接口自动化): 场景变量交互优化 

--story=1005318 --user=周骏弘 场景变量交互优化 https://www.tapd.cn/55049933/s/1095248
This commit is contained in:
junhong 2022-01-21 11:39:07 +08:00 committed by jianxing
parent 9e14d3c700
commit e8c2bcc5ba
6 changed files with 422 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

684
frontend/src/business/components/api/automation/scenario/variable/VariableList.vue
View File

@ -15,6 +15,7 @@
@keyup.enter="filter">
<el-select v-model="searchType" slot="prepend" :placeholder="$t('test_resource_pool.type')"
style="width: 90px" @change="filter">
<el-option value="ALL" :label="$t('api_test.automation.all')"></el-option>
<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>
@ -23,24 +24,17 @@
</el-select>
</el-input>
</div>
<div style="float: right">
<el-dropdown split-button type="primary" @command="handleClick" @click="handleClick('CONSTANT')"
size="small" style="margin-left: 10px">
{{ $t('commons.add') }}
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="CONSTANT">{{ $t('api_test.automation.constant') }}</el-dropdown-item>
<el-dropdown-item command="LIST">{{ $t('test_track.case.list') }}</el-dropdown-item>
<el-dropdown-item command="CSV">CSV</el-dropdown-item>
<el-dropdown-item command="COUNTER">{{ $t('api_test.automation.counter') }}</el-dropdown-item>
<el-dropdown-item command="RANDOM">{{ $t('api_test.automation.random') }}</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<el-button size="small" style="margin-left: 10px" @click="deleteVariable">{{ $t('commons.delete') }}
</el-button>
</div>
<div style="float: right; margin-top: 10px">
<el-link @click="batchAddParameter" type="primary" :disabled="disabled">
<div style="float: right">
<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-link @click="batchAddParameter" type="primary" :disabled="disabled" style="margin-left: 10px">
{{ $t("commons.batch_add") }}
</el-link>
</div>
@ -48,23 +42,56 @@
<el-row>
<el-col :span="12">
<div style="border:1px #DCDFE6 solid; min-height: 400px;border-radius: 4px ;width: 100% ;">
<el-table ref="table" border :data="variables" class="adjust-table"
:row-class-name="tableRowClassName"
@select-all="select"
@select="select"
@row-click="edit"
v-loading="loading" height="400px">
<el-table-column type="selection" width="38"/>
<el-table-column prop="num" label="ID" sortable width="60"/>
<el-table-column prop="name" :label="$t('api_test.variable_name')" sortable
show-overflow-tooltip/>
<el-table-column prop="type" :label="$t('test_track.case.type')" width="70">
<template v-slot:default="scope">
<span>{{ types.get(scope.row.type) }}</span>
</template>
</el-table-column>
<el-table-column prop="value" :label="$t('api_test.value')" show-overflow-tooltip/>
</el-table>
<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">
</ms-table-column>
<ms-table-column
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>
<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>
</ms-table-column>
</span>
</ms-table>
<batch-add-parameter @batchSave="batchSaveParameter" ref="batchAddParameter"/>
</div>
</el-col>
@ -74,11 +101,14 @@
<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'" 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>
</div>
</el-col>
</el-row>
</div>
</el-tab-pane>
<el-tab-pane :label="$t('api_test.scenario.headers')" name="headers">
<!-- 请求头-->
@ -112,278 +142,364 @@
</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";
export default {
name: "MsVariableList",
components: {
MsEditConstant,
MsDialogFooter,
MsTableHeader,
MsTablePagination,
MsEditCounter,
MsEditRandom,
MsEditListValue,
MsEditCsv,
MsApiKeyValue,
BatchAddParameter
},
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,
};
},
methods: {
batchAddParameter() {
this.$refs.batchAddParameter.open();
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,
},
batchAddHeader() {
this.$refs.batchAddHeader.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,
},
],
};
},
_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;
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);
}
}
if (isAdd) {
this.headers.unshift(obj);
},
batchSaveParameter(data) {
if (data) {
let keyValues = this._handleBatchVars(data);
keyValues.forEach(item => {
item.type = 'CONSTANT';
this.addParameters(item);
});
}
}
},
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;
}
this.variables.push(v);
let index = 1;
this.variables.forEach(item => {
item.num = index;
index++;
});
}
},
handleClick(command) {
this.editData = {delimiter: ",", quotedData: 'false'};
this.editData.type = command;
this.addParameters(this.editData);
},
edit(row) {
this.$refs.table.clearSelection();
this.$refs.table.toggleRowSelection(row);
this.selection = [row.id];
this.editData = row;
},
tableRowClassName(row) {
if (row.row.hidden) {
return 'ms-variable-hidden-row';
}
return '';
},
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++;
});
},
select(selection) {
this.selection = selection.map(s => s.id);
},
isSelect(row) {
return this.selection.includes(row.id);
},
open: function (variables, headers, disabled) {
if (variables) {
this.variables = variables;
}
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);
},
sortParamters() {
let index = 1;
this.variables.forEach(item => {
item.num = index;
index++;
});
},
updateParameters(v) {
this.editData = JSON.parse(JSON.stringify(v));
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;
}
});
this.selectVariable = "";
this.searchType = "";
this.$emit('setVariables', saveVariables, this.headers);
},
deleteVariable() {
let ids = Array.from(this.selection);
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 (headers) {
this.headers = headers;
}
});
if (message !== "") {
message = message.substr(0, message.length - 1);
this.$alert('是否确认删除变量：【 ' + message + " 】？", '', {
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.$emit('setVariables', saveVariables, this.headers);
},
addVariable() {
this.editData = {delimiter: ",", quotedData: 'false'};
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();
}
},
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("是否确认删除所选变量" + ' ' + " ？", '', {
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();
}
}
});
} else {
ids.forEach(row => {
const index = this.variables.findIndex(d => d.id === row);
this.variables.splice(index, 1);
},
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;
}
} else {
item.hidden = undefined;
}
if(this.searchType === 'ALL' && !((this.selectVariable && this.selectVariable != ""))){
item.hidden = undefined;
}
datas.push(item);
});
}
this.selection = [];
this.editData = {type: "CONSTANT"};
},
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) || (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) {
item.hidden = true;
} else {
item.hidden = undefined;
}
} else {
item.hidden = undefined;
}
datas.push(item);
});
this.variables = datas;
},
createFilter(queryString) {
return item => {
return (item.type && item.type.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
};
},
}
};
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.showDelete = true;
},
}
};
</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;
}
</style>

12
frontend/src/business/components/common/components/table/MsTable.vue
View File

@ -15,6 +15,7 @@
:height="screenHeight"
v-loading="tableIsLoading"
:row-key="rowKey"
:row-class-name="tableRowClassName"
:cell-class-name="addPaddingColClass"
:highlight-current-row="highlightCurrentRow"
ref="table" @row-click="handleRowClick">
@ -400,6 +401,9 @@ export default {
handlePageChange() {
this.$emit('pageChange');
},
cancelCurrentRow() {
this.$refs.table.setCurrentRow(-1);
},
clear() {
this.clearSelectRows();
},
@ -446,7 +450,13 @@ export default {
|| column.columnKey ==='batchBtnCol') {
return 'padding-col';
}
}
},
tableRowClassName(row) {
if (row.row.hidden) {
return 'ms-variable-hidden-row';
}
return '';
},
}
};
</script>

8
frontend/src/common/js/default-table-header.js
View File

@ -213,6 +213,14 @@ export let CUSTOM_TABLE_HEADER = {
{id: 'passRate', key: '8', label: 'test_track.report.list.pass_rate'},
],
// 场景变量
VARIABLE_LIST_TABLE: [
{id: 'num', key: '1', label: "ID"},
{id: 'name', key: '2', label: 'api_test.variable_name'},
{id: 'type', key: '3', label: 'test_track.case.type'},
{id: 'value', key: '4', label: 'api_test.value'},
],
//缺陷列表
ISSUE_LIST: [
{id: 'num', key: '1', label: 'test_track.issue.id'},

1
frontend/src/i18n/en-US.js
View File

@ -1283,6 +1283,7 @@ export default {
automation: {
open_expansion: "One-click expansion",
close_expansion: "One-click storage",
all: "all",
constant: "constant",
counter: "counter",
random: "random",

1
frontend/src/i18n/zh-CN.js
View File

@ -1288,6 +1288,7 @@ export default {
automation: {
open_expansion: "一键展开",
close_expansion: "一键收起",
all: "全部",
constant: "常量",
counter: "计数器",
random: "随机数",

1
frontend/src/i18n/zh-TW.js
View File

@ -1288,6 +1288,7 @@ export default {
automation: {
open_expansion: "一鍵展開",
close_expansion: "一鍵收起",
all: "全部",
constant: "常量",
counter: "計數器",
random: "隨機數",