vxe-pc-ui/lib/form-design/src/form-view.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui"),_vn=require("../../ui/src/vn"),_defaultSettingData=require("./default-setting-data"),_form=_interopRequireDefault(require("../../form/src/form")),_formGroup=_interopRequireDefault(require("../../form/src/form-group")),_formItem=_interopRequireDefault(require("../../form/src/form-item")),_widgetInfo=require("./widget-info"),_log=require("../../ui/src/log");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeFormView",props:{modelValue:Object,config:Object,readonly:Boolean,disabled:Boolean,viewRender:Object,formOptions:Object,createFormConfig:Function,size:{type:String,default:()=>(0,_ui.getConfig)().formView.size||(0,_ui.getConfig)().size}},emits:["update:modelValue","submit","reset"],setup(f,e){const{emit:i,slots:m}=e;var t=_xeUtils.default.uniqueId();const v=(0,_vue.ref)(),g=(0,_vue.ref)(),c=(0,_ui.useSize)(f)["computeSize"],_=(0,_vue.inject)("$xeFormDesignLayoutStyle",null),p=(0,_vue.reactive)({formConfig:{},formRules:{},widgetObjList:[]}),r={refElem:v},a={computeSize:c},V={xID:t,props:f,context:e,reactData:p,getRefMaps:()=>r,getComputeMaps:()=>a};const o=e=>{var t;return e&&({formConfig:e,widgetData:t}=e,n(e||{}),s(t||[])),(0,_vue.nextTick)()};const u=e=>{var{viewRender:t,createFormConfig:r,formOptions:i}=f,e={viewRender:t,formConfig:e};return r?r(e):(r=(t||{})["name"],r=(t=_ui.renderer.get(r)||{})?t.createFormViewFormConfig:null,Object.assign({},(r||_defaultSettingData.createDefaultFormViewPCFormConfig)(e),i))},n=e=>(p.formConfig=u(e),(0,_vue.nextTick)()),d=e=>{const o={},u={};return _xeUtils.default.eachTree(e,e=>{var{name:t,field:r,required:i}=e,t=_ui.renderer.get(t)||{},a=t.createFormDesignWidgetFieldValue,t=t.createFormDesignWidgetFieldRules;o[r]=a?a({widget:e,$formView:V}):w(e),t?(a=t({widget:e,$formView:V}))&&a.length&&(u[r]=a):i&&(u[r]=b())},{children:"children"}),{formData:o,formRules:u}},l=e=>(e||[]).map(e=>(0,_widgetInfo.configToWidget)(e)),s=e=>{var e=l(e),{formData:e,formRules:t}=(p.widgetObjList=e,d(e));return p.formRules=t,i("update:modelValue",Object.assign(e,f.modelValue)),(0,_vue.nextTick)()},w=e=>"subtable"===e.name?[]:null,b=()=>[{required:!0,content:"该填写该字段！"}],D=(e,t)=>{var e=e["field"],r=g.value;return r&&r.updateStatus({field:e},t),(0,_vue.nextTick)()};const x=(e,t,r)=>{i(e,(0,_ui.createEvent)(r,{$formView:V},t))},C=e=>e?_xeUtils.default.isArray(e)?e.map(e=>e.name):[e.name]:null;t={dispatchEvent:x,clearConfig:()=>o({formConfig:{},widgetData:[]}),loadConfig:o,parseConfig:e=>{var{formConfig:e,widgetData:t}=e||{},t=l(t||[]);return Object.assign(Object.assign({},d(t)),{formConfig:u(e||{}),widgetData:t})},loadFormConfig:n,loadWidgetData:s,updateWidgetStatus:D,setItemValue:(e,t)=>{var r=f["modelValue"],e=e["field"],i=g.value;return r&&(r[e]=t),i&&i.updateStatus({field:e},t),(0,_vue.nextTick)()},getItemValue:e=>{var t=f["modelValue"];return t?t[e.field]:null},validate(){var e=g.value;return e?e.validate():(0,_vue.nextTick)()},validateWidget(e){var t=g.value;return t?t.validateField(C(e)):(0,_vue.nextTick)()},clearValidate(e){var t=g.value;return t?t.clearValidate(C(e)):(0,_vue.nextTick)()},reset(){var e=p["widgetObjList"],e=d(e)["formData"];return i("update:modelValue",Object.assign({},e)),(0,_vue.nextTick)()},updateItemStatus(e,t){return"development"===process.env.NODE_ENV&&(0,_log.warnLog)("vxe.error.delFunc",["updateItemStatus","updateWidgetStatus"]),D(e,t)}};const F=e=>{x("submit",e,e.$event)},O=e=>{x("reset",e,e.$event)};Object.assign(V,t,{});return V.renderVN=()=>{var{readonly:e,disabled:t,modelValue:r}=f;const{formConfig:i,formRules:a,widgetObjList:o}=p;var u=c.value,n=m.top,d=m.bottom;const l=m.header,s=m.footer;return(0,_vue.h)("div",{ref:v,class:["vxe-form-view",{["size--"+u]:u}]},[n?(0,_vue.h)("div",{class:"vxe-form-view--top"},(0,_vn.getSlotVNs)(n({$formView:V}))):(0,_vue.createCommentVNode)(),(0,_vue.h)(_form.default,Object.assign(Object.assign({ref:g},i),{data:r,customLayout:!0,readonly:e,disabled:t,span:24,rules:a,onSubmit:F,onReset:O}),{default(){const{readonly:n,disabled:d}=f;return[l?(0,_vue.h)(_formItem.default,{},{default(){return l({})}}):(0,_vue.createCommentVNode)(),...o.map(e=>{var t=e["name"],t=_ui.renderer.get(t)||{};const r=t.renderFormDesignWidgetView,i=t.renderFormDesignWidgetPreview,a=t.renderFormDesignWidgetMobilePreview;t=!!_;const o=e,u={widget:e,readonly:!!n,disabled:!!d,isEditMode:t,isViewMode:!t,$formDesign:null,$formView:V};return(0,_vue.h)(_formGroup.default,{key:e.id},{default(){if(_)if(2===_.reactData.activeTab){if(a)return(0,_vn.getSlotVNs)(a(o,u))}else if(i)return(0,_vn.getSlotVNs)(i(o,u));return r?(0,_vn.getSlotVNs)(r(o,u)):[]}})}),s?(0,_vue.h)(_formGroup.default,{span:24},{default(){return s({})}}):(0,_vue.createCommentVNode)()]}}),d?(0,_vue.h)("div",{class:"vxe-form-view--bottom"},(0,_vn.getSlotVNs)(d({$formView:V}))):(0,_vue.createCommentVNode)()])},(0,_vue.watch)(()=>f.config,e=>{o(e||{})}),f.config&&o(f.config),(0,_vue.provide)("$xeFormView",V),V},render(){return this.renderVN()}});