qgb-process 0.2.3 → 0.2.7

package/src/views/formBuilder/components/conditionNode.vue

@@ -1,191 +1,191 @@
-<template>
-  <div
-    ref="node"
-    :style="nodeContainerStyle"
-    class="plannode"
-    :id="'flowchartWindow'+node.id"
-    @mouseenter="mouseEnter=true"
-    @mouseleave="mouseEnter=false"
-    @mouseup="changeNodePosition"
-  >
-    <template>
-      <div class="flow-node-header" :class="mouseEnter ? 'point': ''" @click="addCondition">
-        <p class="flow-name">
-          <!-- 调试节点顺序：[from : {{node.from}} to: {{node.to}}] - {{node.name}} -->
-          <span>{{node.name}}</span>
-        </p>
-      </div>
-      <!--节点的正文部分-->
-      <div v-if="node.type == 'condition'" class="flow-node-body" :title="node.desc ? node.desc : ''" @click="showForm(node)">{{ node.desc ? node.desc : '请设置条件'}}</div>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    node: Object
-  },
-  data() {
-    return {
-      // 控制节点操作显示
-      mouseEnter: false,
-      isEdit: false,
-      editName: ""
-    };
-  },
-  computed: {
-    // 节点容器样式
-    nodeContainerStyle() {
-      return {
-        // position: "absolute",
-        width: (this.node.type == "addCondition") ? "auto" : "200px",
-        top: this.node.top,
-        left: this.node.left,
-        // boxShadow: this.mouseEnter ? "#66a6e0 0px 0px 12px 0px" : "",
-        border: this.mouseEnter ? "1px solid rgb(50, 150, 250)" : "0px",
-        backgroundColor: "transparent",
-        marginBottom: "150px",
-        marginRight: "100px",
-        marginTop: "200px"
-      };
-    },
-    nodeIcoClass() {
-      var nodeIcoClass = {};
-      nodeIcoClass[this.node.ico] = true;
-      // 添加该class可以推拽连线出来
-      nodeIcoClass["flow-node-drag"] = true;
-      return nodeIcoClass;
-    }
-  },
-  methods: {
-    // 删除节点
-    deleteNode() {
-      if (
-        this.node.left !== this.$refs.node.style.left || this.node.top !== this.$refs.node.style.top) {
-        return;
-      }
-      this.$emit("deleteNode", this.node.id, this.node.type);
-    },
-    // 编辑节点
-    editNode() {
-      this.$emit("editNode", this.node.id);
-    },
-    // 鼠标移动后抬起
-    changeNodePosition() {
-      // 避免抖动
-      if (
-        this.node.left == this.$refs.node.style.left &&
-        this.node.top == this.$refs.node.style.top
-
-      ) {
-        return;
-      }
-      setTimeout(() => {
-        this.$emit("changeNodeSite", {
-          id: this.node.id,
-          left: this.$refs.node.style.left,
-          top: this.$refs.node.style.top
-        });
-      }, 100)
-      return false
-    },
-    // 修改节点名称
-    editNodeName() {
-      if (
-        this.node.left !== this.$refs.node.style.left || this.node.top !== this.$refs.node.style.top) {
-        return;
-      }
-      this.editName = this.node.name
-      this.isEdit = true
-      this.$nextTick(() => {
-        this.$refs.editInput.$refs.input.focus()
-      })
-    },
-    handleBlur() {
-      if (this.editName !== this.node.name && this.editName != "") {
-        this.$emit("changeName", { id: this.node.id, name: this.editName })
-      }
-      this.isEdit = false;
-    },
-    showForm(node) {
-      if (
-        this.node.left !== this.$refs.node.style.left || this.node.top !== this.$refs.node.style.top) {
-        return;
-      }
-      this.$emit("showForm", node)
-    },
-    addCondition() {
-      this.$emit("addCondition")
-    }
-  }
-};
-</script>
-
-<style>
-.plannode{
-  /* border: 1px solid #e4e7ed; */
-  border-radius: 4px;
-  box-shadow: 0 2px 8px #cccccc87;
-}
-.flow-node-header {
-  background-color: rgb(50, 150, 250);
-  height: 30px;
-  cursor: pointer;
-}
-
-.flow-node-header a {
-  text-decoration: none;
-  line-height: 25px;
-  vertical-align: middle;
-}
-
-.flow-node-header a img {
-  line-height: 25px;
-  vertical-align: middle;
-  margin-bottom: 5px;
-}
-
-.flow-node-header .flow-name{
-  text-align: center;
-  color: #fff;
-  margin: 0;
-  line-height: 25px;
-  font-size: 14px;
-  text-align: left;
-  padding-left: 15px;
-}
-.flow-node-header .flow-name .el-input__inner{
-  height: 22px;
-  width: 70%;
-}
-.flow-node-body {
-  /*background-color: beige;*/
-  background-color: white;
-  text-align: left;
-  cursor: pointer;
-  height: 24px;
-  line-height: 24px;
-  font-size: 14px;
-  padding: 8px;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 修改、删除按钮样式*/
-.flow-node-operate {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  line-height: 25px;
-}
-.point{
-    cursor: move;
-}
-.icon-hand{
-  cursor: pointer;
-}
-</style>
+<template>
+  <div
+    ref="node"
+    :style="nodeContainerStyle"
+    class="plannode"
+    :id="'flowchartWindow'+node.id"
+    @mouseenter="mouseEnter=true"
+    @mouseleave="mouseEnter=false"
+    @mouseup="changeNodePosition"
+  >
+    <template>
+      <div class="flow-node-header" :class="mouseEnter ? 'point': ''" @click="addCondition">
+        <p class="flow-name">
+          <!-- 调试节点顺序：[from : {{node.from}} to: {{node.to}}] - {{node.name}} -->
+          <span>{{node.name}}</span>
+        </p>
+      </div>
+      <!--节点的正文部分-->
+      <div v-if="node.type == 'condition'" class="flow-node-body" :title="node.desc ? node.desc : ''" @click="showForm(node)">{{ node.desc ? node.desc : '请设置条件'}}</div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    node: Object
+  },
+  data() {
+    return {
+      // 控制节点操作显示
+      mouseEnter: false,
+      isEdit: false,
+      editName: ""
+    };
+  },
+  computed: {
+    // 节点容器样式
+    nodeContainerStyle() {
+      return {
+        // position: "absolute",
+        width: (this.node.type == "addCondition") ? "auto" : "200px",
+        top: this.node.top,
+        left: this.node.left,
+        // boxShadow: this.mouseEnter ? "#66a6e0 0px 0px 12px 0px" : "",
+        border: this.mouseEnter ? "1px solid rgb(50, 150, 250)" : "0px",
+        backgroundColor: "transparent",
+        marginBottom: "150px",
+        marginRight: "100px",
+        marginTop: "200px"
+      };
+    },
+    nodeIcoClass() {
+      var nodeIcoClass = {};
+      nodeIcoClass[this.node.ico] = true;
+      // 添加该class可以推拽连线出来
+      nodeIcoClass["flow-node-drag"] = true;
+      return nodeIcoClass;
+    }
+  },
+  methods: {
+    // 删除节点
+    deleteNode() {
+      if (
+        this.node.left !== this.$refs.node.style.left || this.node.top !== this.$refs.node.style.top) {
+        return;
+      }
+      this.$emit("deleteNode", this.node.id, this.node.type);
+    },
+    // 编辑节点
+    editNode() {
+      this.$emit("editNode", this.node.id);
+    },
+    // 鼠标移动后抬起
+    changeNodePosition() {
+      // 避免抖动
+      if (
+        this.node.left == this.$refs.node.style.left &&
+        this.node.top == this.$refs.node.style.top
+
+      ) {
+        return;
+      }
+      setTimeout(() => {
+        this.$emit("changeNodeSite", {
+          id: this.node.id,
+          left: this.$refs.node.style.left,
+          top: this.$refs.node.style.top
+        });
+      }, 100)
+      return false
+    },
+    // 修改节点名称
+    editNodeName() {
+      if (
+        this.node.left !== this.$refs.node.style.left || this.node.top !== this.$refs.node.style.top) {
+        return;
+      }
+      this.editName = this.node.name
+      this.isEdit = true
+      this.$nextTick(() => {
+        this.$refs.editInput.$refs.input.focus()
+      })
+    },
+    handleBlur() {
+      if (this.editName !== this.node.name && this.editName != "") {
+        this.$emit("changeName", { id: this.node.id, name: this.editName })
+      }
+      this.isEdit = false;
+    },
+    showForm(node) {
+      if (
+        this.node.left !== this.$refs.node.style.left || this.node.top !== this.$refs.node.style.top) {
+        return;
+      }
+      this.$emit("showForm", node)
+    },
+    addCondition() {
+      this.$emit("addCondition")
+    }
+  }
+};
+</script>
+
+<style>
+.plannode{
+  /* border: 1px solid #e4e7ed; */
+  border-radius: 4px;
+  box-shadow: 0 2px 8px #cccccc87;
+}
+.flow-node-header {
+  background-color: rgb(50, 150, 250);
+  height: 30px;
+  cursor: pointer;
+}
+
+.flow-node-header a {
+  text-decoration: none;
+  line-height: 25px;
+  vertical-align: middle;
+}
+
+.flow-node-header a img {
+  line-height: 25px;
+  vertical-align: middle;
+  margin-bottom: 5px;
+}
+
+.flow-node-header .flow-name{
+  text-align: center;
+  color: #fff;
+  margin: 0;
+  line-height: 25px;
+  font-size: 14px;
+  text-align: left;
+  padding-left: 15px;
+}
+.flow-node-header .flow-name .el-input__inner{
+  height: 22px;
+  width: 70%;
+}
+.flow-node-body {
+  /*background-color: beige;*/
+  background-color: white;
+  text-align: left;
+  cursor: pointer;
+  height: 24px;
+  line-height: 24px;
+  font-size: 14px;
+  padding: 8px;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* 修改、删除按钮样式*/
+.flow-node-operate {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  line-height: 25px;
+}
+.point{
+    cursor: move;
+}
+.icon-hand{
+  cursor: pointer;
+}
+</style>

package/src/views/formBuilder/components/dataDefault.js

@@ -1,147 +1,147 @@
-// eslint-disable-next-line vue/max-attributes-per-line
-export const dataDefault = {
-  nodeList: [
-    {
-      id: "1",
-      name: "开始",
-      type: "start",
-      left: "320px",
-      top: "20px",
-      from: "1",
-      to: "2"
-    },
-    {
-      id: "2",
-      name: "流程节点",
-      type: "userTask",
-      left: "320px",
-      top: "200px",
-      from: "1",
-      to: "5",
-      approverType: "",
-      approvers: [],
-      notifiers: []
-    },
-    {
-      id: "5",
-      name: "结束",
-      type: "end",
-      left: "320px",
-      top: "380px",
-      from: "2",
-      to: "end"
-    }
-  ],
-  lineList: [
-    {
-      sourceId: "flowchartWindow2",
-      targetId: "flowchartWindow5",
-      nodeFrom: "2",
-      nodeTo: "5",
-      uuid0: "Window2BottomCenter",
-      uuid1: "Window5TopCenter"
-    },
-    {
-      sourceId: "flowchartWindow1",
-      targetId: "flowchartWindow2",
-      nodeFrom: "1",
-      nodeTo: "2",
-      condName: "",
-      uuid0: "Window1BottomCenter",
-      uuid1: "Window2TopCenter"
-    }
-  ]
-};
-export const DefaultConfig = {
-  // default drag options
-  DragOptions: { cursor: "pointer", zIndex: 2000 },
-  // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
-  // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
-  ConnectionOverlays: [
-    [
-      "Arrow",
-      {
-        // 箭头样式
-        location: 1,
-        visible: true,
-        width: 10,
-        length: 10,
-        id: "ARROW"
-      }
-    ]
-  ],
-  Container: "container",
-  connector: "StateMachine",
-  paintStyle: { stroke: "#E4E7ED", strokeWidth: 2 },
-  hoverPaintStyle: { stroke: "blue" },
-  overlays: ["Arrow"]
-};
-// 连线样式
-var connectorPaintStyle = {
-  strokeWidth: 2,
-  stroke: "#E4E7ED",
-  joinstyle: "round"
-};
-
-// 连线hover
-
-var connectorHoverStyle = {
-  strokeWidth: 3,
-  stroke: "#216477"
-};
-
-var endpointHoverStyle = {
-  fill: "#216477",
-  stroke: "#216477"
-};
-// 起点
-export const sourceEndpoint = {
-  endpoint: "Blank",
-  paintStyle: {
-    stroke: "#7AB02C",
-    fill: "transparent",
-    radius: 7,
-    strokeWidth: 1
-  },
-  isSource: true,
-  connector: [
-    "Flowchart",
-    { stub: [40, 60], gap: 5, cornerRadius: 5, alwaysRespectStubs: true }
-  ],
-  connectorStyle: connectorPaintStyle,
-  hoverPaintStyle: endpointHoverStyle,
-  connectorHoverStyle: connectorHoverStyle,
-  dragOptions: {},
-  maxConnections: -1,
-  overlays: [
-    [
-      "Label",
-      {
-        location: [0.5, 1.5],
-        label: "Drag",
-        cssClass: "endpointSourceLabel",
-        visible: false
-      }
-    ]
-  ]
-};
-//
-export const targetEndpoint = {
-  endpoint: "Blank",
-  paintStyle: { fill: "#7AB02C", radius: 7 },
-  hoverPaintStyle: endpointHoverStyle,
-  maxConnections: -1,
-  dropOptions: { hoverClass: "hover", activeClass: "active" },
-  isTarget: true,
-  overlays: [
-    [
-      "Label",
-      {
-        location: [0.5, -0.5],
-        label: "Drop",
-        cssClass: "endpointTargetLabel",
-        visible: false
-      }
-    ]
-  ]
-};
+// eslint-disable-next-line vue/max-attributes-per-line
+export const dataDefault = {
+  nodeList: [
+    {
+      id: "1",
+      name: "开始",
+      type: "start",
+      left: "320px",
+      top: "20px",
+      from: "1",
+      to: "2"
+    },
+    {
+      id: "2",
+      name: "流程节点",
+      type: "userTask",
+      left: "320px",
+      top: "200px",
+      from: "1",
+      to: "5",
+      approverType: "",
+      approvers: [],
+      notifiers: []
+    },
+    {
+      id: "5",
+      name: "结束",
+      type: "end",
+      left: "320px",
+      top: "380px",
+      from: "2",
+      to: "end"
+    }
+  ],
+  lineList: [
+    {
+      sourceId: "flowchartWindow2",
+      targetId: "flowchartWindow5",
+      nodeFrom: "2",
+      nodeTo: "5",
+      uuid0: "Window2BottomCenter",
+      uuid1: "Window5TopCenter"
+    },
+    {
+      sourceId: "flowchartWindow1",
+      targetId: "flowchartWindow2",
+      nodeFrom: "1",
+      nodeTo: "2",
+      condName: "",
+      uuid0: "Window1BottomCenter",
+      uuid1: "Window2TopCenter"
+    }
+  ]
+};
+export const DefaultConfig = {
+  // default drag options
+  DragOptions: { cursor: "pointer", zIndex: 2000 },
+  // the overlays to decorate each connection with.  note that the label overlay uses a function to generate the label text; in this
+  // case it returns the 'labelText' member that we set on each connection in the 'init' method below.
+  ConnectionOverlays: [
+    [
+      "Arrow",
+      {
+        // 箭头样式
+        location: 1,
+        visible: true,
+        width: 10,
+        length: 10,
+        id: "ARROW"
+      }
+    ]
+  ],
+  Container: "container",
+  connector: "StateMachine",
+  paintStyle: { stroke: "#E4E7ED", strokeWidth: 2 },
+  hoverPaintStyle: { stroke: "blue" },
+  overlays: ["Arrow"]
+};
+// 连线样式
+var connectorPaintStyle = {
+  strokeWidth: 2,
+  stroke: "#E4E7ED",
+  joinstyle: "round"
+};
+
+// 连线hover
+
+var connectorHoverStyle = {
+  strokeWidth: 3,
+  stroke: "#216477"
+};
+
+var endpointHoverStyle = {
+  fill: "#216477",
+  stroke: "#216477"
+};
+// 起点
+export const sourceEndpoint = {
+  endpoint: "Blank",
+  paintStyle: {
+    stroke: "#7AB02C",
+    fill: "transparent",
+    radius: 7,
+    strokeWidth: 1
+  },
+  isSource: true,
+  connector: [
+    "Flowchart",
+    { stub: [40, 60], gap: 5, cornerRadius: 5, alwaysRespectStubs: true }
+  ],
+  connectorStyle: connectorPaintStyle,
+  hoverPaintStyle: endpointHoverStyle,
+  connectorHoverStyle: connectorHoverStyle,
+  dragOptions: {},
+  maxConnections: -1,
+  overlays: [
+    [
+      "Label",
+      {
+        location: [0.5, 1.5],
+        label: "Drag",
+        cssClass: "endpointSourceLabel",
+        visible: false
+      }
+    ]
+  ]
+};
+//
+export const targetEndpoint = {
+  endpoint: "Blank",
+  paintStyle: { fill: "#7AB02C", radius: 7 },
+  hoverPaintStyle: endpointHoverStyle,
+  maxConnections: -1,
+  dropOptions: { hoverClass: "hover", activeClass: "active" },
+  isTarget: true,
+  overlays: [
+    [
+      "Label",
+      {
+        location: [0.5, -0.5],
+        label: "Drop",
+        cssClass: "endpointTargetLabel",
+        visible: false
+      }
+    ]
+  ]
+};