feat:http数据集使用

data-room-ui/packages/DataSetManagement/src/HttpEditForm.vue

@@ -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('解析并执行成功')

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

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

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