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

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.WidgetSubtableViewComponent=exports.WidgetSubtableEditComponent=void 0;var _vue=require("vue"),_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"),_formItem=_interopRequireDefault(require("../../form/src/form-item")),_button=_interopRequireDefault(require("../../button/src/button")),_checkbox=_interopRequireDefault(require("../../checkbox/src/checkbox"));function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}const ViewSubItemComponent=(0,_vue.defineComponent)({props:{parentWidget:{type:Object,default:()=>({})},widget:{type:Object,default:()=>({})},childIndex:{type:Number,default:0}},emits:[],setup(g){const c=(0,_vue.inject)("$xeFormDesign",null),m=(0,_vue.inject)("$xeFormView",null);if(!c)return()=>[];const v=c["reactData"],b=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),v.sortWidget=i,v.dragWidget=null},f=e=>{var{parentWidget:t,childIndex:i}=g;const{widgetObjList:r,sortWidget:d}=v;var n,o,a,s=t.children[i],l=c.internalData,u=l["lastDragTime"];e.stopPropagation(),u&&u>Date.now()-300?e.preventDefault():d&&s&&t&&(d.id===t.id||d.id===s.id||(0,_util.hasFormDesignLayoutType)(d)||s&&!(0,_util.hasFormDesignLayoutType)(s)&&(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]=s):(t.children.splice(i,0,u),o.splice(n,1)),l.lastDragTime=Date.now(),c.dispatchEvent("drag-widget",{widget:u},e)))};return()=>{const t=g["widget"];var{dragWidget:e,activeWidget:i,sortWidget:r}=v,d=t?t.name:"",n=_core.renderer.get(d)||{};const o=n.renderFormDesignWidgetSubtableEditView||n.renderFormDesignWidgetSubtableCellView||n.renderFormDesignWidgetSubtableDefaultView;var n=n.renderFormDesignWidgetEdit||n.renderFormDesignWidgetView,a=t||{name:d},s=!!c,s={widget:t,readonly:!1,disabled:!1,isEditMode:s,isViewMode:!s,$formDesign:c,$formView:m},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:b,onDragenter:f,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)(_formItem.default,{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(a,s)):[]),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){c.handleCopyWidget(e.$event,t)}}),(0,_vue.h)(_button.default,{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,_vue.defineComponent)({props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(o){var e=(0,_vue.inject)("$xeFormDesign",null);if(!e)return()=>[];const a=e["reactData"],s=e=>{const{sortWidget:t,widgetObjList:i}=a;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,a.sortWidget=null,a.activeWidget=e,n.children.push(e),d.splice(r,1),a.sortWidget=e))},l=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)(_formItem.default,{title:t,className:"vxe-form-design--widget-subtable-form-item"},{default(){return(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-view",onDragenter:l,onDragover:s},[(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)(_checkbox.default)]),(0,_vue.h)("div",{class:"vxe-form-design--widget-subtable-body"},[(0,_vue.h)(_checkbox.default)])]):(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,_vue.defineComponent)({props:{renderOpts:{type:Object,default:()=>({})},renderParams:{type:Object,default:()=>({})}},emits:[],setup(d){const n=_core.VxeUI.getComponent("VxeGrid"),l=(0,_vue.inject)("$xeFormView",null),o=(0,_use.useWidgetName)(d)["computeKebabCaseName"],a=(0,_vue.ref)(),s=(0,_vue.ref)([{}]),u=(0,_vue.computed)(()=>!!l&&l.props.readonly),g=(0,_vue.computed)(()=>{var e=d["renderParams"],e=e["widget"],{children:e,options:t}=e;const a=u.value,s=[];return t.showCheckbox&&s.push({type:"checkbox",width:60,fixed:"left"}),s.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:l,name:d.name,widget:d,readonly:!!a})):a?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,s.push(i)}),a||s.push({field:"action",title:"操作",fixed:"right",width:80,slots:{default({row:e}){return(0,_vue.h)(_button.default,{mode:"text",icon:"vxe-icon-delete",status:"error",onClick(){i(e)}})}}}),s}),c=(0,_vue.computed)(()=>{var e=d["renderParams"],{widget:e,isEditMode:t}=e,i=g.value,r=u.value,t={border:!0,showOverflow:!0,height:300,columnConfig:{resizable:!0,minWidth:140},rowConfig:{keyField:"_id"},data:t?s.value:l?l.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}),m=()=>{var t=d["renderParams"],t=t["widget"];if(l){let e=l.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),l.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"];l&&(e=l.getItemValue(i))&&l.setItemValue(i,e.filter(e=>e._id!==t._id))};return()=>{var e=d["renderParams"],e=e["widget"],t=o.value;const i=c.value,r=u.value;return(0,_vue.h)(_formItem.default,{class:["vxe-form-design--widget-render-form-item","widget-"+t],title:e.title,field:e.field,span:24},{default(){return n?(0,_vue.h)(n,Object.assign(Object.assign({},i),{ref:a}),{toolbarButtons(){return r?[]:[(0,_vue.h)(_button.default,{content:"新增",icon:"vxe-icon-add",status:"primary",onClick:m})]}}):(0,_vue.createCommentVNode)()}})}}});