v-form-engine
Version:
一个基于 vue + element-ui 的 PC 端表单引擎。支持灵活的配置项、编辑/查看两种视图、自定义模板/插槽、溢出隐藏、双击复制等...
2 lines (1 loc) • 16.6 kB
JavaScript
import Vue$1 from"vue";import"core-js/modules/es.array.concat.js";import"core-js/modules/es.array.filter.js";import"core-js/modules/es.array.find.js";import"core-js/modules/es.array.for-each.js";import"core-js/modules/es.array.index-of.js";import"core-js/modules/es.array.reduce.js";import"core-js/modules/es.array.splice.js";import"core-js/modules/es.number.constructor.js";import"core-js/modules/es.object.to-string.js";import"core-js/modules/web.dom-collections.for-each.js";import"core-js/modules/es.symbol.js";import"core-js/modules/es.object.get-own-property-descriptor.js";import"core-js/modules/es.object.get-own-property-descriptors.js";import"core-js/modules/es.object.keys.js";import"core-js/modules/es.symbol.description.js";import"core-js/modules/es.symbol.iterator.js";import"core-js/modules/es.array.from.js";import"core-js/modules/es.string.iterator.js";import"core-js/modules/web.dom-collections.iterator.js";import"core-js/modules/es.array.slice.js";import"core-js/modules/es.function.name.js";import"core-js/modules/es.regexp.to-string.js";import"core-js/modules/es.reflect.construct.js";import"core-js/modules/es.object.get-prototype-of.js";import _merge from"lodash/merge";import _isEqual from"lodash/isEqual";import _cloneDeep from"lodash/cloneDeep";import _camelCase from"lodash/camelCase";import{Prop,Watch,Component,Vue}from"vue-property-decorator";import __vue_normalize__ from"vue-runtime-helpers/dist/normalize-component.mjs";function _defineProperty(obj,key,value){return key in obj?Object.defineProperty(obj,key,{value,enumerable:!0,configurable:!0,writable:!0}):obj[key]=value,obj}function ownKeys(object,enumerableOnly){var keys=Object.keys(object);if(Object.getOwnPropertySymbols){var symbols=Object.getOwnPropertySymbols(object);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=null!=arguments[i]?arguments[i]:{};i%2?ownKeys(Object(source),!0).forEach((function(key){_defineProperty(target,key,source[key])})):Object.getOwnPropertyDescriptors?Object.defineProperties(target,Object.getOwnPropertyDescriptors(source)):ownKeys(Object(source)).forEach((function(key){Object.defineProperty(target,key,Object.getOwnPropertyDescriptor(source,key))}))}return target}function _arrayLikeToArray(arr,len){(null==len||len>arr.length)&&(len=arr.length);for(var i=0,arr2=new Array(len);i<len;i++)arr2[i]=arr[i];return arr2}function _toConsumableArray(arr){return function(arr){if(Array.isArray(arr))return _arrayLikeToArray(arr)}(arr)||function(iter){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(iter))return Array.from(iter)}(arr)||function(o,minLen){if(o){if("string"==typeof o)return _arrayLikeToArray(o,minLen);var n=Object.prototype.toString.call(o).slice(8,-1);return"Object"===n&&o.constructor&&(n=o.constructor.name),"Map"===n||"Set"===n?Array.from(o):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?_arrayLikeToArray(o,minLen):void 0}}(arr)||function(){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 _classCallCheck(instance,Constructor){if(!(instance instanceof Constructor))throw new TypeError("Cannot call a class as a function")}function _defineProperties(target,props){for(var i=0;i<props.length;i++){var descriptor=props[i];descriptor.enumerable=descriptor.enumerable||!1,descriptor.configurable=!0,"value"in descriptor&&(descriptor.writable=!0),Object.defineProperty(target,descriptor.key,descriptor)}}function _setPrototypeOf(o,p){return(_setPrototypeOf=Object.setPrototypeOf||function(o,p){return o.__proto__=p,o})(o,p)}function _getPrototypeOf(o){return(_getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(o){return o.__proto__||Object.getPrototypeOf(o)})(o)}function _typeof(obj){return(_typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(obj){return typeof obj}:function(obj){return obj&&"function"==typeof Symbol&&obj.constructor===Symbol&&obj!==Symbol.prototype?"symbol":typeof obj})(obj)}function _possibleConstructorReturn(self,call){return!call||"object"!==_typeof(call)&&"function"!=typeof call?function(self){if(void 0===self)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return self}(self):call}function _createSuper(Derived){var hasNativeReflectConstruct=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(e){return!1}}();return function(){var result,Super=_getPrototypeOf(Derived);if(hasNativeReflectConstruct){var NewTarget=_getPrototypeOf(this).constructor;result=Reflect.construct(Super,arguments,NewTarget)}else result=Super.apply(this,arguments);return _possibleConstructorReturn(this,result)}}function __decorate(decorators,target,key,desc){var d,c=arguments.length,r=c<3?target:null===desc?desc=Object.getOwnPropertyDescriptor(target,key):desc;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r}var FormEngine=function(_Vue){!function(subClass,superClass){if("function"!=typeof superClass&&null!==superClass)throw new TypeError("Super expression must either be null or a function");subClass.prototype=Object.create(superClass&&superClass.prototype,{constructor:{value:subClass,writable:!0,configurable:!0}}),superClass&&_setPrototypeOf(subClass,superClass)}(FormEngine,Vue);var Constructor,protoProps,staticProps,_super=_createSuper(FormEngine);function FormEngine(){var _this;return _classCallCheck(this,FormEngine),(_this=_super.apply(this,arguments)).newFormData={},_this.newRules={},_this.newItems=[],_this.isChangeValidateRule=!1,_this}return Constructor=FormEngine,(protoProps=[{key:"watchItems",value:function(){this.handleFormData(),this.handleRules()}},{key:"watchRules",value:function(){this.handleRules(!0)}},{key:"watchFormData",value:function(){_isEqual(this.newFormData,this.formData)||this.handleFormData(!0)}},{key:"getAttrValue",value:function(){var _ref,_dataSource$key,dataSource=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null!=this?this:{},key=arguments.length>1?arguments[1]:void 0,defalutValue=arguments.length>2?arguments[2]:void 0;return null!==(_ref=null!==(_dataSource$key=null==dataSource?void 0:dataSource[key])&&void 0!==_dataSource$key?_dataSource$key:null==dataSource?void 0:dataSource[_camelCase(key)])&&void 0!==_ref?_ref:defalutValue}},{key:"getComponentName",value:function(type){var cName="";return type&&"input"!==type&&"textarea"!==type?"time"===type?cName="el-time-picker":function(){var type=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",nowType=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"";return type.indexOf(nowType)>-1}(type,"date")?cName="el-date-picker":type&&"text"!==type&&(cName="el-".concat(type)):cName="el-input",cName}},{key:"getPlaceholder",value:function(item){var _item$isHideEditPlace,_this2=this,cName=this.getComponentName(item.type),text=/(input|select|autocomplete)$/.test(cName)?"请".concat("select"===item.type?"选择":"输入"):"",cProps=this.getAttrValue(item,"component-props",{}),isHideEditPlaceholder=null!==(_item$isHideEditPlace=item.isHideEditPlaceholder)&&void 0!==_item$isHideEditPlace?_item$isHideEditPlace:this.isHideEditPlaceholder,getText=function(text){var _ref2,_cProps$disabled,_ref3,_cProps$readonly;return(null!==(_ref2=null!==(_cProps$disabled=null==cProps?void 0:cProps.disabled)&&void 0!==_cProps$disabled?_cProps$disabled:item.disabled)&&void 0!==_ref2?_ref2:_this2.disabled)||(null!==(_ref3=null!==(_cProps$readonly=null==cProps?void 0:cProps.readonly)&&void 0!==_cProps$readonly?_cProps$readonly:item.readonly)&&void 0!==_ref3?_ref3:_this2.readonly)?"":text},placeholder=(item.componentProps||{}).placeholder||item.placeholder;return(isHideEditPlaceholder?getText(placeholder):placeholder)||getText(text+item.label)}},{key:"getLinefeedSpan",value:function(idx){for(var _this$newItems,_newItems$splice,newItems=_cloneDeep(null!==(_this$newItems=this.newItems)&&void 0!==_this$newItems?_this$newItems:[]),rowIdx=0,i=0;i<=idx;i+=1){var _newItems$i;null!=newItems&&null!==(_newItems$i=newItems[i])&&void 0!==_newItems$i&&_newItems$i.row&&(rowIdx=i)}return 24-_cloneDeep(null!==(_newItems$splice=null==newItems?void 0:newItems.splice(rowIdx,idx-rowIdx+1))&&void 0!==_newItems$splice?_newItems$splice:[]).reduce((function(total,nowItems){return total+((null==nowItems?void 0:nowItems.span)||24)}),0)%24}},{key:"init",value:function(){this.handleFormData(!0),this.handleRules(!0);var style=document.createElement("style");style.innerHTML=".form-engine .el-row { display: flex;flex-wrap: wrap; } .form-engine .form-engine__item { width: 100%; }",style.type="text/css",document.head.appendChild(style)}},{key:"handleFormData",value:function(isInit){var _this3=this;isInit&&(this.newFormData=this.formData),this.items.forEach((function(item){item.prop&&!_this3.formData[item.prop]&&0!==_this3.formData[item.prop]&&!1!==_this3.formData[item.prop]&&_this3.$set(_this3.newFormData,item.prop,"")}))}},{key:"handleRules",value:function(isInit){var _this4=this;this.isChangeValidateRule=!1,isInit&&(this.newRules=this.rules);var items=[];this.items.forEach((function(item){var tmpRules,requiredRules=[],tmpItem=_cloneDeep(item),rules=_this4.newRules[tmpItem.prop]||[];if(tmpItem.required&&!rules.find((function(rule){return rule.required}))){var message="",trigger="blur";/(input|autocomplete|input-number|textarea)$/.test(tmpItem.type)||!tmpItem.type?message="请输入".concat(tmpItem.label):"button"!==tmpItem.type&&"text"!==tmpItem.type&&(message="请选择".concat(tmpItem.label),trigger="change"),tmpItem.requiredErrMsg&&(message=tmpItem.requiredErrMsg),"autocomplete"===tmpItem.type&&(trigger="change"),requiredRules=message?[{required:!0,message,trigger}]:[]}(tmpRules=[].concat(_toConsumableArray(requiredRules),_toConsumableArray(Array.isArray(tmpItem.rules)?tmpItem.rules:tmpItem.rules?[tmpItem.rules]:[]),_toConsumableArray(rules))).length&&(tmpItem.rules=tmpRules),items.push(tmpItem)})),this.newRules=_merge({},this.rules,items.filter((function(item){return item.rules})).reduce((function(prev,now){return _objectSpread2(_objectSpread2({},prev),{},_defineProperty({},now.prop,now.rules))}),{})),this.newItems=items,this.$nextTick((function(){_this4.isChangeValidateRule&&_this4.clearValidate(),_this4.isChangeValidateRule=!0}))}},{key:"created",value:function(){this.init()}},{key:"clearValidate",value:function(props){var _this$$refs;null!==(_this$$refs=this.$refs)&&void 0!==_this$$refs&&_this$$refs.form&&this.$refs.form.clearValidate(props)}},{key:"resetFields",value:function(){var _this$$refs2;null!==(_this$$refs2=this.$refs)&&void 0!==_this$$refs2&&_this$$refs2.form&&this.$refs.form.resetFields()}},{key:"validateField",value:function(props,cb){var _this$$refs3;null!==(_this$$refs3=this.$refs)&&void 0!==_this$$refs3&&_this$$refs3.form&&this.$refs.form.validateField(props,cb)}},{key:"validate",value:function(cb){var _this5=this,promise=new Promise((function(resolve){resolve(_this5.newFormData)}));return cb?this.$refs.form.validate((function(isValid,invalidFields){return cb(isValid,invalidFields)})):promise=this.$refs.form.validate().then((function(){return Promise.resolve(_this5.newFormData)})),promise}}])&&_defineProperties(Constructor.prototype,protoProps),staticProps&&_defineProperties(Constructor,staticProps),FormEngine}();__decorate([Prop({type:Array,default:function(){return[]}})],FormEngine.prototype,"items",void 0),__decorate([Prop({type:Number,default:24})],FormEngine.prototype,"span",void 0),__decorate([Prop({type:Boolean,default:!0})],FormEngine.prototype,"isHideEditPlaceholder",void 0),__decorate([Prop({type:Object,default:function(){return{}}})],FormEngine.prototype,"rules",void 0),__decorate([Prop({type:Object,default:function(){return{}}})],FormEngine.prototype,"formData",void 0),__decorate([Prop({type:Object,default:function(){return{}}})],FormEngine.prototype,"rowProps",void 0),__decorate([Prop({type:Object,default:function(){return{}}})],FormEngine.prototype,"colProps",void 0),__decorate([Prop(Boolean)],FormEngine.prototype,"disabled",void 0),__decorate([Prop(Boolean)],FormEngine.prototype,"clearable",void 0),__decorate([Prop(Boolean)],FormEngine.prototype,"readonly",void 0),__decorate([Watch("items",{deep:!0})],FormEngine.prototype,"watchItems",null),__decorate([Watch("rules",{deep:!0})],FormEngine.prototype,"watchRules",null),__decorate([Watch("formData",{deep:!0})],FormEngine.prototype,"watchFormData",null);var __vue_script__=FormEngine=__decorate([Component],FormEngine),__vue_render__=function(){var _vm=this,_c=_vm._self._c||_vm.$createElement;return _c("el-form",_vm._g(_vm._b({ref:"form",staticClass:"form-engine",attrs:{rules:_vm.newRules,model:_vm.newFormData,"validate-on-rule-change":_vm.getAttrValue(_vm.$attrs,"validate-on-rule-change",_vm.isChangeValidateRule),disabled:_vm.disabled}},"el-form",_vm.$attrs,!1),_vm.$listeners),[_c("el-row",_vm._b({},"el-row",_vm.getAttrValue(_vm.$attrs,"row-props",_vm.rowProps),!1),[_vm._l(_vm.newItems,(function(item,idx){return[_c("el-col",_vm._b({key:item.prop,attrs:{span:item.span||_vm.span}},"el-col",_vm.getAttrValue(item,"col-props",_vm.getAttrValue(this,"col-props",{})),!1),[item.formSlot?item.prop?_vm._t(item.prop,null,{item,value:_vm.newFormData[item.prop],rule:item.rules,items:_vm.newItems,formData:_vm.newFormData,rules:_vm.newRules,validate:function(cb){return _vm.validateField(item.prop,cb)}}):_vm._e():_c("el-form-item",_vm._g(_vm._b({ref:item.ref||item.prop,refInFor:!0,attrs:{prop:item.prop,label:item.label,rules:item.rules}},"el-form-item",_vm.getAttrValue(item,"form-item-props",{}),!1),_vm.getAttrValue(item,"form-item-on",{})),[item.slot?_vm._t(item.prop,null,{item,value:_vm.newFormData[item.prop],items:_vm.newItems,formData:_vm.newFormData}):[_vm.getComponentName(item.type)?_c(_vm.getComponentName(item.type),_vm._g(_vm._b({tag:"component",staticClass:"form-engine__item",attrs:{placeholder:_vm.getPlaceholder(item),type:item.type,clearable:_vm.getAttrValue(_vm.getAttrValue(item,"component-props",item),"clearable",_vm.getAttrValue(item,"clearable",_vm.clearable)),disabled:_vm.getAttrValue(_vm.getAttrValue(item,"component-props",item),"disabled",_vm.getAttrValue(item,"disabled",_vm.disabled)),readonly:_vm.getAttrValue(_vm.getAttrValue(item,"component-props",item),"readonly",_vm.getAttrValue(item,"readonly",_vm.readonly))},model:{value:_vm.newFormData[item.prop],callback:function($$v){_vm.$set(_vm.newFormData,item.prop,$$v)},expression:"newFormData[item.prop]"}},"component",_vm.getAttrValue(item,"component-props",{}),!1),_vm.getAttrValue(item,"component-on",{})),["select"===item.type?_vm._l(item.options||[],(function(subItem,idx){return _c("el-option",{key:idx,ref:item.ref,refInFor:!0,attrs:{disabled:subItem.disabled,value:subItem.value,label:subItem.label}})})):_vm._e()],2):_c("span",_vm._g(_vm._b({},"span",_vm.getAttrValue(item,"comp-props",{}),!1),_vm.getAttrValue(item,"comp-on",{})),[_vm._v("\n "+_vm._s(_vm.newFormData[item.prop])+"\n ")])]],2)],2),_vm._v(" "),item.row&&(item.span||_vm.span)&&(item.span||_vm.span)<24&&(item.span||_vm.span)>0?_c("el-col",{key:item.prop+"__row",attrs:{span:24-(item.span||_vm.span)}}):_vm._e(),_vm._v(" "),item.linefeed&&(item.span||_vm.span)&&(item.span||_vm.span)<24&&(item.span||_vm.span)>0?_c("el-col",{key:item.prop+"linefeed",attrs:{span:_vm.getLinefeedSpan(idx)}}):_vm._e()]})),_vm._v(" "),_vm._t("default",null,{items:_vm.newItems,formData:_vm.newFormData,rules:_vm.newRules})],2),_vm._v(" "),_vm._t("independent",null,{items:_vm.newItems,formData:_vm.newFormData,rules:_vm.newRules})],2)};__vue_render__._withStripped=!0;var __vue_component__=__vue_normalize__({render:__vue_render__,staticRenderFns:[]},undefined,__vue_script__,undefined,false,undefined,!1,void 0,void 0,void 0),pkg_version="1.2.4",install=function(){Vue$1.component("form-engine",__vue_component__)};"undefined"!=typeof window&&window.Vue&&install();var index={install,version:pkg_version};export default index;export{__vue_component__ as FormEngine,install};