ray-template/assets/index-df040a62.js

import{s as H}from"./pinia-c02b34e2.js";import{b as X,R as y,e as V}from"./index-e552590b.js";import{V as Y}from"./vuedraggable-9aebabe2.js";import{R as A,N as q,M as v,Z as J,o as G,K as w,_ as K,Y as Q,y as Z,$ as W,P as ee,Q as E,X as O,a0 as te,a1 as k,V as C,a2 as ae,B as R,a3 as le,n as ie,H as ne,F as se}from"./naive-ui-bb4def63.js";import{e as F,i as U,r as h,ab as e,l as T,E as L,p as oe,M as j,F as I,x as ue,n as re,o as de,c as o,q as D}from"./@vue-6996c4b6.js";import{s as z}from"./screenfull-578bfdd4.js";import{p as ce}from"./print-js-819a679c.js";import{u as S,w as pe}from"./xlsx-1a040596.js";import{d as he}from"./dayjs-e34bfade.js";import"./vue-demi-71ba0ef2.js";import"./lodash-es-92f3d5bd.js";import"./vue-i18n-a041e1ab.js";import"./@intlify-bd5dfa46.js";import"./vue-router-5661a2ac.js";import"./@vueuse-e2eab0ec.js";import"./pinia-plugin-persistedstate-d93b4f94.js";import"./date-fns-7f923de7.js";import"./vueuc-48cc3a88.js";import"./evtd-b614532e.js";import"./seemly-dc6f1e91.js";import"./@css-render-f42a4f8d.js";import"./vooks-18ea31ef.js";import"./vdirs-b0483831.js";import"./@juggle-41516555.js";import"./css-render-57962bc1.js";import"./@emotion-8a8e73f6.js";import"./treemate-25c27bff.js";import"./date-fns-tz-230e778e.js";import"./async-validator-dee29e8b.js";import"./vue-566141bb.js";import"./sortablejs-77186f55.js";const me=t=>t.map(a=>(a.fixed&&(a.fixed==="right"?a.rightFixedActivated=!0:a.leftFixedActivated=!0),a.resizable&&(a.resizeColumnActivated=!0),a)),ge=F({name:"TableSetting",emits:["columnsUpdate"],setup(t,{emit:l}){const a=U("tableSettingProvider",{}),i=X(),n=h(me(a.modelColumns.value)),m=h(!0),{themeValue:d}=H(i);return{settingOptions:n,handleDraggableEnd:()=>{l("columnsUpdate",n.value)},handleFixedClick:(g,c)=>{const f=`${g}FixedActivated`,p=n.value[c];f==="leftFixedActivated"?p.rightFixedActivated=!1:f==="rightFixedActivated"&&(p.leftFixedActivated=!1),p[f]=!p[f],p[f]?p.fixed=g:p.fixed=void 0,n.value[c]=p,l("columnsUpdate",n.value)},disableDraggable:m,FixedPopoverIcon:g=>{const{element:c,name:f,tooltip:p,fn:P,index:N,fixed:u,key:x}=g;return e(v,null,{trigger:()=>e(y,{customClassName:`draggable-item__icon ${c[x]?"draggable-item__icon--actived":""}`,name:f,size:"18",onClick:P.bind(this,u,N)},null),default:()=>p})},handleResizeColumnClick:g=>{const c=n.value[g];c.resizeColumnActivated=!c.resizeColumnActivated,c.resizable=c.resizeColumnActivated,n.value[g]=c,l("columnsUpdate",n.value)},themeValue:d}},render(){return e(v,{trigger:"click",placement:"bottom",showArrow:!1,raw:!0},{trigger:()=>e(y,{customClassName:"ray-table__setting",name:"setting",size:"18"},null),default:()=>e(A,{bordered:!1,class:"table-setting__card"},{default:()=>e(Y,{class:["ray-table__setting-option--draggable"],modelValue:this.settingOptions,"onUpdate:modelValue":t=>this.settingOptions=t,itemKey:"key",disabled:!this.disableDraggable,onEnd:this.handleDraggableEnd.bind(this)},{item:({element:t,index:l})=>e("div",{class:["draggable-item",this.themeValue?"draggable-item--dark":""]},[e(y,{customClassName:"draggable-item__d--icon",name:"draggable",size:"18"},null),e(q,null,{default:()=>[e("span",null,[t.title])]}),this.FixedPopoverIcon({element:t,name:"left_arrow",tooltip:"左固定",fn:this.handleFixedClick,index:l,fixed:"left",key:"leftFixedActivated"}),e(v,null,{trigger:()=>e(y,{customClassName:`draggable-item__icon ${t.resizeColumnActivated?"draggable-item__icon--actived":""}`,name:"resize_h",size:"18",onClick:this.handleResizeColumnClick.bind(this,l)},null),default:()=>"修改列宽"}),this.FixedPopoverIcon({element:t,name:"right_arrow",tooltip:"右固定",fn:this.handleFixedClick,index:l,fixed:"right",key:"rightFixedActivated"})])})})})}}),$=F({name:"TableAction",props:{tooltip:{type:String,required:!0},negativeText:{type:String,default:"取消"},positiveText:{type:String,default:"确认"},icon:{type:String,required:!0},iconSize:{type:Number,default:18},popoverContent:{type:String,required:!0}},emits:["positive","negative"],setup(t,{emit:l}){const a=h(!1);return{handleEmit:n=>{l(n==="positive"?"positive":"negative"),a.value=!1},showPopoconfirm:a}},render(){return e(v,null,{trigger:()=>e(J,{show:this.showPopoconfirm,"onUpdate:show":t=>this.showPopoconfirm=t,showArrow:!0},{trigger:()=>e(y,{name:this.icon,size:this.iconSize,customClassName:"ray-table-icon"},null),default:()=>this.tooltip,action:()=>e(G,null,{default:()=>[e(w,{size:"small",ghost:!0,onClick:this.handleEmit.bind(this,"negative")},{default:()=>[this.negativeText]}),e(w,{size:"small",ghost:!0,type:"info",onClick:this.handleEmit.bind(this,"positive")},{default:()=>[this.positiveText]})]})}),default:()=>this.popoverContent})}});const fe=F({name:"TableSize",emits:["changeSize"],setup(t,{emit:l}){const a=U("tableSettingProvider",{}),i=h(!1),n=h(a.size),m=T({get:()=>a.size,set:r=>{n.value=r}}),d=h([{label:"默认",key:"medium"},{label:"紧凑",key:"small"},{label:"宽松",key:"large"}]);return{sizeOptions:d,currentSize:n,handleDropdownClick:r=>{d.value.forEach(b=>{b.key===r&&(m.value=r,i.value=!1,l("changeSize",r))})},popoverShow:i}},render(){return e(v,{show:this.popoverShow,"onUpdate:show":t=>this.popoverShow=t,trigger:"click",placement:"bottom",showArrow:!1,raw:!0},{trigger:()=>e(v,null,{trigger:()=>e(y,{name:"adjustment",size:"18",customClassName:"ray-table-icon"},null),default:()=>"表格密度"}),default:()=>e(A,{bordered:!1,class:"ray-table__table-size"},{default:()=>[e("div",{class:"table-size__dropdown"},[e("div",{class:"table-size__dropdown-wrapper"},[this.sizeOptions.map(t=>e("div",{class:["dropdown-item",t.key===this.currentSize?"dropdown-item--active":""],key:t.key,onClick:this.handleDropdownClick.bind(this,t.key)},[e("div",{class:"drop-item__label"},[t.label])]))])])]})})}});const be=F({name:"TableScreenfull",setup(){const t=U("tableSettingProvider",{}),l=T(()=>t.rayTableUUID);let a=z.isFullscreen;return{handleScreenfull:()=>{const n=document.getElementById(l.value);a=!a,n&&z.isEnabled&&a?z.request(n):z.exit()}}},render(){return e(v,null,{trigger:()=>e(y,{name:"fullscreen",size:"18",customClassName:"ray-table-icon tay-table-icon__screenfull",onClick:this.handleScreenfull.bind(this)},null),default:()=>"全屏表格"})}}),Ce={...K,rightClickMenu:{type:Array,default:()=>[]},title:{type:[String,Object],default:""},action:{type:Boolean,default:!0},actionExtra:{type:Object,default:()=>({})},showMenu:{type:Boolean,default:!0},exportTooltip:{type:String,default:"是否导出为Excel表格?"},exportType:{type:String,default:"xlsx"},exportPositiveText:{type:String,default:"确认"},exportNegativeText:{type:String,default:"取消"},exportFilename:{type:String,default:""},printPositiveText:{type:String,default:"确认"},printNegativeText:{type:String,default:"取消"},printTooltip:{type:String,default:"是否打印该表格?"},printType:{type:String,default:"html"},printOptions:{type:Object,default:()=>({})},printIcon:{type:String,default:"print"},exportExcelIcon:{type:String,default:"export_excel"},tableHeaderSpace:{type:String,default:"10px"},bordered:{type:Boolean,default:!1}},ye=t=>t.reduce((a,i)=>(a[i.key]=i.title,a),{}),ve=(t,l,a)=>{for(let i=t.s.c;i<=t.e.c;i++){const n=S.encode_col(i)+"1";l[n].v=a[l[n].v]}},Fe=async(t,l,a={})=>{await new Promise((i,n)=>{if(Array.isArray(t))if(t.length){const m=ye(l??[]),d=S.json_to_sheet(t),s=S.book_new(),r=a.filename?a.filename+".xlsx":he().format("YYYY-MM-DD")+"导出表格.xlsx";S.book_append_sheet(s,d,"Data");const b=S.decode_range(d["!ref"]);l!=null&&l.length&&ve(b,d,m),pe(s,r),i()}else i();else n()})},xe=F({name:"RayTable",props:Ce,emits:["update:columns","menuSelect","exportSuccess","exportError"],setup(t,{emit:l}){const a=h(),i=V(),n=V(),m=T(()=>t.rightClickMenu),d=T({get:()=>t.columns,set:u=>{l("update:columns",u)}}),s=L({x:0,y:0,showMenu:!1});let r=-1;const b=T(()=>({"--ray-table-header-space":t.tableHeaderSpace})),_=h(t.size);oe("tableSettingProvider",{modelRightClickMenu:m,modelColumns:d,size:t.size,rayTableUUID:n});const g=u=>{d.value=u},c=(u,x)=>{l("menuSelect",u,r,x),s.showMenu=!1},f=(u,x)=>{var M;return{...(M=t.rowProps)==null?void 0:M.call(t,u,x),onContextmenu:B=>{B.preventDefault(),r=x,s.showMenu=!1,re().then(()=>{s.showMenu=!0,s.x=B.clientX,s.y=B.clientY})}}},p=async()=>{if(t.data.length&&t.columns.length)try{await Fe(t.data,t.columns,{filename:t.exportFilename}),l("exportSuccess")}catch{l("exportError")}},P=()=>{const u=Object.assign({},t.printOptions,{printable:i,type:t.printType,documentTitle:t.printOptions.documentTitle?t.printOptions.documentTitle:"表格"});ce(u)},N=u=>{_.value=u};return{tableUUID:i,rayTableUUID:n,handleColumnsUpdate:g,...j(s),handleRowProps:f,handleRightMenuSelect:c,handleExportPositive:p,handlePrintPositive:P,cssVars:b,handleChangeTableSize:N,tableSize:_,rayTableInstance:a}},render(){return e(A,{class:"ray-table",bordered:this.bordered,style:[this.cssVars],id:this.rayTableUUID},{default:()=>e(I,null,[e(Q,ue({ref:"rayTableInstance",id:this.tableUUID},this.$props,{rowProps:this.handleRowProps.bind(this),size:this.tableSize}),{...this.$slots}),this.showMenu?e(Z,{show:this.showMenu,placement:"bottom-start",trigger:"manual",x:this.x,y:this.y,options:this.rightClickMenu,onClickoutside:()=>this.showMenu=!1,onSelect:this.handleRightMenuSelect.bind(this)},null):""]),header:()=>this.title,"header-extra":()=>this.action?e("div",{class:"ray-table-header-extra__space"},[e($,{icon:this.printIcon,tooltip:this.printTooltip,popoverContent:"打印表格",positiveText:this.printPositiveText,negativeText:this.printNegativeText,onPositive:this.handlePrintPositive.bind(this)},null),e($,{icon:this.exportExcelIcon,tooltip:this.exportTooltip,popoverContent:"导出表格",positiveText:this.exportPositiveText,negativeText:this.exportNegativeText,onPositive:this.handleExportPositive.bind(this)},null),e(fe,{onChangeSize:this.handleChangeTableSize.bind(this)},null),e(be,null,null),e(ge,{onColumnsUpdate:this.handleColumnsUpdate.bind(this)},null)]):"",footer:()=>{var t,l;return(l=(t=this.$slots).tableFooter)==null?void 0:l.call(t)}})}});const Ee={value:{type:Boolean,default:!0},collapseToggleText:{type:Array,default:()=>["展开","收起"]},bordered:{type:Boolean,default:!1},...W},Se=F({name:"RayCollapseGrid",props:Ee,emits:["updateValue"],setup(t,{emit:l}){const a=h(t.value),i=()=>{a.value=!a.value,l("updateValue",a.value)};return{modelCollapsed:a,handleCollapse:i,CollapseIcon:()=>e("div",{class:"collapse-icon",onClick:i.bind(this)},[e("span",null,[a.value?t.collapseToggleText[0]:t.collapseToggleText[1]]),e(y,{customClassName:`collapse-icon--arrow ${a.value?"":"collapse-icon--arrow__expanded"}`,name:"expanded",size:"14"},null)])}},render(){return e(A,{bordered:this.bordered},{default:()=>e(ee,{class:"ray-collapse-grid",collapsed:this.modelCollapsed,xGap:this.xGap||12,yGap:this.yGap||18,cols:this.cols,collapsedRows:this.collapsedRows},{default:()=>{var t,l;return[(l=(t=this.$slots).default)==null?void 0:l.call(t),e(E,{suffix:!0,class:"ray-collapse-grid__suffix--btn"},{default:()=>[e(G,{justify:"end"},{default:()=>{var a,i;return[(i=(a=this.$slots).action)==null?void 0:i.call(a),this.CollapseIcon()]}})]})]}})})}}),lt=F({name:"TableView",setup(){const t=h(),l=[{title:"Name",key:"name"},{title:"Age",key:"age"},{title:"Address",key:"address"},{title:"Tags",key:"tags",render:s=>s.tags.map(b=>D(se,{style:{marginRight:"6px"},type:"info",bordered:!1},{default:()=>b}))},{title:"Remark",key:"remark",width:300},{title:"Action",key:"actions",render:s=>D(w,{size:"small"},{default:()=>"Send Email"})}],a=h([...l].map(s=>({...s,width:400}))),i=h([{key:0,name:"John Brown",age:32,address:"New York No. 1 Lake Park",tags:["nice","developer"],remark:"我是一条很长很长的备注"},{key:1,name:"Jim Green",age:42,address:"London No. 1 Lake Park",tags:["wow"],remark:"我是一条很长很长的备注"},{key:2,name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park",tags:["cool","teacher"],remark:"我是一条很长很长的备注"}]),n=[{label:"编辑",key:"edit"},{label:()=>D("span",{style:{color:"red"}},"删除"),key:"delete"}],m=L({gridItemCount:4,gridCollapsedRows:1,tableLoading:!1}),d=(s,r)=>{s==="delete"&&i.value.splice(r,1)};return de(()=>{var s;(s=t.value)==null||s.rayTableInstance}),{...j(m),tableData:i,actionColumns:a,baseColumns:l,tableMenuOptions:n,handleMenuSelect:d,tableRef:t}},render(){return e(ne,null,{default:()=>[e(O,null,{default:()=>[o("RayTable 组件使用")]}),e(te,{alignText:!0},{default:()=>[e(k,null,{default:()=>[o("该组件基于 Naive UI DataTable 组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能")]}),e(k,null,{default:()=>[o("RayTable 完全继承 DataTable 的所有属性与方法")]}),e(k,null,{default:()=>[o("相关拓展 props 属性，可以在源码位置 src/components/RayTable/src/props.ts 中查看相关代码与注释")]}),e(k,null,{default:()=>[o("该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏")]})]}),e(O,null,{default:()=>[o("配合 RayCollapseGird 组件使用与 RayTable 拓展功能")]}),e(C,null,{default:()=>[o("使用响应式方法代理 columns 并且打开 action 则可以启用操作栏(v-model:columns)")]}),e(C,null,{default:()=>[o("拖拽操作栏动态切换表格列")]}),e(C,null,{default:()=>[o("点击左右固定按钮，即可动态固定列")]}),e(C,null,{default:()=>[o("点击修改列宽度，即可拖动列修改宽度")]}),e(C,null,{default:()=>[o("点击导出按钮即可导出 excel 表格，默认以列为表头输出")]}),e(C,null,{default:()=>[o("点击打印按钮即可打印该表格")]}),e(C,null,{default:()=>[o("右键菜单")]}),e(C,null,{default:()=>[o("全屏表格")]}),e(Se,{bordered:!1,collapsedRows:this.gridCollapsedRows,cols:this.gridItemCount,onUpdateValue:t=>window.$message.info(`我是 RayCollapseGrid 组件${t?"收起":"展开"}的回调函数`)},{action:()=>e(I,null,[e(w,{type:"primary"},{default:()=>[o("搜索")]}),e(w,null,{default:()=>[o("重置")]})]),default:()=>e(I,null,[e(E,null,{default:()=>[e(ae,null,null)]}),e(E,null,{default:()=>[e(R,null,null)]}),e(E,null,{default:()=>[e(le,{type:"datetimerange",clearable:!0},null)]}),e(E,null,{default:()=>[e(R,null,null)]}),e(E,null,{default:()=>[e(R,null,null)]})])}),e(xe,{style:"margin-top: 18px",ref:"tableRef",scrollX:2e3,title:D(ie,{onUpdateValue:t=>this.tableLoading=t},{}),data:this.tableData,columns:this.actionColumns,"onUpdate:columns":t=>this.actionColumns=t,pagination:{pageSize:10},loading:this.tableLoading,rightClickMenu:this.tableMenuOptions,onMenuSelect:this.handleMenuSelect.bind(this)},{tableFooter:()=>"表格的底部内容区域插槽，有时候你可能会用上"})]})}});export{lt as default};