@neatui/vue 2.7.1 → 2.7.3
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.
- package/package.json +1 -1
- package/src/components/basic/IDraggable.vue +11 -11
- package/src/components/form/Upload.vue +23 -22
- package/src/components/loader/FormLoader/FormLoader@v2.vue +192 -194
- package/src/components/loader/TableLoader/TableColView.vue +14 -18
- package/src/components/loader/TableLoader/TableLoader.vue +151 -111
- package/src/components/loader/TableLoader/index.ts +47 -0
- package/src/components/loader/index.ts +2 -1
- package/src/components/tools/Pagination@a.vue +16 -17
- package/src/components/tools/Pagination@b.vue +16 -16
|
@@ -1,40 +1,46 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="full" ui-scroll=":x :y">
|
|
3
3
|
<!-- 桌面端 -->
|
|
4
|
-
<table ui-hide="<pad" ui-table="
|
|
4
|
+
<table ui-hide="<pad" :ui-table="theme" ref="tableRef">
|
|
5
5
|
<thead class="table-head-fixed">
|
|
6
6
|
<tr>
|
|
7
|
-
<th v-if="selected" col-fixed="1"
|
|
7
|
+
<th v-if="selected" min-width col-fixed="1">
|
|
8
8
|
<label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" :checked="state.isAllSelect" @change="fSelectAll" /><span></span></label>
|
|
9
9
|
</th>
|
|
10
10
|
<template v-for="(col, idx) in state.table" :key="idx">
|
|
11
|
-
<th v-if="!col.
|
|
12
|
-
<
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
</
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
11
|
+
<th v-if="!col.__close" :min-width="col.fixed" :col-fixed="col.fixed" :col-fixed-side="col.fixed || 'l'" :data-field="col.field">
|
|
12
|
+
<slot :name="`thead-${col.field}`" :col="col" :idx="idx">
|
|
13
|
+
<div v-bind="{ ...col.attrs, ...col.thead }">
|
|
14
|
+
<span class="nl-xs ux-none" v-if="col.order === 0 || col.order === 1 || col.order === 2" @click="fSetOrder(col)">
|
|
15
|
+
<span>{{ col.label }}</span>
|
|
16
|
+
<span ui-btn="@a none s" :ui-order="col.__order"></span>
|
|
17
|
+
</span>
|
|
18
|
+
<span class="nl-xs" v-else>{{ col.label }}</span>
|
|
19
|
+
<!-- 设置 -->
|
|
20
|
+
<IFollowView v-if="!slots.operate && idx === state._last" tipBoxClass="n-no">
|
|
21
|
+
<button :ui-btn="`@a none s :square`">
|
|
22
|
+
<Icon name="tableloader-setting" class="co-read"></Icon>
|
|
23
|
+
</button>
|
|
24
|
+
<template #tips>
|
|
25
|
+
<div class="w-mm h-ml+ n-sl" ui-scroll="x:hidden :y">
|
|
26
|
+
<IDraggable v-model:lists="state.table">
|
|
27
|
+
<template #default="{ item: element, idx: index }">
|
|
28
|
+
<div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
|
|
29
|
+
<label ui-form="@a type:checkbox" class="ny-xs nx-sl">
|
|
30
|
+
<input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
|
|
31
|
+
<span>
|
|
32
|
+
{{ element.label }}
|
|
33
|
+
<i v-if="element.fixed" class="icon icon-fixed fs-xs"></i>
|
|
34
|
+
</span>
|
|
35
|
+
</label>
|
|
36
|
+
</div>
|
|
37
|
+
</template>
|
|
38
|
+
</IDraggable>
|
|
39
|
+
</div>
|
|
40
|
+
</template>
|
|
41
|
+
</IFollowView>
|
|
42
|
+
</div>
|
|
43
|
+
</slot>
|
|
38
44
|
</th>
|
|
39
45
|
</template>
|
|
40
46
|
<th v-if="slots.operate" col-fixed="r" class="fs-xs nowrap ar">
|
|
@@ -42,15 +48,15 @@
|
|
|
42
48
|
<span class="mr-sm">{{ words['operate'] || '操作' }}</span>
|
|
43
49
|
<IFollowView v-if="tools" tipBoxClass="n-no">
|
|
44
50
|
<button :ui-btn="`@a none s :square`">
|
|
45
|
-
<Icon name="tableloader-setting" class="co-
|
|
51
|
+
<Icon name="tableloader-setting" class="co-auto"></Icon>
|
|
46
52
|
</button>
|
|
47
53
|
<template #tips>
|
|
48
|
-
<div class="w-mm h-
|
|
54
|
+
<div class="w-mm h-ml+ n-sl" ui-scroll="x:hidden :y">
|
|
49
55
|
<IDraggable v-model:lists="state.table">
|
|
50
56
|
<template #default="{ item: element, idx: index }">
|
|
51
57
|
<div :class="`item ux-hover nowrap r-ss ${element.fixed ? 'forbid' : 'element'}`" :key="index">
|
|
52
58
|
<label ui-form="@a type:checkbox" class="ny-xs nx-sl">
|
|
53
|
-
<input type="checkbox" :checked="!element.
|
|
59
|
+
<input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
|
|
54
60
|
<span>
|
|
55
61
|
{{ element.label }}
|
|
56
62
|
<i v-if="element.fixed" class="icon icon-fixed fs-xs"></i>
|
|
@@ -72,17 +78,16 @@
|
|
|
72
78
|
<td v-if="selected" col-fixed="1" min-width>
|
|
73
79
|
<label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" v-model="item.__selected" /><span></span></label>
|
|
74
80
|
</td>
|
|
75
|
-
<template v-for="(col,
|
|
81
|
+
<template v-for="(col, cid) in state.table" :key="cid">
|
|
76
82
|
<td
|
|
77
|
-
v-if="!col.
|
|
78
|
-
:class="`${!slots.operate &&
|
|
83
|
+
v-if="!col.__close"
|
|
84
|
+
:class="`${!slots.operate && cid === state._last ? 'ar' : ''}`"
|
|
79
85
|
:min-width="col.fixed"
|
|
80
86
|
:col-fixed="col.fixed"
|
|
81
87
|
:col-fixed-side="col.fixed || 'l'"
|
|
82
88
|
:data-field="col.field"
|
|
83
89
|
>
|
|
84
|
-
<slot
|
|
85
|
-
<TableColView v-else :col="col" :data="item" />
|
|
90
|
+
<slot :name="col.field" :col="col" :item="item" :idx="idx"><TableColView :col="col" :data="item" /></slot>
|
|
86
91
|
</td>
|
|
87
92
|
</template>
|
|
88
93
|
<td v-if="slots.operate" col-fixed="r" class="ar"><slot name="operate" :item="item" :idx="idx"></slot></td>
|
|
@@ -92,51 +97,45 @@
|
|
|
92
97
|
</table>
|
|
93
98
|
<!-- 移动端 -->
|
|
94
99
|
<div ui-hide=">mob">
|
|
95
|
-
<
|
|
96
|
-
<
|
|
97
|
-
<
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
</template>
|
|
113
|
-
</IDraggable>
|
|
100
|
+
<ul>
|
|
101
|
+
<li class="bg-fore r-sm my-sl nx-ms ny-sl" ui-flex="row xm">
|
|
102
|
+
<div>
|
|
103
|
+
<label class="mb-ss" ui-form="@a type:checkbox"><input type="checkbox" :checked="state.isAllSelect" @change="fSelectAll" /><span>全选</span></label>
|
|
104
|
+
</div>
|
|
105
|
+
<div>
|
|
106
|
+
<IFollowView>
|
|
107
|
+
<button :ui-btn="`@a none s :square`"><Icon name="tableloader-setting" class="co-read"></Icon></button>
|
|
108
|
+
<template #tips>
|
|
109
|
+
<IDraggable v-model:lists="state.table">
|
|
110
|
+
<template #default="{ item: element, idx: index }">
|
|
111
|
+
<div class="item ux-hover nowrap r-ss" :key="index">
|
|
112
|
+
<label ui-form="@a type:checkbox" class="ny-xs nx-sl">
|
|
113
|
+
<input type="checkbox" :checked="!element.__close" @change="element.__close = element.__close ? 0 : 1" />
|
|
114
|
+
<span>{{ element.label }}</span>
|
|
115
|
+
</label>
|
|
116
|
+
</div>
|
|
114
117
|
</template>
|
|
115
|
-
</
|
|
116
|
-
</
|
|
117
|
-
</
|
|
118
|
-
</
|
|
119
|
-
</
|
|
120
|
-
<
|
|
121
|
-
<
|
|
122
|
-
<
|
|
123
|
-
<
|
|
124
|
-
<
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
</tr>
|
|
137
|
-
</template>
|
|
138
|
-
</tbody>
|
|
139
|
-
</table>
|
|
118
|
+
</IDraggable>
|
|
119
|
+
</template>
|
|
120
|
+
</IFollowView>
|
|
121
|
+
</div>
|
|
122
|
+
</li>
|
|
123
|
+
<li v-for="(item, idx) in lists" :key="idx" class="bg-fore r-sm my-sl n-ms">
|
|
124
|
+
<table>
|
|
125
|
+
<tbody>
|
|
126
|
+
<template v-for="(col, idx) in state.table" :key="idx">
|
|
127
|
+
<tr v-if="!col.__close">
|
|
128
|
+
<td class="nowrap vt n-ss">{{ col.label }}:</td>
|
|
129
|
+
<td class="n-ss">
|
|
130
|
+
<TableColView :col="col" :data="item" />
|
|
131
|
+
</td>
|
|
132
|
+
</tr>
|
|
133
|
+
</template>
|
|
134
|
+
</tbody>
|
|
135
|
+
</table>
|
|
136
|
+
<div v-if="slots.operate"><slot name="operate" :item="item" :idx="idx"></slot></div>
|
|
137
|
+
</li>
|
|
138
|
+
</ul>
|
|
140
139
|
</div>
|
|
141
140
|
<div v-if="!lists.length" class="ny-ls o-mm" ui-flex="col cm">
|
|
142
141
|
<div class="ac">
|
|
@@ -159,12 +158,16 @@
|
|
|
159
158
|
// 外部插槽
|
|
160
159
|
const slots: any = useSlots();
|
|
161
160
|
// 外部方法
|
|
162
|
-
const emits = defineEmits(['update:table', '
|
|
161
|
+
const emits = defineEmits(['update:table', 'order', 'refresh']);
|
|
163
162
|
|
|
164
163
|
// 类型定义
|
|
165
164
|
interface JSONRules {
|
|
166
165
|
label: string | (() => string);
|
|
167
166
|
field: string | (() => string);
|
|
167
|
+
width?: string | (() => string);
|
|
168
|
+
fixed?: string | (() => string);
|
|
169
|
+
thead?: object | (() => object);
|
|
170
|
+
tbody?: object | (() => object);
|
|
168
171
|
paths?: string | (() => string);
|
|
169
172
|
model?: string | Array<any> | (() => string | Array<any>);
|
|
170
173
|
enums?: Array<any> | (() => string | Array<any>);
|
|
@@ -173,7 +176,7 @@
|
|
|
173
176
|
attrs?: string | Record<string, any> | Record<string, any>[] | (() => string | Record<string, any> | Record<string, any>[]);
|
|
174
177
|
value?: any | (() => any);
|
|
175
178
|
clear?: boolean | (() => boolean);
|
|
176
|
-
|
|
179
|
+
order?: 0 | 1 | 2 | number | (() => 0 | 1 | 2 | number);
|
|
177
180
|
}
|
|
178
181
|
interface Props {
|
|
179
182
|
words?: { [key: string]: any };
|
|
@@ -181,6 +184,7 @@
|
|
|
181
184
|
lists: Array<any>;
|
|
182
185
|
selected?: boolean;
|
|
183
186
|
tools?: boolean;
|
|
187
|
+
theme?: string;
|
|
184
188
|
rows?: {
|
|
185
189
|
attrs?: { [key: string]: any };
|
|
186
190
|
event?: { [key: string]: any };
|
|
@@ -193,7 +197,8 @@
|
|
|
193
197
|
lists: () => [],
|
|
194
198
|
selected: true,
|
|
195
199
|
tools: true,
|
|
196
|
-
rows: () => ({ attrs: {}, event: {} })
|
|
200
|
+
rows: () => ({ attrs: {}, event: {} }),
|
|
201
|
+
theme: '@b sz:l',
|
|
197
202
|
});
|
|
198
203
|
|
|
199
204
|
// 内部数据
|
|
@@ -206,11 +211,11 @@
|
|
|
206
211
|
limit: computed(() => {
|
|
207
212
|
const _cache = JSON.parse(localStorage.getItem(`${state.name}_limit`) || '{}');
|
|
208
213
|
return (props.limit || [])?.map((item: any) => {
|
|
209
|
-
if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '
|
|
210
|
-
item.
|
|
214
|
+
if (_cache[item.field] && Object.prototype.hasOwnProperty.call(_cache[item.field], '__close')) {
|
|
215
|
+
item.__close = _cache[item.field]?.__close;
|
|
211
216
|
} else {
|
|
212
217
|
if (item.close === true || item.close === 1 || item.close === 'always') {
|
|
213
|
-
item.
|
|
218
|
+
item.__close = 1;
|
|
214
219
|
}
|
|
215
220
|
}
|
|
216
221
|
return item;
|
|
@@ -239,32 +244,55 @@
|
|
|
239
244
|
});
|
|
240
245
|
}),
|
|
241
246
|
// 最后一列可见列
|
|
242
|
-
last: 0
|
|
247
|
+
last: 0,
|
|
248
|
+
lw: 0,
|
|
243
249
|
});
|
|
244
250
|
|
|
251
|
+
// 前置处理
|
|
245
252
|
watch(
|
|
246
253
|
() => props.table,
|
|
247
254
|
() => {
|
|
248
255
|
const _cache = JSON.parse(localStorage.getItem(`${state.name}_table`) || '{}');
|
|
249
256
|
state._last = 0;
|
|
250
257
|
state.table = deepcopy(props.table || [])
|
|
251
|
-
?.map((
|
|
258
|
+
?.map((col: any, idx: number) => {
|
|
259
|
+
// 表头属性处理
|
|
260
|
+
if (!col.thead) {
|
|
261
|
+
col.thead = {};
|
|
262
|
+
}
|
|
263
|
+
// 表头默认样式
|
|
264
|
+
const _thc = (col.thead.class || '').split(/\s+/);
|
|
265
|
+
if (!_thc.includes('wrap') && !_thc.includes('nowrap')) {
|
|
266
|
+
_thc.push('nowrap');
|
|
267
|
+
}
|
|
268
|
+
if (!_thc.some((c: any) => c.startsWith('fs-'))) {
|
|
269
|
+
_thc.unshift('fs-xs');
|
|
270
|
+
}
|
|
271
|
+
col.thead.class = _thc.join(' ').trim();
|
|
272
|
+
|
|
252
273
|
// 缓存的显示信息
|
|
253
|
-
if (_cache[
|
|
254
|
-
|
|
274
|
+
if (_cache[col.field] && Object.prototype.hasOwnProperty.call(_cache[col.field], '__close')) {
|
|
275
|
+
col.__close = _cache[col.field]?.__close;
|
|
255
276
|
} else {
|
|
256
|
-
if (
|
|
257
|
-
|
|
277
|
+
if (col.close === true || col.close === 1 || col.close === 'always') {
|
|
278
|
+
col.__close = 1;
|
|
258
279
|
}
|
|
259
280
|
}
|
|
260
|
-
//
|
|
261
|
-
if (_cache[
|
|
262
|
-
|
|
281
|
+
// 获取缓存的表格列顺序（注意不是数据记录的排序）
|
|
282
|
+
if (_cache[col.field] && Object.prototype.hasOwnProperty.call(_cache[col.field], '_sort')) {
|
|
283
|
+
col._sort = _cache[col.field]?._sort;
|
|
263
284
|
}
|
|
264
|
-
|
|
285
|
+
|
|
286
|
+
// 获取本地存储的字段升降序（注意不是表格列的顺序）
|
|
287
|
+
if (col.order === 0 || col.order === 1 || col.order === 2 || (_cache[col.field] && Object.prototype.hasOwnProperty.call(_cache[col.field], '__order'))) {
|
|
288
|
+
col.__order = _cache[col.field]?.__order || col.order;
|
|
289
|
+
}
|
|
290
|
+
|
|
291
|
+
// 最后一列可见列
|
|
292
|
+
if (!col.__close) {
|
|
265
293
|
state._last = idx;
|
|
266
294
|
}
|
|
267
|
-
return
|
|
295
|
+
return col;
|
|
268
296
|
})
|
|
269
297
|
.sort((a: any, b: any) => a._sort - b._sort)
|
|
270
298
|
.sort((a: any, b: any) => {
|
|
@@ -276,33 +304,37 @@
|
|
|
276
304
|
},
|
|
277
305
|
{
|
|
278
306
|
deep: true,
|
|
279
|
-
immediate: true
|
|
280
|
-
}
|
|
307
|
+
immediate: true,
|
|
308
|
+
},
|
|
281
309
|
);
|
|
310
|
+
|
|
311
|
+
// 缓存配置
|
|
282
312
|
watch(
|
|
283
313
|
[() => state.table],
|
|
284
314
|
() => {
|
|
285
315
|
const _table: any = {};
|
|
286
316
|
state._last = 0;
|
|
287
|
-
state.table.forEach((
|
|
288
|
-
_table[
|
|
289
|
-
if (Object.prototype.hasOwnProperty.call(
|
|
290
|
-
_table[
|
|
317
|
+
state.table.forEach((col: any, idx: number) => {
|
|
318
|
+
_table[col.field] = { _sort: idx };
|
|
319
|
+
if (Object.prototype.hasOwnProperty.call(col, '__close')) {
|
|
320
|
+
_table[col.field].__close = col.__close ? 1 : 0;
|
|
291
321
|
}
|
|
292
|
-
if (
|
|
322
|
+
if (Object.prototype.hasOwnProperty.call(col, '__order')) {
|
|
323
|
+
_table[col.field].__order = col.__order;
|
|
324
|
+
}
|
|
325
|
+
if (!col.__close) {
|
|
293
326
|
state._last = idx;
|
|
294
327
|
}
|
|
295
328
|
});
|
|
296
|
-
console.log(338);
|
|
297
329
|
localStorage.setItem(`${state.name}_table`, JSON.stringify(_table));
|
|
298
330
|
},
|
|
299
|
-
{ deep: true }
|
|
331
|
+
{ deep: true },
|
|
300
332
|
);
|
|
301
333
|
|
|
302
334
|
// 全选
|
|
303
335
|
const fSelectAll = ({ target = {} }: any = {}) => {
|
|
304
|
-
props.lists.map((
|
|
305
|
-
|
|
336
|
+
props.lists.map((col: any = {}) => {
|
|
337
|
+
col.__selected = target.checked;
|
|
306
338
|
});
|
|
307
339
|
};
|
|
308
340
|
const tableRef: any = ref(null);
|
|
@@ -321,13 +353,21 @@
|
|
|
321
353
|
});
|
|
322
354
|
},
|
|
323
355
|
{
|
|
324
|
-
deep: true
|
|
325
|
-
}
|
|
356
|
+
deep: true,
|
|
357
|
+
},
|
|
326
358
|
);
|
|
327
359
|
onUnmounted(() => {
|
|
328
360
|
itable.remove();
|
|
329
361
|
});
|
|
330
362
|
|
|
363
|
+
// 设置字段升降序
|
|
364
|
+
const fSetOrder = (col: any) => {
|
|
365
|
+
const all = state.table.filter((i: any) => i.__order && i.field !== col.field).map((i: any) => ({ field: i.field, order: i.__order }));
|
|
366
|
+
col.__order = col.__order = (col.__order + 1) % 3;
|
|
367
|
+
all.unshift({ field: col.field, order: col.__order });
|
|
368
|
+
emits('order', { field: col.field, order: col.__order }, all);
|
|
369
|
+
};
|
|
370
|
+
|
|
331
371
|
// 事件处理
|
|
332
372
|
const event: any = (event: any, data: any): object => {
|
|
333
373
|
const _event: any = {};
|
|
@@ -1,2 +1,49 @@
|
|
|
1
|
+
import { isFunction } from '@fekit/utils';
|
|
1
2
|
import TableLoader from './TableLoader.vue';
|
|
3
|
+
|
|
4
|
+
// 类型定义
|
|
5
|
+
interface ListItem {
|
|
6
|
+
__selected?: boolean;
|
|
7
|
+
[key: string]: any;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
type KeyExtractor<T = ListItem> = string | ((item: T) => any);
|
|
11
|
+
|
|
2
12
|
export default TableLoader;
|
|
13
|
+
|
|
14
|
+
// 是否有选中记录
|
|
15
|
+
export const hasSelected = (lists: ListItem[] = []): boolean => {
|
|
16
|
+
return lists.some((item) => item.__selected === true);
|
|
17
|
+
};
|
|
18
|
+
|
|
19
|
+
// 获取选中记录的数量
|
|
20
|
+
export const getSelectedCount = (lists: ListItem[] = []): number => {
|
|
21
|
+
return lists.filter((item) => item.__selected === true).length;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
// 获取选中的记录
|
|
25
|
+
export const getSelected = <T extends Record<string, any> = ListItem>(lists: T[] = [], key: KeyExtractor<T> = ''): any[] => {
|
|
26
|
+
return (
|
|
27
|
+
lists
|
|
28
|
+
?.filter((item: T) => {
|
|
29
|
+
return item.__selected === true;
|
|
30
|
+
})
|
|
31
|
+
?.map((item: T) => {
|
|
32
|
+
return isFunction(key) ? (key as (item: T) => any)(item) : key ? item[key as string] : item;
|
|
33
|
+
}) || []
|
|
34
|
+
);
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
// 全选计算属性
|
|
38
|
+
export function allSelected(lists: ListItem[] = []) {
|
|
39
|
+
return {
|
|
40
|
+
get(): boolean {
|
|
41
|
+
return lists.length > 0 && lists.every((item) => item.__selected === true);
|
|
42
|
+
},
|
|
43
|
+
set(value: boolean): void {
|
|
44
|
+
lists.forEach((item) => {
|
|
45
|
+
item.__selected = value;
|
|
46
|
+
});
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import FormLoader from './FormLoader';
|
|
2
2
|
import LimitLoader from './LimitLoader';
|
|
3
|
-
|
|
3
|
+
export * from './TableLoader/index';
|
|
4
|
+
import TableLoader from './TableLoader/TableLoader.vue';
|
|
4
5
|
import ViewLoader from './ViewLoader';
|
|
5
6
|
export { FormLoader, LimitLoader, TableLoader, ViewLoader };
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
<div class="ml-sl ar mob-ac" ui-flex="row rm">
|
|
4
4
|
<div class="mx-ss-sub" ui-flex="row">
|
|
5
5
|
<div v-if="state.showTotal" ui-flex="row cm" ui-hide="<pad">共 {{ data[defined.total || 'total'] || 0 }} 条</div>
|
|
6
|
-
<button :ui-btn="`@a s read :border :square ${data[defined.
|
|
6
|
+
<button :ui-btn="`@a s read :border :square ${data[defined.page || 'page'] > 1 ? '' : ':disabled'}`" @click="prev">
|
|
7
7
|
<svg
|
|
8
8
|
style="width: 1em; height: 1em"
|
|
9
9
|
t="1701228540398"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
</button>
|
|
24
24
|
<div ui-tips="@a co:well ux:hover">
|
|
25
25
|
<div ui-btn="@a s read :border">
|
|
26
|
-
<code>{{ data[defined.
|
|
26
|
+
<code>{{ data[defined.page || 'page'] || 0 }}/{{ data[defined.totalPages || 'totalPages'] || 0 }}</code>
|
|
27
27
|
<svg
|
|
28
28
|
style="width: 1em; height: 1em"
|
|
29
29
|
t="1701229420486"
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
<div class="w-mm max-h-ls" ui-scroll=":y s">
|
|
46
46
|
<ul class="n-sl n-ss-sub dib-sub">
|
|
47
47
|
<li v-for="item in state.lists" :key="item">
|
|
48
|
-
<button :ui-btn="`@a s ${item === data[defined.
|
|
48
|
+
<button :ui-btn="`@a s ${item === data[defined.page || 'page'] ? 'main' : 'read :border'}`" @click="page(item)">
|
|
49
49
|
<code>{{ item }}</code>
|
|
50
50
|
</button>
|
|
51
51
|
</li>
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
</div>
|
|
54
54
|
</div>
|
|
55
55
|
</div>
|
|
56
|
-
<button :ui-btn="`@a s read :border :square ${data[defined.
|
|
56
|
+
<button :ui-btn="`@a s read :border :square ${data[defined.page || 'page'] < data[defined.totalPages || 'totalPages'] ? '' : ':disabled'}`" @click="next">
|
|
57
57
|
<svg style="width: 1em; height: 1em" class="icon co-read" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2426" width="64" height="64">
|
|
58
58
|
<path
|
|
59
59
|
d="M341.63640988 781.41564784c20.63742578 21.22981847 54.12571728 21.22981847 74.81456101 0l265.95100164-273.75421824c20.62728703-21.26747667 20.62728703-55.75008988 0-76.97556317l-265.95100164-273.74407946c-20.68449855-21.26747667-54.17423844-21.26747667-74.81456101 0-20.67291141 21.23706043-20.67291142 55.71170748 0 76.98497771l228.55639458 235.24869384-228.55567038 235.22117436c-20.67218722 21.26747667-20.67146302 55.74357212 0 77.02263594l0 0z"
|
|
@@ -111,23 +111,22 @@
|
|
|
111
111
|
<script setup lang="ts">
|
|
112
112
|
import { reactive, computed, watch } from 'vue';
|
|
113
113
|
import { useRoute } from 'vue-router';
|
|
114
|
-
import { isObject } from '@fekit/utils';
|
|
115
114
|
|
|
116
115
|
interface ModelValueProps {
|
|
117
116
|
pageSize?: number;
|
|
118
|
-
|
|
117
|
+
page?: number;
|
|
119
118
|
[key: string]: any;
|
|
120
119
|
}
|
|
121
120
|
|
|
122
121
|
interface DataProps {
|
|
123
122
|
total?: number;
|
|
124
123
|
totalPages?: number;
|
|
125
|
-
|
|
124
|
+
page?: number;
|
|
126
125
|
[key: string]: any;
|
|
127
126
|
}
|
|
128
127
|
interface DefinedProps {
|
|
129
128
|
// 当前页
|
|
130
|
-
|
|
129
|
+
page?: string;
|
|
131
130
|
// 总页数
|
|
132
131
|
totalPages?: string;
|
|
133
132
|
// 总条数
|
|
@@ -149,7 +148,7 @@
|
|
|
149
148
|
id: '',
|
|
150
149
|
modelValue: () => ({}),
|
|
151
150
|
data: () => ({}),
|
|
152
|
-
defined: () => ({})
|
|
151
|
+
defined: () => ({}),
|
|
153
152
|
});
|
|
154
153
|
|
|
155
154
|
const emits = defineEmits(['update:modelValue', 'page', 'size']);
|
|
@@ -157,7 +156,7 @@
|
|
|
157
156
|
id: computed(() => (props.id || 'PAGINATION' + route.path?.replace(/\//g, '_')).toUpperCase()),
|
|
158
157
|
showTotal: true,
|
|
159
158
|
list: computed(() => {
|
|
160
|
-
const _page = Number(props.data[props.defined.
|
|
159
|
+
const _page = Number(props.data[props.defined.page || 'page'] || 1);
|
|
161
160
|
const list = [_page];
|
|
162
161
|
if (_page > 1) {
|
|
163
162
|
list.unshift(_page - 1);
|
|
@@ -185,26 +184,26 @@
|
|
|
185
184
|
_lists.push(i);
|
|
186
185
|
}
|
|
187
186
|
return _lists;
|
|
188
|
-
})
|
|
187
|
+
}),
|
|
189
188
|
});
|
|
190
189
|
|
|
191
190
|
const prev = () => {
|
|
192
|
-
const _page = Number(props.data[props.defined.
|
|
193
|
-
emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.
|
|
191
|
+
const _page = Number(props.data[props.defined.page || 'page']) - 1 < 1 ? 1 : Number(props.data[props.defined.page || 'page']) - 1;
|
|
192
|
+
emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: _page } });
|
|
194
193
|
emits('page', _page);
|
|
195
194
|
};
|
|
196
195
|
|
|
197
196
|
const next = () => {
|
|
198
197
|
const _page =
|
|
199
|
-
Number(props.data[props.defined.
|
|
198
|
+
Number(props.data[props.defined.page || 'page']) + 1 > props.data[props.defined.totalPages || 'totalPages']
|
|
200
199
|
? props.data[props.defined.totalPages || 'totalPages']
|
|
201
|
-
: Number(props.data[props.defined.
|
|
202
|
-
emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.
|
|
200
|
+
: Number(props.data[props.defined.page || 'page']) + 1;
|
|
201
|
+
emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: _page } });
|
|
203
202
|
emits('page', _page);
|
|
204
203
|
};
|
|
205
204
|
|
|
206
205
|
const page = (idx: any) => {
|
|
207
|
-
emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.
|
|
206
|
+
emits('update:modelValue', { ...props.modelValue, ...{ [props.defined.page || 'page']: idx } });
|
|
208
207
|
emits('page', idx);
|
|
209
208
|
};
|
|
210
209
|
|