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

A PC-based visual designer based on Vxe UI, used for building zero-code and low-code platforms

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