Merge pull request 'clay : 触发器http请求校验规则完成(简单测试完成)' (#52) from master into pro

Reviewed-on: http://git.hchyun.com/clay/workflow-engine-web/pulls/52

flowable-engine-web/src/api/request.js

@@ -1,4 +1,3 @@
-import Vue from "vue";
 import axios from "axios";
 
 import { Notification, MessageBox, Message } from "element-ui";
@@ -9,8 +8,8 @@ import "element-ui/lib/theme-chalk/index.css";
 // 字体图标
 
 export function getBaseUrl(){
-	return "http://gateway.mytwins.top"
-	// return "http://192.168.101.8:8000"
+	// return "http://gateway.mytwins.top"
+	return "http://192.168.101.8:8000"
 	// return "http://localhost:8000"
 }
 

flowable-engine-web/src/components/Pagination/index.vue

@@ -1,94 +0,0 @@
-<template>
-  <div :class="{'hidden':hidden}" class="pagination-container">
-    <el-pagination
-      :background="background"
-      :current-page.sync="currentPage"
-      :page-size.sync="pageSize"
-      :layout="layout"
-      :page-sizes="pageSizes"
-      :total="total"
-      v-bind="$attrs"
-      @size-change="handleSizeChange"
-      @current-change="handleCurrentChange"
-    />
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: 'Pagination',
-  props: {
-    total: {
-      required: true,
-      type: Number
-    },
-    page: {
-      type: Number,
-      default: 1
-    },
-    limit: {
-      type: Number,
-      default: 20
-    },
-    pageSizes: {
-      type: Array,
-      default() {
-        return [10, 20, 30, 50]
-      }
-    },
-    layout: {
-      type: String,
-      default: 'total, sizes, prev, pager, next, jumper'
-    },
-    background: {
-      type: Boolean,
-      default: true
-    },
-    autoScroll: {
-      type: Boolean,
-      default: true
-    },
-    hidden: {
-      type: Boolean,
-      default: false
-    }
-  },
-  computed: {
-    currentPage: {
-      get() {
-        return this.page
-      },
-      set(val) {
-        this.$emit('update:page', val)
-      }
-    },
-    pageSize: {
-      get() {
-        return this.limit
-      },
-      set(val) {
-        this.$emit('update:limit', val)
-      }
-    }
-  },
-  methods: {
-    handleSizeChange(val) {
-      this.$emit('pagination', { page: this.currentPage, limit: val })
-    },
-    handleCurrentChange(val) {
-      this.$emit('pagination', { page: val, limit: this.pageSize })
-    }
-  }
-}
-</script>
-
-<style scoped>
-.pagination-container {
-  background: #fff;
-  padding: 32px 16px;
-}
-.pagination-container.hidden {
-  display: none;
-}
-</style>

flowable-engine-web/src/components/RightToolbar/index.vue

@@ -1,38 +0,0 @@
-<!-- @author Shiyn/   huangmx 20200807优化-->
-<template>
-  <div class="top-right-btn">
-    <el-row>
-      <el-tooltip class="item" effect="dark" :content="showSearch ? '隐藏搜索' : '显示搜索'" placement="top">
-        <el-button size="mini" circle icon="el-icon-search" @click="toggleSearch()" />
-      </el-tooltip>
-      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
-        <el-button size="mini" circle icon="el-icon-refresh" @click="refresh()" />
-      </el-tooltip>
-    </el-row>
-  </div>
-</template>
-<script>
-export default {
-  name: "RightToolbar",
-  data() {
-    return {};
-  },
-  props: {
-    showSearch: {
-      type: Boolean,
-      default: true,
-    },
-  },
-
-  methods: {
-    //搜索
-    toggleSearch() {
-      this.$emit("update:showSearch", !this.showSearch);
-    },
-    //刷新
-    refresh() {
-      this.$emit("queryTable");
-    },
-  },
-};
-</script>

flowable-engine-web/src/main.js

@@ -26,7 +26,6 @@ Vue.use(Tip);
 
 Vue.config.productionTip = false
 
-Vue.prototype.BASE_URL = 'http://' + (process.env.NODE_ENV === 'development-' ? "localhost" : "localhost");
 
 Vue.prototype.$isNotEmpty = function (obj) {
     return (obj !== undefined && obj !== null && obj !== '' && obj !== 'null')
@@ -49,13 +48,6 @@ Vue.prototype.$deepCopy = function (obj) {
     return JSON.parse(JSON.stringify(obj))
 }
 
-import Pagination from "@/components/Pagination";
-//自定义表格工具扩展
-import RightToolbar from "@/components/RightToolbar"
-// 全局组件挂载
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
-
 
 new Vue({
     router,

flowable-engine-web/src/views/admin/FormProcessDesign.vue

@@ -258,12 +258,14 @@ export default {
         }
         console.log(JSON.stringify(this.setup.process))
         addProcessDefinition(template).then(res => {
-          if (this.isNew){
-            this.$message.success("更新表单成功")
-          }else {
-            this.$message.success("创建表单成功")
+          if (res.code === 1000){
+            if (this.isNew){
+              this.$message.success("更新表单成功")
+            }else {
+              this.$message.success("创建表单成功")
+            }
+            this.$router.push("/formsPanel")
           }
-          this.$router.push("/formsPanel")
         }).catch(err => {
           this.$message.error(err)
         })

flowable-engine-web/src/views/common/process/config/TriggerNodeConfig.vue

@@ -88,7 +88,7 @@
         <span class="item-desc" v-else>👉 无论请求结果如何，均通过</span>
         <div v-if="config.http.handlerByScript">
           <div>
-            <el-button @click="testHander">测试</el-button>
+            <el-button @click="requestTestHandler">测试</el-button>
           </div>
           <div>
             <span>请求成功😀：</span>
@@ -161,12 +161,57 @@ export default {
     delItem(items, index) {
       items.splice(index, 1)
     },
-    testHander() {
-      let http = this.config.http;
-      if (http.url == null || http.url === '') {
-        this.$message.error("请填写请求路径!")
-        return
+    //url规范性检查
+    restfulCheck(url) {
+      const httpProtocolPattern = /^http:/;
+      const httpsProtocolPattern = /^https:/;
+      const restfulUrlPattern = /\/\w+\/\w+(\/\{[^}]+\})*/;
+      if (httpProtocolPattern.test(url) || httpsProtocolPattern.test(url)) {
+        return restfulUrlPattern.test(url);
+      } else {
+        return false;
       }
+    },
+    //是否含有动态参数
+    hasUrlParams(url) {
+      const pattern = /{[^{}]+}/g;
+      let match;
+      while ((match = pattern.exec(url)) !== null) {
+        return true;
+      }
+      return false;
+    },
+    //获取到动态参数的名称
+    getDynamicParamNames(url) {
+      const pattern = /{([^{}]+)}/g;
+      let match;
+      const paramNames = [];
+      while ((match = pattern.exec(url)) !== null) {
+        if (match[0].startsWith('{') && match[0].endsWith('}')) {
+          const paramName = match[1];
+          paramNames.push(paramName);
+        }
+      }
+      return paramNames;
+    },
+    //替换rul动态参数
+    replaceDynamicParams(url, params) {
+      const dynamicParamPattern = /{\s*(\w+)\s*}/g;
+      return url.replace(dynamicParamPattern, (match, param) => {
+        return params[param] || '0';
+      });
+    },
+    //获取到参数值
+    getParamsValue(params, paramName) {
+      for (let param of params) {
+        if (param.name === paramName) {
+          return param.value
+        }
+      }
+      return null;
+    },
+    //设置头部
+    setHeaders(http) {
       let headers = {}
       for (let header of http.headers) {
         if (header.isField) {
@@ -182,15 +227,99 @@ export default {
       } else {
         this.$set(headers, "Content-Type", "application/json")
       }
+      return headers;
+    },
+    //设置post和put参数
+    setPostAndPutParams(http) {
+      let params = {}
+      for (let param of http.params) {
+        params[param.name] = param.value
+      }
+      return params;
+    },
+    //设置get和delete的参数
+    setGetAndDeleteParams(http) {
+      let dynamicParams = []
+      let url = http.url
+      let hasParams = this.hasUrlParams(url)
+      if (hasParams) {
+        dynamicParams = this.getDynamicParamNames(url);
+        let replaceParams = {}
+        for (let paramsName of dynamicParams) {
+          let value = this.getParamsValue(http.params, paramsName)
+          if (null == value) {
+            this.$message.error(paramsName + '参数未设置')
+            return;
+          }
+          replaceParams[paramsName] = value
+        }
+        url = this.replaceDynamicParams(url, replaceParams);
+      }
+      if (http.method === "DELETE") {
+        return url;
+      }
+      let getParams = []
+      for (let param of http.params) {
+        if (dynamicParams.indexOf(param.name) === -1 && param.name !== '' && param.value !== '') {
+          getParams.push(param.name + "=" + param.value)
+        }
+      }
+      if (getParams.length > 0) {
+        url += "?"
+        for (let i = 0; i < getParams.length; i++) {
+          if (i !== getParams.length-1) {
+            url += getParams[i] + "&";
+          } else {
+            url += getParams[i];
+          }
+        }
+      }
+      return url;
+    },
+    //请求测试
+    requestTestHandler() {
+      let http = this.config.http;
+      if (http.url == null || http.url === '') {
+        this.$message.error("请填写请求路径!")
+        return
+      }
+      if (!this.restfulCheck(http.url)) {
+        this.$message.error("当前只支持 RESTful URL!")
+        return
+      }
+      let headers = this.setHeaders(http)
+      let request
+      switch (http.method) {
+        case "GET":
+        case "DELETE":
+          let url = this.setGetAndDeleteParams(http)
+          if (null == url) {
+            return;
+          }
+          request = axios.request({
+            method: http.method,
+            url: url,
+            headers: headers,
+          });
+          break;
+        case "POST":
+        case "PUT":
+          request = axios.request({
+            method: http.method,
+            url: http.url,
+            headers: headers,
+            data: this.setPostAndPutParams(http)
+          });
+          break;
+        default:
+          break;
+      }
       console.log("==================[测试打印内容]==================")
-      axios.request({
-        method: http.method,
-        url: http.url,
-        headers: headers
-      }).then(res => {
+      request.then(res => {
         console.log(res)
         if (res.status === 200) {
           let data = res.data
+          console.log(data)
           let successFun = eval("(false ||" + http.success + ")");
           let result = successFun(data);
           console.log(result, "成功函数执行的返回结果")

flowable-engine-web/src/views/common/process/nodes/TriggerNode.vue

@@ -53,6 +53,12 @@ export default {
           this.showError = true
           this.errorInfo = '请设置WEBHOOK的URL地址'
         }
+        if (this.restfulCheck(this.config.props.http.url)){
+          this.showError = false
+        }else {
+          this.showError = true
+          this.errorInfo = 'WEBHOOK的URL地址不符合RESTful标准'
+        }
       }else if(this.config.props.type === 'EMAIL'){
         if(!this.$isNotEmpty(this.config.props.email.subject)
             || this.config.props.email.to.length === 0
@@ -67,7 +73,18 @@ export default {
         err.push(`${this.config.name} 触发动作未设置完善`)
       }
       return !this.showError
-    }
+    },
+    //url规范性检查
+    restfulCheck(url) {
+      const httpProtocolPattern = /^http:/;
+      const httpsProtocolPattern = /^https:/;
+      const restfulUrlPattern = /\/\w+\/\w+(\/\{[^}]+\})*/;
+      if (httpProtocolPattern.test(url) || httpsProtocolPattern.test(url)) {
+        return restfulUrlPattern.test(url);
+      } else {
+        return false;
+      }
+    },
   }
 }
 </script>