@ryan-json-schema-vue3/table
Version:
基于 vue3 + element plus json schema 列表
2 lines (1 loc) • 5.54 kB
JavaScript
(function(o,t){typeof exports=="object"&&typeof module<"u"?t(exports,require("vue"),require("xe-utils"),require("vxe-table"),require("element-plus")):typeof define=="function"&&define.amd?define(["exports","vue","xe-utils","vxe-table","element-plus"],t):(o=typeof globalThis<"u"?globalThis:o||self,t(o.table={},o.Vue,o.XEUtils,o.vxeTable,o.elementPlus))})(this,function(o,t,I,F,S){"use strict";const _="ui:width",j="ui:options",C={...{schema:{type:Object,required:!0},uiSchema:{type:Object,required:!1,default:()=>({})}},model:{type:Array,required:!0},showPager:{type:Boolean,required:!1,default:!0},showIndex:{type:Boolean,required:!1,default:!1},selectionType:{type:String,required:!1,default:""},pageInfo:{type:Object,required:!1,default:()=>({currentPage:0,pageSize:10,total:0})},rowBtnList:{type:Function,required:!1,default:null},tableLoading:{type:Boolean,required:!1,default:!1},optWidth:{type:String,required:!1,default:"150"},rowKey:{type:String,required:!1,default:"_X_ROW_KEY"},columnWidth:{type:String,required:!1}},D={...C,fields:{type:Array,required:!1}};function L(e){return typeof e=="function"||Object.prototype.toString.call(e)==="[object Object]"&&!t.isVNode(e)}const x=(e,n)=>{const{type:u="default",key:h,flag:r,title:l}=e;if(r==="DEL"){const f={reference:()=>t.createVNode(S.ElButton,{type:"danger",link:!0},L(l)?l:{default:()=>[l]})};return t.createVNode(S.ElPopconfirm,{title:"是否确认删除该记录?","cancel-button-text":"取消","cancel-button-type":"text","confirm-button-text":"删除","confirm-button-type":"danger",onConfirm:()=>n(h)},f)}return t.createVNode(S.ElButton,{type:u,link:!0,onClick:()=>n(h)},L(l)?l:{default:()=>[l]})};function k(e){let n=0;return Array.from(e).forEach(u=>{u.charCodeAt(0)>255?n+=2:n+=1}),n}const N="ry-json-table",W="InnerOptColumn",T=t.defineComponent({name:N,props:C,setup(e,n){const u=t.computed(()=>({align:"center",columnConfig:{resizable:!0},loading:e.tableLoading})),h=t.computed(()=>({isHover:!0,useKey:!0,keyField:e.rowKey||"_X_ROW_KEY"})),r=t.ref(),l=()=>r.value;n.expose({getXTableRef:l});const f=i=>{if(e.pageInfo){const{pageInfo:g}=e;g.currentPage=i.currentPage,g.pageSize=i.pageSize}n.emit("page-change",i)},d=t.computed(()=>({...e.pageInfo})),V=()=>t.createVNode(t.resolveComponent("vxe-pager"),{layouts:["Total","Sizes","PrevPage","JumpNumber","NextPage","FullJump"],"current-page":d.value.currentPage,"onUpdate:current-page":i=>d.value.currentPage=i,"page-size":d.value.pageSize,"onUpdate:page-size":i=>d.value.pageSize=i,total:d.value.total,onPageChange:f},null),X=t.computed(()=>{const{schema:i,uiSchema:g,showIndex:E,selectionType:O}=e,m=[];O==="checkbox"&&m.push({type:"checkbox",width:50,fixed:"left"}),E&&m.push({type:"seq",width:50,fixed:"left",align:"center",title:"序号"});const Y=({cellValue:p})=>I.toDateString(p,"yyyy-MM-dd HH:mm:ss");Object.keys(i.properties).forEach(p=>{const a=i.properties[p];a.prop=a.prop||p;const B=g[p]||{},y=B[j]||{},s={field:a.prop,title:a.description||a.prop,headerAlign:"center",align:"center",showOverflow:!0,...y};if(B[_])s.width=B[_];else if(e.columnWidth==="auto"){if(y.minWidth&&y.minWidth!=="auto")s.minWidth=y.minWidth;else if(a.description){let c=k(a.description)*20;c<100&&(c=100),s.minWidth=c<100?100:c}}if(e.columnWidth&&(p.includes("Time")||p.includes("Date")?s.width=200:s.width=e.columnWidth),n.slots[p]&&(s.slots={default:p}),a.format)switch(a.format){case"date-time":s.formatter=Y;break}y.formatter&&typeof y.formatter=="function"?s.formatter=y.formatter:a.oneOf?s.formatter=({cellValue:c})=>{const b=a.oneOf.find(P=>P.const===c);return(b==null?void 0:b.title)||c}:a.anyOf&&(s.formatter=({cellValue:c})=>{let b=[];return typeof c=="string"?b=c.split(","):b=c,b.map(P=>{const q=a.anyOf.find($=>$.const===P);return(q==null?void 0:q.title)||P}).join(",")}),m.push(s)});const{rowBtnList:G}=e;return G!==null&&m.push({width:e.optWidth,fixed:"right",align:"center",title:"操作",slots:{default:W}}),m}),K=({row:i})=>{const{rowBtnList:g}=e;let E=[];typeof g=="function"?E=g(i):E=g;const O=m=>{n.emit("row-btn-click",m,i)};return E.map(m=>x(m,O))},R=()=>{r.value&&n.emit("row-selected",r.value.getCheckboxRecords())},J={...n.slots,[W]:K,pager:e.showPager?V:null},H=t.computed(()=>e.model||[]);return()=>t.createVNode("div",{class:N},[t.createVNode(F.VxeGrid,t.mergeProps(n.attrs,{ref:r},u.value,{columns:X.value,data:H.value,height:"auto",rowConfig:h.value,onCheckboxChange:R,onCheckboxAll:R}),J)])}});T.install=e=>{e.component(T.name,T)};const w=t.defineComponent({name:"ry-pro-table",props:D,setup(e,n){const u=t.ref(),h=t.computed(()=>{if(!e.fields)return e.schema;const f={};return e.fields.forEach(d=>{e.schema.properties[d]&&(f[d]=e.schema.properties[d])}),{...e.schema,properties:f}}),r=t.computed(()=>{const f={...e};return delete f.fields,f}),l=()=>u.value&&u.value.getXTableRef();return n.expose({getXTableRef:l}),()=>t.createVNode(T,t.mergeProps({ref:u},r.value,{schema:h.value}),n.slots)}});w.install=e=>{e.component(w.name,w)};const z=e=>({onRowBtnClick:(r,l)=>{e.emit("row-btn-click",r,l)},onRowSelected:r=>{e.emit("row-selected",r)},onPageChange:r=>{e.emit("page-change",r)}}),M=[{key:"DEFAULT_EDIT",title:"编辑",type:"primary",flag:"EDIT"},{key:"DEFAULT_DEL",title:"删除",type:"danger",flag:"DEL"}],v=[T,w],A=e=>{v.forEach(n=>{e.component(n.name,n)})},U={install:A};o.DEFAULT_ROW_BTN_LIST=M,o.JsonTable=T,o.ProTable=w,o.basicTableProps=C,o.bindEvent=z,o.default=U,o.install=A,o.proTableProps=D,Object.defineProperties(o,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});