@femessage/el-form-renderer
Version:
render form-item easily
2 lines (1 loc) • 13 kB
JavaScript
var ElFormRenderer=function(e,t,n,r,o,a,i,u,l,d,s,c,p,f,h,v){"use strict";function m(){}function y(e,t){return s(e.map(function(e){return{id:e.id,type:e.type,value:"group"===e.type?y(e.items,t):e[t]}}).filter(function(e){var t=e.type,n=e.value;return void 0!==n||"group"===t&&Object.keys(n).length}).map(function(e){return[e.id,e.value]}))}function b(e,t){var n=(arguments.length>2&&void 0!==arguments[2]?arguments[2]:{}).strict,o=void 0!==n&&n,a=o?{}:r({},e);return Object.keys(e).forEach(function(n){var r=t.find(function(e){return e.id===n});if(r)if("group"!==r.type)if(r.outputFormat){var i=r.outputFormat(e[n]);c(i)?Object.assign(a,i):a[n]=i}else a[n]=e[n];else a[n]=b(e[n],r.items,{strict:o})}),a}function _(e,t){var n=r({},e);return t.forEach(function(t){var r=t.id;if(t.inputFormat){var o=t.inputFormat(e);void 0!==o&&(n[r]=o)}else r in e&&("group"!==t.type?n[r]=e[r]:n[r]=_(e[r],t.items))}),n}t=t&&t.hasOwnProperty("default")?t.default:t,n=n&&n.hasOwnProperty("default")?n.default:n,r=r&&r.hasOwnProperty("default")?r.default:r,o=o&&o.hasOwnProperty("default")?o.default:o,a=a&&a.hasOwnProperty("default")?a.default:a,i=i&&i.hasOwnProperty("default")?i.default:i,u=u&&u.hasOwnProperty("default")?u.default:u,l=l&&l.hasOwnProperty("default")?l.default:l,d=d&&d.hasOwnProperty("default")?d.default:d,s=s&&s.hasOwnProperty("default")?s.default:s,c=c&&c.hasOwnProperty("default")?c.default:c,p=p&&p.hasOwnProperty("default")?p.default:p,f=f&&f.hasOwnProperty("default")?f.default:f,h=h&&h.hasOwnProperty("default")?h.default:h,v=v&&v.hasOwnProperty("default")?v.default:v;var g=function(e,t,n,r,o,a,i,u,l,d){"boolean"!=typeof i&&(l=u,u=i,i=!1);var s,c="function"==typeof n?n.options:n;if(e&&e.render&&(c.render=e.render,c.staticRenderFns=e.staticRenderFns,c._compiled=!0,o&&(c.functional=!0)),r&&(c._scopeId=r),a?(s=function(e){(e=e||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext)||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),t&&t.call(this,l(e)),e&&e._registeredComponents&&e._registeredComponents.add(a)},c._ssrRegister=s):t&&(s=i?function(){t.call(this,d(this.$root.$options.shadowRoot))}:function(e){t.call(this,u(e))}),s)if(c.functional){var p=c.render;c.render=function(e,t){return s.call(t),p(e,t)}}else{var f=c.beforeCreate;c.beforeCreate=f?[].concat(f,s):[s]}return n};const O={components:{CustomComponent:{functional:!0,render:function(e,t){return e(t.props.component,t.data,t.children)}},VNode:{functional:!0,render:function(e,t){return t.props.content}}},inject:["elFormRenderer","elForm"],props:{data:Object,prop:{type:String,default:function(){return this.data.id}},itemValue:{},value:Object,disabled:Boolean,readonly:Boolean,options:Array},data:function(){return{loading:!1,propsInner:{},isBlurTrigger:this.data.rules&&this.data.rules.some(function(e){return e.required&&"blur"===e.trigger})}},computed:{componentProps:function(e){var t=e.data.el,n=e.propsInner;return r({},t,n)},hasReadonlyContent:function(e){var t=e.data.type;return p(["input","select"],t)},hiddenStatus:function(e){var t=e.data.hidden,n=void 0===t?function(){return!1}:t,r=e.data;return n(e.value,r)},enableWhenStatus:function(e){return function(e,t){if(!e)return!0;var n=function(e){return"string"==typeof e?d(t,e):Object.keys(e).every(function(n){var r=l(t,n);return void 0!==r&&r===e[n]})};return Array.isArray(e)?e.some(n):n(e)}(e.data.enableWhen,e.value)},_show:function(){return!this.hiddenStatus&&this.enableWhenStatus},listeners:function(){var e=this,t=this.data,n=t.id,o=t.atChange,a=void 0===o?m:o,i=t.on,l=void 0===i?{}:i,d=t.on,c=(d=void 0===d?{}:d).input,p=void 0===c?m:c,h=d.change,v=void 0===h?m:h,y=t.trim,b=void 0===y||y,_=this.$parent.$parent.updateForm;return r({},s(f(l).map(function(e){var t=u(e,2),n=t[0],r=t[1];return[n,function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return r(t,_)}]})),{input:function(t){e.$emit("updateValue",{id:n,value:t}),a(n,t);for(var r=arguments.length,o=new Array(r>1?r-1:0),i=1;i<r;i++)o[i-1]=arguments[i];p([t].concat(o),_),e.triggerValidate(n)},change:function(t){"string"==typeof t&&b&&(t=t.trim()),e.$emit("updateValue",{id:n,value:t});for(var r=arguments.length,o=new Array(r>1?r-1:0),a=1;a<r;a++)o[a-1]=arguments[a];v([t].concat(o),_),e.triggerValidate(n)}})},multipleValue:function(e){var t=e.data,n=e.itemValue,r=e.options,o=void 0===r?[]:r;return(l(t,"el.multiple")&&Array.isArray(n)?n:[n]).map(function(e){return(o.find(function(t){return t.value===e})||{}).label}).join()}},watch:{data:function(e){if(!e)throw new Error("data must be an Object.");if(!e.id)throw new Error("`id` is unvalidated.");if(!e.type&&!e.component)throw new Error("`type` and `component` cannot both be null.")},"data.remote.request":{handler:function(e,t){e&&"function"==typeof e&&e!==t&&this.makingRequest(this.data.remote)},immediate:!0},"data.remote.url":{handler:function(e,t){var n=this;if(e&&e!==t&&(t||!this.data.remote.request)){var r=this.data.remote.request||function(){return n.$axios.get(e).then(function(e){return e.data})};this.makingRequest(Object.assign({},this.data.remote,{request:r}))}},immediate:!0}},methods:{triggerValidate:function(e){var t=this;this.data.rules&&this.data.rules.length&&(this.isBlurTrigger||this.$nextTick(function(){t.elForm&&t.elForm.validateField(e)}))},optionKey:function(e){if(e.value instanceof Object){if(!this.data.el||!this.data.el.valueKey)return;return e.value[this.data.el.valueKey]}return e.value},makingRequest:function(e,t){var r=this,o=["select","checkbox-group","radio-group"].indexOf(this.data.type)>-1,a=e.request,i=e.prop,u=void 0===i?"options":i,d=e.dataPath,s=void 0===d?"":d,c=e.onResponse,p=void 0===c?function(e){return s&&(e=l(e,s)),o?e.map(function(e){return{label:e[m],value:e[b]}}):e}:c,f=e.onError,h=void 0===f?function(e){console.error(e.message),r.loading=!1}:f,v=e.label,m=void 0===v?"label":v,y=e.value,b=void 0===y?"value":y;this.loading=!0,Promise.resolve(a(t)).then(p,h).then(function(e){o?r.elFormRenderer&&r.elFormRenderer.setOptions(r.prop,e):r.propsInner=n({},u,e),r.loading=!1})},remoteMethod:function(e){"select"===l(this.data,"type")&&l(this.data,"el.filterable")&&l(this.data,"el.remote")&&this.makingRequest(this.data.remote,e)}}};var w=function(){var e=this,t=e.$createElement,n=e._self._c||t;return e._show?n("el-form-item",e._b({staticClass:"render-form-item",attrs:{prop:e.prop,label:"string"==typeof e.data.label?e.data.label:"",rules:!e.readonly&&Array.isArray(e.data.rules)?e.data.rules:void 0}},"el-form-item",e.data.attrs,!1),["string"!=typeof e.data.label?n("v-node",{attrs:{slot:"label",content:e.data.label},slot:"label"}):e._e(),e._v(" "),e.readonly&&e.hasReadonlyContent?["input"===e.data.type?n("el-input",e._g(e._b({attrs:{value:e.itemValue,readonly:""}},"el-input",e.componentProps,!1),e.listeners)):"select"===e.data.type?n("div",[[e._v("\n "+e._s(e.multipleValue)+"\n ")]],2):e._e()]:n("custom-component",e._g(e._b({ref:"customComponent",attrs:{component:e.data.component||"el-"+(e.data.type||"input"),value:e.itemValue,disabled:e.disabled||e.componentProps.disabled||e.readonly,loading:e.loading,"remote-method":e.data.remoteMethod||e.componentProps.remoteMethod||e.remoteMethod}},"custom-component",e.componentProps,!1),e.listeners),[e._l(e.options,function(t,r){return["select"===e.data.type?n("el-option",e._b({key:e.optionKey(t)||r},"el-option",t,!1)):"checkbox-group"===e.data.type&&"button"===e.data.style?n("el-checkbox-button",e._b({key:t.value,attrs:{label:"value"in t?t.value:t.label}},"el-checkbox-button",t,!1),[e._v("\n "+e._s(t.label)+"\n ")]):"checkbox-group"===e.data.type&&"button"!==e.data.style?n("el-checkbox",e._b({key:t.value,attrs:{label:"value"in t?t.value:t.label}},"el-checkbox",t,!1),[e._v("\n "+e._s(t.label)+"\n ")]):"radio-group"===e.data.type&&"button"===e.data.style?n("el-radio-button",e._b({key:t.label,attrs:{label:"value"in t?t.value:t.label}},"el-radio-button",t,!1),[e._v(e._s(t.label))]):"radio-group"===e.data.type&&"button"!==e.data.style?n("el-radio",e._b({key:t.label,attrs:{label:"value"in t?t.value:t.label}},"el-radio",t,!1),[e._v(e._s(t.label))]):e._e()]})],2)],2):e._e()};w._withStripped=!0;var F=g({render:w,staticRenderFns:[]},void 0,O,void 0,!1,void 0,void 0,void 0);const V={components:{RenderFormItem:F},props:{data:Object,itemValue:{},value:Object,disabled:Boolean,readonly:Boolean,options:Object},methods:{updateValue:function(e){var t=e.id,o=e.value;this.$emit("updateValue",{id:this.data.id,value:r({},this.itemValue,n({},t,o))})}}};var C=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("div",[e._l(e.data.items,function(t,r){return[e._t("id:"+t.id),e._v(" "),e._t("$id:"+t.id),e._v(" "),n("render-form-item",{key:r,ref:"formItem-"+t.id,refInFor:!0,attrs:{prop:e.data.id+"."+t.id,data:t,value:e.value,"item-value":e.itemValue[t.id],disabled:e.disabled,readonly:e.readonly,options:e.options[t.id]},on:{updateValue:e.updateValue}})]})],2)};C._withStripped=!0;var $=g({render:C,staticRenderFns:[]},void 0,V,void 0,!1,void 0,void 0,void 0);function k(e){return e.map(function(e){var n=h({},e);return"group"===n.type?n.items=k(n.items):(!function(e){Object.keys(e).filter(function(t){return t.startsWith("$")&&!(t.slice(1)in e)}).forEach(function(t){return e[t.slice(1)]=e[t],delete e[t]})}(n),function(e){if(e.id)return;e.id=e.name||e.prop}(n),function(e){if(e.overrideRules)return;var n=e.component;if(!n||"string"==typeof n)return;var r=n.rules,o=void 0===r?[]:r;e.rules=[].concat(t(e.rules||[]),t("function"==typeof o?o(e):o))}(n),n.type=v(n.type)),n})}const R={name:"ElFormRenderer",components:{RenderFormItem:F,RenderFormGroup:$},provide:function(){return{elFormRenderer:this}},model:{prop:"form",event:"input"},props:{content:{type:Array,required:!0},disabled:{type:[Boolean,Function],default:!1},readonly:{type:Boolean,default:!1},form:{type:Object,default:void 0}},data:function(){return{GROUP:"group",value:{},options:{},initValue:null}},computed:{innerContent:function(e){return k(e.content)}},watch:{form:{handler:function(e){e&&this.setValueFromModel()},immediate:!0,deep:!0},innerContent:{handler:function(e){this.options=r({},this.options,y(e,"options")),this.setValueFromModel()},immediate:!0},value:{handler:function(e,t){e&&!a(e,t)&&this.$emit("input",b(e,this.innerContent))}}},mounted:function(){var e=this;this.initValue=i(this.value),this.$nextTick(function(){Object.keys(e.$refs.elForm.$options.methods).forEach(function(t){t in e||(e[t]=e.$refs.elForm[t])}),e.clearValidate()})},methods:{resetFields:function(){this.value=i(this.initValue),this.$nextTick(this.clearValidate)},setValueFromModel:function(){if(this.innerContent.length){var e=this.form?_(this.form,this.innerContent):y(this.innerContent,"default");!function e(t,n){n.forEach(function(n){var r=n.type,o=n.id,a=n.items;switch(r){case"group":o in t||(t[o]={}),e(t[o],a);break;case"checkbox-group":o in t||(t[o]=[])}})}(e,this.innerContent),a(this.value,e)||(this.value=e)}},updateValue:function(e){var t=e.id,o=e.value;this.value=r({},this.value,n({},t,o))},getFormValue:function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).strict,t=void 0!==e&&e;return b(this.value,this.innerContent,{strict:t})},updateForm:function(e){e=_(e,this.innerContent),function e(t,n,r){Object.keys(n).forEach(function(o){var a=r.find(function(e){return e.id===o})||{};"group"!==a.type?t[o]=n[o]:e(t[o],n[o],a.items)})}(this.value,e,this.innerContent),this.value=r({},this.value)},setOptions:function(e,t){o(this.options,e,t),this.options=r({},this.options)},getComponentById:function(e){var n=[];this.content.forEach(function(e){if("group"===e.type){var r=e.items.map(function(t){return t.groupId=e.id,t});n.push.apply(n,t(r))}else n.push(e)});var r=n.find(function(t){return t.id===e});if(r)return r.groupId?this.$refs[r.groupId][0].$refs["formItem-".concat(e)][0].$refs.customComponent:this.$refs[e][0].$refs.customComponent}}};var P=function(){var e=this,t=e.$createElement,n=e._self._c||t;return n("el-form",e._b({ref:"elForm",staticClass:"el-form-renderer",attrs:{model:e.value}},"el-form",e.$attrs,!1),[e._l(e.innerContent,function(t){return[e._t("id:"+t.id),e._v(" "),e._t("$id:"+t.id),e._v(" "),n(t.type===e.GROUP?"render-form-group":"render-form-item",{key:t.id,ref:t.id,refInFor:!0,tag:"component",attrs:{data:t,value:e.value,"item-value":e.value[t.id],disabled:e.disabled||("function"==typeof t.disabled?t.disabled(e.value):t.disabled),readonly:e.readonly||t.readonly,options:e.options[t.id]},on:{updateValue:e.updateValue}})]}),e._v(" "),e._t("default")],2)};P._withStripped=!0;var j=g({render:P,staticRenderFns:[]},void 0,R,void 0,!1,void 0,void 0,void 0);j.install=function(e){e.component(j.name,j)};var E=null;return"undefined"!=typeof window?E=window.Vue:"undefined"!=typeof global&&(E=global.Vue),E&&E.use(j),e.default=j,e}({},_toConsumableArray,_defineProperty,_objectSpread,_set,_isequal,_clonedeep,_slicedToArray,_get,_has,_frompairs,_isplainobject,_includes,_topairs,_extends,_kebabcase);