vxe-pc-ui
Version:
A vue based PC component library
1 lines • 7.2 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_ui=require("../../ui"),_dom=require("../../ui/src/dom"),_widgetInfo=require("./widget-info"),_xeUtils=_interopRequireDefault(require("xe-utils")),_button=_interopRequireDefault(require("../../button/src/button")),_layoutWidget=_interopRequireDefault(require("./layout-widget")),_layoutPreview=_interopRequireDefault(require("./layout-preview")),_layoutSetting=_interopRequireDefault(require("./layout-setting")),_layoutStyle=_interopRequireDefault(require("./layout-style")),_defaultSettingData=require("./default-setting-data");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeFormDesign",props:{size:{type:String,default:()=>(0,_ui.getConfig)().formDesign.size||(0,_ui.getConfig)().size},config:Object,height:{type:[String,Number],default:()=>(0,_ui.getConfig)().formDesign.height},widgets:{type:Array,default:()=>_xeUtils.default.clone((0,_ui.getConfig)().formDesign.widgets)||[]},showHeader:{type:Boolean,default:()=>(0,_ui.getConfig)().formDesign.showHeader},showPc:{type:Boolean,default:()=>(0,_ui.getConfig)().formDesign.showPc},showMobile:{type:Boolean,default:()=>(0,_ui.getConfig)().formDesign.showMobile},formRender:Object},emits:["click-widget","add-widget","copy-widget","remove-widget","drag-widget"],setup(u,e){const{emit:r,slots:d}=e;var t=_xeUtils.default.uniqueId();const o=(0,_vue.ref)(),a=(0,_vue.ref)(),g=(0,_ui.useSize)(u)["computeSize"],l=(0,_vue.reactive)({formData:{},widgetConfigs:[],widgetObjList:[],dragWidget:null,sortWidget:null,activeWidget:null});var i=(0,_vue.reactive)({});const n={refElem:o},s={computeSize:g},f={xID:t,props:u,context:e,reactData:l,internalData:i,getRefMaps:()=>n,getComputeMaps:()=>s},c=e=>new _widgetInfo.FormDesignWidgetInfo(f,e,l.widgetObjList),v=()=>new _widgetInfo.FormDesignWidgetInfo(f,"",l.widgetObjList),_=e=>{var t;e&&({formConfig:e,widgetData:t}=e,e&&m(e),t)&&w(t);const{activeWidget:i,widgetObjList:r}=l;return i?(e=_xeUtils.default.findTree(r,e=>e.id===i.id,{children:"children"}),l.activeWidget=e?e.item:r[0]||null):l.activeWidget=r[0]||null,(0,_vue.nextTick)()};const h=()=>_xeUtils.default.clone(l.formData,!0),m=e=>(l.formData=Object.assign({},W(),e),(0,_vue.nextTick)());const p=()=>{var e=_xeUtils.default.clone(l.widgetObjList,!0);return _xeUtils.default.eachTree(e,e=>{e.model.value=null},{children:"children"}),e},w=e=>(l.widgetObjList=(e||[]).map(e=>(0,_widgetInfo.configToWidget)(e)),(0,_vue.nextTick)()),x=()=>{var e=a.value;return e&&e.openStylePreview(),(0,_vue.nextTick)()},D=()=>(l.widgetObjList=[],q(),(0,_vue.nextTick)()),y={dispatchEvent(e,t,i){r(e,(0,_ui.createEvent)(i,{$xeFormDesign:f},t))},createWidget:c,createEmptyWidget:v,getConfig(){return{formConfig:h(),widgetData:p()}},clearConfig:D,loadConfig:_,reloadConfig:e=>(D(),_(e)),getFormConfig:h,loadFormConfig:m,getWidgetById:e=>{var t=l["widgetObjList"];if(e){const i=_xeUtils.default.toNumber(e);e=_xeUtils.default.findTree(t,e=>e&&e.id===i,{children:"children"});if(e)return e.item}return null},getFormData(){var e=l["widgetObjList"];const t={};return _xeUtils.default.eachTree(e,e=>{t[e.field]=null},{children:"children"}),t},getWidgetData:p,loadWidgetData:w,refreshPreviewView(){var e=a.value;return e&&e.updatePreviewView(),(0,_vue.nextTick)()},openStyleSetting:x},b=()=>{var e=u["widgets"],t=[];const n=[],d=[],o=[],a=[];_ui.renderer.forEach((e,t)=>{e=e.createFormDesignWidgetConfig;if(e){var i=c(t),e=(0,_widgetInfo.getWidgetConfig)(t);const r=(0,_widgetInfo.getWidgetConfigCustomGroup)(t,f);if(r){t=a.find(e=>e.title===r);t?t.children.push(i):a.push({title:r,children:[i]})}else switch(e.group){case"layout":d.push(i);break;case"advanced":o.push(i);break;default:["title"].includes(i.name)||n.push(i)}}}),n.length&&t.push({group:"base",children:n}),d.length&&t.push({group:"layout",children:d}),o.length&&t.push({group:"advanced",children:o}),a.length&&t.push(...a),e&&e.length?l.widgetConfigs=u.widgets.map(e=>({title:e.customGroup,group:e.group,children:e.children?e.children.map(e=>{return c(e)}):[]})):l.widgetConfigs=t},C=t=>{var e=l["widgetObjList"];if((0,_widgetInfo.getWidgetConfig)(t).unique){const i=[];_xeUtils.default.eachTree(e,e=>{e.name===t&&i.push(e)},{children:"children"});e=i.length<1;return e||_ui.VxeUI.modal&&_ui.VxeUI.modal.message({content:(0,_ui.getI18n)("vxe.formDesign.error.wdFormUni"),status:"error",id:"wdFormUni"}),e}return!0};t={validWidgetUnique:C,handleClickWidget(e,t){t&&t.name&&(e.stopPropagation(),l.activeWidget=t,y.dispatchEvent("click-widget",{widget:t},e))},handleCopyWidget(e,t){var i,r=l["widgetObjList"],n=_xeUtils.default.findTree(r,e=>e.id===t.id,{children:"children"});n&&(e.stopPropagation(),C(t.name))&&(n=n["path"],n=Number(n[0]),(i=c(t.name)).title&&(i.title=(0,_ui.getI18n)("vxe.formDesign.widget.copyTitle",[(""+t.title).replace((0,_ui.getI18n)("vxe.formDesign.widget.copyTitle",[""]),"")])),n>=r.length-1?r.push(i):r.splice(n+1,0,i),l.activeWidget=i,l.widgetObjList=[...r],y.dispatchEvent("copy-widget",{widget:t,newWidget:i},e))},handleRemoveWidget(e,t){var i,r,n=l["widgetObjList"],d=_xeUtils.default.findTree(n,e=>e.id===t.id,{children:"children"});d&&({index:d,parent:i,items:r}=d,e.stopPropagation(),d>=r.length-1?l.activeWidget=r[d-1]:l.activeWidget=r[d+1]||null,i&&"row"===i.name?r[d]=v():r.splice(d,1),l.widgetObjList=[...n],y.dispatchEvent("remove-widget",{widget:t},e))}};const W=()=>{var{formRender:e,showPc:t,showMobile:i}=u;let r=(0,_defaultSettingData.getDefaultSettingFormData)({pcVisible:t,mobileVisible:i});return e&&(i=(t=_ui.renderer.get(e.name))?t.createFormDesignSettingFormConfig:null,r=(i?i({}):{})||{}),r},q=()=>{l.formData=W()},I=()=>{x()};Object.assign(f,y,t);return f.renderVN=()=>{var{height:e,showHeader:t}=u,i=g.value,r=d.header,n=d.footer;return(0,_vue.h)("div",{ref:o,class:["vxe-form-design",{["size--"+i]:i}],style:e?{height:(0,_dom.toCssUnit)(e)}:null},[t||r?(0,_vue.h)("div",{class:"vxe-form-design--header"},r?r({}):(i=d.extra,(0,_vue.h)("div",{class:"vxe-form-design--header-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--header-left"}),(0,_vue.h)("div",{class:"vxe-form-design--header-middle"}),(0,_vue.h)("div",{class:"vxe-form-design--header-right"},[i?(0,_vue.h)("div",{class:"vxe-form-design--header-extra"},i({})):(0,_ui.renderEmptyElement)(f),(0,_vue.h)("div",{class:"vxe-form-design--header-setting"},[(0,_vue.h)(_button.default,{mode:"text",status:"primary",icon:(0,_ui.getIcon)().FORM_DESIGN_STYLE_SETTING,content:(0,_ui.getI18n)("vxe.formDesign.styleSetting.btn"),onClick:I})])])]))):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-form-design--body"},[(0,_vue.h)(_layoutWidget.default),(0,_vue.h)(_layoutPreview.default),(0,_vue.h)(_layoutSetting.default),(0,_vue.h)(_layoutStyle.default,{ref:a})]),n?(0,_vue.h)("div",{class:"vxe-form-design--footer"},n?n({}):[]):(0,_vue.createCommentVNode)()])},(0,_vue.watch)(()=>u.widgets,()=>{b()}),(0,_vue.watch)(()=>u.widgets,()=>{b()}),(0,_vue.watch)(()=>u.config,e=>{_(e||{})}),q(),b(),u.config&&_(u.config),(0,_vue.provide)("$xeFormDesign",f),f},render(){return this.renderVN()}});