可通过拖动改变节点位置

ElectronJS/src/taskGrid/FlowChart.html

@@ -581,12 +581,12 @@ If the expression returns a value greater than 0 or evaluates to True, the opera
                 </div>
                 <div style="margin-top:5px">
                     <label>Wait for the following elements to appear <b>before</b> executing:</label>
-                    <textarea onkeydown="inputDelete(event)" class="form-control" style="min-height: 30px" v-model='nowNode["parameters"]["waitElement"]'
+                    <textarea onkeydown="inputDelete(event)" class="form-control" style="min-height: 30px" v-model='list.nl[index.nowNodeIndex]["parameters"]["waitElement"]'
                               placeholder="Enter the XPath of the element to wait for, leave blank to skip waiting"></textarea>
                     <label style="margin-top:5px">In which iframe is the element located? Set to 0 if the element is not inside an iframe:</label>
-                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['waitElementIframeIndex']" type="number" required></input>
+                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="list.nl[index.nowNodeIndex]['parameters']['waitElementIframeIndex']" type="number" required></input>
                     <label style="margin-top:5px">Maximum waiting time for element appearance (in seconds):</label>
-                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['waitElementTime']" type="number" required></input>
+                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="list.nl[index.nowNodeIndex]['parameters']['waitElementTime']" type="number" required></input>
                     <label style="margin-top:5px">Wait seconds <b>after</b> execution (can set decimal values, e.g., 0.5):</label>
                     <input onkeydown="inputDelete(event)" required type="number" class="form-control" v-model.number='list.nl[index.nowNodeIndex]["parameters"]["wait"]'></input>
                     <label>Wait Type</label>

ElectronJS/src/taskGrid/FlowChart.js

@@ -13,8 +13,16 @@ let root = {
         tabIndex: 0,
         useLoop: false, //是否使用循环中的元素
         xpath: "", //xpath
-        wait: 0,
-        waitType: 0,
+        iframe: false, //是否在iframe中
+        wait: 0, //执行后等待
+        waitType: 0, //等待类型，0代表固定时间，1代表随机等待
+        beforeJS: "", //执行前执行的js
+        beforeJSWaitTime: 0, //执行前js等待时间
+        afterJS: "", //执行后执行的js
+        afterJSWaitTime: 0, //执行后js等待时间
+        waitElement: "", //等待元素
+        waitElementTime: 10, //等待元素时间
+        waitElementIframeIndex: 0, //等待元素在第几个iframe中
     },
     isInLoop: false, //是否处于循环内
 };
@@ -222,7 +230,7 @@ function newNode(node) {
     type = node["type"];
     if (type == 0) //顺序
     {
-        return `<div class="sequence"><div class="node clk" data="${id}" dataType=${type} id = "${id}" position=${node["position"]} pId=${node["parentId"]}>
+        return `<div class="sequence"><div class="node clk" draggable="true" data="${id}" dataType=${type} id = "${id}" position=${node["position"]} pId=${node["parentId"]}>
                 <div >
                     <p>${title}</p>
                 </div>
@@ -230,20 +238,20 @@ function newNode(node) {
             <p class="arrow" position=${node["position"]} data = "${id}" pId=${node["parentId"]}>↓</p></div>`;
     } else if (type == 1) //循环
     {
-        return `<div class="loop clk" data="${id}" dataType=${type} id = "${id}" position=${node["position"]} pId=${node["parentId"]}>
+        return `<div class="loop clk" data="${id}" draggable="true" dataType=${type} id = "${id}" position=${node["position"]} pId=${node["parentId"]}>
              <p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
                 <p class="arrow" position=-1 data = "${id}" pId=${id}>↓</p>
             </div>
             <p class="arrow" data = "${id}" position=${node["position"]} pId=${node["parentId"]}>↓</p></div>`;
     } else if (type == 2) //判断
     {
-        return LANG(`<div class="loop clk" dataType=${type} data="${id}" position=${node["position"]} pId=${node["parentId"]}>
+        return LANG(`<div class="loop clk" draggable="true" dataType=${type} data="${id}" position=${node["position"]} pId=${node["parentId"]}>
                     <p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
                     <p class="branchAdd" data="${id}">点击此处在最左边增加条件分支</p>
                     <div class="judge" id = "${id}">
                     </div></div>
                     <p class="arrow" data = "${id}" position=${node["position"]} pId=${node["parentId"]}>↓</p></div>`,
-            `<div class="loop clk" dataType=${type} data="${id}" position=${node["position"]} pId=${node["parentId"]}>
+            `<div class="loop clk" draggable="true" dataType=${type} data="${id}" position=${node["position"]} pId=${node["parentId"]}>
                     <p style="background:#d6d6d6;text-align:left;padding:2px">${title}</p>
                     <p class="branchAdd" data="${id}">Click here to add a new condition to the left most</p>
                     <div class="judge" id = "${id}">
@@ -434,6 +442,8 @@ function toolBoxKernel(e, para = null) {
         }
     } else if (option > 0) { //新增操作
         let l = nodeList.length;
+        let nt = null;
+        let nt2 = null;
         let t = {
             id: 0,
             index: l,
@@ -452,7 +462,7 @@ function toolBoxKernel(e, para = null) {
         {
             t["type"] = 2;
             // 增加两个分支
-            let nt = {
+            nt = {
                 id: 0,
                 parentId: 0,
                 index: l + 1,
@@ -462,7 +472,7 @@ function toolBoxKernel(e, para = null) {
                 sequence: [],
                 isInLoop: false,
             };
-            let nt2 = {
+            nt2 = {
                 id: 0,
                 parentId: 0,
                 index: l + 2,
@@ -521,6 +531,31 @@ $(".options").mousedown(function() {
     }
 });
 
+function elementDragStart(e) {
+    // e.preventDefault();
+    // nowNode = this;
+}
+
+function arrowDragOver(e) {
+    e.preventDefault();
+    app._data.nowArrow = { "position": this.getAttribute('position'), "pId": this.getAttribute('pId'), "num": 0 };
+    // console.log("dragover", app._data.nowArrow, nowNode);
+}
+
+function elementDragEnd(e) {
+    // e.preventDefault();
+    // console.log("dragend");
+    if (nowNode != null) {
+        nowNode.style.borderColor = "skyblue";
+    }
+    nowNode = this;
+    vueData.nowNodeIndex = actionSequence[this.getAttribute("data")];
+    this.style.borderColor = "blue";
+    handleElement(); //处理元素
+    option = 10; //剪切元素操作
+    toolBoxKernel.call(this, e);
+}
+
 function bindEvents() {
     // 清空原来的listener然后再添加新的listener
     //以下绑定了左右键的行为
@@ -530,6 +565,10 @@ function bindEvents() {
         rule.addEventListener('mousedown', elementMousedown);
         rule.removeEventListener('click', elementClick);
         rule.addEventListener('click', elementClick);
+        rule.removeEventListener('dragstart', elementDragStart);
+        rule.addEventListener('dragstart', elementDragStart);
+        rule.removeEventListener('dragend', elementDragEnd);
+        rule.addEventListener('dragend', elementDragEnd);
     }
     let arr = document.getElementsByClassName('arrow');
     for (let i = 0, rule; rule = arr[i++];) {
@@ -537,6 +576,8 @@ function bindEvents() {
         rule.addEventListener('click', arrowClick);
         rule.removeEventListener('mousedown', arrowMouseDown);
         rule.addEventListener('mousedown', arrowMouseDown);
+        rule.removeEventListener('dragover', arrowDragOver);
+        rule.addEventListener('dragover', arrowDragOver);
     }
     let branch = document.getElementsByClassName('branchAdd');
     for (let i = 0, rule; rule = branch[i++];) {

ElectronJS/src/taskGrid/FlowChart_CN.html

@@ -581,12 +581,12 @@
                 </div>
                 <div style="margin-top:5px">
                     <label>操作<b>执行前</b>等待以下元素出现：</label>
-                    <textarea onkeydown="inputDelete(event)" class="form-control" style="min-height: 30px" v-model='nowNode["parameters"]["waitElement"]'
+                    <textarea onkeydown="inputDelete(event)" class="form-control" style="min-height: 30px" v-model='list.nl[index.nowNodeIndex]["parameters"]["waitElement"]'
                               placeholder="填写要等待出现元素的XPath，不填写则不等待"></textarea>
                     <label style="margin-top:5px">要等待的元素在页面第几个iframe中，0表示元素不在iframe中：</label>
-                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['waitElementIframeIndex']" type="number" required></input>
+                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="list.nl[index.nowNodeIndex]['parameters']['waitElementIframeIndex']" type="number" required></input>
                     <label style="margin-top:5px">元素出现的最长等待时间（秒）：</label>
-                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="nowNode['parameters']['waitElementTime']" type="number" required></input>
+                    <input onkeydown="inputDelete(event)" class="form-control" v-model.number="list.nl[index.nowNodeIndex]['parameters']['waitElementTime']" type="number" required></input>
                     <label style="margin-top:5px">操作<b>执行后</b>等待秒数（所有等待时间均可设置为小数，如0.5）：</label>
                     <input onkeydown="inputDelete(event)" required type="number" class="form-control" v-model.number='list.nl[index.nowNodeIndex]["parameters"]["wait"]'></input>
                     <label style="margin-top:5px">等待类型</label>

ElectronJS/tasks/185.json

@@ -0,0 +1 @@
+{"id":185,"name":"京东全球版-专业的综合网上购物商城","url":"https://www.jd.com","links":"https://www.jd.com","create_time":"7/17/2023, 1:02:53 AM","update_time":"7/17/2023, 1:02:53 AM","version":"0.3.6","saveThreshold":10,"cloudflare":0,"environment":0,"maxViewLength":15,"outputFormat":"xlsx","saveName":"current_time","inputExcel":"","startFromExit":0,"containJudge":false,"desc":"https://www.jd.com","inputParameters":[{"id":0,"name":"urlList_0","nodeId":1,"nodeName":"打开网页","value":"https://www.jd.com","desc":"要采集的网址列表，多行以\\n分开","type":"text","exampleValue":"https://www.jd.com"},{"id":1,"name":"inputText_1","nodeName":"输入文字","nodeId":2,"desc":"要输入的文本，如京东搜索框输入：电脑","type":"text","exampleValue":"","value":""}],"outputParameters":[{"id":0,"name":"参数1_文本","desc":"","type":"text","recordASField":1,"exampleValue":"/手机/数码"}],"graph":[{"index":0,"id":0,"parentId":0,"type":-1,"option":0,"title":"root","sequence":[1,2,3],"parameters":{"history":1,"tabIndex":0,"useLoop":false,"xpath":"","iframe":false,"wait":0,"waitType":0,"beforeJS":"","beforeJSWaitTime":0,"afterJS":"","afterJSWaitTime":0,"waitElement":"","waitElementTime":10,"waitElementIframeIndex":0},"isInLoop":false},{"id":1,"index":1,"parentId":0,"type":0,"option":1,"title":"打开网页","sequence":[],"isInLoop":false,"position":0,"parameters":{"useLoop":false,"xpath":"","wait":0,"waitType":0,"beforeJS":"","beforeJSWaitTime":0,"afterJS":"","afterJSWaitTime":0,"waitElement":"","waitElementTime":10,"waitElementIframeIndex":0,"url":"https://www.jd.com","links":"https://www.jd.com","maxWaitTime":10,"scrollType":0,"scrollCount":1,"scrollWaitTime":1,"cookies":""}},{"id":2,"index":2,"parentId":0,"type":0,"option":4,"title":"输入文字","sequence":[],"isInLoop":false,"position":1,"parameters":{"history":1,"tabIndex":0,"useLoop":false,"xpath":"","iframe":false,"wait":0,"waitType":0,"beforeJS":"","beforeJSWaitTime":0,"afterJS":"","afterJSWaitTime":0,"waitElement":"","waitElementTime":10,"waitElementIframeIndex":0,"value":"","index":0}},{"id":3,"index":3,"parentId":0,"type":1,"option":8,"title":"循环","sequence":[4],"isInLoop":false,"position":2,"parameters":{"history":4,"tabIndex":-1,"useLoop":false,"xpath":"/html/body/div[5]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div","iframe":false,"wait":0,"waitType":0,"beforeJS":"","beforeJSWaitTime":0,"afterJS":"","afterJSWaitTime":0,"waitElement":"","waitElementTime":10,"waitElementIframeIndex":0,"scrollType":0,"scrollCount":1,"scrollWaitTime":1,"loopType":1,"pathList":"","textList":"","code":"","waitTime":0,"exitCount":0,"historyWait":2,"breakMode":0,"breakCode":"","breakCodeWaitTime":0,"allXPaths":["/html/body/div[5]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]","//div[contains(., '/手机/数码')]","//DIV[@class='LeftSide_menu_item__SBMWC LeftSide_text_space__2UhbG ']","/html/body/div[last()-6]/div/div[last()-4]/div/div[last()-2]/div/div/div/div[last()-1]/div[last()-12]"]}},{"id":4,"index":4,"parentId":3,"type":0,"option":3,"title":"提取数据","sequence":[],"isInLoop":true,"position":0,"parameters":{"history":4,"tabIndex":-1,"useLoop":false,"xpath":"","iframe":false,"wait":0,"waitType":0,"beforeJS":"","beforeJSWaitTime":0,"afterJS":"","afterJSWaitTime":0,"waitElement":"","waitElementTime":10,"waitElementIframeIndex":0,"clear":0,"paras":[{"nodeType":0,"contentType":0,"relative":true,"name":"参数1_文本","desc":"","extractType":0,"relativeXPath":"","allXPaths":"","exampleValues":[{"num":0,"value":"/手机/数码"}],"unique_index":"wxo7mqyl8jlk5oqh80","iframe":false,"default":"","paraType":"text","recordASField":1,"beforeJS":"","beforeJSWaitTime":0,"JS":"","JSWaitTime":0,"afterJS":"","afterJSWaitTime":0,"downloadPic":0}],"loopType":1}}]}