ray-template/assets/index-a21bf9b1.js

import{s as Y}from"./pinia-1fd00649.js";import{b as q,R as C,e as O}from"./index-02061073.js";import{V as X}from"./vuedraggable-fb995778.js";import{M as P,N as J,V as y,W as K,o as L,I as S,X as W,U as Z,y as Q,p as k,Y as ee,Z as te,_ as E,T as $,$ as le,a0 as D,R as b,a1 as ae,H as B,a2 as ie,q as ne,E as se,B as oe}from"./naive-ui-8b684773.js";import{e as F,i as I,r as m,aa as e,l as T,E as j,p as ue,M as H,F as R,x as re,n as de,c as o,q as z}from"./@vue-0f114043.js";import{s as A}from"./screenfull-578bfdd4.js";import{p as ce}from"./print-js-819a679c.js";import{u as w,w as pe}from"./xlsx-1a040596.js";import{d as he}from"./dayjs-e34bfade.js";import"./vue-demi-71ba0ef2.js";import"./pinia-plugin-persistedstate-d93b4f94.js";import"./vue-i18n-37f9b77c.js";import"./@intlify-bd5dfa46.js";import"./lodash-es-c8e56e34.js";import"./vue-router-ed35b26a.js";import"./@vueuse-dacd7844.js";import"./date-fns-7f923de7.js";import"./vueuc-4d05699f.js";import"./evtd-b614532e.js";import"./seemly-dc6f1e91.js";import"./@css-render-ad88a31e.js";import"./vooks-ab318924.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-d5390e61.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=q(),i=I("tableSettingProvider",{}),n=m(me(i.modelColumns.value)),p=m(!0),{themeValue:s}=Y(a);return{settingOptions:n,handleDraggableEnd:()=>{l("columnsUpdate",n.value)},handleFixedClick:(g,d)=>{const f=`${g}FixedActivated`,c=n.value[d];f==="leftFixedActivated"?c.rightFixedActivated=!1:f==="rightFixedActivated"&&(c.leftFixedActivated=!1),c[f]=!c[f],c[f]?c.fixed=g:c.fixed=void 0,n.value[d]=c,l("columnsUpdate",n.value)},disableDraggable:p,FixedPopoverIcon:g=>{const{element:d,name:f,tooltip:c,fn:_,index:u,fixed:x,key:M}=g;return e(y,null,{trigger:()=>e(C,{customClassName:`draggable-item__icon ${d[M]?"draggable-item__icon--actived":""}`,name:f,size:"18",onClick:_.bind(this,x,u)},null),default:()=>c})},handleResizeColumnClick:g=>{const d=n.value[g];d.resizeColumnActivated=!d.resizeColumnActivated,d.resizable=d.resizeColumnActivated,n.value[g]=d,l("columnsUpdate",n.value)},themeValue:s}},render(){return e(y,{trigger:"click",placement:"bottom",showArrow:!1,raw:!0},{trigger:()=>e(C,{customClassName:"ray-table__setting",name:"setting",size:"18"},null),default:()=>e(P,{bordered:!1,class:"table-setting__card"},{default:()=>e(X,{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(C,{customClassName:"draggable-item__d--icon",name:"draggable",size:"18"},null),e(J,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(y,null,{trigger:()=>e(C,{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"})])})})})}}),G=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=m(!1);return{handleEmit:n=>{l(n==="positive"?"positive":"negative"),a.value=!1},showPopoconfirm:a}},render(){return e(y,null,{trigger:()=>e(K,{show:this.showPopoconfirm,"onUpdate:show":t=>this.showPopoconfirm=t,showArrow:!0},{trigger:()=>e(C,{name:this.icon,size:this.iconSize,customClassName:"ray-table-icon"},null),default:()=>this.tooltip,action:()=>e(L,null,{default:()=>[e(S,{size:"small",ghost:!0,onClick:this.handleEmit.bind(this,"negative")},{default:()=>[this.negativeText]}),e(S,{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=I("tableSettingProvider",{}),i=m(!1),n=m(a.size),p=T({get:()=>a.size,set:r=>{n.value=r}}),s=m([{label:"默认",key:"medium"},{label:"紧凑",key:"small"},{label:"宽松",key:"large"}]);return{sizeOptions:s,currentSize:n,handleDropdownClick:r=>{s.value.forEach(v=>{v.key===r&&(p.value=r,i.value=!1,l("changeSize",r))})},popoverShow:i}},render(){return e(y,{show:this.popoverShow,"onUpdate:show":t=>this.popoverShow=t,trigger:"click",placement:"bottom",showArrow:!1,raw:!0},{trigger:()=>e(y,null,{trigger:()=>e(C,{name:"adjustment",size:"18",customClassName:"ray-table-icon"},null),default:()=>"表格密度"}),default:()=>e(P,{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])]))])])]})})}}),be=F({name:"TableScreenfull",setup(){const t=I("tableSettingProvider",{}),l=T(()=>t.rayTableUUID);let a=A.isFullscreen;return{handleScreenfull:()=>{const n=document.getElementById(l.value);a=!a,n&&A.isEnabled&&a?A.request(n):A.exit()}}},render(){return e(y,null,{trigger:()=>e(C,{name:"fullscreen",size:"18",customClassName:"ray-table-icon",onClick:this.handleScreenfull.bind(this)},null),default:()=>"全屏表格"})}}),Ce={...W,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}},ve=t=>t.reduce((a,i)=>(a[i.key]=i.title,a),{}),ye=(t,l,a)=>{for(let i=t.s.c;i<=t.e.c;i++){const n=w.encode_col(i)+"1";l[n].v=a[l[n].v]}},Fe=async(t,l,a={})=>{await new Promise((i,n)=>{if(t!=null&&t.length){const p=ve(l??[]),s=w.json_to_sheet(t),h=w.book_new(),r=a.filename?a.filename+".xlsx":he().format("YYYY-MM-DD")+"导出表格.xlsx";w.book_append_sheet(h,s,"Data");const v=w.decode_range(s["!ref"]);l!=null&&l.length&&ye(v,s,p),pe(h,r),i()}else n()})},xe=F({name:"RayTable",props:Ce,emits:["update:columns","menuSelect","exportSuccess","exportError"],setup(t,{emit:l}){const a=O(),i=O(),n=T(()=>t.rightClickMenu),p=T({get:()=>t.columns,set:u=>{l("update:columns",u)}}),s=j({x:0,y:0,showMenu:!1});let h=-1;const r=T(()=>({"--ray-table-header-space":t.tableHeaderSpace})),v=m(t.size);ue("tableSettingProvider",{modelRightClickMenu:n,modelColumns:p,size:t.size,rayTableUUID:i});const U=u=>{p.value=u},g=(u,x)=>{l("menuSelect",u,h,x),s.showMenu=!1},d=(u,x)=>{var V;return{...(V=t.rowProps)==null?void 0:V.call(t,u,x),onContextmenu:N=>{N.preventDefault(),h=x,s.showMenu=!1,de().then(()=>{s.showMenu=!0,s.x=N.clientX,s.y=N.clientY})}}},f=async()=>{if(t.data.length&&t.columns.length)try{await Fe(t.data,t.columns,{filename:t.exportFilename}),l("exportSuccess")}catch{l("exportError")}},c=()=>{const u=Object.assign({},t.printOptions,{printable:a,type:t.printType,documentTitle:t.printOptions.documentTitle?t.printOptions.documentTitle:"表格"});ce(u)},_=u=>{v.value=u};return{tableUUID:a,rayTableUUID:i,handleColumnsUpdate:U,...H(s),handleRowProps:d,handleRightMenuSelect:g,handleExportPositive:f,handlePrintPositive:c,cssVars:r,handleChangeTableSize:_,tableSize:v}},render(){return e(P,{class:"ray-table",bordered:this.bordered,style:[this.cssVars],id:this.rayTableUUID},{default:()=>e(R,null,[e(Z,re({id:this.tableUUID},this.$props,{rowProps:this.handleRowProps.bind(this),size:this.tableSize}),{empty:()=>{var t,l;return(l=(t=this.$slots)==null?void 0:t.empty)==null?void 0:l.call(t)},loading:()=>{var t,l;return(l=(t=this.$slots)==null?void 0:t.loading)==null?void 0:l.call(t)}}),this.showMenu?e(Q,{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(G,{icon:this.printIcon,tooltip:this.printTooltip,popoverContent:"打印表格",positiveText:this.printPositiveText,negativeText:this.printNegativeText,onPositive:this.handlePrintPositive.bind(this)},null),e(k,{vertical:!0},null),e(G,{icon:this.exportExcelIcon,tooltip:this.exportTooltip,popoverContent:"导出表格",positiveText:this.exportPositiveText,negativeText:this.exportNegativeText,onPositive:this.handleExportPositive.bind(this)},null),e(k,{vertical:!0},null),e(fe,{onChangeSize:this.handleChangeTableSize.bind(this)},null),e(k,{vertical:!0},null),e(be,null,null),e(k,{vertical:!0},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},...ee},we=F({name:"RayCollapseGrid",props:Ee,emits:["updateValue"],setup(t,{emit:l}){const a=m(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(C,{customClassName:`collapse-icon--arrow ${a.value?"":"collapse-icon--arrow__expanded"}`,name:"expanded",size:"14"},null)])}},render(){return e(P,{bordered:this.bordered},{default:()=>e(te,{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(L,{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=[{title:"Name",key:"name"},{title:"Age",key:"age"},{title:"Address",key:"address"},{title:"Tags",key:"tags",render:s=>s.tags.map(r=>z(oe,{style:{marginRight:"6px"},type:"info",bordered:!1},{default:()=>r}))},{title:"Action",key:"actions",render:s=>z(S,{size:"small"},{default:()=>"Send Email"})}],l=m([...t].map(s=>({...s,width:400}))),a=m([{key:0,name:"John Brown",age:32,address:"New York No. 1 Lake Park",tags:["nice","developer"]},{key:1,name:"Jim Green",age:42,address:"London No. 1 Lake Park",tags:["wow"]},{key:2,name:"Joe Black",age:32,address:"Sidney No. 1 Lake Park",tags:["cool","teacher"]}]),i=[{label:"编辑",key:"edit"},{label:()=>z("span",{style:{color:"red"}},"删除"),key:"delete"}],n=j({gridItemCount:4,gridCollapsedRows:1,tableLoading:!1}),p=(s,h)=>{s==="delete"&&a.value.splice(h,1)};return{...H(n),tableData:a,actionColumns:l,baseColumns:t,tableMenuOptions:i,handleMenuSelect:p}},render(){return e(se,null,{default:()=>[e($,null,{default:()=>[o("RayTable 组件使用")]}),e(le,{alignText:!0},{default:()=>[e(D,null,{default:()=>[o("该组件基于 Naive UI DataTable 组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能")]}),e(D,null,{default:()=>[o("RayTable 完全继承 DataTable 的所有属性与方法")]}),e(D,null,{default:()=>[o("相关拓展 props 属性，可以在源码位置 src/components/RayTable/src/props.ts 中查看相关代码与注释")]}),e(D,null,{default:()=>[o("该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏")]})]}),e($,null,{default:()=>[o("配合 RayCollapseGird 组件使用与 RayTable 拓展功能")]}),e(b,null,{default:()=>[o("使用响应式方法代理 columns 并且打开 action 则可以启用操作栏(v-model:columns)")]}),e(b,null,{default:()=>[o("拖拽操作栏动态切换表格列")]}),e(b,null,{default:()=>[o("点击左右固定按钮，即可动态固定列")]}),e(b,null,{default:()=>[o("点击修改列宽度，即可拖动列修改宽度")]}),e(b,null,{default:()=>[o("点击导出按钮即可导出 excel 表格，默认以列为表头输出")]}),e(b,null,{default:()=>[o("点击打印按钮即可打印该表格")]}),e(b,null,{default:()=>[o("右键菜单")]}),e(b,null,{default:()=>[o("全屏表格")]}),e(we,{bordered:!1,collapsedRows:this.gridCollapsedRows,cols:this.gridItemCount,onUpdateValue:t=>window.$message.info(`我是 RayCollapseGrid 组件${t?"收起":"展开"}的回调函数`)},{action:()=>e(R,null,[e(S,{type:"primary"},{default:()=>[o("搜索")]}),e(S,null,{default:()=>[o("重置")]})]),default:()=>e(R,null,[e(E,null,{default:()=>[e(ae,null,null)]}),e(E,null,{default:()=>[e(B,null,null)]}),e(E,null,{default:()=>[e(ie,{type:"datetimerange",clearable:!0},null)]}),e(E,null,{default:()=>[e(B,null,null)]}),e(E,null,{default:()=>[e(B,null,null)]})])}),e(xe,{style:"margin-top: 18px",title:z(ne,{onUpdateValue:t=>this.tableLoading=t},{}),data:this.tableData,columns:this.baseColumns,pagination:{pageSize:10},loading:this.tableLoading,rightClickMenu:this.tableMenuOptions,onMenuSelect:this.handleMenuSelect.bind(this)},{tableFooter:()=>"表格的底部内容区域，有时候你可能会用上"})]})}});export{lt as default};