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

package/es/editor/upload/ibiz-image-upload/ibiz-image-upload.mjs

@@ -1,117 +0,0 @@
-import { ref, computed, createVNode, resolveComponent, defineComponent } from 'vue';
-import { getUploadProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
-import './ibiz-image-upload.css';
-import { useIViewUpload } from '../use/use-iview-upload.mjs';
-
-"use strict";
-const IBizImageUpload = /* @__PURE__ */ defineComponent({
-  name: "IBizImageUpload",
-  props: getUploadProps(),
-  emits: getEditorEmits(),
-  setup(props, {
-    emit
-  }) {
-    const ns = useNamespace("image-upload");
-    const c = props.controller;
-    const {
-      uploadUrl,
-      headers,
-      files,
-      limit,
-      onDownload,
-      onError,
-      onRemove,
-      onSuccess,
-      beforeUpload
-    } = useIViewUpload(props, (value) => {
-      emit("change", value);
-    }, c);
-    const dialogImageUrl = ref("");
-    const dialogVisible = ref(false);
-    const onDialogVisibleChange = (value) => {
-      dialogVisible.value = value;
-    };
-    const onPreview = (file) => {
-      dialogImageUrl.value = file.url;
-      dialogVisible.value = true;
-    };
-    const noUploadIcon = computed(() => {
-      return limit.value === 1 && files.value.length === 1;
-    });
-    return {
-      ns,
-      c,
-      files,
-      limit,
-      headers,
-      uploadUrl,
-      dialogImageUrl,
-      dialogVisible,
-      noUploadIcon,
-      beforeUpload,
-      onSuccess,
-      onError,
-      onRemove,
-      onDownload,
-      onDialogVisibleChange,
-      onPreview
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
-    }, [createVNode("div", {
-      "class": this.ns.e("image-upload-list")
-    }, [this.files.map((item) => createVNode("div", {
-      "key": item.id,
-      "class": this.ns.e("list-item")
-    }, [createVNode("img", {
-      "src": item.url
-    }, null), createVNode("div", {
-      "class": this.ns.e("list-item-cover")
-    }, [createVNode("ion-icon", {
-      "class": this.ns.e("preview-icon"),
-      "onClick": () => this.onPreview(item),
-      "name": "search"
-    }, null), createVNode("ion-icon", {
-      "class": this.ns.e("download-icon"),
-      "onClick": () => this.onDownload(item),
-      "name": "download"
-    }, null), createVNode("ion-icon", {
-      "class": this.ns.e("remove-icon"),
-      "onClick": () => this.onRemove(item),
-      "name": "remove"
-    }, null)])]))]), createVNode(resolveComponent("el-upload"), {
-      "ref": "imageUpload",
-      "class": [this.ns.b("icon"), this.ns.is("not-show", this.noUploadIcon)],
-      "file-list": this.files,
-      "action": this.uploadUrl,
-      "headers": this.headers,
-      "disabled": this.disabled,
-      "multiple": this.c.multiple,
-      "limit": this.limit,
-      "show-file-list": false,
-      "accept": this.c.accept,
-      "list-type": "picture-card",
-      "before-upload": this.beforeUpload,
-      "onSuccess": this.onSuccess,
-      "onError": this.onError,
-      "onRemove": this.onRemove,
-      "onPreview": this.onDownload
-    }, {
-      default: () => [createVNode("ion-icon", {
-        "name": "add-outline",
-        "class": this.ns.e("image-upload-add")
-      }, null)]
-    }), this.dialogVisible ? createVNode(resolveComponent("el-image-viewer"), {
-      "onClose": () => this.onDialogVisibleChange(false),
-      "url-list": [this.dialogImageUrl],
-      "hide-on-click-modal": true,
-      "close-on-press-escape": true,
-      "teleported": true,
-      "z-index": 9999
-    }, null) : null]);
-  }
-});
-
-export { IBizImageUpload };

package/es/editor/upload/index.mjs

@@ -1,7 +0,0 @@
-export { IBizFileUpload } from './ibiz-file-upload/ibiz-file-upload.mjs';
-export { IBizImageUpload } from './ibiz-image-upload/ibiz-image-upload.mjs';
-export { IBizImagePreview } from './ibiz-image-preview/ibiz-image-preview.mjs';
-export { UploadEditorController } from './upload-editor.controller.mjs';
-export { FileUploaderEditorProvider } from './upload-editor.provider.mjs';
-
-"use strict";

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

@@ -1,143 +0,0 @@
-import { RuntimeModelError, 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 UploadEditorController extends EditorController {
-  constructor() {
-    super(...arguments);
-    /**
-     * 是否支持拖拽
-     */
-    __publicField(this, "isDrag", false);
-    /**
-     * 是否多选
-     */
-    __publicField(this, "multiple", true);
-    /**
-     * 接受上传的文件类型
-     */
-    __publicField(this, "accept", "");
-    /**
-     * 上传参数
-     */
-    __publicField(this, "uploadParams");
-    /**
-     * 下载参数
-     */
-    __publicField(this, "exportParams");
-  }
-  async onInit() {
-    var _a;
-    await super.onInit();
-    if ((_a = this.model.editorType) == null ? void 0 : _a.includes("PICTURE")) {
-      this.accept = "image/*";
-    }
-    if (["FILEUPLOADER_ONE", "PICTURE_ONE", "PICTURE_ONE_RAW"].includes(
-      this.model.editorType
-    )) {
-      this.multiple = false;
-    }
-    if (this.editorParams) {
-      const { isDrag, multiple, accept, uploadParams, exportParams } = this.editorParams;
-      if (isDrag) {
-        this.isDrag = Boolean(isDrag);
-      }
-      if (multiple) {
-        this.multiple = Boolean(multiple);
-      }
-      if (accept) {
-        this.accept = accept;
-      }
-      if (uploadParams) {
-        try {
-          this.uploadParams = JSON.parse(uploadParams);
-        } catch (error) {
-          throw new RuntimeModelError(
-            uploadParams,
-            `\u914D\u7F6EuploadParams\u6CA1\u6709\u6309\u6807\u51C6JSON\u683C\u5F0F`
-          );
-        }
-      }
-      if (exportParams) {
-        try {
-          this.exportParams = JSON.parse(exportParams);
-        } catch (error) {
-          throw new RuntimeModelError(
-            exportParams,
-            `\u914D\u7F6EexportParams\u6CA1\u6709\u6309\u6807\u51C6JSON\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 { UploadEditorController };

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

@@ -1,35 +0,0 @@
-import { UploadEditorController } from './upload-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 FileUploaderEditorProvider {
-  constructor(editorType) {
-    __publicField(this, "formEditor", "IBizFileUpload");
-    __publicField(this, "gridEditor", "IBizFileUpload");
-    let componentName = "IBizFileUpload";
-    switch (editorType) {
-      case "PICTURE":
-      case "PICTURE_ONE":
-        componentName = "IBizImageUpload";
-        break;
-      case "PICTURE_ONE_RAW":
-        componentName = "IBizImagePreview";
-        break;
-      default:
-    }
-    this.formEditor = componentName;
-    this.gridEditor = componentName;
-  }
-  async createController(editorModel, parentController) {
-    const c = new UploadEditorController(editorModel, parentController);
-    await c.init();
-    return c;
-  }
-}
-
-export { FileUploaderEditorProvider };

package/es/editor/upload/use/use-ibiz-upload.mjs

@@ -1,165 +0,0 @@
-import { isImage, uploadFile } from '@ibiz-template/core';
-import { ref, watch } from 'vue';
-
-"use strict";
-function formatFileInfo(file, downloadUrl) {
-  file.url = downloadUrl.replace("%fileId%", file.id);
-  if (!file.status) {
-    file.status = "finished";
-  }
-  if (!file.fileName) {
-    const index = file.name.lastIndexOf(".");
-    file.fileName = file.name.substring(0, index);
-    file.fileExt = file.name.substring(index);
-    file.isImage = isImage(file.name);
-  }
-  return file;
-}
-function useIBizUploadInit(props) {
-  const uploadUrl = ref("");
-  const downloadUrl = ref("");
-  const valueList = ref([]);
-  watch(
-    props.data,
-    (newVal) => {
-      if (newVal) {
-        const urls = props.controller.value.calcBaseUrl(newVal);
-        uploadUrl.value = urls.uploadUrl;
-        downloadUrl.value = urls.downloadUrl;
-      }
-    },
-    { immediate: true, deep: true }
-  );
-  watch(
-    props.value,
-    (newVal) => {
-      valueList.value = !newVal ? [] : JSON.parse(newVal);
-      if (valueList.value.length && downloadUrl.value) {
-        valueList.value.forEach((file) => {
-          formatFileInfo(file, downloadUrl.value);
-        });
-      }
-    },
-    { immediate: true }
-  );
-  watch(
-    downloadUrl,
-    (newVal) => {
-      if (newVal && valueList.value.length) {
-        valueList.value.forEach((file) => {
-          formatFileInfo(file, newVal);
-        });
-      }
-    },
-    { immediate: true }
-  );
-  return {
-    downloadUrl,
-    uploadUrl,
-    valueList
-  };
-}
-function useIBizUpload(opts) {
-  const uploadState = ref("undo");
-  const fileList = ref([]);
-  const { downloadUrl, value, uploadUrl } = opts;
-  watch(
-    value,
-    (newVal) => {
-      if (newVal.length > 0) {
-        fileList.value = [];
-        newVal.forEach((item) => {
-          fileList.value.push(formatFileInfo(item, downloadUrl.value));
-        });
-      }
-    },
-    {
-      immediate: true,
-      deep: true
-    }
-  );
-  const beforeUpload = (fileData, files) => {
-    files.forEach((file) => {
-      fileList.value.push({
-        name: file.name,
-        status: file.status,
-        percentage: file.percentage,
-        id: file.uid,
-        url: ""
-      });
-    });
-    return true;
-  };
-  const onProgress = (files) => {
-    files.forEach((file) => {
-      fileList.value.find((item) => {
-        if (item.id === file.uid) {
-          item.percentage = file.percentage;
-          return true;
-        }
-        return false;
-      });
-    });
-  };
-  const onSuccess = (resultFiles, res) => {
-    resultFiles.forEach((file) => {
-      fileList.value.find((item) => {
-        if (item.id === file.uid) {
-          item.status = file.status;
-          item.id = res.data.fileid;
-          item.name = res.data.filename;
-          formatFileInfo(item, downloadUrl.value);
-          return true;
-        }
-        return false;
-      });
-    });
-  };
-  const onError = (resultFiles, error) => {
-    resultFiles.forEach((file) => {
-      fileList.value.find((item) => {
-        if (item.id === file.uid) {
-          item.status = file.status;
-          return true;
-        }
-        return false;
-      });
-    });
-    console.error(error);
-  };
-  const onFinish = (_resultFiles) => {
-    fileList.value = fileList.value.filter((file) => file.status === "finished");
-    uploadState.value = "done";
-  };
-  const selectFile = () => {
-    uploadFile({
-      multiple: opts.multiple,
-      accept: opts.accept,
-      uploadUrl: uploadUrl.value,
-      beforeUpload,
-      progress: onProgress,
-      success: onSuccess,
-      error: onError,
-      finish: onFinish
-    });
-  };
-  return {
-    selectFile,
-    fileList,
-    uploadState
-  };
-}
-function openImagePreview(file) {
-  return ibiz.overlay.modal(
-    "ImagePreview",
-    { file },
-    {
-      width: "auto",
-      height: "auto",
-      placement: "center",
-      modalClass: "ibiz-image-preview-modal"
-    }
-  );
-}
-
-export { formatFileInfo, openImagePreview, useIBizUpload, useIBizUploadInit };

package/es/editor/upload/use/use-iview-upload.mjs

@@ -1,118 +0,0 @@
-import { CoreConst, HttpError } from '@ibiz-template/core';
-import { getCookie } from 'qx-util';
-import { ref, watch, computed } from 'vue';
-
-"use strict";
-function useIViewUpload(props, valueChange, c) {
-  const files = ref([]);
-  const headers = ref({
-    Authorization: `Bearer ${getCookie(CoreConst.TOKEN)}`
-  });
-  const uploadUrl = ref("");
-  const downloadUrl = ref("");
-  const uploadCache = {
-    count: 0,
-    cacheFiles: []
-    // iview上传过程中不能改default-file-list,所以需要缓存
-  };
-  watch(
-    () => props.value,
-    (newVal) => {
-      files.value = !newVal ? [] : JSON.parse(newVal);
-    },
-    { immediate: true }
-  );
-  watch(
-    () => props.data,
-    (newVal) => {
-      if (newVal) {
-        const urls = c.calcBaseUrl(newVal);
-        uploadUrl.value = urls.uploadUrl;
-        downloadUrl.value = urls.downloadUrl;
-      }
-    },
-    { immediate: true, deep: true }
-  );
-  watch(
-    files,
-    (newVal) => {
-      if ((newVal == null ? void 0 : newVal.length) && downloadUrl.value) {
-        newVal.forEach((file) => {
-          file.url = file.url || downloadUrl.value.replace("%fileId%", file.id);
-        });
-      }
-    },
-    { immediate: true }
-  );
-  watch(
-    downloadUrl,
-    (newVal) => {
-      if (newVal && files.value.length) {
-        files.value.forEach((file) => {
-          file.url = downloadUrl.value.replace("%fileId%", file.id);
-        });
-      }
-    },
-    { immediate: true }
-  );
-  const emitValue = () => {
-    const _files = [...files.value, ...uploadCache.cacheFiles];
-    const value = _files.length > 0 ? JSON.stringify(_files.map((file) => ({ name: file.name, id: file.id }))) : null;
-    uploadCache.cacheFiles = [];
-    valueChange(value);
-  };
-  const beforeUpload = () => {
-    uploadCache.count += 1;
-  };
-  const onSuccess = (response) => {
-    if (!response) {
-      return;
-    }
-    uploadCache.cacheFiles.push({
-      name: response.filename,
-      id: response.fileid
-    });
-    uploadCache.count -= 1;
-    if (uploadCache.count === 0) {
-      emitValue();
-    }
-  };
-  const onError = (...args) => {
-    const error = args[0];
-    uploadCache.count -= 1;
-    throw new HttpError({
-      response: { data: JSON.parse(error.message), status: error.status }
-    });
-  };
-  const onRemove = (file) => {
-    if (props.disabled) {
-      return;
-    }
-    const index = files.value.findIndex((item) => item.id === file.id);
-    if (index !== -1) {
-      files.value.splice(index, 1);
-    }
-    emitValue();
-  };
-  const onDownload = (file) => {
-    const url = file.url || downloadUrl.value.replace("%fileId%", file.id);
-    c.fileDownload({ url, name: file.name });
-  };
-  const limit = computed(() => {
-    return c.multiple ? 9999 : 1;
-  });
-  return {
-    uploadUrl,
-    downloadUrl,
-    headers,
-    files,
-    limit,
-    onDownload,
-    onError,
-    onRemove,
-    onSuccess,
-    beforeUpload
-  };
-}
-
-export { useIViewUpload };