vxe-design/lib/form-design/widget-subtable/subtable-view.min.js

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

Object.defineProperty(exports,"__esModule",{value:!0}),exports.WidgetSubtableViewComponent=exports.WidgetSubtableEditComponent=void 0;var _vue=require("vue"),_comp=require("../../ui/src/comp"),_core=require("@vxe-ui/core"),_xeUtils=_interopRequireDefault(require("xe-utils")),_util=require("../src/util"),_vn=require("../../ui/src/vn"),_use=require("../../form-design/src/use");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}let ViewSubItemComponent=(0,_comp.defineVxeComponent)({props:{parentWidget:{type:Object,default:()=>({})},widget:{type:Object,default:()=>({})},childIndex:{type:Number,default:0}},emits:[],setup(g){let m=_core.VxeUI.getComponent("vxe-form-item"),v=_core.VxeUI.getComponent("vxe-button"),c=(0,_vue.inject)("$xeFormDesign",null),p=(0,_vue.inject)("$xeFormView",null);if(!c)return()=>[];let b=c.reactData,w=e=>{e.stopPropagation();var t=e.currentTarget,e=e.dataTransfer,t=t.getAttribute("data-widget-id")||"",i=c.getWidgetById(t);e&&e.setData("text/plain",t),b.sortWidget=i,b.dragWidget=null},_=e=>{var{parentWidget:t,childIndex:i}=g;let{widgetObjList:r,sortWidget:d}=b;var n,o,a,l=t.children[i],s=c.internalData,u=s.lastDragTime;e.stopPropagation(),u&&u>Date.now()-300?e.preventDefault():d&&l&&t&&(d.id===t.id||d.id===l.id||(0,_util.hasFormDesignLayoutType)(d)||l&&!(0,_util.hasFormDesignLayoutType)(l)&&(u=_xeUtils.default.findTree(r,e=>e.id===d.id,{children:"children"}))&&({item:u,index:n,items:o,parent:a}=u,a&&a.id===t.id?(t.children[i]=u,t.children[n]=l):(t.children.splice(i,0,u),o.splice(n,1)),s.lastDragTime=Date.now(),c.dispatchEvent("widget-drag",{widget:u},e),c.dispatchEvent("drag-widget",{widget:u},e)))};return()=>{let t=g.widget;var{dragWidget:e,activeWidget:i,sortWidget:r}=b,d=t?t.name:"",n=_core.renderer.get(d)||{};let o=n.renderFormDesignWidgetSubtableEditView||n.renderFormDesignWidgetSubtableCellView||n.renderFormDesignWidgetSubtableDefaultView;var n=n.renderFormDesignWidgetEdit||n.renderFormDesignWidgetView,a=t||{name:d},l=!!c,l={widget:t,readonly:!1,disabled:!1,isEditMode:l,isViewMode:!l,$formDesign:c,$formView:p},i=i&&t&&i.id===t.id;let s={name:d},u={$table:null,$grid:null,$gantt:null,seq:"",column:{field:t.field,title:t.title},columnIndex:0,$columnIndex:0,_columnIndex:0,rowid:"",row:{},rowIndex:0,$rowIndex:0,_rowIndex:0,isEdit:!1,isHidden:!1,fixed:null,source:"",type:"",level:1,visibleData:[],items:[],data:[],widget:t};return(0,_vue.h)("div",{class:["vxe-form-design--widget-subtable-view-item",{"is--active":i,"is--sort":r&&t&&r.id===t.id,"is--drag":e&&t&&e.id===t.id}],draggable:!0,"data-widget-id":t.id,onDragstart:w,onDragenter:_,onContextmenu(e){t&&c.handleContextmenuWidget(e,t)},onClick(e){t&&c.handleClickWidget(e,t)}},[(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-view-item-wrapper"},[(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-view-item-box vxe-form--item-row"},o?(0,_vue.h)(m,{class:["vxe-form-design--widget-render-form-item"],title:t.title,field:t.field,itemRender:{}},{default(){return(0,_vn.getSlotVNs)(o(s,u))}}):n?(0,_vn.getSlotVNs)(n(a,l)):[]),i?(0,_vue.h)("div",{class:"vxe-form-design--preview-item-operate"},[(0,_vue.h)(v,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_COPY,status:"primary",size:"mini",circle:!0,onClick(e){c.handleCopyWidget(e.$event,t)}}),(0,_vue.h)(v,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_DELETE,status:"danger",size:"mini",circle:!0,onClick(e){c.handleRemoveWidget(e.$event,t)}})]):(0,_vue.createCommentVNode)()])])}}}),WidgetSubtableEditComponent=exports.WidgetSubtableEditComponent=(0,_comp.defineVxeComponent)({props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(o){let a=_core.VxeUI.getComponent("vxe-form-item"),l=_core.VxeUI.getComponent("vxe-checkbox");var e=(0,_vue.inject)("$xeFormDesign",null);if(!e)return()=>[];let s=e.reactData,u=e=>{let{sortWidget:t,widgetObjList:i}=s;var r,d,n=o.renderParams,n=n.widget;e.stopPropagation(),t&&n&&n.id!==t.id&&((0,_util.hasFormDesignLayoutType)(t)?_core.VxeUI.modal&&_core.VxeUI.modal.message({content:(0,_core.getI18n)("vxe.formDesign.widgetProp.subtableProp.errSubDrag"),status:"error",id:"errSubDrag"}):n.name&&!n.children.some(e=>e.id===t.id)&&(e=_xeUtils.default.findTree(i,e=>e.id===t.id,{children:"children"}))&&({item:e,index:r,items:d}=e,s.sortWidget=null,s.activeWidget=e,n.children.push(e),d.splice(r,1),s.sortWidget=e))},g=e=>{e.stopPropagation()};return()=>{var e=o.renderParams;let i=e.widget,{title:t,children:r,options:d}=i,n=d.showCheckbox;return(0,_vue.h)(a,{title:t,className:"vxe-form-design--widget-subtable-form-item"},{default(){return(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-view",onDragenter:g,onDragover:u},[(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-view-left"},[n?(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-col"},[(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-head"},[(0,_vue.h)(l)]),(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-body"},[(0,_vue.h)(l)])]):(0,_vue.createCommentVNode)(),(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-col"},[(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-head"},(0,_core.getI18n)("vxe.formDesign.widgetProp.subtableProp.seqTitle")),(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-body"},"1")])]),(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-view-right"},[(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-view-wrapper"},[(0,_vue.h)(_vue.TransitionGroup,{class:"vxe-form-design--widget-subtable-view-list",tag:"div",name:"vxe-form-design--widget-subtable-view-list"},{default:()=>r?r.map((e,t)=>(0,_vue.h)(ViewSubItemComponent,{key:e.id,parentWidget:i,widget:e,childIndex:t})):[]}),(0,_vue.h)("div",{key:"empty",class:"vxe-form-design--widget-subtable-view-empty"},(0,_core.getI18n)("vxe.formDesign.widgetProp.subtableProp.colPlace"))])])])}})}}}),WidgetSubtableViewComponent=exports.WidgetSubtableViewComponent=(0,_comp.defineVxeComponent)({props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(d){let n=_core.VxeUI.getComponent("vxe-form-item"),o=_core.VxeUI.getComponent("vxe-grid"),s=_core.VxeUI.getComponent("vxe-button"),u=(0,_vue.inject)("$xeFormView",null),a=(0,_use.useWidgetName)(d).computeKebabCaseName,l=(0,_vue.ref)(),g=(0,_vue.ref)([{}]),m=(0,_vue.computed)(()=>!!u&&u.props.readonly),v=(0,_vue.computed)(()=>{var e=d.renderParams,e=e.widget,{children:e,options:t}=e;let a=m.value,l=[];return t.showCheckbox&&l.push({type:"checkbox",width:60,fixed:"left"}),l.push({type:"seq",width:60,fixed:"left"}),e&&e.forEach(d=>{var e=d.name,e=_core.renderer.get(e)||{},t=e.parseFormDesignWidgetSubtableColumn;let i={field:d.field,title:d.title},n=(t?i=Object.assign(i,t({$formView:u,name:d.name,widget:d,readonly:!!a})):a?i.cellRender={name:d.name,props:d.options}:i.editRender={name:d.name,props:d.options},e.renderFormDesignWidgetSubtableDefaultView),o=e.renderFormDesignWidgetSubtableCellView||n,r=e.renderFormDesignWidgetSubtableEditView;t={};(n||o)&&(t.default=e=>{var{isEdit:t,column:i}=e,{editRender:i,cellRender:r}=i,e=Object.assign({widget:d},e);return t&&i&&o?(0,_vn.getSlotVNs)(o(i,e)):n?(0,_vn.getSlotVNs)(n(r||{},e)):[]}),r&&(t.edit=e=>{var t=e.column,t=t.editRender,e=Object.assign({widget:d},e);return(0,_vn.getSlotVNs)(r(t,e))}),i.slots=t,l.push(i)}),a||l.push({field:"action",title:"操作",fixed:"right",width:80,slots:{default({row:e}){return(0,_vue.h)(s,{mode:"text",icon:"vxe-icon-delete",status:"error",onClick(){i(e)}})}}}),l}),c=(0,_vue.computed)(()=>{var e=d.renderParams,{widget:e,isEditMode:t}=e,i=v.value,r=m.value,t={border:!0,showOverflow:!0,height:300,columnConfig:{resizable:!0,minWidth:140},rowConfig:{keyField:"_id"},data:t?g.value:u?u.getItemValue(e):null,columns:i,toolbarConfig:{zoom:!0,custom:!1,slots:{buttons:"toolbarButtons"}}};return r||(t.keepSource=!0,t.editConfig={mode:"row",trigger:"click",showStatus:!0}),t}),p=()=>{var i=d.renderParams,i=i.widget;if(u){let e=u.getItemValue(i),t=(_xeUtils.default.isArray(e)||(e=[]),(()=>{var e=d.renderParams,e=e.widget;let t={_id:Date.now()};return _xeUtils.default.each(e.children,e=>{t[e.field]=null}),t})());e.unshift(t),u.setItemValue(i,e.slice(0)).then(()=>(0,_vue.nextTick)().then(()=>{var e=l.value;e&&e.setEditRow(t)}))}},i=t=>{var e,i=d.renderParams,i=i.widget;u&&(e=u.getItemValue(i))&&u.setItemValue(i,e.filter(e=>e._id!==t._id))};return()=>{var e=d.renderParams,e=e.widget,t=a.value;let i=c.value,r=m.value;return(0,_vue.h)(n,{class:["vxe-form-design--widget-render-form-item","widget-"+t],title:e.title,field:e.field,span:24},{default(){return o?(0,_vue.h)(o,Object.assign(Object.assign({},i),{ref:l}),{toolbarButtons(){return r?[]:[(0,_vue.h)(s,{content:"新增",icon:"vxe-icon-add",status:"primary",onClick:p})]}}):(0,_vue.createCommentVNode)()}})}}});