自定义事件API事件

src/api/onlineDev/visualDev.js

@@ -748,3 +748,11 @@ export function sceneDelete(data) {
     data
   })
 }
+// API自定义事件请求数据
+export function apiExecute(data) {
+  return request({
+    url: `/visual-api/paas/http/execute`,
+    method: 'POST',
+    data
+  })
+}

src/views/form/webDesign/CustomEvent.vue

@@ -20,8 +20,8 @@
             <el-radio v-model="eventTypeRadio" :label="0">SQL模式</el-radio>
             <el-radio v-model="eventTypeRadio" :label="1">代码模式</el-radio>
             <el-radio v-model="eventTypeRadio" :label="2">jar包模式</el-radio>
-<!--            <el-radio v-model="eventTypeRadio" :label="3">API模式</el-radio>-->
-<!--            <el-radio v-model="eventTypeRadio" :label="4">表单赋值模式</el-radio>-->
+            <el-radio v-model="eventTypeRadio" :label="3">API模式</el-radio>
+            <el-radio v-model="eventTypeRadio" :label="4">表单赋值模式</el-radio>
           </el-form-item>
         </el-form>
       <span slot="footer" class="dialog-footer">
@@ -31,7 +31,7 @@
     </el-dialog>
     <customEventExpression ref="customEventExpression" :dbLinkId="cubeId" :modelId="modeId" :dbSourceId="sourceId" @onChangeExp="eventChange" />
     <customCodeMode ref="customCodeMode" :dbLinkId="cubeId" :modelId="modeId" :dbSourceId="sourceId" :eventTypeRadio="eventTypeRadio" @onChangeExp="eventChange"  />
-    <customApiEvent ref="customApiEvent" :dbLinkId="cubeId" :modelId="modeId" :dbSourceId="sourceId" :eventTypeRadio="eventTypeRadio" @onChangeExp="eventChange"  />
+    <customApiEvent ref="customApiEvent" :dbLinkId="cubeId" :modelId="modeId" :dbSourceId="sourceId" @onChangeExp="eventChange"  />
     <div>
       <el-table ref="multipleTable" :data="eventList" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" v-if="isCompont"></el-table-column>
@@ -40,7 +40,9 @@
           <template slot-scope="scope">
             <span class="eventType" v-if="scope.row.eventType === 0">SQL模式</span>
             <span class="eventType" v-else-if="scope.row.eventType === 1">代码模式</span>
-            <span class="eventType" v-else>jar包模式</span>
+            <span class="eventType" v-else-if="scope.row.eventType === 2">jar包模式</span>
+            <span class="eventType" v-else-if="scope.row.eventType === 3">API模式</span>
+            <span class="eventType" v-else>表单赋值模式</span>
           </template>
         </el-table-column>
         <el-table-column prop="executeTiming" label="事件执行时机">
@@ -180,8 +182,10 @@ export default {
     onEditChange(row) {
       if(row.eventType === 1 || row.eventType === 2){
         this.$refs.customCodeMode.addFuncClick(row)
-      }else {
+      }else if(row.eventType === 0) {
         this.$refs.customEventExpression.addFuncClick(row)
+      }else if(row.eventType === 3) {
+        this.$refs.customApiEvent.addFuncClick(row)
       }
     },
     onEventLogClick(row) {

src/views/form/webDesign/customApiEvent.vue

@@ -0,0 +1,352 @@
+<template>
+<div>
+  <el-dialog
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    :title="'新增API模式自定义事件'"
+    :visible.sync="showEditComputedField"
+    append-to-body
+    class="dataset-edit-computed-fields"
+    width="700px"
+  >
+    <div>事件名称：<el-input style="width:300px" v-model="eventName" placeholder="请输入事件名称"></el-input></div>
+    <el-tabs v-model="activeName">
+      <el-tab-pane label="请求设置" name="post">
+        <el-form :model="addForm" label-position="left" label-width="100px" ref="addForm" :rules="rules" >
+          <el-form-item label="请求路径" prop="url">
+            <el-input v-model="addForm.url" placeholder="请输入请求路径"></el-input>
+          </el-form-item>
+          <el-form-item label="请求方式" prop="method">
+            <el-radio-group v-model="addForm.method">
+              <el-radio label="GET"></el-radio>
+              <el-radio label="POST"></el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-tabs v-model="formActiveName">
+            <el-tab-pane label="headers" name="headers">
+              <el-button size="mini" type="success" plain icon="el-icon-plus" @click="addForm.headers.push({name:'',value:''})" style="margin-bottom:10px">添加header</el-button>
+              <el-table size="mini" :data="addForm.headers"  border  style="width: 100%">
+                <el-table-column width="50" align="center">
+                  <template slot-scope="scope">
+                    <i class="el-icon-delete" style="font-size:20px" @click="addForm.headers.splice(scope.$index,1)"></i>
+                  </template>
+                </el-table-column>
+                <el-table-column label="参数名称" width="180"  align="center">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.name" placeholder="参数名称"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="参数值"  align="center">
+                  <template slot-scope="scope">
+                    <el-popover :ref="`jarParamSelector-headers}`" key="headers" placement="bottom-start" trigger="click">
+                      <div style="display: flex">
+                        <div style="margin-right: 10px;max-height: 300px;overflow-y: auto">
+                          <p>引用字段</p>
+                          <template v-for="field of tobeChooseWeidu">
+                            <div :key="field.columnTitle" :title="field.columnName" class="weidu" @click="setJarValueFun(scope.row,`[${field.columnName}]`)">
+                              {{ field.columnTitle + '【' + field.columnName + '】' }}
+                            </div>
+                          </template>
+                          <template v-for="field of tobeChooseZhibiao">
+                            <div :key="field.columnTitle" :title="field.columnName" class="zhibiao" @click="setJarValueFun(scope.row,`[${field.columnName}]`)">
+                              {{ field.columnTitle + '【' + field.columnName + '】' }}
+                            </div>
+                          </template>
+                        </div>
+                        <el-cascader-panel v-model="nowParam" :options="paramList" :props="{ expandTrigger: 'click', emitPath: false, value: 'paramKey' }" @change="setJarValueFun(scope.row,`\${${$event}}`)"></el-cascader-panel>
+                      </div>
+                      <el-button slot="reference" size="mini" type="success" plain>插入变量</el-button>
+                    </el-popover>
+                    <el-input v-model="scope.row.value" placeholder="参数值" style="width:300px;margin-left:10px;"></el-input>
+
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="params" name="params">
+              <el-button size="mini" type="success" plain icon="el-icon-plus" @click="addForm.params.push({name:'',value:''})" style="margin-bottom:10px">添加header</el-button>
+              <el-table size="mini" :data="addForm.params"  border  style="width: 100%">
+                <el-table-column width="50" align="center">
+                  <template slot-scope="scope">
+                    <i class="el-icon-delete" style="font-size:20px" @click="addForm.params.splice(scope.$index,1)"></i>
+                  </template>
+                </el-table-column>
+                <el-table-column label="参数名称" width="180"  align="center">
+                  <template slot-scope="scope">
+                    <el-input v-model="scope.row.name" placeholder="参数名称"></el-input>
+                  </template>
+                </el-table-column>
+                <el-table-column label="参数值"  align="center">
+                  <template slot-scope="scope">
+                    <el-popover :ref="`jarParamSelector-params}`" key="params" placement="bottom-start" trigger="click">
+                      <div style="display: flex">
+                        <div style="margin-right: 10px;max-height: 300px;overflow-y: auto">
+                          <p>引用字段</p>
+                          <template v-for="field of tobeChooseWeidu">
+                            <div :key="field.columnTitle" :title="field.columnName" class="weidu" @click="setJarValueFun(scope.row,`[${field.columnName}]`)">
+                              {{ field.columnTitle + '【' + field.columnName + '】' }}
+                            </div>
+                          </template>
+                          <template v-for="field of tobeChooseZhibiao">
+                            <div :key="field.columnTitle" :title="field.columnName" class="zhibiao" @click="setJarValueFun(scope.row,`[${field.columnName}]`)">
+                              {{ field.columnTitle + '【' + field.columnName + '】' }}
+                            </div>
+                          </template>
+                        </div>
+                        <el-cascader-panel v-model="nowParam" :options="paramList" :props="{ expandTrigger: 'click', emitPath: false, value: 'paramKey' }" @change="setJarValueFun(scope.row,`\${${$event}}`)"></el-cascader-panel>
+                      </div>
+                      <el-button slot="reference" size="mini" type="success" plain>插入变量</el-button>
+                    </el-popover>
+                    <el-input v-model="scope.row.value" placeholder="参数值" style="width:300px;margin-left:10px;"></el-input>
+
+                  </template>
+                </el-table-column>
+              </el-table>
+            </el-tab-pane>
+            <el-tab-pane label="body" name="body" v-if="addForm.method === 'POST' ">
+              <el-input type="textarea" :rows="6" placeholder="请输入body内容" v-model="addForm.body">
+              </el-input>
+            </el-tab-pane>
+          </el-tabs>
+        </el-form>
+      </el-tab-pane>
+      <el-tab-pane label="响应设置" name="req">
+        <el-button size="mini" type="success" plain icon="el-icon-plus" @click="addForm.fields.push({name:'',type:'STRING',jsonpath:''})">添加响应字段</el-button>
+        <el-button size="mini"  plain icon="el-icon-refresh-left" @click="getReqData">响应数据结构预览</el-button>
+        <el-button size="mini" type="text" icon="el-icon-paperclip" @click="openJson">jsonpath使用说明</el-button>
+        <el-table size="mini" :data="addForm.fields"  border  style="width: 100%;margin:10px 0;">
+          <el-table-column width="50" align="center">
+            <template slot-scope="scope">
+              <i class="el-icon-delete" style="font-size:20px" @click="addForm.fields.splice(scope.$index,1)"></i>
+            </template>
+          </el-table-column>
+          <el-table-column label="字段" width="180"  align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.name" placeholder="字段名称"></el-input>
+            </template>
+          </el-table-column>
+          <el-table-column label="字段类型" width="180"  align="center">
+            <template slot-scope="scope">
+              <el-select v-model="scope.row.type" placeholder="请选择字段类型">
+                <el-option label="字符串" value="STRING"></el-option>
+                <el-option label="整数" value="INT"></el-option>
+                <el-option label="长整数" value="BIGINT"></el-option>
+                <el-option label="浮点数" value="DOUBLE"></el-option>
+                <el-option label="精确浮点数" value="FLOAT"></el-option>
+                <el-option label="日期" value="DATE"></el-option>
+                <el-option label="时间" value="TIME"></el-option>
+                <el-option label="日期时间" value="TIMESTAMP"></el-option>
+              </el-select>
+            </template>
+          </el-table-column>
+          <el-table-column label="json路径"  align="center">
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.jsonpath" placeholder="json路径"></el-input>
+            </template>
+          </el-table-column>
+        </el-table>
+        <p style="margin-bottom:10px;">响应数据预览</p>
+        <JSONEditor v-model="template" class="json-editor" />
+      </el-tab-pane>
+    </el-tabs>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="showEditComputedField = false">取 消</el-button>
+      <el-button type="primary" @click="codeModeSubmit">确 定</el-button>
+    </span>
+  </el-dialog>
+
+</div>
+</template>
+<script>
+import {cubeFieldList} from "@/api/newbi/dataset";
+import {categoryList, paramList} from "@/api/newbi/globalParams";
+import JSONEditor from "@/components/JsonEditor/index.vue";
+import {addCustomEvent,apiExecute} from "@/api/onlineDev/visualDev";
+export default {
+  name: "customApiEvent",
+  components: {JSONEditor},
+  props: ['modelId','dbLinkId','dbSourceId'],
+  data(){
+    return {
+      id:'',
+      eventName:'',
+      executeTiming: 2,
+      datasourceId:'',
+      eventType: 3,
+      eventStatus: 0,
+      activeName: 'post',
+      formActiveName: 'headers',
+      showEditComputedField: false,
+      addForm:{
+        url:'',
+        method:'GET',
+        params:[{name:'',value:''}],
+        headers:[{name:'',value:''}],
+        body:'',
+        fields:[{name:'',type:'STRING',jsonpath:''}],
+      },
+      tobeChooseWeidu: [], // 计算字段编辑框里维度字段
+      tobeChooseZhibiao: [], // 计算字段编辑框里指标字段
+      nowParam:[],
+      paramList: [],
+      template:'',
+      rules: {
+        url: [
+          { required: true, message: '请输入请求路径', trigger: 'blur' },
+        ],
+        method: [
+          { required: true, message: '请选择请求方式', trigger: 'change' }
+        ],
+      }
+    }
+  },
+  created(){
+
+  },
+  methods:{
+    addFuncClick(row){
+      this.showEditComputedField = true
+      this.$nextTick(() => {
+        if (row && row.id) {
+          this.eventName = row.eventName
+          this.executeTiming = row.executeTiming
+          this.eventType = row.eventType
+          this.eventStatus = row.eventStatus
+          this.datasourceId = row.eventDatasourceId
+          this.id = row.id
+          this.addForm = JSON.parse(row.eventSql)
+        } else {
+          this.eventName = ''
+          this.executeTiming = 2
+          this.eventType = 3
+          this.eventStatus = 0
+          this.id = ''
+          this.datasourceId = this.dbSourceId
+          this.addForm = {
+            url:'',
+            method:'GET',
+            params:[{name:'',value:''}],
+            headers:[{name:'',value:''}],
+            body:'',
+            fields:[{name:'',type:'STRING',jsonpath:''}],
+          }
+        }
+      })
+      this.getGlobalData()
+    },
+    // 获取系统变量
+    getGlobalData() {
+      //获取数据集
+      cubeFieldList({cubeDataId: this.dbLinkId}).then((res) => {
+        let tableFieldsWeidu = res.data.data.filter((i) => i.dimensionType === 'WEIDU').sort((a, b) => a.sortNum - b.sortNum)
+        let tableFieldsZhibiao = res.data.data.filter((i) => i.dimensionType === 'ZHIBIAO').sort((a, b) => a.sortNum - b.sortNum)
+        this.tobeChooseWeidu = tableFieldsWeidu.filter((i) => i.columnAttr == 'NORMAL')
+        this.tobeChooseZhibiao = tableFieldsZhibiao.filter((i) => i.columnAttr == 'NORMAL')
+      })
+      categoryList({ size: 10000, current: 1 }).then((res) => {
+        let list = res.data.data.records
+        let parents = list.filter((i) => !i.parentId)
+        let categoryList = []
+        list.forEach((i) => {
+          i.children = []
+          if (i.parentId) {
+            let parent = parents.find((j) => j.id == i.parentId)
+            parent.hasChild = true
+            i.label = parent.typeName + ' / ' + i.typeName
+            categoryList.push(i)
+          } else {
+            i.label = i.typeName
+          }
+        })
+        categoryList = categoryList.concat(parents.filter((i) => !i.hasChild))
+        paramList({ size: 10000, current: 1 }).then((res) => {
+          let params = res.data.data.records
+          params.forEach((i) => {
+            i.label = i.paramName
+            let parent = categoryList.find((j) => j.id == i.typeId)
+            parent.children.push(i)
+          })
+          this.paramList = categoryList
+        })
+      })
+    },
+    setJarValueFun(value,field){
+      value.value = field;
+      document.body.click()
+    },
+    getReqData(){
+      let data = {
+        url:this.addForm.url,
+        method:this.addForm.method,
+        body:this.addForm.body,
+        params:this.addForm.params.reduce((obj, header) => {
+          obj[header.name] = header.value;
+          return obj;
+        }, {}),
+        headers:this.addForm.headers.reduce((obj, header) => {
+          obj[header.name] = header.value;
+          return obj;
+        }, {})
+      }
+      apiExecute(data).then((res)=>{
+        this.template = res.data
+      })
+      // this.template = {
+      //   "url": "http://open.wdgj.com/OpenApiDoc/APITest?apigroup=84",
+      //   "method": "POST",
+      //   "params":[{
+      //     "name":"",
+      //     "value":""
+      //   }],
+      //   "headers": [{
+      //     "name":"",
+      //     "value":""
+      //   }],
+      //   "body": "",
+      //   "fields": [
+      //     {
+      //       "name": "",
+      //       "type": "STRING",
+      //       "jsonpath": "",
+      //
+      //     }
+      //   ]
+      // }
+    },
+    codeModeSubmit(){
+      let params = {
+        id: this.id,
+        eventName: this.eventName,
+        executeTiming: this.executeTiming,
+        eventDatasourceId: this.dbSourceId,
+        eventType: this.eventType,
+        eventStatus: this.eventStatus,
+        eventSql:  JSON.stringify(this.addForm),
+      }
+      addCustomEvent(this.modelId, params).then((res) => {
+        this.$message({
+          message: res.data.msg,
+          type: 'success',
+          duration: 1500,
+          onClose: () => {
+            this.$emit('onChangeExp')
+            this.showEditComputedField = false
+          }
+        })
+      })
+    },
+    openJson(){
+      window.open('https://jsonpath.com/','_blank')
+    }
+  }
+}
+</script>
+
+
+
+<style scoped lang="scss">
+.json-editor {
+  height: 300px;
+  position: relative;
+}
+</style>

src/views/form/webDesign/customCodeMode.vue

@@ -210,7 +210,7 @@ export default {
     }
   },
   created() {
-    this.getGlobalData()
+
   },
   methods: {
     setJarValueFun(value,field){
@@ -293,6 +293,7 @@ export default {
           if (this.addForm.eventType === 1) this.$refs.editor.editor.setValue('')
         }
       })
+      this.getGlobalData()
     },
     beforeUpload(file) {
       const unitNum = 1024 * 1024 * 500

src/views/form/webDesign/customEventExpression.vue

@@ -104,7 +104,7 @@
       <div class="btns">
         <el-button size="mini" @click="showEditComputedField = false"> 取消</el-button>
         <el-button size="mini" type="primary" @click="onEditComputedFieldConfirm"> 确定</el-button>
-        <!--        <el-button size="mini" type="success" @click="parserSqlClick">语法检查</el-button>-->
+        <el-button size="mini" type="success" @click="parserSqlClick">语法检查</el-button>
       </div>
     </el-dialog>
   </div>
@@ -160,11 +160,6 @@ export default {
     }
   },
   created() {
-    this.fillback(this.dbLinkId)
-    this.getInitData()
-    this.datasourceId = this.dbSourceId
-    this.onDataSourceId(this.dbSourceId)
-    this.getGlobalData()
   },
   computed: {
     // 计算字段编辑框里维度字段
@@ -236,7 +231,11 @@ export default {
           this.$refs.editor.editor.setValue('')
         }
       })
+      this.fillback(this.dbLinkId)
       this.getInitData()
+      this.datasourceId = this.dbSourceId
+      this.onDataSourceId(this.dbSourceId)
+      this.getGlobalData()
     },
     // 获取初始化数据,
     getInitData() {