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 <el-option
label="前台代理" label="前台代理"
value="front" value="frontend"
/> />
<el-option <el-option
label="后台代理" label="后台代理"
value="back" value="backend"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
@ -542,7 +542,6 @@
ref="paramsSettingDialog" ref="paramsSettingDialog"
:params-list="dataForm.config.paramsList" :params-list="dataForm.config.paramsList"
@saveParams="saveParams" @saveParams="saveParams"
@replaceParams="replaceParams"
/> />
<OutputFieldDialog <OutputFieldDialog
ref="outputFieldDialog" ref="outputFieldDialog"
@ -652,7 +651,7 @@ export default {
labelIds: [], labelIds: [],
config: { config: {
className: 'com.gccloud.dataset.entity.config.HttpDataSetConfig', className: 'com.gccloud.dataset.entity.config.HttpDataSetConfig',
requestType: 'back', requestType: 'backend',
method: 'get', method: 'get',
url: '', url: '',
headers: [], headers: [],
@ -737,7 +736,7 @@ export default {
this.dataForm = { id, name, typeId, remark, datasetType, moduleCode, editable, sourceId, config: { ...config } } this.dataForm = { id, name, typeId, remark, datasetType, moduleCode, editable, sourceId, config: { ...config } }
this.fieldDesc = fieldDesc this.fieldDesc = fieldDesc
this.outputFieldList = fieldList this.outputFieldList = fieldList
this.replaceParams(paramsList) // this.replaceParams(paramsList)
this.scriptExecute(true) this.scriptExecute(true)
}) })
} }
@ -879,54 +878,54 @@ export default {
}) })
this.fieldDesc = fieldDesc this.fieldDesc = fieldDesc
}, },
// 配置完参数后，将参数的值放入到对应的请求位置进行替换 // // 配置完参数后，将参数的值放入到对应的请求位置进行替换
replaceParams (paramsList) { // replaceParams (paramsList) {
this.newDataForm = _.cloneDeep(this.dataForm) // this.newDataForm = _.cloneDeep(this.dataForm)
this.newDataForm.config.url = this.evalStrFunc(paramsList, this.newDataForm.config.url) // 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.headers = this.evalArrFunc(paramsList, this.newDataForm.config.headers)
this.newDataForm.config.params = this.evalArrFunc(paramsList, this.newDataForm.config.params) // this.newDataForm.config.params = this.evalArrFunc(paramsList, this.newDataForm.config.params)
this.newDataForm.config.body = this.evalStrFunc(paramsList, this.newDataForm.config.body) // this.newDataForm.config.body = this.evalStrFunc(paramsList, this.newDataForm.config.body)
}, // },
evalStrFunc (paramsList, string) { // evalStrFunc (paramsList, string) {
// 取name作为变量名, value作为变量值 { name: '站三', token: '123'} // // 取name作为变量名, value作为变量值 { name: '站三', token: '123'}
const params = paramsList.reduce((acc, cur) => { // const params = paramsList.reduce((acc, cur) => {
acc[cur.name] = cur.value // acc[cur.name] = cur.value
return acc // return acc
}, {}) // }, {})
// 将url中 ${xxx} 替换成 ${params.xxx} // // 将url中 ${xxx} 替换成 ${params.xxx}
const str = string.replace(/\$\{(\w+)\}/g, (match, p1) => { // const str = string.replace(/\$\{(\w+)\}/g, (match, p1) => {
return '${params.' + p1 + '}' // return '${params.' + p1 + '}'
}) // })
const transformStr = '' // const transformStr = ''
// 将字符串中的${}替换为变量, 使用eval执行 // // 将字符串中的${}替换为变量, 使用eval执行
eval('transformStr = `' + str + '`') // eval('transformStr = `' + str + '`')
return transformStr // return transformStr
}, // },
evalArrFunc (paramsList, arr) { // evalArrFunc (paramsList, arr) {
// 取name作为变量名, value作为变量值 { name: '站三', token: '123'} // // 取name作为变量名, value作为变量值 { name: '站三', token: '123'}
const params = paramsList.reduce((acc, cur) => { // const params = paramsList.reduce((acc, cur) => {
acc[cur.name] = cur.value // acc[cur.name] = cur.value
return acc // return acc
}, {}) // }, {})
//
// 取name作为变量名, value作为变量值 { _name: '${name}', _token: '${token}'} // // 取name作为变量名, value作为变量值 { _name: '${name}', _token: '${token}'}
const paramsListObj = arr.reduce((acc, cur) => { // const paramsListObj = arr.reduce((acc, cur) => {
acc[cur.key] = cur.value // acc[cur.key] = cur.value
return acc // return acc
}, {}) // }, {})
// 转成字符串 // // 转成字符串
const paramsListStr = JSON.stringify(paramsListObj) // const paramsListStr = JSON.stringify(paramsListObj)
//
// 将url中 ${xxx} 替换成 ${params.xxx} // // 将url中 ${xxx} 替换成 ${params.xxx}
const str = paramsListStr.replace(/\$\{(\w+)\}/g, (match, p1) => { // const str = paramsListStr.replace(/\$\{(\w+)\}/g, (match, p1) => {
return '${params.' + p1 + '}' // return '${params.' + p1 + '}'
}) // })
const transformStr = '' // const transformStr = ''
// 将字符串中的${}替换为变量, 使用eval执行 // // 将字符串中的${}替换为变量, 使用eval执行
eval('transformStr = `' + str + '`') // eval('transformStr = `' + str + '`')
const obj = JSON.parse(transformStr) // const obj = JSON.parse(transformStr)
return obj // return obj
}, // },
// 获取请求地址、请求头、请求参数、请求体中所有的变量，在动态参数中进行变量 // 获取请求地址、请求头、请求参数、请求体中所有的变量，在动态参数中进行变量
getPramsList () { getPramsList () {
const paramNames1 = this.getValName(this.dataForm.config.url) const paramNames1 = this.getValName(this.dataForm.config.url)
@ -975,10 +974,10 @@ export default {
} else { } else {
// 如果动态参数已配置则调接口 // 如果动态参数已配置则调接口
// 如果是前端代理，则自行组装接口及参数并调接口 // 如果是前端代理，则自行组装接口及参数并调接口
if (this.dataForm.config.requestType === 'front') { if (this.dataForm.config.requestType === 'frontend') {
this.replaceParams(this.dataForm.config.paramsList) // this.replaceParams(this.dataForm.config.paramsList)
axiosFormatting({ ...this.newDataForm.config }).then((res) => { axiosFormatting({ ...this.dataForm.config }).then((res) => {
this.dataPreviewList = res.data.list this.dataPreviewList = res.data
// 获取数据后更新输出字段 // 获取数据后更新输出字段
this.updateOoutputFieldList(this.dataPreviewList) this.updateOoutputFieldList(this.dataPreviewList)
console.log(res) console.log(res)
@ -992,7 +991,7 @@ export default {
dataSetType: 'http' dataSetType: 'http'
} }
datasetExecuteTest(executeParams).then(res => { datasetExecuteTest(executeParams).then(res => {
this.dataPreviewList = res.data.data.list this.dataPreviewList = res
// 获取数据后更新输出字段 // 获取数据后更新输出字段
this.updateOoutputFieldList(this.dataPreviewList) this.updateOoutputFieldList(this.dataPreviewList)
this.$message.success('解析并执行成功') this.$message.success('解析并执行成功')

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

@ -211,7 +211,6 @@ export default {
}, },
confirm () { confirm () {
this.$emit('saveParams', cloneDeep(this.paramsList)) this.$emit('saveParams', cloneDeep(this.paramsList))
this.$emit('replaceParams', cloneDeep(this.paramsList))
this.dialogVisible = false 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 { mapMutations, mapState } from 'vuex'
import { EventBus } from 'data-room-ui/js/utils/eventBus' import { EventBus } from 'data-room-ui/js/utils/eventBus'
import { getChatInfo, getUpdateChartInfo } from '../api/bigScreenApi' import { getChatInfo, getUpdateChartInfo } from '../api/bigScreenApi'
import axiosFormatting from '../../js/utils/httpParamsFormatting'
export default { export default {
data () { data () {
return { return {
@ -71,7 +72,14 @@ export default {
size: size, size: size,
type: config.type type: config.type
}).then((data) => { }).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 { try {
const scriptAfterReplacement = data.data.replace(/\${(.*?)}/g, (match, p) => { const scriptAfterReplacement = data.data.replace(/\${(.*?)}/g, (match, p) => {
// 根据parmas的key获取value // 根据parmas的key获取value
@ -110,6 +118,13 @@ export default {
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getUpdateChartInfo(params).then((data) => { 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) { if (data.executionByFrontend) {
try { try {
const scriptAfterReplacement = data.data.replace(/\${(.*?)}/g, (match, p) => { const scriptAfterReplacement = data.data.replace(/\${(.*?)}/g, (match, p) => {
@ -124,7 +139,7 @@ export default {
} }
} }
config = this.dataFormatting(config, data) config = this.dataFormatting(config, data)
// this.changeChartConfig(config) this.changeChartConfig(config)
if (this.chart) { if (this.chart) {
// 单指标组件和多指标组件的changeData传参不同 // 单指标组件和多指标组件的changeData传参不同
if (['Liquid', 'Gauge', 'RingProgress'].includes(config.chartType)) { 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 { Loading, Message } from 'element-ui'
import _ from 'lodash' import _ from 'lodash'
export default function axiosFormatting (customConfig) { export default function axiosFormatting (customConfig) {
const newCustomConfig = replaceParams(customConfig)
// 将请求头和请求参数的值转化为对象形式 // 将请求头和请求参数的值转化为对象形式
// const headers = arrToObject(customConfig.headers)
// const params = arrToObject(customConfig.params)
const httpConfig = { const httpConfig = {
timeout: 1000 * 30, timeout: 1000 * 30,
baseURL: '', baseURL: '',
headers: customConfig.headers headers: newCustomConfig.headers
} }
// let loadingInstance = null // 加载全局的loading // let loadingInstance = null // 加载全局的loading
const instance = axios.create(httpConfig) 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 // https://mock.presstime.cn/mock/64bf8a00ce1b0ea640809069/test_copy_copy_copy/httpData?token=123&ss=ss
const req = { ...config, urlKey: {} } const req = { ...config, urlKey: {} }
eval(customConfig.requestScript) eval(newCustomConfig.requestScript)
for (const key in req.urlKey) { 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 return config
}, error => { }, error => {
// 对请求错误做些什么 // 对请求错误做些什么
@ -37,12 +36,11 @@ export default function axiosFormatting (customConfig) {
if (response.data.code === 200) { if (response.data.code === 200) {
// 执行响应脚本 // 执行响应脚本
const resp = _.cloneDeep(response.data) const resp = _.cloneDeep(response.data)
eval(customConfig.responseScript) eval(newCustomConfig.responseScript)
Message({ Message({
message: '执行成功', message: '执行成功',
type: 'success' type: 'success'
}) })
console.log(resp.data.list[0])
return Promise.resolve(resp) return Promise.resolve(resp)
} else { } else {
Message({ Message({
@ -55,14 +53,14 @@ export default function axiosFormatting (customConfig) {
const body = {} const body = {}
const pattern = /(body\.\w+)=(\w+)/g const pattern = /(body\.\w+)=(\w+)/g
const replacement = "$1='$2'" const replacement = "$1='$2'"
customConfig.body = customConfig.body.replace(pattern, replacement) newCustomConfig.body = newCustomConfig.body.replace(pattern, replacement)
eval(customConfig.body) eval(newCustomConfig.body)
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
instance({ instance({
method: customConfig.method, method: newCustomConfig.method,
url: customConfig.url, url: newCustomConfig.url,
params: customConfig.params, params: newCustomConfig.params,
data: customConfig.method === 'post' ? body : undefined data: newCustomConfig.method === 'post' ? body : undefined
}).then(response => { }).then(response => {
resolve(response) resolve(response)
}).catch(error => { }).catch(error => {
@ -80,3 +78,52 @@ function replaceUrlParam (url, paramName, paramValue) {
return `${url}${separator}${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