qgb-process 0.2.3 → 0.2.7

package/src/formBuilder/components/app-main/components/main-right/components/components/curTextArea.vue

@@ -1,338 +1,338 @@
-<template>
-  <div
-    ref="calText"
-    class="cal-text"
-    contenteditable="true"
-    readonly
-    v-html="inner"
-    @input="handleInput"
-    @focus="isChange = false"
-    @blur="blurFunc"
-    @keydown="handleInput"
-    @keyup="handleInput"
-    @click.stop="setSelection"
-  ></div>
-</template>
-
-<script>
-import html2Canvas from "html2canvas";
-export default {
-  name: "",
-  mixins: [],
-  extends: {},
-  components: {},
-  props: {
-    value: {
-      type: String,
-      default: ""
-    }
-  },
-  data() {
-    return {
-      isChange: true,
-      lastEditRange: null,
-      inner: "",
-      //   calMark: ["+", "-", "*", "/", ">", "<", "==", "!=", "<=", ">="]
-      calMark: ["+", "-", "*", "/"]
-    };
-  },
-  watch: {
-    value: {
-      immediate: true,
-      deep: true,
-      handler: function() {
-        if (this.isChange) {
-          this.inner = this.value;
-        }
-      }
-    },
-    lastEditRange: {
-      deep: true,
-      handler: function(newVal, oldVal) {
-        console.log(newVal);
-        if (newVal) {
-        }
-      }
-    }
-  },
-  computed: {},
-  methods: {
-    // 设置光标位置
-    setSelection(s) {
-      // 获取选定对象
-      var selection = getSelection();
-      // 设置最后光标对象
-      this.lastEditRange = selection.getRangeAt(0);
-      console.log(this.lastEditRange);
-    },
-    async addNotes(item, type, pLabel) {
-      const self = this;
-      //   self.setSelection()
-      // 编辑框设置焦点
-      const edit = this.$refs.calText;
-      edit.focus();
-
-      // 获取选定对象
-      var selection = getSelection();
-      // 判断是否有最后光标对象存在
-      if (self.lastEditRange) {
-        // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
-        selection.removeAllRanges();
-        selection.addRange(self.lastEditRange);
-      }
-      let emojiText;
-
-      if (item && (!type || type == "custom")) {
-        const src = await this.getLabelData(item, pLabel);
-        emojiText = document.createElement("img");
-        // emojiText.contentEditable = true
-        emojiText.align = "middle";
-        emojiText.style.verticalAlign = "middle";
-        emojiText.style.margin = "3px";
-        // emojiText.style.display = "inline-block";
-        // emojiText.style.maxWidth = "150px";
-        // emojiText.style.minHeight = "30px";
-        emojiText.src = src;
-        emojiText.dataset.field = item.content
-          ? item.content.field
-          : item.field;
-        emojiText.dataset.label = item.content
-          ? item.content.label
-          : item.label;
-      } else if (type == "cal") {
-        const str = item.label;
-        emojiText = document.createTextNode(str);
-        emojiText.innerHTML = str;
-      } else {
-        emojiText = document.createElement("select");
-        const str = this.calMark.reduce((total, item, index) => {
-          return total + `<option value ="${item}">${item}</option>`;
-        }, "");
-        emojiText.innerHTML = str;
-      }
-
-      var range = selection.getRangeAt(0);
-
-      // 判断选定对象范围是编辑框还是文本节点
-      if (selection.anchorNode.nodeName != "#text") {
-        // 如果是编辑框范围。则创建表情文本节点进行插入 当光标位置>0时
-        if (edit.childNodes.length > 0 && selection.anchorOffset > 0) {
-          // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
-          for (var i = 0; i < edit.childNodes.length; i++) {
-            if (i == selection.anchorOffset - 1) {
-              if (edit.childNodes[i].nextSibling) {
-                edit.insertBefore(emojiText, edit.childNodes[i].nextSibling);
-              } else {
-                edit.appendChild(emojiText);
-              }
-            }
-          }
-        } else if (edit.childNodes.length > 0 && selection.anchorOffset == 0) {
-          // 当光标位置==0时
-          for (var i = 0; i < edit.childNodes.length; i++) {
-            if (i == selection.anchorOffset) {
-              //   if (edit.childNodes[i].nextSibling) {
-              //     edit.insertBefore(
-              //       emojiText,
-              //       edit.childNodes[i + 1].nextSibling
-              //     );
-              //   } else {
-              edit.insertBefore(emojiText, edit.childNodes[0]);
-              //   }
-            }
-          }
-        } else {
-          edit.appendChild(emojiText);
-        }
-        //  else if (edit.childNodes.length > 0 && selection.anchorOffset == 0) {
-        //   edit.insertBefore(emojiText, edit.childNodes[0]);
-        // }
-
-        range.setStart(selection.anchorNode, selection.anchorOffset + 1);
-        self.setSelection();
-      } else {
-        // 如果是文本节点则先获取光标对象
-        var range = selection.getRangeAt(0);
-        // 获取光标对象的范围界定对象，一般就是textNode对象
-        var textNode = range.startContainer;
-        // 获取光标位置
-        var rangeStartOffset = range.startOffset;
-        // 文本节点在光标位置处插入新的表情内容
-        let start;
-        edit.childNodes.forEach((item, index) => {
-          if (item == textNode) {
-            start = index;
-          }
-        });
-
-        if (rangeStartOffset == 0) {
-          textNode.before(emojiText);
-          start += 1;
-        } else {
-          textNode.after(emojiText);
-          start += 2;
-        }
-        // 创建新的光标对象
-        var range = document.createRange();
-        // 光标对象的范围界定为新建的表情节点
-        range.selectNodeContents(edit);
-        range.setStart(edit, start);
-        range.collapse(true);
-        selection.removeAllRanges();
-        selection.addRange(range);
-      }
-      //   this.lastEditRange = selection.getRangeAt(0);
-      edit.focus();
-    },
-    // label转图片
-    // TODO: 处理组件标签Canvas
-    getLabelData(item, pLabel) {
-      return new Promise((resolve, reject) => {
-        const dom = document.createElement("span");
-        if (pLabel) {
-          dom.innerHTML = `${pLabel}.${item.label}`;
-        } else {
-          dom.innerHTML = item.label;
-        }
-
-        dom.style.padding = "5px 5px";
-        dom.style.color = "#52C41A";
-        dom.style.fontSize = "12px";
-        dom.style.borderWidth = "1px";
-        dom.style.borderStyle = "solid";
-        dom.style.borderColor = "rgba(183, 235, 143, 1)";
-        dom.style.borderRadius = "4px";
-        dom.style.backgroundColor = "rgba(246, 255, 237, 1)";
-        if (
-          (item.attrs && item.attrs.type == "number") ||
-          (item.content && item.content.attrs.type == "number")
-        ) {
-          dom.style.color = "#FA541C";
-          dom.style.borderColor = "rgba(255, 187, 150, 1)";
-          dom.style.backgroundColor = "rgba(255, 242, 232, 1)";
-        }
-        if (
-          (item.attrs && item.type == "checkbox") ||
-          (item.content && item.content.attrs.type == "checkbox")
-        ) {
-          dom.style.color = "#b653d1";
-          dom.style.borderColor = "#d3adf7";
-          dom.style.backgroundColor = "#f9f0ff";
-        }
-        if (
-          (item.attrs && item.type == "datetime") ||
-          (item.content && item.content.attrs.type == "datetime")
-        ) {
-          dom.style.color = "#13c2c2";
-          dom.style.borderColor = "#87e8de";
-          dom.style.backgroundColor = "#e6fffb";
-        }
-        if (
-          (item.attrs && item.type == "datetimerange") ||
-          (item.content && item.content.attrs.type == "datetimerange")
-        ) {
-          dom.style.color = "#1890ff";
-          dom.style.borderColor = "#91d5ff";
-          dom.style.backgroundColor = "#e6f7ff";
-        }
-        if (
-          (item.attrs && item.type == "switch") ||
-          (item.content && item.content.attrs.type == "switch")
-        ) {
-          dom.style.color = "rgba(0, 0, 0, 0.647058823529412)";
-          dom.style.borderColor = "rgba(217, 217, 217, 1)";
-          dom.style.backgroundColor = "rgba(245, 245, 245, 1)";
-        }
-        dom.align = "middle";
-        dom.style.verticalAlign = "middle";
-        document.body.appendChild(dom);
-        html2Canvas(dom).then(canvas => {
-          const imageData = canvas.toDataURL("image/png");
-          document.body.removeChild(dom);
-          console.log(imageData);
-          resolve(imageData);
-        });
-      });
-    },
-    handleInput($event, v) {
-      //   console.log($event);
-      const code = [
-        37,
-        38,
-        39,
-        40,
-        8, // 退格
-        46
-      ];
-
-      if ($event.keyCode == 13) {
-        $event.preventDefault();
-      }
-      this.setSelection();
-
-      //   this.$emit("input", this.$el.innerHTML);
-    },
-    blurFunc() {
-      this.isChange = true;
-      this.inner = this.value;
-      this.$emit("blurFunc");
-    },
-    setCustomValue() {
-      const edit = this.$refs.calText;
-      const childNodes = edit.childNodes;
-      let str = "";
-      const nodeName = "";
-      for (let i = 0; i < childNodes.length; i++) {
-        if (i - 1 < 0) continue;
-        if (
-          childNodes[i - 1].nodeName == childNodes[i].nodeName &&
-          childNodes[i].nodeName == "IMG"
-        ) {
-          this.$message.error("表达式间缺少运算符");
-          return false;
-        } else if (childNodes[i].nodeName == "#text") {
-          const strReg = /[\+\-\*\>\<\=\!/]*/g;
-          const arrPromise = childNodes[i].nodeValue.match(strReg);
-
-          if (
-            arrPromise[0].length >= 2 &&
-            arrPromise[1] == "" &&
-            arrPromise[0] != ">=" &&
-            arrPromise[0] != "<=" &&
-            arrPromise[0] != "==" &&
-            arrPromise[0] != "===" &&
-            arrPromise[0] != "!=" &&
-            arrPromise[0] != "!=="
-          ) {
-            this.$message.error("多个运算符堆积无意义");
-
-            return false;
-          }
-        }
-      }
-      childNodes.forEach(item => {
-        if (item.nodeName == "IMG") {
-          str += `{${item.dataset.field}}`;
-        } else if (item.nodeName == "SELECT") {
-          str += `{${item.value}}`;
-        } else if (item.nodeName == "#text") {
-          str += `${item.nodeValue}`;
-        } else if (item.nodeName == "TEXT") {
-          str += `${item.innerText}`;
-        } else if (item.nodeName == "SPAN") {
-          str += `${item.innerText}`;
-        }
-      });
-      return str;
-    }
-  },
-  created() {},
-  mounted() {}
-};
-</script>
-<style>
-.read-only {
-  -webkit-user-modify: read-only;
-  -moz-user-modify: read-only;
-}
-</style>
+<template>
+  <div
+    ref="calText"
+    class="cal-text"
+    contenteditable="true"
+    readonly
+    v-html="inner"
+    @input="handleInput"
+    @focus="isChange = false"
+    @blur="blurFunc"
+    @keydown="handleInput"
+    @keyup="handleInput"
+    @click.stop="setSelection"
+  ></div>
+</template>
+
+<script>
+import html2Canvas from "html2canvas";
+export default {
+  name: "",
+  mixins: [],
+  extends: {},
+  components: {},
+  props: {
+    value: {
+      type: String,
+      default: ""
+    }
+  },
+  data() {
+    return {
+      isChange: true,
+      lastEditRange: null,
+      inner: "",
+      //   calMark: ["+", "-", "*", "/", ">", "<", "==", "!=", "<=", ">="]
+      calMark: ["+", "-", "*", "/"]
+    };
+  },
+  watch: {
+    value: {
+      immediate: true,
+      deep: true,
+      handler: function() {
+        if (this.isChange) {
+          this.inner = this.value;
+        }
+      }
+    },
+    lastEditRange: {
+      deep: true,
+      handler: function(newVal, oldVal) {
+        console.log(newVal);
+        if (newVal) {
+        }
+      }
+    }
+  },
+  computed: {},
+  methods: {
+    // 设置光标位置
+    setSelection(s) {
+      // 获取选定对象
+      var selection = getSelection();
+      // 设置最后光标对象
+      this.lastEditRange = selection.getRangeAt(0);
+      console.log(this.lastEditRange);
+    },
+    async addNotes(item, type, pLabel) {
+      const self = this;
+      //   self.setSelection()
+      // 编辑框设置焦点
+      const edit = this.$refs.calText;
+      edit.focus();
+
+      // 获取选定对象
+      var selection = getSelection();
+      // 判断是否有最后光标对象存在
+      if (self.lastEditRange) {
+        // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
+        selection.removeAllRanges();
+        selection.addRange(self.lastEditRange);
+      }
+      let emojiText;
+
+      if (item && (!type || type == "custom")) {
+        const src = await this.getLabelData(item, pLabel);
+        emojiText = document.createElement("img");
+        // emojiText.contentEditable = true
+        emojiText.align = "middle";
+        emojiText.style.verticalAlign = "middle";
+        emojiText.style.margin = "3px";
+        // emojiText.style.display = "inline-block";
+        // emojiText.style.maxWidth = "150px";
+        // emojiText.style.minHeight = "30px";
+        emojiText.src = src;
+        emojiText.dataset.field = item.content
+          ? item.content.field
+          : item.field;
+        emojiText.dataset.label = item.content
+          ? item.content.label
+          : item.label;
+      } else if (type == "cal") {
+        const str = item.label;
+        emojiText = document.createTextNode(str);
+        emojiText.innerHTML = str;
+      } else {
+        emojiText = document.createElement("select");
+        const str = this.calMark.reduce((total, item, index) => {
+          return total + `<option value ="${item}">${item}</option>`;
+        }, "");
+        emojiText.innerHTML = str;
+      }
+
+      var range = selection.getRangeAt(0);
+
+      // 判断选定对象范围是编辑框还是文本节点
+      if (selection.anchorNode.nodeName != "#text") {
+        // 如果是编辑框范围。则创建表情文本节点进行插入 当光标位置>0时
+        if (edit.childNodes.length > 0 && selection.anchorOffset > 0) {
+          // 如果文本框的子元素大于0，则表示有其他元素，则按照位置插入表情节点
+          for (var i = 0; i < edit.childNodes.length; i++) {
+            if (i == selection.anchorOffset - 1) {
+              if (edit.childNodes[i].nextSibling) {
+                edit.insertBefore(emojiText, edit.childNodes[i].nextSibling);
+              } else {
+                edit.appendChild(emojiText);
+              }
+            }
+          }
+        } else if (edit.childNodes.length > 0 && selection.anchorOffset == 0) {
+          // 当光标位置==0时
+          for (var i = 0; i < edit.childNodes.length; i++) {
+            if (i == selection.anchorOffset) {
+              //   if (edit.childNodes[i].nextSibling) {
+              //     edit.insertBefore(
+              //       emojiText,
+              //       edit.childNodes[i + 1].nextSibling
+              //     );
+              //   } else {
+              edit.insertBefore(emojiText, edit.childNodes[0]);
+              //   }
+            }
+          }
+        } else {
+          edit.appendChild(emojiText);
+        }
+        //  else if (edit.childNodes.length > 0 && selection.anchorOffset == 0) {
+        //   edit.insertBefore(emojiText, edit.childNodes[0]);
+        // }
+
+        range.setStart(selection.anchorNode, selection.anchorOffset + 1);
+        self.setSelection();
+      } else {
+        // 如果是文本节点则先获取光标对象
+        var range = selection.getRangeAt(0);
+        // 获取光标对象的范围界定对象，一般就是textNode对象
+        var textNode = range.startContainer;
+        // 获取光标位置
+        var rangeStartOffset = range.startOffset;
+        // 文本节点在光标位置处插入新的表情内容
+        let start;
+        edit.childNodes.forEach((item, index) => {
+          if (item == textNode) {
+            start = index;
+          }
+        });
+
+        if (rangeStartOffset == 0) {
+          textNode.before(emojiText);
+          start += 1;
+        } else {
+          textNode.after(emojiText);
+          start += 2;
+        }
+        // 创建新的光标对象
+        var range = document.createRange();
+        // 光标对象的范围界定为新建的表情节点
+        range.selectNodeContents(edit);
+        range.setStart(edit, start);
+        range.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(range);
+      }
+      //   this.lastEditRange = selection.getRangeAt(0);
+      edit.focus();
+    },
+    // label转图片
+    // TODO: 处理组件标签Canvas
+    getLabelData(item, pLabel) {
+      return new Promise((resolve, reject) => {
+        const dom = document.createElement("span");
+        if (pLabel) {
+          dom.innerHTML = `${pLabel}.${item.label}`;
+        } else {
+          dom.innerHTML = item.label;
+        }
+
+        dom.style.padding = "5px 5px";
+        dom.style.color = "#52C41A";
+        dom.style.fontSize = "12px";
+        dom.style.borderWidth = "1px";
+        dom.style.borderStyle = "solid";
+        dom.style.borderColor = "rgba(183, 235, 143, 1)";
+        dom.style.borderRadius = "4px";
+        dom.style.backgroundColor = "rgba(246, 255, 237, 1)";
+        if (
+          (item.attrs && item.attrs.type == "number") ||
+          (item.content && item.content.attrs.type == "number")
+        ) {
+          dom.style.color = "#FA541C";
+          dom.style.borderColor = "rgba(255, 187, 150, 1)";
+          dom.style.backgroundColor = "rgba(255, 242, 232, 1)";
+        }
+        if (
+          (item.attrs && item.type == "checkbox") ||
+          (item.content && item.content.attrs.type == "checkbox")
+        ) {
+          dom.style.color = "#b653d1";
+          dom.style.borderColor = "#d3adf7";
+          dom.style.backgroundColor = "#f9f0ff";
+        }
+        if (
+          (item.attrs && item.type == "datetime") ||
+          (item.content && item.content.attrs.type == "datetime")
+        ) {
+          dom.style.color = "#13c2c2";
+          dom.style.borderColor = "#87e8de";
+          dom.style.backgroundColor = "#e6fffb";
+        }
+        if (
+          (item.attrs && item.type == "datetimerange") ||
+          (item.content && item.content.attrs.type == "datetimerange")
+        ) {
+          dom.style.color = "#1890ff";
+          dom.style.borderColor = "#91d5ff";
+          dom.style.backgroundColor = "#e6f7ff";
+        }
+        if (
+          (item.attrs && item.type == "switch") ||
+          (item.content && item.content.attrs.type == "switch")
+        ) {
+          dom.style.color = "rgba(0, 0, 0, 0.647058823529412)";
+          dom.style.borderColor = "rgba(217, 217, 217, 1)";
+          dom.style.backgroundColor = "rgba(245, 245, 245, 1)";
+        }
+        dom.align = "middle";
+        dom.style.verticalAlign = "middle";
+        document.body.appendChild(dom);
+        html2Canvas(dom).then(canvas => {
+          const imageData = canvas.toDataURL("image/png");
+          document.body.removeChild(dom);
+          console.log(imageData);
+          resolve(imageData);
+        });
+      });
+    },
+    handleInput($event, v) {
+      //   console.log($event);
+      const code = [
+        37,
+        38,
+        39,
+        40,
+        8, // 退格
+        46
+      ];
+
+      if ($event.keyCode == 13) {
+        $event.preventDefault();
+      }
+      this.setSelection();
+
+      //   this.$emit("input", this.$el.innerHTML);
+    },
+    blurFunc() {
+      this.isChange = true;
+      this.inner = this.value;
+      this.$emit("blurFunc");
+    },
+    setCustomValue() {
+      const edit = this.$refs.calText;
+      const childNodes = edit.childNodes;
+      let str = "";
+      const nodeName = "";
+      for (let i = 0; i < childNodes.length; i++) {
+        if (i - 1 < 0) continue;
+        if (
+          childNodes[i - 1].nodeName == childNodes[i].nodeName &&
+          childNodes[i].nodeName == "IMG"
+        ) {
+          this.$message.error("表达式间缺少运算符");
+          return false;
+        } else if (childNodes[i].nodeName == "#text") {
+          const strReg = /[\+\-\*\>\<\=\!/]*/g;
+          const arrPromise = childNodes[i].nodeValue.match(strReg);
+
+          if (
+            arrPromise[0].length >= 2 &&
+            arrPromise[1] == "" &&
+            arrPromise[0] != ">=" &&
+            arrPromise[0] != "<=" &&
+            arrPromise[0] != "==" &&
+            arrPromise[0] != "===" &&
+            arrPromise[0] != "!=" &&
+            arrPromise[0] != "!=="
+          ) {
+            this.$message.error("多个运算符堆积无意义");
+
+            return false;
+          }
+        }
+      }
+      childNodes.forEach(item => {
+        if (item.nodeName == "IMG") {
+          str += `{${item.dataset.field}}`;
+        } else if (item.nodeName == "SELECT") {
+          str += `{${item.value}}`;
+        } else if (item.nodeName == "#text") {
+          str += `${item.nodeValue}`;
+        } else if (item.nodeName == "TEXT") {
+          str += `${item.innerText}`;
+        } else if (item.nodeName == "SPAN") {
+          str += `${item.innerText}`;
+        }
+      });
+      return str;
+    }
+  },
+  created() {},
+  mounted() {}
+};
+</script>
+<style>
+.read-only {
+  -webkit-user-modify: read-only;
+  -moz-user-modify: read-only;
+}
+</style>