From 087bcceca685452cc4d8198b669c450cb220f36d Mon Sep 17 00:00:00 2001 From: song-tianyang Date: Wed, 30 Nov 2022 17:55:38 +0800 Subject: [PATCH] =?UTF-8?q?feat(=E6=8E=A5=E5=8F=A3=E6=B5=8B=E8=AF=95):=20H?= =?UTF-8?q?TTP=E9=83=A8=E5=88=86=E5=8F=82=E6=95=B0=E5=88=97=E6=94=AF?= =?UTF-8?q?=E6=8C=81=E5=8F=AF=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit HTTP部分参数列支持可配置 --- .../commons/json-schema/JsonSchemaEditor.vue | 61 ++-- .../json-schema/schema/editor/main.vue | 140 +++++++- .../schema/editor/mock/MockComplete.vue | 1 + .../definition/components/ApiVariable.vue | 299 ++++++++++++------ .../definition/components/body/ApiBody.vue | 21 +- .../document/components/ApiInfoCollapse.vue | 108 +++++-- .../document/components/ApiInformation.vue | 2 + .../document/components/ApiRequestInfo.vue | 173 +++++++--- .../components/JsonSchema/JsonSchemaPanel.vue | 101 ++++-- .../components/JsonSchema/JsonSchemaShow.vue | 49 ++- .../request/components/ApiParamsConfig.vue | 63 ++++ .../request/http/ApiHttpRequestForm.vue | 28 +- .../frontend/src/components/table/MsTable.vue | 294 ++++++++++------- .../frontend/src/utils/custom_field.js | 103 ++++-- 14 files changed, 1048 insertions(+), 395 deletions(-) create mode 100644 api-test/frontend/src/business/definition/components/request/components/ApiParamsConfig.vue diff --git a/api-test/frontend/src/business/commons/json-schema/JsonSchemaEditor.vue b/api-test/frontend/src/business/commons/json-schema/JsonSchemaEditor.vue index 881cb114eb..e9fcb1b6a4 100644 --- a/api-test/frontend/src/business/commons/json-schema/JsonSchemaEditor.vue +++ b/api-test/frontend/src/business/commons/json-schema/JsonSchemaEditor.vue @@ -2,25 +2,38 @@
- - {{ this.$t('commons.import') }} - +
+ + {{ this.$t('commons.import') }} + +
+ +
+
- +
+ +
@@ -37,13 +50,15 @@ @@ -416,4 +510,9 @@ export default { width: 40px; padding: 0px !important; } + +.param-header-span { + margin-bottom: 5px; + font-weight: 600; +} diff --git a/api-test/frontend/src/business/definition/components/body/ApiBody.vue b/api-test/frontend/src/business/definition/components/body/ApiBody.vue index 9c92a422b5..cefe864d3f 100644 --- a/api-test/frontend/src/business/definition/components/body/ApiBody.vue +++ b/api-test/frontend/src/business/definition/components/body/ApiBody.vue @@ -26,8 +26,12 @@
- - {{ $t('commons.batch_add') }} + + {{ $t('commons.batch_add') }} +
@@ -89,6 +94,8 @@ import MsApiBinaryVariable from './ApiBinaryVariable'; import MsApiFromUrlVariable from './ApiFromUrlVariable'; import BatchAddParameter from '../basis/BatchAddParameter'; import Convert from '@/business/commons/json-schema/convert/convert'; +import { getApiParamsConfigFields } from 'metersphere-frontend/src/utils/custom_field'; +import ApiParamsConfig from '@/business/definition/components/request/components/ApiParamsConfig'; export default { name: 'MsApiBody', @@ -101,6 +108,7 @@ export default { MsApiFromUrlVariable, MsJsonCodeEdit, BatchAddParameter, + ApiParamsConfig, }, props: { body: { @@ -131,6 +139,8 @@ export default { }, data() { return { + reloadedApiVariable: true, + apiParamsConfigFields: getApiParamsConfigFields(this), type: BODY_TYPE, modes: ['text', 'json', 'xml', 'html'], jsonSchema: 'JSON', @@ -146,6 +156,13 @@ export default { }, }, methods: { + refreshApiParamsField() { + this.reloadedApiVariable = false; + this.$nextTick(() => { + this.reloadedApiVariable = true; + }); + }, + isObj(x) { let type = typeof x; return x !== null && (type === 'object' || type === 'function'); diff --git a/api-test/frontend/src/business/definition/components/document/components/ApiInfoCollapse.vue b/api-test/frontend/src/business/definition/components/document/components/ApiInfoCollapse.vue index a433e735ab..f6290c1e1c 100644 --- a/api-test/frontend/src/business/definition/components/document/components/ApiInfoCollapse.vue +++ b/api-test/frontend/src/business/definition/components/document/components/ApiInfoCollapse.vue @@ -36,8 +36,17 @@
+ +
+ +
+ import { getCurrentUser } from 'metersphere-frontend/src/utils/token'; import { getUUID } from 'metersphere-frontend/src/utils'; -import tableAdvancedSetting from '@/business/definition/components/document/components/plugin/TableAdvancedSetting'; +import TableAdvancedSetting from '@/business/definition/components/document/components/plugin/TableAdvancedSetting'; +import ApiParamsConfig from '@/business/definition/components/request/components/ApiParamsConfig'; +import { getApiParamsConfigFields, getShowFields } from 'metersphere-frontend/src/utils/custom_field'; export default { name: 'ApiInfoCollapse', - components: { tableAdvancedSetting }, + components: { TableAdvancedSetting, ApiParamsConfig }, data() { return { active: true, expandAllRow: false, language: 'zh_CN', + reloadedApiVariable: true, tableData: [], + storageKey: 'API_PARAMS_SHOW_FIELD', + apiParamsConfigFields: getApiParamsConfigFields(this), tableExpandButtonId: 'docTableExpandBtn' + getUUID(), expandTitle: this.$t('commons.expand_all'), - tableColumnArr: [ - { id: 1, prop: 'name', label: this.$t('api_definition.document.name') }, - { - id: 2, - prop: 'isRequired', - label: this.$t('api_definition.document.is_required'), - }, - { - id: 3, - prop: 'value', - label: this.$t('api_definition.document.value'), - }, - { - id: 4, - prop: 'description', - label: this.$t('api_definition.document.desc'), - }, - ], + tableColumnArr: [], }; }, props: { @@ -116,6 +113,7 @@ export default { tableColumnType: String, remarks: String, isRequest: Boolean, + tableType: String, isResponse: Boolean, tableCanExpand: { type: Boolean, @@ -138,6 +136,7 @@ export default { this.language = user.language; } this.tableData = this.getJsonArr(this.stringData); + this.formatTableData(); }, created: function () { //获取language，用于改变表格的展开、收起文字 zh_CN/zh_TW/en_US @@ -145,7 +144,9 @@ export default { if (user) { this.language = user.language; } + this.initTableColumnArr(); this.tableData = this.getJsonArr(this.stringData); + this.formatTableData(); }, mounted() { //获取language，用于改变表格的展开、收起文字 zh_CN/zh_TW/en_US @@ -154,6 +155,7 @@ export default { this.language = user.language; } this.tableData = this.getJsonArr(this.stringData); + this.formatTableData(); }, computed: { showSlotComponent() { @@ -163,6 +165,7 @@ export default { watch: { stringData() { this.tableData = this.getJsonArr(this.stringData); + this.formatTableData(); }, expandAllRow() { if (this.$refs.expandTable) { @@ -184,6 +187,71 @@ export default { }, }, methods: { + formatTableData() { + if (this.tableData) { + this.tableData.forEach((item) => { + if (item.urlEncode !== null && item.urlEncode !== undefined) { + if (item.urlEncode === true) { + item.urlEncode = this.$t('commons.yes'); + } else { + item.urlEncode = this.$t('commons.no'); + } + } + }); + } + }, + refreshApiParamsField() { + this.initTableColumnArr(); + this.reloadedApiVariable = false; + this.$nextTick(() => { + this.reloadedApiVariable = true; + }); + }, + initTableColumnArr() { + this.tableColumnArr = [ + { id: 1, prop: 'name', label: this.$t('api_definition.document.name') }, + { + id: 2, + prop: 'isRequired', + label: this.$t('api_definition.document.is_required'), + }, + { + id: 3, + prop: 'value', + label: this.$t('api_definition.document.value'), + }, + ]; + if (this.tableType === 'rest' || this.tableType === 'query') { + let apiParamConfigArr = getShowFields(this.storageKey); + if (apiParamConfigArr) { + apiParamConfigArr.forEach((item) => { + let tableColumn = {}; + if (item === 'MIX_LENGTH') { + tableColumn.id = 5; + tableColumn.prop = 'min'; + tableColumn.label = this.$t('schema.minLength'); + } else if (item === 'MAX_LENGTH') { + tableColumn.id = 6; + tableColumn.prop = 'max'; + tableColumn.label = this.$t('schema.maxLength'); + } else if (item === 'ENCODE') { + tableColumn.id = 7; + tableColumn.prop = 'urlEncode'; + tableColumn.label = this.$t('commons.encode'); + } else if (item === 'DESCRIPTION') { + tableColumn.id = 8; + tableColumn.prop = 'description'; + tableColumn.label = this.$t('commons.description'); + } else { + tableColumn = null; + } + if (tableColumn) { + this.tableColumnArr.push(tableColumn); + } + }); + } + } + }, getRowClassName({ row, rowIndex }) { let classname = 'autofix-table-row '; // 通过判断给不需要展开行功能的数据设置样式，通过样式去隐藏展开行图标 diff --git a/api-test/frontend/src/business/definition/components/document/components/ApiInformation.vue b/api-test/frontend/src/business/definition/components/document/components/ApiInformation.vue index 5009e093ba..6c3426ea42 100644 --- a/api-test/frontend/src/business/definition/components/document/components/ApiInformation.vue +++ b/api-test/frontend/src/business/definition/components/document/components/ApiInformation.vue @@ -50,12 +50,14 @@ diff --git a/api-test/frontend/src/business/definition/components/document/components/ApiRequestInfo.vue b/api-test/frontend/src/business/definition/components/document/components/ApiRequestInfo.vue index 8ba9662ae3..4091b0d5f8 100644 --- a/api-test/frontend/src/business/definition/components/document/components/ApiRequestInfo.vue +++ b/api-test/frontend/src/business/definition/components/document/components/ApiRequestInfo.vue @@ -2,54 +2,44 @@
- - - - - - - - - - - +
+ +
+ +
+ + + + + + + + +
+
@@ -87,10 +77,12 @@ import JsonSchemaShow from '@/business/definition/components/document/components import tableAdvancedSetting from '@/business/definition/components/document/components/plugin/TableAdvancedSetting'; import { getCurrentUser } from 'metersphere-frontend/src/utils/token'; import { getUUID } from 'metersphere-frontend/src/utils'; +import { getApiParamsConfigFields, getShowFields } from 'metersphere-frontend/src/utils/custom_field'; +import ApiParamsConfig from '@/business/definition/components/request/components/ApiParamsConfig'; export default { name: 'ApiRequestInfo', - components: { JsonSchemaShow, tableAdvancedSetting }, + components: { JsonSchemaShow, tableAdvancedSetting, ApiParamsConfig }, data() { return { tableData: [], @@ -98,8 +90,11 @@ export default { tableExpandButtonId: 'docTableExpandBtn' + getUUID(), active: true, expandAllRow: false, + apiParamStorageKey: 'API_PARAMS_SHOW_FIELD', expandTitle: this.$t('commons.expand_all'), + apiParamsConfigFields: getApiParamsConfigFields(this), formParamTypes: ['form-data', 'x-www-from-urlencoded', 'BINARY'], + tableColumnArr: [], }; }, props: { @@ -108,38 +103,45 @@ export default { activated() { if (this.apiInfo && this.apiInfo.requestBodyFormData) { this.tableData = this.getJsonArr(this.apiInfo.requestBodyFormData); + this.formatTableData(); } //获取language，用于改变表格的展开、收起文字 zh_CN/zh_TW/en_US let user = getCurrentUser(); if (user) { this.language = user.language; } + this.initTableColumn(); }, created: function () { if (this.apiInfo && this.apiInfo.requestBodyFormData) { this.tableData = this.getJsonArr(this.apiInfo.requestBodyFormData); + this.formatTableData(); } //获取language，用于改变表格的展开、收起文字 zh_CN/zh_TW/en_US let user = getCurrentUser(); if (user) { this.language = user.language; } + this.initTableColumn(); }, mounted() { if (this.apiInfo && this.apiInfo.requestBodyFormData) { this.tableData = this.getJsonArr(this.apiInfo.requestBodyFormData); + this.formatTableData(); } //获取language，用于改变表格的展开、收起文字 zh_CN/zh_TW/en_US let user = getCurrentUser(); if (user) { this.language = user.language; } + this.initTableColumn(); }, computed: {}, watch: { 'apiInfo.requestBodyFormData': { handler(v) { this.tableData = this.getJsonArr(this.apiInfo.requestBodyFormData); + this.formatTableData(); }, deep: true, }, @@ -163,6 +165,79 @@ export default { }, }, methods: { + formatTableData() { + if (this.tableData) { + this.tableData.forEach((item) => { + if (item.urlEncode !== null && item.urlEncode !== undefined) { + if (item.urlEncode === true) { + item.urlEncode = this.$t('commons.yes'); + } else { + item.urlEncode = this.$t('commons.no'); + } + } + if (item.enable !== null && item.enable !== undefined) { + if (item.enable === true) { + item.enable = this.$t('commons.yes'); + } else { + item.enable = this.$t('commons.no'); + } + } + }); + } + }, + refreshApiParamsField() { + this.initTableColumn(); + this.reloadedApiVariable = false; + this.$nextTick(() => { + this.reloadedApiVariable = true; + }); + }, + initTableColumn() { + this.tableColumnArr = [ + { id: 1, prop: 'name', label: this.$t('api_definition.document.name') }, + { id: 2, prop: 'contentType', label: this.$t('api_definition.document.type') }, + { + id: 3, + prop: 'enable', + label: this.$t('api_definition.document.is_required'), + }, + { + id: 4, + prop: 'value', + label: this.$t('api_definition.document.value'), + }, + ]; + if (this.formParamTypes.includes(this.apiInfo.requestBodyParamType)) { + let apiParamConfigArr = getShowFields(this.apiParamStorageKey); + if (apiParamConfigArr) { + apiParamConfigArr.forEach((item) => { + let tableColumn = {}; + if (item === 'MIX_LENGTH') { + tableColumn.id = 5; + tableColumn.prop = 'min'; + tableColumn.label = this.$t('schema.minLength'); + } else if (item === 'MAX_LENGTH') { + tableColumn.id = 6; + tableColumn.prop = 'max'; + tableColumn.label = this.$t('schema.maxLength'); + } else if (item === 'ENCODE') { + tableColumn.id = 7; + tableColumn.prop = 'urlEncode'; + tableColumn.label = this.$t('commons.encode'); + } else if (item === 'DESCRIPTION') { + tableColumn.id = 8; + tableColumn.prop = 'description'; + tableColumn.label = this.$t('commons.description'); + } else { + tableColumn = null; + } + if (tableColumn) { + this.tableColumnArr.push(tableColumn); + } + }); + } + } + }, getRowClassName({ row, rowIndex }) { let classname = 'autofix-table-row '; // 通过判断给不需要展开行功能的数据设置样式，通过样式去隐藏展开行图标 diff --git a/api-test/frontend/src/business/definition/components/document/components/JsonSchema/JsonSchemaPanel.vue b/api-test/frontend/src/business/definition/components/document/components/JsonSchema/JsonSchemaPanel.vue index 188e173313..23c2c00a35 100644 --- a/api-test/frontend/src/business/definition/components/document/components/JsonSchema/JsonSchemaPanel.vue +++ b/api-test/frontend/src/business/definition/components/document/components/JsonSchema/JsonSchemaPanel.vue @@ -1,7 +1,7 @@