@netang/quasar 0.1.73 → 0.1.75

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.
Files changed (246) hide show
  1. package/.editorconfig +12 -12
  2. package/_docs/docs/components/field-table.md +58 -58
  3. package/_docs/docs/components/field-tree.md +21 -21
  4. package/_docs/docs/components/table.md +24 -24
  5. package/_docs/docs/utils/table.md +196 -196
  6. package/components/dialog/img-viewer/index.vue +657 -657
  7. package/components/dialog/index.vue +372 -372
  8. package/components/drawer/index.vue +303 -303
  9. package/components/editor-code/index.vue +325 -325
  10. package/components/empty/index.vue +80 -80
  11. package/components/field-date/index.vue +850 -850
  12. package/components/field-table/index.vue +31 -3
  13. package/components/field-tree/index.vue +754 -754
  14. package/components/img/index.vue +211 -211
  15. package/components/mixed-table/index.vue +532 -532
  16. package/components/mixed-table-splitter/index.vue +377 -377
  17. package/components/power-page/index.vue +94 -94
  18. package/components/private/components/move-to-tree/index.vue +154 -154
  19. package/components/private/edit-power-data/index.vue +846 -846
  20. package/components/private/table-visible-columns-button/index.vue +114 -114
  21. package/components/render/index.vue +123 -123
  22. package/components/search/index.vue +231 -231
  23. package/components/search-item/index.vue +212 -212
  24. package/components/select/index.vue +177 -177
  25. package/components/splitter/index.vue +422 -422
  26. package/components/table/index.vue +513 -513
  27. package/components/table-column-fixed/index.vue +110 -110
  28. package/components/table-summary/index.vue +107 -107
  29. package/components/toolbar/index.vue +146 -146
  30. package/components/tree/index.vue +1728 -1728
  31. package/components/uploader/index.vue +188 -188
  32. package/docs/404.html +33 -33
  33. package/docs/assets/404.html-60b35caa.js +1 -1
  34. package/docs/assets/404.html-d1e63d77.js +1 -1
  35. package/docs/assets/alert.html-b2a2a72f.js +5 -5
  36. package/docs/assets/alert.html-ba46d137.js +1 -1
  37. package/docs/assets/app-9f30aa4b.js +6 -6
  38. package/docs/assets/area.html-01b9b58d.js +42 -42
  39. package/docs/assets/area.html-9a4fce6a.js +1 -1
  40. package/docs/assets/arr.html-145d27e7.js +1 -1
  41. package/docs/assets/arr.html-674e65ab.js +11 -11
  42. package/docs/assets/auth.html-579fa830.js +1 -1
  43. package/docs/assets/auth.html-8544ed95.js +8 -8
  44. package/docs/assets/bus.html-c71254aa.js +1 -1
  45. package/docs/assets/bus.html-dc7d3d19.js +6 -6
  46. package/docs/assets/column-title.html-c735cb5a.js +3 -3
  47. package/docs/assets/column-title.html-e9316762.js +1 -1
  48. package/docs/assets/confirm.html-ddfdc27f.js +10 -10
  49. package/docs/assets/confirm.html-ef3e2bef.js +1 -1
  50. package/docs/assets/copy.html-d20345b6.js +1 -1
  51. package/docs/assets/copy.html-ef8c8571.js +13 -13
  52. package/docs/assets/data.html-6432175d.js +30 -30
  53. package/docs/assets/data.html-a3b05d5b.js +1 -1
  54. package/docs/assets/dialog.html-1f698e5a.js +1 -1
  55. package/docs/assets/dialog.html-62902b83.js +68 -68
  56. package/docs/assets/dialog.html-baea77c9.js +1 -1
  57. package/docs/assets/dialog.html-bb082fc4.js +1 -1
  58. package/docs/assets/dict.html-1311da3d.js +23 -23
  59. package/docs/assets/dict.html-b96fbf0c.js +1 -1
  60. package/docs/assets/dictOptions.html-7c4f40a5.js +1 -1
  61. package/docs/assets/dictOptions.html-fb99d175.js +5 -5
  62. package/docs/assets/dragger.html-668d3efa.js +1 -1
  63. package/docs/assets/dragger.html-749d585a.js +1 -1
  64. package/docs/assets/editor-code.html-6ab26ea9.js +1 -1
  65. package/docs/assets/editor-code.html-d196205d.js +1 -1
  66. package/docs/assets/empty.html-1c139131.js +1 -1
  67. package/docs/assets/empty.html-1e9c441d.js +1 -1
  68. package/docs/assets/field-date.html-069fdb13.js +1 -1
  69. package/docs/assets/field-date.html-ad204aa9.js +1 -1
  70. package/docs/assets/field-table.html-ce480f03.js +1 -1
  71. package/docs/assets/field-table.html-d9236160.js +1 -1
  72. package/docs/assets/field-text.html-7277c62f.js +1 -1
  73. package/docs/assets/field-text.html-ccb4cecf.js +1 -1
  74. package/docs/assets/field-tree.html-519bfb45.js +1 -1
  75. package/docs/assets/field-tree.html-fdc748d6.js +1 -1
  76. package/docs/assets/form.html-2b562c37.js +2 -2
  77. package/docs/assets/form.html-75104cd5.js +1 -1
  78. package/docs/assets/framework-204010b2.js +5 -5
  79. package/docs/assets/getData.html-990e3787.js +1 -1
  80. package/docs/assets/getData.html-bb72025f.js +34 -34
  81. package/docs/assets/getFile.html-42368004.js +1 -1
  82. package/docs/assets/getFile.html-99abd054.js +3 -3
  83. package/docs/assets/getImage.html-3429c5a1.js +1 -1
  84. package/docs/assets/getImage.html-4d886d83.js +3 -3
  85. package/docs/assets/getTime.html-7435f922.js +1 -1
  86. package/docs/assets/getTime.html-b37f49eb.js +20 -20
  87. package/docs/assets/img.html-7d1da657.js +1 -1
  88. package/docs/assets/img.html-fbea1105.js +1 -1
  89. package/docs/assets/index.html-1695dd7c.js +1 -1
  90. package/docs/assets/index.html-65a4aa67.js +1 -1
  91. package/docs/assets/index.html-7b98d5bd.js +1 -1
  92. package/docs/assets/index.html-c01f2648.js +1 -1
  93. package/docs/assets/input-number.html-0b250d2a.js +1 -1
  94. package/docs/assets/input-number.html-a8eb0378.js +1 -1
  95. package/docs/assets/list-menu-item.html-7f1b4611.js +1 -1
  96. package/docs/assets/list-menu-item.html-84ed5ab8.js +1 -1
  97. package/docs/assets/list-menu.html-28b4163f.js +1 -1
  98. package/docs/assets/list-menu.html-cb6ba95b.js +1 -1
  99. package/docs/assets/loading.html-dae9e39d.js +6 -6
  100. package/docs/assets/loading.html-dc74c9e6.js +1 -1
  101. package/docs/assets/notify.html-e6c4c514.js +1 -1
  102. package/docs/assets/notify.html-f2c4d914.js +8 -8
  103. package/docs/assets/power-page.html-32e02f82.js +1 -1
  104. package/docs/assets/power-page.html-485e77da.js +1 -1
  105. package/docs/assets/power.html-d258cc19.js +93 -93
  106. package/docs/assets/power.html-e490bd32.js +1 -1
  107. package/docs/assets/previewImage.html-6a6b4245.js +1 -1
  108. package/docs/assets/previewImage.html-c5b7e945.js +2 -2
  109. package/docs/assets/price.html-1882c548.js +19 -19
  110. package/docs/assets/price.html-94d3f5be.js +1 -1
  111. package/docs/assets/price.html-d213df0f.js +1 -1
  112. package/docs/assets/price.html-deaf880f.js +1 -1
  113. package/docs/assets/render.html-8efcbdd4.js +1 -1
  114. package/docs/assets/render.html-df228e38.js +1 -1
  115. package/docs/assets/rule.html-2cd57fc2.js +13 -13
  116. package/docs/assets/rule.html-61662001.js +1 -1
  117. package/docs/assets/ruleValid.html-04fe2552.js +1 -1
  118. package/docs/assets/ruleValid.html-e0a776af.js +14 -14
  119. package/docs/assets/search-0782d0d1.svg +1 -1
  120. package/docs/assets/search-item.html-3f75394c.js +1 -1
  121. package/docs/assets/search-item.html-4e942ecd.js +1 -1
  122. package/docs/assets/search.html-2807043e.js +1 -1
  123. package/docs/assets/search.html-c24f8806.js +1 -1
  124. package/docs/assets/select.html-00d0607c.js +1 -1
  125. package/docs/assets/select.html-de7731f5.js +1 -1
  126. package/docs/assets/splitter.html-56f51a70.js +1 -1
  127. package/docs/assets/splitter.html-f5c836d7.js +1 -1
  128. package/docs/assets/style-161e43ab.css +1 -1
  129. package/docs/assets/symbols.html-a6aea4bf.js +1 -1
  130. package/docs/assets/symbols.html-b1f65bad.js +21 -21
  131. package/docs/assets/table-column-fixed.html-3a69e7b2.js +1 -1
  132. package/docs/assets/table-column-fixed.html-e763c38b.js +1 -1
  133. package/docs/assets/table-pagination.html-236934d3.js +1 -1
  134. package/docs/assets/table-pagination.html-c37ee2ac.js +1 -1
  135. package/docs/assets/table-splitter.html-07eab15c.js +1 -1
  136. package/docs/assets/table-splitter.html-7670ee65.js +1 -1
  137. package/docs/assets/table-summary.html-04db434f.js +1 -1
  138. package/docs/assets/table-summary.html-943c65a0.js +1 -1
  139. package/docs/assets/table.html-36253ad7.js +1 -1
  140. package/docs/assets/table.html-7f9c5d1b.js +38 -38
  141. package/docs/assets/table.html-93d53dc8.js +1 -1
  142. package/docs/assets/table.html-ac99b9cb.js +1 -1
  143. package/docs/assets/thumbnail.html-bab1976b.js +1 -1
  144. package/docs/assets/thumbnail.html-eb64e5e8.js +1 -1
  145. package/docs/assets/timestamp.html-4e54f79b.js +13 -13
  146. package/docs/assets/timestamp.html-d0e1b88a.js +1 -1
  147. package/docs/assets/toast.html-58ecbe21.js +1 -1
  148. package/docs/assets/toast.html-c9b9d36b.js +6 -6
  149. package/docs/assets/toolbar.html-83d9f97c.js +1 -1
  150. package/docs/assets/toolbar.html-ff7b8c92.js +1 -1
  151. package/docs/assets/tree.html-d07cbe79.js +23 -23
  152. package/docs/assets/tree.html-ea04193e.js +1 -1
  153. package/docs/assets/uploader-query.html-05590718.js +1 -1
  154. package/docs/assets/uploader-query.html-3175bac5.js +1 -1
  155. package/docs/assets/uploader.html-36da4394.js +2 -2
  156. package/docs/assets/uploader.html-6b5f3079.js +1 -1
  157. package/docs/assets/uploader.html-b9340b57.js +1 -1
  158. package/docs/assets/uploader.html-bc1c22e3.js +1 -1
  159. package/docs/assets/value-format.html-8ae3d47d.js +1 -1
  160. package/docs/assets/value-format.html-afa99b3d.js +1 -1
  161. package/docs/components/column-title.html +35 -35
  162. package/docs/components/data.html +62 -62
  163. package/docs/components/dialog.html +33 -33
  164. package/docs/components/dragger.html +33 -33
  165. package/docs/components/editor-code.html +33 -33
  166. package/docs/components/empty.html +33 -33
  167. package/docs/components/field-date.html +33 -33
  168. package/docs/components/field-table.html +33 -33
  169. package/docs/components/field-text.html +33 -33
  170. package/docs/components/field-tree.html +33 -33
  171. package/docs/components/img.html +33 -33
  172. package/docs/components/input-number.html +33 -33
  173. package/docs/components/list-menu-item.html +33 -33
  174. package/docs/components/list-menu.html +33 -33
  175. package/docs/components/power-page.html +33 -33
  176. package/docs/components/price.html +33 -33
  177. package/docs/components/render.html +33 -33
  178. package/docs/components/search-item.html +33 -33
  179. package/docs/components/search.html +33 -33
  180. package/docs/components/select.html +33 -33
  181. package/docs/components/splitter.html +33 -33
  182. package/docs/components/table-column-fixed.html +33 -33
  183. package/docs/components/table-pagination.html +33 -33
  184. package/docs/components/table-splitter.html +33 -33
  185. package/docs/components/table-summary.html +33 -33
  186. package/docs/components/table.html +33 -33
  187. package/docs/components/thumbnail.html +33 -33
  188. package/docs/components/toolbar.html +33 -33
  189. package/docs/components/uploader-query.html +33 -33
  190. package/docs/components/uploader.html +33 -33
  191. package/docs/components/value-format.html +33 -33
  192. package/docs/index.html +33 -33
  193. package/docs/utils/alert.html +37 -37
  194. package/docs/utils/area.html +74 -74
  195. package/docs/utils/arr.html +43 -43
  196. package/docs/utils/auth.html +40 -40
  197. package/docs/utils/bus.html +38 -38
  198. package/docs/utils/confirm.html +42 -42
  199. package/docs/utils/copy.html +45 -45
  200. package/docs/utils/dialog.html +100 -100
  201. package/docs/utils/dict.html +55 -55
  202. package/docs/utils/dictOptions.html +37 -37
  203. package/docs/utils/form.html +34 -34
  204. package/docs/utils/getData.html +66 -66
  205. package/docs/utils/getFile.html +35 -35
  206. package/docs/utils/getImage.html +35 -35
  207. package/docs/utils/getTime.html +52 -52
  208. package/docs/utils/index.html +33 -33
  209. package/docs/utils/loading.html +38 -38
  210. package/docs/utils/notify.html +40 -40
  211. package/docs/utils/power.html +125 -125
  212. package/docs/utils/previewImage.html +34 -34
  213. package/docs/utils/price.html +51 -51
  214. package/docs/utils/rule.html +45 -45
  215. package/docs/utils/ruleValid.html +46 -46
  216. package/docs/utils/symbols.html +53 -53
  217. package/docs/utils/table.html +70 -70
  218. package/docs/utils/timestamp.html +45 -45
  219. package/docs/utils/toast.html +38 -38
  220. package/docs/utils/tree.html +55 -55
  221. package/docs/utils/uploader.html +34 -34
  222. package/package.json +1 -1
  223. package/sass/common.scss +179 -179
  224. package/sass/index.scss +13 -13
  225. package/sass/quasar/field.scss +250 -250
  226. package/sass/quasar/table.scss +168 -168
  227. package/sass/variables.scss +140 -140
  228. package/utils/$form.js +72 -72
  229. package/utils/$power.js +1430 -1428
  230. package/utils/$render.js +75 -75
  231. package/utils/$search.js +416 -416
  232. package/utils/$table.js +1206 -1199
  233. package/utils/$tree.js +664 -664
  234. package/utils/config.js +57 -57
  235. package/utils/dialog.js +36 -36
  236. package/utils/dict.js +21 -21
  237. package/utils/getFile.js +41 -41
  238. package/utils/getImage.js +176 -176
  239. package/utils/getTime.js +113 -113
  240. package/utils/index.js +65 -65
  241. package/utils/previewImage.js +14 -14
  242. package/utils/timestamp.js +18 -18
  243. package/utils/uploader/qiniu.js +320 -320
  244. package/utils/uploader.js +1625 -1625
  245. package/utils/useFileUrl.js +25 -25
  246. package/utils/useSearch.js +499 -499
@@ -1,513 +1,513 @@
1
- <template>
2
- <q-table
3
- class="n-table"
4
- :columns="columns"
5
- :rows="currentRows"
6
- :virtual-scroll-slice-size="virtualScrollItemSize"
7
- v-bind="$attrs"
8
- >
9
- <!-- 展开子数据插槽 -->
10
- <template
11
- v-slot:[slotNames.expandName]="props"
12
- v-if="hasChildren"
13
- >
14
- <q-td
15
- class="row no-wrap items-center "
16
- :style="{ paddingLeft: (meta[props.key].level * 16) + 'px' }"
17
- :props="props"
18
- >
19
- <!-- 旋转器 -->
20
- <q-spinner
21
- class="q-tree__spinner q-ml-sm"
22
- :color="iconColor"
23
- v-if="meta[props.key].lazy === 'loading'"
24
- />
25
-
26
- <!-- 箭头 -->
27
- <template v-else>
28
- <q-icon
29
- class="q-tree__arrow q-ml-sm"
30
- :name="computedIcon"
31
- :color="iconColor"
32
- :class="`${meta[props.key].expanded ? 'q-tree__arrow--rotate' : ''}`"
33
- @click="onExpandClick(props, $event)"
34
- v-if="meta[props.key].isParent || meta[props.key].lazy === true"
35
- />
36
- <span class="q-icon n-table__arrow-noop q-ml-sm" v-else></span>
37
- </template>
38
-
39
- <!-- 如果有插槽 -->
40
- <slot
41
- :name="slotNames.expandName"
42
- v-bind="props"
43
- v-if="slotNames.hasExpandSlot"
44
- />
45
- <!-- 否则显示值 -->
46
- <span v-else>{{getCellValue(props.col, props.row)}}</span>
47
- </q-td>
48
- </template>
49
-
50
- <!-- 单元格插槽 -->
51
- <template
52
- v-for="slotName in slotNames.bodyCell"
53
- v-slot:[slotName]="props"
54
- >
55
- <q-td :props="props">
56
- <slot
57
- :name="slotName"
58
- v-bind="props"
59
- />
60
- </q-td>
61
- </template>
62
-
63
- <!-- 其他插槽 -->
64
- <template
65
- v-for="slotName in slotNames.other"
66
- v-slot:[slotName]="props"
67
- >
68
- <slot
69
- :name="slotName"
70
- v-bind="props"
71
- />
72
- </template>
73
-
74
- </q-table>
75
- </template>
76
-
77
- <script>
78
- import { ref, watch, computed, getCurrentInstance, nextTick } from 'vue'
79
- import { stopAndPrevent } from 'quasar/src/utils/event'
80
-
81
- import $n_has from 'lodash/has'
82
-
83
- import $n_isValidArray from '@netang/utils/isValidArray'
84
- import $n_indexOf from '@netang/utils/indexOf'
85
- import $n_forIn from '@netang/utils/forIn'
86
-
87
- export default {
88
-
89
- /**
90
- * 标识
91
- */
92
- name: 'NTable',
93
-
94
- /**
95
- * 声明属性
96
- */
97
- props: {
98
- // 行数据
99
- rows: {
100
- type: Array,
101
- default: () => []
102
- },
103
- // 定义每一行的唯一键的每一行属性
104
- rowKey: {
105
- type: [ String, Function ],
106
- default: 'id'
107
- },
108
- // 头部列数据
109
- columns: Array,
110
- // 已展开数据数组
111
- expanded: Array, // v-model:expanded
112
- // 以像素为单位的默认行大小
113
- virtualScrollItemSize: {
114
- type: [ Number, String ],
115
- default: 50,
116
- },
117
-
118
- // 【覆盖声明】-------------------------------------------------------
119
-
120
- // 是否默认展开所有行, 当 Table 包含展开行存在或者为树形表格时有效
121
- defaultExpandAll: Boolean,
122
- // 子数据属性名称
123
- childrenKey: {
124
- type: String,
125
- default: 'children'
126
- },
127
- icon: String,
128
- iconColor: {
129
- type: String,
130
- default: 'grey'
131
- },
132
- },
133
-
134
- /**
135
- * 组合式
136
- */
137
- setup(props, { slots, emit }) {
138
-
139
- const { proxy } = getCurrentInstance()
140
- const { $q } = proxy
141
-
142
- // 懒加载
143
- const lazy = ref({})
144
- // 已展开节点数组
145
- const innerExpanded = ref(props.expanded || [])
146
-
147
- // ==========【计算属性】==========================================================================================
148
-
149
- /**
150
- * 获取每一行的唯一键的每一行属性
151
- */
152
- const getRowKey = computed(() => (
153
- typeof props.rowKey === 'function'
154
- ? props.rowKey
155
- : row => row[ props.rowKey ]
156
- ))
157
-
158
- /**
159
- * 图标
160
- */
161
- const computedIcon = computed(() => props.icon || $q.iconSet.tree.icon)
162
-
163
- /**
164
- * 是否有子数据
165
- */
166
- const hasChildren = computed(function() {
167
- if (
168
- $n_isValidArray(props.rows)
169
- && $n_isValidArray(props.columns)
170
- && props.columns[0].name
171
- ) {
172
- for (const item of props.rows) {
173
- // 如果有子数据
174
- if (
175
- $n_has(item, props.childrenKey)
176
- && $n_isValidArray(item[props.childrenKey])
177
- ) {
178
- return true
179
- }
180
- }
181
- }
182
- return false
183
- })
184
-
185
- /**
186
- * meta
187
- */
188
- const meta = computed(function () {
189
-
190
- const meta = {}
191
-
192
- function travel(row, level, parent) {
193
-
194
- // 唯一键值
195
- const key = getRowKey.value(row)
196
- // 是否为父级
197
- const isParent = $n_has(row, props.childrenKey) && $n_isValidArray(row[props.childrenKey])
198
- // 是否可展开
199
- // const expandable = row.expandable !== false
200
-
201
- // 懒加载
202
- let localLazy = row.lazy
203
- if (
204
- localLazy === true
205
- && lazy.value[ key ] !== void 0
206
- && Array.isArray(row[ props.childrenKey ]) === true
207
- ) {
208
- localLazy = lazy.value[ key ]
209
- }
210
-
211
- const m = {
212
- key,
213
- level,
214
- parent,
215
- isParent,
216
- lazy: localLazy,
217
- // link: row.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
218
- children: [],
219
- // matchesFilter: props.filter ? computedFilterMethod.value(row, props.filter) : true,
220
-
221
- // 是否已展开
222
- expanded: isParent ? innerExpanded.value.includes(key) : false,
223
- // expandable,
224
- }
225
-
226
- meta[ key ] = m
227
-
228
- // 如果为父级
229
- if (isParent) {
230
- // m.childrens = row[ props.childrenKey ]
231
- m.children = row[ props.childrenKey ].map(n => travel(n, level + 1, m))
232
- }
233
-
234
- return m
235
- }
236
-
237
- props.rows.forEach(row => travel(row, 0, null))
238
- return meta
239
- })
240
-
241
- /**
242
- * 当前行数据
243
- */
244
- const currentRows = computed(function() {
245
-
246
- // 如果有子数据
247
- if (hasChildren.value) {
248
- return getRows(props.rows, 0, 0)
249
- }
250
-
251
- // 否则返回原始行数据
252
- return props.rows
253
- })
254
-
255
- /**
256
- * 插槽标识
257
- */
258
- const slotNames = computed(function() {
259
-
260
- // 展开插槽标识
261
- let expandName = hasChildren.value ? `body-cell-${props.columns[0].name}` : ''
262
- // 是否存在展开插槽
263
- let hasExpandSlot = expandName && $n_has(slots, expandName)
264
- // 单元格插槽标识
265
- const bodyCell = []
266
- // 其他插槽标识
267
- const other = []
268
-
269
- $n_forIn(slots, function (value, key) {
270
- if (key.startsWith('body-cell-')) {
271
- if (! hasExpandSlot || key !== expandName) {
272
- bodyCell.push(key)
273
- }
274
- } else {
275
- other.push(key)
276
- }
277
- })
278
-
279
- return {
280
- // 展开插槽标识
281
- expandName,
282
- // 是否存在展开插槽
283
- hasExpandSlot,
284
- // 单元格插槽标识
285
- bodyCell,
286
- // 其他插槽标识
287
- other,
288
- }
289
- })
290
-
291
- // ==========【监听数据】=========================================================================================
292
-
293
- /**
294
- * 监听已展开节点数据
295
- */
296
- watch(() => props.expanded, val => {
297
- innerExpanded.value = val
298
- })
299
-
300
- /**
301
- * 监听行数据
302
- */
303
- watch(()=>props.rows, () => {
304
- if (props.defaultExpandAll) {
305
- expandAll()
306
- }
307
- }, {
308
- // 深度监听
309
- deep: true,
310
- // 立即执行
311
- immediate: true,
312
- })
313
-
314
- // ==========【方法】=============================================================================================
315
-
316
- /**
317
- * 获取行数据
318
- */
319
- function getRows(rows, __level, __parentKey) {
320
-
321
- const lists = []
322
-
323
- for (const row of rows) {
324
-
325
- lists.push(row)
326
-
327
- const key = getRowKey.value(row)
328
- const m = meta.value[ key ]
329
-
330
- // 如果有子数据
331
- if (
332
- m.isParent
333
- && $n_indexOf(innerExpanded.value, key) > -1
334
- ) {
335
- const childRows = getRows(row[ props.childrenKey ])
336
- if (childRows.length) {
337
- lists.push(...childRows)
338
- }
339
- }
340
- }
341
-
342
- return lists
343
- }
344
-
345
- /**
346
- * 展开点击
347
- */
348
- function onExpandClick (props, e) {
349
- if (e !== void 0) {
350
- stopAndPrevent(e)
351
- }
352
-
353
- const m = meta.value[props.key]
354
-
355
- // keyboard !== true && meta.selectable !== false && blur(meta.key)
356
- setExpanded(props.key, ! m.expanded, props.row, m)
357
- }
358
-
359
- /**
360
- * 在给定键的节点处展开树
361
- */
362
- function setExpanded (key, state, row, m) {
363
-
364
- if (m.lazy && m.lazy !== 'loaded') {
365
- if (m.lazy === 'loading') {
366
- return
367
- }
368
-
369
- lazy.value[ key ] = 'loading'
370
- if (Array.isArray(row[ props.childrenKey ]) !== true) {
371
- row[ props.childrenKey ] = []
372
- }
373
- emit('lazyLoad', {
374
- row,
375
- key,
376
- done: children => {
377
- lazy.value[ key ] = 'loaded'
378
- row[ props.childrenKey ] = Array.isArray(children) === true ? children : []
379
- nextTick(() => {
380
- const localMeta = meta.value[ key ]
381
- if (localMeta && localMeta.isParent === true) {
382
- localSetExpanded(key, true)
383
- }
384
- })
385
- },
386
- fail: () => {
387
- delete lazy.value[ key ]
388
- if (row[ props.childrenKey ].length === 0) {
389
- delete row[ props.childrenKey ]
390
- }
391
- }
392
- })
393
-
394
- } else if (m.isParent === true) {
395
- localSetExpanded(key, state)
396
- }
397
- }
398
-
399
- function localSetExpanded (key, state) {
400
- let target = innerExpanded.value
401
- const shouldEmit = props.expanded !== void 0
402
-
403
- if (shouldEmit === true) {
404
- target = target.slice()
405
- }
406
-
407
- if (state) {
408
- // if (props.accordion) {
409
- // if (meta.value[ key ]) {
410
- // const collapse = []
411
- // if (meta.value[ key ].parent) {
412
- // meta.value[ key ].parent.children.forEach(m => {
413
- // if (m.key !== key && m.expandable === true) {
414
- // collapse.push(m.key)
415
- // }
416
- // })
417
- // }
418
- // else {
419
- // props.nodes.forEach(node => {
420
- // const k = node[ props.nodeKey ]
421
- // if (k !== key) {
422
- // collapse.push(k)
423
- // }
424
- // })
425
- // }
426
- // if (collapse.length > 0) {
427
- // target = target.filter(k => collapse.includes(k) === false)
428
- // }
429
- // }
430
- // }
431
-
432
- target = target.concat([ key ])
433
- .filter((key, index, self) => self.indexOf(key) === index)
434
- }
435
- else {
436
- target = target.filter(k => k !== key)
437
- }
438
-
439
- if (shouldEmit === true) {
440
- emit('update:expanded', target)
441
- }
442
- else {
443
- innerExpanded.value = target
444
- }
445
- }
446
-
447
- function getCellValue (col, row) {
448
- const val = typeof col.field === 'function' ? col.field(row) : row[ col.field ]
449
- return col.format !== void 0 ? col.format(val, row) : val
450
- }
451
-
452
- /**
453
- * 用于折叠所有分支
454
- */
455
- function collapseAll () {
456
- if (props.expanded !== void 0) {
457
- emit('update:expanded', [])
458
- }
459
- else {
460
- innerExpanded.value = []
461
- }
462
- }
463
-
464
- /**
465
- * 用于展开所有分支
466
- */
467
- function expandAll () {
468
-
469
- if (! hasChildren.value) {
470
- return
471
- }
472
-
473
- const expanded = innerExpanded.value
474
-
475
- const travel = row => {
476
- if (
477
- $n_has(row, props.childrenKey)
478
- && $n_isValidArray(row[props.childrenKey])
479
- ) {
480
- expanded.push(row[ props.rowKey ])
481
- row[ props.childrenKey ].forEach(travel)
482
- }
483
- }
484
-
485
- props.rows.forEach(travel)
486
-
487
- if (props.expanded !== void 0) {
488
- emit('update:expanded', expanded)
489
-
490
- } else {
491
- innerExpanded.value = expanded
492
- }
493
- }
494
-
495
- // ==========【返回】=============================================================================================
496
-
497
- return {
498
- // 当前行数据
499
- currentRows,
500
- hasChildren,
501
- // 插槽标识
502
- slotNames,
503
- computedIcon,
504
- meta,
505
-
506
- onExpandClick,
507
- expandAll,
508
- collapseAll,
509
- getCellValue,
510
- }
511
- },
512
- }
513
- </script>
1
+ <template>
2
+ <q-table
3
+ class="n-table"
4
+ :columns="columns"
5
+ :rows="currentRows"
6
+ :virtual-scroll-slice-size="virtualScrollItemSize"
7
+ v-bind="$attrs"
8
+ >
9
+ <!-- 展开子数据插槽 -->
10
+ <template
11
+ v-slot:[slotNames.expandName]="props"
12
+ v-if="hasChildren"
13
+ >
14
+ <q-td
15
+ class="row no-wrap items-center "
16
+ :style="{ paddingLeft: (meta[props.key].level * 16) + 'px' }"
17
+ :props="props"
18
+ >
19
+ <!-- 旋转器 -->
20
+ <q-spinner
21
+ class="q-tree__spinner q-ml-sm"
22
+ :color="iconColor"
23
+ v-if="meta[props.key].lazy === 'loading'"
24
+ />
25
+
26
+ <!-- 箭头 -->
27
+ <template v-else>
28
+ <q-icon
29
+ class="q-tree__arrow q-ml-sm"
30
+ :name="computedIcon"
31
+ :color="iconColor"
32
+ :class="`${meta[props.key].expanded ? 'q-tree__arrow--rotate' : ''}`"
33
+ @click="onExpandClick(props, $event)"
34
+ v-if="meta[props.key].isParent || meta[props.key].lazy === true"
35
+ />
36
+ <span class="q-icon n-table__arrow-noop q-ml-sm" v-else></span>
37
+ </template>
38
+
39
+ <!-- 如果有插槽 -->
40
+ <slot
41
+ :name="slotNames.expandName"
42
+ v-bind="props"
43
+ v-if="slotNames.hasExpandSlot"
44
+ />
45
+ <!-- 否则显示值 -->
46
+ <span v-else>{{getCellValue(props.col, props.row)}}</span>
47
+ </q-td>
48
+ </template>
49
+
50
+ <!-- 单元格插槽 -->
51
+ <template
52
+ v-for="slotName in slotNames.bodyCell"
53
+ v-slot:[slotName]="props"
54
+ >
55
+ <q-td :props="props">
56
+ <slot
57
+ :name="slotName"
58
+ v-bind="props"
59
+ />
60
+ </q-td>
61
+ </template>
62
+
63
+ <!-- 其他插槽 -->
64
+ <template
65
+ v-for="slotName in slotNames.other"
66
+ v-slot:[slotName]="props"
67
+ >
68
+ <slot
69
+ :name="slotName"
70
+ v-bind="props"
71
+ />
72
+ </template>
73
+
74
+ </q-table>
75
+ </template>
76
+
77
+ <script>
78
+ import { ref, watch, computed, getCurrentInstance, nextTick } from 'vue'
79
+ import { stopAndPrevent } from 'quasar/src/utils/event'
80
+
81
+ import $n_has from 'lodash/has'
82
+
83
+ import $n_isValidArray from '@netang/utils/isValidArray'
84
+ import $n_indexOf from '@netang/utils/indexOf'
85
+ import $n_forIn from '@netang/utils/forIn'
86
+
87
+ export default {
88
+
89
+ /**
90
+ * 标识
91
+ */
92
+ name: 'NTable',
93
+
94
+ /**
95
+ * 声明属性
96
+ */
97
+ props: {
98
+ // 行数据
99
+ rows: {
100
+ type: Array,
101
+ default: () => []
102
+ },
103
+ // 定义每一行的唯一键的每一行属性
104
+ rowKey: {
105
+ type: [ String, Function ],
106
+ default: 'id'
107
+ },
108
+ // 头部列数据
109
+ columns: Array,
110
+ // 已展开数据数组
111
+ expanded: Array, // v-model:expanded
112
+ // 以像素为单位的默认行大小
113
+ virtualScrollItemSize: {
114
+ type: [ Number, String ],
115
+ default: 50,
116
+ },
117
+
118
+ // 【覆盖声明】-------------------------------------------------------
119
+
120
+ // 是否默认展开所有行, 当 Table 包含展开行存在或者为树形表格时有效
121
+ defaultExpandAll: Boolean,
122
+ // 子数据属性名称
123
+ childrenKey: {
124
+ type: String,
125
+ default: 'children'
126
+ },
127
+ icon: String,
128
+ iconColor: {
129
+ type: String,
130
+ default: 'grey'
131
+ },
132
+ },
133
+
134
+ /**
135
+ * 组合式
136
+ */
137
+ setup(props, { slots, emit }) {
138
+
139
+ const { proxy } = getCurrentInstance()
140
+ const { $q } = proxy
141
+
142
+ // 懒加载
143
+ const lazy = ref({})
144
+ // 已展开节点数组
145
+ const innerExpanded = ref(props.expanded || [])
146
+
147
+ // ==========【计算属性】==========================================================================================
148
+
149
+ /**
150
+ * 获取每一行的唯一键的每一行属性
151
+ */
152
+ const getRowKey = computed(() => (
153
+ typeof props.rowKey === 'function'
154
+ ? props.rowKey
155
+ : row => row[ props.rowKey ]
156
+ ))
157
+
158
+ /**
159
+ * 图标
160
+ */
161
+ const computedIcon = computed(() => props.icon || $q.iconSet.tree.icon)
162
+
163
+ /**
164
+ * 是否有子数据
165
+ */
166
+ const hasChildren = computed(function() {
167
+ if (
168
+ $n_isValidArray(props.rows)
169
+ && $n_isValidArray(props.columns)
170
+ && props.columns[0].name
171
+ ) {
172
+ for (const item of props.rows) {
173
+ // 如果有子数据
174
+ if (
175
+ $n_has(item, props.childrenKey)
176
+ && $n_isValidArray(item[props.childrenKey])
177
+ ) {
178
+ return true
179
+ }
180
+ }
181
+ }
182
+ return false
183
+ })
184
+
185
+ /**
186
+ * meta
187
+ */
188
+ const meta = computed(function () {
189
+
190
+ const meta = {}
191
+
192
+ function travel(row, level, parent) {
193
+
194
+ // 唯一键值
195
+ const key = getRowKey.value(row)
196
+ // 是否为父级
197
+ const isParent = $n_has(row, props.childrenKey) && $n_isValidArray(row[props.childrenKey])
198
+ // 是否可展开
199
+ // const expandable = row.expandable !== false
200
+
201
+ // 懒加载
202
+ let localLazy = row.lazy
203
+ if (
204
+ localLazy === true
205
+ && lazy.value[ key ] !== void 0
206
+ && Array.isArray(row[ props.childrenKey ]) === true
207
+ ) {
208
+ localLazy = lazy.value[ key ]
209
+ }
210
+
211
+ const m = {
212
+ key,
213
+ level,
214
+ parent,
215
+ isParent,
216
+ lazy: localLazy,
217
+ // link: row.disabled !== true && (selectable === true || (expandable === true && (isParent === true || localLazy === true))),
218
+ children: [],
219
+ // matchesFilter: props.filter ? computedFilterMethod.value(row, props.filter) : true,
220
+
221
+ // 是否已展开
222
+ expanded: isParent ? innerExpanded.value.includes(key) : false,
223
+ // expandable,
224
+ }
225
+
226
+ meta[ key ] = m
227
+
228
+ // 如果为父级
229
+ if (isParent) {
230
+ // m.childrens = row[ props.childrenKey ]
231
+ m.children = row[ props.childrenKey ].map(n => travel(n, level + 1, m))
232
+ }
233
+
234
+ return m
235
+ }
236
+
237
+ props.rows.forEach(row => travel(row, 0, null))
238
+ return meta
239
+ })
240
+
241
+ /**
242
+ * 当前行数据
243
+ */
244
+ const currentRows = computed(function() {
245
+
246
+ // 如果有子数据
247
+ if (hasChildren.value) {
248
+ return getRows(props.rows, 0, 0)
249
+ }
250
+
251
+ // 否则返回原始行数据
252
+ return props.rows
253
+ })
254
+
255
+ /**
256
+ * 插槽标识
257
+ */
258
+ const slotNames = computed(function() {
259
+
260
+ // 展开插槽标识
261
+ let expandName = hasChildren.value ? `body-cell-${props.columns[0].name}` : ''
262
+ // 是否存在展开插槽
263
+ let hasExpandSlot = expandName && $n_has(slots, expandName)
264
+ // 单元格插槽标识
265
+ const bodyCell = []
266
+ // 其他插槽标识
267
+ const other = []
268
+
269
+ $n_forIn(slots, function (value, key) {
270
+ if (key.startsWith('body-cell-')) {
271
+ if (! hasExpandSlot || key !== expandName) {
272
+ bodyCell.push(key)
273
+ }
274
+ } else {
275
+ other.push(key)
276
+ }
277
+ })
278
+
279
+ return {
280
+ // 展开插槽标识
281
+ expandName,
282
+ // 是否存在展开插槽
283
+ hasExpandSlot,
284
+ // 单元格插槽标识
285
+ bodyCell,
286
+ // 其他插槽标识
287
+ other,
288
+ }
289
+ })
290
+
291
+ // ==========【监听数据】=========================================================================================
292
+
293
+ /**
294
+ * 监听已展开节点数据
295
+ */
296
+ watch(() => props.expanded, val => {
297
+ innerExpanded.value = val
298
+ })
299
+
300
+ /**
301
+ * 监听行数据
302
+ */
303
+ watch(()=>props.rows, () => {
304
+ if (props.defaultExpandAll) {
305
+ expandAll()
306
+ }
307
+ }, {
308
+ // 深度监听
309
+ deep: true,
310
+ // 立即执行
311
+ immediate: true,
312
+ })
313
+
314
+ // ==========【方法】=============================================================================================
315
+
316
+ /**
317
+ * 获取行数据
318
+ */
319
+ function getRows(rows, __level, __parentKey) {
320
+
321
+ const lists = []
322
+
323
+ for (const row of rows) {
324
+
325
+ lists.push(row)
326
+
327
+ const key = getRowKey.value(row)
328
+ const m = meta.value[ key ]
329
+
330
+ // 如果有子数据
331
+ if (
332
+ m.isParent
333
+ && $n_indexOf(innerExpanded.value, key) > -1
334
+ ) {
335
+ const childRows = getRows(row[ props.childrenKey ])
336
+ if (childRows.length) {
337
+ lists.push(...childRows)
338
+ }
339
+ }
340
+ }
341
+
342
+ return lists
343
+ }
344
+
345
+ /**
346
+ * 展开点击
347
+ */
348
+ function onExpandClick (props, e) {
349
+ if (e !== void 0) {
350
+ stopAndPrevent(e)
351
+ }
352
+
353
+ const m = meta.value[props.key]
354
+
355
+ // keyboard !== true && meta.selectable !== false && blur(meta.key)
356
+ setExpanded(props.key, ! m.expanded, props.row, m)
357
+ }
358
+
359
+ /**
360
+ * 在给定键的节点处展开树
361
+ */
362
+ function setExpanded (key, state, row, m) {
363
+
364
+ if (m.lazy && m.lazy !== 'loaded') {
365
+ if (m.lazy === 'loading') {
366
+ return
367
+ }
368
+
369
+ lazy.value[ key ] = 'loading'
370
+ if (Array.isArray(row[ props.childrenKey ]) !== true) {
371
+ row[ props.childrenKey ] = []
372
+ }
373
+ emit('lazyLoad', {
374
+ row,
375
+ key,
376
+ done: children => {
377
+ lazy.value[ key ] = 'loaded'
378
+ row[ props.childrenKey ] = Array.isArray(children) === true ? children : []
379
+ nextTick(() => {
380
+ const localMeta = meta.value[ key ]
381
+ if (localMeta && localMeta.isParent === true) {
382
+ localSetExpanded(key, true)
383
+ }
384
+ })
385
+ },
386
+ fail: () => {
387
+ delete lazy.value[ key ]
388
+ if (row[ props.childrenKey ].length === 0) {
389
+ delete row[ props.childrenKey ]
390
+ }
391
+ }
392
+ })
393
+
394
+ } else if (m.isParent === true) {
395
+ localSetExpanded(key, state)
396
+ }
397
+ }
398
+
399
+ function localSetExpanded (key, state) {
400
+ let target = innerExpanded.value
401
+ const shouldEmit = props.expanded !== void 0
402
+
403
+ if (shouldEmit === true) {
404
+ target = target.slice()
405
+ }
406
+
407
+ if (state) {
408
+ // if (props.accordion) {
409
+ // if (meta.value[ key ]) {
410
+ // const collapse = []
411
+ // if (meta.value[ key ].parent) {
412
+ // meta.value[ key ].parent.children.forEach(m => {
413
+ // if (m.key !== key && m.expandable === true) {
414
+ // collapse.push(m.key)
415
+ // }
416
+ // })
417
+ // }
418
+ // else {
419
+ // props.nodes.forEach(node => {
420
+ // const k = node[ props.nodeKey ]
421
+ // if (k !== key) {
422
+ // collapse.push(k)
423
+ // }
424
+ // })
425
+ // }
426
+ // if (collapse.length > 0) {
427
+ // target = target.filter(k => collapse.includes(k) === false)
428
+ // }
429
+ // }
430
+ // }
431
+
432
+ target = target.concat([ key ])
433
+ .filter((key, index, self) => self.indexOf(key) === index)
434
+ }
435
+ else {
436
+ target = target.filter(k => k !== key)
437
+ }
438
+
439
+ if (shouldEmit === true) {
440
+ emit('update:expanded', target)
441
+ }
442
+ else {
443
+ innerExpanded.value = target
444
+ }
445
+ }
446
+
447
+ function getCellValue (col, row) {
448
+ const val = typeof col.field === 'function' ? col.field(row) : row[ col.field ]
449
+ return col.format !== void 0 ? col.format(val, row) : val
450
+ }
451
+
452
+ /**
453
+ * 用于折叠所有分支
454
+ */
455
+ function collapseAll () {
456
+ if (props.expanded !== void 0) {
457
+ emit('update:expanded', [])
458
+ }
459
+ else {
460
+ innerExpanded.value = []
461
+ }
462
+ }
463
+
464
+ /**
465
+ * 用于展开所有分支
466
+ */
467
+ function expandAll () {
468
+
469
+ if (! hasChildren.value) {
470
+ return
471
+ }
472
+
473
+ const expanded = innerExpanded.value
474
+
475
+ const travel = row => {
476
+ if (
477
+ $n_has(row, props.childrenKey)
478
+ && $n_isValidArray(row[props.childrenKey])
479
+ ) {
480
+ expanded.push(row[ props.rowKey ])
481
+ row[ props.childrenKey ].forEach(travel)
482
+ }
483
+ }
484
+
485
+ props.rows.forEach(travel)
486
+
487
+ if (props.expanded !== void 0) {
488
+ emit('update:expanded', expanded)
489
+
490
+ } else {
491
+ innerExpanded.value = expanded
492
+ }
493
+ }
494
+
495
+ // ==========【返回】=============================================================================================
496
+
497
+ return {
498
+ // 当前行数据
499
+ currentRows,
500
+ hasChildren,
501
+ // 插槽标识
502
+ slotNames,
503
+ computedIcon,
504
+ meta,
505
+
506
+ onExpandClick,
507
+ expandAll,
508
+ collapseAll,
509
+ getCellValue,
510
+ }
511
+ },
512
+ }
513
+ </script>