流程图，技术支持

src/components/work-flow/super-flow.vue

@@ -16,7 +16,7 @@
         <p class="label_explanation">请拖拽添加到流程中</p>
         <div
           class="node-item"
-          :class="{'node-item-begin': item.value.meta.type == 0, 'node-item-end': item.value.meta.type == 1, 'node-item-default': item.value.meta.type == 2}"
+          :class="{'node-item-begin': item.value.meta.type == 1, 'node-item-end': item.value.meta.type == 2, 'node-item-default': item.value.meta.type == 3}"
           v-for="(item, index) in nodeItemList"
           :key="index"
           @mousedown="evt => nodeItemMouseDown(evt, item.value)"
@@ -37,7 +37,7 @@
       >
         <template v-slot:node="{meta}">
           <div
-            :class="{'flow-node-begin': nodeParams(meta.id).type == 0, 'flow-node-end': nodeParams(meta.id).type == 1, 'flow-node-default': nodeParams(meta.id).type == 2 && meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(meta.id).type == 2 && meta.id == nodeItem.id }"
+            :class="{'flow-node-begin': nodeParams(meta.id).type == 1, 'flow-node-end': nodeParams(meta.id).type == 2, 'flow-node-default': nodeParams(meta.id).type == 3 && meta.id != nodeItem.id, 'flow-node-default-active': nodeParams(meta.id).type == 3 && meta.id == nodeItem.id }"
             :id="meta.id"
           >
             <div
@@ -51,7 +51,7 @@
     </div>
     <div class="flow_options">
       <p class="options_head">操作</p>
-      <div class="options_item" @click="generalSettings">
+      <div class="options_item" @click="showGeneralSettings">
         <img :src="require('@/assets/imgs/lcsj_ic_set.png')" class="options_img" />
         <p class="options_text">常规设置</p>
       </div>
@@ -59,7 +59,7 @@
         <img :src="require('@/assets/imgs/lcsj_ic_chajian.png')" class="options_img" />
         <p class="options_text">插件设置</p>
         <div class="options_pop">
-          <div class="options_pop_item">
+          <div class="options_pop_item" @click="showInterfacePlugin">
             <img :src="require('@/assets/imgs/lcsj_ic_jiekou.png')" class="options_item_img" />
             <p class="options_item_text">接口插件</p>
           </div>
@@ -84,7 +84,7 @@
     >
       <div class="general_settings">
         <p class="general_title">节点编号：</p>
-        <p class="general_val">WF0000000101</p>
+        <p class="general_val">{{ nodeParams(nodeItem.id).node_code }}</p>
         <p class="general_title">节点名称：</p>
         <p class="general_input">
           <el-input v-model="node_name" placeholder="请输入节点名称"></el-input>
@@ -95,15 +95,169 @@
         </div>
       </div>
     </el-dialog>
+    <el-dialog
+      :visible.sync="dialog_interface"
+      top="25vh"
+      width="80vw"
+      :modal-append-to-body="false"
+      title="接口插件"
+      :close-on-click-modal="false"
+    >
+      <div class="interface_plugin">
+        <div class="interface_msg">
+          <i class="el-icon-warning-outline"></i>
+          <span>接口插件设置后，流程服务在节点完成时自动调取该接口，同步节点业务数据，保存到流程服务中。</span>
+        </div>
+        <div class="interface_plugin_item">
+          <div class="fwcs_fwdz">服务地址：</div>
+          <div class="fwcs_fwdz_inner">
+            <el-input
+              placeholder="请输入内容"
+              @input="getUrl"
+              v-model="serviceUrl"
+              class="input-with-select"
+            >
+              <el-select v-model="select" slot="prepend" placeholder="请选择">
+                <el-option
+                  v-for="item in optionType"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+            </el-input>
+            <el-button @click="clickFwcs()" class="fwcs_btn_fwcs">连接测试</el-button>
+          </div>
+          <el-tabs v-model="activeName" class="fwcs_tabs" @tab-click="clickTab">
+            <el-tab-pane label="请求参数" name="0">
+              <CesTable
+                ref="fwcs_sjfw_qq"
+                size="mini"
+                :border="true"
+                :headers="sjfwQqcs"
+                url
+                :datas="datasSj"
+                :searchShow="false"
+                :addRowBtn="false"
+                :autoAdd="true"
+                :isDialog="false"
+                :isSelection="false"
+                :isIndex="true"
+                :radius="true"
+                :emptyText="emptyText"
+                :stripe="false"
+                :paginationShow="false"
+                :pageSizeShow="false"
+                headerCellClassName="th_pink"
+                @changeTable="changeTable"
+              ></CesTable>
+            </el-tab-pane>
+            <el-tab-pane label="请求体" name="1">
+              <div class="sjfw_qqt">
+                <el-radio-group v-model="sjfwQqt">
+                  <el-radio label="JSON">JSON</el-radio>
+                </el-radio-group>
+              </div>
+              <Codes ref="jsonCodes"></Codes>
+            </el-tab-pane>
+            <el-tab-pane label="授权信息" name="2">
+              <el-row class="sqxx_row">
+                <el-col :span="6">
+                  <div class="sqxx_title">授权方式：</div>
+                  <el-select v-model="sqfsVal" placeholder="请选择" class="sqxx_select">
+                    <el-option
+                      v-for="item in optionsSq"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value"
+                    ></el-option>
+                  </el-select>
+                </el-col>
+                <el-col :span="2" class="center_line_c">
+                  <div class="center_line"></div>
+                </el-col>
+                <el-col :span="16">
+                  <div class="sqxx_title">Token：</div>
+                  <el-input v-model="tokenVal" placeholder="请输入内容"></el-input>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+          </el-tabs>
+          <div v-show="resultShow && resSuccess" class="add_params">
+            <div class="split_line"></div>
+            <div class="sjfw_qqcstx">请求参数信息填写：</div>
+            <CesTable
+              ref="fwcs_sjfw_qqcs"
+              size="mini"
+              :border="true"
+              :headers="sjfwQqcstx"
+              url
+              :datas="datasQqcs"
+              :searchShow="false"
+              :addRowBtn="false"
+              :autoAdd="false"
+              :isDialog="false"
+              :isSelection="false"
+              :isIndex="true"
+              :radius="true"
+              :emptyText="emptyText"
+              :stripe="false"
+              :paginationShow="false"
+              :pageSizeShow="false"
+              headerCellClassName="th_pink"
+            ></CesTable>
+            <div class="sjfw_fhcstx">返回参数信息填写：</div>
+            <CesTable
+              ref="fwcs_sjfw_fhcs"
+              size="mini"
+              :border="true"
+              :headers="sjfwFhcstx"
+              url
+              :datas="datasFhcs"
+              :searchShow="false"
+              :addRowBtn="false"
+              :autoAdd="false"
+              :isDialog="false"
+              :isSelection="false"
+              :isIndex="true"
+              :radius="true"
+              :emptyText="emptyText"
+              :stripe="false"
+              :paginationShow="false"
+              :pageSizeShow="false"
+              headerCellClassName="th_pink"
+            ></CesTable>
+          </div>
+          <div v-show="resultShow && !resSuccess">
+            <div class="skfw_csfwxx">测试服务信息：</div>
+            <div class="test_succ">
+              <div class="skcs_jg">
+                <img src="@/assets/imgs/test_icon_error.png" class="skcs_jg_img" />&nbsp;测试失败
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="dia_footer">
+          <el-button class="cancel" @click="interfaceCancel">取消</el-button>
+          <el-button class="submit" @click="interfaceSubmit">确定</el-button>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import CesTable from "@/components/table/table-um";
+import Codes from "@/components/general/codes";
 const drawerType = {
   node: 0,
   link: 1,
 };
 export default {
+  components: {
+    CesTable,
+    Codes,
+  },
   data() {
     return {
       scale_num: 100,
@@ -171,7 +325,7 @@ export default {
             meta: {
               label: "普通节点",
               name: "普通节点",
-              type: 2,
+              type: 3,
             },
           },
         },
@@ -183,7 +337,7 @@ export default {
             meta: {
               label: "开始",
               name: "开始",
-              type: 0,
+              type: 1,
             },
           },
         },
@@ -195,7 +349,7 @@ export default {
             meta: {
               label: "结束",
               name: "结束",
-              type: 1,
+              type: 2,
             },
           },
         },
@@ -219,6 +373,78 @@ export default {
       },
       node_name: "",
       show_options_pop: false,
+      dialog_interface: false,
+      optionType: [
+        { label: "GET", value: 1 },
+        { label: "POST", value: 2 },
+        { label: "PUT", value: 3 },
+        { label: "DELETE", value: 4 },
+      ],
+      select: 1,
+      serviceUrl: "",
+      activeName: 0,
+      sjfwQqt: "JSON",
+      emptyText: "暂无数据",
+      sqfsVal: "",
+      sjfwQqcs: [
+        {
+          label: "请求字段编码",
+          prop: "requestEncoding",
+          type: "input",
+          align: "left",
+        },
+        { label: "请求值", prop: "requestValue", type: "input", align: "left" },
+      ],
+      datasSj: [],
+      optionsSq: [{ label: "Bearer Token", value: "Bearer" }],
+      tokenVal: "",
+      noSearchUrl: "",
+      sjfwQqcstx: [
+        { label: "字段编码", prop: "name", type: "", align: "left" },
+        { label: "示例值", prop: "example", type: "input", align: "left" },
+        {
+          label: "字段类型",
+          prop: "show_type",
+          type: "",
+          align: "left",
+          width: "140",
+        },
+        {
+          label: "字段名称*",
+          prop: "label",
+          type: "input",
+          align: "left",
+        },
+        {
+          label: "是否必须*",
+          prop: "is_must",
+          type: "select",
+          align: "left",
+          width: 100,
+          selectArr: [
+            { label: "是", value: 1 },
+            { label: "否", value: 0 },
+          ],
+          hasDefault: true,
+        },
+        { label: "字段说明", prop: "descript", type: "input", align: "left" },
+      ],
+      sjfwFhcstx: [
+        { label: "字段编码", prop: "name", type: "", align: "left" },
+        { label: "示例值", prop: "example", type: "input", align: "left" },
+        { label: "字段类型", prop: "show_type", type: "", align: "left" },
+        {
+          label: "字段名称*",
+          prop: "label",
+          type: "input",
+          align: "left",
+        },
+        { label: "字段说明", prop: "descript", type: "input", align: "left" },
+      ],
+      datasQqcs: [],
+      datasFhcs: [],
+      resSuccess: false,
+      resultShow: false,
     };
   },
   mounted() {
@@ -278,13 +504,7 @@ export default {
         );
         // 添加节点
         let query = { width: 120, height: 48, meta: {} };
-        if (conf.info.meta.type == 0) {
-          query.meta.type == 0;
-        } else if (conf.info.meta.type == 1) {
-          query.meta.type == 1;
-        } else if (conf.info.meta.type == 2) {
-          query.meta.type == 2;
-        }
+        query.meta.type = conf.info.meta.type;
         if (!conf.info.meta.id) {
           query.meta.id = parseInt(Math.random() * 1000 * 1000);
         }
@@ -299,25 +519,25 @@ export default {
           }) == -1
         ) {
           let obj = {};
-          if (conf.info.meta.type == 0) {
+          if (conf.info.meta.type == 1) {
             obj = {
               label: "开始",
               name: "开始",
-              type: 0,
+              type: 1,
               id: query.meta.id,
             };
-          } else if (conf.info.meta.type == 1) {
+          } else if (conf.info.meta.type == 2) {
             obj = {
               label: "结束",
               name: "结束",
-              type: 1,
+              type: 2,
               id: query.meta.id,
             };
-          } else if (conf.info.meta.type == 2) {
+          } else if (conf.info.meta.type == 3) {
             obj = {
               label: "普通节点",
               name: "普通节点",
-              type: 2,
+              type: 3,
               id: query.meta.id,
             };
           }
@@ -369,27 +589,38 @@ export default {
       };
     },
     handleChange() {},
-    generalSettings() {
+    checkNodeCouldEdit() {
       let self = this;
       if (self.nodeItem.id && self.nodeItem.id != "") {
-        if (self.nodeItem.type == 2) {
-          self.node_name = self.nodeParamsList.find((item) => {
-            return item.id == self.nodeItem.id;
-          }).name;
-          self.dialog_general = true;
+        if (self.nodeItem.type == 3) {
+          return true;
         } else {
           self.$message({
             message: "开始和结束节点不可被编辑",
             type: "warning",
           });
+          return false;
         }
       } else {
         self.$message({
           message: "请选择节点",
           type: "warning",
         });
+        return false;
       }
     },
+    showGeneralSettings() {
+      if (this.checkNodeCouldEdit()) {
+        let self = this;
+        self.node_name = self.nodeParamsList.find((item) => {
+          return item.id == self.nodeItem.id;
+        }).name;
+        self.dialog_general = true;
+      }
+    },
+    showInterfacePlugin() {
+      this.dialog_interface = true;
+    },
     nodeParams(id) {
       let index = this.nodeParamsList.findIndex((item) => {
         return item.id == id;
@@ -405,7 +636,7 @@ export default {
     },
     generalSubmit() {
       let self = this;
-      if (self.nodeItem.type == 2) {
+      if (self.nodeItem.type == 3) {
         let index = self.nodeParamsList.findIndex((item) => {
           return item.id == self.nodeItem.id;
         });
@@ -421,6 +652,127 @@ export default {
 
       self.dialog_general = false;
     },
+    clickTab() {},
+    getUrl(enUrl) {
+      let url = decodeURI(enUrl);
+      let arr = [];
+      if (url.indexOf("?") != -1) {
+        this.noSearchUrl = url.substring(0, url.indexOf("?"));
+        let search = url.substring(url.indexOf("?") + 1);
+        let vars = search.split("&");
+        for (let i = 0; i < vars.length; i++) {
+          if (vars[i] != "") {
+            let pair = vars[i].split("=");
+            arr[i] = {};
+            arr[i].requestEncoding = pair[0] ? pair[0] : "";
+            arr[i].requestValue = pair[1] ? pair[1] : "";
+          }
+        }
+      } else {
+        this.noSearchUrl = enUrl;
+      }
+      this.serviceUrl = url;
+      this.datasSj = arr;
+    },
+    changeTable() {},
+    clickFwcs() {
+      let headers = {};
+      let requestData = {};
+      if (this.sqfsVal != "") {
+        headers.Authorization = [];
+        headers.Authorization[0] = this.sqfsVal + " " + this.tokenVal;
+      }
+      let request = this.$refs.fwcs_sjfw_qq.getTableData();
+      for (let i = 0; i < request.length; i++) {
+        if (
+          request[i] &&
+          request[i].requestEncoding &&
+          request[i].requestValue &&
+          request[i].requestEncoding != "" &&
+          request[i].requestValue != ""
+        ) {
+          if (
+            Object.keys(requestData).indexOf(request[i].requestEncoding) == -1
+          ) {
+            requestData[request[i].requestEncoding] = [];
+            requestData[request[i].requestEncoding][0] =
+              request[i].requestValue;
+          } else {
+            requestData[request[i].requestEncoding].push(
+              request[i].requestValue
+            );
+          }
+        }
+      }
+      let bodys = this.$refs.jsonCodes
+        ? this.$refs.jsonCodes.getCodesVal()
+        : "";
+      let contentType = this.sjfwQqt;
+      let query = {
+        method: this.select,
+        url: this.serviceUrl,
+        headers: headers,
+        params: requestData,
+        body: bodys,
+        content_type: contentType,
+        data_service_type1: 5,
+        data_service_type2: 12,
+      };
+      this.$api.workbench.fwzcFwcs(query).then((response) => {
+        if (response.data.success == 1) {
+          let data = response.data.data;
+          this.body_fields = data.body_fields;
+          this.param_fields = data.param_fields;
+          if (data.body_fields && data.body_fields.length != 0) {
+            this.datasQqcs = data.body_fields;
+            this.dataType = "body";
+          } else {
+            this.datasQqcs = data.param_fields;
+            this.dataType = "param";
+          }
+          this.datasFhcs = data.response_fields;
+          this.resSuccess = true;
+          this.resultShow = true;
+        } else {
+          this.resSuccess = false;
+          this.resultShow = true;
+          console.log(response.data.errMsg);
+        }
+      });
+    },
+    interfaceCancel() {
+      this.dialog_interface = false;
+    },
+    interfaceSubmit() {
+      let requestData = this.$refs.fwcs_sjfw_qqcs.getTableData();
+      let responseData = this.$refs.fwcs_sjfw_fhcs.getTableData();
+      this.requestRules = 0;
+      this.responseRules = 0;
+      this.checkTable(requestData, 0);
+      this.checkTable(responseData, 1);
+      if (this.requestRules == 0 && this.responseRules == 0) {
+        this.request_fields = requestData;
+        this.response_fields = responseData;
+        let self = this;
+        let index = this.nodeParamsList.findIndex((item) => {
+          return (item.id = self.nodeItem.id);
+        });
+        self.nodeParamsList[index].plugins.push({
+          plugin_type: 1,
+          url: self.serviceUrl,
+          req_type: Number(self.select),
+          auth_method: self.sqfsVal,
+          auth_token: self.tokenVal,
+          query_fields: "this is response_fields value1",
+          body_fields: "this is response_fields value1",
+          response_fields: "this is response_fields value1",
+        });
+      } else if (this.requestRules != 0) {
+        this.$message.error("请完善请求参数信息中的字段名称");
+      } else if (this.responseRules != 0) {
+        this.$message.error("请完善返回参数信息中的字段名称");
+      }
+    },
   },
 };
 </script>
@@ -494,7 +846,7 @@ export default {
         z-index: 2;
         top: 0;
         right: 0;
-        animation: myfirst 1s;
+        animation: myfirst 0.5s;
         display: flex;
         overflow: hidden;
         justify-content: space-around;
@@ -600,6 +952,111 @@ export default {
     }
   }
 }
+.general_settings {
+  font-size: 14px;
+  text-align: left;
+  .general_title {
+    margin-bottom: 20px;
+    padding-left: 10px;
+  }
+  .general_val {
+    margin-bottom: 30px;
+    padding-left: 10px;
+  }
+  .general_input {
+    margin-bottom: 50px;
+  }
+}
+.interface_plugin {
+  .interface_msg {
+    font-size: 12px;
+    color: #58617a;
+    width: 570px;
+    margin: 0 auto;
+    padding: 10px 0;
+    background-color: #f4f7fc;
+    border-radius: 8px;
+  }
+  .interface_plugin_item {
+    text-align: left;
+    .fwcs_fwdz {
+      color: #58617a;
+      margin: 20px 15px 15px;
+      font-size: 14px;
+    }
+    .fwcs_fwdz_inner {
+      margin-bottom: 20px;
+    }
+    .input-with-select {
+      width: 70%;
+    }
+    .fwcs_btn_fwcs {
+      background-color: #0f2683;
+      color: #ffffff;
+      margin-left: 10px;
+    }
+    .fwcs_tabs {
+      .sqxx_row {
+        padding: 0 20px;
+        .sqxx_title {
+          color: #58617a;
+          font-size: 14px;
+          margin: 10px 15px;
+        }
+        .sqxx_select {
+          width: 100%;
+        }
+        .center_line_c {
+          margin: 0 auto;
+          .center_line {
+            background-color: #f4f7fc;
+            width: 2px;
+            height: 400px;
+            position: relative;
+            left: 50%;
+          }
+        }
+      }
+    }
+    .split_line {
+      width: 100%;
+      height: 1px;
+      background-color: #f4f7fc;
+      margin: 30px 0;
+    }
+    .sjfw_qqcstx {
+      color: #58617a;
+      margin: 10px 15px;
+      font-size: 14px;
+    }
+    .sjfw_fhcstx {
+      color: #58617a;
+      margin: 30px 15px 10px;
+      font-size: 14px;
+    }
+  }
+}
+.dia_footer {
+  font-size: 14px;
+  text-align: center;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 20px;
+  .cancel {
+    background-color: #c3caf8;
+    color: #0f2683;
+    width: 90px;
+    height: 34px;
+    padding: 0 20px;
+  }
+  .submit {
+    background-color: #0f2683;
+    color: #f8f9fd;
+    width: 90px;
+    height: 34px;
+    padding: 0 20px;
+  }
+}
 </style>
 <style lang="less">
 .super-flow {
@@ -673,39 +1130,13 @@ export default {
   top: -160px;
   left: -20px;
 }
-.general_settings {
-  font-size: 14px;
-  text-align: left;
-  .general_title {
-    margin-bottom: 20px;
-    padding-left: 10px;
-  }
-  .general_val {
-    margin-bottom: 30px;
-    padding-left: 10px;
-  }
-  .general_input {
-    margin-bottom: 50px;
-  }
-}
-.dia_footer {
-  font-size: 14px;
-  text-align: center;
-  display: flex;
-  justify-content: flex-end;
-  .cancel {
-    background-color: #c3caf8;
-    color: #0f2683;
-    width: 90px;
-    height: 34px;
-    padding: 0 20px;
-  }
-  .submit {
+.fwcs_fwdz_inner .el-select .el-input {
+  width: 130px;
   background-color: #0f2683;
-    color: #f8f9fd;
-    width: 90px;
-    height: 34px;
-    padding: 0 20px;
-  }
+  color: #ffffff;
+  border-radius: 8px 0px 0px 8px;
+}
+.interface_plugin .el-tabs__header .el-tabs__item:hover {
+  color: #e56600;
 }
 </style>
\ No newline at end of file

src/pages/index.vue

@@ -16,7 +16,8 @@ export default {
       '/intelligent_drawing',
       '/intelligent_details',
       '/intelligent_appbuilder',
-      '/search_engine'
+      '/search_engine',
+      '/technical_support'
     ]
   }),
   created(){

src/pages/technical-support/index.vue

+<template>
+  <div class="contain"></div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  components: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {},
+};
+</script>
+
+<style>
+
+</style>

src/pages/workbench/component-center/process-management/process-design/index.vue

@@ -128,6 +128,7 @@ export default {
     verification() {
       let self = this;
       let data = JSON.parse(JSON.stringify(self.$refs.workFlow.getData()));
+      console.log(JSON.stringify(data))
       let start_num = 0;
       let end_num = 0;
       let start_id = "";
@@ -143,11 +144,11 @@ export default {
           return nodep.id == item.meta.id;
         });
         item.meta = da;
-        if (item.meta.type == 0) {
+        if (item.meta.type == 1) {
           start_num++;
           start_id = item.id;
         }
-        if (item.meta.type == 1) {
+        if (item.meta.type == 2) {
           end_num++;
           end_id = item.id;
         }

src/router/index.js

@@ -143,6 +143,12 @@ export default new Router({
             },
           ],
         }, // 工作台 - 应用管理模块
+        {
+          path: "/technical_support", // 技术支持
+          name: "technicalSupport",
+          component: () => import("@/pages/technical-support/index"),
+
+        },
         {
           path: "/shop", // 服务超市
           name: "shop",