@form-create/ant-design-vue
Version:
ant-design-vue动态表单|form-create is a form generation component that can generate dynamic rendering, data collection, verification and submission functions through JSON. Supports 3 UI frameworks, and supports the generation of any Vue components. Built-in 2
1,740 lines (1,586 loc) • 161 kB
JavaScript
/*!
* @form-create/ant-design-vue v2.5.11
* (c) 2018-2021 xaboy
* Github https://github.com/xaboy/form-create
* Released under the MIT License.
*/
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('moment')) :
typeof define === 'function' && define.amd ? define(['exports', 'vue', 'moment'], factory) :
(global = global || self, factory(global.formCreate = {}, global.Vue, global.moment));
}(this, (function (exports, Vue, moment) { 'use strict';
Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;
moment = moment && Object.prototype.hasOwnProperty.call(moment, 'default') ? moment['default'] : moment;
function _extends() {
return _extends = Object.assign || function (a) {
for (var b, c = 1; c < arguments.length; c++) {
for (var d in b = arguments[c], b) {
Object.prototype.hasOwnProperty.call(b, d) && (a[d] = b[d]);
}
}
return a;
}, _extends.apply(this, arguments);
}
var normalMerge = ["attrs", "props", "domProps"],
toArrayMerge = ["class", "style", "directives"],
functionalMerge = ["on", "nativeOn"],
mergeJsxProps = function mergeJsxProps(a) {
return a.reduce(function (c, a) {
for (var b in a) {
if (!c[b]) c[b] = a[b];else if (-1 !== normalMerge.indexOf(b)) c[b] = _extends({}, c[b], a[b]);else if (-1 !== toArrayMerge.indexOf(b)) {
var d = c[b] instanceof Array ? c[b] : [c[b]],
e = a[b] instanceof Array ? a[b] : [a[b]];
c[b] = d.concat(e);
} else if (-1 !== functionalMerge.indexOf(b)) {
for (var f in a[b]) {
if (c[b][f]) {
var g = c[b][f] instanceof Array ? c[b][f] : [c[b][f]],
h = a[b][f] instanceof Array ? a[b][f] : [a[b][f]];
c[b][f] = g.concat(h);
} else c[b][f] = a[b][f];
}
} else if ("hook" == b) for (var i in a[b]) {
c[b][i] = c[b][i] ? mergeFn(c[b][i], a[b][i]) : a[b][i];
} else c[b] = a[b];
}
return c;
}, {});
},
mergeFn = function mergeFn(a, b) {
return function () {
a && a.apply(this, arguments), b && b.apply(this, arguments);
};
};
var helper = mergeJsxProps;
function _typeof(obj) {
"@babel/helpers - typeof";
if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
_typeof = function (obj) {
return typeof obj;
};
} else {
_typeof = function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
}
return _typeof(obj);
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
value: value,
enumerable: true,
configurable: true,
writable: true
});
} else {
obj[key] = value;
}
return obj;
}
function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};
if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}
return target;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function");
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
writable: true,
configurable: true
}
});
if (superClass) _setPrototypeOf(subClass, superClass);
}
function _getPrototypeOf(o) {
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
return o.__proto__ || Object.getPrototypeOf(o);
};
return _getPrototypeOf(o);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
return true;
} catch (e) {
return false;
}
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
function _possibleConstructorReturn(self, call) {
if (call && (typeof call === "object" || typeof call === "function")) {
return call;
}
return _assertThisInitialized(self);
}
function _createSuper(Derived) {
var hasNativeReflectConstruct = _isNativeReflectConstruct();
return function _createSuperInternal() {
var Super = _getPrototypeOf(Derived),
result;
if (hasNativeReflectConstruct) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}
function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}
function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}
function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}
function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
return arr2;
}
function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}
function toString(val) {
return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
}
function $set(target, field, value) {
Vue.set(target, field, value);
}
function $del(target, field) {
Vue["delete"](target, field);
}
var is = {
type: function type(arg, _type) {
return Object.prototype.toString.call(arg) === '[object ' + _type + ']';
},
Undef: function Undef(v) {
return v === undefined || v === null;
},
Element: function Element(arg) {
return _typeof(arg) === 'object' && arg !== null && arg.nodeType === 1 && !is.Object(arg);
},
trueArray: function trueArray(data) {
return Array.isArray(data) && data.length > 0;
}
};
['Date', 'Object', 'Function', 'String', 'Boolean', 'Array', 'Number'].forEach(function (t) {
is[t] = function (arg) {
return is.type(arg, t);
};
});
function hasProperty(rule, k) {
return {}.hasOwnProperty.call(rule, k);
}
function deepExtend(origin) {
var target = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var mode = arguments.length > 2 ? arguments[2] : undefined;
var isArr = false;
for (var key in target) {
if (Object.prototype.hasOwnProperty.call(target, key)) {
var clone = target[key];
if ((isArr = Array.isArray(clone)) || is.Object(clone)) {
var nst = origin[key] === undefined;
if (isArr) {
isArr = false;
nst && $set(origin, key, []);
} else if (clone._clone && mode !== undefined) {
if (mode) {
clone = clone.getRule();
nst && $set(origin, key, {});
} else {
$set(origin, key, clone._clone());
continue;
}
} else {
nst && $set(origin, key, {});
}
origin[key] = deepExtend(origin[key], clone, mode);
} else if (is.Undef(clone)) {
$set(origin, key, clone);
} else if (clone.__json !== undefined) {
$set(origin, key, clone.__json);
} else if (clone.__origin !== undefined) {
$set(origin, key, clone.__origin);
} else {
$set(origin, key, clone);
}
}
}
return mode !== undefined && Array.isArray(origin) ? origin.filter(function (v) {
return !v || !v.__ctrl;
}) : origin;
}
function deepCopy(value) {
return deepExtend({}, {
value: value
}).value;
}
function toArray(value) {
return Array.isArray(value) ? value : [null, undefined, ''].indexOf(value) > -1 ? [] : [value];
}
function getSlot(slots, exclude) {
return Object.keys(slots).reduce(function (lst, name) {
if (!exclude || exclude.indexOf(name) === -1) {
lst.push(slots[name]);
}
return lst;
}, []);
}
var parseFile = function parseFile(file, uid) {
return {
url: file,
name: getFileName(file),
status: 'done',
uid: uid + 1
};
},
getFileName = function getFileName(file) {
return toString(file).split('/').pop();
},
parseUpload = function parseUpload(file) {
return {
url: file.url,
file: file
};
};
var NAME = 'fcUpload';
var Upload = {
name: NAME,
formCreateParser: {
toFormValue: function toFormValue(value) {
return toArray(value);
},
toValue: function toValue(formValue, ctx) {
return ctx.prop.props.limit === 1 ? formValue[0] || '' : formValue;
}
},
props: {
limit: {
type: Number,
"default": 0
},
formCreateInject: {
type: Object,
required: true
},
value: {
type: Array,
"default": function _default() {
return [];
}
},
onSuccess: {
type: Function,
required: true
},
onHandle: {
type: Function,
"default": function _default(file) {
this.previewImage = file.url;
this.previewVisible = true;
}
},
modalTitle: String,
previewMask: undefined
},
data: function data() {
var fileList = this.value.map(parseFile);
return {
defaultUploadList: fileList,
previewImage: '',
previewVisible: false,
uploadList: fileList.map(parseUpload)
};
},
watch: {
value: function value(n) {
var fileList = n.map(parseFile);
this.$refs.upload.sFileList = fileList;
this.uploadList = fileList.map(parseUpload);
}
},
methods: {
handleChange: function handleChange(_ref) {
var file = _ref.file,
fileList = _ref.fileList;
var list = this.uploadList;
if (file.status === 'done') {
this.onSuccess(file, fileList);
if (file.url) list.push({
url: file.url,
file: fileList[fileList.length - 1]
});
this.input();
} else if (file.status === 'removed') {
list.forEach(function (v, i) {
if (v.file === file) {
list.splice(i, 1);
}
});
this.input();
}
},
input: function input() {
this.$emit('input', this.uploadList.map(function (v) {
return v.url;
}));
}
},
render: function render() {
var _this = this;
var h = arguments[0];
var isShow = !this.limit || this.limit > this.uploadList.length;
var ctx = _objectSpread2({}, this.formCreateInject.prop);
ctx.on = deepExtend({}, ctx.on || {});
return h("div", [h("AUpload", helper([{}, ctx, {
"on": {
"preview": this.onHandle.bind(this),
"change": this.handleChange
},
"ref": "upload",
"attrs": {
"defaultFileList": this.defaultUploadList
}
}]), [isShow ? h("template", {
"slot": "default"
}, [this.$slots["default"] || h("AIcon", {
"attrs": {
"type": "plus"
}
})]) : null, getSlot(this.$slots, ['default'])]), h("aModal", {
"attrs": {
"mask": this.previewMask,
"title": this.modalTitle,
"footer": null
},
"model": {
value: _this.previewVisible,
callback: function callback($$v) {
_this.previewVisible = $$v;
}
}
}, [h("img", {
"style": "width: 100%",
"attrs": {
"src": this.previewImage
}
})])]);
}
};
function styleInject(css, ref) {
if (ref === void 0) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') {
return;
}
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = "._fc-frame .fc-files img {\n width: 100%;\n height: 100%;\n display: inline-block;\n vertical-align: top;\n}\n\n._fc-frame .fc-upload-cover {\n opacity: 0;\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background: rgba(0, 0, 0, .6);\n transition: opacity .3s;\n}\n\n._fc-frame .fc-upload-cover i {\n color: #fff;\n font-size: 20px;\n cursor: pointer;\n margin: 0 2px;\n}\n\n._fc-frame .fc-files:hover .fc-upload-cover {\n opacity: 1;\n}\n\n._fc-frame .ant-upload {\n display: block;\n}\n\n._fc-frame .fc-upload-btn, .fc-files {\n display: inline-block;\n width: 104px;\n height: 104px;\n text-align: center;\n line-height: 104px;\n border: 1px solid #c0ccda;\n border-radius: 4px;\n overflow: hidden;\n background: #fff;\n position: relative;\n box-shadow: 2px 2px 5px rgba(0, 0, 0, .1);\n margin-right: 4px;\n box-sizing: border-box;\n}\n";
styleInject(css_248z);
var NAME$1 = 'fcFrame';
var Frame = {
name: NAME$1,
props: {
formCreateInject: {
type: Object,
required: true
},
type: {
type: String,
"default": 'input'
},
field: String,
helper: {
type: Boolean,
"default": true
},
disabled: {
type: Boolean,
"default": false
},
src: {
type: String,
required: true
},
icon: {
type: String,
"default": 'folder'
},
width: {
type: [Number, String],
"default": 500
},
height: {
type: [Number, String],
"default": 370
},
maxLength: {
type: Number,
"default": 0
},
okBtnText: {
type: String,
"default": '确定'
},
closeBtnText: {
type: String,
"default": '关闭'
},
modalTitle: String,
handleIcon: {
type: [String, Boolean],
"default": undefined
},
title: String,
allowRemove: {
type: Boolean,
"default": true
},
onOpen: {
type: Function,
"default": function _default() {}
},
onOk: {
type: Function,
"default": function _default() {}
},
onCancel: {
type: Function,
"default": function _default() {}
},
onLoad: {
type: Function,
"default": function _default() {}
},
onBeforeRemove: {
type: Function,
"default": function _default() {}
},
onRemove: {
type: Function,
"default": function _default() {}
},
onHandle: {
type: Function,
"default": function _default(src) {
this.previewImage = this.getSrc(src);
this.previewVisible = true;
}
},
modal: {
type: Object,
"default": function _default() {
return {};
}
},
srcKey: {
type: [String, Number]
},
value: [Array, String, Number, Object],
previewMask: undefined,
footer: {
type: Boolean,
"default": true
},
reload: {
type: Boolean,
"default": true
},
closeBtn: {
type: Boolean,
"default": true
},
okBtn: {
type: Boolean,
"default": true
}
},
data: function data() {
return {
fileList: toArray(this.value),
previewVisible: false,
frameVisible: false,
previewImage: ''
};
},
watch: {
value: function value(n) {
this.fileList = toArray(n);
},
fileList: function fileList(n) {
var val = this.maxLength === 1 ? n[0] || '' : n;
this.$emit('input', val);
this.$emit('change', val);
}
},
methods: {
key: function key(unique) {
return unique;
},
closeModal: function closeModal(close) {
this.$emit(close ? '$close' : '$ok');
if (this.reload) {
this.$off('$ok');
this.$off('$close');
}
this.frameVisible = false;
},
showModal: function showModal() {
if (this.disabled || false === this.onOpen()) return;
this.frameVisible = true;
},
makeInput: function makeInput() {
var _this = this;
var h = this.$createElement;
var props = {
type: 'text',
value: this.fileList.map(function (v) {
return _this.getSrc(v);
}).toString(),
readonly: true
};
return h("AInput", helper([{}, {
"props": props
}, {
"key": this.key('input')
}]), [h("AIcon", {
"attrs": {
"type": this.icon
},
"slot": "addonAfter",
"on": {
"click": this.showModal
}
}), this.fileList.length ? h("AIcon", {
"attrs": {
"type": "close-circle"
},
"slot": "suffix",
"on": {
"click": function click() {
return _this.fileList = [];
}
}
}) : null]);
},
makeGroup: function makeGroup(children) {
var h = this.$createElement;
if (!this.maxLength || this.fileList.length < this.maxLength) children.push(this.makeBtn());
return h("div", {
"key": this.key('group')
}, _toConsumableArray(children));
},
makeItem: function makeItem(index, children) {
var h = this.$createElement;
return h("div", {
"class": 'fc-files',
"key": this.key('file' + index)
}, _toConsumableArray(children));
},
valid: function valid(f) {
var field = this.formCreateInject.field || this.field;
if (field && f !== field) throw new Error('[frame]无效的字段值');
},
makeIcons: function makeIcons(val, index) {
var h = this.$createElement;
if (this.handleIcon !== false || this.allowRemove === true) {
var icons = [];
if (this.type !== 'file' && this.handleIcon !== false || this.type === 'file' && this.handleIcon) icons.push(this.makeHandleIcon(val, index));
if (this.allowRemove) icons.push(this.makeRemoveIcon(val, index));
return h("div", {
"class": 'fc-upload-cover',
"key": this.key('uc')
}, [icons]);
}
},
makeHandleIcon: function makeHandleIcon(val, index) {
var _this2 = this;
var h = this.$createElement;
return h("AIcon", {
"attrs": {
"type": this.handleIcon === true || this.handleIcon === undefined ? 'eye-o' : this.handleIcon
},
"on": {
"click": function click() {
return _this2.handleClick(val);
}
},
"key": this.key('hi' + index)
});
},
makeRemoveIcon: function makeRemoveIcon(val, index) {
var _this3 = this;
var h = this.$createElement;
return h("AIcon", {
"attrs": {
"type": "delete"
},
"on": {
"click": function click() {
return _this3.handleRemove(val);
}
},
"key": this.key('ri' + index)
});
},
makeFiles: function makeFiles() {
var _this4 = this;
var h = this.$createElement;
return this.makeGroup(this.fileList.map(function (src, index) {
return _this4.makeItem(index, [h("AIcon", {
"attrs": {
"type": "file"
},
"on": {
"click": function click() {
return _this4.handleClick(src);
}
}
}), _this4.makeIcons(src, index)]);
}));
},
makeImages: function makeImages() {
var _this5 = this;
var h = this.$createElement;
return this.makeGroup(this.fileList.map(function (src, index) {
return _this5.makeItem(index, [h("img", {
"attrs": {
"src": _this5.getSrc(src)
}
}), _this5.makeIcons(src, index)]);
}));
},
makeBtn: function makeBtn() {
var _this6 = this;
var h = this.$createElement;
return h("div", {
"class": 'fc-upload-btn',
"on": {
"click": function click() {
return _this6.showModal();
}
},
"key": this.key('btn')
}, [h("AIcon", {
"attrs": {
"type": this.icon,
"theme": "filled"
}
})]);
},
handleClick: function handleClick(src) {
return this.onHandle(src);
},
handleRemove: function handleRemove(src) {
if (this.disabled) return;
if (false !== this.onBeforeRemove(src)) {
this.fileList.splice(this.fileList.indexOf(src), 1);
this.onRemove(src);
}
},
getSrc: function getSrc(src) {
return !this.srcKey ? src : src[this.srcKey];
},
frameLoad: function frameLoad(iframe) {
var _this7 = this;
this.onLoad(iframe);
try {
if (this.helper === true) {
iframe['form_create_helper'] = {
close: function close(field) {
_this7.valid(field);
_this7.closeModal();
},
set: function set(field, value) {
_this7.valid(field);
if (!_this7.disabled) _this7.$emit('input', value);
},
get: function get(field) {
_this7.valid(field);
return _this7.value;
},
onOk: function onOk(fn) {
return _this7.$on('$ok', fn);
},
onClose: function onClose(fn) {
return _this7.$on('$close', fn);
}
};
}
} catch (e) {
console.log(e);
}
},
makeFooter: function makeFooter() {
var _this8 = this;
var h = this.$createElement;
var _this$$props = this.$props,
okBtnText = _this$$props.okBtnText,
closeBtnText = _this$$props.closeBtnText,
closeBtn = _this$$props.closeBtn,
okBtn = _this$$props.okBtn,
footer = _this$$props.footer;
var node = [];
if (!footer) return node;
if (closeBtn) node.push(h("AButton", {
"on": {
"click": function click() {
return _this8.onCancel() !== false && _this8.closeModal(true);
}
}
}, [closeBtnText]));
if (okBtn) node.push(h("AButton", {
"attrs": {
"type": "primary"
},
"on": {
"click": function click() {
return _this8.onOk() !== false && _this8.closeModal();
}
}
}, [okBtnText]));
return node;
}
},
render: function render() {
var _this9 = this;
var h = arguments[0];
var type = this.type;
var Node;
if (type === 'input') Node = this.makeInput();else if (type === 'image') Node = this.makeImages();else Node = this.makeFiles();
var _this$$props2 = this.$props,
_this$$props2$width = _this$$props2.width,
width = _this$$props2$width === void 0 ? '30%' : _this$$props2$width,
height = _this$$props2.height,
src = _this$$props2.src,
title = _this$$props2.title,
modalTitle = _this$$props2.modalTitle;
this.$nextTick(function () {
if (_this9.$refs.frame) {
_this9.frameLoad(_this9.$refs.frame.contentWindow || {});
}
});
return h("div", {
"class": "_fc-frame"
}, [Node, h("aModal", {
"attrs": {
"mask": this.previewMask,
"title": modalTitle,
"footer": null
},
"model": {
value: _this9.previewVisible,
callback: function callback($$v) {
_this9.previewVisible = $$v;
}
}
}, [h("img", {
"attrs": {
"alt": "example",
"src": this.previewImage
},
"style": "width: 100%"
})]), h("aModal", helper([{}, {
"props": _objectSpread2({
width: width,
title: title
}, this.modal)
}, {
"attrs": {
"visible": this.frameVisible
},
"on": {
"cancel": function cancel() {
return _this9.closeModal(true);
}
}
}]), [this.frameVisible || !this.reload ? h("iframe", {
"ref": "frame",
"attrs": {
"src": src,
"frameborder": "0"
},
"style": {
'height': height,
'border': '0 none',
'width': '100%'
}
}) : null, h("div", {
"slot": "footer"
}, [this.makeFooter()])])]);
},
mounted: function mounted() {
this.$on('fc.closeModal', this.closeModal);
}
};
var NAME$2 = 'fcGroup';
var Group = {
name: NAME$2,
props: {
field: String,
rule: [Array, Object],
rules: Array,
expand: Number,
options: Object,
formCreateInject: {
type: Object,
required: true
},
button: {
type: Boolean,
"default": true
},
max: {
type: Number,
"default": 0
},
min: {
type: Number,
"default": 0
},
value: {
type: Array,
"default": function _default() {
return [];
}
},
disabled: {
type: Boolean,
"default": false
},
syncDisabled: {
type: Boolean,
"default": true
},
fontSize: {
type: Number,
"default": 28
},
onBeforeRemove: {
type: Function,
"default": function _default() {}
},
onBeforeAdd: {
type: Function,
"default": function _default() {}
}
},
data: function data() {
return {
len: 0,
cacheRule: {},
cacheValue: {}
};
},
computed: {
formRule: function formRule() {
if (this.rule) {
return Array.isArray(this.rule) ? this.rule : [this.rule];
}
if (this.rules) {
return this.rules;
}
return [];
}
},
watch: {
disabled: function disabled(n) {
if (this.syncDisabled) {
var lst = this.cacheRule;
Object.keys(lst).forEach(function (k) {
lst[k].$f.disabled(n);
});
}
},
expand: function expand(n) {
var d = n - this.value.length;
if (d > 0) {
this.expandRule(d);
}
},
value: function value(n) {
var _this = this;
n = n || [];
var keys = Object.keys(this.cacheRule),
total = keys.length,
len = total - n.length;
if (len < 0) {
for (var i = len; i < 0; i++) {
this.addRule(n.length + i);
}
for (var _i = 0; _i < total; _i++) {
this.setValue(keys[_i], n[_i]);
}
} else {
if (len > 0) {
for (var _i2 = 0; _i2 < len; _i2++) {
this.removeRule(keys[total - _i2 - 1]);
}
this.subForm();
}
n.forEach(function (val, i) {
_this.setValue(keys[i], n[i]);
});
}
}
},
methods: {
_value: function _value(v) {
return v && hasProperty(v, this.field) ? v[this.field] : v;
},
cache: function cache(k, val) {
this.cacheValue[k] = JSON.stringify(val);
},
input: function input(value) {
this.$emit('input', value);
this.$emit('change', value);
},
formData: function formData(key, _formData) {
var _this2 = this;
var cacheRule = this.cacheRule;
var keys = Object.keys(cacheRule);
if (keys.filter(function (k) {
return cacheRule[k].$f;
}).length !== keys.length) {
return;
}
var value = keys.map(function (k) {
var data = key === k ? _formData : _objectSpread2({}, _this2.cacheRule[k].$f.form);
var value = _this2.field ? data[_this2.field] || null : data;
_this2.cache(k, value);
return value;
});
this.input(value);
},
setValue: function setValue(key, value) {
var field = this.field,
$f = this.cacheRule[key].$f;
if (field) {
value = _defineProperty({}, field, this._value(value));
}
if (this.cacheValue[key] === JSON.stringify(field ? value[field] : value)) {
return;
}
this.cache(key, value);
$f.coverValue(value || {});
},
addRule: function addRule(i, emit) {
var _this3 = this;
var rule = this.formCreateInject.form.copyRules(this.formRule);
var options = this.options ? _objectSpread2({}, this.options) : {
submitBtn: false,
resetBtn: false
};
options.formData = this.field ? _defineProperty({}, this.field, this._value(this.value[i])) : this.value[i] || {};
this.$set(this.cacheRule, ++this.len, {
rule: rule,
options: options
});
if (emit) {
this.$nextTick(function () {
return _this3.$emit('add', rule, Object.keys(_this3.cacheRule).length - 1);
});
}
},
add$f: function add$f(i, key, $f) {
var _this4 = this;
this.cacheRule[key].$f = $f;
this.subForm();
this.$nextTick(function () {
if (_this4.syncDisabled) {
$f.disabled(_this4.disabled);
}
_this4.$emit('itemMounted', $f, Object.keys(_this4.cacheRule).indexOf(key));
});
},
subForm: function subForm() {
var _this5 = this;
this.formCreateInject.subForm(Object.keys(this.cacheRule).map(function (k) {
return _this5.cacheRule[k].$f;
}));
},
removeRule: function removeRule(key, emit) {
var _this6 = this;
var index = Object.keys(this.cacheRule).indexOf(key);
this.$delete(this.cacheRule, key);
this.$delete(this.cacheValue, key);
if (emit) {
this.$nextTick(function () {
return _this6.$emit('remove', index);
});
}
},
add: function add(i) {
if (this.disabled || false === this.onBeforeAdd(this.value)) {
return;
}
this.addRule(i, true);
},
del: function del(index, key) {
if (this.disabled || false === this.onBeforeRemove(this.value)) {
return;
}
this.removeRule(key, true);
this.subForm();
this.value.splice(index, 1);
this.input(this.value);
},
addIcon: function addIcon(key) {
var h = this.$createElement;
return h("AIcon", {
"key": "a".concat(key),
"attrs": {
"type": "plus-circle"
},
"style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer', ";"),
"on": {
"click": this.add
}
});
},
delIcon: function delIcon(index, key) {
var _this7 = this;
var h = this.$createElement;
return h("AIcon", {
"key": "d".concat(key),
"attrs": {
"type": "minus-circle"
},
"style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266', ";"),
"on": {
"click": function click() {
return _this7.del(index, key);
}
}
});
},
makeIcon: function makeIcon(total, index, key) {
var _this8 = this;
if (this.$scopedSlots.button) {
return this.$scopedSlots.button({
total: total,
index: index,
vm: this,
key: key,
del: function del() {
return _this8.del(index, key);
},
add: this.add
});
}
if (index === 0) {
return [this.max !== 0 && total >= this.max ? null : this.addIcon(key), this.min === 0 || total > this.min ? this.delIcon(index, key) : null];
}
if (index >= this.min) {
return this.delIcon(index, key);
}
},
emitEvent: function emitEvent(name, args, index, key) {
this.$emit.apply(this, [name].concat(_toConsumableArray(args), [this.cacheRule[key].$f, index]));
},
expandRule: function expandRule(n) {
for (var i = 0; i < n; i++) {
this.value.push(this.field ? null : {});
}
}
},
created: function created() {
var d = (this.expand || 0) - this.value.length;
if (d > 0) {
this.expandRule(d);
}
for (var i = 0; i < this.value.length; i++) {
this.addRule(i);
}
},
render: function render() {
var _this9 = this;
var h = arguments[0];
var keys = Object.keys(this.cacheRule);
var button = this.button;
return keys.length === 0 ? this.$scopedSlots["default"] ? this.$scopedSlots["default"]({
vm: this,
add: this.add
}) : h("AIcon", {
"key": 'a_def',
"attrs": {
"type": "plus-circle"
},
"style": "font-size:".concat(this.fontSize, "px;vertical-align:middle;color:").concat(this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer', ";"),
"on": {
"click": this.add
}
}) : h("div", {
"key": 'con'
}, [keys.map(function (key, index) {
var _this9$cacheRule$key = _this9.cacheRule[key],
rule = _this9$cacheRule$key.rule,
options = _this9$cacheRule$key.options;
return h("ARow", {
"attrs": {
"align": "middle",
"type": "flex"
},
"key": key,
"style": "border-bottom:1px dashed #d9d9d9;margin-bottom:10px;"
}, [h("ACol", {
"attrs": {
"span": button ? 20 : 24
}
}, [h("FormCreate", helper([{
"key": key
}, {
"on": {
'update:value': function updateValue(formData) {
return _this9.formData(key, formData);
},
'emit-event': function emitEvent(name) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
return _this9.emitEvent(name, args, index, key);
},
input: function input($f) {
return _this9.add$f(index, key, $f);
}
}
}, {
"attrs": {
"rule": rule,
"option": options,
"extendOption": true
}
}]))]), button ? h("ACol", {
"attrs": {
"span": 2,
"pull": 1,
"push": 1
}
}, [_this9.makeIcon(keys.length, index, key)]) : null]);
})]);
},
beforeMount: function beforeMount() {
this.$options.components.FormCreate = this.formCreateInject.form.$form();
}
};
var NAME$3 = 'fcSubForm';
var Sub = {
name: NAME$3,
props: {
rule: Array,
options: Object,
formCreateInject: {
type: Object,
required: true
},
value: {
type: Object,
"default": function _default() {
return {};
}
},
disabled: {
type: Boolean,
"default": false
},
syncDisabled: {
type: Boolean,
"default": true
}
},
data: function data() {
return {
cacheRule: {},
cacheValue: {}
};
},
watch: {
disabled: function disabled(n) {
this.syncDisabled && this.cacheRule.$f.disabled(n);
},
value: function value(n) {
this.setValue(n);
}
},
methods: {
formData: function formData(value) {
this.cacheValue = JSON.stringify(value);
this.$emit('input', value);
this.$emit('change', value);
},
setValue: function setValue(value) {
var str = JSON.stringify(value);
if (this.cacheValue === str) {
return;
}
this.cacheValue = str;
this.cacheRule.$f.coverValue(value || {});
},
addRule: function addRule() {
var options = this.options ? this.options : {
submitBtn: false,
resetBtn: false
};
options.formData = _objectSpread2({}, this.value || {});
this.cacheRule = {
rule: this.rule,
options: options
};
},
add$f: function add$f($f) {
var _this = this;
this.cacheRule.$f = $f;
this.subForm();
this.$nextTick(function () {
_this.syncDisabled && $f.disabled(_this.disabled);
_this.$emit('itemMounted', $f);
});
},
subForm: function subForm() {
this.formCreateInject.subForm(this.cacheRule.$f);
},
emitEvent: function emitEvent(name) {
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
this.$emit.apply(this, [name].concat(args));
}
},
created: function created() {
this.addRule();
},
render: function render() {
var h = arguments[0];
var _this$cacheRule = this.cacheRule,
rule = _this$cacheRule.rule,
options = _this$cacheRule.options;
return h("FormCreate", helper([{}, {
"on": {
'update:value': this.formData,
'emit-event': this.emitEvent,
input: this.add$f
}
}, {
"attrs": {
"rule": rule,
"option": options,
"extendOption": true
}
}]));
},
beforeMount: function beforeMount() {
this.$options.components.FormCreate = this.formCreateInject.form.$form();
}
};
var components = [Upload, Frame, Group, Sub];
var checkbox = {
name: 'checkbox',
mergeProp: function mergeProp(ctx) {
var props = ctx.prop.props;
if (!hasProperty(props, 'options')) props.options = ctx.prop.options || [];
}
};
var radio = _objectSpread2(_objectSpread2({}, checkbox), {}, {
name: 'radio'
});
var select = _objectSpread2(_objectSpread2({}, checkbox), {}, {
name: 'select'
});
var _extends$1 = Object.assign || function (a) {
for (var b, c = 1; c < arguments.length; c++) {
for (var d in b = arguments[c], b) {
Object.prototype.hasOwnProperty.call(b, d) && $set(a, d, b[d]);
}
}
return a;
};
function extend() {
return _extends$1.apply(this, arguments);
}
var NAME$4 = 'FormCreate';
function $FormCreate(FormCreate) {
return {
name: NAME$4,
componentName: NAME$4,
model: {
prop: 'api'
},
provide: function provide() {
return {
$pfc: this
};
},
inject: {
$pfc: {
"default": null
}
},
props: {
rule: {
type: Array,
required: true
},
option: {
type: Object,
"default": function _default() {
return {};
}
},
extendOption: Boolean,
value: Object,
api: Object
},
data: function data() {
return {
formData: undefined,
destroyed: false,
validate: {},
$f: undefined,
isShow: true,
unique: 1,
renderRule: _toConsumableArray(this.rule || []),
ctxInject: {},
updateValue: ''
};
},
render: function render() {
return this.formCreate.render();
},
methods: {
_refresh: function _refresh() {
++this.unique;
},
_renderRule: function _renderRule() {
this.renderRule = _toConsumableArray(this.rule || []);
},
_updateValue: function _updateValue(value) {
if (this.destroyed) return;
this.updateValue = JSON.stringify(value);
this.$emit('update:value', value);
}
},
watch: {
value: {
handler: function handler(n) {
if (JSON.stringify(n) === this.updateValue) return;
this.$f.setValue(n);
},
deep: true
},
option: {
handler: function handler(n) {
this.formCreate.initOptions(n);
this.$f.refresh();
},
deep: true
},
rule: function rule(n) {
var _this = this;
if (n.length === this.renderRule.length && n.every(function (v) {
return _this.renderRule.indexOf(v) > -1;
})) return;
this.formCreate.$handle.reloadRule(n);
this._renderRule();
}
},
beforeCreate: function beforeCreate() {
var _this2 = this;
var _this$$options$propsD = this.$options.propsData,
rule = _this$$options$propsD.rule,
option = _this$$options$propsD.option;
this.formCreate = new FormCreate(this, rule, option);
Object.keys(this.formCreate.prop).forEach(function (k) {
extend(_this2.$options[k], _this2.formCreate.prop[k]);
});
}
};
}
var normalMerge$1 = ['attrs', 'props', 'domProps', 'scopedSlots'];
var toArrayMerge$1 = ['class', 'style', 'directives'];
var functionalMerge$1 = ['on', 'nativeOn'];
var mergeProps = function mergeProps(objects) {
var initial = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var opt = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
var _normalMerge = [].concat(normalMerge$1, _toConsumableArray(opt['normal'] || []));
var _toArrayMerge = [].concat(toArrayMerge$1, _toConsumableArray(opt['array'] || []));
var _functionalMerge = [].concat(functionalMerge$1, _toConsumableArray(opt['functional'] || []));
var propsMerge = opt['props'] || [];
return objects.reduce(function (a, b) {
for (var key in b) {
if (a[key]) {
if (propsMerge.indexOf(key) > -1) {
a[key] = mergeProps([b[key]], a[key]);
} else if (_normalMerge.indexOf(key) > -1) {
a[key] = _objectSpread2(_objectSpread2({}, a[key]), b[key]);
} else if (_toArrayMerge.indexOf(key) > -1) {
var arrA = a[key] instanceof Array ? a[key] : [a[key]];
var arrB = b[key] instanceof Array ? b[key] : [b[key]];
a[key] = [].concat(_toConsumableArray(arrA), _toConsumableArray(arrB));
} else if (_functionalMerge.indexOf(key) > -1) {
for (var event in b[key]) {
if (a[key][event]) {
var _arrA = a[key][event] instanceof Array ? a[key][event] : [a[key][event]];
var _arrB = b[key][event] instanceof Array ? b[key][event] : [b[key][event]];
a[key][event] = [].concat(_toConsumableArray(_arrA), _toConsumableArray(_arrB));
} else {
a[key][event] = b[key][event];
}
}
} else if (key === 'hook') {
for (var hook in b[key]) {
if (a[key][hook]) {
a[key][hook] = mergeFn$1(a[key][hook], b[key][hook]);
} else {
a[key][hook] = b[key][hook];
}
}
} else {
a[key] = b[key];
}
} else {
if (_normalMerge.indexOf(key) > -1 || _functionalMerge.indexOf(key) > -1 || propsMerge.indexOf(key) > -1) {
a[key] = _objectSpread2({}, b[key]);
} else if (_toArrayMerge.indexOf(key) > -1) {
a[key] = b[key] instanceof Array ? _toConsumableArray(b[key]) : _typeof(b[key]) === 'object' ? _objectSpread2({}, b[key]) : b[key];
} else a[key] = b[key];
}
}
return a;
}, initial);
};
var mergeFn$1 = function mergeFn(fn1, fn2) {
return function () {
fn1 && fn1.apply(this, arguments);
fn2 && fn2.apply(this, arguments);
};
};
var keyAttrs = ['type', 'slot', 'emitPrefix', 'value', 'name', 'native', 'hidden', 'display', 'inject', 'options', 'emit', 'nativeEmit', 'link', 'prefix', 'suffix', 'update', 'sync', 'optionsTo', 'key'];
var arrayAttrs = ['validate', 'children', 'control'];
var normalAttrs = ['effect', 'deep'];
function attrs() {
return [].concat(keyAttrs, _toConsumableArray(normalMerge$1), _toConsumableArray(toArrayMerge$1), _toConsumableArray(functionalMerge$1), arrayAttrs, normalAttrs);
}
function format(type, msg, rule) {
return "[form-create ".concat(type, "]: ").concat(msg) + (rule ? '\n\nrule: ' + JSON.stringify(rule.getRule ? rule.getRule() : rule) : '');
}
function tip(msg, rule) {
console.warn(format('tip', msg, rule));
}
function err(msg, rule) {
console.error(format('err', msg, rule));
}
function logError(e) {
err(e.toString());
console.error(e);
}
var PREFIX = '[[FORM-CREATE-PREFIX-';
var SUFFIX = '-FORM-CREATE-SUFFIX]]';
var $T = '$FN:';
var $TX = '$FNX:';
var FUNCTION = 'function';
function toJson(obj, space) {
return JSON.stringify(deepExtend([], obj, true), function (key, val) {
if (val && val._isVue === true) return undefined;
if (_typeof(val) !== FUNCTION) {
return val;
}
if (hasProperty(val, '__json')) {
return val.__json;
}
if (val.__origin) val = val.__origin;
if (val.__emit) return undefined;
return PREFIX + val + SUFFIX;
}, space);
}
function makeFn(fn) {
return eval('(' + FUNCTION + '(){return ' + fn + ' })()');
}
function parseFn(fn, mode) {
if (fn && is.String(fn) && fn.length > 4) {
var v = fn.trim();
var flag = false;
try {
if (v.indexOf(SUFFIX) > 0 && v.indexOf(PREFIX) === 0) {
v = v.replace(SUFFIX, '').replace(PREFIX, '');
flag = true;
} else if (v.indexOf($T) === 0) {
v = v.replace($T, '');
flag = true;
} else if (v.indexOf($TX) === 0) {
v = makeFn('function($inject){' + v.replace($TX, '') + '}');
v.__j