输入弹框

.env.development

@@ -4,8 +4,8 @@ VUE_APP_BASE_API  = 'http://192.168.0.2:9888/'
 VUE_APP_WS_API = 'ws://192.168.0.2:9888/'
 
 
-# VUE_APP_BASE_API  = 'http://192.168.0.44:9888/'
-# VUE_APP_WS_API = 'ws://192.168.0.44:9888/'
+#VUE_APP_BASE_API  = 'http://192.168.0.44:9888/'
+#VUE_APP_WS_API = 'ws://192.168.0.44:9888/'
 
 
 

package.json

@@ -51,6 +51,7 @@
     "jszip": "3.1.5",
     "mavon-editor": "^2.9.0",
     "moment": "^2.29.1",
+    "mxgraph": "^4.2.2",
     "node-sass": "^5.0.0",
     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",

src/api/kettle/link.js

@@ -79,6 +79,28 @@ export function login(data){
 }
 
 
+//etl工具列表
+export function steps(data){
+  return request({
+    url: 'etlweb/system/steps',
+    data,
+    method: 'post'
+  })
+}
+
+
+
+//表格类型
+export function excelSheetType(data){
+  return request({
+    url: 'etlweb/system/excelSheetType',
+    data,
+    method: 'post'
+  })
+}
+
+
+
 
 
 

src/views/dashboard-kettle/components/designer/modules/index.js

+import mx from 'mxgraph';
+const mxgraph = mx({
+ mximagebasepath: './src/images',
+ mxbasepath: './src'
+});
+// decode bug https://github.com/jgraph/mxgraph/issues/49
+window.mxgraph = mxgraph.mxgraph;
+window.mxgraphmodel = mxgraph.mxgraphmodel;
+window.mxeditor = mxgraph.mxeditor;
+window.mxgeometry = mxgraph.mxgeometry;
+window.mxdefaultkeyhandler = mxgraph.mxdefaultkeyhandler;
+window.mxdefaultpopupmenu = mxgraph.mxdefaultpopupmenu;
+window.mxstylesheet = mxgraph.mxstylesheet;
+window.mxdefaulttoolbar = mxgraph.mxdefaulttoolbar;
+export default mxgraph;
\ No newline at end of file

src/views/dashboard-kettle/components/designer/modules/node.vue

@@ -10,7 +10,8 @@
         <!-- <div class="ef-node-left"></div> -->
         <!-- 节点类型的图标 -->
         <div class="el-node-icon ef-node-left-ico flow-node-drag">
-            <i :class="nodeIcoClass"></i>
+            <img :src="node.ico" alt="" class=" flow-node-drag">
+            <!-- <i :class="nodeIcoClass"></i> -->
         </div>
         <!-- 节点名称 -->
         <div class="ef-node-text" :show-overflow-tooltip="true">

src/views/kettle/home.vue

@@ -79,6 +79,7 @@
 
                             <span class="custom-tree-node" slot-scope="{node,data}">
                                 <span>
+                                    
                                     <i class="el-icon-folder"></i>{{ node.label }}
                                 </span> 
                             </span>
@@ -422,6 +423,7 @@
 
                     <span class="custom-tree-node" slot-scope="{node,data}">
                         <span>
+                            
                             <i class="el-icon-folder"></i>{{ node.label }}
                         </span> 
                     </span>
@@ -472,6 +474,9 @@ import {
   check,//编辑数据库
   login,//连接数据库
 } from "@/api/kettle/link";
+
+
+
 export default {
     components: {
         FlowDesigner,
@@ -479,6 +484,7 @@ export default {
     },
     data() {
       return {
+          prefix:'http://192.168.0.44:9700/etlweb/',
             tabShowFlag:true,//控制选项卡的显示和隐藏
             picName:'',//画板的标签明名称
             accessDataList:[],//连接类型
@@ -624,6 +630,14 @@ export default {
         this.test();
     },
     methods: {
+
+
+      
+
+
+
+
+
         // 左边文件夹和右边画布的宽度可以拖拽调整
         dragControllerDiv: function () {
                var resize = document.getElementsByClassName('resize');
@@ -1006,6 +1020,7 @@ export default {
           console.log('天加evt==',evt);
           console.log('天加nodeMenu==',draggingNode.data);
           var nodeMenu=draggingNode.data;
+        
         // var screenX = evt.originalEvent.clientX, screenY = evt.originalEvent.clientY
         // let efContainer = this.$refs.efContainer
         var screenX = evt.clientX, screenY = evt.clientY
@@ -1050,15 +1065,16 @@ export default {
         //   }
         //   break
         // }
-        console.log('-------003',nodeMenu.type);
+        console.log('-------003',nodeMenu);
         var node = {
           id: nodeId, //节点id--前端唯一的
-          name: nodeName, //节点名称
+          name: nodeMenu.text, //节点名称
           type: nodeMenu.type, //节点类型
           left: left + 'px', //坐标
           top: top + 'px', //坐标
-          ico: nodeMenu.ico, //图标
+          ico: this.prefix+nodeMenu.icon, //图标
         }
+        console.log(node);
         
         /**
          * 这里可以进行业务判断、是否能够添加该节点