From bfdfdc0558c2824a71c4736de50ac5eb821f8952 Mon Sep 17 00:00:00 2001
From: liyuchuan <yuchuan_li@hotmail.com>
Date: Thu, 9 Mar 2023 10:08:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0clickDelLine=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7=EF=BC=8C=E9=85=8D=E7=BD=AE=E6=98=AF=E5=90=A6=E5=8D=95?=
 =?UTF-8?q?=E5=87=BB=E5=88=A0=E9=99=A4=E7=BA=BF=EF=BC=8C=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E5=88=A0=E9=99=A4=E3=80=82=20=E6=B7=BB=E5=8A=A0=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=97=B6=E6=B7=BB=E5=8A=A0nodeId=E5=8F=82=E6=95=B0?=
 =?UTF-8?q?=EF=BC=8C=E5=A6=82=E6=9E=9C=E4=BC=A0=E5=85=A5=E4=BA=86=E5=8F=82?=
 =?UTF-8?q?=E6=95=B0=E5=B0=B1=E4=B8=8D=E8=87=AA=E5=8A=A8=E7=94=9F=E6=88=90?=
 =?UTF-8?q?nodeId=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/element-ui/flow/index.vue | 367 +++++++++++++++--------------
 1 file changed, 195 insertions(+), 172 deletions(-)

diff --git a/packages/element-ui/flow/index.vue b/packages/element-ui/flow/index.vue
index 5f1e3bf82..dda72cf27 100644
--- a/packages/element-ui/flow/index.vue
+++ b/packages/element-ui/flow/index.vue
@@ -1,295 +1,318 @@
 <template>
-  <div :class="b()"
-       :style="styleName">
-    <div :id="id"
-         :style="styleName">
+  <div :class="b()" :style="styleName">
+    <div :id="id" :style="styleName">
       <div class="avue-grid"></div>
-      <template v-for="(node,index) in option.nodeList">
-        <flow-node :node="node"
-                   :id="node.id"
-                   v-if="!node.display"
-                   @click="handleClick(node)"
-                   @changeNodeSite="changeNodeSite"
-                   :index="index"
-                   :active="active"
-                   :key="index">
-          <template #header="{node}">
-            <slot name="header"
-                  :node="node">
-            </slot>
+      <template v-for="(node, index) in option.nodeList">
+        <flow-node
+          :node="node"
+          :id="node.id"
+          v-if="!node.display"
+          @click="handleClick(node)"
+          @changeNodeSite="changeNodeSite"
+          :index="index"
+          :active="active"
+          :key="index"
+        >
+          <template #header="{ node }">
+            <slot name="header" :node="node"> </slot>
           </template>
-          <template #="{node}">
+          <template #="{ node }">
             <slot :node="node"></slot>
           </template>
         </flow-node>
       </template>
-
     </div>
   </div>
 </template>
 
 <script>
 import create from "core/create";
-import flowNode from './node'
-import { randomId } from 'utils/util';
+import flowNode from "./node";
+import { randomId } from "utils/util";
 export default create({
   name: "flow",
   components: {
-    flowNode
+    flowNode,
   },
-  data () {
+  data() {
     return {
-      active: '',
+      active: "",
       jsPlumb: {},
-      id: '',
+      id: "",
       // 默认设置参数
       jsplumbSetting: {
         // 动态锚点、位置自适应
-        Anchors: ['Top', 'TopCenter', 'TopRight', 'TopLeft', 'Right', 'RightMiddle', 'Bottom', 'BottomCenter', 'BottomRight', 'BottomLeft', 'Left', 'LeftMiddle'],
-        Container: '',
+        Anchors: [
+          "Top",
+          "TopCenter",
+          "TopRight",
+          "TopLeft",
+          "Right",
+          "RightMiddle",
+          "Bottom",
+          "BottomCenter",
+          "BottomRight",
+          "BottomLeft",
+          "Left",
+          "LeftMiddle",
+        ],
+        Container: "",
         // 连线的样式 StateMachine、Flowchart
-        Connector: 'Flowchart',
+        Connector: "Flowchart",
         // 鼠标不能拖动删除线
         ConnectionsDetachable: false,
         // 删除线的时候节点不删除
         DeleteEndpointsOnDetach: false,
         // 连线的端点
         // Endpoint: ["Dot", {radius: 5}],
-        Endpoint: ['Rectangle', { height: 10, width: 10 }],
+        Endpoint: ["Rectangle", { height: 10, width: 10 }],
         // 线端点的样式
-        EndpointStyle: { fill: 'rgba(255,255,255,0)', outlineWidth: 1 },
+        EndpointStyle: { fill: "rgba(255,255,255,0)", outlineWidth: 1 },
         LogEnabled: true, // 是否打开jsPlumb的内部日志记录
         // 绘制线
-        PaintStyle: { stroke: 'black', strokeWidth: 3 },
+        PaintStyle: { stroke: "black", strokeWidth: 3 },
         // 绘制箭头
-        Overlays: [['Arrow', { width: 12, length: 12, location: 1 }]],
-        RenderMode: 'svg'
+        Overlays: [["Arrow", { width: 12, length: 12, location: 1 }]],
+        RenderMode: "svg",
       },
       // jsplumb连接参数
       jsplumbConnectOptions: {
         isSource: true,
         isTarget: true,
         // 动态锚点、提供了4个方向 Continuous、AutoDefault
-        anchor: 'Continuous'
+        anchor: "Continuous",
       },
 
       jsplumbSourceOptions: {
-        filter: '.avue-flow__node-drag', /* "span"表示标签，".className"表示类，"#id"表示元素id*/
+        filter:
+          ".avue-flow__node-drag" /* "span"表示标签，".className"表示类，"#id"表示元素id*/,
         filterExclude: false,
-        anchor: 'Continuous',
-        allowLoopback: false
+        anchor: "Continuous",
+        allowLoopback: false,
       },
       jsplumbTargetOptions: {
-        filter: '.avue-flow__node-drag', /*"span"表示标签，".className"表示类，"#id"表示元素id */
+        filter:
+          ".avue-flow__node-drag" /*"span"表示标签，".className"表示类，"#id"表示元素id */,
         filterExclude: false,
-        anchor: 'Continuous',
-        allowLoopback: false
+        anchor: "Continuous",
+        allowLoopback: false,
       },
       loadEasyFlowFinish: false,
-    }
+    };
   },
   props: {
     modelValue: {
       type: String,
       default: () => {
-        return {}
-      }
+        return {};
+      },
     },
     option: {
-      type: Object
+      type: Object,
     },
     width: {
       type: [Number, String],
-      default: '100%'
+      default: "100%",
     },
     height: {
       type: [Number, String],
-      default: '100%'
-    }
+      default: "100%",
+    }, // 点击删除线，默认删除
+    clickDelLine: {
+      default: true,
+      type: Boolean,
+    },
   },
-  created () {
+  created() {
     this.id = randomId();
     this.jsplumbSetting.Container = this.id;
   },
-  mounted () {
+  mounted() {
     this.init();
   },
   watch: {
     modelValue: {
-      handler (val) {
+      handler(val) {
         this.active = val;
       },
-      immediate: true
+      immediate: true,
+    },
+    active(val) {
+      this.$emit("update:modelValue", val);
     },
-    active (val) {
-      this.$emit('update:modelValue', val)
-    }
   },
   computed: {
-    styleName () {
+    styleName() {
       return {
-        position: 'relative',
+        position: "relative",
         width: this.setPx(this.width),
-        height: this.setPx(this.height)
-      }
-    }
+        height: this.setPx(this.height),
+      };
+    },
   },
   methods: {
-    init () {
-      this.jsPlumb = jsPlumb.getInstance()
+    init() {
+      this.jsPlumb = jsPlumb.getInstance();
       this.$nextTick(() => {
-        this.jsPlumbInit()
-      })
+        this.jsPlumbInit();
+      });
     },
-    handleClick (node) {
-      this.$emit('click', node)
+    handleClick(node) {
+      this.$emit("click", node);
     },
     // 是否具有该线
-    hasLine (from, to) {
+    hasLine(from, to) {
       for (var i = 0; i < this.data.lineList.length; i++) {
-        var line = this.data.lineList[i]
+        var line = this.data.lineList[i];
         if (line.from === from && line.to === to) {
-          return true
+          return true;
         }
       }
-      return false
+      return false;
     },
     // 是否含有相反的线
-    hashOppositeLine (from, to) {
-      return this.hasLine(to, from)
+    hashOppositeLine(from, to) {
+      return this.hasLine(to, from);
     },
     // 删除线
-    deleteLine (from, to) {
+    deleteLine(from, to) {
       this.option.lineList = this.option.lineList.filter(function (line) {
-        return line.from !== from && line.to !== to
-      })
+        return line.from !== from && line.to !== to;
+      });
     },
     // 改变连线
-    changeLine (oldFrom, oldTo) {
-      this.deleteLine(oldFrom, oldTo)
+    changeLine(oldFrom, oldTo) {
+      this.deleteLine(oldFrom, oldTo);
     },
     // 改变节点的位置
-    changeNodeSite ({ index, left, top }) {
+    changeNodeSite({ index, left, top }) {
       for (var i = 0; i < this.option.nodeList.length; i++) {
-        let node = this.option.nodeList[i]
+        let node = this.option.nodeList[i];
         if (i === index) {
           this.option.nodeList[i].left = left;
-          this.option.nodeList[i].top = top
+          this.option.nodeList[i].top = top;
         }
       }
     },
     //删除节点
-    deleteNode (nodeId) {
-      this.$confirm('确定要删除节点' + nodeId + '?', '提示', {
-        confirmButtonText: '确定',
-        cancelButtonText: '取消',
-        type: 'warning',
-        closeOnClickModal: false
-      }).then(() => {
-        this.option.nodeList.forEach(node => {
-          if (node.id === nodeId) {
-            node.display = true;
-          }
-        })
-        this.$nextTick(function () {
-          this.jsPlumb.removeAllEndpoints(nodeId);
-        })
-      }).catch(() => {
+    deleteNode(nodeId) {
+      this.$confirm("确定要删除节点" + nodeId + "?", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+        closeOnClickModal: false,
       })
-      return true
+        .then(() => {
+          this.option.nodeList.forEach((node) => {
+            if (node.id === nodeId) {
+              node.display = true;
+            }
+          });
+          this.$nextTick(function () {
+            this.jsPlumb.removeAllEndpoints(nodeId);
+          });
+        })
+        .catch(() => {});
+      return true;
     },
     // 添加新的节点
-    addNode (name) {
+    addNode(name, nodeId) {
       const index = this.option.nodeList.length;
-      let nodeId = 'node' + index
+      if (!nodeId) {
+        nodeId = "node" + index;
+      }
       this.option.nodeList.push({
-        id: 'node' + index,
+        id: nodeId,
         name: name,
         left: 0,
         top: 0,
-      })
+      });
       this.$nextTick(function () {
+        this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions);
 
-        this.jsPlumb.makeSource(nodeId, this.jsplumbSourceOptions)
-
-        this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions)
+        this.jsPlumb.makeTarget(nodeId, this.jsplumbTargetOptions);
 
         this.jsPlumb.draggable(nodeId, {
-          containment: 'parent'
-        })
-
-      })
+          containment: "parent",
+        });
+      });
     },
-    loadEasyFlow () {
+    loadEasyFlow() {
       // 初始化节点
       for (var i = 0; i < this.option.nodeList.length; i++) {
-        let node = this.option.nodeList[i]
+        let node = this.option.nodeList[i];
         // 设置源点，可以拖出线连接其他节点
-        this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions)
+        this.jsPlumb.makeSource(node.id, this.jsplumbSourceOptions);
         // // 设置目标点，其他源点拖出的线可以连接该节点
-        this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions)
-        this.jsPlumb.draggable(node.id)
+        this.jsPlumb.makeTarget(node.id, this.jsplumbTargetOptions);
+        this.jsPlumb.draggable(node.id);
       }
 
       // 初始化连线
       for (var i = 0; i < this.option.lineList.length; i++) {
-        let line = this.option.lineList[i]
-        this.jsPlumb.connect({
-          source: line.from,
-          target: line.to
-        }, this.jsplumbConnectOptions)
+        let line = this.option.lineList[i];
+        this.jsPlumb.connect(
+          {
+            source: line.from,
+            target: line.to,
+          },
+          this.jsplumbConnectOptions
+        );
       }
       this.$nextTick(function () {
-        this.loadEasyFlowFinish = true
-      })
+        this.loadEasyFlowFinish = true;
+      });
     },
-    jsPlumbInit () {
-      const _this = this
+    jsPlumbInit() {
+      const _this = this;
       this.jsPlumb.ready(function () {
         // 导入默认配置
-        _this.jsPlumb.importDefaults(_this.jsplumbSetting)
+        _this.jsPlumb.importDefaults(_this.jsplumbSetting);
         // 会使整个jsPlumb立即重绘。
-        _this.jsPlumb.setSuspendDrawing(false, true)
+        _this.jsPlumb.setSuspendDrawing(false, true);
         // 初始化节点
-        _this.loadEasyFlow()
+        _this.loadEasyFlow();
 
         // 单点击了连接线,
-        _this.jsPlumb.bind('click', function (conn, originalEvent) {
-          console.log('click', conn)
-
-          _this.$confirm('确定删除所点击的线吗?', '提示', {
-            confirmButtonText: '确定',
-            cancelButtonText: '取消',
-            type: 'warning'
-          }).then(() => {
-            _this.jsPlumb.deleteConnection(conn)
-          }).catch(() => {
-          })
-        })
+        _this.jsPlumb.bind("click", function (conn, originalEvent) {
+          console.log("click", conn);
+          if (_this.clickDelLine) {
+            _this
+              .$confirm("确定删除所点击的线吗?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+              })
+              .then(() => {
+                _this.jsPlumb.deleteConnection(conn);
+              })
+              .catch(() => {});
+          }
+        });
         // 连线
-        _this.jsPlumb.bind('connection', function (evt) {
-          console.log('connection', evt)
-          let from = evt.source.id
-          let to = evt.target.id
+        _this.jsPlumb.bind("connection", function (evt) {
+          console.log("connection", evt);
+          let from = evt.source.id;
+          let to = evt.target.id;
           if (_this.loadEasyFlowFinish) {
             _this.option.lineList.push({
               from: from,
-              to: to
-            })
+              to: to,
+            });
           }
-        })
+        });
 
         // 删除连线
-        _this.jsPlumb.bind('connectionDetached', function (evt) {
-          console.log('connectionDetached', evt)
-          _this.deleteLine(evt.sourceId, evt.targetId)
-        })
+        _this.jsPlumb.bind("connectionDetached", function (evt) {
+          console.log("connectionDetached", evt);
+          _this.deleteLine(evt.sourceId, evt.targetId);
+        });
 
         // 改变线的连接节点
-        _this.jsPlumb.bind('connectionMoved', function (evt) {
-          console.log('connectionMoved', evt)
-          _this.changeLine(evt.originalSourceId, evt.originalTargetId)
-        })
+        _this.jsPlumb.bind("connectionMoved", function (evt) {
+          console.log("connectionMoved", evt);
+          _this.changeLine(evt.originalSourceId, evt.originalTargetId);
+        });
 
         // 单击endpoint
         // jsPlumb.bind("endpointClick", function (evt) {
@@ -302,36 +325,36 @@ export default create({
         // })
 
         // contextmenu
-        _this.jsPlumb.bind('contextmenu', function (evt) {
-          console.log('contextmenu', evt)
-        })
+        _this.jsPlumb.bind("contextmenu", function (evt) {
+          console.log("contextmenu", evt);
+        });
 
         // beforeDrop
-        _this.jsPlumb.bind('beforeDrop', function (evt) {
-          console.log('beforeDrop', evt)
-          let from = evt.sourceId
-          let to = evt.targetId
+        _this.jsPlumb.bind("beforeDrop", function (evt) {
+          console.log("beforeDrop", evt);
+          let from = evt.sourceId;
+          let to = evt.targetId;
           if (from === to) {
-            _this.$message.error('不能连接自己')
-            return false
+            _this.$message.error("不能连接自己");
+            return false;
           }
           if (_this.hasLine(from, to)) {
-            _this.$message.error('不能重复连线')
-            return false
+            _this.$message.error("不能重复连线");
+            return false;
           }
           if (_this.hashOppositeLine(from, to)) {
-            _this.$message.error('不能回环哦')
-            return false
+            _this.$message.error("不能回环哦");
+            return false;
           }
-          return true
-        })
+          return true;
+        });
 
         // beforeDetach
-        _this.jsPlumb.bind('beforeDetach', function (evt) {
-          console.log('beforeDetach', evt)
-        })
-      })
-    }
-  }
+        _this.jsPlumb.bind("beforeDetach", function (evt) {
+          console.log("beforeDetach", evt);
+        });
+      });
+    },
+  },
 });
 </script>
-- 
Gitee