@netang/quasar 0.0.106 → 0.1.8

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/utils/$table.js CHANGED
@@ -1,999 +1,1001 @@
1
- import { ref, computed, provide, inject, watch } from 'vue'
2
- import { useQuasar } from 'quasar'
3
-
4
- import $n_has from 'lodash/has'
5
- import $n_get from 'lodash/get'
6
- import $n_cloneDeep from 'lodash/cloneDeep'
7
- import $n_merge from 'lodash/merge'
8
- import $n_isFunction from 'lodash/isFunction'
9
- import $n_findIndex from 'lodash/findIndex'
10
- import $n_uniq from 'lodash/uniq'
11
- import $n_concat from 'lodash/concat'
12
- import $n_isNil from 'lodash/isNil'
13
-
14
- import $n_router from '@netang/utils/vue/router'
15
-
16
- import $n_forEach from '@netang/utils/forEach'
17
- import $n_isValidArray from '@netang/utils/isValidArray'
18
- import $n_isValidString from '@netang/utils/isValidString'
19
- import $n_indexOf from '@netang/utils/indexOf'
20
- import $n_storage from '@netang/utils/storage'
21
-
22
- import $n_isRequired from '@netang/utils/isRequired'
23
- import $n_forIn from '@netang/utils/forIn'
24
- import $n_runAsync from '@netang/utils/runAsync'
25
- import $n_isValidObject from '@netang/utils/isValidObject'
26
- import $n_isValidValue from '@netang/utils/isValidValue'
27
- import $n_slash from '@netang/utils/slash'
28
- import $n_http from '@netang/utils/http'
29
-
30
- import $n_$power from './$power'
31
- import $n_dict from './dict'
32
- import $n_price from './price'
33
- import $n_getTime from './getTime'
34
-
35
- import { configs } from './config'
36
-
37
- import {
38
- // 设置单个搜索值
39
- setItemValue,
40
- // 从表格列获取原始值
41
- getRawData,
42
- // 获取参数
43
- getOptions,
44
- // 格式化值
45
- formatValue,
46
- } from './useSearch'
47
-
48
- import { NRenderKey, NPowerKey, NTableKey } from './symbols'
49
-
50
- const {
51
- // 表格配置
52
- tablesConfig,
53
- } = configs
54
-
55
- /**
56
- * 创建表格
57
- */
58
- function create(options) {
59
-
60
- // ==========【数据】=================================================================================================
61
-
62
- // quasar 对象
63
- const $q = useQuasar()
64
-
65
- // 每页显示行数选项
66
- const rowsPerPageOptions = [30, 40, 50, 100, 200, 500, 1000]
67
-
68
- // 获取参数
69
- const o = $n_merge({
70
- // 路由路径
71
- path: '',
72
- // 路由参数
73
- query: {},
74
- // 附加请求数据
75
- data: {},
76
- // 表格行唯一键值
77
- rowKey: 'id',
78
- // 选择类型, 可选值 none single(默认) multiple
79
- // selection: '',
80
- // 分隔栏, 可选值 horizontal vertical cell none
81
- separator: 'cell',
82
- // 初始已选数据
83
- selected: [],
84
- // 初始表格加载状态
85
- loading: false,
86
- // 表格列数据(对象数组)
87
- columns: [],
88
- // 初始可见列
89
- visibleColumns: [],
90
- // 表格行数据
91
- rows: [],
92
- // 表格翻页参数
93
- pagination: {
94
- // 页码
95
- page: 1,
96
- // 每页的数据条数
97
- rowsPerPage: rowsPerPageOptions[0],
98
- // 数据总数(服务器返回)
99
- rowsNumber: 1,
100
- // 排序字段
101
- sortBy: null,
102
- // sortBy: 'id',
103
- // 是否降序排列
104
- descending: true,
105
- },
106
- // 每页显示行数选项
107
- rowsPerPageOptions,
108
- // 自定义请求方法
109
- request: null,
110
- // 格式化单条数据
111
- formatRow: null,
112
- // http 设置
113
- httpSettings: {},
114
- // 是否开启初始搜素
115
- search: true,
116
- // 是否开启合计
117
- summary: false,
118
- // 从参数中获取搜索值
119
- searchFromQuery: true,
120
- // 是否显示宫格
121
- showGrid: true,
122
- // 是否显示可见列
123
- showVisibleColumns: true,
124
- // 是否开启缓存
125
- cache: true,
126
- // 是否刷新后清空已选数据
127
- refreshResetSelected: true,
128
-
129
- // 单击表格行事件
130
- rowClick: null,
131
- // 双击表格行事件
132
- rowDblClick: null,
133
- }, options)
134
-
135
- // 获取权限注入
136
- const $power = $n_has(options, '$power') ? options.$power : inject(NPowerKey)
137
- const hasPowr = !! $power
138
-
139
- // 获取渲染注入
140
- const $render = inject(NRenderKey)
141
- if (!! $render) {
142
- // 如果有表格传参, 则合并参数
143
- const tableProps = $n_get($render, 'props.tableProps')
144
- if ($n_isValidObject(tableProps)) {
145
- $n_merge(o, tableProps)
146
- }
147
- }
148
-
149
- // 获取选择类型(默认 single)
150
- if (! $n_has(o, 'selection') || ! $n_isValidString(o.selection)) {
151
- if (hasPowr) {
152
- o.selection = $n_get($power, 'powerPage.data.selection')
153
- if (! $n_isValidString(o.selection)) {
154
- o.selection = 'single'
155
- }
156
- } else {
157
- o.selection = 'single'
158
- }
159
- }
160
-
161
- // 获取权限路由
162
- const $route = $n_isValidString(o.path) ?
163
- // 如果为自定义路由
164
- $n_router.resolve({
165
- path: o.path,
166
- query: $n_isValidObject(o.query) ? o.query : {},
167
- })
168
- // 否则获取当前路由
169
- : (hasPowr ? $power.getRoute() : $n_router.getRoute())
170
-
171
- // 是否有权限按钮
172
- const hasPowerBtns = hasPowr ? $power.powerBtns.value.length : false
173
-
174
- // 表格已选数据
175
- const tableSelected = hasPowr ? $power.tableSelected : ref([])
176
- if ($n_isValidArray(o.selected)) {
177
- tableSelected.value = o.selected
178
- }
179
-
180
- // 是否开启缓存
181
- const isCache = !! o.cache
182
-
183
- // 缓存名
184
- const cacheName = $route.fullPath ? $route.fullPath : ($n_isValidString(o.cache) ? o.cache : '')
185
-
186
- // 表格列
187
- const tableColumns = []
188
-
189
- // 如果有权限按钮
190
- if (hasPowerBtns) {
191
- // 添加操作列
192
- o.columns.push({
193
- label: '操作',
194
- name: 'settings',
195
- })
196
- }
197
-
198
- // 表格图片标识数组
199
- const tableImgNames = ref([])
200
-
201
- // 设置列参数
202
- $n_forEach(o.columns, function(item) {
203
-
204
- if (
205
- ! $n_has(item, 'field')
206
- && $n_has(item, 'name')
207
- ) {
208
- item.field = item.name
209
- }
210
-
211
- if (! $n_has(item, 'align')) {
212
- item.align = 'left'
213
- }
214
-
215
- // 是否隐藏
216
- item.hide = $n_get(item, 'hide') === true
217
-
218
- // 如果有显示项
219
- if ($n_get(item, 'visible') !== false) {
220
- o.visibleColumns.push(item.field)
221
- }
222
-
223
- // 如果有时间戳
224
- if ($n_has(item, 'time')) {
225
- item.format = val => $n_getTime(val, { format: item.time === true ? `YYYY-MM-DD HH:mm` : item.time }, '-')
226
-
227
- // 如果有数据字典
228
- } else if ($n_has(item, 'dict')) {
229
- item.format = val => $n_dict(item.dict, val)
230
-
231
- // 如果有图片
232
- } else if ($n_has(item, 'img') && item.img === true) {
233
- tableImgNames.value.push(item.name)
234
-
235
- // 如果有价格
236
- } else if ($n_has(item, 'price')) {
237
- item.format = val => $n_price(val)
238
- }
239
-
240
- // 如果有路由
241
- if ($n_get(item, 'route')) {
242
- // 如果该值在当前路由路径中, 则显示
243
- if ($n_indexOf($route.fullPath, item.route) > -1) {
244
- tableColumns.push(item)
245
- }
246
-
247
- } else {
248
- tableColumns.push(item)
249
- }
250
- })
251
-
252
- // 获取可见列缓存
253
- const visibleColumnsCache = o.showVisibleColumns && isCache ? $n_storage.get('table:visible_columns:' + cacheName) : []
254
-
255
- // 表格可见列
256
- const tableVisibleColumns = ref(Array.isArray(visibleColumnsCache) ? visibleColumnsCache : $n_uniq([...o.visibleColumns]))
257
-
258
- // 表格加载状态
259
- const tableLoading = ref(o.loading)
260
-
261
- // 表格行数据
262
- const tableRows = ref(o.rows)
263
-
264
- // 表格翻页参数
265
- const tablePagination = ref($route.fullPath ? o.pagination : {})
266
-
267
- // 表格宫格
268
- const tableGrid = ref(o.showGrid && isCache ? $n_storage.get('table:grid:' + cacheName) === true : false)
269
-
270
- // 表格请求参数(将表格传参中的搜索参数剥离掉, 剩下的直接当做参数传递给服务器)
271
- let tableRequestQuery = {}
272
-
273
- // 是否请求表格合计
274
- let isRequestSummary = false
275
-
276
- // 表格合计
277
- const tableSummary = ref(null)
278
-
279
- // 表格选择类型
280
- const tableSelection = ref(o.selection)
281
-
282
- // 表格分隔栏
283
- const tableSeparator = ref(o.separator)
284
-
285
- const {
286
- // 原始参数
287
- rawQuery,
288
- // 原始表格搜索参数
289
- rawSearchOptions,
290
- // 原始表格搜索值(空表格搜索值, 用于搜索重置)
291
- rawTableSearchValue,
292
- // 首次表格搜索值(如果表格搜索参数中带了初始值, 则设置初始值)
293
- firstTableSearchValue,
294
- // 表格搜索值(如果表格搜索参数中带了初始值, 则设置初始值)
295
- } = getRawData(tableColumns, Object.assign({}, $route.query), o.searchFromQuery)
296
-
297
- // 表格搜索数据值
298
- const tableSearchValue = ref($route.fullPath ? firstTableSearchValue : [])
299
-
300
- // 表格搜索参数
301
- const tableSearchOptions = ref()
302
-
303
- // 是否已加载
304
- let _isTableLoaded = false
305
-
306
- // ==========【计算属性】=============================================================================================
307
-
308
- /**
309
- * 固定在表格右边的权限按钮列表
310
- */
311
- const tableFixedPowerBtns = ! hasPowerBtns ? ref([]) : computed(function () {
312
-
313
- const lists = []
314
-
315
- // 先格式化权限按钮列表
316
- $n_forEach($n_$power.formatBtns($power.powerBtns.value), function(item) {
317
- // 如果是固定按钮
318
- if (item.fixed) {
319
- lists.push(item)
320
- }
321
- })
322
-
323
- return lists
324
- })
325
-
326
- /**
327
- * 获取权限按钮中可双击的按钮
328
- */
329
- const tableDbClickPowerBtn = ! hasPowerBtns ? ref(null) : computed(function () {
330
- if (
331
- // 非手机模式
332
- ! $q.platform.is.mobile
333
- // 有权限列表
334
- && $n_isValidArray($power.powerBtns.value)
335
- ) {
336
- for (const item of $power.powerBtns.value) {
337
- if ($n_has(item, 'data.dbclick') === true) {
338
- return item
339
- }
340
- }
341
- }
342
- })
343
-
344
- /**
345
- * 是否显示固定在右边的权限按钮列表
346
- */
347
- const showTableFixed = computed(function () {
348
- return $n_indexOf(tableVisibleColumns.value, 'settings') > -1
349
- })
350
-
351
- // ==========【监听数据】=============================================================================================
352
-
353
- /**
354
- * 监听表格宫格模式
355
- */
356
- if (o.showGrid && isCache) {
357
- watch(tableGrid, function(val) {
358
-
359
- // 设置宫格模式缓存(永久缓存)
360
- // #if ! IS_DEV
361
- $n_storage.set('table:grid:' + cacheName, val, 0)
362
- // #endif
363
- })
364
- }
365
-
366
- /**
367
- * 监听表格可见列
368
- */
369
- if (o.showVisibleColumns && isCache) {
370
- watch(tableVisibleColumns, function(val) {
371
-
372
- // 设置可见列缓存(永久缓存)
373
- // #if ! IS_DEV
374
- $n_storage.set('table:visible_columns:' + cacheName, val, 0)
375
- // #endif
376
- })
377
- }
378
-
379
- /**
380
- * 监听固定在右边的权限按钮列表
381
- */
382
- if (hasPowerBtns) {
383
- watch(tableFixedPowerBtns, function (lists) {
384
-
385
- const index = $n_indexOf(tableVisibleColumns.value, 'settings')
386
-
387
- // 如果有固定在右边的权限按钮列表
388
- if ($n_isValidArray(lists)) {
389
-
390
- // 如果设置不在可见列中
391
- if (index === -1) {
392
-
393
- // 如果非手机模式
394
- if (! $q.platform.is.mobile) {
395
-
396
- // 则将设置加入可见列中
397
- tableVisibleColumns.value.push('settings')
398
- }
399
-
400
- // 否则在可见列中 && 如果是手机模式
401
- } else if ($q.platform.is.mobile) {
402
-
403
- // 则将设置从可见列中删除
404
- tableVisibleColumns.value.splice(index, 1)
405
- }
406
-
407
- // 否则如果设置在可见列中
408
- } else if (index > -1) {
409
-
410
- // 则将设置从可见列中删除
411
- tableVisibleColumns.value.splice(index, 1)
412
- }
413
-
414
- }, {
415
- // 立即执行
416
- immediate: true,
417
- })
418
- }
419
-
420
- // ==========【方法】================================================================================================
421
-
422
- /**
423
- * 设置表格传参
424
- */
425
- function setQuery(query) {
426
-
427
- if ($n_isValidObject(query)) {
428
-
429
- query = $n_cloneDeep(query)
430
-
431
- // 搜索参数键值数组
432
- const searchQueryKey = []
433
-
434
- // 搜索键值数组
435
- const NSearchKeys = []
436
- // 搜索数组
437
- const NSearchValues = []
438
-
439
- // 参数中是否有自定义搜索参数
440
- const hasNSearch = $n_has(query, 'n_search')
441
- if (hasNSearch) {
442
- // 删除在搜索中存在的参数键值
443
- $n_forIn(query.n_search, function (item, key) {
444
- if ($n_has(query, key)) {
445
- delete query[key]
446
- }
447
- })
448
- }
449
-
450
- // 如果允许从参数中获取搜索值
451
- if (o.searchFromQuery) {
452
-
453
- $n_forEach(rawSearchOptions, function (item, index) {
454
-
455
- const valueItem = tableSearchValue.value[index]
456
-
457
- // 如果传参在搜素 n_search 参数中
458
- if (hasNSearch && $n_has(query.n_search, item.name)) {
459
- const newSearchItem = query.n_search[item.name]
460
- if ($n_isValidArray(newSearchItem)) {
461
- valueItem[0].compare = newSearchItem[0].compare
462
- valueItem[0].value = newSearchItem[0].value
463
-
464
- if (newSearchItem.length > 1) {
465
- valueItem[1].compare = newSearchItem[1].compare
466
- valueItem[1].value = newSearchItem[1].value
467
- }
468
- }
469
- // 设置搜索的 key
470
- NSearchKeys.push(item.name)
471
-
472
- // 如果传参在搜索参数中
473
- } else if ($n_has(query, item.name)) {
474
- // 设置单个搜索值
475
- setItemValue(valueItem, $n_isRequired(query[item.name]) ? query[item.name] : '')
476
- // 设置参数中搜索的 key
477
- searchQueryKey.push(item.name)
478
- }
479
- })
480
-
481
- $n_forEach(searchQueryKey, function (key) {
482
- delete query[key]
483
- })
484
-
485
- if (hasNSearch) {
486
- $n_forIn(query.n_search, function(item, key) {
487
- if (
488
- NSearchKeys.indexOf(key) === -1
489
- && $n_isValidArray(item)
490
- ) {
491
- item[0].field = key
492
- NSearchValues.push(item[0])
493
-
494
- if (item.length > 1) {
495
- item[1].field = key
496
- NSearchValues.push(item[1])
497
- }
498
- }
499
- })
500
- }
501
-
502
- } else {
503
- $n_forIn(query.n_search, function(item, key) {
504
- if ($n_isValidArray(item)) {
505
- item[0].field = key
506
- NSearchValues.push(item[0])
507
- if (item.length > 1) {
508
- item[1].field = key
509
- NSearchValues.push(item[1])
510
- }
511
- }
512
- })
513
- }
514
-
515
- if (NSearchValues.length) {
516
- query.n_search = NSearchValues
517
- } else if (hasNSearch) {
518
- delete query.n_search
519
- }
520
-
521
- tableRequestQuery = query
522
- return
523
- }
524
-
525
- tableRequestQuery = {}
526
- }
527
-
528
-
529
- /**
530
- * 表格是否已加载
531
- */
532
- function isTableLoaded() {
533
- return _isTableLoaded
534
- }
535
-
536
- /**
537
- * 表格加载(只加载一次)
538
- */
539
- async function tableLoad() {
540
-
541
- // 如果表格已加载过了
542
- if (_isTableLoaded) {
543
- // 则无任何操作
544
- return
545
- }
546
-
547
- // 表格重新加载
548
- await tableReload()
549
- }
550
-
551
- /**
552
- * 表格重新加载
553
- */
554
- async function tableReload() {
555
-
556
- // 表格已加载
557
- _isTableLoaded = true
558
-
559
- if (! $route.fullPath) {
560
- return
561
- }
562
-
563
- // 请求表格合计
564
- if (o.summary) {
565
- isRequestSummary = true
566
- }
567
-
568
- // 请求表格数据
569
- // $tableRef?.requestServerInteraction({
570
- // pagination: o.pagination,
571
- // })
572
- await tableRequest({
573
- pagination: o.pagination,
574
- })
575
-
576
- // 清空表格已选数据
577
- if (o.refreshResetSelected) {
578
- tableSelected.value = []
579
- }
580
- }
581
-
582
- /**
583
- * 表格刷新
584
- */
585
- async function tableRefresh() {
586
-
587
- if (! $route.fullPath) {
588
- return
589
- }
590
-
591
- // 请求表格合计
592
- if (o.summary) {
593
- isRequestSummary = true
594
- }
595
-
596
- // 请求表格数据
597
- // $tableRef.requestServerInteraction()
598
- await tableRequest({
599
- pagination: tablePagination.value,
600
- })
601
-
602
- // 清空表格已选数据
603
- if (o.refreshResetSelected) {
604
- tableSelected.value = []
605
- }
606
- }
607
-
608
- /**
609
- * 表格搜索重置
610
- */
611
- function tableSearchReset(reload = true) {
612
-
613
- const newValue = []
614
-
615
- $n_forEach(rawSearchOptions, function (item, index) {
616
- // 如果该搜索条件是隐藏的
617
- if (item.hide) {
618
- newValue.push(tableSearchValue.value[index])
619
- // 否则为初始值
620
- } else {
621
- newValue.push(rawTableSearchValue[index])
622
- }
623
- })
624
-
625
- // 还原表格搜索数据
626
- tableSearchValue.value = $n_cloneDeep(newValue)
627
-
628
- // 表格重新加载
629
- if (reload) {
630
- tableReload().finally()
631
- }
632
- }
633
-
634
- /**
635
- * 获取表格请求数据
636
- */
637
- function getTableRequestData(props, isSummary = undefined) {
638
-
639
- // 解构数据
640
- const {
641
- // filter,
642
- pagination: {
643
- // 页码
644
- page,
645
- // 每页的数据条数
646
- rowsPerPage,
647
- // 排序字段
648
- sortBy,
649
- // 是否降序排列
650
- descending,
651
- }
652
- } = props
653
-
654
- // 请求数据
655
- const data = {
656
- // 页码
657
- page,
658
- // 每页的数据条数
659
- per_page: rowsPerPage,
660
- }
661
-
662
- // 如果排序字段是有效值
663
- if ($n_isValidValue(sortBy)) {
664
- Object.assign(data, {
665
- // 排序字段
666
- order_by: sortBy,
667
- // 是否降序排列
668
- is_desc: descending ? 1 : 0,
669
- })
670
- }
671
-
672
- // 合并参数
673
- $n_forIn(Object.assign({}, rawQuery, tableRequestQuery, o.data), function(value, key) {
674
- // 如果有值
675
- if ($n_isRequired(value)) {
676
- data[key] = value
677
- }
678
- })
679
-
680
- // 获取搜索值
681
- const search = formatValue(rawSearchOptions, tableSearchValue.value)
682
- if ($n_isValidArray(search)) {
683
- data.n_search = $n_has(data, 'n_search') ? $n_concat(data.n_search, search) : search
684
- }
685
-
686
- if ($n_isNil(isSummary)) {
687
- isSummary = isRequestSummary
688
- }
689
-
690
- // 如果请求表格合计
691
- if (isSummary) {
692
- data.summary = 1
693
- }
694
-
695
- return data
696
- }
697
-
698
- /**
699
- * 请求数据
700
- */
701
- async function tableRequest(props) {
702
-
703
- // 加载
704
- tableLoading.value = true
705
-
706
- // 解构数据
707
- const {
708
- // filter,
709
- pagination: {
710
- // 页码
711
- page,
712
- // 每页的数据条数
713
- rowsPerPage,
714
- // 排序字段
715
- sortBy,
716
- // 是否降序排列
717
- descending,
718
- }
719
- } = props
720
-
721
- // http 请求参数
722
- const httpOptions = Object.assign({
723
- // 请求数据
724
- url: $route.path,
725
- // 请求数据
726
- data: getTableRequestData(props, isRequestSummary),
727
- // ~~~~~~ 先开启防抖, 如果后期遇到表格加载不出来的情况, 再关闭防抖
728
- // 关闭防抖(允许重复请求)
729
- // debounce: false,
730
- }, o.httpSettings)
731
-
732
- const { status, data: res } = $n_isFunction(o.request)
733
- // 如果有自定义请求方法
734
- ? await $n_runAsync(o.request)({
735
- // http 请求参数
736
- httpOptions,
737
- // 表格声明属性
738
- props,
739
- // 表格行数据
740
- rows: tableRows,
741
- // 表格已选数据
742
- selected: tableSelected,
743
- })
744
- // 否则请求服务器
745
- : await $n_http(httpOptions)
746
-
747
- // 请求成功
748
- if (status) {
749
-
750
- const {
751
- // 返回数据
752
- rows,
753
- // 数据总数
754
- total,
755
- } = res
756
-
757
- // 如果请求表格合计
758
- if (isRequestSummary) {
759
- const summary = $n_get(res, 'summary')
760
- tableSummary.value = $n_isValidObject(summary) ? summary : null
761
- }
762
-
763
- // 更新页码
764
- tablePagination.value.page = page
765
- // 更新每页的数据条数
766
- tablePagination.value.rowsPerPage = rowsPerPage
767
- // 更新数据总数
768
- tablePagination.value.rowsNumber = total
769
- // 更新排序字段
770
- tablePagination.value.sortBy = sortBy
771
- // 更新是否降序排列
772
- tablePagination.value.descending = descending
773
-
774
- // 格式化单条数据
775
- if ($n_isFunction(o.formatRow)) {
776
- $n_forEach(rows, function(row) {
777
- o.formatRow({
778
- row,
779
- rows: tableRows,
780
- selected: tableSelected,
781
- })
782
- })
783
- }
784
-
785
- // 清除现有数据并添加新数据
786
- tableRows.value.splice(0, tableRows.value.length, ...rows)
787
- }
788
-
789
- // 取消请求表格合计
790
- isRequestSummary = false
791
-
792
- // 取消加载
793
- tableLoading.value = false
794
- }
795
-
796
- /**
797
- * 单击表格行
798
- */
799
- function _tableRowClick(e, row) {
800
-
801
- // 如果选择类型为无
802
- if (tableSelection.value === 'none') {
803
- // 则无任何操作
804
- return
805
- }
806
-
807
- const opt = {}
808
- opt[o.rowKey] = row[o.rowKey]
809
-
810
- // 获取当前数据索引
811
- const itemIndex = $n_findIndex(tableSelected.value, opt)
812
-
813
- // 如果不存在, 则添加
814
- if (itemIndex === -1) {
815
-
816
- // 如果选择类型为单选
817
- if (tableSelection.value === 'single') {
818
- tableSelected.value = [ row ]
819
-
820
- // 否则为多选
821
- } else {
822
- tableSelected.value.push(row)
823
- }
824
-
825
- // 否则删除
826
- } else {
827
- tableSelected.value.splice(itemIndex, 1)
828
- }
829
- }
830
- function tableRowClick(...e) {
831
-
832
- // 单击表格行
833
- _tableRowClick(...e)
834
-
835
- // 如果有自定义单击事件
836
- if ($n_isFunction(o.rowClick)) {
837
- o.rowClick(...e)
838
- }
839
- }
840
-
841
- /**
842
- * 双击表格行
843
- */
844
- function _tableRowDblclick(e, row) {
845
-
846
- // 如果选择类型为无
847
- if (tableSelection.value === 'none') {
848
- // 则无任何操作
849
- return
850
- }
851
-
852
- if (
853
- // 有权限
854
- hasPowr
855
- // 有双击的权限按钮
856
- && tableDbClickPowerBtn.value
857
- ) {
858
- $power.powerBtnClick(tableDbClickPowerBtn.value, [ row ])
859
- }
860
- }
861
- function tableRowDblclick(...e) {
862
-
863
- // 双击表格行
864
- _tableRowDblclick(...e)
865
-
866
- // 如果有自定义双击表格行事件
867
- if ($n_isFunction(o.tableRowDblclick)) {
868
- o.tableRowDblclick(...e)
869
- }
870
- }
871
-
872
- /**
873
- * 设置表格搜索参数
874
- */
875
- async function setTableSearchOptions(format) {
876
- tableSearchOptions.value = await getOptions(rawSearchOptions, format)
877
- }
878
-
879
- /**
880
- * 是否有表格搜索值
881
- */
882
- function hasTableSearchValue() {
883
- return !! formatValue(rawSearchOptions, tableSearchValue.value).length
884
- }
885
-
886
- // 如果开启搜索
887
- if (o.search) {
888
- // 设置表格搜索参数
889
- setTableSearchOptions()
890
- .finally()
891
- }
892
-
893
- // ==========【返回】=================================================================================================
894
-
895
- const resTable = {
896
- // 当前路由全路径
897
- routeFullPath: $route.fullPath,
898
- // 当前路由路径
899
- routePath: $route.path,
900
- // 当前路由参数
901
- routeQuery: $route.query,
902
- // 获取当前路由
903
- getRoute() {
904
- return $route
905
- },
906
-
907
- // 表格加载状态
908
- tableLoading,
909
- // 表格行唯一键值
910
- tableRowKey: o.rowKey,
911
- // 表格选择类型
912
- tableSelection,
913
- // 表格分隔栏
914
- tableSeparator,
915
- // 表格每页显示行数选项
916
- tableRowsPerPageOptions: rowsPerPageOptions,
917
- // 表格列数据(对象数组)
918
- tableColumns,
919
- // 表格可见列
920
- tableVisibleColumns,
921
- // 表格行数据
922
- tableRows,
923
- // 表格翻页参数
924
- tablePagination,
925
- // 表格已选数据
926
- tableSelected,
927
- // 固定在右边的权限按钮列表
928
- tableFixedPowerBtns,
929
- // 是否显示固定在右边的权限按钮列表
930
- showTableFixed,
931
- // 表格图片标识
932
- tableImgNames,
933
-
934
- // 表格宫格
935
- tableGrid,
936
- // 表格合计
937
- tableSummary,
938
- // 表格搜索数据
939
- tableSearchValue,
940
- // 表格搜索参数
941
- tableSearchOptions,
942
-
943
- // 设置表格传参
944
- setQuery,
945
- // 表格是否已加载
946
- isTableLoaded,
947
- // 表格加载(只加载一次)
948
- tableLoad,
949
- // 表格重新加载
950
- tableReload,
951
- // 表格刷新
952
- tableRefresh,
953
- // 表格搜索重置
954
- tableSearchReset,
955
- // 获取表格请求数据
956
- getTableRequestData,
957
- // 表格请求数据
958
- tableRequest,
959
- // 表格单击表格行
960
- tableRowClick,
961
- // 表格双击表格行
962
- tableRowDblclick,
963
- // 设置表格搜索参数
964
- setTableSearchOptions,
965
-
966
- // 是否有表格搜索值
967
- hasTableSearchValue,
968
- }
969
-
970
- if (hasPowr) {
971
- $power.update(function(data, _data) {
972
- _data.$table = resTable
973
- })
974
- }
975
-
976
- // 提供可以被后代组件注入的值
977
- provide(NTableKey, resTable)
978
-
979
- return resTable
980
- }
981
-
982
- /**
983
- * 获取表格配置
984
- */
985
- function config(routePath, path, defaultValue) {
986
- return $n_cloneDeep($n_get(tablesConfig, $n_slash(routePath, 'start', false) + (path ? '.' + path : ''), defaultValue))
987
- }
988
-
989
- /**
990
- * 业务表格
991
- */
992
- const $table = {
993
- // 创建表格
994
- create,
995
- // 获取表格配置
996
- config,
997
- }
998
-
999
- export default $table
1
+ import { ref, computed, provide, inject, watch } from 'vue'
2
+ import { useQuasar } from 'quasar'
3
+
4
+ import $n_has from 'lodash/has'
5
+ import $n_get from 'lodash/get'
6
+ import $n_cloneDeep from 'lodash/cloneDeep'
7
+ import $n_merge from 'lodash/merge'
8
+ import $n_isFunction from 'lodash/isFunction'
9
+ import $n_findIndex from 'lodash/findIndex'
10
+ import $n_uniq from 'lodash/uniq'
11
+ import $n_concat from 'lodash/concat'
12
+ import $n_isNil from 'lodash/isNil'
13
+
14
+ import $n_router from '@netang/utils/vue/router'
15
+
16
+ import $n_forEach from '@netang/utils/forEach'
17
+ import $n_isValidArray from '@netang/utils/isValidArray'
18
+ import $n_isValidString from '@netang/utils/isValidString'
19
+ import $n_indexOf from '@netang/utils/indexOf'
20
+ import $n_storage from '@netang/utils/storage'
21
+
22
+ import $n_isRequired from '@netang/utils/isRequired'
23
+ import $n_forIn from '@netang/utils/forIn'
24
+ import $n_runAsync from '@netang/utils/runAsync'
25
+ import $n_isValidObject from '@netang/utils/isValidObject'
26
+ import $n_isValidValue from '@netang/utils/isValidValue'
27
+ import $n_slash from '@netang/utils/slash'
28
+ import $n_http from '@netang/utils/http'
29
+
30
+ import $n_$power from './$power'
31
+ import $n_dict from './dict'
32
+ import $n_price from './price'
33
+ import $n_getTime from './getTime'
34
+
35
+ import { configs } from './config'
36
+
37
+ import {
38
+ // 设置单个搜索值
39
+ setItemValue,
40
+ // 从表格列获取原始值
41
+ getRawData,
42
+ // 获取参数
43
+ getOptions,
44
+ // 格式化值
45
+ formatValue,
46
+ } from './useSearch'
47
+
48
+ import { NRenderKey, NPowerKey, NTableKey } from './symbols'
49
+
50
+ const {
51
+ // 表格配置
52
+ tablesConfig,
53
+ } = configs
54
+
55
+ /**
56
+ * 创建表格
57
+ */
58
+ function create(options) {
59
+
60
+ // ==========【数据】=================================================================================================
61
+
62
+ // quasar 对象
63
+ const $q = useQuasar()
64
+
65
+ // 每页显示行数选项
66
+ const rowsPerPageOptions = [30, 40, 50, 100, 200, 500, 1000]
67
+
68
+ // 获取参数
69
+ const o = $n_merge({
70
+ // 路由路径
71
+ path: '',
72
+ // 请求地址(默认为 path)
73
+ url: '',
74
+ // 路由参数
75
+ query: {},
76
+ // 附加请求数据
77
+ data: {},
78
+ // 表格行唯一键值
79
+ rowKey: 'id',
80
+ // 选择类型, 可选值 none single(默认) multiple
81
+ // selection: '',
82
+ // 分隔栏, 可选值 horizontal vertical cell none
83
+ separator: 'cell',
84
+ // 初始已选数据
85
+ selected: [],
86
+ // 初始表格加载状态
87
+ loading: false,
88
+ // 表格列数据(对象数组)
89
+ columns: [],
90
+ // 初始可见列
91
+ visibleColumns: [],
92
+ // 表格行数据
93
+ rows: [],
94
+ // 表格翻页参数
95
+ pagination: {
96
+ // 页码
97
+ page: 1,
98
+ // 每页的数据条数
99
+ rowsPerPage: rowsPerPageOptions[0],
100
+ // 数据总数(服务器返回)
101
+ rowsNumber: 1,
102
+ // 排序字段
103
+ sortBy: null,
104
+ // sortBy: 'id',
105
+ // 是否降序排列
106
+ descending: true,
107
+ },
108
+ // 每页显示行数选项
109
+ rowsPerPageOptions,
110
+ // 自定义请求方法
111
+ request: null,
112
+ // 格式化单条数据
113
+ formatRow: null,
114
+ // http 设置
115
+ httpSettings: {},
116
+ // 是否开启初始搜素
117
+ search: true,
118
+ // 是否开启合计
119
+ summary: false,
120
+ // 从参数中获取搜索值
121
+ searchFromQuery: true,
122
+ // 是否显示宫格
123
+ showGrid: true,
124
+ // 是否显示可见列
125
+ showVisibleColumns: true,
126
+ // 是否开启缓存
127
+ cache: true,
128
+ // 是否刷新后清空已选数据
129
+ refreshResetSelected: true,
130
+
131
+ // 单击表格行事件
132
+ rowClick: null,
133
+ // 双击表格行事件
134
+ rowDblClick: null,
135
+ }, options)
136
+
137
+ // 获取权限注入
138
+ const $power = $n_has(options, '$power') ? options.$power : inject(NPowerKey)
139
+ const hasPowr = !! $power
140
+
141
+ // 获取渲染注入
142
+ const $render = $n_has(options, '$render') ? options.$render : inject(NRenderKey)
143
+ if (!! $render) {
144
+ // 如果有表格传参, 则合并参数
145
+ const tableProps = $n_get($render, 'props.tableProps')
146
+ if ($n_isValidObject(tableProps)) {
147
+ $n_merge(o, tableProps)
148
+ }
149
+ }
150
+
151
+ // 获取选择类型(默认 single)
152
+ if (! $n_has(o, 'selection') || ! $n_isValidString(o.selection)) {
153
+ if (hasPowr) {
154
+ o.selection = $n_get($power, 'powerPage.data.selection')
155
+ if (! $n_isValidString(o.selection)) {
156
+ o.selection = 'single'
157
+ }
158
+ } else {
159
+ o.selection = 'single'
160
+ }
161
+ }
162
+
163
+ // 获取权限路由
164
+ const $route = $n_isValidString(o.path) ?
165
+ // 如果为自定义路由
166
+ $n_router.resolve({
167
+ path: o.path,
168
+ query: $n_isValidObject(o.query) ? o.query : {},
169
+ })
170
+ // 否则获取当前路由
171
+ : (hasPowr ? $power.getRoute() : $n_router.getRoute())
172
+
173
+ // 是否有权限按钮
174
+ const hasPowerBtns = hasPowr ? $power.powerBtns.value.length : false
175
+
176
+ // 表格已选数据
177
+ const tableSelected = hasPowr ? $power.tableSelected : ref([])
178
+ if ($n_isValidArray(o.selected)) {
179
+ tableSelected.value = o.selected
180
+ }
181
+
182
+ // 是否开启缓存
183
+ const isCache = !! o.cache
184
+
185
+ // 缓存名
186
+ const cacheName = $route.fullPath ? $route.fullPath : ($n_isValidString(o.cache) ? o.cache : '')
187
+
188
+ // 表格列
189
+ const tableColumns = []
190
+
191
+ // 如果有权限按钮
192
+ if (hasPowerBtns) {
193
+ // 添加操作列
194
+ o.columns.push({
195
+ label: '操作',
196
+ name: 'settings',
197
+ })
198
+ }
199
+
200
+ // 表格图片标识数组
201
+ const tableImgNames = ref([])
202
+
203
+ // 设置列参数
204
+ $n_forEach(o.columns, function(item) {
205
+
206
+ if (
207
+ ! $n_has(item, 'field')
208
+ && $n_has(item, 'name')
209
+ ) {
210
+ item.field = item.name
211
+ }
212
+
213
+ if (! $n_has(item, 'align')) {
214
+ item.align = 'left'
215
+ }
216
+
217
+ // 是否隐藏
218
+ item.hide = $n_get(item, 'hide') === true
219
+
220
+ // 如果有显示项
221
+ if ($n_get(item, 'visible') !== false) {
222
+ o.visibleColumns.push(item.field)
223
+ }
224
+
225
+ // 如果有时间戳
226
+ if ($n_has(item, 'time')) {
227
+ item.format = val => $n_getTime(val, { format: item.time === true ? `YYYY-MM-DD HH:mm` : item.time }, '-')
228
+
229
+ // 如果有数据字典
230
+ } else if ($n_has(item, 'dict')) {
231
+ item.format = val => $n_dict(item.dict, val)
232
+
233
+ // 如果有图片
234
+ } else if ($n_has(item, 'img') && item.img === true) {
235
+ tableImgNames.value.push(item.name)
236
+
237
+ // 如果有价格
238
+ } else if ($n_has(item, 'price')) {
239
+ item.format = val => $n_price(val)
240
+ }
241
+
242
+ // 如果有路由
243
+ if ($n_get(item, 'route')) {
244
+ // 如果该值在当前路由路径中, 则显示
245
+ if ($n_indexOf($route.fullPath, item.route) > -1) {
246
+ tableColumns.push(item)
247
+ }
248
+
249
+ } else {
250
+ tableColumns.push(item)
251
+ }
252
+ })
253
+
254
+ // 获取可见列缓存
255
+ const visibleColumnsCache = o.showVisibleColumns && isCache ? $n_storage.get('table:visible_columns:' + cacheName) : []
256
+
257
+ // 表格可见列
258
+ const tableVisibleColumns = ref(Array.isArray(visibleColumnsCache) ? visibleColumnsCache : $n_uniq([...o.visibleColumns]))
259
+
260
+ // 表格加载状态
261
+ const tableLoading = ref(o.loading)
262
+
263
+ // 表格行数据
264
+ const tableRows = ref(o.rows)
265
+
266
+ // 表格翻页参数
267
+ const tablePagination = ref($route.fullPath ? o.pagination : {})
268
+
269
+ // 表格宫格
270
+ const tableGrid = ref(o.showGrid && isCache ? $n_storage.get('table:grid:' + cacheName) === true : false)
271
+
272
+ // 表格请求参数(将表格传参中的搜索参数剥离掉, 剩下的直接当做参数传递给服务器)
273
+ let tableRequestQuery = {}
274
+
275
+ // 是否请求表格合计
276
+ let isRequestSummary = false
277
+
278
+ // 表格合计
279
+ const tableSummary = ref(null)
280
+
281
+ // 表格选择类型
282
+ const tableSelection = ref(o.selection)
283
+
284
+ // 表格分隔栏
285
+ const tableSeparator = ref(o.separator)
286
+
287
+ const {
288
+ // 原始参数
289
+ rawQuery,
290
+ // 原始表格搜索参数
291
+ rawSearchOptions,
292
+ // 原始表格搜索值(空表格搜索值, 用于搜索重置)
293
+ rawTableSearchValue,
294
+ // 首次表格搜索值(如果表格搜索参数中带了初始值, 则设置初始值)
295
+ firstTableSearchValue,
296
+ // 表格搜索值(如果表格搜索参数中带了初始值, 则设置初始值)
297
+ } = getRawData(tableColumns, Object.assign({}, $route.query), o.searchFromQuery)
298
+
299
+ // 表格搜索数据值
300
+ const tableSearchValue = ref($route.fullPath ? firstTableSearchValue : [])
301
+
302
+ // 表格搜索参数
303
+ const tableSearchOptions = ref()
304
+
305
+ // 是否已加载
306
+ let _isTableLoaded = false
307
+
308
+ // ==========【计算属性】=============================================================================================
309
+
310
+ /**
311
+ * 固定在表格右边的权限按钮列表
312
+ */
313
+ const tableFixedPowerBtns = ! hasPowerBtns ? ref([]) : computed(function () {
314
+
315
+ const lists = []
316
+
317
+ // 先格式化权限按钮列表
318
+ $n_forEach($n_$power.formatBtns($power.powerBtns.value), function(item) {
319
+ // 如果是固定按钮
320
+ if (item.fixed) {
321
+ lists.push(item)
322
+ }
323
+ })
324
+
325
+ return lists
326
+ })
327
+
328
+ /**
329
+ * 获取权限按钮中可双击的按钮
330
+ */
331
+ const tableDbClickPowerBtn = ! hasPowerBtns ? ref(null) : computed(function () {
332
+ if (
333
+ // 非手机模式
334
+ ! $q.platform.is.mobile
335
+ // 有权限列表
336
+ && $n_isValidArray($power.powerBtns.value)
337
+ ) {
338
+ for (const item of $power.powerBtns.value) {
339
+ if ($n_has(item, 'data.dbclick') === true) {
340
+ return item
341
+ }
342
+ }
343
+ }
344
+ })
345
+
346
+ /**
347
+ * 是否显示固定在右边的权限按钮列表
348
+ */
349
+ const showTableFixed = computed(function () {
350
+ return $n_indexOf(tableVisibleColumns.value, 'settings') > -1
351
+ })
352
+
353
+ // ==========【监听数据】=============================================================================================
354
+
355
+ /**
356
+ * 监听表格宫格模式
357
+ */
358
+ if (o.showGrid && isCache) {
359
+ watch(tableGrid, function(val) {
360
+
361
+ // 设置宫格模式缓存(永久缓存)
362
+ // #if ! IS_DEV
363
+ $n_storage.set('table:grid:' + cacheName, val, 0)
364
+ // #endif
365
+ })
366
+ }
367
+
368
+ /**
369
+ * 监听表格可见列
370
+ */
371
+ if (o.showVisibleColumns && isCache) {
372
+ watch(tableVisibleColumns, function(val) {
373
+
374
+ // 设置可见列缓存(永久缓存)
375
+ // #if ! IS_DEV
376
+ $n_storage.set('table:visible_columns:' + cacheName, val, 0)
377
+ // #endif
378
+ })
379
+ }
380
+
381
+ /**
382
+ * 监听固定在右边的权限按钮列表
383
+ */
384
+ if (hasPowerBtns) {
385
+ watch(tableFixedPowerBtns, function (lists) {
386
+
387
+ const index = $n_indexOf(tableVisibleColumns.value, 'settings')
388
+
389
+ // 如果有固定在右边的权限按钮列表
390
+ if ($n_isValidArray(lists)) {
391
+
392
+ // 如果设置不在可见列中
393
+ if (index === -1) {
394
+
395
+ // 如果非手机模式
396
+ if (! $q.platform.is.mobile) {
397
+
398
+ // 则将设置加入可见列中
399
+ tableVisibleColumns.value.push('settings')
400
+ }
401
+
402
+ // 否则在可见列中 && 如果是手机模式
403
+ } else if ($q.platform.is.mobile) {
404
+
405
+ // 则将设置从可见列中删除
406
+ tableVisibleColumns.value.splice(index, 1)
407
+ }
408
+
409
+ // 否则如果设置在可见列中
410
+ } else if (index > -1) {
411
+
412
+ // 则将设置从可见列中删除
413
+ tableVisibleColumns.value.splice(index, 1)
414
+ }
415
+
416
+ }, {
417
+ // 立即执行
418
+ immediate: true,
419
+ })
420
+ }
421
+
422
+ // ==========【方法】================================================================================================
423
+
424
+ /**
425
+ * 设置表格传参
426
+ */
427
+ function setQuery(query) {
428
+
429
+ if ($n_isValidObject(query)) {
430
+
431
+ query = $n_cloneDeep(query)
432
+
433
+ // 搜索参数键值数组
434
+ const searchQueryKey = []
435
+
436
+ // 搜索键值数组
437
+ const NSearchKeys = []
438
+ // 搜索数组
439
+ const NSearchValues = []
440
+
441
+ // 参数中是否有自定义搜索参数
442
+ const hasNSearch = $n_has(query, 'n_search')
443
+ if (hasNSearch) {
444
+ // 删除在搜索中存在的参数键值
445
+ $n_forIn(query.n_search, function (item, key) {
446
+ if ($n_has(query, key)) {
447
+ delete query[key]
448
+ }
449
+ })
450
+ }
451
+
452
+ // 如果允许从参数中获取搜索值
453
+ if (o.searchFromQuery) {
454
+
455
+ $n_forEach(rawSearchOptions, function (item, index) {
456
+
457
+ const valueItem = tableSearchValue.value[index]
458
+
459
+ // 如果传参在搜素 n_search 参数中
460
+ if (hasNSearch && $n_has(query.n_search, item.name)) {
461
+ const newSearchItem = query.n_search[item.name]
462
+ if ($n_isValidArray(newSearchItem)) {
463
+ valueItem[0].compare = newSearchItem[0].compare
464
+ valueItem[0].value = newSearchItem[0].value
465
+
466
+ if (newSearchItem.length > 1) {
467
+ valueItem[1].compare = newSearchItem[1].compare
468
+ valueItem[1].value = newSearchItem[1].value
469
+ }
470
+ }
471
+ // 设置搜索的 key
472
+ NSearchKeys.push(item.name)
473
+
474
+ // 如果传参在搜索参数中
475
+ } else if ($n_has(query, item.name)) {
476
+ // 设置单个搜索值
477
+ setItemValue(valueItem, $n_isRequired(query[item.name]) ? query[item.name] : '')
478
+ // 设置参数中搜索的 key
479
+ searchQueryKey.push(item.name)
480
+ }
481
+ })
482
+
483
+ $n_forEach(searchQueryKey, function (key) {
484
+ delete query[key]
485
+ })
486
+
487
+ if (hasNSearch) {
488
+ $n_forIn(query.n_search, function(item, key) {
489
+ if (
490
+ NSearchKeys.indexOf(key) === -1
491
+ && $n_isValidArray(item)
492
+ ) {
493
+ item[0].field = key
494
+ NSearchValues.push(item[0])
495
+
496
+ if (item.length > 1) {
497
+ item[1].field = key
498
+ NSearchValues.push(item[1])
499
+ }
500
+ }
501
+ })
502
+ }
503
+
504
+ } else {
505
+ $n_forIn(query.n_search, function(item, key) {
506
+ if ($n_isValidArray(item)) {
507
+ item[0].field = key
508
+ NSearchValues.push(item[0])
509
+ if (item.length > 1) {
510
+ item[1].field = key
511
+ NSearchValues.push(item[1])
512
+ }
513
+ }
514
+ })
515
+ }
516
+
517
+ if (NSearchValues.length) {
518
+ query.n_search = NSearchValues
519
+ } else if (hasNSearch) {
520
+ delete query.n_search
521
+ }
522
+
523
+ tableRequestQuery = query
524
+ return
525
+ }
526
+
527
+ tableRequestQuery = {}
528
+ }
529
+
530
+
531
+ /**
532
+ * 表格是否已加载
533
+ */
534
+ function isTableLoaded() {
535
+ return _isTableLoaded
536
+ }
537
+
538
+ /**
539
+ * 表格加载(只加载一次)
540
+ */
541
+ async function tableLoad() {
542
+
543
+ // 如果表格已加载过了
544
+ if (_isTableLoaded) {
545
+ // 则无任何操作
546
+ return
547
+ }
548
+
549
+ // 表格重新加载
550
+ await tableReload()
551
+ }
552
+
553
+ /**
554
+ * 表格重新加载
555
+ */
556
+ async function tableReload() {
557
+
558
+ // 表格已加载
559
+ _isTableLoaded = true
560
+
561
+ if (! $route.fullPath) {
562
+ return
563
+ }
564
+
565
+ // 请求表格合计
566
+ if (o.summary) {
567
+ isRequestSummary = true
568
+ }
569
+
570
+ // 请求表格数据
571
+ // $tableRef?.requestServerInteraction({
572
+ // pagination: o.pagination,
573
+ // })
574
+ await tableRequest({
575
+ pagination: o.pagination,
576
+ })
577
+
578
+ // 清空表格已选数据
579
+ if (o.refreshResetSelected) {
580
+ tableSelected.value = []
581
+ }
582
+ }
583
+
584
+ /**
585
+ * 表格刷新
586
+ */
587
+ async function tableRefresh() {
588
+
589
+ if (! $route.fullPath) {
590
+ return
591
+ }
592
+
593
+ // 请求表格合计
594
+ if (o.summary) {
595
+ isRequestSummary = true
596
+ }
597
+
598
+ // 请求表格数据
599
+ // $tableRef.requestServerInteraction()
600
+ await tableRequest({
601
+ pagination: tablePagination.value,
602
+ })
603
+
604
+ // 清空表格已选数据
605
+ if (o.refreshResetSelected) {
606
+ tableSelected.value = []
607
+ }
608
+ }
609
+
610
+ /**
611
+ * 表格搜索重置
612
+ */
613
+ function tableSearchReset(reload = true) {
614
+
615
+ const newValue = []
616
+
617
+ $n_forEach(rawSearchOptions, function (item, index) {
618
+ // 如果该搜索条件是隐藏的
619
+ if (item.hide) {
620
+ newValue.push(tableSearchValue.value[index])
621
+ // 否则为初始值
622
+ } else {
623
+ newValue.push(rawTableSearchValue[index])
624
+ }
625
+ })
626
+
627
+ // 还原表格搜索数据
628
+ tableSearchValue.value = $n_cloneDeep(newValue)
629
+
630
+ // 表格重新加载
631
+ if (reload) {
632
+ tableReload().finally()
633
+ }
634
+ }
635
+
636
+ /**
637
+ * 获取表格请求数据
638
+ */
639
+ function getTableRequestData(props, isSummary = undefined) {
640
+
641
+ // 解构数据
642
+ const {
643
+ // filter,
644
+ pagination: {
645
+ // 页码
646
+ page,
647
+ // 每页的数据条数
648
+ rowsPerPage,
649
+ // 排序字段
650
+ sortBy,
651
+ // 是否降序排列
652
+ descending,
653
+ }
654
+ } = props
655
+
656
+ // 请求数据
657
+ const data = {
658
+ // 页码
659
+ page,
660
+ // 每页的数据条数
661
+ per_page: rowsPerPage,
662
+ }
663
+
664
+ // 如果排序字段是有效值
665
+ if ($n_isValidValue(sortBy)) {
666
+ Object.assign(data, {
667
+ // 排序字段
668
+ order_by: sortBy,
669
+ // 是否降序排列
670
+ is_desc: descending ? 1 : 0,
671
+ })
672
+ }
673
+
674
+ // 合并参数
675
+ $n_forIn(Object.assign({}, rawQuery, tableRequestQuery, o.data), function(value, key) {
676
+ // 如果有值
677
+ if ($n_isRequired(value)) {
678
+ data[key] = value
679
+ }
680
+ })
681
+
682
+ // 获取搜索值
683
+ const search = formatValue(rawSearchOptions, tableSearchValue.value)
684
+ if ($n_isValidArray(search)) {
685
+ data.n_search = $n_has(data, 'n_search') ? $n_concat(data.n_search, search) : search
686
+ }
687
+
688
+ if ($n_isNil(isSummary)) {
689
+ isSummary = isRequestSummary
690
+ }
691
+
692
+ // 如果请求表格合计
693
+ if (isSummary) {
694
+ data.summary = 1
695
+ }
696
+
697
+ return data
698
+ }
699
+
700
+ /**
701
+ * 请求数据
702
+ */
703
+ async function tableRequest(props) {
704
+
705
+ // 加载
706
+ tableLoading.value = true
707
+
708
+ // 解构数据
709
+ const {
710
+ // filter,
711
+ pagination: {
712
+ // 页码
713
+ page,
714
+ // 每页的数据条数
715
+ rowsPerPage,
716
+ // 排序字段
717
+ sortBy,
718
+ // 是否降序排列
719
+ descending,
720
+ }
721
+ } = props
722
+
723
+ // http 请求参数
724
+ const httpOptions = Object.assign({
725
+ // 请求数据
726
+ url: $n_isValidString(o.url) ? o.url : $route.path,
727
+ // 请求数据
728
+ data: getTableRequestData(props, isRequestSummary),
729
+ // ~~~~~~ 先开启防抖, 如果后期遇到表格加载不出来的情况, 再关闭防抖
730
+ // 关闭防抖(允许重复请求)
731
+ // debounce: false,
732
+ }, o.httpSettings)
733
+
734
+ const { status, data: res } = $n_isFunction(o.request)
735
+ // 如果有自定义请求方法
736
+ ? await $n_runAsync(o.request)({
737
+ // http 请求参数
738
+ httpOptions,
739
+ // 表格声明属性
740
+ props,
741
+ // 表格行数据
742
+ rows: tableRows,
743
+ // 表格已选数据
744
+ selected: tableSelected,
745
+ })
746
+ // 否则请求服务器
747
+ : await $n_http(httpOptions)
748
+
749
+ // 请求成功
750
+ if (status) {
751
+
752
+ const {
753
+ // 返回数据
754
+ rows,
755
+ // 数据总数
756
+ total,
757
+ } = res
758
+
759
+ // 如果请求表格合计
760
+ if (isRequestSummary) {
761
+ const summary = $n_get(res, 'summary')
762
+ tableSummary.value = $n_isValidObject(summary) ? summary : null
763
+ }
764
+
765
+ // 更新页码
766
+ tablePagination.value.page = page
767
+ // 更新每页的数据条数
768
+ tablePagination.value.rowsPerPage = rowsPerPage
769
+ // 更新数据总数
770
+ tablePagination.value.rowsNumber = total
771
+ // 更新排序字段
772
+ tablePagination.value.sortBy = sortBy
773
+ // 更新是否降序排列
774
+ tablePagination.value.descending = descending
775
+
776
+ // 格式化单条数据
777
+ if ($n_isFunction(o.formatRow)) {
778
+ $n_forEach(rows, function(row) {
779
+ o.formatRow({
780
+ row,
781
+ rows: tableRows,
782
+ selected: tableSelected,
783
+ })
784
+ })
785
+ }
786
+
787
+ // 清除现有数据并添加新数据
788
+ tableRows.value.splice(0, tableRows.value.length, ...rows)
789
+ }
790
+
791
+ // 取消请求表格合计
792
+ isRequestSummary = false
793
+
794
+ // 取消加载
795
+ tableLoading.value = false
796
+ }
797
+
798
+ /**
799
+ * 单击表格行
800
+ */
801
+ function _tableRowClick(e, row) {
802
+
803
+ // 如果选择类型为无
804
+ if (tableSelection.value === 'none') {
805
+ // 则无任何操作
806
+ return
807
+ }
808
+
809
+ const opt = {}
810
+ opt[o.rowKey] = row[o.rowKey]
811
+
812
+ // 获取当前数据索引
813
+ const itemIndex = $n_findIndex(tableSelected.value, opt)
814
+
815
+ // 如果不存在, 则添加
816
+ if (itemIndex === -1) {
817
+
818
+ // 如果选择类型为单选
819
+ if (tableSelection.value === 'single') {
820
+ tableSelected.value = [ row ]
821
+
822
+ // 否则为多选
823
+ } else {
824
+ tableSelected.value.push(row)
825
+ }
826
+
827
+ // 否则删除
828
+ } else {
829
+ tableSelected.value.splice(itemIndex, 1)
830
+ }
831
+ }
832
+ function tableRowClick(...e) {
833
+
834
+ // 单击表格行
835
+ _tableRowClick(...e)
836
+
837
+ // 如果有自定义单击事件
838
+ if ($n_isFunction(o.rowClick)) {
839
+ o.rowClick(...e)
840
+ }
841
+ }
842
+
843
+ /**
844
+ * 双击表格行
845
+ */
846
+ function _tableRowDblclick(e, row) {
847
+
848
+ // 如果选择类型为无
849
+ if (tableSelection.value === 'none') {
850
+ // 则无任何操作
851
+ return
852
+ }
853
+
854
+ if (
855
+ // 有权限
856
+ hasPowr
857
+ // 有双击的权限按钮
858
+ && tableDbClickPowerBtn.value
859
+ ) {
860
+ $power.powerBtnClick(tableDbClickPowerBtn.value, [ row ])
861
+ }
862
+ }
863
+ function tableRowDblclick(...e) {
864
+
865
+ // 双击表格行
866
+ _tableRowDblclick(...e)
867
+
868
+ // 如果有自定义双击表格行事件
869
+ if ($n_isFunction(o.tableRowDblclick)) {
870
+ o.tableRowDblclick(...e)
871
+ }
872
+ }
873
+
874
+ /**
875
+ * 设置表格搜索参数
876
+ */
877
+ async function setTableSearchOptions(format) {
878
+ tableSearchOptions.value = await getOptions(rawSearchOptions, format)
879
+ }
880
+
881
+ /**
882
+ * 是否有表格搜索值
883
+ */
884
+ function hasTableSearchValue() {
885
+ return !! formatValue(rawSearchOptions, tableSearchValue.value).length
886
+ }
887
+
888
+ // 如果开启搜索
889
+ if (o.search) {
890
+ // 设置表格搜索参数
891
+ setTableSearchOptions()
892
+ .finally()
893
+ }
894
+
895
+ // ==========【返回】=================================================================================================
896
+
897
+ const resTable = {
898
+ // 当前路由全路径
899
+ routeFullPath: $route.fullPath,
900
+ // 当前路由路径
901
+ routePath: $route.path,
902
+ // 当前路由参数
903
+ routeQuery: $route.query,
904
+ // 获取当前路由
905
+ getRoute() {
906
+ return $route
907
+ },
908
+
909
+ // 表格加载状态
910
+ tableLoading,
911
+ // 表格行唯一键值
912
+ tableRowKey: o.rowKey,
913
+ // 表格选择类型
914
+ tableSelection,
915
+ // 表格分隔栏
916
+ tableSeparator,
917
+ // 表格每页显示行数选项
918
+ tableRowsPerPageOptions: rowsPerPageOptions,
919
+ // 表格列数据(对象数组)
920
+ tableColumns,
921
+ // 表格可见列
922
+ tableVisibleColumns,
923
+ // 表格行数据
924
+ tableRows,
925
+ // 表格翻页参数
926
+ tablePagination,
927
+ // 表格已选数据
928
+ tableSelected,
929
+ // 固定在右边的权限按钮列表
930
+ tableFixedPowerBtns,
931
+ // 是否显示固定在右边的权限按钮列表
932
+ showTableFixed,
933
+ // 表格图片标识
934
+ tableImgNames,
935
+
936
+ // 表格宫格
937
+ tableGrid,
938
+ // 表格合计
939
+ tableSummary,
940
+ // 表格搜索数据
941
+ tableSearchValue,
942
+ // 表格搜索参数
943
+ tableSearchOptions,
944
+
945
+ // 设置表格传参
946
+ setQuery,
947
+ // 表格是否已加载
948
+ isTableLoaded,
949
+ // 表格加载(只加载一次)
950
+ tableLoad,
951
+ // 表格重新加载
952
+ tableReload,
953
+ // 表格刷新
954
+ tableRefresh,
955
+ // 表格搜索重置
956
+ tableSearchReset,
957
+ // 获取表格请求数据
958
+ getTableRequestData,
959
+ // 表格请求数据
960
+ tableRequest,
961
+ // 表格单击表格行
962
+ tableRowClick,
963
+ // 表格双击表格行
964
+ tableRowDblclick,
965
+ // 设置表格搜索参数
966
+ setTableSearchOptions,
967
+
968
+ // 是否有表格搜索值
969
+ hasTableSearchValue,
970
+ }
971
+
972
+ if (hasPowr) {
973
+ $power.update(function(data, _data) {
974
+ _data.$table = resTable
975
+ })
976
+ }
977
+
978
+ // 提供可以被后代组件注入的值
979
+ provide(NTableKey, resTable)
980
+
981
+ return resTable
982
+ }
983
+
984
+ /**
985
+ * 获取表格配置
986
+ */
987
+ function config(routePath, path, defaultValue) {
988
+ return $n_cloneDeep($n_get(tablesConfig, $n_slash(routePath, 'start', false) + (path ? '.' + path : ''), defaultValue))
989
+ }
990
+
991
+ /**
992
+ * 业务表格
993
+ */
994
+ const $table = {
995
+ // 创建表格
996
+ create,
997
+ // 获取表格配置
998
+ config,
999
+ }
1000
+
1001
+ export default $table