@form-create/component-ivu-frame
Version:
@form-create/iview 内置组件
443 lines (442 loc) • 12.6 kB
JavaScript
/*!
* FormCreate 低代码表单渲染器
* @form-create/component-ivu-frame 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 e=document.createElement("style");e.appendChild(document.createTextNode("._fc-frame .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-frame .fc-upload-cover{opacity:0;position:absolute;inset:0;background:#0009;transition:opacity .3s}._fc-frame .fc-upload-cover i{color:#fff;font-size:20px;cursor:pointer;margin:0 2px}._fc-frame .fc-files:hover .fc-upload-cover{opacity:1}._fc-frame .ivu-upload-list{margin-top:0}._fc-frame .fc-files img{width:100%;height:100%;display:inline-block;vertical-align:top}._fc-frame .fc-upload-btn,._fc-frame .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;box-shadow:2px 2px 5px #0000001a;margin-right:4px;box-sizing:border-box}")),document.head.appendChild(e)}}catch(i){console.error("vite-plugin-css-injected-by-js",i)}})();
var k = Object.defineProperty;
var u = Object.getOwnPropertySymbols;
var g = Object.prototype.hasOwnProperty, v = Object.prototype.propertyIsEnumerable;
var d = (s, e, t) => e in s ? k(s, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[e] = t, p = (s, e) => {
for (var t in e || (e = {}))
g.call(e, t) && d(s, t, e[t]);
if (u)
for (var t of u(e))
v.call(e, t) && d(s, t, e[t]);
return s;
};
function I(s) {
return s && s.__esModule && Object.prototype.hasOwnProperty.call(s, "default") ? s.default : s;
}
function f() {
return f = Object.assign ? Object.assign.bind() : function(s) {
for (var e, t = 1; t < arguments.length; t++) for (var i in e = arguments[t], e) Object.prototype.hasOwnProperty.call(e, i) && (s[i] = e[i]);
return s;
}, f.apply(this, arguments);
}
var $ = ["attrs", "props", "domProps"], w = ["class", "style", "directives"], B = ["on", "nativeOn"], O = function(s) {
return s.reduce(function(e, t) {
for (var i in t) if (!e[i]) e[i] = t[i];
else if ($.indexOf(i) !== -1) e[i] = f({}, e[i], t[i]);
else if (w.indexOf(i) !== -1) {
var o = e[i] instanceof Array ? e[i] : [e[i]], h = t[i] instanceof Array ? t[i] : [t[i]];
e[i] = [].concat(o, h);
} else if (B.indexOf(i) !== -1)
for (var n in t[i]) if (e[i][n]) {
var l = e[i][n] instanceof Array ? e[i][n] : [e[i][n]], c = t[i][n] instanceof Array ? t[i][n] : [t[i][n]];
e[i][n] = [].concat(l, c);
} else e[i][n] = t[i][n];
else if (i === "hook") for (var r in t[i]) e[i][r] = e[i][r] ? M(e[i][r], t[i][r]) : t[i][r];
else e[i] = t[i];
return e;
}, {});
}, M = function(s, e) {
return function() {
s && s.apply(this, arguments), e && e.apply(this, arguments);
};
}, S = O;
const a = /* @__PURE__ */ I(S);
function m(s) {
return Array.isArray(s) ? s : [null, void 0, ""].indexOf(s) > -1 ? [] : [s];
}
const L = "fcFrame";
function y(s) {
return {
name: L,
props: {
formCreateInject: {
type: Object,
required: !0
},
type: {
type: String,
default: "input"
},
field: String,
helper: {
type: Boolean,
default: !0
},
disabled: {
type: Boolean,
default: !1
},
src: {
type: String,
required: !0
},
icon: {
type: String,
default: s.fileUpIcon
},
width: {
type: [Number, String],
default: 500
},
height: {
type: String,
default: "370px"
},
maxLength: {
type: Number,
default: 0
},
okBtnText: {
type: String,
default: "确定"
},
closeBtnText: {
type: String,
default: "关闭"
},
modalTitle: String,
handleIcon: {
type: [String, Boolean],
default: void 0
},
title: String,
allowRemove: {
type: Boolean,
default: !0
},
onOpen: {
type: Function,
default: () => {
}
},
onOk: {
type: Function,
default: () => {
}
},
onCancel: {
type: Function,
default: () => {
}
},
onLoad: {
type: Function,
default: () => {
}
},
onBeforeRemove: {
type: Function,
default: () => {
}
},
onRemove: {
type: Function,
default: () => {
}
},
onHandle: {
type: Function,
default(e) {
this.previewImage = this.getSrc(e), this.previewVisible = !0;
}
},
modal: {
type: Object,
default: () => ({})
},
srcKey: {
type: [String, Number]
},
value: [Array, String, Number, Object],
previewMask: void 0,
footer: {
type: Boolean,
default: !0
},
reload: {
type: Boolean,
default: !0
},
closeBtn: {
type: Boolean,
default: !0
},
okBtn: {
type: Boolean,
default: !0
}
},
data() {
return {
fileList: m(this.value),
previewVisible: !1,
frameVisible: !1,
previewImage: ""
};
},
watch: {
value(e) {
this.fileList = m(e);
},
fileList(e) {
const t = this.maxLength === 1 ? e[0] || "" : e;
this.$emit("input", t), this.$emit("change", t);
},
src(e) {
this.modalVm && (this.modalVm.src = e);
}
},
methods: {
key(e) {
return e;
},
closeModel(e) {
this.$emit(e ? "$close" : "$ok"), this.reload && (this.$off("$ok"), this.$off("$close")), this.frameVisible = !1;
},
showModel() {
this.disabled || this.onOpen() === !1 || (this.frameVisible = !0);
},
makeInput() {
const e = this.$createElement, t = {
type: "text",
value: this.fileList.map((i) => this.getSrc(i)).toString(),
icon: this.icon,
readonly: !0,
clearable: !1
};
return e("Input", a([{}, {
props: t
}, {}, {
on: {
"on-click": () => this.showModel()
}
}, {
key: this.key("input")
}]));
},
makeGroup(e) {
const t = this.$createElement;
return (!this.maxLength || this.fileList.length < this.maxLength) && e.push(this.makeBtn()), t("div", {
key: this.key("group")
}, [...e]);
},
makeItem(e, t) {
const i = this.$createElement;
return i("div", {
class: "fc-files",
key: this.key("file" + e)
}, [...t]);
},
valid(e) {
const t = this.formCreateInject.field || this.field;
if (t && e !== t) throw new Error("[frame]无效的字段值");
},
makeIcons(e, t) {
const i = this.$createElement;
if (this.handleIcon !== !1 || this.allowRemove === !0) {
const o = [];
return (this.type !== "file" && this.handleIcon !== !1 || this.type === "file" && this.handleIcon) && o.push(this.makeHandleIcon(e, t)), this.allowRemove && o.push(this.makeRemoveIcon(e, t)), i("div", {
class: "fc-upload-cover",
key: this.key("uc")
}, [o]);
}
},
makeHandleIcon(e, t) {
const i = this.$createElement;
return i("icon", a([{}, {
props: {
type: this.handleIcon === !0 || this.handleIcon === void 0 ? "ios-eye-outline" : this.handleIcon
}
}, {
on: {
click: () => this.handleClick(e)
},
key: this.key("hi" + t)
}]));
},
makeRemoveIcon(e, t) {
const i = this.$createElement;
return i("icon", a([{}, {
props: {
type: "ios-trash-outline"
}
}, {
on: {
click: () => this.handleRemove(e)
},
key: this.key("ri" + t)
}]));
},
makeFiles() {
const e = this.$createElement;
return this.makeGroup(this.fileList.map((t, i) => this.makeItem(i, [e("icon", a([{}, {
props: {
type: s.fileIcon,
size: 40
}
}, {
on: {
click: () => this.handleClick(t)
}
}])), this.makeIcons(t, i)])));
},
makeImages() {
const e = this.$createElement;
return this.makeGroup(this.fileList.map((t, i) => this.makeItem(i, [e("img", {
attrs: {
src: this.getSrc(t)
}
}), this.makeIcons(t, i)])));
},
makeBtn() {
const e = this.$createElement;
return e("div", {
class: "fc-upload-btn",
on: {
click: () => this.showModel()
},
key: this.key("btn")
}, [e("icon", a([{}, {
props: {
type: this.icon,
size: 20
}
}]))]);
},
handleClick(e) {
return this.onHandle(e);
},
handleRemove(e) {
this.disabled || this.onBeforeRemove(e) !== !1 && (this.fileList.splice(this.fileList.indexOf(e), 1), this.onRemove(e));
},
getSrc(e) {
return this.srcKey ? e[this.srcKey] : e;
},
frameLoad(e) {
this.onLoad(e);
try {
this.helper === !0 && (e.form_create_helper = {
api: this.formCreateInject.api,
close: (t) => {
this.valid(t), this.closeModel();
},
set: (t, i) => {
this.valid(t), this.disabled || this.$emit("input", i);
},
get: (t) => (this.valid(t), this.value),
onOk: (t) => this.$on("$ok", t),
onClose: (t) => this.$on("$close", t)
});
} catch (t) {
console.log(t);
}
},
makeFooter() {
const e = this.$createElement, {
okBtnText: t,
closeBtnText: i,
closeBtn: o,
okBtn: h,
footer: n
} = this.$props, l = [];
return n && (o && l.push(e("Button", {
on: {
click: () => this.onCancel() !== !1 && this.closeModel(!0)
}
}, [i])), h && l.push(e("Button", {
attrs: {
type: "primary"
},
on: {
click: () => this.onOk() !== !1 && this.closeModel()
}
}, [t]))), l;
}
},
render() {
const e = arguments[0], t = this.type;
let i;
t === "input" ? i = this.makeInput() : t === "image" ? i = this.makeImages() : i = this.makeFiles();
const {
width: o,
height: h,
src: n,
title: l,
modalTitle: c
} = this.$props;
return this.$nextTick(() => {
this.$refs.frame && this.frameLoad(this.$refs.frame.contentWindow || {});
}), e("div", {
class: "_fc-frame"
}, [i, e("Modal", a([{}, {
props: {
mask: this.previewMask,
title: c,
footerHide: !0
}
}, {
model: {
value: this.previewVisible,
callback: (r) => {
this.previewVisible = r;
}
}
}]), [e("img", {
style: "width: 100%",
attrs: {
src: this.previewImage
}
})]), e("Modal", a([{}, {
props: p({
width: o,
title: l
}, this.modal)
}, {
on: {
"on-cancel": () => this.closeModel(!0)
},
model: {
value: this.frameVisible,
callback: (r) => {
this.frameVisible = r;
}
}
}]), [this.frameVisible || !this.reload ? e("iframe", {
ref: "frame",
attrs: {
src: n,
frameBorder: "0"
},
style: {
height: h,
border: "0 none",
width: "100%"
}
}) : null, e("div", {
slot: "footer"
}, [this.makeFooter()])])]);
},
mounted() {
this.$on("fc.closeModal", this.closeModal);
}
};
}
const F = y({
fileIcon: "md-document",
fileUpIcon: "ios-folder-open"
});
F.v2 = y({
fileIcon: "document-text",
fileUpIcon: "folder"
});
export {
F as default
};