ray-template/assets/index-73e00549.js

import{s as ee}from"./pinia@2.0.17_typescript@5.0.2_vue@3.2.47-a112ab9d.js";import{e as te,d as C,l as L}from"./index-28ba1be9.js";import{V as ae}from"./vuedraggable@4.1.0_vue@3.2.47-5627e085.js";import{U as B,N as le,Q as v,a3 as ie,f as H,P as w,a4 as ne,Z as se,n as oe,a5 as ue,S as re,T as E,$ as j,a6 as de,a7 as z,Y as y,a8 as ce,p as M,a9 as pe,e as he,B as me,y as ge}from"./naive-ui@2.34.4_vue@3.2.47-32e0de7f.js";import{d as F,i as $,a as e,D as P,z as S,y as fe,e as X,F as V,n as be,m as u,h as _}from"./@vue_runtime-core@3.2.47-0e1d4738.js";import{k as c,h as q,v as J}from"./@vue_reactivity@3.2.47-f5c8a668.js";import{s as A}from"./screenfull@6.0.2-b3e6dc1f.js";import{p as ye}from"./print-js@1.6.0-31e6d2b4.js";import{u as k,w as Ce}from"./xlsx@0.18.5-65d3fcd1.js";import{d as ve}from"./dayjs@1.11.7-adc18375.js";import"./vue-demi@0.14.5_vue@3.2.47-71ba0ef2.js";import"./@vue_runtime-dom@3.2.47-43f0d619.js";import"./@vue_shared@3.2.47-7b400ff4.js";import"./lodash-es@4.17.21-92f3d5bd.js";import"./vue-i18n@9.2.2_vue@3.2.47-89f98dc3.js";import"./@intlify_shared@9.2.2-e4047ebf.js";import"./@intlify_core-base@9.2.2-a0a8715c.js";import"./@intlify_message-compiler@9.2.2-8a818441.js";import"./@intlify_devtools-if@9.2.2-c61c979f.js";import"./vue-router@4.1.3_vue@3.2.47-450d1fe0.js";import"./@vueuse_core@9.1.0_vue@3.2.47-6868176a.js";import"./@vueuse_shared@9.1.0_vue@3.2.47-0bbfe17c.js";import"./pinia-plugin-persistedstate@2.4.0_pinia@2.0.17-d93b4f94.js";import"./clipboard@2.0.11-6193b289.js";import"./@babel_runtime@7.22.6-960cbc2f.js";import"./date-fns@2.30.0-0bf1b710.js";import"./vueuc@0.4.51_vue@3.2.47-57ccb8de.js";import"./evtd@0.2.4-b614532e.js";import"./seemly@0.3.6-dc6f1e91.js";import"./@css-render_vue3-ssr@0.15.12_vue@3.2.47-1c0b4a7a.js";import"./vooks@0.2.12_vue@3.2.47-b42353d8.js";import"./vdirs@0.1.8_vue@3.2.47-4519c5fd.js";import"./@juggle_resize-observer@3.4.0-41516555.js";import"./css-render@0.15.12-57b1a53f.js";import"./@emotion_hash@0.8.0-8a8e73f6.js";import"./treemate@0.3.11-25c27bff.js";import"./date-fns-tz@1.3.8_date-fns@2.30.0-7cff6900.js";import"./async-validator@4.2.5-dee29e8b.js";import"./@css-render_plugin-bem@0.15.12_css-render@0.15.12-9dde7ffe.js";import"./vue@3.2.47-5fa18258.js";import"./sortablejs@1.14.0-ca132232.js";const Fe=t=>t.map(a=>(a.fixed&&(a.fixed==="right"?a.rightFixedActivated=!0:a.leftFixedActivated=!0),a.resizable&&(a.resizeColumnActivated=!0),a)),xe=F({name:"TableSetting",emits:["columnsUpdate"],setup(t,{emit:l}){const a=$("tableSettingProvider",{}),i=te(),n=c(Fe(a.modelColumns.value)),m=c(!0),{themeValue:p}=ee(i);return{settingOptions:n,handleDraggableEnd:()=>{l("columnsUpdate",n.value)},handleFixedClick:(g,d)=>{const b=`${g}FixedActivated`,h=n.value[d];b==="leftFixedActivated"?h.rightFixedActivated=!1:b==="rightFixedActivated"&&(h.leftFixedActivated=!1),h[b]=!h[b],h[b]?h.fixed=g:h.fixed=void 0,n.value[d]=h,l("columnsUpdate",n.value)},disableDraggable:m,FixedPopoverIcon:g=>{const{element:d,name:b,tooltip:h,fn:N,index:R,fixed:I,key:U}=g;return e(v,null,{trigger:()=>e(C,{customClassName:`draggable-item__icon ray-table-icon ${d[U]?"draggable-item__icon--actived":""}`,name:b,size:"18",onClick:N.bind(this,I,R)},null),default:()=>h})},handleResizeColumnClick:g=>{const d=n.value[g];d.resizeColumnActivated=!d.resizeColumnActivated,d.resizable=d.resizeColumnActivated,n.value[g]=d,l("columnsUpdate",n.value)},themeValue:p}},render(){return e(v,{trigger:"click",placement:"bottom",showArrow:!1,raw:!0},{trigger:()=>e(C,{customClassName:"ray-table__setting",name:"setting",size:"18"},null),default:()=>e(B,{bordered:!1,class:"table-setting__card"},{default:()=>e(ae,P({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(le,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(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"})])})})})}}),Y=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=c(!1);return{handleEmit:n=>{l(n==="positive"?"positive":"negative"),a.value=!1},showPopoconfirm:a}},render(){return e(v,null,{trigger:()=>e(ie,{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(H,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 Ee=F({name:"TableSize",emits:["changeSize"],setup(t,{emit:l}){const a=$("tableSettingProvider",{}),i=c(!1),n=c(a.size),m=S({get:()=>a.size,set:s=>{n.value=s}}),p=c([{label:"默认",key:"medium"},{label:"紧凑",key:"small"},{label:"宽松",key:"large"}]);return{sizeOptions:p,currentSize:n,handleDropdownClick:s=>{p.value.forEach(f=>{f.key===s&&(m.value=s,i.value=!1,l("changeSize",s))})},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(C,{name:"adjustment",size:"18",customClassName:"ray-table-icon"},null),default:()=>"表格密度"}),default:()=>e(B,{bordered:!1,class:"ray-table__table-size ray-table__table-size--dark ray-table__table-size--light"},{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 Se=F({name:"TableScreenfull",setup(){const t=$("tableSettingProvider",{}),l=S(()=>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(v,null,{trigger:()=>e(C,{name:"fullscreen",size:"18",customClassName:"ray-table-icon tay-table-icon__screenfull",onClick:this.handleScreenfull.bind(this)},null),default:()=>"全屏表格"})}}),Te={...ne,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}},ke=t=>t.reduce((a,i)=>(a[i.key]=i.title,a),{}),we=(t,l,a)=>{for(let i=t.s.c;i<=t.e.c;i++){const n=k.encode_col(i)+"1";l[n].v=a[l[n].v]}},De=async(t,l,a={})=>{await new Promise((i,n)=>{if(Array.isArray(t))if(t.length){const m=ke(l??[]),p=k.json_to_sheet(t),o=k.book_new(),s=a.filename?a.filename+".xlsx":ve().format("YYYY-MM-DD")+"导出表格.xlsx";k.book_append_sheet(o,p,"Data");const f=k.decode_range(p["!ref"]);l!=null&&l.length&&we(f,p,m),Ce(o,s),i()}else i();else n()})},ze=F({name:"RayTable",props:Te,emits:["update:columns","menuSelect","exportSuccess","exportError"],setup(t,{emit:l,expose:a}){const i=c(),n=L(16),m=L(16),p=S(()=>t.rightClickMenu),o=S({get:()=>t.columns,set:r=>{l("update:columns",r)}}),s=q({x:0,y:0,showMenu:!1});let f=-1;const O=S(()=>({"--ray-table-header-space":t.tableHeaderSpace})),g=c(t.size),d=c();fe("tableSettingProvider",{modelRightClickMenu:p,modelColumns:o,size:t.size,rayTableUUID:m});const b=r=>{o.value=r},h=(r,x)=>{l("menuSelect",r,f,x),s.showMenu=!1},N=(r,x)=>{var D;return{...(D=t.rowProps)==null?void 0:D.call(t,r,x),onContextmenu:T=>{T.preventDefault(),f=x,s.showMenu=!1,be().then(()=>{s.showMenu=!0,s.x=T.clientX,s.y=T.clientY})}}},R=async()=>{if(t.data.length&&t.columns.length)try{await De(t.data,t.columns,{filename:t.exportFilename}),l("exportSuccess")}catch{l("exportError")}},I=()=>{const r=Object.assign({},t.printOptions,{printable:n,type:t.printType,documentTitle:t.printOptions.documentTitle?t.printOptions.documentTitle:"表格"});ye(r)},U=r=>{g.value=r},K=r=>{const{clearFilters:x,clearSorter:G,filters:D,page:T,scrollTo:Q,sort:Z,filter:W}=r;d.value={clearFilters:x,clearSorter:G,filters:D,page:T,scrollTo:Q,sort:Z,filter:W}};return a({tableMethods:S(()=>d.value)}),X(()=>{K(i.value)}),{tableUUID:n,rayTableUUID:m,handleColumnsUpdate:b,...J(s),handleRowProps:N,handleRightMenuSelect:h,handleExportPositive:R,handlePrintPositive:I,cssVars:O,handleChangeTableSize:U,tableSize:g,rayTableInstance:i}},render(){return e(B,P({class:"ray-table",bordered:this.bordered,style:[this.cssVars]},{id:this.rayTableUUID}),{default:()=>e(V,null,[e(se,P({ref:"rayTableInstance"},{id:this.tableUUID},this.$props,{rowProps:this.handleRowProps.bind(this),size:this.tableSize}),{...this.$slots}),this.showMenu?e(oe,{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(Y,{icon:this.printIcon,tooltip:this.printTooltip,popoverContent:"打印表格",positiveText:this.printPositiveText,negativeText:this.printNegativeText,onPositive:this.handlePrintPositive.bind(this)},null),e(Y,{icon:this.exportExcelIcon,tooltip:this.exportTooltip,popoverContent:"导出表格",positiveText:this.exportPositiveText,negativeText:this.exportNegativeText,onPositive:this.handleExportPositive.bind(this)},null),e(Ee,{onChangeSize:this.handleChangeTableSize.bind(this)},null),e(Se,null,null),e(xe,{onColumnsUpdate:this.handleColumnsUpdate.bind(this)},null)]):"",footer:()=>{var t,l;return(l=(t=this.$slots).tableFooter)==null?void 0:l.call(t)}})}});const _e={value:{type:Boolean,default:!0},collapseToggleText:{type:Array,default:()=>["展开","收起"]},bordered:{type:Boolean,default:!1},...ue},Ae=F({name:"RayCollapseGrid",props:_e,emits:["updateValue"],setup(t,{emit:l}){const a=c(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(B,{bordered:this.bordered},{default:()=>e(re,P({class:"ray-collapse-grid"},this.$props,{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(H,{justify:"end"},{default:()=>{var a,i;return[(i=(a=this.$slots).action)==null?void 0:i.call(a),this.CollapseIcon()]}})]})]}})})}}),Ct=F({name:"TableView",setup(){const t=c(),l=[{title:"Name",key:"name"},{title:"Age",key:"age"},{title:"Address",key:"address"},{title:"Tags",key:"tags",render:o=>o.tags.map(f=>_(ge,{style:{marginRight:"6px"},type:"info",bordered:!1},{default:()=>f}))},{title:"Remark",key:"remark",width:300},{title:"Action",key:"actions",render:o=>_(w,{size:"small"},{default:()=>"Send Email"})}],a=c([...l].map(o=>({...o,width:400}))),i=c([{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:()=>_("span",{style:{color:"red"}},"删除"),key:"delete"}],m=q({gridItemCount:4,gridCollapsedRows:1,tableLoading:!1}),p=(o,s)=>{o==="delete"&&i.value.splice(s,1)};return X(()=>{var o;(o=t.value)==null||o.tableMethods}),{...J(m),tableData:i,actionColumns:a,baseColumns:l,tableMenuOptions:n,handleMenuSelect:p,tableRef:t}},render(){return e(me,null,{default:()=>[e(j,null,{default:()=>[u("RayTable 组件使用")]}),e(de,{alignText:!0},{default:()=>[e(z,null,{default:()=>[u("该组件基于 Naive UI DataTable 组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能")]}),e(z,null,{default:()=>[u("RayTable 完全继承 DataTable 的所有属性与方法")]}),e(z,null,{default:()=>[u("相关拓展 props 属性，可以在源码位置 src/components/RayTable/src/props.ts 中查看相关代码与注释")]}),e(z,null,{default:()=>[u("该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏")]})]}),e(j,null,{default:()=>[u("配合 RayCollapseGird 组件使用与 RayTable 拓展功能")]}),e(y,null,{default:()=>[u("使用响应式方法代理 columns 并且打开 action 则可以启用操作栏(v-model:columns)")]}),e(y,null,{default:()=>[u("拖拽操作栏动态切换表格列")]}),e(y,null,{default:()=>[u("点击左右固定按钮，即可动态固定列")]}),e(y,null,{default:()=>[u("点击修改列宽度，即可拖动列修改宽度")]}),e(y,null,{default:()=>[u("点击导出按钮即可导出 excel 表格，默认以列为表头输出")]}),e(y,null,{default:()=>[u("点击打印按钮即可打印该表格")]}),e(y,null,{default:()=>[u("右键菜单")]}),e(y,null,{default:()=>[u("全屏表格")]}),e(Ae,{bordered:!1,collapsedRows:this.gridCollapsedRows,cols:this.gridItemCount,onUpdateValue:t=>window.$message.info(`我是 RayCollapseGrid 组件${t?"收起":"展开"}的回调函数`)},{action:()=>e(V,null,[e(w,{type:"primary"},{default:()=>[u("搜索")]}),e(w,null,{default:()=>[u("重置")]})]),default:()=>e(V,null,[e(E,null,{default:()=>[e(ce,null,null)]}),e(E,null,{default:()=>[e(M,null,null)]}),e(E,null,{default:()=>[e(pe,{type:"datetimerange",clearable:!0},null)]}),e(E,null,{default:()=>[e(M,null,null)]}),e(E,null,{default:()=>[e(M,null,null)]})])}),e(ze,{style:"margin-top: 18px",ref:"tableRef",scrollX:2e3,title:_(he,{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{Ct as default};