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

feat接口定义_请求体为form-data_的json参数的可以增加参数的优化

This commit is contained in:
wxg0103 2021-09-28 10:26:45 +08:00 committed by fit2-zhao
parent a1abd2fd76
commit 0a47d283a2
1 changed files with 213 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

425
frontend/src/business/components/api/definition/components/ApiVariable.vue
View File

@ -10,7 +10,7 @@
<el-row type="flex" :gutter="20" justify="space-between" align="middle"> <el-row type="flex" :gutter="20" justify="space-between" align="middle">
<el-col class="kv-checkbox" v-if="isShowEnable"> <el-col class="kv-checkbox" v-if="isShowEnable">
<el-checkbox v-if="!isDisable(index)" v-model="item.enable" <el-checkbox v-if="!isDisable(index)" v-model="item.enable"
:disabled="isReadOnly"/> :disabled="isReadOnly"/>
</el-col> </el-col>
<span style="margin-left: 10px" v-else></span> <span style="margin-left: 10px" v-else></span>
<i class="el-icon-top" style="cursor:pointer" @click="moveTop(index)"/> <i class="el-icon-top" style="cursor:pointer" @click="moveTop(index)"/>
@ -100,247 +100,248 @@
</template> </template>
<script> <script>
import {KeyValue, Scenario} from "../model/ApiTestModel"; import {KeyValue, Scenario} from "../model/ApiTestModel";
import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants"; import {JMETER_FUNC, MOCKJS_FUNC} from "@/common/js/constants";
import MsApiVariableAdvance from "./ApiVariableAdvance"; import MsApiVariableAdvance from "./ApiVariableAdvance";
import MsApiVariableJson from "./ApiVariableJson"; import MsApiVariableJson from "./ApiVariableJson";
import MsApiBodyFileUpload from "./body/ApiBodyFileUpload"; import MsApiBodyFileUpload from "./body/ApiBodyFileUpload";
import {REQUIRED} from "../model/JsonData"; import {REQUIRED} from "../model/JsonData";
import Vue from 'vue'; import Vue from 'vue';
import ApiVariableSetting from "@/business/components/api/definition/components/ApiVariableSetting"; import ApiVariableSetting from "@/business/components/api/definition/components/ApiVariableSetting";
export default { export default {
name: "MsApiVariable", name: "MsApiVariable",
components: {ApiVariableSetting, MsApiBodyFileUpload, MsApiVariableAdvance , MsApiVariableJson}, components: {ApiVariableSetting, MsApiBodyFileUpload, MsApiVariableAdvance, MsApiVariableJson},
props: { props: {
keyPlaceholder: String, keyPlaceholder: String,
valuePlaceholder: String, valuePlaceholder: String,
description: String, description: String,
parameters: Array, parameters: Array,
rest: Array, rest: Array,
environment: Object, environment: Object,
scenario: Scenario, scenario: Scenario,
type: { type: {
type: String, type: String,
default: '' default: ''
},
isReadOnly: {
type: Boolean,
default: false
},
isShowEnable: {
type: Boolean,
default: true
},
suggestions: Array,
withMorSetting: Boolean
}, },
data() { isReadOnly: {
return { type: Boolean,
currentItem: null, default: false
requireds: [ },
{name: this.$t('commons.selector.required'), id: true}, isShowEnable: {
{name: this.$t('commons.selector.not_required'), id: false} type: Boolean,
], default: true
isSelectAll: true, },
isActive: true, suggestions: Array,
withMorSetting: Boolean
},
data() {
return {
currentItem: null,
requireds: [
{name: this.$t('commons.selector.required'), id: true},
{name: this.$t('commons.selector.not_required'), id: false}
],
isSelectAll: true,
isActive: true,
}
},
watch: {
isSelectAll: function (to, from) {
if (from == false && to == true) {
this.selectAll();
} else if (from == true && to == false) {
this.invertSelect();
} }
}, },
watch: { },
isSelectAll: function(to, from) { computed: {
if(from == false && to == true) { keyText() {
this.selectAll(); return this.keyPlaceholder || this.$t("api_test.key");
} else if(from == true && to == false) {
this.invertSelect();
}
},
}, },
computed: { valueText() {
keyText() { return this.valuePlaceholder || this.$t("api_test.value");
return this.keyPlaceholder || this.$t("api_test.key"); }
}, },
valueText() { methods: {
return this.valuePlaceholder || this.$t("api_test.value"); moveBottom(index) {
if (this.parameters.length < 2 || index === this.parameters.length - 2) {
return;
} }
let thisRow = this.parameters[index];
let nextRow = this.parameters[index + 1];
Vue.set(this.parameters, index + 1, thisRow);
Vue.set(this.parameters, index, nextRow)
}, },
methods: { moveTop(index) {
moveBottom(index) { if (index === 0) {
if (this.parameters.length < 2 || index === this.parameters.length - 2) { return;
return; }
} let thisRow = this.parameters[index];
let thisRow = this.parameters[index]; let lastRow = this.parameters[index - 1];
let nextRow = this.parameters[index + 1]; Vue.set(this.parameters, index - 1, thisRow);
Vue.set(this.parameters, index + 1, thisRow); Vue.set(this.parameters, index, lastRow)
Vue.set(this.parameters, index, nextRow)
},
moveTop(index) {
if (index === 0) {
return;
}
let thisRow = this.parameters[index];
let lastRow = this.parameters[index - 1];
Vue.set(this.parameters, index - 1, thisRow);
Vue.set(this.parameters, index, lastRow)
}, },
remove: function (index) { remove: function (index) {
// 移除整行输入控件及内容 // 移除整行输入控件及内容
this.parameters.splice(index, 1); this.parameters.splice(index, 1);
this.$emit('change', this.parameters); this.$emit('change', this.parameters);
}, },
change: function () { change: function () {
let isNeedCreate = true; let isNeedCreate = true;
let removeIndex = -1; let removeIndex = -1;
this.parameters.forEach((item, index) => { this.parameters.forEach((item, index) => {
if (!item.name && !item.value) { if (!item.name && !item.value) {
// 多余的空行 // 多余的空行
if (index !== this.parameters.length - 1) { if (index !== this.parameters.length - 1) {
removeIndex = index; removeIndex = index;
}
// 没有空行，需要创建空行
isNeedCreate = false;
} }
}); // 没有空行，需要创建空行
if (isNeedCreate) { isNeedCreate = false;
this.parameters.push(new KeyValue({
type: 'text',
enable: true,
uuid: this.uuid(),
contentType: 'text/plain'
}));
} }
this.$emit('change', this.parameters); });
// TODO 检查key重复 if (isNeedCreate) {
},
isDisable: function (index) {
return this.parameters.length - 1 == index;
},
querySearch(queryString, cb) {
let suggestions = this.suggestions;
let results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
funcSearch(queryString, cb) {
let funcs = MOCKJS_FUNC.concat(JMETER_FUNC);
let results = queryString ? funcs.filter(this.funcFilter(queryString)) : funcs;
// 调用 callback 返回建议列表的数据
cb(results);
},
funcFilter(queryString) {
return (func) => {
return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
};
},
uuid: function () {
return (((1 + Math.random()) * 0x100000) | 0).toString(16).substring(1);
},
advanced(item) {
if (item.type === 'json'){
this.$refs.variableJson.open(item);
this.currentItem = item;
}else {
this.$refs.variableAdvance.open();
this.currentItem = item;
}
},
typeChange(item) {
if (item.type === 'file') {
item.contentType = 'application/octet-stream';
} else if (item.type === 'text'){
item.contentType = 'text/plain';
} else {
item.contentType = 'application/json'
}
this.reload();
},
selectAll() {
this.parameters.forEach(item => {
item.enable = true;
});
},
invertSelect() {
this.parameters.forEach(item => {
item.enable = false;
});
},
reload() {
this.isActive = false;
this.$nextTick(() => {
this.isActive = true;
});
},
openApiVariableSetting(item) {
this.$refs.apiVariableSetting.open(item);
},
callback(item){
this.currentItem.value=item;
}
},
created() {
if (this.parameters.length === 0 || this.parameters[this.parameters.length - 1].name) {
this.parameters.push(new KeyValue({ this.parameters.push(new KeyValue({
type: 'text', type: 'text',
enable: true, enable: true,
required: true,
uuid: this.uuid(), uuid: this.uuid(),
contentType: 'text/plain' contentType: 'text/plain'
})); }));
} }
this.$emit('change', this.parameters);
// TODO 检查key重复
},
isDisable: function (index) {
return this.parameters.length - 1 == index;
},
querySearch(queryString, cb) {
let suggestions = this.suggestions;
let results = queryString ? suggestions.filter(this.createFilter(queryString)) : suggestions;
cb(results);
},
createFilter(queryString) {
return (restaurant) => {
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
};
},
funcSearch(queryString, cb) {
let funcs = MOCKJS_FUNC.concat(JMETER_FUNC);
let results = queryString ? funcs.filter(this.funcFilter(queryString)) : funcs;
// 调用 callback 返回建议列表的数据
cb(results);
},
funcFilter(queryString) {
return (func) => {
return (func.name.toLowerCase().indexOf(queryString.toLowerCase()) > -1);
};
},
uuid: function () {
return (((1 + Math.random()) * 0x100000) | 0).toString(16).substring(1);
},
advanced(item) {
if (item.type === 'json') {
this.$refs.variableJson.open(item);
this.currentItem = item;
} else {
this.$refs.variableAdvance.open();
this.currentItem = item;
}
},
typeChange(item) {
if (item.type === 'file') {
item.contentType = 'application/octet-stream';
} else if (item.type === 'text') {
item.contentType = 'text/plain';
} else {
item.contentType = 'application/json'
}
this.reload();
},
selectAll() {
this.parameters.forEach(item => {
item.enable = true;
});
},
invertSelect() {
this.parameters.forEach(item => {
item.enable = false;
});
},
reload() {
this.isActive = false;
this.$nextTick(() => {
this.isActive = true;
});
},
openApiVariableSetting(item) {
this.$refs.apiVariableSetting.open(item);
},
callback(item) {
this.currentItem.value = item;
this.currentItem = null;
}
},
created() {
if (this.parameters.length === 0 || this.parameters[this.parameters.length - 1].name) {
this.parameters.push(new KeyValue({
type: 'text',
enable: true,
required: true,
uuid: this.uuid(),
contentType: 'text/plain'
}));
} }
} }
}
</script> </script>
<style scoped> <style scoped>
.kv-description { .kv-description {
font-size: 13px; font-size: 13px;
} }
.kv-row { .kv-row {
margin-top: 10px; margin-top: 10px;
} }
.kv-delete { .kv-delete {
width: 60px; width: 60px;
} }
.kv-select { .kv-select {
width: 50%; width: 50%;
} }
.el-autocomplete { .el-autocomplete {
width: 100%; width: 100%;
} }
.kv-checkbox { .kv-checkbox {
width: 20px; width: 20px;
margin-right: 10px; margin-right: 10px;
} }
.advanced-item-value >>> .el-dialog__body { .advanced-item-value >>> .el-dialog__body {
padding: 15px 25px; padding: 15px 25px;
} }
.el-row { .el-row {
margin-bottom: 5px; margin-bottom: 5px;
} }
.kv-type { .kv-type {
width: 70px; width: 70px;
} }
.pointer { .pointer {
cursor: pointer; cursor: pointer;
color: #1E90FF; color: #1E90FF;
} }
.kv-setting { .kv-setting {
width: 40px; width: 40px;
padding: 0px !important; padding: 0px !important;
} }
</style> </style>