mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-05-03 16:26:45 +08:00
2 lines
13 KiB
JavaScript
2 lines
13 KiB
JavaScript
import{s as O}from"./pinia-1fd00649.js";import{b as L,R as C}from"./index-dfd038f4.js";import{V as j}from"./vuedraggable-fb995778.js";import{P as _,N as Y,X as A,q as V,K as E,Y as H,Z as X,W as q,B as J,r as M,_ as K,$ as W,a0 as f,V as k,a1 as Z,a2 as D,a3 as Q,J as S,a4 as ee,u as te,T as g,G as ae,D as le}from"./naive-ui-ecfcb6af.js";import{e as v,i as ie,r as b,aa as e,l as P,E as U,p as ue,M as $,F as B,x as ne,n as se,c as s,q as F}from"./@vue-0f114043.js";import{p as oe}from"./print-js-819a679c.js";import{u as re}from"./hook-1ce4b33f.js";import{u as y,w as de}from"./xlsx-1a040596.js";import{d as ce}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-27b0db77.js";import"./screenfull-578bfdd4.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 pe=t=>t.map(l=>(l.fixed&&(l.fixed==="right"?l.rightFixedActivated=!0:l.leftFixedActivated=!0),l.resizable&&(l.resizeColumnActivated=!0),l)),he=v({name:"TableSetting",emits:["columnsUpdate"],setup(t,{emit:a}){const l=L(),i=ie("tableSettingProvider",{}),u=b(pe(i.modelColumns.value)),d=b(!0),{themeValue:o}=O(l);return{settingOptions:u,handleDraggableEnd:()=>{a("columnsUpdate",u.value)},handleFixedClick:(p,c)=>{const n=`${p}FixedActivated`,r=u.value[c];n==="leftFixedActivated"?r.rightFixedActivated=!1:n==="rightFixedActivated"&&(r.leftFixedActivated=!1),r[n]=!r[n],r[n]?r.fixed=p:r.fixed=void 0,u.value[c]=r,a("columnsUpdate",u.value)},disableDraggable:d,FixedPopoverIcon:p=>{const{element:c,name:n,tooltip:r,fn:z,index:w,fixed:x,key:G}=p;return e(A,null,{trigger:()=>e(C,{customClassName:`draggable-item__icon ${c[G]?"draggable-item__icon--actived":""}`,name:n,size:"18",onClick:z.bind(this,x,w)},null),default:()=>r})},handleResizeColumnClick:p=>{const c=u.value[p];c.resizeColumnActivated=!c.resizeColumnActivated,c.resizable=c.resizeColumnActivated,u.value[p]=c,a("columnsUpdate",u.value)},themeValue:o}},render(){return e(A,{trigger:"click",placement:"bottom",showArrow:!1,raw:!0},{trigger:()=>e(C,{customClassName:"ray-table__setting",name:"setting",size:"18"},null),default:()=>e(_,{bordered:!1,class:"table-setting__card"},{default:()=>e(j,{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(Y,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(A,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"})])})})})}}),I=v({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}},emits:["positive","negative"],setup(t,{emit:a}){const l=b(!1);return{handleEmit:u=>{a(u==="positive"?"positive":"negative"),l.value=!1},showPopoconfirm:l}},render(){return e(H,{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(V,null,{default:()=>[e(E,{size:"small",ghost:!0,onClick:this.handleEmit.bind(this,"negative")},{default:()=>[this.negativeText]}),e(E,{size:"small",ghost:!0,type:"info",onClick:this.handleEmit.bind(this,"positive")},{default:()=>[this.positiveText]})]})})}}),me={...X,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}},ge=t=>t.reduce((l,i)=>(l[i.key]=i.title,l),{}),fe=(t,a,l)=>{for(let i=t.s.c;i<=t.e.c;i++){const u=y.encode_col(i)+"1";a[u].v=l[a[u].v]}},Ce=async(t,a,l={})=>{await new Promise((i,u)=>{if(t!=null&&t.length){const d=ge(a??[]),o=y.json_to_sheet(t),h=y.book_new(),m=l.filename?l.filename+".xlsx":ce().format("YYYY-MM-DD")+"导出表格.xlsx";y.book_append_sheet(h,o,"Data");const T=y.decode_range(o["!ref"]);a!=null&&a.length&&fe(T,o,d),de(h,m),i()}else u()})},N=v({name:"RayTable",props:me,emits:["update:columns","menuSelect","exportSuccess","exportError"],setup(t,{emit:a}){const l=re(),i=P(()=>t.rightClickMenu),u=P({get:()=>t.columns,set:n=>{a("update:columns",n)}}),d=U({x:0,y:0,showMenu:!1});let o=-1;const h=P(()=>({"--ray-table-header-space":t.tableHeaderSpace}));ue("tableSettingProvider",{modelRightClickMenu:i,modelColumns:u});const m=n=>{u.value=n},T=(n,r)=>{a("menuSelect",n,o,r),d.showMenu=!1},R=(n,r)=>{var w;return{...(w=t.rowProps)==null?void 0:w.call(t,n,r),onContextmenu:x=>{x.preventDefault(),o=r,d.showMenu=!1,se().then(()=>{d.showMenu=!0,d.x=x.clientX,d.y=x.clientY})}}},p=async()=>{if(t.data.length&&t.columns.length)try{await Ce(t.data,t.columns,{filename:t.exportFilename}),a("exportSuccess")}catch{a("exportError")}},c=()=>{const n=Object.assign({},t.printOptions,{printable:l,type:t.printType,documentTitle:t.printOptions.documentTitle?t.printOptions.documentTitle:"表格"});oe(n)};return{tableUUID:l,handleColumnsUpdate:m,...$(d),handleRowProps:R,handleRightMenuSelect:T,handleExportPositive:p,handlePrintPositive:c,cssVars:h}},render(){return e(_,{class:"ray-table",bordered:this.bordered,style:[this.cssVars]},{default:()=>e(B,null,[e(q,ne({id:this.tableUUID},this.$props,{rowProps:this.handleRowProps.bind(this)}),{empty:()=>{var t,a;return(a=(t=this.$slots)==null?void 0:t.empty)==null?void 0:a.call(t)},loading:()=>{var t,a;return(a=(t=this.$slots)==null?void 0:t.loading)==null?void 0:a.call(t)}}),this.showMenu?e(J,{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(I,{icon:this.printIcon,tooltip:this.printTooltip,positiveText:this.printPositiveText,negativeText:this.printNegativeText,onPositive:this.handlePrintPositive.bind(this)},null),e(M,{vertical:!0},null),e(I,{icon:this.exportExcelIcon,tooltip:this.exportTooltip,positiveText:this.exportPositiveText,negativeText:this.exportNegativeText,onPositive:this.handleExportPositive.bind(this)},null),e(M,{vertical:!0},null),e(he,{onColumnsUpdate:this.handleColumnsUpdate.bind(this)},null)]):"",footer:()=>{var t,a;return(a=(t=this.$slots).tableFooter)==null?void 0:a.call(t)}})}});const be={value:{type:Boolean,default:!0},collapseToggleText:{type:Array,default:()=>["展开","收起"]},bordered:{type:Boolean,default:!1},...K},xe=v({name:"RayCollapseGrid",props:be,emits:["updateValue"],setup(t,{emit:a}){const l=b(t.value),i=()=>{l.value=!l.value,a("updateValue",l.value)};return{modelCollapsed:l,handleCollapse:i,CollapseIcon:()=>e("div",{class:"collapse-icon",onClick:i.bind(this)},[e("span",null,[l.value?t.collapseToggleText[0]:t.collapseToggleText[1]]),e(C,{customClassName:`collapse-icon--arrow ${l.value?"":"collapse-icon--arrow__expanded"}`,name:"expanded",size:"14"},null)])}},render(){return e(_,{bordered:this.bordered},{default:()=>e(W,{class:"ray-collapse-grid",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(f,{suffix:!0,class:"ray-collapse-grid__suffix--btn"},{default:()=>[e(V,{justify:"end"},{default:()=>{var l,i;return[(i=(l=this.$slots).action)==null?void 0:i.call(l),this.CollapseIcon()]}})]})]}})})}}),Ze=v({name:"TableView",setup(){const t=[{title:"Name",key:"name"},{title:"Age",key:"age"},{title:"Address",key:"address"},{title:"Tags",key:"tags",render:o=>o.tags.map(m=>F(le,{style:{marginRight:"6px"},type:"info",bordered:!1},{default:()=>m}))},{title:"Action",key:"actions",render:o=>F(E,{size:"small"},{default:()=>"Send Email"})}],a=b([...t].map(o=>({...o,width:400}))),l=b([{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:()=>F("span",{style:{color:"red"}},"删除"),key:"delete"}],u=U({gridItemCount:4,gridCollapsedRows:1,tableLoading:!1}),d=(o,h)=>{o==="delete"&&l.value.splice(h,1)};return{...$(u),tableData:l,actionColumns:a,baseColumns:t,tableMenuOptions:i,handleMenuSelect:d}},render(){return e(ae,null,{default:()=>[e(k,null,{default:()=>[s("RayTable 组件使用")]}),e(Z,{alignText:!0},{default:()=>[e(D,null,{default:()=>[s("该组件基于 Naive UI DataTable 组件封装。实现右键菜单、表格标题、导出为 excel 操作栏等功能")]}),e(D,null,{default:()=>[s("RayTable 完全继承 DataTable 的所有属性与方法")]}),e(D,null,{default:()=>[s("相关拓展 props 属性，可以在源码位置 src/components/RayTable/src/props.ts 中查看相关代码与注释")]}),e(D,null,{default:()=>[s("该组件可以配合 RayCollapseGird 组件使用实现可折叠搜索栏")]})]}),e(k,null,{default:()=>[s("配合 RayCollapseGird 组件使用")]}),e(xe,{bordered:!1,collapsedRows:this.gridCollapsedRows,cols:this.gridItemCount,onUpdateValue:t=>window.$message.info(`我是 RayCollapseGrid 组件${t?"收起":"展开"}的回调函数`)},{action:()=>e(B,null,[e(E,null,{default:()=>[s("搜索")]}),e(E,null,{default:()=>[s("重置")]})]),default:()=>e(B,null,[e(f,null,{default:()=>[e(Q,null,null)]}),e(f,null,{default:()=>[e(S,null,null)]}),e(f,null,{default:()=>[e(ee,{type:"datetimerange",clearable:!0},null)]}),e(f,null,{default:()=>[e(S,null,null)]}),e(f,null,{default:()=>[e(S,null,null)]})])}),e(N,{style:"margin-top: 18px",title:F(te,{onUpdateValue:t=>this.tableLoading=t},{}),data:this.tableData,columns:this.baseColumns,action:!1,pagination:{pageSize:10},loading:this.tableLoading},{tableFooter:()=>"表格的底部内容区域，有时候你可能会用上"}),e(k,null,{default:()=>[s("RayTable 拓展功能")]}),e(g,null,{default:()=>[s("使用响应式方法代理 columns 并且打开 action 则可以启用操作栏(v-model:columns)")]}),e(g,null,{default:()=>[s("拖拽操作栏动态切换表格列")]}),e(g,null,{default:()=>[s("点击左右固定按钮，即可动态固定列")]}),e(g,null,{default:()=>[s("点击修改列宽度，即可拖动列修改宽度")]}),e(g,null,{default:()=>[s("点击导出按钮即可导出 excel 表格，默认以列为表头输出")]}),e(g,null,{default:()=>[s("点击打印按钮即可打印该表格")]}),e(N,{title:F(S,{placeholder:"请输入检索条件",style:["width: 200px"]}),data:this.tableData,columns:this.actionColumns,"onUpdate:columns":t=>this.actionColumns=t,bordered:!1},null),e(k,null,{default:()=>[s("右键菜单")]}),e(N,{title:"右键菜单表格",action:!1,data:this.tableData,columns:this.baseColumns,rightClickMenu:this.tableMenuOptions,onMenuSelect:this.handleMenuSelect.bind(this)},null)]})}});export{Ze as default};
|