@form-create/component-elm-upload
Version:
@form-create/element-ui 内置组件
244 lines (243 loc) • 8.48 kB
JavaScript
/*!
* FormCreate 低代码表单渲染器
* @form-create/component-elm-upload v2.6.3
* (c) 2018-2024 xaboy
* Github https://github.com/xaboy/form-create
* Site https://form-create.com/
* Released under the MIT License.
*/
(function(){"use strict";try{if(typeof document!="undefined"){var o=document.createElement("style");o.appendChild(document.createTextNode("._fc-upload .fc-files img{width:100%;height:100%;display:inline-block;vertical-align:top}._fc-upload .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-upload .fc-upload-cover{opacity:0;position:absolute;inset:0;background:#0009;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-upload .fc-upload-cover i{color:#fff;font-size:20px;cursor:pointer;margin:0 2px}._fc-upload .fc-files:hover .fc-upload-cover{opacity:1}._fc-upload .el-upload{display:block}._fc-upload .fc-upload-btn,._fc-upload .fc-files{display:inline-block;width:58px;height:58px;text-align:center;line-height:58px;border:1px solid #c0ccda;border-radius:4px;overflow:hidden;background:#fff;position:relative;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px #0000001a;margin-right:4px;-webkit-box-sizing:border-box;box-sizing:border-box}")),document.head.appendChild(o)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
function f(e) {
return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
}
function n() {
return n = Object.assign ? Object.assign.bind() : function(e) {
for (var t, i = 1; i < arguments.length; i++) for (var s in t = arguments[i], t) Object.prototype.hasOwnProperty.call(t, s) && (e[s] = t[s]);
return e;
}, n.apply(this, arguments);
}
var m = ["attrs", "props", "domProps"], y = ["class", "style", "directives"], g = ["on", "nativeOn"], k = function(e) {
return e.reduce(function(t, i) {
for (var s in i) if (!t[s]) t[s] = i[s];
else if (m.indexOf(s) !== -1) t[s] = n({}, t[s], i[s]);
else if (y.indexOf(s) !== -1) {
var h = t[s] instanceof Array ? t[s] : [t[s]], u = i[s] instanceof Array ? i[s] : [i[s]];
t[s] = [].concat(h, u);
} else if (g.indexOf(s) !== -1)
for (var r in i[s]) if (t[s][r]) {
var d = t[s][r] instanceof Array ? t[s][r] : [t[s][r]], c = i[s][r] instanceof Array ? i[s][r] : [i[s][r]];
t[s][r] = [].concat(d, c);
} else t[s][r] = i[s][r];
else if (s === "hook") for (var o in i[s]) t[s][o] = t[s][o] ? v(t[s][o], i[s][o]) : i[s][o];
else t[s] = i[s];
return t;
}, {});
}, v = function(e, t) {
return function() {
e && e.apply(this, arguments), t && t.apply(this, arguments);
};
}, I = k;
const l = /* @__PURE__ */ f(I);
function a(e) {
return Array.isArray(e) ? e : [null, void 0, ""].indexOf(e) > -1 ? [] : [e];
}
function w(e, t) {
return Object.keys(e).reduce((i, s) => ((!t || t.indexOf(s) === -1) && i.push(e[s]), i), []);
}
function p(e, t) {
return {
url: e,
name: $(e),
uid: t
};
}
function $(e) {
return ("" + e).split("/").pop();
}
const F = "fcUpload", j = {
name: F,
props: {
formCreateInject: {
type: Object,
required: !0
},
onHandle: {
type: Function,
default(e) {
this.previewImage = e.url, this.previewVisible = !0;
}
},
uploadType: {
type: String,
default: "file"
},
limit: {
type: Number,
default: 0
},
allowRemove: {
type: Boolean,
default: !0
},
previewMask: void 0,
modalTitle: String,
handleIcon: {
type: [String, Boolean],
default: () => {
}
},
value: [Array, String]
},
data() {
return {
uploadList: [],
previewVisible: !1,
previewImage: "",
cacheFiles: []
};
},
created() {
this.formCreateInject.prop.props.showFileList === void 0 && (this.formCreateInject.prop.props.showFileList = !1), this.formCreateInject.prop.props.fileList = a(this.value).map(p);
},
watch: {
value(e) {
this.$refs.upload.uploadFiles.every((t) => !t.status || t.status === "success") && (this.$refs.upload.uploadFiles = a(e).map(p), this.uploadList = this.$refs.upload.uploadFiles);
},
limit(e, t) {
(t === 1 || e === 1) && this.update();
}
},
methods: {
key(e) {
return e;
},
isDisabled() {
return this.formCreateInject.prop.props.disabled === !0;
},
onRemove(e) {
this.isDisabled() || this.$refs.upload.handleRemove(e);
},
handleClick(e) {
this.onHandle(e);
},
makeItem(e, t) {
const i = this.$createElement;
return this.uploadType === "image" ? i("img", {
attrs: {
src: e.url
},
key: this.key("img" + t)
}) : i("i", {
class: "el-icon-tickets",
key: this.key("i" + t)
});
},
makeRemoveIcon(e, t) {
const i = this.$createElement;
return i("i", {
class: "el-icon-delete",
on: {
click: () => this.onRemove(e)
},
key: this.key("ri" + t)
});
},
makeHandleIcon(e, t) {
const i = this.$createElement;
return i("i", {
class: this.handleIcon === !0 || this.handleIcon === void 0 ? "el-icon-view" : this.handleIcon,
on: {
click: () => this.handleClick(e)
},
key: this.key("hi" + t)
});
},
makeProgress(e, t) {
const i = this.$createElement;
return i("ElProgress", l([{}, {
props: {
percentage: e.percentage,
type: "circle",
width: 52
}
}, {
style: "margin-top:2px;",
key: this.key("pg" + t)
}]));
},
makeIcons(e, t) {
const i = this.$createElement, s = [];
if (this.allowRemove || this.handleIcon !== !1)
return (this.uploadType !== "file" && this.handleIcon !== !1 || this.uploadType === "file" && this.handleIcon) && s.push(this.makeHandleIcon(e, t)), this.allowRemove && s.push(this.makeRemoveIcon(e, t)), i("div", {
class: "fc-upload-cover"
}, [s]);
},
makeFiles() {
const e = this.$createElement;
return this.uploadList.map((t, i) => this.$scopedSlots.fileList ? this.$scopedSlots.fileList({
file: t,
index: i,
vm: this
}) : e("div", {
key: this.key(i),
class: "fc-files"
}, [t.percentage !== void 0 && t.status !== "success" ? this.makeProgress(t, i) : [this.makeItem(t, i), this.makeIcons(t, i)]]));
},
makeUpload() {
const e = this.$createElement, t = !this.limit || this.limit > this.uploadList.length;
return e("ElUpload", l([{}, this.formCreateInject.prop, {}, {
style: {
display: "inline-block"
},
key: this.key("upload"),
ref: "upload"
}]), [t ? e("template", {
slot: "default"
}, [this.$slots.default || e("div", {
class: "fc-upload-btn"
}, [e("i", {
class: "el-icon-upload2"
})])]) : null, w(this.$slots, ["default"])]);
},
update() {
let e = this.$refs.upload.uploadFiles.map((t) => t.url).filter((t) => t !== void 0 && t.indexOf("blob:") !== 0);
JSON.stringify(e) !== JSON.stringify(this.cacheFiles) && (this.cacheFiles = [...e], this.$emit("input", this.limit === 1 ? e[0] || "" : e));
},
handleCancel() {
this.previewVisible = !1;
}
},
render() {
const e = arguments[0];
return this.$refs.upload && (this.formCreateInject.prop.props.showFileList === void 0 && (this.formCreateInject.prop.props.showFileList = this.$refs.upload.showFileList), this.formCreateInject.prop.props.fileList = this.$refs.upload.fileList), e("div", {
class: "_fc-upload"
}, [[this.formCreateInject.prop.props.showFileList ? [] : this.makeFiles(), this.makeUpload()], e("el-dialog", l([{}, {
props: {
appendToBody: !0,
modal: this.previewMask,
title: this.modalTitle,
visible: this.previewVisible
}
}, {
on: {
close: this.handleCancel
}
}]), [e("img", {
attrs: {
alt: "example",
src: this.previewImage
},
style: "width: 100%"
})])]);
},
mounted() {
this.uploadList = this.$refs.upload.uploadFiles, this.$watch(() => this.$refs.upload.uploadFiles, () => {
this.update();
}, {
deep: !0
}), this.$emit("fc.el", this.$refs.upload);
}
};
export {
j as default
};