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

fix(项目设置): 修复环境设置历史数据不能编辑备注的缺陷 

--bug=1020201 --user=王孝刚 【接口测试】
github#20027【升级数据兼容问题】从1.19.2版本升到2.2.1后，环境中的变量备注不能编辑
https://www.tapd.cn/55049933/s/1306342
This commit is contained in:
wxg0103 2022-11-28 15:25:11 +08:00 committed by wxg0103
parent d2c357b094
commit 7e3b069dfc
1 changed files with 263 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

358
framework/sdk-parent/frontend/src/components/environment/commons/ApiScenarioVariables.vue
View File

@ -1,24 +1,49 @@
<template>
<div>
<div>
<div style="padding-bottom: 10px;float: left">
<el-input :placeholder="$t('api_test.search_by_variables')" size="mini" v-model="selectVariable"
<div style="padding-bottom: 10px; float: left">
<el-input
:placeholder="$t('api_test.search_by_variables')"
size="mini"
v-model="selectVariable"
@change="filter"
@keyup.enter="filter">
@keyup.enter="filter"
>
</el-input>
</div>
<div style="padding-bottom: 10px; float: right;">
<ms-table-button v-permission="['PROJECT_ENVIRONMENT:READ+IMPORT']" icon="el-icon-box"
:content="$t('commons.import')" @click="importJSON"/>
<ms-table-button v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']" icon="el-icon-box"
:content="$t('commons.export')" @click="exportJSON"/>
<el-link style="margin-left: 10px" @click="batchAdd" type="primary" :disabled="isReadOnly">
<div style="padding-bottom: 10px; float: right">
<ms-table-button
v-permission="['PROJECT_ENVIRONMENT:READ+IMPORT']"
icon="el-icon-box"
:content="$t('commons.import')"
@click="importJSON"
/>
<ms-table-button
v-permission="['PROJECT_ENVIRONMENT:READ+EXPORT']"
icon="el-icon-box"
:content="$t('commons.export')"
@click="exportJSON"
/>
<el-link
style="margin-left: 10px"
@click="batchAdd"
type="primary"
:disabled="isReadOnly"
>
{{ $t("commons.batch_add") }}
</el-link>
</div>
</div>
<div
style="border:1px #DCDFE6 solid; min-height: 300px;border-radius: 4px ;width: 99% ;margin-top: 10px; clear: both">
style="
border: 1px #dcdfe6 solid;
min-height: 300px;
border-radius: 4px;
width: 99%;
margin-top: 10px;
clear: both;
"
>
<ms-table
v-loading="loading"
row-key="id"
@ -29,73 +54,134 @@
:remember-order="true"
:highlightCurrentRow="true"
@refresh="onChange"
ref="variableTable">
<ms-table-column
prop="num"
sortable
label="ID"
min-width="60">
ref="variableTable"
>
<ms-table-column prop="num" sortable label="ID" min-width="60">
</ms-table-column>
<ms-table-column prop="name" :label="$t('api_test.variable_name')" min-width="200" sortable>
<ms-table-column
prop="name"
:label="$t('api_test.variable_name')"
min-width="200"
sortable
>
<template slot-scope="scope">
<el-input
v-model="scope.row.name" size="mini"
maxlength="200" :placeholder="$t('api_test.variable_name')" show-word-limit
@change="change"/>
v-model="scope.row.name"
size="mini"
maxlength="200"
:placeholder="$t('api_test.variable_name')"
show-word-limit
@change="change"
/>
</template>
</ms-table-column>
<ms-table-column prop="type" :label="$t('test_track.case.type')" min-width="140" sortable>
<ms-table-column
prop="type"
:label="$t('test_track.case.type')"
min-width="140"
sortable
>
<template slot-scope="scope">
<el-select v-model="scope.row.type" :placeholder="$t('commons.please_select')" size="mini"
@change="changeType(scope.row)">
<el-option v-for="item in typeSelectOptions " :key="item.value" :label="item.label" :value="item.value"/>
<el-select
v-model="scope.row.type"
:placeholder="$t('commons.please_select')"
size="mini"
@change="changeType(scope.row)"
>
<el-option
v-for="item in typeSelectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</template>
</ms-table-column>
<el-table-column prop="value" :label="$t('api_test.value')"
min-width="200px" sortable show-overflow-tooltip>
<el-table-column
prop="value"
:label="$t('api_test.value')"
min-width="200px"
sortable
show-overflow-tooltip
>
<template slot-scope="scope">
<el-input v-model="scope.row.value" size="mini" v-if="scope.row.type !=='CSV'"
<el-input
v-model="scope.row.value"
size="mini"
v-if="scope.row.type !== 'CSV'"
:placeholder="valueText(scope.row)"
:disabled="scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'"/>
<csv-file-upload :parameter="scope.row" v-if="scope.row.type ==='CSV'"/>
:disabled="
scope.row.type === 'COUNTER' || scope.row.type === 'RANDOM'
"
/>
<csv-file-upload
:parameter="scope.row"
v-if="scope.row.type === 'CSV'"
/>
</template>
</el-table-column>
<ms-table-column prop="description" :label="$t('commons.remark')"
min-width="160" sortable>
<ms-table-column
prop="description"
:label="$t('commons.remark')"
min-width="160"
sortable
>
<template slot-scope="scope">
<el-input v-model="scope.row.description" size="mini"/>
<el-input v-model="scope.row.description" size="mini" />
</template>
</ms-table-column>
<ms-table-column :label="$t('commons.operating')" width="150">
<template v-slot:default="scope">
<span>
<el-switch v-model="scope.row.enable" size="mini"/>
<el-tooltip effect="dark" :content="$t('commons.remove')" placement="top-start">
<el-button icon="el-icon-delete" type="danger" circle size="mini" style="margin-left: 10px"
@click="remove(scope.row)" v-if="isDisable(scope.row)"/>
<el-switch v-model="scope.row.enable" size="mini" />
<el-tooltip
effect="dark"
:content="$t('commons.remove')"
placement="top-start"
>
<el-button
icon="el-icon-delete"
type="danger"
circle
size="mini"
style="margin-left: 10px"
@click="remove(scope.row)"
v-if="isDisable(scope.row)"
/>
</el-tooltip>
<el-tooltip 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
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>
</template>
</ms-table-column>
</ms-table>
</div>
<batch-add-parameter @batchSave="batchSave" ref="batchAdd"/>
<batch-add-parameter @batchSave="batchSave" ref="batchAdd" />
<api-variable-setting ref="apiVariableSetting"></api-variable-setting>
<variable-import ref="variableImport" @mergeData="mergeData"></variable-import>
<variable-import
ref="variableImport"
@mergeData="mergeData"
></variable-import>
</div>
</template>
<script>
import {KeyValue} from "../../../model/EnvTestModel";
import { KeyValue } from "../../../model/EnvTestModel";
import MsApiVariableInput from "./ApiVariableInput";
import BatchAddParameter from "./BatchAddParameter";
import MsTableButton from "../../MsTableButton";
@ -103,7 +189,7 @@ import MsTable from "../../table/MsTable";
import MsTableColumn from "../../table/MsTableColumn";
import ApiVariableSetting from "./ApiVariableSetting";
import CsvFileUpload from "./variable/CsvFileUpload";
import {downloadFile, getUUID, operationConfirm} from "../../../utils";
import { downloadFile, getUUID, operationConfirm } from "../../../utils";
import VariableImport from "./variable/VariableImport";
export default {
@ -116,45 +202,44 @@ export default {
MsTableColumn,
ApiVariableSetting,
CsvFileUpload,
VariableImport
VariableImport,
},
props: {
description: String,
items: Array,
isReadOnly: {
type: Boolean,
default: false
default: false,
},
showVariable: {
type: Boolean,
default: true
default: true,
},
showCopy: {
type: Boolean,
default: true
default: true,
},
},
data() {
return {
loading: false,
screenHeight: '400px',
screenHeight: "400px",
batchButtons: [
{
name: this.$t('api_test.definition.request.batch_delete'),
name: this.$t("api_test.definition.request.batch_delete"),
handleClick: this.handleDeleteBatch,
},
],
typeSelectOptions: [
{value: 'CONSTANT', label: this.$t('api_test.automation.constant')},
{value: 'LIST', label: this.$t('test_track.case.list')},
{value: 'CSV', label: 'CSV'},
{value: 'COUNTER', label: this.$t('api_test.automation.counter')},
{value: 'RANDOM', label: this.$t('api_test.automation.random')},
{ value: "CONSTANT", label: this.$t("api_test.automation.constant") },
{ value: "LIST", label: this.$t("test_track.case.list") },
{ value: "CSV", label: "CSV" },
{ value: "COUNTER", label: this.$t("api_test.automation.counter") },
{ value: "RANDOM", label: this.$t("api_test.automation.random") },
],
variables: {},
selectVariable: '',
selectVariable: "",
editData: {},
}
};
},
watch: {
items: {
@ -163,14 +248,14 @@ export default {
this.sortParameters();
},
immediate: true,
deep: true
}
deep: true,
},
},
methods: {
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.$emit('change', this.variables);
this.$emit("change", this.variables);
},
change: function () {
let isNeedCreate = true;
@ -192,64 +277,87 @@ export default {
}
});
if (repeatKey !== "") {
this.$warning(this.$t('api_test.environment.common_config') + "【" + repeatKey + "】" + this.$t('load_test.param_is_duplicate'));
this.$warning(
this.$t("api_test.environment.common_config") +
"【" +
repeatKey +
"】" +
this.$t("load_test.param_is_duplicate")
);
}
if (isNeedCreate) {
this.variables.push(new KeyValue({enable: true, id: getUUID(), type: 'CONSTANT'}));
this.variables.push(
new KeyValue({ enable: true, id: getUUID(), type: "CONSTANT" })
);
}
this.$emit('change', this.variables);
this.$emit("change", this.variables);
// TODO 检查key重复
},
changeType(data) {
data.value = '';
if (!data.delimiter || (!data.files && data.files.length === 0) || !data.quotedData) {
data.delimiter = ',';
data.value = "";
if (
!data.delimiter ||
(!data.files && data.files.length === 0) ||
!data.quotedData
) {
data.delimiter = ",";
data.files = [];
data.quotedData = 'false';
data.quotedData = "false";
}
},
valueText(data) {
switch (data.type) {
case 'LIST':
return this.$t('api_test.environment.list_info');
case 'CONSTANT':
return this.$t('api_test.value');
case 'COUNTER':
case 'RANDOM':
return this.$t('api_test.environment.advanced_setting');
case "LIST":
return this.$t("api_test.environment.list_info");
case "CONSTANT":
return this.$t("api_test.value");
case "COUNTER":
case "RANDOM":
return this.$t("api_test.environment.advanced_setting");
default:
return this.$t('api_test.value');
return this.$t("api_test.value");
}
},
querySearch(queryString, cb) {
let restaurants = [{value: "UTF-8"}, {value: "UTF-16"}, {value: "GB2312"}, {value: "ISO-8859-15"}, {value: "US-ASCll"}];
let results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
let restaurants = [
{ 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 返回建议列表的数据
cb(results);
},
sortParameters() {
let index = 1;
this.variables.forEach(item => {
this.variables.forEach((item) => {
item.num = index;
if (!item.type || item.type === 'text') {
item.type = 'CONSTANT';
if (!item.type || item.type === "text") {
item.type = "CONSTANT";
}
if (!item.id) {
item.id = getUUID();
}
if (item.remark) {
item.description = item.remark;
this.$set(item, "description", item.remark);
item.remark = undefined;
}
index++;
});
},
handleDeleteBatch() {
operationConfirm(this, this.$t('api_test.environment.variables_delete_info') + " ？", () => {
operationConfirm(
this,
this.$t("api_test.environment.variables_delete_info") + " ？",
() => {
let ids = this.$refs.variableTable.selectRows;
ids.forEach(row => {
ids.forEach((row) => {
if (row.id) {
const index = this.variables.findIndex(d => d.id === row.id);
const index = this.variables.findIndex((d) => d.id === row.id);
if (index !== this.variables.length - 1) {
this.variables.splice(index, 1);
}
@ -258,13 +366,18 @@ export default {
this.sortParameters();
this.$refs.variableTable.cancelCurrentRow();
this.$refs.variableTable.clear();
});
}
);
},
filter() {
let datas = [];
this.variables.forEach(item => {
this.variables.forEach((item) => {
if (this.selectVariable && this.selectVariable != "" && item.name) {
if (item.name.toLowerCase().indexOf(this.selectVariable.toLowerCase()) == -1) {
if (
item.name
.toLowerCase()
.indexOf(this.selectVariable.toLowerCase()) == -1
) {
item.hidden = true;
} else {
item.hidden = undefined;
@ -280,28 +393,30 @@ export default {
this.$refs.apiVariableSetting.open(data);
},
isDisable: function (row) {
const index = this.variables.findIndex(d => d.name === row.name);
const index = this.variables.findIndex((d) => d.name === row.name);
return this.variables.length - 1 !== index;
},
_handleBatchVars(data) {
let params = data.split("\n");
let keyValues = [];
params.forEach(item => {
params.forEach((item) => {
if (item) {
let line = item.split(/：|:/);
let values = item.split(line[0] + ":");
let required = false;
keyValues.push(new KeyValue({
keyValues.push(
new KeyValue({
name: line[0],
required: required,
value: values[1],
type: 'CONSTANT',
type: "CONSTANT",
valid: false,
file: false,
encode: true,
enable: true,
description: undefined
}));
description: undefined,
})
);
}
});
return keyValues;
@ -312,18 +427,22 @@ export default {
batchSave(data) {
if (data) {
let keyValues = this._handleBatchVars(data);
keyValues.forEach(keyValue => {
keyValues.forEach((keyValue) => {
let isAdd = true;
this.variables.forEach(item => {
this.variables.forEach((item) => {
if (item.name === keyValue.name) {
item.value = keyValue.value;
isAdd = false;
}
})
});
if (isAdd) {
this.variables.splice(this.variables.indexOf(i => !i.name), 0, keyValue);
this.variables.splice(
this.variables.indexOf((i) => !i.name),
0,
keyValue
);
}
})
});
}
},
onChange() {
@ -331,50 +450,55 @@ export default {
},
exportJSON() {
if (this.$refs.variableTable.selectIds.length < 1) {
this.$warning(this.$t('api_test.environment.select_variable'));
this.$warning(this.$t("api_test.environment.select_variable"));
return;
}
let variablesJson = [];
let messages = '';
let messages = "";
let rows = this.$refs.variableTable.selectRows;
rows.forEach(row => {
if (row.type === 'CSV') {
messages = this.$t('variables.csv_download')
rows.forEach((row) => {
if (row.type === "CSV") {
messages = this.$t("variables.csv_download");
}
if (row.name) {
variablesJson.push(row);
}
})
if (messages !== '') {
});
if (messages !== "") {
this.$warning(messages);
return;
}
downloadFile('MS_' + variablesJson.length + '_Environments_variables.json', JSON.stringify(variablesJson));
downloadFile(
"MS_" + variablesJson.length + "_Environments_variables.json",
JSON.stringify(variablesJson)
);
},
importJSON() {
this.$refs.variableImport.open();
},
mergeData(data, modeId) {
JSON.parse(data).map(importData => {
JSON.parse(data).map((importData) => {
importData.id = getUUID();
importData.enable = true;
importData.showMore = false;
let sameNameIndex = this.variables.findIndex(d => d.name === importData.name);
let sameNameIndex = this.variables.findIndex(
(d) => d.name === importData.name
);
if (sameNameIndex !== -1) {
if (modeId === 'fullCoverage') {
if (modeId === "fullCoverage") {
this.variables.splice(sameNameIndex, 1, importData);
}
} else {
this.variables.splice(this.variables.length - 1, 0, importData);
}
})
}
});
},
},
created() {
if (this.items.length === 0) {
this.items.push(new KeyValue({enable: true}));
}
this.items.push(new KeyValue({ enable: true }));
}
},
};
</script>