diff --git a/data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue b/data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue index c9b32439..e75cc517 100644 --- a/data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue +++ b/data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue @@ -136,11 +136,11 @@ > @@ -542,7 +542,6 @@ ref="paramsSettingDialog" :params-list="dataForm.config.paramsList" @saveParams="saveParams" - @replaceParams="replaceParams" /> { - acc[cur.name] = cur.value - return acc - }, {}) - // 将url中 ${xxx} 替换成 ${params.xxx} - const str = string.replace(/\$\{(\w+)\}/g, (match, p1) => { - return '${params.' + p1 + '}' - }) - const transformStr = '' - // 将字符串中的${}替换为变量, 使用eval执行 - eval('transformStr = `' + str + '`') - return transformStr - }, - evalArrFunc (paramsList, arr) { - // 取name作为变量名, value作为变量值 { name: '站三', token: '123'} - const params = paramsList.reduce((acc, cur) => { - acc[cur.name] = cur.value - return acc - }, {}) - - // 取name作为变量名, value作为变量值 { _name: '${name}', _token: '${token}'} - const paramsListObj = arr.reduce((acc, cur) => { - acc[cur.key] = cur.value - return acc - }, {}) - // 转成字符串 - const paramsListStr = JSON.stringify(paramsListObj) - - // 将url中 ${xxx} 替换成 ${params.xxx} - const str = paramsListStr.replace(/\$\{(\w+)\}/g, (match, p1) => { - return '${params.' + p1 + '}' - }) - const transformStr = '' - // 将字符串中的${}替换为变量, 使用eval执行 - eval('transformStr = `' + str + '`') - const obj = JSON.parse(transformStr) - return obj - }, + // // 配置完参数后，将参数的值放入到对应的请求位置进行替换 + // replaceParams (paramsList) { + // this.newDataForm = _.cloneDeep(this.dataForm) + // this.newDataForm.config.url = this.evalStrFunc(paramsList, this.newDataForm.config.url) + // this.newDataForm.config.headers = this.evalArrFunc(paramsList, this.newDataForm.config.headers) + // this.newDataForm.config.params = this.evalArrFunc(paramsList, this.newDataForm.config.params) + // this.newDataForm.config.body = this.evalStrFunc(paramsList, this.newDataForm.config.body) + // }, + // evalStrFunc (paramsList, string) { + // // 取name作为变量名, value作为变量值 { name: '站三', token: '123'} + // const params = paramsList.reduce((acc, cur) => { + // acc[cur.name] = cur.value + // return acc + // }, {}) + // // 将url中 ${xxx} 替换成 ${params.xxx} + // const str = string.replace(/\$\{(\w+)\}/g, (match, p1) => { + // return '${params.' + p1 + '}' + // }) + // const transformStr = '' + // // 将字符串中的${}替换为变量, 使用eval执行 + // eval('transformStr = `' + str + '`') + // return transformStr + // }, + // evalArrFunc (paramsList, arr) { + // // 取name作为变量名, value作为变量值 { name: '站三', token: '123'} + // const params = paramsList.reduce((acc, cur) => { + // acc[cur.name] = cur.value + // return acc + // }, {}) + // + // // 取name作为变量名, value作为变量值 { _name: '${name}', _token: '${token}'} + // const paramsListObj = arr.reduce((acc, cur) => { + // acc[cur.key] = cur.value + // return acc + // }, {}) + // // 转成字符串 + // const paramsListStr = JSON.stringify(paramsListObj) + // + // // 将url中 ${xxx} 替换成 ${params.xxx} + // const str = paramsListStr.replace(/\$\{(\w+)\}/g, (match, p1) => { + // return '${params.' + p1 + '}' + // }) + // const transformStr = '' + // // 将字符串中的${}替换为变量, 使用eval执行 + // eval('transformStr = `' + str + '`') + // const obj = JSON.parse(transformStr) + // return obj + // }, // 获取请求地址、请求头、请求参数、请求体中所有的变量，在动态参数中进行变量 getPramsList () { const paramNames1 = this.getValName(this.dataForm.config.url) @@ -975,10 +974,10 @@ export default { } else { // 如果动态参数已配置则调接口 // 如果是前端代理，则自行组装接口及参数并调接口 - if (this.dataForm.config.requestType === 'front') { - this.replaceParams(this.dataForm.config.paramsList) - axiosFormatting({ ...this.newDataForm.config }).then((res) => { - this.dataPreviewList = res.data.list + if (this.dataForm.config.requestType === 'frontend') { + // this.replaceParams(this.dataForm.config.paramsList) + axiosFormatting({ ...this.dataForm.config }).then((res) => { + this.dataPreviewList = res.data // 获取数据后更新输出字段 this.updateOoutputFieldList(this.dataPreviewList) console.log(res) @@ -992,7 +991,7 @@ export default { dataSetType: 'http' } datasetExecuteTest(executeParams).then(res => { - this.dataPreviewList = res.data.data.list + this.dataPreviewList = res // 获取数据后更新输出字段 this.updateOoutputFieldList(this.dataPreviewList) this.$message.success('解析并执行成功') diff --git a/data-room-ui/packages/DataSetManagement/src/JsComponents/ParamsSettingDialog.vue b/data-room-ui/packages/DataSetManagement/src/JsComponents/ParamsSettingDialog.vue index 7362df69..3f4ef2d0 100644 --- a/data-room-ui/packages/DataSetManagement/src/JsComponents/ParamsSettingDialog.vue +++ b/data-room-ui/packages/DataSetManagement/src/JsComponents/ParamsSettingDialog.vue @@ -211,7 +211,6 @@ export default { }, confirm () { this.$emit('saveParams', cloneDeep(this.paramsList)) - this.$emit('replaceParams', cloneDeep(this.paramsList)) this.dialogVisible = false } } diff --git a/data-room-ui/packages/js/mixins/commonMixins.js b/data-room-ui/packages/js/mixins/commonMixins.js index 1143869e..09df9bd1 100644 --- a/data-room-ui/packages/js/mixins/commonMixins.js +++ b/data-room-ui/packages/js/mixins/commonMixins.js @@ -7,6 +7,7 @@ import _ from 'lodash' import { mapMutations, mapState } from 'vuex' import { EventBus } from 'data-room-ui/js/utils/eventBus' import { getChatInfo, getUpdateChartInfo } from '../api/bigScreenApi' +import axiosFormatting from '../../js/utils/httpParamsFormatting' export default { data () { return { @@ -71,7 +72,14 @@ export default { size: size, type: config.type }).then((data) => { - if (data.executionByFrontend) { + // 如果是http数据集的前端代理，则需要调封装的axios请求 + // if (data.executionByFrontend) { + // axiosFormatting(data.data).then(res => { + // config = this.dataFormatting(config, res) + // this.changeChartConfig(config) + // }) + // } + if (data.datasetType !== 'http' && data.executionByFrontend) { try { const scriptAfterReplacement = data.data.replace(/\${(.*?)}/g, (match, p) => { // 根据parmas的key获取value @@ -110,6 +118,13 @@ export default { } return new Promise((resolve, reject) => { getUpdateChartInfo(params).then((data) => { + // 如果是http数据集的前端代理，则需要调封装的axios请求 + // if (data.executionByFrontend) { + // axiosFormatting(data.data).then(res => { + // config = this.dataFormatting(config, res) + // this.changeChartConfig(config) + // }) + // } if (data.executionByFrontend) { try { const scriptAfterReplacement = data.data.replace(/\${(.*?)}/g, (match, p) => { @@ -124,7 +139,7 @@ export default { } } config = this.dataFormatting(config, data) - // this.changeChartConfig(config) + this.changeChartConfig(config) if (this.chart) { // 单指标组件和多指标组件的changeData传参不同 if (['Liquid', 'Gauge', 'RingProgress'].includes(config.chartType)) { diff --git a/data-room-ui/packages/js/utils/httpParamsFormatting.js b/data-room-ui/packages/js/utils/httpParamsFormatting.js index 141eb07d..3d4c0f4e 100644 --- a/data-room-ui/packages/js/utils/httpParamsFormatting.js +++ b/data-room-ui/packages/js/utils/httpParamsFormatting.js @@ -2,13 +2,12 @@ import axios from 'axios' import { Loading, Message } from 'element-ui' import _ from 'lodash' export default function axiosFormatting (customConfig) { + const newCustomConfig = replaceParams(customConfig) // 将请求头和请求参数的值转化为对象形式 - // const headers = arrToObject(customConfig.headers) - // const params = arrToObject(customConfig.params) const httpConfig = { timeout: 1000 * 30, baseURL: '', - headers: customConfig.headers + headers: newCustomConfig.headers } // let loadingInstance = null // 加载全局的loading const instance = axios.create(httpConfig) @@ -21,11 +20,11 @@ export default function axiosFormatting (customConfig) { // 执行请求脚本 // https://mock.presstime.cn/mock/64bf8a00ce1b0ea640809069/test_copy_copy_copy/httpData?token=123&ss=ss const req = { ...config, urlKey: {} } - eval(customConfig.requestScript) + eval(newCustomConfig.requestScript) for (const key in req.urlKey) { - customConfig.url = replaceUrlParam(customConfig.url, key, req.urlKey[key]) + newCustomConfig.url = replaceUrlParam(newCustomConfig.url, key, req.urlKey[key]) } - config = { ...config, ...req, url: customConfig.url } + config = { ...config, ...req, url: newCustomConfig.url } return config }, error => { // 对请求错误做些什么 @@ -37,12 +36,11 @@ export default function axiosFormatting (customConfig) { if (response.data.code === 200) { // 执行响应脚本 const resp = _.cloneDeep(response.data) - eval(customConfig.responseScript) + eval(newCustomConfig.responseScript) Message({ message: '执行成功', type: 'success' }) - console.log(resp.data.list[0]) return Promise.resolve(resp) } else { Message({ @@ -55,14 +53,14 @@ export default function axiosFormatting (customConfig) { const body = {} const pattern = /(body\.\w+)=(\w+)/g const replacement = "$1='$2'" - customConfig.body = customConfig.body.replace(pattern, replacement) - eval(customConfig.body) + newCustomConfig.body = newCustomConfig.body.replace(pattern, replacement) + eval(newCustomConfig.body) return new Promise((resolve, reject) => { instance({ - method: customConfig.method, - url: customConfig.url, - params: customConfig.params, - data: customConfig.method === 'post' ? body : undefined + method: newCustomConfig.method, + url: newCustomConfig.url, + params: newCustomConfig.params, + data: newCustomConfig.method === 'post' ? body : undefined }).then(response => { resolve(response) }).catch(error => { @@ -80,3 +78,52 @@ function replaceUrlParam (url, paramName, paramValue) { return `${url}${separator}${paramName}=${paramValue}` } } +// 将参数的值替换掉其他配置中对应属性的值 +function replaceParams (customConfig) { + let newConfig = _.cloneDeep(customConfig) + newConfig.url = evalStrFunc(newConfig.paramsList, newConfig.url) + newConfig.headers = evalArrFunc(newConfig.paramsList, newConfig.headers) + newConfig.params = evalArrFunc(newConfig.paramsList, newConfig.params) + newConfig.body = evalStrFunc(newConfig.paramsList, newConfig.body) + return newConfig +} +function evalStrFunc (paramsList, string) { + // 取name作为变量名, value作为变量值 { name: '站三', token: '123'} + const params = paramsList.reduce((acc, cur) => { + acc[cur.name] = cur.value + return acc + }, {}) + // 将url中 ${xxx} 替换成 ${params.xxx} + const str = string.replace(/\$\{(\w+)\}/g, (match, p1) => { + return '${params.' + p1 + '}' + }) + const transformStr = '' + // 将字符串中的${}替换为变量, 使用eval执行 + eval('transformStr = `' + str + '`') + return transformStr +} +function evalArrFunc (paramsList, arr) { + // 取name作为变量名, value作为变量值 { name: '站三', token: '123'} + const params = paramsList.reduce((acc, cur) => { + acc[cur.name] = cur.value + return acc + }, {}) + + // 取name作为变量名, value作为变量值 { _name: '${name}', _token: '${token}'} + const paramsListObj = arr.reduce((acc, cur) => { + acc[cur.key] = cur.value + return acc + }, {}) + // 转成字符串 + const paramsListStr = JSON.stringify(paramsListObj) + + // 将url中 ${xxx} 替换成 ${params.xxx} + const str = paramsListStr.replace(/\$\{(\w+)\}/g, (match, p1) => { + return '${params.' + p1 + '}' + }) + const transformStr = '' + // 将字符串中的${}替换为变量, 使用eval执行 + eval('transformStr = `' + str + '`') + const obj = JSON.parse(transformStr) + return obj +}