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

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.WidgetRowViewComponent=exports.WidgetRowEditComponent=void 0;var _vue=require("vue"),_util=require("../src/util"),_core=require("@vxe-ui/core"),_vn=require("../../ui/src/vn"),_xeUtils=_interopRequireDefault(require("xe-utils")),_formGroup=_interopRequireDefault(require("../../form/src/form-group")),_formItem=_interopRequireDefault(require("../../form/src/form-item")),_row=_interopRequireDefault(require("../../row/src/row")),_col=_interopRequireDefault(require("../../row/src/col")),_button=_interopRequireDefault(require("../../button/src/button"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const ViewColItemComponent=(0,_vue.defineComponent)({name:"ViewColItem",props:{parentWidget:{type:Object,default:()=>({})},widget:{type:Object,default:()=>({})},span:Number,colItemIndex:{type:Number,default:0}},emits:[],setup(m){const p=(0,_vue.inject)("$xeFormDesign",null);if(!p)return()=>[];const c=p["reactData"],s=e=>{e.stopPropagation();var t=e.currentTarget,e=e.dataTransfer,t=t.getAttribute("data-widget-id")||"",r=p.getWidgetById(t);e&&e.setData("text/plain",t),c.sortWidget=r,c.dragWidget=null},l=e=>{const{parentWidget:t,colItemIndex:r}=m,{widgetObjList:i,sortWidget:n}=c;var o=t.children[r],d=p.internalData;if(e.stopPropagation(),n&&t&&n.id!==t.id&&!(0,_util.hasFormDesignLayoutType)(n)&&!(0,_util.hasFormDesignLayoutType)(o)){var a=_xeUtils.default.findTree(i,e=>e&&e.id===n.id,{children:"children"});if(a){var{item:a,index:u,items:s,parent:l}=a;if(t.children.length!==t.options.colSize&&(t.children=_xeUtils.default.range(0,t.options.colSize).map(e=>t.children[e]||p.createEmptyWidget())),l&&l.id===t.id)t.children[r]=a,t.children[u]=o;else{if(o&&o.name)return;t.children[r]=a,s.splice(u,1)}e.preventDefault(),d.lastDragTime=Date.now(),p.dispatchEvent("drag-widget",{widget:a},e)}}};return()=>{const{widget:o,span:e}=m,{dragWidget:d,activeWidget:a,sortWidget:u}=c;return(0,_vue.h)(_formItem.default,{span:e,padding:!1},{default(){var e=o?o.name:"",t=_core.renderer.get(e)||{},t=t.renderFormDesignWidgetEdit||t.renderFormDesignWidgetView,e=o||{name:e},r={widget:o,readonly:!1,disabled:!1,isEditMode:!0,isViewMode:!1,$formDesign:p,$formView:null},i=a&&o&&a.id===o.id,n=!t;return(0,_vue.h)("div",{class:"vxe-form-design--widget-row-view","data-widget-id":o.id,draggable:!n,onDragstart:s,onDragenter:l,onClick(e){o&&p.handleClickWidget(e,o)}},[(0,_vue.h)("div",{class:["vxe-form-design--widget-row-view-item-inner",{"is--empty":n,"is--active":i,"is--sort":u&&o&&u.id===o.id,"is--drag":d&&o&&d.id===o.id}]},[t?(0,_vue.h)("div",{class:"vxe-form-design--widget-row-view-item-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--widget-row-view-item-box vxe-form--item-row"},(0,_vn.getSlotVNs)(t(e,r))),i?(0,_vue.h)("div",{class:"vxe-form-design--preview-item-operate"},[(0,_vue.h)(_button.default,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_COPY,status:"primary",size:"mini",circle:!0,onClick(e){p.handleCopyWidget(e.$event,o)}}),(0,_vue.h)(_button.default,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_DELETE,status:"danger",size:"mini",circle:!0,onClick(e){p.handleRemoveWidget(e.$event,o)}})]):(0,_vue.createCommentVNode)()]):(0,_vue.h)("div",{class:"vxe-form-design--widget-row-view-empty"},"控件位置")])])}})}}}),WidgetRowEditComponent=exports.WidgetRowEditComponent=(0,_vue.defineComponent)({name:"WidgetRowEdit",props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(t){const i=(0,_vue.computed)(()=>{var e=t["renderParams"],e=e["widget"],e=e["options"],e=e["colSpan"];return(e?(""+e).split(","):[]).map(e=>Number(e))});return()=>{var e=t["renderParams"];const r=e["widget"];return(0,_vue.h)(_formGroup.default,{field:r.field},{default(){return i.value.map((e,t)=>(0,_vue.h)(ViewColItemComponent,{key:t,parentWidget:r,widget:r.children[t],span:e,colItemIndex:t}))}})}}}),WidgetRowViewComponent=exports.WidgetRowViewComponent=(0,_vue.defineComponent)({name:"WidgetRowView",props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(r){const d=(0,_vue.inject)("$xeFormDesign",null),a=(0,_vue.inject)("$xeFormView",null),i=(0,_vue.computed)(()=>{var e=r["renderParams"],e=e["widget"],e=e["options"],e=e["colSpan"];return(e?(""+e).split(","):[]).map(e=>Number(e))});return()=>{var e=r["renderParams"];const o=e["widget"],t=i.value;return(0,_vue.h)(_row.default,{},{default(){return t.map((e,n)=>(0,_vue.h)(_col.default,{key:n,class:"vxe-form--item-row",span:e},{default(){var e=o.children[n];if(e){var t=e["name"],t=(_core.renderer.get(t)||{}).renderFormDesignWidgetView,r=e,i=!!d,e={widget:e,readonly:!1,disabled:!1,isEditMode:i,isViewMode:!i,$formDesign:d,$formView:a};if(t)return(0,_vn.getSlotVNs)(t(r,e))}return(0,_vue.createCommentVNode)()}}))}})}}});