ray-template/assets/index-75e8e13c.js

import{e as te,d as C,m as L,l as j}from"./index-6cc317bd.js";import{V as ae}from"./vuedraggable@4.1.0_vue@3.3.4-c9b779ee.js";import{s as le}from"./pinia@2.1.4_typescript@5.0.2_vue@3.3.4-ab93b4ec.js";import{U as B,N as ie,Q as v,a2 as ne,f as X,P as w,a3 as oe,a1 as se,n as ue,a4 as re,S as de,T as E,_ as Y,a5 as ce,a6 as _,Y as y,a7 as pe,p as M,a8 as he,e as me,B as fe,y as ge}from"./naive-ui@2.34.4_vue@3.3.4-eb250861.js";import{k as F,i as O,b as e,E as P,A as S,z as be,f as q,F as V,n as ye,p as u,h as z}from"./@vue_runtime-core@3.3.4-073fad6e.js";import{k as p,h as J,v as K}from"./@vue_reactivity@3.3.4-2b3a1c4e.js";import{s as A}from"./screenfull@6.0.2-b3e6dc1f.js";import{p as Ce}from"./print-js@1.6.0-31e6d2b4.js";import{u as T,w as ve}from"./xlsx@0.18.5-65d3fcd1.js";import{d as Fe}from"./dayjs@1.11.7-adc18375.js";import"./vue-router@4.2.4_vue@3.3.4-4991130b.js";import"./lodash-es@4.17.21-b7de4195.js";import"./vue-i18n@9.2.2_vue@3.3.4-a7a92bd0.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_runtime-dom@3.3.4-d86573ec.js";import"./@vue_shared@3.3.4-896c5ecf.js";import"./@vueuse_core@9.1.0_vue@3.3.4-f4b6b7e2.js";import"./@vueuse_shared@9.1.0_vue@3.3.4-e5bccb39.js";import"./pinia-plugin-persistedstate@3.1.0_pinia@2.1.4-4f3b1591.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.3.4-6588b5bd.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.3.4-24369cc5.js";import"./vooks@0.2.12_vue@3.3.4-59877c34.js";import"./vdirs@0.1.8_vue@3.3.4-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-demi@0.14.5_vue@3.3.4-71ba0ef2.js";import"./vue@3.3.4-1da73de6.js";import"./sortablejs@1.14.0-ca132232.js";const xe=t=>t.map(l=>(l.fixed&&(l.fixed==="right"?l.rightFixedActivated=!0:l.leftFixedActivated=!0),l.resizable&&(l.resizeColumnActivated=!0),l)),Ee=F({name:"TableSetting",emits:["columnsUpdate"],setup(t,{emit:a}){const l=O("tableSettingProvider",{}),n=te(),i=p(xe(l.modelColumns.value)),d=p(!0),{themeValue:h}=le(n);return{settingOptions:i,handleDraggableEnd:()=>{a("columnsUpdate",i.value)},handleFixedClick:(f,c)=>{const b=`${f}FixedActivated`,m=i.value[c];b==="leftFixedActivated"?m.rightFixedActivated=!1:b==="rightFixedActivated"&&(m.leftFixedActivated=!1),m[b]=!m[b],m[b]?m.fixed=f:m.fixed=void 0,i.value[c]=m,a("columnsUpdate",i.value)},disableDraggable:d,FixedPopoverIcon:f=>{const{element:c,name:b,tooltip:m,fn:N,index:R,fixed:U,key:I}=f;return e(v,null,{trigger:()=>e(C,{customClassName:`draggable-item__icon ray-table-icon ${c[I]?"draggable-item__icon--actived":""}`,name:b,size:"18",onClick:N.bind(this,U,R)},null),default:()=>m})},handleResizeColumnClick:f=>{const c=i.value[f];c.resizeColumnActivated=!c.resizeColumnActivated,c.resizable=c.resizeColumnActivated,i.value[f]=c,a("columnsUpdate",i.value)},themeValue:h}},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:a})=>e("div",{class:["draggable-item",this.themeValue?"draggable-item--dark":""]},[e(C,{customClassName:"draggable-item__d--icon",name:"draggable",size:"18"},null),e(ie,null,{default:()=>[e("span",null,[t.title])]}),this.FixedPopoverIcon({element:t,name:"left_arrow",tooltip:"左固定",fn:this.handleFixedClick,index:a,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,a)},null),default:()=>"修改列宽"}),this.FixedPopoverIcon({element:t,name:"right_arrow",tooltip:"右固定",fn:this.handleFixedClick,index:a,fixed:"right",key:"rightFixedActivated"})])})})})}}),H=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:a}){const l=p(!1);return{handleEmit:i=>{a(i==="positive"?"positive":"negative"),l.value=!1},showPopoconfirm:l}},render(){return e(v,null,{trigger:()=>e(ne,{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(X,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 Se=F({name:"TableSize",emits:["changeSize"],setup(t,{emit:a}){const l=O("tableSettingProvider",{}),n=p(!1),i=p(l.size),d=S({get:()=>l.size,set:o=>{i.value=o}}),h=p([{label:"默认",key:"medium"},{label:"紧凑",key:"small"},{label:"宽松",key:"large"}]);return{sizeOptions:h,currentSize:i,handleDropdownClick:o=>{h.value.forEach(g=>{g.key===o&&(d.value=o,n.value=!1,a("changeSize",o))})},popoverShow:n}},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 ke=F({name:"TableScreenfull",setup(){const t=O("tableSettingProvider",{}),a=S(()=>t.rayTableUUID);let l=A.isFullscreen;return{handleScreenfull:()=>{const i=document.getElementById(a.value);l=!l,i&&A.isEnabled&&l?A.request(i):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={...oe,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}},we=t=>t.reduce((l,n)=>(l[n.key]=n.title,l),{}),De=(t,a,l)=>{for(let n=t.s.c;n<=t.e.c;n++){const i=T.encode_col(n)+"1";a[i].v=l[a[i].v]}},_e=async(t,a,l={})=>{await new Promise((n,i)=>{if(Array.isArray(t))if(t.length){const d=we(a??[]),h=T.json_to_sheet(t),s=T.book_new(),o=l.filename?l.filename+".xlsx":Fe().format("YYYY-MM-DD")+"导出表格.xlsx";T.book_append_sheet(s,h,"Data");const g=T.decode_range(h["!ref"]);a!=null&&a.length&&De(g,h,d),ve(s,o),n()}else n();else i()})},ze=F({name:"RayTable",props:Te,emits:["update:columns","menuSelect","exportSuccess","exportError"],setup(t,{emit:a,expose:l}){const n=p(),i=L(16),d=L(16),h=S(()=>t.rightClickMenu),s=S({get:()=>t.columns,set:r=>{a("update:columns",r)}}),o=J({x:0,y:0,showMenu:!1});let g=-1;const $=S(()=>({"--ray-table-header-space":t.tableHeaderSpace})),f=p(t.size),c=p();be("tableSettingProvider",{modelRightClickMenu:h,modelColumns:s,size:t.size,rayTableUUID:d});const b=r=>{s.value=r},m=(r,x)=>{a("menuSelect",r,g,x),o.showMenu=!1},N=(r,x)=>{var D;return{...(D=t.rowProps)==null?void 0:D.call(t,r,x),onContextmenu:k=>{k.preventDefault(),g=x,o.showMenu=!1,ye().then(()=>{o.showMenu=!0,o.x=k.clientX,o.y=k.clientY})}}},R=async()=>{if(t.data.length&&t.columns.length)try{await _e(t.data,t.columns,{filename:t.exportFilename}),a("exportSuccess")}catch{a("exportError")}},U=()=>{const r=Object.assign({},t.printOptions,{printable:i,type:t.printType,documentTitle:t.printOptions.documentTitle?t.printOptions.documentTitle:"表格"});Ce(r)},I=r=>{f.value=r},Q=r=>{const{clearFilters:x,clearSorter:G,filters:D,page:k,scrollTo:W,sort:Z,filter:ee}=r;c.value={clearFilters:x,clearSorter:G,filters:D,page:k,scrollTo:W,sort:Z,filter:ee}};return l({tableMethods:S(()=>c.value)}),q(()=>{Q(n.value)}),{tableUUID:i,rayTableUUID:d,handleColumnsUpdate:b,...K(o),handleRowProps:N,handleRightMenuSelect:m,handleExportPositive:R,handlePrintPositive:U,cssVars:$,handleChangeTableSize:I,tableSize:f,rayTableInstance:n}},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(ue,{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(H,{icon:this.printIcon,tooltip:this.printTooltip,popoverContent:"打印表格",positiveText:this.printPositiveText,negativeText:this.printNegativeText,onPositive:this.handlePrintPositive.bind(this)},null),e(H,{icon:this.exportExcelIcon,tooltip:this.exportTooltip,popoverContent:"导出表格",positiveText:this.exportPositiveText,negativeText:this.exportNegativeText,onPositive:this.handleExportPositive.bind(this)},null),e(Se,{onChangeSize:this.handleChangeTableSize.bind(this)},null),e(ke,null,null),e(Ee,{onColumnsUpdate:this.handleColumnsUpdate.bind(this)},null)]):"",footer:()=>{var t,a;return(a=(t=this.$slots).tableFooter)==null?void 0:a.call(t)}})}});const Ae={value:{type:Boolean,default:!0},collapseToggleText:{type:Array,default:()=>["展开","收起"]},bordered:{type:Boolean,default:!1},onUpdateValue:{type:[Function,Array],default:null},"onUpdate:value":{type:[Function,Array],default:null},...re},Pe=F({name:"RayCollapseGrid",props:Ae,setup(t){const a=p(t.value),l=()=>{a.value=!a.value;const{onUpdateValue:i,"onUpdate:value":d}=t;i&&j(i,a.value),d&&j(d,a.value)};return{modelCollapsed:a,handleCollapse:l,CollapseIcon:()=>e("div",{class:"collapse-icon",onClick:l.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(de,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,a;return[(a=(t=this.$slots).default)==null?void 0:a.call(t),e(E,{suffix:!0,class:"ray-collapse-grid__suffix--btn"},{default:()=>[e(X,{justify:"end"},{default:()=>{var l,n;return[(n=(l=this.$slots).action)==null?void 0:n.call(l),this.CollapseIcon()]}})]})]}})})}}),vt=F({name:"TableView",setup(){const t=p(),a=[{title:"Name",key:"name"},{title:"Age",key:"age"},{title:"Address",key:"address"},{title:"Tags",key:"tags",render:s=>s.tags.map(g=>z(ge,{style:{marginRight:"6px"},type:"info",bordered:!1},{default:()=>g}))},{title:"Remark",key:"remark",width:300},{title:"Action",key:"actions",render:s=>z(w,{size:"small"},{default:()=>"Send Email"})}],l=p([...a].map(s=>({...s,width:400}))),n=p([{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:"我是一条很长很长的备注"}]),i=[{label:"编辑",key:"edit"},{label:()=>z("span",{style:{color:"red"}},"删除"),key:"delete"}],d=J({gridItemCount:4,gridCollapsedRows:1,tableLoading:!1}),h=(s,o)=>{s==="delete"&&n.value.splice(o,1)};return q(()=>{var s;(s=t.value)==null||s.tableMethods}),{...K(d),tableData:n,actionColumns:l,baseColumns:a,tableMenuOptions:i,handleMenuSelect:h,tableRef:t}},render(){return e(fe,null,{default:()=>[e(Y,null,{default:()=>[u("RayTable 组件使用")]}),e(ce,{alignText:!0},{default:()=>[e(_,null,{default:()=>[u("该组件基于 Naive UI DataTable 组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能")]}),e(_,null,{default:()=>[u("RayTable 完全继承 DataTable 的所有属性与方法")]}),e(_,null,{default:()=>[u("相关拓展 props 属性，可以在源码位置 src/components/RayTable/src/props.ts 中查看相关代码与注释")]}),e(_,null,{default:()=>[u("该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏")]})]}),e(Y,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(Pe,{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(pe,null,null)]}),e(E,null,{default:()=>[e(M,null,null)]}),e(E,null,{default:()=>[e(he,{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:z(me,{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{vt as default};