@ctzy-web-client/plugin-component-vue 1.0.23 → 1.0.25

package/es/data-form/form-components/bwa-rich-text.mjs

@@ -1,325 +1,413 @@
-import { defineComponent, ref, unref, getCurrentScope, computed, onMounted, markRaw, watch, onScopeDispose, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock } from 'vue';
+import { ref, unref, getCurrentScope, computed, onMounted, markRaw, watch, onScopeDispose, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock } from 'vue';
 import { useService, useNamespace } from '@ctzy-web-client/web-base-client-vue';
 import Quill from 'quill';
 import 'quill/dist/quill.snow.css';
 import { ElMessage } from 'element-plus';
 import _export_sfc from '../../_virtual/_plugin-vue_export-helper.mjs';
 
-const __default__ = defineComponent({
-  name: "BwaRichText"
-});
-const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
-  props: {
-    placeholder: {
-      type: String,
-      default: ""
-    },
-    modelValue: {
-      type: null
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    showAt: {
-      type: Boolean,
-      default: false
-    },
-    userIds: {
-      typee: Array,
-      default: () => []
-    }
-  },
-  emits: ["update:modelValue", "update:userIds"],
+const _sfc_main = {
+  __name: 'bwa-rich-text',
+  props: {
+  placeholder: {
+    type: String,
+    default: '',
+  },
+  modelValue: {
+    type: null,
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  showAt: {
+    type: Boolean,
+    default: false,
+  },
+  userIds: {
+    typee: Array,
+    default: () => [],
+  },
+},
+  emits: ['update:modelValue', 'update:userIds'],
   setup(__props, { expose, emit }) {
-    const props = __props;
-    let editor = null;
-    const userService = useService("UserService");
-    const loading = ref(false);
-    const userList = ref([
-      { value: "1", label: "\u7528\u62371" },
-      { value: "2", label: "\u7528\u62372" },
-      { value: "3", label: "\u7528\u62373" }
-    ]);
-    const handleChange = ([userId]) => {
-      if (!editor || !userId) {
-        return;
-      }
-      const userInfo = unref(userList).find((item) => item.value === userId);
-      if (!userInfo) {
-        return;
-      }
-      editor.focus();
-      let length = editor.getSelection() ? editor.getSelection().index || 0 : editor.getLength();
-      editor.insertEmbed(
-        length,
-        "at",
-        { id: userInfo.value, desc: userInfo.label },
-        "user"
-      );
-      editor.insertText(length + 1, " ");
-      editor.setSelection(length + 2);
-    };
-    const loadUserList = async (search = "") => {
-      try {
-        if (unref(loading)) {
-          return;
-        }
-        loading.value = true;
-        if (!unref(userService)) {
-          ElMessage.error("\u65E0\u6CD5\u83B7\u53D6\u7528\u6237");
-          return;
-        }
-        const userListResult = await unref(userService).getUserList({
-          name: search
-        });
-        if (userListResult.code != 0) {
-          ElMessage.error(userListResult.msg);
-          return;
-        }
-        userList.value = userListResult.data;
-      } finally {
-        loading.value = false;
-      }
-    };
-    const handleVisibleChange = (visible) => {
-      if (!visible) {
-        return;
-      }
-      loadUserList();
-    };
-    const virtualRef = ref(null);
-    ;
-    const ns = useNamespace("rich-text");
-    const fileService = useService("FileService");
-    const quillEditorContainer = ref(null);
-    const quillEditorRef = ref(null);
-    const currentScope = getCurrentScope();
-    const editorInstance = ref(null);
-    const toolbarOptions = [
-      [{ header: [1, 2, 3, 4, 5, 6, false] }],
-      [{ font: [] }],
-      ["bold", "italic", "underline", "strike"],
-      [{ align: [] }],
-      ["blockquote", "code-block"],
-      [{ header: 1 }, { header: 2 }],
-      [{ list: "ordered" }, { list: "bullet" }],
-      [{ script: "sub" }, { script: "super" }],
-      [{ indent: "-1" }, { indent: "+1" }],
-      [{ color: [] }, { background: [] }],
-      ["clean"].concat(props.showAt ? ["at"] : [])
-    ];
-    const value = computed({
-      get: () => props.modelValue || "",
-      set: (v) => {
-        let str = "";
-        if (!v && editor && editor.root.innerHTML && editor.root.innerHTML.indexOf("<img") != -1) {
-          str = editor.root.innerHTML;
-        }
-        emit("update:modelValue", v || str);
-      }
-    });
-    const userIds = computed({
-      get: () => props.userIds,
-      set: (v) => {
-        emit("update:userIds", v);
-      }
-    });
-    const updateImage = async (file) => {
-      if (!unref(fileService)) {
-        return;
-      }
-      const uploadFileResult = await unref(fileService).uploadFile(file);
-      if (uploadFileResult.code != 0) {
-        return uploadFileResult;
-      }
-      const fileID = uploadFileResult.data.id;
-      const filePathResult = await unref(fileService).getFilePath(fileID);
-      if (filePathResult.code != 0) {
-        return filePathResult;
-      }
-      return {
-        ...filePathResult,
-        data: { id: fileID, path: filePathResult.data }
-      };
-    };
-    const quillEditorRefClick = () => {
-      if (!editor) {
-        return;
-      }
-      editor.focus();
-    };
-    onMounted(() => {
-      editor = new Quill(unref(quillEditorRef), {
-        theme: "snow",
-        placeholder: props.placeholder,
-        modules: {
-          toolbar: {
-            container: toolbarOptions,
-            handlers: {
-              at: function(value2) {
-              }
-            }
-          }
-        }
-      });
-      virtualRef.value = quillEditorContainer.value.querySelector("button.ql-at");
-      editorInstance.value = markRaw(editor);
-      const el = document.createElement("div");
-      const getUserIds = (html) => {
-        el.innerHTML = html;
-        const items = Array.from(el.querySelectorAll("span.ptp-at-item"));
-        userIds.value = [
-          ...new Set(items.map((item) => item.getAttribute("d-id")))
-        ];
-      };
-      getUserIds(unref(value));
-      const handleTextChange = (delta, oldDelta, source) => {
-        const _value = editor.getText() === "\n" ? "" : editor.root.innerHTML;
-        value.value = _value;
-        getUserIds(_value);
-      };
-      const handlePaste = (evt) => {
-        if (evt.clipboardData && evt.clipboardData.files && evt.clipboardData.files.length) {
-          evt.preventDefault();
-          [].forEach.call(evt.clipboardData.files, async (file) => {
-            console.log(file);
-            if (file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
-              const filePathResult = await updateImage(file);
-              if (filePathResult.code != 0) {
-                return;
-              }
-              const fileData = filePathResult.data;
-              var range = editor.getSelection();
-              if (range && fileData) {
-                editor.insertEmbed(range.index, "image", fileData.path);
-                editor.formatText(range.index, 1, {
-                  alt: fileData.id
-                });
-                setTimeout(() => {
-                  editor.setSelection(range.index + 1);
-                }, 300);
-              }
-            }
-          });
-        }
-      };
-      currentScope.run(() => {
-        watch(
-          computed(() => props.disabled),
-          (disabled) => {
-            editor.enable(!disabled);
-          },
-          { immediate: true }
-        );
-        const getFilePaths = async (alt) => {
-          const filePathResult = await unref(fileService).getFilePath(alt);
-          return filePathResult;
-        };
-        let artArr2 = [];
-        watch(
-          value,
-          async () => {
-            if (unref(value).indexOf("data:image/png") != -1 || unref(value).indexOf("base64") != -1) {
-              editor.root.innerHTML = unref(value);
-              return;
-            }
-            if (!unref(value)) {
-              artArr2 = [];
-            }
-            let afterHtml = "";
-            let artArr = [];
-            let artArrOption = [];
-            if (unref(value).indexOf("<img") != -1) {
-              unref(value).replace(/<img [^>]*alt=['"]([^'"]+)[^>]*>/gi, (img, alt) => {
-                if (!artArr2.includes(alt)) {
-                  artArr.push(alt);
-                }
-              });
-              for (const alt of artArr) {
-                artArrOption.push({
-                  alt,
-                  src: await getFilePaths(alt)
-                });
-              }
-              afterHtml = unref(value).replace(/<img [^>]*alt=['"]([^'"]+)[^>]*>/gi, (img, alt) => {
-                var _a;
-                if (artArr.includes(alt)) {
-                  return `<img src="${(_a = artArrOption.find((a) => a.alt === alt)) == null ? void 0 : _a.src.data}" alt="${alt}">`;
-                } else {
-                  return img;
-                }
-              });
-            }
-            console.log("afterHtml =>", afterHtml);
-            artArr2 = [...artArr2, ...artArr];
-            artArr = [];
-            artArrOption = [];
-            if (editor.root.innerHTML === (afterHtml || unref(value))) {
-              return;
-            }
-            const range = editor.getSelection();
-            editor.root.innerHTML = afterHtml || unref(value);
-            setTimeout(() => {
-              if (range) {
-                editor.setSelection(range.index + 1);
-                editor.focus();
-              }
-            }, 100);
-          },
-          { immediate: true }
-        );
-        editor.on("text-change", handleTextChange);
-        editor.root.addEventListener("paste", handlePaste);
-        onScopeDispose(() => {
-          editor.off("text-change", handleTextChange);
-          editor.root.removeEventListener("paste", handlePaste);
-        });
-      });
-    });
-    expose({
-      getEditorInstance() {
-        return unref(editorInstance);
-      }
-    });
-    return (_ctx, _cache) => {
-      const _component_BwaAdvanceOption = resolveComponent("BwaAdvanceOption");
-      const _component_BwaAdvanceSelect = resolveComponent("BwaAdvanceSelect");
-      return openBlock(), createElementBlock("div", {
-        class: normalizeClass(unref(ns).b()),
-        ref_key: "quillEditorContainer",
-        ref: quillEditorContainer
-      }, [
-        createElementVNode("div", {
-          class: normalizeClass(unref(ns).e("editor")),
-          ref_key: "quillEditorRef",
-          ref: quillEditorRef,
-          onClick: quillEditorRefClick
-        }, null, 2),
-        createVNode(_component_BwaAdvanceSelect, {
-          showSelection: false,
-          "virtual-triggering": true,
-          "virtual-ref": virtualRef.value,
-          loading: loading.value,
-          onSearch: loadUserList,
-          "onUpdate:modelValue": handleChange,
-          onVisibleChange: handleVisibleChange
-        }, {
-          default: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(userList.value, (item) => {
-              return openBlock(), createBlock(_component_BwaAdvanceOption, {
-                key: item.value,
-                value: item.value,
-                label: item.label
-              }, null, 8, ["value", "label"]);
-            }), 128))
-          ]),
-          _: 1
-        }, 8, ["virtual-ref", "loading"])
-      ], 2);
-    };
-  }
-});
-var RichText = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "bwa-rich-text.vue"]]);
+
+const props = __props;
+
+let editor = null;
+
+const userService = useService('UserService');
+
+const loading = ref(false);
+const userList = ref([
+  { value: '1', label: '用户1' },
+  { value: '2', label: '用户2' },
+  { value: '3', label: '用户3' },
+]);
+
+const handleChange = ([userId]) => {
+  if (!editor || !userId) {
+    return;
+  }
+
+  const userInfo = unref(userList).find((item) => item.value === userId);
+
+  if (!userInfo) {
+    return;
+  }
+
+  editor.focus();
+
+  //获取当前光标位置
+  let length = editor.getSelection()
+    ? editor.getSelection().index || 0
+    : editor.getLength();
+
+  // 设置@
+  editor.insertEmbed(
+    length,
+    'at',
+    { id: userInfo.value, desc: userInfo.label },
+    'user'
+  );
+
+  editor.insertText(length + 1, ' ');
+
+  //设置光标
+  editor.setSelection(length + 2);
+};
+
+const loadUserList = async (search = '') => {
+  try {
+    if (unref(loading)) {
+      return;
+    }
+
+    loading.value = true;
+    if (!unref(userService)) {
+      ElMessage.error('无法获取用户');
+      return;
+    }
+
+    const userListResult = await unref(userService).getUserList({
+      name: search,
+    });
+
+    if (userListResult.code != 0) {
+      ElMessage.error(userListResult.msg);
+      return;
+    }
+
+    userList.value = userListResult.data;
+  } finally {
+    loading.value = false;
+  }
+};
+
+const handleVisibleChange = (visible) => {
+  if (!visible) {
+    return;
+  }
+
+  loadUserList();
+};
+
+
+
+const virtualRef = ref(null);
+
+
+
+defineOptions({
+  name: 'BwaRichText',
+});
+
+const ns = useNamespace('rich-text');
+
+const fileService = useService('FileService');
+
+const quillEditorContainer = ref(null);
+const quillEditorRef = ref(null);
+
+const currentScope = getCurrentScope();
+
+const editorInstance = ref(null);
+
+const toolbarOptions = [
+  [{ header: [1, 2, 3, 4, 5, 6, false] }],
+  [{ font: [] }],
+  ['bold', 'italic', 'underline', 'strike'],
+  [{ align: [] }],
+  ['blockquote', 'code-block'],
+  [{ header: 1 }, { header: 2 }],
+  [{ list: 'ordered' }, { list: 'bullet' }],
+  [{ script: 'sub' }, { script: 'super' }],
+  [{ indent: '-1' }, { indent: '+1' }],
+  [{ color: [] }, { background: [] }],
+  ['clean'].concat(props.showAt ? ['at'] : []),
+];
+
+const value = computed({
+  get: () => props.modelValue || '',
+  set: (v) => {
+      // 解决当只有一张图片的时候  回显html报文异常
+      let str = '';
+      if (!v && editor && editor.root.innerHTML && editor.root.innerHTML.indexOf('<img') != -1) {
+          str = editor.root.innerHTML;
+      }
+    emit('update:modelValue', v || str);
+  },
+});
+
+const userIds = computed({
+  get: () => props.userIds,
+  set: (v) => {
+    emit('update:userIds', v);
+  },
+});
+
+const updateImage = async (file) => {
+  if (!unref(fileService)) {
+    return;
+  }
+
+  const uploadFileResult = await unref(fileService).uploadFile(file);
+
+  if (uploadFileResult.code != 0) {
+    return uploadFileResult;
+  }
+
+  const fileID = uploadFileResult.data.id;
+
+  const filePathResult = await unref(fileService).getFilePath(fileID);
+
+  if (filePathResult.code != 0) {
+    return filePathResult;
+  }
+
+  return {
+    ...filePathResult,
+    data: { id: fileID, path: filePathResult.data },
+  };
+};
+const quillEditorRefClick = () => {
+    if (!editor) {
+        return;
+    }
+    editor.focus();
+};
+onMounted(() => {
+  editor = new Quill(unref(quillEditorRef), {
+    theme: 'snow',
+    placeholder: props.placeholder,
+    modules: {
+      toolbar: {
+        container: toolbarOptions,
+        handlers: {
+          at: function (value) {},
+        },
+      },
+    },
+  });
+
+  virtualRef.value = quillEditorContainer.value.querySelector('button.ql-at');
+
+  editorInstance.value = markRaw(editor);
+
+  const el = document.createElement('div');
+
+  const getUserIds = (html) => {
+    el.innerHTML = html;
+
+    const items = Array.from(el.querySelectorAll('span.ptp-at-item'));
+
+    userIds.value = [
+      ...new Set(items.map((item) => item.getAttribute('d-id'))),
+    ];
+  };
+
+  getUserIds(unref(value));
+
+  const handleTextChange = (delta, oldDelta, source) => {
+    const _value = editor.getText() === '\n' ? '' : editor.root.innerHTML;
+
+    value.value = _value;
+
+    getUserIds(_value);
+    // if (source === 'user') {
+    //     var range = editor.getLength();
+    //     console.log(range)
+    //     // if (range != null) {
+    //     //     setTimeout(() => {
+    //     //         editor.setSelection(range.index, range.length);  // 重新设置选区
+    //     //     }, 300)
+    //     // }
+    // }
+  };
+
+  const handlePaste = (evt) => {
+    if (
+      evt.clipboardData &&
+      evt.clipboardData.files &&
+      evt.clipboardData.files.length
+    ) {
+      evt.preventDefault();
+      [].forEach.call(evt.clipboardData.files, async (file) => {
+          console.log(file);
+        if (file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+          const filePathResult = await updateImage(file);
+
+          if (filePathResult.code != 0) {
+            return;
+          }
+
+          const fileData = filePathResult.data;
+          //   const fileData =  { id: 1, path: 'https://img1.baidu.com/it/u=2335299816,3552592887&fm=253&fmt=auto&app=138&f=JPEG?w=126&h=189' }
+          var range = editor.getSelection();
+          if (range && fileData) {
+            //  在当前光标位置插入图片
+            editor.insertEmbed(range.index, 'image', fileData.path);
+            editor.formatText(range.index, 1, {
+              alt: fileData.id,
+            });
+            //  将光标移动到图片后面
+              setTimeout(() => {
+                  editor.setSelection(range.index + 1);
+                  // console.log(editor.getSelection(), editor.getLength())
+                  // editor.setSelection(editor.getSelection().index, editor.getSelection().length);
+              }, 300);
+          }
+        }
+      });
+    }
+  };
+
+  currentScope.run(() => {
+    watch(
+      computed(() => props.disabled),
+      (disabled) => {
+        editor.enable(!disabled);
+      },
+      { immediate: true }
+    );
+    const getFilePaths = async (alt) => {
+      const filePathResult = await unref(fileService).getFilePath(alt);
+      return filePathResult
+    };
+      let artArr2 = []; // 防止重复加载图片
+    watch(
+      value,
+        async () => {
+            if ((unref(value).indexOf('data:image/png') != -1 || unref(value).indexOf('base64') != -1)) {
+                editor.root.innerHTML = unref(value);
+                return
+            }
+          // console.log(unref(value))
+            if (!unref(value)) {
+                artArr2 = [];
+            }
+          let afterHtml = '';
+            let artArr = [];
+            let artArrOption = [];
+          if (unref(value).indexOf('<img') != -1) {
+              unref(value).replace(/<img [^>]*alt=['"]([^'"]+)[^>]*>/gi, (img, alt) => {
+                  if (!artArr2.includes(alt)) {
+                      artArr.push(alt);
+                  }
+              });
+              for (const alt of artArr) {
+                  artArrOption.push({
+                      alt,
+                      src: await getFilePaths(alt)
+                      // src: 'https://img1.baidu.com/it/u=2335299816,3552592887&fm=253&fmt=auto&app=138&f=JPEG?w=126&h=189'
+                  });
+              }
+              // console.log(artArrOption)
+              afterHtml = unref(value).replace(/<img [^>]*alt=['"]([^'"]+)[^>]*>/gi, (img, alt) => {
+                  if (artArr.includes(alt)) {
+                      return `<img src="${artArrOption.find(a => a.alt === alt)?.src.data}" alt="${alt}">`
+                  } else {
+                      return img
+                  }
+
+              });
+          }
+          console.log('afterHtml =>', afterHtml);
+            artArr2 = [...artArr2, ...artArr];
+            artArr = [];
+            artArrOption = [];
+        if (editor.root.innerHTML === (afterHtml || unref(value))) {
+          return;
+        }
+          const range = editor.getSelection();
+        editor.root.innerHTML = afterHtml || unref(value);
+            setTimeout(() => {
+                if (range) {
+                    editor.setSelection(range.index + 1);
+                    editor.focus();
+                }
+            }, 100);
+      },
+      { immediate: true }
+    );
+
+    editor.on('text-change', handleTextChange);
+
+    editor.root.addEventListener('paste', handlePaste);
+
+    onScopeDispose(() => {
+      editor.off('text-change', handleTextChange);
+
+      editor.root.removeEventListener('paste', handlePaste);
+    });
+  });
+});
+
+expose({
+  getEditorInstance() {
+    return unref(editorInstance);
+  },
+});
+
+return (_ctx, _cache) => {
+  const _component_BwaAdvanceOption = resolveComponent("BwaAdvanceOption");
+  const _component_BwaAdvanceSelect = resolveComponent("BwaAdvanceSelect");
+
+  return (openBlock(), createElementBlock("div", {
+    class: normalizeClass(unref(ns).b()),
+    ref_key: "quillEditorContainer",
+    ref: quillEditorContainer
+  }, [
+    createElementVNode("div", {
+      class: normalizeClass(unref(ns).e('editor')),
+      ref_key: "quillEditorRef",
+      ref: quillEditorRef,
+      onClick: quillEditorRefClick
+    }, null, 2 /* CLASS */),
+    createVNode(_component_BwaAdvanceSelect, {
+      showSelection: false,
+      "virtual-triggering": true,
+      "virtual-ref": virtualRef.value,
+      loading: loading.value,
+      onSearch: loadUserList,
+      "onUpdate:modelValue": handleChange,
+      onVisibleChange: handleVisibleChange
+    }, {
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(userList.value, (item) => {
+          return (openBlock(), createBlock(_component_BwaAdvanceOption, {
+            key: item.value,
+            value: item.value,
+            label: item.label
+          }, null, 8 /* PROPS */, ["value", "label"]))
+        }), 128 /* KEYED_FRAGMENT */))
+      ]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["virtual-ref", "loading"])
+  ], 2 /* CLASS */))
+}
+}
+
+};
+var RichText = /*#__PURE__*/_export_sfc(_sfc_main, [['__file',"bwa-rich-text.vue"]]);
 
 export { RichText as default };