@ctzy-web-client/plugin-component-vue 1.0.0 → 1.0.1

package/lib/data-form/form-components/bwa-rich-text.js

@@ -0,0 +1,333 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var webBaseClientVue = require('web-base-client-vue');
+var Quill = require('quill');
+require('quill/dist/quill.snow.css');
+var ElementPlus = require('element-plus');
+var _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var Quill__default = /*#__PURE__*/_interopDefaultLegacy(Quill);
+
+const __default__ = vue.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, emit }) {
+    const props = __props;
+    let editor = null;
+    const userService = webBaseClientVue.useService("UserService");
+    const loading = vue.ref(false);
+    const userList = vue.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 = vue.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 (vue.unref(loading)) {
+          return;
+        }
+        loading.value = true;
+        if (!vue.unref(userService)) {
+          ElementPlus.ElMessage.error("\u65E0\u6CD5\u83B7\u53D6\u7528\u6237");
+          return;
+        }
+        const userListResult = await vue.unref(userService).getUserList({
+          name: search
+        });
+        if (userListResult.code != 0) {
+          ElementPlus.ElMessage.error(userListResult.msg);
+          return;
+        }
+        userList.value = userListResult.data;
+      } finally {
+        loading.value = false;
+      }
+    };
+    const handleVisibleChange = (visible) => {
+      if (!visible) {
+        return;
+      }
+      loadUserList();
+    };
+    const virtualRef = vue.ref(null);
+    ;
+    const ns = webBaseClientVue.useNamespace("rich-text");
+    const fileService = webBaseClientVue.useService("FileService");
+    const quillEditorContainer = vue.ref(null);
+    const quillEditorRef = vue.ref(null);
+    const currentScope = vue.getCurrentScope();
+    const editorInstance = vue.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 = vue.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 = vue.computed({
+      get: () => props.userIds,
+      set: (v) => {
+        emit("update:userIds", v);
+      }
+    });
+    const updateImage = async (file) => {
+      if (!vue.unref(fileService)) {
+        return;
+      }
+      const uploadFileResult = await vue.unref(fileService).uploadFile(file);
+      if (uploadFileResult.code != 0) {
+        return uploadFileResult;
+      }
+      const fileID = uploadFileResult.data.id;
+      const filePathResult = await vue.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();
+    };
+    vue.onMounted(() => {
+      editor = new Quill__default["default"](vue.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 = vue.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(vue.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(() => {
+        vue.watch(
+          vue.computed(() => props.disabled),
+          (disabled) => {
+            editor.enable(!disabled);
+          },
+          { immediate: true }
+        );
+        const getFilePaths = async (alt) => {
+          const filePathResult = await vue.unref(fileService).getFilePath(alt);
+          return filePathResult;
+        };
+        let artArr2 = [];
+        vue.watch(
+          value,
+          async () => {
+            if (vue.unref(value).indexOf("data:image/png") != -1 || vue.unref(value).indexOf("base64") != -1) {
+              editor.root.innerHTML = vue.unref(value);
+              return;
+            }
+            if (!vue.unref(value)) {
+              artArr2 = [];
+            }
+            let afterHtml = "";
+            let artArr = [];
+            let artArrOption = [];
+            if (vue.unref(value).indexOf("<img") != -1) {
+              vue.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 = vue.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 || vue.unref(value))) {
+              return;
+            }
+            const range = editor.getSelection();
+            editor.root.innerHTML = afterHtml || vue.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);
+        vue.onScopeDispose(() => {
+          editor.off("text-change", handleTextChange);
+          editor.root.removeEventListener("paste", handlePaste);
+        });
+      });
+    });
+    expose({
+      getEditorInstance() {
+        return vue.unref(editorInstance);
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_BwaAdvanceOption = vue.resolveComponent("BwaAdvanceOption");
+      const _component_BwaAdvanceSelect = vue.resolveComponent("BwaAdvanceSelect");
+      return vue.openBlock(), vue.createElementBlock("div", {
+        class: vue.normalizeClass(vue.unref(ns).b()),
+        ref_key: "quillEditorContainer",
+        ref: quillEditorContainer
+      }, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass(vue.unref(ns).e("editor")),
+          ref_key: "quillEditorRef",
+          ref: quillEditorRef,
+          onClick: quillEditorRefClick
+        }, null, 2),
+        vue.createVNode(_component_BwaAdvanceSelect, {
+          showSelection: false,
+          "virtual-triggering": true,
+          "virtual-ref": virtualRef.value,
+          loading: loading.value,
+          onSearch: loadUserList,
+          "onUpdate:modelValue": handleChange,
+          onVisibleChange: handleVisibleChange
+        }, {
+          default: vue.withCtx(() => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(userList.value, (item) => {
+              return vue.openBlock(), vue.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__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "bwa-rich-text.vue"]]);
+
+exports["default"] = RichText;

package/lib/data-form/form-components/bwa-select.js

@@ -0,0 +1,80 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var ElementPlus = require('element-plus');
+var _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const __default__ = vue.defineComponent({
+  name: "BwaSelect"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    modelValue: {
+      type: null
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    labelProp: {
+      type: String,
+      default: "label"
+    },
+    valueProp: {
+      type: String,
+      default: "value"
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const options = vue.computed(
+      () => (props.options || []).map((item) => ({
+        ...item,
+        value: item.value + ""
+      }))
+    );
+    const attrs = vue.useAttrs();
+    const modelValue = vue.computed({
+      get: () => {
+        if (props.multiple) {
+          return Array.isArray(props.modelValue) ? props.modelValue.map((item) => item + "") : [];
+        } else {
+          return props.modelValue == null ? "" : props.modelValue + "";
+        }
+      },
+      set: (v) => emit("update:modelValue", v)
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElSelect), vue.mergeProps(vue.unref(attrs), {
+        modelValue: vue.unref(modelValue),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null),
+        clearable: "",
+        multiple: __props.multiple,
+        teleported: false
+      }), {
+        default: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "default", {}, () => [
+            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(options), (item) => {
+              return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElOption), {
+                key: item.value,
+                value: item.value,
+                label: item.label
+              }, null, 8, ["value", "label"]);
+            }), 128))
+          ])
+        ]),
+        _: 3
+      }, 16, ["modelValue", "multiple"]);
+    };
+  }
+});
+var Select = /* @__PURE__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "bwa-select.vue"]]);
+
+exports["default"] = Select;

package/lib/data-form/form-components/bwa-textarea.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var ElementPlus = require('element-plus');
+var _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const __default__ = vue.defineComponent({
+  name: "BwaTextarea"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    value: {
+      type: [String, Number],
+      default: ""
+    }
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const attrs = vue.useAttrs();
+    const modelValue = vue.computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:model-value", v)
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElInput), vue.mergeProps({ type: "textarea" }, vue.unref(attrs), {
+        modelValue: vue.unref(modelValue),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null)
+      }), null, 16, ["modelValue"]);
+    };
+  }
+});
+var Textarea = /* @__PURE__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "bwa-textarea.vue"]]);
+
+exports["default"] = Textarea;

package/lib/data-form/form-components/bwa-upload.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var icons = require('@element-plus/icons');
+var ElementPlus = require('element-plus');
+var webBaseClientVue = require('web-base-client-vue');
+var _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const __default__ = vue.defineComponent({
+  name: "BwaUpload"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    modelValue: { type: Array, default: () => [] }
+  },
+  emits: ["update:modelValue"],
+  setup(__props, { emit }) {
+    const props = __props;
+    vue.watch(
+      vue.computed(() => props.modelValue),
+      (modelValue) => {
+        if (!Array.isArray(modelValue)) {
+          emit("update:modelValue", []);
+        }
+      },
+      { immediate: true }
+    );
+    const fileList = vue.computed(
+      () => (Array.isArray(props.modelValue) ? props.modelValue : []).map((fileInfo) => {
+        return {
+          name: fileInfo.fileName,
+          response: fileInfo
+        };
+      })
+    );
+    const attrs = vue.useAttrs();
+    const ns = webBaseClientVue.useNamespace("upload");
+    const fileService = webBaseClientVue.useService("FileService");
+    const handleHttpRequest = ({ file, onProgress, onSuccess, onError }) => {
+      if (!vue.unref(fileService)) {
+        ElementPlus.ElMessage.error("\u65E0\u6CD5\u4E0A\u4F20\u6587\u4EF6\u3002");
+        return;
+      }
+      vue.unref(fileService).uploadFile(file, {
+        onUploadProgress: (event) => {
+          onProgress({ ...event, percent: event.progress });
+        }
+      }).then((res) => {
+        if (res.code != 0) {
+          onError(res.msg);
+          return;
+        }
+        onSuccess(res.data);
+      }, onError);
+    };
+    const handleSuccess = (fileInfo) => {
+      const value = Array.isArray(props.modelValue) ? props.modelValue : [];
+      emit("update:modelValue", value.concat(fileInfo));
+    };
+    const handleError = (error) => {
+      console.error(error);
+      ElementPlus.ElMessage.error("\u6587\u4EF6\u4E0A\u4F20\u5931\u8D25\u3002");
+    };
+    const handleDelete = (file) => {
+      emit(
+        "update:modelValue",
+        props.modelValue.filter((fileInfo) => fileInfo !== file.response)
+      );
+    };
+    const handleDownload = async (file) => {
+      if (!vue.unref(fileService)) {
+        ElementPlus.ElMessage.error("\u65E0\u6CD5\u4E0B\u8F7D\u6587\u4EF6\u3002");
+        return;
+      }
+      try {
+        const downloadFileResult = await vue.unref(fileService).downloadFile(
+          file.response
+        );
+        if (downloadFileResult.code != 0) {
+          ElementPlus.ElMessage.error(downloadFileResult.msg);
+          return;
+        }
+      } catch (e) {
+        console.error(e);
+        ElementPlus.ElMessage.error("\u4E0B\u8F7D\u6587\u4EF6\u5931\u8D25\u3002");
+      }
+    };
+    return (_ctx, _cache) => {
+      const _component_Plus = vue.resolveComponent("Plus");
+      const _component_ElTooltip = vue.resolveComponent("ElTooltip");
+      return vue.openBlock(), vue.createBlock(vue.unref(ElementPlus.ElUpload), vue.mergeProps(vue.unref(attrs), {
+        "file-list": vue.unref(fileList),
+        "http-request": handleHttpRequest,
+        class: vue.unref(ns).b(),
+        "on-success": handleSuccess,
+        "on-error": handleError
+      }), {
+        trigger: vue.withCtx(() => [
+          vue.createVNode(vue.unref(ElementPlus.ElButton), null, {
+            default: vue.withCtx(() => [
+              vue.createVNode(vue.unref(ElementPlus.ElIcon), null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_Plus)
+                ]),
+                _: 1
+              }),
+              vue.createTextVNode(" \u4E0A\u4F20\u6587\u4EF6 ")
+            ]),
+            _: 1
+          })
+        ]),
+        file: vue.withCtx(({ file }) => [
+          vue.createElementVNode("div", {
+            class: vue.normalizeClass(vue.unref(ns).b("item"))
+          }, [
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).be("item", "info"))
+            }, [
+              vue.createVNode(_component_ElTooltip, {
+                content: file.name
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("div", {
+                    class: vue.normalizeClass(vue.unref(ns).be("item", "file-name"))
+                  }, vue.toDisplayString(file.name), 3)
+                ]),
+                _: 2
+              }, 1032, ["content"])
+            ], 2),
+            vue.createElementVNode("div", {
+              class: vue.normalizeClass(vue.unref(ns).be("item", "tools"))
+            }, [
+              vue.createVNode(vue.unref(ElementPlus.ElIcon), {
+                class: vue.normalizeClass(vue.unref(ns).be("item", "tools-item")),
+                onClick: ($event) => handleDownload(file)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.Download))
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"]),
+              vue.createVNode(vue.unref(ElementPlus.ElIcon), {
+                class: vue.normalizeClass(vue.unref(ns).be("item", "tools-item")),
+                onClick: ($event) => handleDelete(file)
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(vue.unref(icons.Delete))
+                ]),
+                _: 2
+              }, 1032, ["class", "onClick"])
+            ], 2)
+          ], 2)
+        ]),
+        _: 1
+      }, 16, ["file-list", "class"]);
+    };
+  }
+});
+var Upload = /* @__PURE__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "bwa-upload.vue"]]);
+
+exports["default"] = Upload;

package/lib/data-form/form-components/bwa-user-multi-select.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var bwaUserSelect = require('./bwa-user-select.js');
+var _pluginVue_exportHelper = require('../../_virtual/_plugin-vue_export-helper.js');
+
+const __default__ = vue.defineComponent({
+  name: "BwaUserMultiSelect"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    modelValue: null
+  },
+  emits: ["update:model-value"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const modelValue = vue.computed({
+      get: () => props.modelValue,
+      set: (v) => emit("update:model-value", v)
+    });
+    const attrs = vue.useAttrs();
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(bwaUserSelect["default"], vue.mergeProps({
+        modelValue: vue.unref(modelValue),
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(modelValue) ? modelValue.value = $event : null)
+      }, vue.unref(attrs), { multiple: "" }), null, 16, ["modelValue"]);
+    };
+  }
+});
+var UserMultiSelect = /* @__PURE__ */ _pluginVue_exportHelper["default"](_sfc_main, [["__file", "bwa-user-multi-select.vue"]]);
+
+exports["default"] = UserMultiSelect;