tzjy-code
/
DataRoom
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat:http数据集使用

Browse Source
main
liu.shiyi 2 years ago
parent 9af7572f7a
commit de551f7977
4 changed files with 135 additions and 75 deletions
Show Stats Download Patch File Download Diff File

115
data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue
Unescape Escape View File

@ -136,11 +136,11 @@
>
<el-option
label="前台代理"
value="front"
value="frontend"
/>
<el-option
label="后台代理"
value="back"
value="backend"
/>
</el-select>
</el-form-item>
@ -542,7 +542,6 @@
ref="paramsSettingDialog"
:params-list="dataForm.config.paramsList"
@saveParams="saveParams"
@replaceParams="replaceParams"
/>
<OutputFieldDialog
ref="outputFieldDialog"
@ -652,7 +651,7 @@ export default {
labelIds: [],
config: {
className: 'com.gccloud.dataset.entity.config.HttpDataSetConfig',
requestType: 'back',
requestType: 'backend',
method: 'get',
url: '',
headers: [],
@ -737,7 +736,7 @@ export default {
this.dataForm = { id, name, typeId, remark, datasetType, moduleCode, editable, sourceId, config: { ...config } }
this.fieldDesc = fieldDesc
this.outputFieldList = fieldList
this.replaceParams(paramsList)
// this.replaceParams(paramsList)
this.scriptExecute(true)
})
}
@ -879,54 +878,54 @@ export default {
})
this.fieldDesc = fieldDesc
},
// 配置完参数后，将参数的值放入到对应的请求位置进行替换
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
},
// // 配置完参数后，将参数的值放入到对应的请求位置进行替换
// 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('解析并执行成功')

1
data-room-ui/packages/DataSetManagement/src/JsComponents/ParamsSettingDialog.vue
Unescape Escape View File

@ -211,7 +211,6 @@ export default {
},
confirm () {
this.$emit('saveParams', cloneDeep(this.paramsList))
this.$emit('replaceParams', cloneDeep(this.paramsList))
this.dialogVisible = false
}
}

19
data-room-ui/packages/js/mixins/commonMixins.js
Unescape Escape View File

@ -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)) {

75
data-room-ui/packages/js/utils/httpParamsFormatting.js
Unescape Escape View File

@ -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
}

Write Preview
Loading…
Cancel
Save