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

"use strict";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}}const ViewSubItemComponent=(0,_comp.defineVxeComponent)({props:{parentWidget:{type:Object,default:()=>({})},widget:{type:Object,default:()=>({})},childIndex:{type:Number,default:0}},emits:[],setup(g){const m=_core.VxeUI.getComponent("vxe-form-item"),c=_core.VxeUI.getComponent("vxe-button"),v=(0,_vue.inject)("$xeFormDesign",null),p=(0,_vue.inject)("$xeFormView",null);if(!v)return()=>[];const b=v["reactData"],_=e=>{e.stopPropagation();var t=e.currentTarget,e=e.dataTransfer,t=t.getAttribute("data-widget-id")||"",i=v.getWidgetById(t);e&&e.setData("text/plain",t),b.sortWidget=i,b.dragWidget=null},f=e=>{var{parentWidget:t,childIndex:i}=g;const{widgetObjList:r,sortWidget:d}=b;var n,o,s,a=t.children[i],l=v.internalData,u=l["lastDragTime"];e.stopPropagation(),u&&u>Date.now()-300?e.preventDefault():d&&a&&t&&(d.id===t.id||d.id===a.id||(0,_util.hasFormDesignLayoutType)(d)||a&&!(0,_util.hasFormDesignLayoutType)(a)&&(u=_xeUtils.default.findTree(r,e=>e.id===d.id,{children:"children"}))&&({item:u,index:n,items:o,parent:s}=u,s&&s.id===t.id?(t.children[i]=u,t.children[n]=a):(t.children.splice(i,0,u),o.splice(n,1)),l.lastDragTime=Date.now(),v.dispatchEvent("drag-widget",{widget:u},e)))};return()=>{const t=g["widget"];var{dragWidget:e,activeWidget:i,sortWidget:r}=b,d=t?t.name:"",n=_core.renderer.get(d)||{};const o=n.renderFormDesignWidgetSubtableEditView||n.renderFormDesignWidgetSubtableCellView||n.renderFormDesignWidgetSubtableDefaultView;var n=n.renderFormDesignWidgetEdit||n.renderFormDesignWidgetView,s=t||{name:d},a=!!v,a={widget:t,readonly:!1,disabled:!1,isEditMode:a,isViewMode:!a,$formDesign:v,$formView:p},i=i&&t&&i.id===t.id;const l={name:d},u={$table:null,$grid: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,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:_,onDragenter:f,onClick(e){t&&v.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(l,u))}}):n?(0,_vn.getSlotVNs)(n(s,a)):[]),i?(0,_vue.h)("div",{class:"vxe-form-design--preview-item-operate"},[(0,_vue.h)(c,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_COPY,status:"primary",size:"mini",circle:!0,onClick(e){v.handleCopyWidget(e.$event,t)}}),(0,_vue.h)(c,{icon:(0,_core.getIcon)().FORM_DESIGN_WIDGET_DELETE,status:"danger",size:"mini",circle:!0,onClick(e){v.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){const s=_core.VxeUI.getComponent("vxe-form-item"),a=_core.VxeUI.getComponent("vxe-checkbox");var e=(0,_vue.inject)("$xeFormDesign",null);if(!e)return()=>[];const l=e["reactData"],u=e=>{const{sortWidget:t,widgetObjList:i}=l;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,l.sortWidget=null,l.activeWidget=e,n.children.push(e),d.splice(r,1),l.sortWidget=e))},g=e=>{e.stopPropagation()};return()=>{var e=o["renderParams"];const i=e["widget"],{title:t,children:r,options:d}=i,n=d["showCheckbox"];return(0,_vue.h)(s,{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)(a)]),(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-body"},[(0,_vue.h)(a)])]):(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){const n=_core.VxeUI.getComponent("vxe-form-item"),o=_core.VxeUI.getComponent("vxe-grid"),l=_core.VxeUI.getComponent("vxe-button"),u=(0,_vue.inject)("$xeFormView",null),s=(0,_use.useWidgetName)(d)["computeKebabCaseName"],a=(0,_vue.ref)(),g=(0,_vue.ref)([{}]),m=(0,_vue.computed)(()=>!!u&&u.props.readonly),c=(0,_vue.computed)(()=>{var e=d["renderParams"],e=e["widget"],{children:e,options:t}=e;const s=m.value,a=[];return t.showCheckbox&&a.push({type:"checkbox",width:60,fixed:"left"}),a.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};t?i=Object.assign(i,t({$formView:u,name:d.name,widget:d,readonly:!!s})):s?i.cellRender={name:d.name,props:d.options}:i.editRender={name:d.name,props:d.options};const n=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,a.push(i)}),s||a.push({field:"action",title:"操作",fixed:"right",width:80,slots:{default({row:e}){return(0,_vue.h)(l,{mode:"text",icon:"vxe-icon-delete",status:"error",onClick(){i(e)}})}}}),a}),v=(0,_vue.computed)(()=>{var e=d["renderParams"],{widget:e,isEditMode:t}=e,i=c.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 t=d["renderParams"],t=t["widget"];if(u){let e=u.getItemValue(t);_xeUtils.default.isArray(e)||(e=[]);const i=(()=>{var e=d["renderParams"],e=e["widget"];const t={_id:Date.now()};return _xeUtils.default.each(e.children,e=>{t[e.field]=null}),t})();e.unshift(i),u.setItemValue(t,e.slice(0)).then(()=>(0,_vue.nextTick)().then(()=>{var e=a.value;e&&e.setEditRow(i)}))}},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=s.value;const i=v.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:a}),{toolbarButtons(){return r?[]:[(0,_vue.h)(l,{content:"新增",icon:"vxe-icon-add",status:"primary",onClick:p})]}}):(0,_vue.createCommentVNode)()}})}}});