arco-crud-plus
Version:
基于arco-design-vue的配置化表格表单组件
2 lines (1 loc) • 9.64 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),me=require("../form/main.vue.js"),he=require("../utils/validate.js"),ve={key:1},Ce={key:2,class:"table-plus-menu"},be={style:{padding:"0 15px 0 15px"}},ke={key:3},ye={key:1,style:{}},ze=e.defineComponent({name:"aTablePlus",__name:"main",props:e.mergeModels({option:{type:Object},loading:{type:Boolean,default:!1},data:{type:Array,default:()=>[]},stickyHeader:{type:[Boolean,Number],default:!1}},{modelValue:{},modelModifiers:{},selected:{},selectedModifiers:{},page:{type:Object,default:()=>({total:0,current:1,pageSize:20,pageSizeOptions:[10,20,40,50,100]})},pageModifiers:{}}),emits:e.mergeModels(["refreshChange","searchChange","sortChange","filterChange","resetChange","pageChange","pageSizeChange","formChange"],["update:modelValue","update:selected","update:page"]),setup(m,{expose:A,emit:K}){const G=e.useAttrs(),J=e.ref(null),k=e.ref(null),y=e.ref(null),v=e.ref("100%");let Q=e.ref("100%");function X(n){var t,a,h,f;if(o.option.page===!1){v.value="100%";return}if(Q.value=n.width+"px",((t=o.option)==null?void 0:t.autoHeight)===!1)return!0;v.value=((a=k.value)==null?void 0:a.offsetHeight)-((h=y.value)==null?void 0:h.offsetHeight)-(((f=o.option)==null?void 0:f.calcHeight)??-10)}const i={pagePosition:"br",resizable:!1,calcHeight:20,align:"left",stripe:!1,rowKey:"id",scroll:{},size:"medium",bordered:{cell:!0},columns:[]},o=m,r=e.useSlots(),d=K,s=e.computed(()=>{var n;return((n=o.option)==null?void 0:n.size)??i.size}),z=e.useModel(m,"modelValue"),x=e.useModel(m,"selected"),u=e.useModel(m,"page");e.ref({total:0});const w=e.reactive({setting:{visible:!1,data:[],activeIndexs:[]}}),Y=e.computed(()=>{const n=o.option;return{...n,searchMenuSpan:n.searchMenuSpan??6,search:!0,span:n.searchSpan??6,gutter:n.gutter??0,rowGap:0,marginTop:"10px",align:"center",layout:"",submitBtnText:n.submitBtnText??"搜索",columns:n.columns.map(a=>({...a,display:a.search??!1,span:a.searchSpan??n.searchSpan??6,rules:[]}))}}),C=e.computed(()=>{r.menu&&!c.value.find(t=>t.field==="menu")&&c.value.push({title:o.option.menuText??"操作",label:o.option.menuText??"操作",dataIndex:"menu",field:"menu",slotName:"menu",width:o.option.menuWidth??120,fixed:"right",align:o.option.menuWidth??o.option.align??i.align});let n=c.value.filter(t=>(t.bodyCellStyle={tablePlusBodyActive:!0},t.checked!==!1&&t.hide!==!0));return o.option.index!==!1&&n.unshift({label:o.option.indexLabel??"序号",title:o.option.indexLabel??"#",render:({rowIndex:t})=>`${t+1}`,field:"index",width:o.option.indexWidth??50,[o.option.indexFixed===!1?"1fixed":"fixed"]:"left"}),n});let c=e.ref([]);e.watch(()=>o.option,n=>{c.value=n.columns.map(t=>(t.children&&(t.children=t.children.map(a=>({title:t.label,dataIndex:t.field,align:t.align??o.option.align??i.align,ellipsis:t.ellipsis??!0,checked:!0,[r[t.field]?"slotName":""]:t.field,titleSlotName:t.field+"Title",tooltip:t.tooltip??!0,minWidth:t.minWidth??80,...t}))),{title:t.label,dataIndex:t.field,align:t.align??o.option.align??i.align,ellipsis:t.ellipsis??!0,[r[t.field]?"slotName":""]:t.field,titleSlotName:t.field+"Title",checked:!0,tooltip:t.tooltip??!0,minWidth:t.minWidth??80,...t}))},{immediate:!0});function Z(n){d("pageChange",u.value)}function ee(n){d("pageSizeChange",u.value)}function te(n,t){d("filterChange",n,t)}function oe(n,t){d("sortChange",n,t)}function ne(n,t){d("searchChange",n,t)}function le(n,t,a){d("formChange",n,t)}const b=e.ref(null);return A(new Proxy({},{get(n,t){var a;return(a=b.value)==null?void 0:a[t]},has(n,t){return t in b.value}})),(n,t)=>{var S,_,N,B,V,T,P,M,R,$,E,H,L,U,j,I,O,W,D,F,q;const a=e.resolveComponent("a-space"),h=e.resolveComponent("icon-refresh"),f=e.resolveComponent("a-button"),ae=e.resolveComponent("icon-settings"),ie=e.resolveComponent("a-checkbox"),re=e.resolveComponent("a-doption"),se=e.resolveComponent("a-dropdown"),ue=e.resolveComponent("icon-question-circle-fill"),de=e.resolveComponent("a-tooltip"),pe=e.resolveComponent("a-table"),ce=e.resolveComponent("a-pagination"),fe=e.resolveDirective("resize");return e.openBlock(),e.createElementBlock("div",{class:"table-plus",ref_key:"tablePlusRef",ref:J},[o.option.search!==!1?(e.openBlock(),e.createBlock(me.default,{key:0,option:Y.value,modelValue:z.value,"onUpdate:modelValue":t[0]||(t[0]=l=>z.value=l),onSubmit:ne,onReset:t[1]||(t[1]=l=>d("resetChange")),onFormChange:le},null,8,["option","modelValue"])):e.createCommentVNode("",!0),r.header?(e.openBlock(),e.createElementBlock("div",ve,[e.renderSlot(n.$slots,"header",{size:s.value},void 0,!0)])):e.createCommentVNode("",!0),((S=o.option)==null?void 0:S.tool)??!0?(e.openBlock(),e.createElementBlock("div",Ce,[e.createVNode(a,null,{default:e.withCtx(()=>[r.menuLeft?e.renderSlot(n.$slots,"menuLeft",{key:0,size:s.value},void 0,!0):e.createCommentVNode("",!0)]),_:3}),e.createVNode(a,null,{default:e.withCtx(()=>[r.menuRight?e.renderSlot(n.$slots,"menuRight",{key:0,size:s.value},void 0,!0):e.createCommentVNode("",!0),o.option.refreshBtn!==!1?(e.openBlock(),e.createBlock(f,{key:1,loading:o.loading,type:"outline",size:s.value,onClick:t[2]||(t[2]=l=>d("refreshChange"))},{icon:e.withCtx(()=>[e.createVNode(h)]),_:1},8,["loading","size"])):e.createCommentVNode("",!0),o.option.toolBtn!==!1?(e.openBlock(),e.createBlock(se,{key:2,"popup-visible":w.setting.visible,"onUpdate:popupVisible":t[3]||(t[3]=l=>w.setting.visible=l)},{content:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(c).filter(l=>l.dataIndex!=="menu"&&l.hide!==!0),(l,p)=>(e.openBlock(),e.createBlock(re,{key:p},{default:e.withCtx(()=>[e.createVNode(ie,{modelValue:l.checked,"onUpdate:modelValue":g=>l.checked=g},null,8,["modelValue","onUpdate:modelValue"]),e.createElementVNode("span",be,e.toDisplayString(l.label),1)]),_:2},1024))),128))]),default:e.withCtx(()=>[e.createVNode(f,{type:"outline",size:s.value},{icon:e.withCtx(()=>[e.createVNode(ae)]),_:1},8,["size"]),r.menuRightAfter?e.renderSlot(n.$slots,"menuRightAfter",{key:0,size:s.value},void 0,!0):e.createCommentVNode("",!0)]),_:3},8,["popup-visible"])):e.createCommentVNode("",!0)]),_:3})])):e.createCommentVNode("",!0),r.menuLeft?(e.openBlock(),e.createElementBlock("div",ke)):e.createCommentVNode("",!0),e.withDirectives((e.openBlock(),e.createElementBlock("div",{style:{flex:"auto",overflow:"hidden"},class:e.normalizeClass({"margin-top-20":!(((_=o.option)==null?void 0:_.tool)??!0)}),ref_key:"tableRefDom",ref:k},[e.createVNode(pe,e.mergeProps({ref_key:"TableRef",ref:b},e.unref(G),{"column-resizable":o.option.resizable??i.resizable,pagination:!1,columns:C.value,size:((N=o.option)==null?void 0:N.size)??i.size,loading:o.loading,data:o.data,"sticky-header":o.stickyHeader,stripe:((B=o.option)==null?void 0:B.stripe)??i.stripe,"row-key":((V=o.option)==null?void 0:V.rowKey)??i.rowKey,scroll:e.unref(he.validataNull)((T=o.option)==null?void 0:T.scroll)?{y:v.value,x:(o==null?void 0:o.data.length)!==0?"100%":""}:(P=o.option)==null?void 0:P.scroll,bordered:((M=o.option)==null?void 0:M.bordered)??i.bordered,"selected-keys":x.value,"onUpdate:selectedKeys":t[4]||(t[4]=l=>x.value=l),"page-position":((R=o.option)==null?void 0:R.pagePosition)??i.pagePosition,onFilterChange:te,onSorterChange:oe,"scroll-bar":!0,"row-selection":o.option.rowSelection}),e.createSlots({_:2},[r.menu?{name:"menu",fn:e.withCtx(({record:l,rowIndex:p,column:g})=>[e.renderSlot(n.$slots,"menu",{record:l,column:g,rowIndex:p,size:s.value},void 0,!0)]),key:"0"}:void 0,e.renderList(C.value.filter(l=>l.slotName),l=>({name:l.slotName,fn:e.withCtx(({record:p,rowIndex:g,column:ge})=>[e.renderSlot(n.$slots,l.slotName||"",{size:s.value,record:p,column:ge,rowIndex:g},void 0,!0)])})),e.renderList(C.value,l=>({name:l.field+"Title",fn:e.withCtx(({column:p})=>[r[l.titleSlotName]?e.renderSlot(n.$slots,l.titleSlotName||"",{key:0,size:s.value,label:p.label,column:p},void 0,!0):(e.openBlock(),e.createElementBlock("span",ye,[e.createTextVNode(e.toDisplayString(l.label)+" ",1),l.helpIconTableText?(e.openBlock(),e.createBlock(de,{key:0,content:l.helpIconTableText},{default:e.withCtx(()=>[e.createVNode(ue,{size:s.value},null,8,["size"])]),_:2},1032,["content"])):e.createCommentVNode("",!0)]))])}))]),1040,["column-resizable","columns","size","loading","data","sticky-header","stripe","row-key","scroll","bordered","selected-keys","page-position","row-selection"])],2)),[[fe,X]]),((($=o.option)==null?void 0:$.page)??!0)&&u.value.total>0?(e.openBlock(),e.createElementBlock("div",{key:4,ref_key:"pageRef",ref:y,style:e.normalizeStyle([{display:"flex","justify-content":"flex-end","padding-top":"20px","border-top":"1px solid #ebebeb"},{justifyContent:((E=o.option)==null?void 0:E.pagePosition)??"flex-end"}])},[e.createVNode(ce,{total:u.value.total,"onUpdate:total":t[5]||(t[5]=l=>u.value.total=l),current:u.value.current,"onUpdate:current":t[6]||(t[6]=l=>u.value.current=l),"page-size":u.value.pageSize,"onUpdate:pageSize":t[7]||(t[7]=l=>u.value.pageSize=l),onChange:Z,onPageSizeChange:ee,"show-total":((L=(H=o.option)==null?void 0:H.page)==null?void 0:L.showTotal)??!0,"show-page-size":((j=(U=o.option)==null?void 0:U.page)==null?void 0:j.showPageSize)??!0,"show-jumper":((O=(I=o.option)==null?void 0:I.page)==null?void 0:O.showJumper)??!1,simple:((D=(W=o.option)==null?void 0:W.page)==null?void 0:D.simple)??!1,"page-size-options":((q=(F=o.option)==null?void 0:F.page)==null?void 0:q.pageSizeOptions)??[10,20,40,50,100]},null,8,["total","current","page-size","show-total","show-page-size","show-jumper","simple","page-size-options"])],4)):e.createCommentVNode("",!0)],512)}}});exports.default=ze;