@ibiz-template/vue3-components 0.4.8-dev.0 → 0.4.8

package/es/editor/html/html-editor.controller.mjs

@@ -0,0 +1,115 @@
+import { RuntimeError, downloadFileFromBlob } from '@ibiz-template/core';
+import { EditorController, convertNavData } from '@ibiz-template/runtime';
+import qs from 'qs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class HtmlEditorController extends EditorController {
+  constructor() {
+    super(...arguments);
+    /**
+     * 上传参数
+     */
+    __publicField(this, "uploadParams");
+    /**
+     * 下载参数
+     */
+    __publicField(this, "exportParams");
+  }
+  async onInit() {
+    await super.onInit();
+    if (this.editorParams) {
+      const { uploadParams, exportParams } = this.editorParams;
+      if (uploadParams) {
+        try {
+          this.uploadParams = JSON.parse(uploadParams);
+        } catch (error) {
+          ibiz.log.error(
+            `\u7F16\u8F91\u5668[${ibiz.log.error(
+              error
+            )}]\u7F16\u8F91\u5668\u53C2\u6570 uploadParams \u975E json \u683C\u5F0F`
+          );
+        }
+      }
+      if (exportParams) {
+        try {
+          this.exportParams = JSON.parse(exportParams);
+        } catch (error) {
+          ibiz.log.error(
+            `\u7F16\u8F91\u5668[${ibiz.log.error(
+              error
+            )}]\u7F16\u8F91\u5668\u53C2\u6570 exportParams \u975E json \u683C\u5F0F`
+          );
+        }
+      }
+    }
+  }
+  /**
+   * 计算文件的上传路径和下载路径
+   * 下载路径文件id用%fileId%占位，替换即可
+   * 配置编辑器参数uploadParams和exportParams时，会像导航参数一样动态添加对应的参数到url上
+   *
+   * @author lxm
+   * @date 2022-11-17 13:11:43
+   * @param {IData} data
+   * @returns {*}  {{ uploadUrl: string; downloadUrl: string }}
+   */
+  calcBaseUrl(data) {
+    let uploadUrl = `${ibiz.env.baseUrl}/${ibiz.env.appId}${ibiz.env.uploadFileUrl}`;
+    let downloadUrl = `${ibiz.env.baseUrl}/${ibiz.env.appId}${ibiz.env.downloadFileUrl}/%fileId%`;
+    let uploadParams = {};
+    let exportParams = {};
+    if (this.uploadParams) {
+      uploadParams = convertNavData(
+        this.uploadParams,
+        data,
+        this.params,
+        this.context
+      );
+    }
+    if (this.exportParams) {
+      exportParams = convertNavData(
+        this.exportParams,
+        data,
+        this.params,
+        this.context
+      );
+    }
+    uploadUrl += qs.stringify(uploadParams, { addQueryPrefix: true });
+    downloadUrl += qs.stringify(exportParams, { addQueryPrefix: true });
+    return { uploadUrl, downloadUrl };
+  }
+  /**
+   * 请求url获取文件流，并用JS触发文件下载
+   *
+   * @author lxm
+   * @date 2022-11-17 14:11:09
+   * @param {string} url
+   * @param {IData} file
+   */
+  fileDownload(file) {
+    ibiz.net.request(file.url, {
+      method: "get",
+      responseType: "blob",
+      baseURL: ""
+      // 已经有baseURL了，这里无需再写
+    }).then((response) => {
+      if (response.status !== 200) {
+        throw new RuntimeError("\u4E0B\u8F7D\u6587\u4EF6\u5931\u8D25");
+      }
+      if (!response.data) {
+        throw new RuntimeError("\u6587\u4EF6\u6D41\u6570\u636E\u4E0D\u5B58\u5728");
+      } else {
+        const fileName = file.name;
+        downloadFileFromBlob(response.data, fileName);
+      }
+    });
+  }
+}
+
+export { HtmlEditorController };

package/es/editor/html/html-editor.provider.mjs

@@ -0,0 +1,22 @@
+import { HtmlEditorController } from './html-editor.controller.mjs';
+
+"use strict";
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class HtmlEditorProvider {
+  constructor() {
+    __publicField(this, "formEditor", "IBizHtml");
+    __publicField(this, "gridEditor", "IBizHtml");
+  }
+  async createController(editorModel, parentController) {
+    const c = new HtmlEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}
+
+export { HtmlEditorProvider };

package/es/editor/html/index.mjs

@@ -0,0 +1,4 @@
+export { HtmlEditorController } from './html-editor.controller.mjs';
+export { HtmlEditorProvider } from './html-editor.provider.mjs';
+
+"use strict";

package/es/editor/html/wang-editor/wang-editor.css

@@ -0,0 +1 @@
+.ibiz-html{display:inline-block;width:100%;--w-e-textarea-bg-color:var(--ibiz-color-bg-1);--w-e-textarea-color:var(--ibiz-color-text-2);--w-e-textarea-border-color:var(--ibiz-color-border);--w-e-textarea-slight-border-color:var(--ibiz-color-border);--w-e-textarea-slight-color:var(--ibiz-color-text-1);--w-e-textarea-slight-bg-color:var(--ibiz-color-bg-1);--w-e-textarea-selected-border-color:var(--ibiz-color-border);--w-e-textarea-handler-bg-color:var(--ibiz-color-primary);--w-e-toolbar-color:var(--ibiz-color-text-0);--w-e-toolbar-bg-color:var(--ibiz-color-bg-1);--w-e-toolbar-active-color:var(--ibiz-color-text-0);--w-e-toolbar-active-bg-color:var(--ibiz-color-bg-1);--w-e-toolbar-disabled-color:var(--ibiz-color-disabled-text);--w-e-toolbar-border-color:var(--ibiz-color-border);--w-e-modal-button-bg-color:var(--ibiz-color-bg-1);--w-e-modal-button-border-color:var(--ibiz-color-border)}.ibiz-html .w-e-menu-tooltip-v5::before{color:var(--ibiz-color-text-0);background-color:var(--w-e-toolbar-bg-color)}.ibiz-html .w-e-full-screen-container{z-index:9999}

package/es/editor/html/wang-editor/wang-editor.mjs

@@ -0,0 +1,239 @@
+import { shallowRef, ref, watch, onBeforeUnmount, onMounted, createVNode, defineComponent } from 'vue';
+import { Toolbar, Editor } from '@wangeditor/editor-for-vue';
+import { getCookie } from 'qx-util';
+import { isNil } from 'ramda';
+import { getHtmlProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
+import { CoreConst } from '@ibiz-template/core';
+import './wang-editor.css';
+
+"use strict";
+const IBizHtml = /* @__PURE__ */ defineComponent({
+  name: "IBizHtml",
+  props: getHtmlProps(),
+  emits: getEditorEmits(),
+  setup(props, {
+    emit
+  }) {
+    const ns = useNamespace("html");
+    const c = props.controller;
+    const editorRef = shallowRef();
+    const valueHtml = ref("");
+    const headers = ref({
+      Authorization: `Bearer ${getCookie(CoreConst.TOKEN)}`
+    });
+    const uploadUrl = ref("");
+    const downloadUrl = ref("");
+    watch(() => props.data, (newVal) => {
+      if (newVal) {
+        const urls = c.calcBaseUrl(newVal);
+        uploadUrl.value = urls.uploadUrl;
+        downloadUrl.value = urls.downloadUrl;
+      }
+    }, {
+      immediate: true,
+      deep: true
+    });
+    const customCheckLinkFn = (text, url) => {
+      if (!url) {
+        return;
+      }
+      return true;
+    };
+    const customParseLinkUrl = (url) => {
+      return url;
+    };
+    const toolbarConfig = {
+      excludeKeys: ["group-video"]
+    };
+    const editorConfig = {
+      placeholder: c.placeHolder,
+      readOnly: props.readonly,
+      MENU_CONF: {
+        // 图片上传
+        uploadImage: {
+          // 上传地址
+          server: uploadUrl.value,
+          // form-data fieldName ，默认值 'wangeditor-uploaded-image'
+          fieldName: "file",
+          // 单个文件的最大体积限制，默认为 2M
+          maxFileSize: 10 * 1024 * 1024,
+          // 10M
+          // 最多可上传几个文件，默认为 100
+          maxNumberOfFiles: 10,
+          // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
+          allowedFileTypes: [],
+          // 自定义增加 http  header
+          headers: headers.value,
+          // 跨域是否传递 cookie ，默认为 false
+          withCredentials: true,
+          // 上传之前触发
+          onBeforeUpload(file) {
+            return file;
+          },
+          // 上传进度的回调函数
+          onProgress(progress) {
+            console.log("progress", progress);
+          },
+          // 单个文件上传成功之后
+          onSuccess(file, res) {
+            console.log(`${file.name} \u4E0A\u4F20\u6210\u529F`, res);
+          },
+          // 单个文件上传失败
+          onFailed(file, res) {
+            console.log(`${file.name} \u4E0A\u4F20\u5931\u8D25`, res);
+          },
+          // 上传错误，或者触发 timeout 超时
+          onError(file, err, res) {
+            console.log(`${file.name} \u4E0A\u4F20\u51FA\u9519`, err, res);
+          },
+          // 自定义插入图片
+          async customInsert(res, insertFn) {
+            const url = downloadUrl.value.replace("%fileId%", res.id);
+            const alt = res.filename;
+            insertFn(url, alt, "");
+          }
+        },
+        // 插入链接
+        insertLink: {
+          checkLink: customCheckLinkFn,
+          // 也支持 async 函数
+          parseLinkUrl: customParseLinkUrl
+          // 也支持 async 函数
+        },
+        // 更新链接
+        editLink: {
+          checkLink: customCheckLinkFn,
+          // 也支持 async 函数
+          parseLinkUrl: customParseLinkUrl
+          // 也支持 async 函数
+        }
+      }
+    };
+    onBeforeUnmount(() => {
+      const editor = editorRef.value;
+      if (editor == null)
+        return;
+      editor.destroy();
+    });
+    const handleCreated = (editor) => {
+      editorRef.value = editor;
+      editor.setHtml(valueHtml.value);
+    };
+    const handleChange = (editor) => {
+      const html = editor.getHtml();
+      const emitValue = html === "<p><br></p>" ? "" : html;
+      if (emitValue === props.value || emitValue === "" && isNil(props.value)) {
+        return;
+      }
+      emit("change", emitValue);
+    };
+    const handleDestroyed = (_editor) => {
+    };
+    const handleFocus = (_editor) => {
+      emit("focus");
+    };
+    const handleBlur = (_editor) => {
+      emit("blur");
+    };
+    const customAlert = (info, type) => {
+      alert(`\u3010\u81EA\u5B9A\u4E49\u63D0\u793A\u3011${type} - ${info}`);
+    };
+    const customPaste = (editor, event, callback) => {
+      callback(true);
+    };
+    const insertText = (str) => {
+      const editor = editorRef.value;
+      if (editor == null)
+        return;
+      editor.insertText(str);
+    };
+    const printHtml = () => {
+      const editor = editorRef.value;
+      if (editor == null)
+        return;
+      console.log(editor.getHtml());
+    };
+    const disable = () => {
+      const editor = editorRef.value;
+      if (editor == null)
+        return;
+      editor.disable();
+    };
+    const enable = () => {
+      const editor = editorRef.value;
+      if (editor == null)
+        return;
+      editor.enable();
+    };
+    onMounted(() => {
+      watch(() => props.value, (newVal, oldVal) => {
+        if (newVal !== oldVal && (typeof props.value === "string" || newVal === null)) {
+          if (newVal === null) {
+            valueHtml.value = "";
+          } else {
+            valueHtml.value = newVal;
+          }
+        }
+      }, {
+        immediate: true
+      });
+      watch(() => props.disabled, (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          if (newVal === true) {
+            disable();
+          } else {
+            enable();
+          }
+        }
+      }, {
+        immediate: true
+      });
+    });
+    return {
+      ns,
+      editorRef,
+      mode: "default",
+      valueHtml,
+      toolbarConfig,
+      editorConfig,
+      handleCreated,
+      handleChange,
+      handleDestroyed,
+      handleFocus,
+      handleBlur,
+      customAlert,
+      customPaste,
+      insertText,
+      printHtml,
+      disable,
+      enable
+    };
+  },
+  render() {
+    return createVNode("div", {
+      "class": this.ns.b()
+    }, [createVNode("div", {
+      "style": "border: 1px solid #ccc; margin-top: 10px"
+    }, [createVNode(Toolbar, {
+      "editor": this.editorRef,
+      "default-config": this.toolbarConfig,
+      "mode": this.mode,
+      "style": "border-bottom: 1px solid #ccc"
+    }, null), createVNode(Editor, {
+      "modelValue": this.valueHtml,
+      "onUpdate:modelValue": ($event) => this.valueHtml = $event,
+      "default-config": this.editorConfig,
+      "mode": this.mode,
+      "style": "height: 400px; overflow-y: hidden",
+      "onOnCreated": this.handleCreated,
+      "onOnChange": this.handleChange,
+      "onOnDestroyed": this.handleDestroyed,
+      "onOnFocus": this.handleFocus,
+      "onOnBlur": this.handleBlur,
+      "oncustomAlert": this.customAlert,
+      "oncustomPaste": this.customPaste
+    }, null)])]);
+  }
+});
+
+export { IBizHtml as default };