CRMEB/public/system/util/mpFormBuilder-bak-compiled.js
2018-08-22 17:27:12 +08:00

320 lines
10 KiB
JavaScript

(function (global, factory) {
define && define.amd && define(factory());
})(this, function () {
var FormBuilderName = 'form-builder';
var props = {
'label-width': 80
};
var formBuilderInstall = function formBuilderInstall(Vue, rules) {
rules = formBuilder.handleRules(rules);
Vue.component(FormBuilderName, {
data: function data() {
return {
formValidate: formBuilder.metaData(rules)
};
},
render: function render(h) {
window.__vm = this;
var fb = new formBuilder(this, h, rules);
window._fb = fb;
return fb.makeForm();
},
watch: {},
created: function created() {
// formBuilder.createWatch(this,rules);
}
});
};
var formBuilder = function formBuilder(vm, h, rules) {
this.vm = vm;
this.h = h;
this.rules = rules;
};
formBuilder.filterFailRule = function (rules) {
return rules.filter(function (rule) {
return !!rule.field;
});
};
formBuilder.fields = function (rules) {
var field = [];
rules.map(function (rule) {
field.push(rule.field);
});
return field;
};
formBuilder.metaData = function (rules) {
var metaData = {};
rules.map(function (rule) {
metaData[rule.field] = rule.value;
});
return metaData;
};
formBuilder.metaRef = function (field) {
return 'mp_' + field;
};
formBuilder.metaWatch = function (vm, field) {
var _this = this;
return vm.$watch('formValidate.' + field, function (n) {
vm.$refs[_this.metaRef(field)].currentValue = n;
});
};
formBuilder.createWatch = function (vm, rules) {
var _this2 = this;
this.fields(rules).map(function (field) {
_this2.metaWatch(vm, field);
});
};
formBuilder.handleRules = function (rules) {
return this.filterFailRule(rules).map(function (rule) {
rule.props || (rule.props = {});
return rule;
});
};
formBuilder.prototype = {
onInput: function onInput(field, value) {
console.log(value);
this.vm.formValidate[field] = value;
this.vm.$emit('input', value);
},
getFieldValue: function getFieldValue(field) {
return this.vm.formValidate[field];
},
makeForm: function makeForm() {
return this.h('i-form', {
props: props
}, this.parse());
},
makeFormItem: function makeFormItem(field, label, VNodeFn) {
return this.h('form-Item', {
props: {
'props': field,
'label': label || ''
}
}, VNodeFn());
},
makeInput: function makeInput(rule) {
var _this3 = this;
_vm = this.vm;
rule.props.value = this.getFieldValue(rule.field);
return this.h('i-input', {
props: rule.props,
on: {
input: function input(value) {
return _this3.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
});
},
makeInputNumber: function makeInputNumber(rule) {
var _this4 = this;
rule.props.value = parseFloat(this.getFieldValue(rule.field)) || 1;
return this.h('Input-Number', {
props: rule.props,
on: {
input: function input(value) {
return _this4.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
});
},
makeRadioGroup: function makeRadioGroup(rule) {
var _this5 = this;
var VNodeFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
rule.props.value = this.getFieldValue(rule.field);
return this.h('Radio-Group', {
props: rule.props,
on: {
input: function input(value) {
return _this5.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
}, VNodeFn());
},
makeRadio: function makeRadio(rule) {
var _this6 = this;
return this.makeRadioGroup(rule, function () {
return rule.options.map(function (option) {
return _this6.h('Radio', {
props: option.props
});
});
});
},
makeCheckBoxGroup: function makeCheckBoxGroup(rule) {
var _this7 = this;
var VNodeFn = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : function () {};
rule.props.value = this.getFieldValue(rule.field);
return this.h('Checkbox-Group', {
props: rule.props,
on: {
input: function input(value) {
return _this7.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
}, VNodeFn());
},
makeCheckBox: function makeCheckBox(rule) {
var _this8 = this;
return this.makeCheckBoxGroup(rule, function () {
return rule.options.map(function (checkbox) {
return _this8.h('Checkbox', {
props: checkbox.props
});
});
});
},
markSelectOptions: function markSelectOptions(options) {
var _this9 = this;
return options.map(function (option) {
return _this9.h('i-option', {
props: option.props
});
});
},
markSelect: function markSelect(rule) {
var _this10 = this;
rule.props.value = this.getFieldValue(rule.field);
return this.h('i-select', {
props: rule.props,
on: {
input: function input(value) {
return _this10.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
}, this.markSelectOptions(rule.options));
},
makeDatePicker: function makeDatePicker(rule) {
var _this11 = this;
rule.props.value = this.getFieldValue(rule.field);
rule.props.type || (rule.props.type = 'date');
return this.h('Date-Picker', {
props: rule.props,
on: {
input: function input(value) {
return _this11.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
});
},
makeTimePicker: function makeTimePicker(rule) {
var _this12 = this;
rule.props.value = this.getFieldValue(rule.field);
rule.props.type || (rule.props.type = 'time');
return this.h('Time-Picker', {
props: rule.props,
on: {
input: function input(value) {
return _this12.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
});
},
makeColorPicker: function makeColorPicker(rule) {
var _this13 = this;
rule.props.value = this.getFieldValue(rule.field);
return this.h('Color-Picker', {
props: rule.props,
on: {
input: function input(value) {
return _this13.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
});
},
makeUpload: function makeUpload(rule) {
var _this14 = this;
rule.props.value = this.getFieldValue(rule.field);
return this.h('Upload', {
props: rule.props,
attrs: {
style: 'display: inline-block;width:58px'
},
on: {
input: function input(value) {
return _this14.onInput(rule.field, value);
}
},
ref: formBuilder.metaRef(rule.field)
}, [this.h('div', { style: { width: '58px', height: '58px', lineHeight: '58px' } }, [this.h('Icon', {
props: {
type: "camera",
size: 20
}
})])]);
},
parse: function parse() {
var _this15 = this;
return this.rules.filter(function (rule) {
return !!rule.field;
}).map(function (rule) {
return _this15.makeFormItem(rule.field, rule.title, function () {
return _this15[rule.type.toLowerCase()].call(_this15, rule);
});
});
},
text: function text(rule) {
return [this.makeInput(rule)];
},
radio: function radio(rule) {
return [this.makeRadio(rule)];
},
checkbox: function checkbox(rule) {
return [this.makeCheckBox(rule)];
},
select: function select(rule) {
return [this.markSelect(rule)];
},
inputnumber: function inputnumber(rule) {
return [this.makeInputNumber(rule)];
},
datepicker: function datepicker(rule) {
return [this.makeDatePicker(rule)];
},
timepicker: function timepicker(rule) {
return [this.makeTimePicker(rule)];
},
colorpicker: function colorpicker(rule) {
return [this.makeColorPicker(rule)];
},
upload: function upload(rule) {
return [this.makeUpload(rule)];
}
};
return {
install: formBuilderInstall
};
});
//# sourceMappingURL=mpFormBuilder-bak-compiled.js.map