qgb-process 0.2.3 → 0.2.7

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

@@ -1,269 +1,269 @@
-<template>
-  <div
-    ref="node"
-    v-if="update"
-    :style="nodeContainerStyle"
-    class="plannode"
-    :id="'flowchartWindow' + node.id"
-    @mouseenter="mouseEnter = true"
-    @mouseleave="mouseEnter = false"
-    @mouseup="changeNodePosition"
-  >
-    <!-- {{node}} -->
-    <template>
-      <div class="flow-node-header" :class="mouseEnter ? 'point' : ''">
-        <p class="flow-name" v-if="node.type !== 'start' && node.type !== 'end'">
-          <!-- 调试节点顺序：[id: {{node.id}} from : {{node.from}} to: {{node.to}}] - {{ node.name }} -->
-          <span v-if="!isEdit" @click.stop="editNodeName" class="hand-icon">{{ node.name }}</span>
-          <el-input ref="editInput" v-else  v-model.trim="editName" @blur="handleBlur"></el-input>
-        </p>
-        <p class="flow-name" v-else>
-          <!-- 调试节点顺序：[id: {{node.id}} from : {{node.from}} to: {{node.to}}] - {{ node.name }} -->
-          <span>{{ node.name }}</span>
-        </p>
-        <!--鼠标移入到节点中时右上角的【编辑】、【删除】 按钮-->
-        <div v-if="node.type !== 'start' && node.type !== 'end'"  class="flow-node-operate">
-          <a href="#" @click.stop.prevent="deleteNode(node)" @mousemove.stop.prevent="() => {}">
-            <i class="el-icon-close"></i>
-          </a>
-          &nbsp;
-        </div>
-      </div>
-      <!--节点的正文部分-->
-      <div
-        v-if="node.type == 'condition'"
-        class="flow-node-body"
-        :title="node.desc ? node.desc : ''"
-        @click="showForm(node)"
-      >
-        {{ node.desc ? node.desc : "请设置条件" }}
-      </div>
-
-      <!-- 抄送人节点 -->
-      <div v-else-if="node.type == 'ccTask'"  class="flow-node-body" @click="showForm(node)">
-        <span v-if="node.notifiers && node.notifiers.length">
-            <i v-for="(item, index) in node.notifiers" v-bind:key="index" style="padding:0 5px">{{item.userName}}</i>
-            （抄送{{node.notifiers.length}}人）
-        </span>
-        <span v-else>请选择抄送人</span>
-         <!-- {{node}} -->
-      </div>
-
-      <div
-        v-else-if="node.type == 'userTask'"
-        class="flow-node-body"
-        @click="showForm(node)"
-      >
-        <div></div>
-        <span v-if="node.directorType && node.directorType.type == 2">
-          {{
-            node.approvers && node.directorType.type
-              ? node.approvers&& node.approvers[0].directorName
-              : ""
-          }}
-          {{
-            node.approverType == "2"
-              ? "或签"
-              : node.approverType == "3"
-              ? "依次审批"
-              : "会签"
-          }}
-        </span>
-        <span v-else>
-          <span v-if="node.approvers && node.approvers.length > 0"> 
-            <i v-for="(item, index) in node.approvers" v-bind:key="index" style="padding:0 5px">{{item.userName}}</i>
-          </span>
-          （{{
-            node.approvers && node.approvers.length > 0
-              ? node.approvers.length == 1
-                ? node.approvers[0].userName
-                : node.approvers.length + "人"
-              : "请选择审批人"
-          }}）
-          <span v-if="node.approvers && node.approvers.length > 1">{{
-            node.approverType == "2"
-              ? "或签"
-              : node.approverType == "3"
-              ? "依次审批"
-              : "会签"
-          }}</span>
-        </span>
-      </div>
-      <div v-else class="flow-node-body"></div>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  props: {
-    node: Object,
-    level: Number
-  },
-  data() {
-    return {
-      // 控制节点操作显示
-      mouseEnter: false,
-      isEdit: false,
-      editName: "",
-      update: true
-    };
-  },
-  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" : "",
-        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: {
-    refreshFlowItem() {
-      this.update = false
-      this.$nextTick(() => {
-        this.update = true
-      })
-    },
-    // 删除节点
-    deleteNode(current) {
-      // if (
-      //   this.node.left !== this.$refs.node.style.left || this.node.top !== this.$refs.node.style.top) {
-      //   return;
-      // }
-      // this.$emit("deleteNode", this.node, current);
-    },
-    // 编辑节点
-    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", { node: this.node, 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: 6px;
-}
-.flow-node-header {
-  background-color: #66a6e0;
-  height: 30px;
-  cursor: pointer;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
-}
-
-.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: 30px;
-}
-.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: 6px;
-  border-bottom-left-radius: 6px;
-  border-bottom-right-radius: 6px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  height: auto;
-}
-
-/* 修改、删除按钮样式*/
-.flow-node-operate {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  line-height: 25px;
-}
-.point {
-  cursor: move;
-}
-.hand-icon {
-  cursor: pointer;
-}
-</style>
+<template>
+  <div
+    ref="node"
+    v-if="update"
+    :style="nodeContainerStyle"
+    class="plannode"
+    :id="'flowchartWindow' + node.id"
+    @mouseenter="mouseEnter = true"
+    @mouseleave="mouseEnter = false"
+    @mouseup="changeNodePosition"
+  >
+    <!-- {{node}} -->
+    <template>
+      <div class="flow-node-header" :class="mouseEnter ? 'point' : ''">
+        <p class="flow-name" v-if="node.type !== 'start' && node.type !== 'end'">
+          <!-- 调试节点顺序：[id: {{node.id}} from : {{node.from}} to: {{node.to}}] - {{ node.name }} -->
+          <span v-if="!isEdit" @click.stop="editNodeName" class="hand-icon">{{ node.name }}</span>
+          <el-input ref="editInput" v-else  v-model.trim="editName" @blur="handleBlur"></el-input>
+        </p>
+        <p class="flow-name" v-else>
+          <!-- 调试节点顺序：[id: {{node.id}} from : {{node.from}} to: {{node.to}}] - {{ node.name }} -->
+          <span>{{ node.name }}</span>
+        </p>
+        <!--鼠标移入到节点中时右上角的【编辑】、【删除】 按钮-->
+        <div v-if="node.type !== 'start' && node.type !== 'end'"  class="flow-node-operate">
+          <a href="#" @click.stop.prevent="deleteNode(node)" @mousemove.stop.prevent="() => {}">
+            <i class="el-icon-close"></i>
+          </a>
+          &nbsp;
+        </div>
+      </div>
+      <!--节点的正文部分-->
+      <div
+        v-if="node.type == 'condition'"
+        class="flow-node-body"
+        :title="node.desc ? node.desc : ''"
+        @click="showForm(node)"
+      >
+        {{ node.desc ? node.desc : "请设置条件" }}
+      </div>
+
+      <!-- 抄送人节点 -->
+      <div v-else-if="node.type == 'ccTask'"  class="flow-node-body" @click="showForm(node)">
+        <span v-if="node.notifiers && node.notifiers.length">
+            <i v-for="(item, index) in node.notifiers" v-bind:key="index" style="padding:0 5px">{{item.userName}}</i>
+            （抄送{{node.notifiers.length}}人）
+        </span>
+        <span v-else>请选择抄送人</span>
+         <!-- {{node}} -->
+      </div>
+
+      <div
+        v-else-if="node.type == 'userTask'"
+        class="flow-node-body"
+        @click="showForm(node)"
+      >
+        <div></div>
+        <span v-if="node.directorType && node.directorType.type == 2">
+          {{
+            node.approvers && node.directorType.type
+              ? node.approvers&& node.approvers[0].directorName
+              : ""
+          }}
+          {{
+            node.approverType == "2"
+              ? "或签"
+              : node.approverType == "3"
+              ? "依次审批"
+              : "会签"
+          }}
+        </span>
+        <span v-else>
+          <span v-if="node.approvers && node.approvers.length > 0"> 
+            <i v-for="(item, index) in node.approvers" v-bind:key="index" style="padding:0 5px">{{item.userName}}</i>
+          </span>
+          （{{
+            node.approvers && node.approvers.length > 0
+              ? node.approvers.length == 1
+                ? node.approvers[0].userName
+                : node.approvers.length + "人"
+              : "请选择审批人"
+          }}）
+          <span v-if="node.approvers && node.approvers.length > 1">{{
+            node.approverType == "2"
+              ? "或签"
+              : node.approverType == "3"
+              ? "依次审批"
+              : "会签"
+          }}</span>
+        </span>
+      </div>
+      <div v-else class="flow-node-body"></div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    node: Object,
+    level: Number
+  },
+  data() {
+    return {
+      // 控制节点操作显示
+      mouseEnter: false,
+      isEdit: false,
+      editName: "",
+      update: true
+    };
+  },
+  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" : "",
+        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: {
+    refreshFlowItem() {
+      this.update = false
+      this.$nextTick(() => {
+        this.update = true
+      })
+    },
+    // 删除节点
+    deleteNode(current) {
+      // if (
+      //   this.node.left !== this.$refs.node.style.left || this.node.top !== this.$refs.node.style.top) {
+      //   return;
+      // }
+      // this.$emit("deleteNode", this.node, current);
+    },
+    // 编辑节点
+    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", { node: this.node, 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: 6px;
+}
+.flow-node-header {
+  background-color: #66a6e0;
+  height: 30px;
+  cursor: pointer;
+  border-top-left-radius: 6px;
+  border-top-right-radius: 6px;
+}
+
+.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: 30px;
+}
+.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: 6px;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  height: auto;
+}
+
+/* 修改、删除按钮样式*/
+.flow-node-operate {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  line-height: 25px;
+}
+.point {
+  cursor: move;
+}
+.hand-icon {
+  cursor: pointer;
+}
+</style>