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

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

@@ -1,413 +1,335 @@
-import { ref, unref, getCurrentScope, computed, onMounted, markRaw, watch, onScopeDispose, resolveComponent, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, withCtx, Fragment, renderList, createBlock } from 'vue';
+import { defineComponent, 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 _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: '用户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 */))
+// Inject __name helper
+if (typeof __name === 'undefined') {
+  function __name(obj, name) {
+    Object.defineProperty(obj, "name", {
+      value: name,
+      configurable: true
+    });
+  }
 }
-}
-
-};
-var RichText = /*#__PURE__*/_export_sfc(_sfc_main, [['__file',"bwa-rich-text.vue"]]);
+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"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    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 props = __props;
+    const virtualRef = ref(null);
+    const emit = __emit;
+    ;
+    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"]]);
 
 export { RichText as default };