@ditari/bsui 1.0.11 → 1.0.13

package/dist/cjs/components/table/Table.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),w=require("ant-design-vue"),C=require("../../utils/html.cjs.js"),D=require("../theme/index.cjs.js"),K=()=>({data:{type:Object,required:!0},height:{type:Number,default:300},keys:Array,rowKey:{type:String,required:!0,default:"id"},loading:{type:Boolean,default:!1},pagination:{type:Object,default:()=>({})},config:{type:Object,default:()=>({})}}),v={defaultPageSize:20,hideOnSinglePage:!1,pageSizeOptions:["10","20","30","40"],responsive:!0,showQuickJumper:!0,showLessItems:!0,showTotal:a=>`总共 ${a} 条`},k=`${D.prefixName}-pagination`,V=n.defineComponent({name:"DTable",props:K(),emits:["update:keys"],setup(a,{emit:y,slots:S}){const e=n.ref(a.keys),N=n.computed(()=>a.data),T=n.computed(()=>{var t;return((t=a.config)==null?void 0:t.columns)??[]}),f=n.computed(()=>{var t;return((t=a.config)==null?void 0:t.pagination)??{}}),{tableRef:P,tableHeight:z,onPageChange:R,onRowClassName:x}=O();function O(){const{rowClassName:t,keepSelected:l,selection:h,onPageChange:g}=a.config,u=n.ref(null),o=n.ref(),s=n.ref(null),i=c=>{var p;const d=(p=u==null?void 0:u.value)==null?void 0:p.$el,j=C.useEleHeight(d.getElementsByClassName("ant-table-header")[0]);let b=0;a.config.pagination&&(b=C.useEleHeight(document.getElementsByClassName(k)[0])),o.value=c-(j+b),d.getElementsByClassName("ant-table-body")[0].style.height=o.value-10+"px",s.value=d.getElementsByClassName("ant-table-body")[0]};return n.watchEffect(()=>{a.height!==0&&n.nextTick(()=>{i(a.height)})}),{tableRef:u,tableHeight:o,onPageChange:(c,d)=>{g&&g({page:c,size:d}),s.value.scrollTop=0,(h==="S"||!l)&&(e.value=[],y("update:keys",e.value))},onRowClassName:(c,d)=>t?t(c,d):void 0}}const E=q();function q(){const{rowKey:t,config:{selection:l,getCheckboxProps:h}}=a;if(l==="N")return;const g=(o,s)=>{l==="S"?(e.value=[],e.value=s?[o[t]]:[]):e.value=s?e.value.concat(o[t]):e.value.filter(i=>i!==o[t]),y("update:keys",e.value)},u=(o,s,i)=>{const m=i.map(r=>r[t]);e.value=o?e.value.concat(m):e.value.filter(r=>!m.includes(r)),y("update:keys",e.value)};return n.watch(()=>a.keys,o=>{e.value=o}),{selectedRowKeys:e,onSelect:g,onSelectAll:u,fixed:!0,columnTitle:l==="S"?"选择":null,columnWidth:l==="S"?60:40,getCheckboxProps:h}}const H=B();function B(){return t=>{let l;const{rowKey:h,config:{click:g,dbClick:u,selection:o,getCheckboxProps:s}}=a,i=t[h],m=()=>{if(o==="N")return;e.value.some(c=>c===i)?e.value=e.value.filter(c=>c!==i):(o==="S"&&(e.value=[]),e.value.push(i)),y("update:keys",e.value)};return{onClick:()=>{if(!g)return;const r=s?s(t):null;r&&r.value===i||(clearTimeout(l),l=setTimeout(()=>{m(),g(t)},200))},onDblclick:()=>{u&&(clearTimeout(l),u(t))}}}}return()=>{var t;return n.createVNode(n.Fragment,null,[n.createVNode(w.Table,{ref:P,"row-key":a.rowKey,bordered:a.config.bordered,columns:T.value,dataSource:N.value,loading:a.loading,size:((t=a.config)==null?void 0:t.size)??"small",scroll:{scrollToFirstRowOnChange:!0,x:"100%",y:z.value+"px"},pagination:!1,customRow:H,rowSelection:E,rowClassName:x},{bodyCell:({column:l})=>{if(l.slot==="action")return n.createVNode(w.Space,null,{default:()=>[S.action&&S.action()]})}}),n.withDirectives(n.createVNode(w.Pagination,{class:[k],current:f.value.current,"onUpdate:current":l=>f.value.current=l,pageSize:f.value.pageSize,"onUpdate:pageSize":l=>f.value.pageSize=l,disabled:a.loading,"show-size-changer":!0,size:"default","hide-on-single-page":v.hideOnSinglePage,"show-quick-jumper":v.showQuickJumper,"default-page-size":v.defaultPageSize,"page-size-options":v.pageSizeOptions,"show-total":v.showTotal,total:f.value.total,onChange:R},null),[[n.vShow,a.config.pagination]])])}}});exports.default=V;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),S=require("ant-design-vue"),k=require("../../utils/html.cjs.js"),D=require("../theme/index.cjs.js"),K=()=>({data:{type:Object,required:!0},height:{type:Number,default:300},keys:Array,rowKey:{type:String,required:!0,default:"id"},loading:{type:Boolean,default:!1},pagination:{type:Object,default:()=>({})},config:{type:Object,default:()=>({})}}),y={defaultPageSize:20,hideOnSinglePage:!1,pageSizeOptions:["10","20","30","40"],responsive:!0,showQuickJumper:!0,showLessItems:!0,showTotal:a=>`总共 ${a} 条`},N=`${D.prefixName}-pagination`,V=n.defineComponent({name:"DTable",props:K(),emits:["update:keys"],setup(a,{emit:b,slots:p}){const e=n.ref(a.keys),T=n.computed(()=>a.data),P=n.computed(()=>{var t;return((t=a.config)==null?void 0:t.columns)??[]}),h=n.computed(()=>{var t;return((t=a.config)==null?void 0:t.pagination)??{}}),{tableRef:z,tableHeight:R,onPageChange:x,onRowClassName:H}=E();function E(){const{rowClassName:t,keepSelected:l,selection:m,onPageChange:g}=a.config,s=n.ref(null),o=n.ref(),u=n.ref(null),i=c=>{var d;try{const f=(d=s==null?void 0:s.value)==null?void 0:d.$el;console.log("tableEl",f);const C=k.useEleHeight(f.getElementsByClassName("ant-table-header")[0]);console.log("headerHeight",C);let w=0;a.config.pagination&&(w=k.useEleHeight(document.getElementsByClassName(N)[0])),console.log("paginationHeight",w),o.value=c-(C+w),console.log("tableHeight",o),f.getElementsByClassName("ant-table-body")[0].style.height=o.value-10+"px",u.value=f.getElementsByClassName("ant-table-body")[0],console.log("antTableBodyRef",u)}catch(f){console.warn(f)}};return n.watchEffect(()=>{a.height!==0&&n.nextTick(()=>{i(a.height)})}),{tableRef:s,tableHeight:o,onPageChange:(c,d)=>{g&&g({page:c,size:d}),u.value.scrollTop=0,(m==="S"||!l)&&(e.value=[],b("update:keys",e.value))},onRowClassName:(c,d)=>t?t(c,d):void 0}}const O=q();function q(){const{rowKey:t,config:{selection:l,getCheckboxProps:m}}=a;if(l==="N")return;const g=(o,u)=>{l==="S"?(e.value=[],e.value=u?[o[t]]:[]):e.value=u?e.value.concat(o[t]):e.value.filter(i=>i!==o[t]),b("update:keys",e.value)},s=(o,u,i)=>{const v=i.map(r=>r[t]);e.value=o?e.value.concat(v):e.value.filter(r=>!v.includes(r)),b("update:keys",e.value)};return n.watch(()=>a.keys,o=>{e.value=o}),{selectedRowKeys:e,onSelect:g,onSelectAll:s,fixed:!0,columnTitle:l==="S"?"选择":null,columnWidth:l==="S"?60:40,getCheckboxProps:m}}const B=j();function j(){return t=>{let l;const{rowKey:m,config:{click:g,dbClick:s,selection:o,getCheckboxProps:u}}=a,i=t[m],v=()=>{if(o==="N")return;e.value.some(c=>c===i)?e.value=e.value.filter(c=>c!==i):(o==="S"&&(e.value=[]),e.value.push(i)),b("update:keys",e.value)};return{onClick:()=>{if(!g)return;const r=u?u(t):null;r&&r.value===i||(clearTimeout(l),l=setTimeout(()=>{v(),g(t)},200))},onDblclick:()=>{s&&(clearTimeout(l),s(t))}}}}return()=>{var t;return n.createVNode(n.Fragment,null,[n.createVNode(S.Table,{ref:z,"row-key":a.rowKey,bordered:a.config.bordered,columns:P.value,dataSource:T.value,loading:a.loading,size:((t=a.config)==null?void 0:t.size)??"small",scroll:{scrollToFirstRowOnChange:!0,x:"100%",y:R.value+"px"},pagination:!1,customRow:B,rowSelection:O,rowClassName:H},{bodyCell:({column:l})=>{if(l.slot==="action")return n.createVNode(S.Space,null,{default:()=>[p.action&&p.action()]})}}),n.withDirectives(n.createVNode(S.Pagination,{class:[N],current:h.value.current,"onUpdate:current":l=>h.value.current=l,pageSize:h.value.pageSize,"onUpdate:pageSize":l=>h.value.pageSize=l,disabled:a.loading,"show-size-changer":!0,size:"default","hide-on-single-page":y.hideOnSinglePage,"show-quick-jumper":y.showQuickJumper,"default-page-size":y.defaultPageSize,"page-size-options":y.pageSizeOptions,"show-total":y.showTotal,total:h.value.total,onChange:x},null),[[n.vShow,a.config.pagination]])])}}});exports.default=V;

package/dist/esm/components/table/Table.esm.js

@@ -1,6 +1,6 @@
-import { defineComponent as q, ref as y, computed as p, watchEffect as $, nextTick as A, watch as F, createVNode as w, Fragment as J, withDirectives as Q, vShow as U } from "vue";
+import { defineComponent as q, ref as w, computed as S, watchEffect as $, nextTick as A, watch as F, createVNode as b, Fragment as J, withDirectives as Q, vShow as U } from "vue";
 import { Table as I, Space as L, Pagination as V } from "ant-design-vue";
-import { useEleHeight as k } from "../../utils/html.esm.js";
+import { useEleHeight as T } from "../../utils/html.esm.js";
 import { prefixName as W } from "../theme/index.esm.js";
 const X = () => ({
   data: {
@@ -29,7 +29,7 @@ const X = () => ({
     type: Object,
     default: () => ({})
   }
-}), m = {
+}), v = {
   defaultPageSize: 20,
   hideOnSinglePage: !1,
   pageSizeOptions: ["10", "20", "30", "40"],
@@ -44,107 +44,114 @@ const X = () => ({
   // TODO 需要做调整
   emits: ["update:keys"],
   setup(a, {
-    emit: v,
-    slots: S
+    emit: y,
+    slots: C
   }) {
-    const e = y(a.keys), T = p(() => a.data), z = p(() => {
+    const e = w(a.keys), z = S(() => a.data), P = S(() => {
       var t;
       return ((t = a.config) == null ? void 0 : t.columns) ?? [];
-    }), f = p(() => {
+    }), f = S(() => {
       var t;
       return ((t = a.config) == null ? void 0 : t.pagination) ?? {};
     }), {
-      tableRef: P,
-      tableHeight: R,
-      onPageChange: x,
-      onRowClassName: O
-    } = E();
-    function E() {
+      tableRef: R,
+      tableHeight: x,
+      onPageChange: H,
+      onRowClassName: E
+    } = O();
+    function O() {
       const {
         rowClassName: t,
         keepSelected: n,
-        selection: d,
-        onPageChange: r
-      } = a.config, i = y(null), l = y(), u = y(null), o = (s) => {
-        var C;
-        const g = (C = i == null ? void 0 : i.value) == null ? void 0 : C.$el, D = k(g.getElementsByClassName("ant-table-header")[0]);
-        let b = 0;
-        a.config.pagination && (b = k(document.getElementsByClassName(N)[0])), l.value = s - (D + b), g.getElementsByClassName("ant-table-body")[0].style.height = l.value - 10 + "px", u.value = g.getElementsByClassName("ant-table-body")[0];
+        selection: h,
+        onPageChange: g
+      } = a.config, u = w(null), l = w(), i = w(null), o = (s) => {
+        var r;
+        try {
+          const d = (r = u == null ? void 0 : u.value) == null ? void 0 : r.$el;
+          console.log("tableEl", d);
+          const k = T(d.getElementsByClassName("ant-table-header")[0]);
+          console.log("headerHeight", k);
+          let p = 0;
+          a.config.pagination && (p = T(document.getElementsByClassName(N)[0])), console.log("paginationHeight", p), l.value = s - (k + p), console.log("tableHeight", l), d.getElementsByClassName("ant-table-body")[0].style.height = l.value - 10 + "px", i.value = d.getElementsByClassName("ant-table-body")[0], console.log("antTableBodyRef", i);
+        } catch (d) {
+          console.warn(d);
+        }
       };
       return $(() => {
         a.height !== 0 && A(() => {
           o(a.height);
         });
       }), {
-        tableRef: i,
+        tableRef: u,
         tableHeight: l,
-        onPageChange: (s, g) => {
-          r && r({
+        onPageChange: (s, r) => {
+          g && g({
             page: s,
-            size: g
-          }), u.value.scrollTop = 0, (d === "S" || !n) && (e.value = [], v("update:keys", e.value));
+            size: r
+          }), i.value.scrollTop = 0, (h === "S" || !n) && (e.value = [], y("update:keys", e.value));
         },
-        onRowClassName: (s, g) => t ? t(s, g) : void 0
+        onRowClassName: (s, r) => t ? t(s, r) : void 0
       };
     }
-    const B = H();
-    function H() {
+    const B = K();
+    function K() {
       const {
         rowKey: t,
         config: {
           selection: n,
-          getCheckboxProps: d
+          getCheckboxProps: h
         }
       } = a;
       if (n === "N")
         return;
-      const r = (l, u) => {
-        n === "S" ? (e.value = [], e.value = u ? [l[t]] : []) : e.value = u ? e.value.concat(l[t]) : e.value.filter((o) => o !== l[t]), v("update:keys", e.value);
-      }, i = (l, u, o) => {
-        const h = o.map((c) => c[t]);
-        e.value = l ? e.value.concat(h) : e.value.filter((c) => !h.includes(c)), v("update:keys", e.value);
+      const g = (l, i) => {
+        n === "S" ? (e.value = [], e.value = i ? [l[t]] : []) : e.value = i ? e.value.concat(l[t]) : e.value.filter((o) => o !== l[t]), y("update:keys", e.value);
+      }, u = (l, i, o) => {
+        const m = o.map((c) => c[t]);
+        e.value = l ? e.value.concat(m) : e.value.filter((c) => !m.includes(c)), y("update:keys", e.value);
       };
       return F(() => a.keys, (l) => {
         e.value = l;
       }), {
         selectedRowKeys: e,
-        onSelect: r,
-        onSelectAll: i,
+        onSelect: g,
+        onSelectAll: u,
         fixed: !0,
         columnTitle: n === "S" ? "选择" : null,
         columnWidth: n === "S" ? 60 : 40,
-        getCheckboxProps: d
+        getCheckboxProps: h
       };
     }
-    const K = j();
-    function j() {
+    const j = D();
+    function D() {
       return (t) => {
         let n;
         const {
-          rowKey: d,
+          rowKey: h,
           config: {
-            click: r,
-            dbClick: i,
+            click: g,
+            dbClick: u,
             selection: l,
-            getCheckboxProps: u
+            getCheckboxProps: i
           }
-        } = a, o = t[d], h = () => {
+        } = a, o = t[h], m = () => {
           if (l === "N")
             return;
-          e.value.some((s) => s === o) ? e.value = e.value.filter((s) => s !== o) : (l === "S" && (e.value = []), e.value.push(o)), v("update:keys", e.value);
+          e.value.some((s) => s === o) ? e.value = e.value.filter((s) => s !== o) : (l === "S" && (e.value = []), e.value.push(o)), y("update:keys", e.value);
         };
         return {
           onClick: () => {
-            if (!r)
+            if (!g)
               return;
-            const c = u ? u(t) : null;
+            const c = i ? i(t) : null;
             c && c.value === o || (clearTimeout(n), n = setTimeout(() => {
-              h(), r(t);
+              m(), g(t);
             }, 200));
           },
           // 点击行
           onDblclick: () => {
-            i && (clearTimeout(n), i(t));
+            u && (clearTimeout(n), u(t));
           }
           // onContextmenu: (event) => {
           //   //TODO
@@ -160,33 +167,33 @@ const X = () => ({
     }
     return () => {
       var t;
-      return w(J, null, [w(I, {
-        ref: P,
+      return b(J, null, [b(I, {
+        ref: R,
         "row-key": a.rowKey,
         bordered: a.config.bordered,
-        columns: z.value,
-        dataSource: T.value,
+        columns: P.value,
+        dataSource: z.value,
         loading: a.loading,
         size: ((t = a.config) == null ? void 0 : t.size) ?? "small",
         scroll: {
           scrollToFirstRowOnChange: !0,
           x: "100%",
-          y: R.value + "px"
+          y: x.value + "px"
         },
         pagination: !1,
-        customRow: K,
+        customRow: j,
         rowSelection: B,
-        rowClassName: O
+        rowClassName: E
       }, {
         bodyCell: ({
           column: n
         }) => {
           if (n.slot === "action")
-            return w(L, null, {
-              default: () => [S.action && S.action()]
+            return b(L, null, {
+              default: () => [C.action && C.action()]
             });
         }
-      }), Q(w(V, {
+      }), Q(b(V, {
         class: [N],
         current: f.value.current,
         "onUpdate:current": (n) => f.value.current = n,
@@ -195,13 +202,13 @@ const X = () => ({
         disabled: a.loading,
         "show-size-changer": !0,
         size: "default",
-        "hide-on-single-page": m.hideOnSinglePage,
-        "show-quick-jumper": m.showQuickJumper,
-        "default-page-size": m.defaultPageSize,
-        "page-size-options": m.pageSizeOptions,
-        "show-total": m.showTotal,
+        "hide-on-single-page": v.hideOnSinglePage,
+        "show-quick-jumper": v.showQuickJumper,
+        "default-page-size": v.defaultPageSize,
+        "page-size-options": v.pageSizeOptions,
+        "show-total": v.showTotal,
         total: f.value.total,
-        onChange: x
+        onChange: H
       }, null), [[U, a.config.pagination]])]);
     };
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ditari/bsui",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "files": [
     "dist/**",
     "src"

package/src/components/table/Table.tsx

@@ -1,16 +1,14 @@
 import {
   computed,
   defineComponent,
-  defineEmits,
   nextTick,
   PropType,
   ref,
   watch,
-  watchEffect,
-  createSlots
+  watchEffect
 } from "vue";
 import { Pagination, Space, Table } from "ant-design-vue";
-import { useEleHeight } from "../../utils";
+import { useEleHeight } from "../../utils/html";
 import { prefixName } from "../theme";
 
 import type { TableProps, Key } from "./interface/table";
@@ -110,24 +108,33 @@ const DXTable = defineComponent({
       const antTableBodyRef = ref<any>(null);
       // 计算高度
       const playHeight = (height: number) => {
-        const tableEl = tableRef?.value?.$el;
-        const headerHeight = useEleHeight(
-          tableEl.getElementsByClassName("ant-table-header")[0]
-        );
-        // 获取分页组件高度
-        let paginationHeight = 0;
-        if (props.config.pagination) {
-          paginationHeight = useEleHeight(
-            document.getElementsByClassName(basePageClassName)[0]
+        try {
+          const tableEl = tableRef?.value?.$el;
+          console.log("tableEl", tableEl);
+          const headerHeight = useEleHeight(
+            tableEl.getElementsByClassName("ant-table-header")[0]
           );
+          console.log("headerHeight", headerHeight);
+          // 获取分页组件高度
+          let paginationHeight = 0;
+          if (props.config.pagination) {
+            paginationHeight = useEleHeight(
+              document.getElementsByClassName(basePageClassName)[0]
+            );
+          }
+          console.log("paginationHeight", paginationHeight);
+          tableHeight.value = height - (headerHeight + paginationHeight);
+          console.log("tableHeight", tableHeight);
+          // 设置body高度
+          tableEl.getElementsByClassName("ant-table-body")[0].style.height =
+            tableHeight.value - 10 + "px";
+          // 表格body对象 用于切换页码后滚动条置顶
+          antTableBodyRef.value =
+            tableEl.getElementsByClassName("ant-table-body")[0];
+          console.log("antTableBodyRef", antTableBodyRef);
+        } catch (e) {
+          console.warn(e);
         }
-        tableHeight.value = height - (headerHeight + paginationHeight);
-        // 设置body高度
-        tableEl.getElementsByClassName("ant-table-body")[0].style.height =
-          tableHeight.value - 10 + "px";
-        // 表格body对象 用于切换页码后滚动条置顶
-        antTableBodyRef.value =
-          tableEl.getElementsByClassName("ant-table-body")[0];
       };
       //监听传入的height的变化 默认组件创建的时候会执行一次
       watchEffect(() => {