yuang-framework-ui-pc 1.1.45 → 1.1.46

package/lib/yu-framework-attachment-file-upload/FileUpload/index.cjs

@@ -0,0 +1,218 @@
+"use strict";
+const vue = require("vue");
+const CommonUpload = require("../CommonUpload/index");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "FileUpload" },
+  __name: "index",
+  props: {
+    modelValue: {},
+    fileLimit: { default: 100 },
+    readonly: { type: Boolean },
+    disabled: { type: Boolean },
+    preview: { type: Boolean, default: true },
+    limit: {},
+    multiple: { type: Boolean },
+    drag: { type: Boolean, default: true },
+    accept: { default: "" },
+    itemStyle: {},
+    buttonStyle: {},
+    sortable: { type: [Boolean, Object], default: () => ({ forceFallback: true }) },
+    imageProps: {},
+    progressProps: {},
+    previewProps: {},
+    tools: { type: Boolean, default: true },
+    listType: { default: "file" },
+    beforeUploadClick: {},
+    beforeItemEdit: {},
+    locale: {}
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const files = vue.ref([]);
+    const isImage = (url) => {
+      var _a, _b;
+      const parts = url ? url.split(".") : [];
+      const suffix = parts.length <= 1 || parts[0] === "" && parts.length === 2 ? "" : (_b = (_a = parts.pop()) == null ? void 0 : _a.toLowerCase) == null ? void 0 : _b.call(_a);
+      return suffix && ["png", "jpg", "jpeg", "gif", "svg"].includes(suffix);
+    };
+    const getItemFileUrl = (item) => {
+      return item.fileUrl;
+    };
+    const handleItemClick = (item) => {
+      handleItemPreview(item);
+    };
+    const handleItemPreview = (item) => {
+      if (!item.url) {
+        const fileUrl = getItemFileUrl(item);
+        if (fileUrl) {
+          window.open(fileUrl);
+        } else if (item.file && !item.file.type.startsWith("image")) {
+          window.open(URL.createObjectURL(item.file));
+        }
+      }
+    };
+    const updateModelValue = (value) => {
+      if (props.modelValue !== value) {
+        emit("update:modelValue", value);
+        emit("change", value);
+      }
+    };
+    const clearData = () => {
+      files.value = [];
+    };
+    const isDone = () => {
+      return !files.value.some((d) => d.status !== "done");
+    };
+    const getDataValue = (filesValue) => {
+      const result = [];
+      filesValue.forEach((item) => {
+        const fileUrl = getItemFileUrl(item);
+        if (item.status === "done" && fileUrl != null) {
+          result.push({ url: fileUrl, name: item.name });
+        }
+      });
+      return result;
+    };
+    const getFilesValue = (dataValue, filesValue) => {
+      if (!dataValue) {
+        return filesValue.filter((item) => item.status !== "done");
+      }
+      const result = [];
+      if (props.limit === 1) {
+        try {
+          const temp2 = JSON.parse(dataValue);
+          if (temp2) {
+            const url = temp2.url ?? "";
+            result.push({
+              key: temp2.key ?? `0-${url}`,
+              id: temp2.id ?? ``,
+              name: temp2.name ?? "",
+              url: isImage(url) ? url : void 0,
+              fileUrl: url,
+              status: "done"
+            });
+            return result;
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        const temp = filesValue.find((item) => item.status !== "done");
+        if (temp != null) {
+          result.push(temp);
+        }
+        return result;
+      }
+      try {
+        const temps = JSON.parse(dataValue);
+        filesValue.forEach((item) => {
+          const fileUrl = getItemFileUrl(item);
+          if (fileUrl && temps.some((temp) => temp.url === fileUrl) || item.status !== "done") {
+            result.push(item);
+          }
+        });
+        temps.forEach((temp, index) => {
+          const url = (temp == null ? void 0 : temp.url) ?? "";
+          if (url && !result.some((item) => getItemFileUrl(item) === url)) {
+            const key = `${index}-${url}`;
+            const oldIndex = result.findIndex((item) => item.key === key);
+            if (oldIndex !== -1) {
+              result.splice(oldIndex, 1);
+            }
+            result.push({
+              key,
+              id: temp.id ?? "",
+              name: temp.name ?? "",
+              url: isImage(url) ? url : void 0,
+              fileUrl: url,
+              status: "done"
+            });
+          }
+        });
+        if (props.limit != null && result.length > props.limit) {
+          const temp = result.filter((item) => item.status !== "done");
+          for (const t of temp) {
+            const i = result.indexOf(t);
+            result.splice(i, 1);
+            if (result.length <= props.limit) {
+              break;
+            }
+          }
+        }
+      } catch (e) {
+        console.error(e);
+        filesValue.forEach((item) => {
+          if (item.status !== "done") {
+            result.push(item);
+          }
+        });
+      }
+      return result;
+    };
+    const filesIsChanged = (newFiles, oldFiles) => {
+      if (newFiles.length !== oldFiles.length) {
+        return true;
+      }
+      for (let i = 0; i < newFiles.length; i++) {
+        const newItem = newFiles[i];
+        const oldItem = oldFiles[i];
+        if (newItem.key !== oldItem.key || newItem.name !== oldItem.name || getItemFileUrl(newItem) !== getItemFileUrl(oldItem) || newItem.status !== oldItem.status) {
+          return true;
+        }
+      }
+      return false;
+    };
+    vue.watch(
+      files,
+      (filesValue) => {
+        const dataValue = getDataValue(filesValue);
+        if (props.limit === 1) {
+          updateModelValue(dataValue.length ? JSON.stringify(dataValue[0]) : "");
+          return;
+        }
+        updateModelValue(dataValue.length ? JSON.stringify(dataValue) : "");
+      },
+      { deep: true }
+    );
+    vue.watch(
+      () => props.modelValue,
+      (dataValue) => {
+        const filesValue = getFilesValue(dataValue, files.value);
+        if (filesIsChanged(filesValue, files.value)) {
+          files.value = filesValue;
+        }
+      },
+      { immediate: true }
+    );
+    __expose({ clearData, isDone });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(CommonUpload, {
+        modelValue: files.value,
+        "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => files.value = $event),
+        fileLimit: _ctx.fileLimit,
+        readonly: _ctx.readonly,
+        disabled: _ctx.disabled,
+        preview: _ctx.preview,
+        limit: _ctx.limit,
+        multiple: _ctx.multiple,
+        drag: _ctx.drag,
+        accept: _ctx.accept,
+        itemStyle: _ctx.itemStyle,
+        buttonStyle: _ctx.buttonStyle,
+        sortable: _ctx.sortable,
+        imageProps: _ctx.imageProps,
+        progressProps: _ctx.progressProps,
+        previewProps: _ctx.previewProps,
+        tools: _ctx.tools,
+        listType: _ctx.listType,
+        beforeUploadClick: _ctx.beforeUploadClick,
+        beforeItemEdit: _ctx.beforeItemEdit,
+        locale: _ctx.locale,
+        onItemClick: handleItemClick,
+        onPreview: handleItemPreview
+      }, null, 8, ["modelValue", "fileLimit", "readonly", "disabled", "preview", "limit", "multiple", "drag", "accept", "itemStyle", "buttonStyle", "sortable", "imageProps", "progressProps", "previewProps", "tools", "listType", "beforeUploadClick", "beforeItemEdit", "locale"]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/yu-framework-attachment-file-upload/FileUpload/index.d.ts

@@ -0,0 +1,143 @@
+import { CSSProperties } from 'vue';
+import { ElProgressProps, ElImageProps } from '../../ele-app/el';
+import { EleImageViewerProps } from '../../ele-app/plus';
+import { ListType, BeforeUploadClick, BeforeItemEdit, UploadLocale } from '../../ele-upload-list/types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** 绑定值 */
+    modelValue?: string;
+    /** 文件大小限制, 单位MB */
+    fileLimit?: number;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否支持点击预览 */
+    preview?: boolean;
+    /** 最大上传数量 */
+    limit?: number;
+    /** 是否支持多选文件 */
+    multiple?: boolean;
+    /** 是否启用拖拽上传 */
+    drag?: boolean;
+    /** 接受上传的文件类型 */
+    accept?: string;
+    /** 自定义样式 */
+    itemStyle?: CSSProperties;
+    /** 自定义上传按钮样式 */
+    buttonStyle?: CSSProperties;
+    /** 是否开启拖拽排序 */
+    sortable?: boolean | Record<keyof any, any>;
+    /** 自定义图片属性 */
+    imageProps?: ElImageProps;
+    /** 自定义进度条属性 */
+    progressProps?: ElProgressProps;
+    /** 自定义图片预览属性 */
+    previewProps?: EleImageViewerProps;
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools?: boolean;
+    /** 列表显示样式 */
+    listType?: ListType;
+    /** 上传按钮点击前的钩子 */
+    beforeUploadClick?: BeforeUploadClick;
+    /** 修改按钮点击前的钩子 */
+    beforeItemEdit?: BeforeItemEdit;
+    /** 国际化 */
+    locale?: Partial<UploadLocale>;
+}>, {
+    fileLimit: number;
+    preview: boolean;
+    drag: boolean;
+    accept: string;
+    sortable: () => {
+        forceFallback: boolean;
+    };
+    tools: boolean;
+    listType: string;
+}>>, {
+    clearData: () => void;
+    isDone: () => boolean;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value?: string | undefined) => void;
+    change: (value?: string | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+    /** 绑定值 */
+    modelValue?: string;
+    /** 文件大小限制, 单位MB */
+    fileLimit?: number;
+    /** 是否只读 */
+    readonly?: boolean;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 是否支持点击预览 */
+    preview?: boolean;
+    /** 最大上传数量 */
+    limit?: number;
+    /** 是否支持多选文件 */
+    multiple?: boolean;
+    /** 是否启用拖拽上传 */
+    drag?: boolean;
+    /** 接受上传的文件类型 */
+    accept?: string;
+    /** 自定义样式 */
+    itemStyle?: CSSProperties;
+    /** 自定义上传按钮样式 */
+    buttonStyle?: CSSProperties;
+    /** 是否开启拖拽排序 */
+    sortable?: boolean | Record<keyof any, any>;
+    /** 自定义图片属性 */
+    imageProps?: ElImageProps;
+    /** 自定义进度条属性 */
+    progressProps?: ElProgressProps;
+    /** 自定义图片预览属性 */
+    previewProps?: EleImageViewerProps;
+    /** 是否开启底部预览和修改的操作按钮 */
+    tools?: boolean;
+    /** 列表显示样式 */
+    listType?: ListType;
+    /** 上传按钮点击前的钩子 */
+    beforeUploadClick?: BeforeUploadClick;
+    /** 修改按钮点击前的钩子 */
+    beforeItemEdit?: BeforeItemEdit;
+    /** 国际化 */
+    locale?: Partial<UploadLocale>;
+}>, {
+    fileLimit: number;
+    preview: boolean;
+    drag: boolean;
+    accept: string;
+    sortable: () => {
+        forceFallback: boolean;
+    };
+    tools: boolean;
+    listType: string;
+}>>> & Readonly<{
+    onChange?: ((value?: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value?: string | undefined) => any) | undefined;
+}>, {
+    sortable: boolean | Record<keyof any, any>;
+    drag: boolean;
+    preview: boolean;
+    accept: string;
+    tools: boolean;
+    listType: ListType;
+    fileLimit: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
+type __VLS_Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/lib/yu-framework-attachment-file-upload/index.cjs

@@ -0,0 +1,55 @@
+"use strict";
+const vue = require("vue");
+require("../utils/message");
+const FileUpload = require("./FileUpload/index");
+const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
+const uuidUtils = require("yuang-framework-ui-common/lib/utils/uuidUtils");
+const applicationConfig = require("yuang-framework-ui-common/lib/config/applicationConfig");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "YuFrameworkAttachmentFileUpload" },
+  __name: "index",
+  props: /* @__PURE__ */ vue.mergeModels({
+    modelValue: {},
+    param: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const files = vue.ref("");
+    vue.ref(false);
+    const model = vue.useModel(__props, "modelValue");
+    debugger;
+    model.value = model.value ?? uuidUtils.getShortUuid();
+    vue.onMounted(() => {
+      httpConfig.http.post(`${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/selectPage`, { code: model.value, pageSize: 100 }).then((res) => {
+        let attachemtList = res.data.data.records;
+        let fileList = [];
+        for (let i = 0; i < attachemtList.length; i++) {
+          fileList.push({
+            key: attachemtList[i].id,
+            id: attachemtList[i].id,
+            // 需要传递name，否则表单上显示url
+            name: attachemtList[i].name,
+            url: attachemtList[i].fullUrl,
+            status: "done"
+          });
+        }
+        debugger;
+        files.value = JSON.stringify(fileList);
+      });
+    });
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createVNode(FileUpload, {
+          ref: "filesUploadRef",
+          limit: 8,
+          modelValue: files.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => files.value = $event)
+        }, null, 8, ["modelValue"])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/yu-framework-attachment-file-upload/index.d.ts

@@ -0,0 +1,16 @@
+import { ComponentParam } from '@/model/component/param';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    param: {
+        type: import('vue').PropType<ComponentParam>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    param: {
+        type: import('vue').PropType<ComponentParam>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/yu-framework-attachment-image-upload/index.cjs

@@ -0,0 +1,185 @@
+"use strict";
+const vue = require("vue");
+const es = require("element-plus/es");
+const message = require("../utils/message");
+const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
+const uuidUtils = require("yuang-framework-ui-common/lib/utils/uuidUtils");
+const applicationConfig = require("yuang-framework-ui-common/lib/config/applicationConfig");
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  ...{ name: "YuFrameworkAttachmentImageUpload" },
+  __name: "index",
+  props: /* @__PURE__ */ vue.mergeModels({
+    modelValue: {},
+    param: {}
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const images = vue.ref([]);
+    const isLoading = vue.ref(false);
+    const checkFile = (file) => {
+      if (!file) {
+        return;
+      }
+      if (!file.type.startsWith("image")) {
+        message.EleMessage.error("只能选择图片");
+        return;
+      }
+      if (file.size / 1024 / 1024 > 2) {
+        message.EleMessage.error("大小不能超过 2MB");
+        return;
+      }
+      return true;
+    };
+    const model = vue.useModel(__props, "modelValue");
+    model.value = model.value ?? uuidUtils.getShortUuid();
+    vue.onMounted(() => {
+      httpConfig.http.post(`${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/selectPage`, { code: model.value, pageSize: 100 }).then((res) => {
+        let attachemtList = res.data.data.records;
+        for (let i = 0; i < attachemtList.length; i++) {
+          images.value.push({
+            key: attachemtList[i].id,
+            id: attachemtList[i].id,
+            url: attachemtList[i].fullUrl,
+            status: "done"
+          });
+        }
+      });
+    });
+    const handleUpload = (uploadItem2, retry) => {
+      if (!checkFile(uploadItem2.file)) {
+        return;
+      }
+      if (!retry) {
+        images.value.push({ ...uploadItem2 });
+      }
+      const item = images.value.find((t) => t.key === uploadItem2.key);
+      console.log(JSON.parse(JSON.stringify(item)));
+      if (!item) {
+        return;
+      }
+      item.status = "uploading";
+      item.progress = 0;
+      let formData = new FormData();
+      formData.append("code", model.value);
+      formData.append("multipartFile", uploadItem2.file, uploadItem2.file.name);
+      httpConfig.http({
+        url: `${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/uploadAttachment`,
+        method: "post",
+        headers: {
+          "Content-Type": "multipart/form-data"
+        },
+        data: formData
+      }).then((res) => {
+        message.EleMessage.success(res.data.message);
+        item.progress = 100;
+        item.status = "done";
+        item.url = res.data.data.fullUrl;
+      }).catch((e) => {
+        item.status = "exception";
+        message.EleMessage.error(e.message);
+      });
+    };
+    const handleEditUpload = ({ item, newItem }) => {
+      if (!checkFile(newItem.file)) {
+        return;
+      }
+      console.log("item", item);
+      console.log("newItem", newItem);
+      newItem.status = "uploading";
+      newItem.progress = 0;
+      let formData = new FormData();
+      formData.append("id", item.id);
+      formData.append("code", model.value);
+      formData.append("multipartFile", newItem.file, newItem.file.name);
+      httpConfig.http({
+        url: `${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/uploadAttachment`,
+        method: "post",
+        headers: {
+          "Content-Type": "multipart/form-data"
+        },
+        data: formData
+      }).then((res) => {
+        message.EleMessage.success(res.data.message);
+        const oldItem = images.value.find((t) => t.key === item.key);
+        if (oldItem) {
+          oldItem.url = void 0;
+          oldItem.name = newItem.name;
+          oldItem.file = newItem.file;
+          oldItem.status = void 0;
+          oldItem.progress = 0;
+        }
+      }).catch((e) => {
+        item.status = "exception";
+        message.EleMessage.error(e.message);
+      });
+    };
+    const handleRemove = (uploadItem2) => {
+      let id = uploadItem2.id;
+      es.ElMessageBox.confirm("确定要删除吗?", "系统提示", { type: "warning", draggable: true }).then(() => {
+        httpConfig.http.get(`${applicationConfig.application.gatewayServerBaseUrl}/framework-api/core/framework-attachment/deleteInfo`, { params: { id } }).then((res) => {
+          message.EleMessage.success(res.data.message);
+          images.value.splice(images.value.indexOf(uploadItem2), 1);
+        });
+      });
+    };
+    const uploadItem = (item) => {
+      item.status = "uploading";
+      if (item.progress == null) {
+        item.progress = 20;
+      }
+      const timer = setInterval(
+        () => {
+          if (Math.round(Math.random() * 10) < 3) {
+            item.status = "exception";
+            message.EleMessage.error("上传失败, 服务器繁忙，请重试");
+            clearInterval(timer);
+            return;
+          }
+          if (item.progress == null) {
+            item.progress = 20;
+          } else {
+            item.progress += 20;
+          }
+          if (item.progress === 100) {
+            item.status = "done";
+            clearInterval(timer);
+            if (checkDone()) {
+              submitForm();
+            }
+          }
+        },
+        Math.round(Math.random() * 2500) + 500
+      );
+    };
+    const checkDone = () => {
+      return !images.value.some((d) => d.status !== "done");
+    };
+    const submitForm = () => {
+      message.EleMessage.success("已全部上传完毕");
+      console.log(JSON.parse(JSON.stringify(images.value)));
+      isLoading.value = false;
+    };
+    return (_ctx, _cache) => {
+      const _component_ele_upload_list = vue.resolveComponent("ele-upload-list");
+      return vue.openBlock(), vue.createElementBlock("div", null, [
+        vue.createVNode(_component_ele_upload_list, {
+          drag: true,
+          tools: true,
+          modelValue: images.value,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => images.value = $event),
+          readonly: isLoading.value,
+          disabled: _ctx.param.type != "edit",
+          sortable: { forceFallback: true },
+          onUpload: handleUpload,
+          onRetry: uploadItem,
+          onRemove: handleRemove,
+          onEditUpload: handleEditUpload
+        }, null, 8, ["modelValue", "readonly", "disabled"])
+      ]);
+    };
+  }
+});
+module.exports = _sfc_main;

package/lib/yu-framework-attachment-image-upload/index.d.ts

@@ -0,0 +1,16 @@
+import { ComponentParam } from '@/model/component/param';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    param: {
+        type: import('vue').PropType<ComponentParam>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    modelValue: import('vue').PropType<any>;
+    param: {
+        type: import('vue').PropType<ComponentParam>;
+        required: true;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;