@ditari/bsui 1.0.12 → 1.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("vue"),S=require("ant-design-vue"),
|
|
1
|
+
"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;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { defineComponent as q, ref as w, computed as S, watchEffect as $, nextTick as A, watch as F, createVNode as
|
|
1
|
+
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";
|
|
2
2
|
import { Table as I, Space as L, Pagination as V } from "ant-design-vue";
|
|
3
|
-
import { useEleHeight as
|
|
3
|
+
import { useEleHeight as T } from "../../utils/html.esm.js";
|
|
4
4
|
import { prefixName as W } from "../theme/index.esm.js";
|
|
5
5
|
const X = () => ({
|
|
6
6
|
data: {
|
|
@@ -45,34 +45,37 @@ const X = () => ({
|
|
|
45
45
|
emits: ["update:keys"],
|
|
46
46
|
setup(a, {
|
|
47
47
|
emit: y,
|
|
48
|
-
slots:
|
|
48
|
+
slots: C
|
|
49
49
|
}) {
|
|
50
|
-
const e = w(a.keys),
|
|
50
|
+
const e = w(a.keys), z = S(() => a.data), P = S(() => {
|
|
51
51
|
var t;
|
|
52
52
|
return ((t = a.config) == null ? void 0 : t.columns) ?? [];
|
|
53
53
|
}), f = S(() => {
|
|
54
54
|
var t;
|
|
55
55
|
return ((t = a.config) == null ? void 0 : t.pagination) ?? {};
|
|
56
56
|
}), {
|
|
57
|
-
tableRef:
|
|
58
|
-
tableHeight:
|
|
59
|
-
onPageChange:
|
|
60
|
-
onRowClassName:
|
|
61
|
-
} =
|
|
62
|
-
function
|
|
57
|
+
tableRef: R,
|
|
58
|
+
tableHeight: x,
|
|
59
|
+
onPageChange: H,
|
|
60
|
+
onRowClassName: E
|
|
61
|
+
} = O();
|
|
62
|
+
function O() {
|
|
63
63
|
const {
|
|
64
64
|
rowClassName: t,
|
|
65
65
|
keepSelected: n,
|
|
66
|
-
selection:
|
|
67
|
-
onPageChange:
|
|
68
|
-
} = a.config,
|
|
69
|
-
var
|
|
66
|
+
selection: h,
|
|
67
|
+
onPageChange: g
|
|
68
|
+
} = a.config, u = w(null), l = w(), i = w(null), o = (s) => {
|
|
69
|
+
var r;
|
|
70
70
|
try {
|
|
71
|
-
const
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
const d = (r = u == null ? void 0 : u.value) == null ? void 0 : r.$el;
|
|
72
|
+
console.log("tableEl", d);
|
|
73
|
+
const k = T(d.getElementsByClassName("ant-table-header")[0]);
|
|
74
|
+
console.log("headerHeight", k);
|
|
75
|
+
let p = 0;
|
|
76
|
+
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);
|
|
77
|
+
} catch (d) {
|
|
78
|
+
console.warn(d);
|
|
76
79
|
}
|
|
77
80
|
};
|
|
78
81
|
return $(() => {
|
|
@@ -80,75 +83,75 @@ const X = () => ({
|
|
|
80
83
|
o(a.height);
|
|
81
84
|
});
|
|
82
85
|
}), {
|
|
83
|
-
tableRef:
|
|
86
|
+
tableRef: u,
|
|
84
87
|
tableHeight: l,
|
|
85
|
-
onPageChange: (s,
|
|
86
|
-
|
|
88
|
+
onPageChange: (s, r) => {
|
|
89
|
+
g && g({
|
|
87
90
|
page: s,
|
|
88
|
-
size:
|
|
89
|
-
}),
|
|
91
|
+
size: r
|
|
92
|
+
}), i.value.scrollTop = 0, (h === "S" || !n) && (e.value = [], y("update:keys", e.value));
|
|
90
93
|
},
|
|
91
|
-
onRowClassName: (s,
|
|
94
|
+
onRowClassName: (s, r) => t ? t(s, r) : void 0
|
|
92
95
|
};
|
|
93
96
|
}
|
|
94
|
-
const B =
|
|
95
|
-
function
|
|
97
|
+
const B = K();
|
|
98
|
+
function K() {
|
|
96
99
|
const {
|
|
97
100
|
rowKey: t,
|
|
98
101
|
config: {
|
|
99
102
|
selection: n,
|
|
100
|
-
getCheckboxProps:
|
|
103
|
+
getCheckboxProps: h
|
|
101
104
|
}
|
|
102
105
|
} = a;
|
|
103
106
|
if (n === "N")
|
|
104
107
|
return;
|
|
105
|
-
const
|
|
106
|
-
n === "S" ? (e.value = [], e.value =
|
|
107
|
-
},
|
|
108
|
-
const
|
|
109
|
-
e.value = l ? e.value.concat(
|
|
108
|
+
const g = (l, i) => {
|
|
109
|
+
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);
|
|
110
|
+
}, u = (l, i, o) => {
|
|
111
|
+
const m = o.map((c) => c[t]);
|
|
112
|
+
e.value = l ? e.value.concat(m) : e.value.filter((c) => !m.includes(c)), y("update:keys", e.value);
|
|
110
113
|
};
|
|
111
114
|
return F(() => a.keys, (l) => {
|
|
112
115
|
e.value = l;
|
|
113
116
|
}), {
|
|
114
117
|
selectedRowKeys: e,
|
|
115
|
-
onSelect:
|
|
116
|
-
onSelectAll:
|
|
118
|
+
onSelect: g,
|
|
119
|
+
onSelectAll: u,
|
|
117
120
|
fixed: !0,
|
|
118
121
|
columnTitle: n === "S" ? "选择" : null,
|
|
119
122
|
columnWidth: n === "S" ? 60 : 40,
|
|
120
|
-
getCheckboxProps:
|
|
123
|
+
getCheckboxProps: h
|
|
121
124
|
};
|
|
122
125
|
}
|
|
123
|
-
const
|
|
124
|
-
function
|
|
126
|
+
const j = D();
|
|
127
|
+
function D() {
|
|
125
128
|
return (t) => {
|
|
126
129
|
let n;
|
|
127
130
|
const {
|
|
128
|
-
rowKey:
|
|
131
|
+
rowKey: h,
|
|
129
132
|
config: {
|
|
130
|
-
click:
|
|
131
|
-
dbClick:
|
|
133
|
+
click: g,
|
|
134
|
+
dbClick: u,
|
|
132
135
|
selection: l,
|
|
133
|
-
getCheckboxProps:
|
|
136
|
+
getCheckboxProps: i
|
|
134
137
|
}
|
|
135
|
-
} = a, o = t[
|
|
138
|
+
} = a, o = t[h], m = () => {
|
|
136
139
|
if (l === "N")
|
|
137
140
|
return;
|
|
138
141
|
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);
|
|
139
142
|
};
|
|
140
143
|
return {
|
|
141
144
|
onClick: () => {
|
|
142
|
-
if (!
|
|
145
|
+
if (!g)
|
|
143
146
|
return;
|
|
144
|
-
const c =
|
|
147
|
+
const c = i ? i(t) : null;
|
|
145
148
|
c && c.value === o || (clearTimeout(n), n = setTimeout(() => {
|
|
146
|
-
|
|
149
|
+
m(), g(t);
|
|
147
150
|
}, 200));
|
|
148
151
|
},
|
|
149
152
|
// 点击行
|
|
150
153
|
onDblclick: () => {
|
|
151
|
-
|
|
154
|
+
u && (clearTimeout(n), u(t));
|
|
152
155
|
}
|
|
153
156
|
// onContextmenu: (event) => {
|
|
154
157
|
// //TODO
|
|
@@ -164,33 +167,33 @@ const X = () => ({
|
|
|
164
167
|
}
|
|
165
168
|
return () => {
|
|
166
169
|
var t;
|
|
167
|
-
return
|
|
168
|
-
ref:
|
|
170
|
+
return b(J, null, [b(I, {
|
|
171
|
+
ref: R,
|
|
169
172
|
"row-key": a.rowKey,
|
|
170
173
|
bordered: a.config.bordered,
|
|
171
|
-
columns:
|
|
172
|
-
dataSource:
|
|
174
|
+
columns: P.value,
|
|
175
|
+
dataSource: z.value,
|
|
173
176
|
loading: a.loading,
|
|
174
177
|
size: ((t = a.config) == null ? void 0 : t.size) ?? "small",
|
|
175
178
|
scroll: {
|
|
176
179
|
scrollToFirstRowOnChange: !0,
|
|
177
180
|
x: "100%",
|
|
178
|
-
y:
|
|
181
|
+
y: x.value + "px"
|
|
179
182
|
},
|
|
180
183
|
pagination: !1,
|
|
181
|
-
customRow:
|
|
184
|
+
customRow: j,
|
|
182
185
|
rowSelection: B,
|
|
183
|
-
rowClassName:
|
|
186
|
+
rowClassName: E
|
|
184
187
|
}, {
|
|
185
188
|
bodyCell: ({
|
|
186
189
|
column: n
|
|
187
190
|
}) => {
|
|
188
191
|
if (n.slot === "action")
|
|
189
|
-
return
|
|
190
|
-
default: () => [
|
|
192
|
+
return b(L, null, {
|
|
193
|
+
default: () => [C.action && C.action()]
|
|
191
194
|
});
|
|
192
195
|
}
|
|
193
|
-
}), Q(
|
|
196
|
+
}), Q(b(V, {
|
|
194
197
|
class: [N],
|
|
195
198
|
current: f.value.current,
|
|
196
199
|
"onUpdate:current": (n) => f.value.current = n,
|
|
@@ -205,7 +208,7 @@ const X = () => ({
|
|
|
205
208
|
"page-size-options": v.pageSizeOptions,
|
|
206
209
|
"show-total": v.showTotal,
|
|
207
210
|
total: f.value.total,
|
|
208
|
-
onChange:
|
|
211
|
+
onChange: H
|
|
209
212
|
}, null), [[U, a.config.pagination]])]);
|
|
210
213
|
};
|
|
211
214
|
}
|
package/package.json
CHANGED
|
@@ -1,16 +1,14 @@
|
|
|
1
1
|
import {
|
|
2
2
|
computed,
|
|
3
3
|
defineComponent,
|
|
4
|
-
defineEmits,
|
|
5
4
|
nextTick,
|
|
6
5
|
PropType,
|
|
7
6
|
ref,
|
|
8
7
|
watch,
|
|
9
|
-
watchEffect
|
|
10
|
-
createSlots
|
|
8
|
+
watchEffect
|
|
11
9
|
} from "vue";
|
|
12
10
|
import { Pagination, Space, Table } from "ant-design-vue";
|
|
13
|
-
import { useEleHeight } from "../../utils";
|
|
11
|
+
import { useEleHeight } from "../../utils/html";
|
|
14
12
|
import { prefixName } from "../theme";
|
|
15
13
|
|
|
16
14
|
import type { TableProps, Key } from "./interface/table";
|
|
@@ -112,9 +110,11 @@ const DXTable = defineComponent({
|
|
|
112
110
|
const playHeight = (height: number) => {
|
|
113
111
|
try {
|
|
114
112
|
const tableEl = tableRef?.value?.$el;
|
|
113
|
+
console.log("tableEl", tableEl);
|
|
115
114
|
const headerHeight = useEleHeight(
|
|
116
115
|
tableEl.getElementsByClassName("ant-table-header")[0]
|
|
117
116
|
);
|
|
117
|
+
console.log("headerHeight", headerHeight);
|
|
118
118
|
// 获取分页组件高度
|
|
119
119
|
let paginationHeight = 0;
|
|
120
120
|
if (props.config.pagination) {
|
|
@@ -122,13 +122,16 @@ const DXTable = defineComponent({
|
|
|
122
122
|
document.getElementsByClassName(basePageClassName)[0]
|
|
123
123
|
);
|
|
124
124
|
}
|
|
125
|
+
console.log("paginationHeight", paginationHeight);
|
|
125
126
|
tableHeight.value = height - (headerHeight + paginationHeight);
|
|
127
|
+
console.log("tableHeight", tableHeight);
|
|
126
128
|
// 设置body高度
|
|
127
129
|
tableEl.getElementsByClassName("ant-table-body")[0].style.height =
|
|
128
130
|
tableHeight.value - 10 + "px";
|
|
129
131
|
// 表格body对象 用于切换页码后滚动条置顶
|
|
130
132
|
antTableBodyRef.value =
|
|
131
133
|
tableEl.getElementsByClassName("ant-table-body")[0];
|
|
134
|
+
console.log("antTableBodyRef", antTableBodyRef);
|
|
132
135
|
} catch (e) {
|
|
133
136
|
console.warn(e);
|
|
134
137
|
}
|