@web-utils/component 4.0.16 → 5.0.0-beta01

package/chunks/FyUpload.B2QKfTxF.mjs

@@ -0,0 +1,504 @@
+import { t as e } from "./_plugin-vue_export-helper.7vrlOII_.mjs";
+import { f as t, g as n, i as r } from "./util.g-WQEec9.mjs";
+import { n as i, t as a } from "./event.eJ-c1Z3a.mjs";
+import { t as o } from "./packages.BGjydzjm.mjs";
+import { Fragment as s, createBlock as c, createCommentVNode as l, createElementBlock as u, createElementVNode as d, createTextVNode as f, normalizeClass as p, openBlock as m, renderSlot as h, resolveComponent as g, resolveDirective as _, resolveDynamicComponent as v, toDisplayString as y, withCtx as b, withDirectives as x, withModifiers as S } from "vue";
+import { isBlank as C } from "@web-utils/core";
+//#region src/components/fy-from/upload/canvas/index.js
+var w, T, E = {
+	width: 200,
+	height: 200
+}, D = {
+	text: "avueJS",
+	fontFamily: "microsoft yahei",
+	color: "#999",
+	fontSize: 16,
+	opacity: 100,
+	bottom: 10,
+	right: 10,
+	ratio: 1
+};
+function O(e, t) {
+	let n = new FileReader();
+	n.readAsDataURL(e), n.onload = function(e) {
+		t(e.target.result);
+	};
+}
+function k(e, t = {}, n) {
+	let { text: i, fontFamily: a, color: o, fontSize: s, opacity: c, bottom: l, right: u, ratio: d } = t;
+	f(), O(e, p);
+	function f() {
+		D.text = i || D.text, D.fontFamily = a || D.fontFamily, D.color = o || D.color, D.fontSize = s || D.fontSize, D.opacity = c || D.opacity, D.bottom = l || D.bottom, D.right = u || D.right, D.ratio = d || D.ratio;
+	}
+	function p(t) {
+		let i = new Image();
+		i.src = t, i.onload = function() {
+			let t = i.width, a = i.height;
+			m(t, a), T.drawImage(i, 0, 0, t, a), h(t, a);
+			let o = r(document.getElementById("canvas").toDataURL(e.type, D.ratio), e.name);
+			n == null || n(o);
+		};
+	}
+	function m(e, t) {
+		w = document.getElementById("canvas"), w === null && (w = document.createElement("canvas"), w.id = "canvas", w.className = "avue-canvas", document.body.appendChild(w)), T = w.getContext("2d"), w.width = e, w.height = t;
+	}
+	function h(e, t) {
+		let n = D.text, r = g(n, e, t);
+		T.font = `${r.fontSize}px ${D.fontFamily}`, T.fillStyle = D.color, T.globalAlpha = D.opacity / 100, T.fillText(n, r.x, r.y);
+	}
+	function g(e, t, n) {
+		let r, i, a = D.fontSize / E.width * t;
+		i = D.bottom ? E.height - D.bottom : D.top, r = D.right ? E.width - D.right : D.left, T.font = `${D.fontSize}px ${D.fontFamily}`;
+		let o = Number(T.measureText(e).width);
+		r -= o;
+		let s = r / E.width, c = i / E.height;
+		return r = s * t, i = c * n, {
+			x: r,
+			y: i,
+			fontSize: a
+		};
+	}
+}
+//#endregion
+//#region src/components/fy-from/upload/qiniu/index.js
+var A = (e, t, n) => {
+	let r = JSON.stringify(n);
+	if (window.__ENV__ === "development") {
+		var i;
+		(i = console) == null || i.log("put_policy = ", r);
+	}
+	let a = N(j(r));
+	if (window.__ENV__ === "development") {
+		var o;
+		(o = console) == null || o.log("encoded = ", a);
+	}
+	let s = window.CryptoJS.HmacSHA1(a, t).toString(window.CryptoJS.enc.Base64);
+	if (window.__ENV__ === "development") {
+		var c;
+		(c = console) == null || c.log("encoded_signed=", s);
+	}
+	let l = `${e}:${P(s)}:${a}`;
+	if (window.__ENV__ === "development") {
+		var u;
+		(u = console) == null || u.log("upload_token=", l);
+	}
+	return l;
+};
+function j(e) {
+	let t, n, r;
+	t = "";
+	let i = e.length;
+	for (n = 0; n < i; n++) r = e.charCodeAt(n), r >= 1 && r <= 127 ? t += e.charAt(n) : r > 2047 ? (t += String.fromCharCode(224 | r >> 12 & 15), t += String.fromCharCode(128 | r >> 6 & 63), t += String.fromCharCode(128 | r >> 0 & 63)) : (t += String.fromCharCode(192 | r >> 6 & 31), t += String.fromCharCode(128 | r >> 0 & 63));
+	return t;
+}
+var M = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+function N(e) {
+	let t, n, r, i, a, o = e.length;
+	for (n = 0, t = ""; n < o;) {
+		if (r = e.charCodeAt(n++) & 255, n === o) {
+			t += M.charAt(r >> 2), t += M.charAt((r & 3) << 4), t += "==";
+			break;
+		}
+		if (i = e.charCodeAt(n++), n === o) {
+			t += M.charAt(r >> 2), t += M.charAt((r & 3) << 4 | (i & 240) >> 4), t += M.charAt((i & 15) << 2), t += "=";
+			break;
+		}
+		a = e.charCodeAt(n++), t += M.charAt(r >> 2), t += M.charAt((r & 3) << 4 | (i & 240) >> 4), t += M.charAt((i & 15) << 2 | (a & 192) >> 6), t += M.charAt(a & 63);
+	}
+	return t;
+}
+var P = function(e) {
+	return e = e.replace(/\+/g, "-"), e = e.replace(/\//g, "_"), e;
+}, F = (e) => new window.OSS(e);
+//#endregion
+//#region src/components/fy-from/upload/FyUpload.vue
+function I(e, t = "") {
+	return t.match(/(^http:\/\/|^https:\/\/|^\/\/|data:image\/)/) ? t : e + t;
+}
+var L = {
+	name: "FyUpload",
+	mixins: [i, a],
+	props: {
+		qiniu: Object,
+		ali: Object,
+		data: {
+			type: Object,
+			default: () => ({})
+		},
+		showFileList: {
+			type: Boolean,
+			default: !0
+		},
+		fileText: String,
+		fileType: { type: String },
+		oss: { type: String },
+		limit: { type: Number },
+		headers: {
+			type: Object,
+			default: () => ({})
+		},
+		accept: {
+			type: [String, Array],
+			default: ""
+		},
+		canvasOption: {
+			type: Object,
+			default: () => ({})
+		},
+		cropperOption: {
+			type: Object,
+			default: () => ({})
+		},
+		fileSize: { type: Number },
+		dragFile: {
+			type: Boolean,
+			default: !1
+		},
+		drag: {
+			type: Boolean,
+			default: !1
+		},
+		loadText: {
+			type: String,
+			default: "Loading..."
+		},
+		action: {
+			type: String,
+			default: ""
+		},
+		uploadBefore: Function,
+		uploadAfter: Function,
+		uploadDelete: Function,
+		uploadPreview: Function,
+		uploadError: Function,
+		uploadExceed: Function,
+		httpRequest: Function
+	},
+	data() {
+		return {
+			res: "",
+			loading: !1,
+			menu: !1,
+			reload: Math.random()
+		};
+	},
+	computed: {
+		isObject() {
+			return typeof this.text[0] == "object";
+		},
+		acceptList() {
+			return Array.isArray(this.accept) ? this.accept.join(",") : this.accept;
+		},
+		homeUrl() {
+			return this.propsHttp.home || "";
+		},
+		fileName() {
+			return this.propsHttp.fileName || "file";
+		},
+		isAliOss() {
+			return this.oss === "ali";
+		},
+		isQiniuOss() {
+			return this.oss === "qiniu";
+		},
+		isPictureImg() {
+			return this.listType === "picture-img";
+		},
+		imgUrl() {
+			return C(this.text) ? null : I(this.homeUrl, this.text[0]);
+		},
+		fileList() {
+			let e = [];
+			return (this.text || []).forEach((t, n) => {
+				if (t) {
+					let r = this.isObject ? t[this.labelKey] : t.substring(t.lastIndexOf("/") + 1), i = this.isObject ? t[this.valueKey] : t;
+					i = I(this.homeUrl, i), e.push({
+						uid: `${n}`,
+						status: "done",
+						type: this.isMediaType(i),
+						name: r,
+						url: i
+					});
+				}
+			}), e;
+		}
+	},
+	mounted() {
+		this.drag && this.setSort();
+	},
+	methods: {
+		isMediaType(e) {
+			return n(e, this.fileType);
+		},
+		setSort() {
+			if (!window.Sortable) {
+				o.logs("Sortable");
+				return;
+			}
+			let e = this.$el.querySelectorAll(".avue-upload > ul")[0];
+			window.Sortable.create(e, {
+				animation: 100,
+				onEnd: (e) => {
+					let t = this.text.splice(e.oldIndex, 1)[0];
+					this.text.splice(e.newIndex, 0, t), this.reload = Math.random(), this.$nextTick(() => this.setSort());
+				}
+			});
+		},
+		handleSuccess(e) {
+			if (this.isPictureImg) this.text.splice(0, 1, e[this.urlKey]);
+			else if (this.isObject) {
+				let t = {};
+				t[this.labelKey] = e[this.nameKey], t[this.valueKey] = e[this.urlKey], this.text.push(t);
+			} else this.text.push(e[this.urlKey]);
+		},
+		handleRemove(e) {
+			this.beforeRemove(e).then(() => {
+				this.delete(e);
+			});
+		},
+		handleError(e) {
+			var t;
+			(t = this.uploadError) == null || t.call(this, e, this.column);
+		},
+		delete(e) {
+			(this.text || []).forEach((t, n) => {
+				let r = this.isObject ? t[this.valueKey] : t;
+				I(this.homeUrl, r) === e.url && this.text.splice(n, 1);
+			});
+		},
+		show(e) {
+			this.loading = !1, this.res = e || this.res, this.handleSuccess(this.res);
+		},
+		hide(e) {
+			this.loading = !1, e && this.handleError(e);
+		},
+		handleFileChange(e, t) {
+			t.splice(t.length - 1, 1);
+		},
+		httpUpload(e) {
+			if (typeof this.httpRequest == "function") {
+				this.httpRequest(e);
+				return;
+			}
+			this.loading = !0;
+			let r = e.file, i = r.size / 1024;
+			if (!C(i) && i > this.fileSize) {
+				this.hide("文件太大不符合");
+				return;
+			}
+			let a = Object.assign(this.headers, { "Content-Type": "multipart/form-data" }), s = {}, c = {}, l = new FormData(), u = () => {
+				let e = (e) => {
+					let n = this.action;
+					for (let e in this.data) l.append(e, this.data[e]);
+					let i = e || r;
+					if (l.append(this.fileName, i), this.isQiniuOss) {
+						if (!window.CryptoJS) {
+							o.logs("CryptoJS"), this.hide();
+							return;
+						}
+						s = this.qiniu || this.$AVUE.qiniu;
+						let e = A(s.AK, s.SK, {
+							scope: s.scope,
+							deadline: (/* @__PURE__ */ new Date()).getTime() + s.deadline * 3600
+						});
+						l.append("token", e), n = s.bucket;
+					} else if (this.isAliOss) {
+						if (!window.OSS) {
+							o.logs("AliOSS"), this.hide();
+							return;
+						}
+						s = this.ali || this.$AVUE.ali, c = F(s);
+					}
+					(this.isAliOss ? c.put(i.name, i, { headers: this.headers }) : this.$axios.post(n, l, { headers: a })).then((e) => {
+						this.res = {}, this.isQiniuOss && (e.data.key = s.url + e.data.key), this.res = t(this.isAliOss ? e : e.data, this.resKey), typeof this.uploadAfter == "function" ? this.uploadAfter(this.res, this.show, this.hide, this.column) : this.show();
+					}).catch((e) => {
+						this.hide(e);
+					});
+				};
+				typeof this.uploadBefore == "function" ? this.uploadBefore(r, e, this.hide, this.column) : e();
+			};
+			if (n(r.name) !== "img") {
+				u();
+				return;
+			}
+			let d = () => {
+				C(this.canvasOption) ? u() : k(r, this.canvasOption, (e) => {
+					r = e, u();
+				});
+			};
+			C(this.cropperOption) ? d() : O(r, (e) => {
+				let t = Object.assign(this.cropperOption, {
+					img: e,
+					type: "file",
+					callback: (e) => {
+						r = e, d();
+					},
+					cancel: () => {
+						this.loading = !1;
+					}
+				});
+				this.$ImageCropper(t);
+			});
+		},
+		handleExceed(e, t) {
+			var n;
+			(n = this.uploadExceed) == null || n.call(this, this.limit, e, t, this.column);
+		},
+		handlePreview(e) {
+			let t = () => {
+				let t = this.fileList.findIndex((t) => t.url === e.url);
+				this.$ImagePreview(this.fileList, t);
+			};
+			typeof this.uploadPreview == "function" ? this.uploadPreview(e, this.column, t) : t();
+		},
+		handleDelete(e) {
+			this.beforeRemove(e).then(() => {
+				this.text = [], this.menu = !1;
+			});
+		},
+		beforeRemove(e) {
+			return typeof this.uploadDelete == "function" ? this.uploadDelete(e, this.column) : Promise.resolve();
+		}
+	}
+}, R = ["element-loading-text"], z = {
+	key: 0,
+	class: "el-icon-plus"
+}, B = {
+	key: 2,
+	class: "el-icon-plus avue-upload__avatar"
+}, V = { class: "el-upload__text" }, H = ["innerHTML"], U = { key: 1 }, W = {
+	key: 1,
+	class: "avue-upload__avatar el-icon-document"
+}, G = { class: "el-upload-list__item-actions" }, K = { class: "el-upload-list__item-preview" }, q = ["onClick"], J = { class: "el-upload-list__item-delete" }, Y = ["onClick"], X = ["onClick"], Z = { class: "el-upload-list__item-name" }, Q = ["onClick"], $ = ["onClick"], ee = { class: "el-upload-list__item-name" }, te = ["onClick"];
+function ne(e, t, n, r, i, a) {
+	let o = g("ElButton"), C = g("ElUpload"), w = _("loading");
+	return x((m(), u("div", {
+		class: "avue-upload",
+		"element-loading-text": n.loadText
+	}, [(m(), c(C, {
+		key: i.reload,
+		class: p({
+			"avue-upload--list": e.listType === "picture-img",
+			"avue-upload--upload": e.disabled
+		}),
+		action: n.action,
+		"on-remove": a.handleRemove,
+		accept: a.acceptList,
+		"before-remove": a.beforeRemove,
+		multiple: e.multiple,
+		"on-preview": a.handlePreview,
+		limit: n.limit,
+		"http-request": a.httpUpload,
+		readonly: e.readonly,
+		drag: n.dragFile,
+		"show-file-list": a.isPictureImg ? !1 : n.showFileList,
+		"list-type": e.listType,
+		"on-change": a.handleFileChange,
+		"on-exceed": a.handleExceed,
+		disabled: e.disabled,
+		"file-list": a.fileList,
+		onClick: e.handleClick
+	}, {
+		tip: b(() => [d("div", {
+			class: "el-upload__tip",
+			innerHTML: e.tip
+		}, null, 8, H)]),
+		file: b(({ file: n }) => [e.$slots.default ? h(e.$slots, "default", {
+			key: 0,
+			file: n
+		}) : e.listType === "picture-card" ? (m(), u("span", U, [a.isMediaType(n.url) ? (m(), c(v(n.type), {
+			key: 0,
+			class: "el-upload-list__item-thumbnail",
+			src: n.url
+		}, null, 8, ["src"])) : (m(), u("i", W)), d("span", G, [d("span", K, [d("i", {
+			class: "el-icon-zoom-in",
+			onClick: S((e) => a.handlePreview(n), ["stop"])
+		}, null, 8, q)]), d("span", J, [e.disabled ? l("v-if", !0) : (m(), u("i", {
+			key: 0,
+			class: "el-icon-delete",
+			onClick: S((e) => a.handleRemove(n), ["stop"])
+		}, null, 8, Y))])])])) : e.listType === "picture" ? (m(), u("span", {
+			key: 2,
+			onClick: S((e) => a.handlePreview(n), ["stop"])
+		}, [
+			(m(), c(v(n.type), {
+				class: "el-upload-list__item-thumbnail",
+				src: n.url
+			}, null, 8, ["src"])),
+			d("a", Z, [t[8] || (t[8] = d("i", { class: "el-icon-document" }, null, -1)), f(" " + y(n.name), 1)]),
+			d("i", {
+				class: "el-icon-close",
+				onClick: S((e) => a.handleRemove(n), ["stop"])
+			}, null, 8, Q)
+		], 8, X)) : (m(), u("span", {
+			key: 3,
+			onClick: S((e) => a.handlePreview(n), ["stop"])
+		}, [d("a", ee, [t[9] || (t[9] = d("i", { class: "el-icon-document" }, null, -1)), f(" " + y(n.name), 1)]), e.disabled ? l("v-if", !0) : (m(), u("i", {
+			key: 0,
+			class: "el-icon-close",
+			onClick: S((e) => a.handleRemove(n), ["stop"])
+		}, null, 8, te))], 8, $))]),
+		default: b(() => [e.listType === "picture-card" ? (m(), u("i", z)) : e.listType === "picture-img" ? (m(), u(s, { key: 1 }, [e.$slots.default ? h(e.$slots, "default", {
+			key: 0,
+			file: { url: a.imgUrl }
+		}) : (m(), u(s, { key: 1 }, [a.isMediaType(a.imgUrl) ? (m(), c(v(a.isMediaType(a.imgUrl)), {
+			key: 0,
+			src: a.imgUrl,
+			class: "avue-upload__avatar",
+			onMouseover: t[0] || (t[0] = (e) => i.menu = !0)
+		}, null, 40, ["src"])) : a.imgUrl ? (m(), u("i", {
+			key: 1,
+			class: "avue-upload__avatar el-icon-document",
+			onMouseover: t[1] || (t[1] = (e) => i.menu = !0)
+		}, null, 32)) : (m(), u("i", B)), i.menu ? (m(), u("div", {
+			key: 3,
+			class: "el-upload-list__item-actions avue-upload__menu",
+			onMouseover: t[4] || (t[4] = (e) => i.menu = !0),
+			onMouseout: t[5] || (t[5] = (e) => i.menu = !1),
+			onClick: t[6] || (t[6] = S(() => {}, ["stop"]))
+		}, [d("i", {
+			class: "el-icon-zoom-in",
+			onClick: t[2] || (t[2] = S((e) => a.handlePreview({ url: a.imgUrl }), ["stop"]))
+		}), e.disabled ? l("v-if", !0) : (m(), u("i", {
+			key: 0,
+			class: "el-icon-delete",
+			onClick: t[3] || (t[3] = S((e) => a.handleDelete(a.imgUrl), ["stop"]))
+		}))], 32)) : l("v-if", !0)], 64))], 64)) : n.dragFile ? (m(), u(s, { key: 2 }, [t[7] || (t[7] = d("i", { class: "el-icon-upload" }, null, -1)), d("div", V, [d("em", null, y(n.fileText || "上传"), 1)])], 64)) : (m(), c(o, {
+			key: 3,
+			icon: "el-icon-upload",
+			size: e.size,
+			type: "primary"
+		}, {
+			default: b(() => [f(y(n.fileText || "上传"), 1)]),
+			_: 1
+		}, 8, ["size"]))]),
+		_: 3
+	}, 8, [
+		"class",
+		"action",
+		"on-remove",
+		"accept",
+		"before-remove",
+		"multiple",
+		"on-preview",
+		"limit",
+		"http-request",
+		"readonly",
+		"drag",
+		"show-file-list",
+		"list-type",
+		"on-change",
+		"on-exceed",
+		"disabled",
+		"file-list",
+		"onClick"
+	]))], 8, R)), [[
+		w,
+		i.loading,
+		void 0,
+		{ lock: !0 }
+	]]);
+}
+var re = /* @__PURE__ */ e(L, [["render", ne]]);
+//#endregion
+export { re as t };