init

2024-03-04 19:13:43 +08:00
commit e44edd71c0
350 changed files with 52288 additions and 0 deletions
--- a/src/views/workflow/process/config/TriggerNodeConfig.vue
+++ b/src/views/workflow/process/config/TriggerNodeConfig.vue
@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <el-form label-position="top" label-width="90px">
+      <el-form-item label="选择触发的动作" prop="text" class="user-type">
+        <el-radio-group v-model="config.type">
+          <el-radio label="WEBHOOK">发送网络请求</el-radio>
+          <el-radio label="EMAIL">发送邮件</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <div v-if="config.type === 'WEBHOOK'">
+        <el-form-item label="请求地址" prop="text">
+          <el-input placeholder="请输入URL地址" v-model="config.http.url">
+            <el-select v-model="config.http.method" style="width: 85px;" slot="prepend" placeholder="URL" filterable>
+              <el-option label="GET" value="GET"></el-option>
+              <el-option label="POST" value="POST"></el-option>
+              <el-option label="PUT" value="PUT"></el-option>
+              <el-option label="DELETE" value="DELETE"></el-option>
+            </el-select>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="Header请求头" prop="text">
+          <div slot="label">
+            <span style="margin-right: 10px">Header请求头</span>
+            <el-button type="primary" @click="addItem(config.http.headers)" link> + 添加</el-button>
+          </div>
+          <div v-for="(header, index) in config.http.headers" :key="index">
+            -
+            <el-input placeholder="参数名" style="width: 100px;" v-model="header.name"/>
+            <el-radio-group v-model="header.isField">
+              <el-radio-button :label="true">表单</el-radio-button>
+              <el-radio-button :label="false">固定</el-radio-button>
+            </el-radio-group>
+            <el-select v-if="header.isField" style="width: 180px;" v-model="header.value"
+                       placeholder="请选择表单字段" filterable>
+              <el-option v-for="form in forms" :key="form.id" :label="form.title" :value="form.title"></el-option>
+            </el-select>
+            <el-input v-else placeholder="请设置字段值" v-model="header.value" style="width: 180px;"/>
+            <el-icon class="el-icon-delete" @click="delItem(config.http.headers, index)"
+                     style="margin-left: 5px; color: #c75450; cursor: pointer"/>
+          </div>
+        </el-form-item>
+        <el-form-item label="Header请求参数" prop="text">
+          <div slot="label">
+            <span style="margin-right: 10px">请求参数   </span>
+            <el-button style="margin-right: 20px" type="primary" @click="addItem(config.http.params)" link> + 添加</el-button>
+            <span>参数类型 - </span>
+            <el-radio-group style="margin: 0 5px;" v-model="config.http.contentType">
+              <el-radio-button label="JSON">json</el-radio-button>
+              <el-radio-button label="FORM">form</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div v-for="(param, index) in config.http.params" :key="index">
+            -
+            <el-input placeholder="参数名" style="width: 100px;" v-model="param.name"/>
+            <el-radio-group style="margin: 0 5px;" v-model="param.isField">
+              <el-radio-button :label="true">表单</el-radio-button>
+              <el-radio-button :label="false">固定</el-radio-button>
+            </el-radio-group>
+            <el-select v-if="param.isField" style="width: 180px;" v-model="param.value"
+                       placeholder="请选择表单字段" filterable>
+              <el-option v-for="form in forms" :key="form.id" :label="form.title" :value="form.id"></el-option>
+            </el-select>
+            <el-input v-else placeholder="请设置字段值" v-model="param.value" style="width: 180px;"/>
+            <el-icon class="el-icon-delete" @click="delItem(config.http.params, index)"
+                     style="margin-left: 5px; color: #c75450; cursor: pointer"/>
+          </div>
+          <div>
+
+          </div>
+        </el-form-item>
+        <!--        <el-form-item label="请求结果处理" prop="text">-->
+        <div slot="label">
+          <span>请求结果处理</span>
+          <span style="margin-left: 20px">自定义脚本: </span>
+          <el-switch v-model="config.http.handlerByScript"></el-switch>
+        </div>
+        <span class="item-desc" v-if="config.http.handlerByScript">
+          <p>👉 返回值为 ture 则流程通过，为 false 则流程将被驳回</p>
+          <p>👉 (上线注意)占不支持ES高级语法</p>
+          <p>👉 (上线注意)不支持浏览器的内置函数</p>
+          <!--          <div>支持函数-->
+          <!--            <span style="color: dodgerblue">setFormByName(-->
+          <!--              <span style="color: #939494">'表单字段名', '表单字段值'</span>-->
+          <!--              )</span>-->
+          <!--            可改表单数据-->
+          <!--          </div>-->
+        </span>
+        <span class="item-desc" v-else>👉 无论请求结果如何，均通过</span>
+        <div v-if="config.http.handlerByScript">
+          <div>
+            <el-button @click="requestTestHandler">测试</el-button>
+          </div>
+          <div>
+            <span>请求成功😀：</span>
+            <js-code-edit v-model="config.http.success" :editor-placeholder="'请输入js代码'"
+                          :editor-height="250" :tab-size="2"/>
+          </div>
+          <div>
+            <span>请求失败😥：</span>
+            <js-code-edit v-model="config.http.fail" :editor-placeholder="'请输入js代码'"
+                          :editor-height="250" :tab-size="2"/>
+          </div>
+        </div>
+        <!--        </el-form-item>-->
+      </div>
+      <div v-else-if="config.type === 'EMAIL'">
+        <el-form-item label="邮件主题" prop="text">
+          <el-input placeholder="请输入邮件主题" v-model="config.email.subject"/>
+        </el-form-item>
+        <el-form-item label="收件方" prop="text">
+          <el-select style="width: 100%;" v-model="config.email.to" filterable multiple allow-create
+                     default-first-option placeholder="请输入收件人">
+            <el-option v-for="sender in config.email.to" :key="sender" :label="sender" :value="sender"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="抄送方" prop="text">
+          <el-select style="width: 100%;" v-model="config.email.cc" filterable multiple allow-create
+                     default-first-option placeholder="请输入收件人">
+            <el-option v-for="item in config.email.cc" :key="item" :label="item" :value="item"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="邮件正文" prop="text">
+          <el-input type="textarea" v-model="config.email.content" :rows="4"
+                    placeholder="邮件内容，支持变量提取表单数据 ${表单字段名} "></el-input>
+        </el-form-item>
+      </div>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import {computed, defineProps} from 'vue'
+import {ElMessage, ElMessageBox} from 'element-plus'
+import axios from "axios";
+import {useProcessStore} from '@/stores/processStore.js'
+import JsCodeEdit from "@/components/codeEdit/JsCodeEdit.vue";
+
+const processStore = useProcessStore()
+const props = defineProps({
+  config: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  }
+})
+const forms = computed(() => {
+  return processStore.getDesign().formItems || []
+})
+
+const addItem = (items) => {
+  if (items.length > 0 && (items[items.length - 1].name.trim() === ''
+      || items[items.length - 1].value.trim() === '')) {
+    ElMessage.warning("请完善之前项后在添加")
+    return;
+  }
+  items.push({name: '', value: '', isField: true})
+}
+
+
+const delItem = (items, index) => {
+  items.splice(index, 1)
+}
+//url规范性检查
+const 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;
+  }
+}
+//是否含有动态参数
+const hasUrlParams = (url) => {
+  const pattern = /{[^{}]+}/g;
+  let match;
+  while ((match = pattern.exec(url)) !== null) {
+    return true;
+  }
+  return false;
+}
+//获取到动态参数的名称
+const 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动态参数
+const replaceDynamicParams = (url, params) => {
+  const dynamicParamPattern = /{\s*(\w+)\s*}/g;
+  return url.replace(dynamicParamPattern, (match, param) => {
+    return params[param] || '0';
+  });
+}
+//获取到参数值
+const getParamsValue = (params, paramName) => {
+  for (let param of params) {
+    if (param.name === paramName) {
+      return param.value
+    }
+  }
+  return null;
+}
+//设置头部
+const setHeaders = (http) => {
+  let headers = {}
+  for (let header of http.headers) {
+    if (header.isField) {
+      ElMessage.error("测试只支持固定参数")
+      return
+    }
+    if (header.name !== "" && header.value !== "") {
+      this.$set(headers, header.name, header.value);
+    }
+  }
+  if (http.contentType === "FORM") {
+    this.$set(headers, "Content-Type", "multipart/form-data")
+  } else {
+    this.$set(headers, "Content-Type", "application/json")
+  }
+  return headers;
+}
+//设置post和put参数
+const setPostAndPutParams = (http) => {
+  let params = {}
+  for (let param of http.params) {
+    params[param.name] = param.value
+  }
+  return params;
+}
+//设置get和delete的参数
+const setGetAndDeleteParams = (http) => {
+  let dynamicParams = []
+  let url = http.url
+  let hasParams = hasUrlParams(url)
+  if (hasParams) {
+    dynamicParams = getDynamicParamNames(url);
+    let replaceParams = {}
+    for (let paramsName of dynamicParams) {
+      let value = getParamsValue(http.params, paramsName)
+      if (null == value) {
+        ElMessage.error(paramsName + '参数未设置')
+        return;
+      }
+      replaceParams[paramsName] = value
+    }
+    url = 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;
+}
+//请求测试
+
+const requestTestHandler = () => {
+  let http = props.config.http;
+  if (http.url == null || http.url === '') {
+    ElMessage.error("请填写请求路径!")
+    return
+  }
+  if (!restfulCheck(http.url)) {
+    ElMessage.error("当前只支持 RESTful URL!")
+    return
+  }
+  let headers = setHeaders(http)
+  let request
+  switch (http.method) {
+    case "GET":
+    case "DELETE":
+      let url = 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: setPostAndPutParams(http)
+      });
+      break;
+    default:
+      break;
+  }
+  console.log("==================[测试打印内容]==================")
+  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, "成功函数执行的返回结果")
+    } else {
+      let failFun = eval("(false ||" + http.fail + ")");
+      let result = failFun(res);
+      console.log(result, "失败函数执行的返回结果")
+    }
+  }).finally(() => {
+    console.log("==================[测试打印结束]==================")
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+.item-desc {
+  color: #939494;
+}
+</style>