bri-components 1.2.65 → 1.2.67

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,185 +1,221 @@
1
1
  <template>
2
2
  <div class="DshPanel">
3
- <div
4
- v-for="(groupItem, groupIndex) in data"
5
- :key="groupIndex"
6
- class="DshPanel-group"
3
+ <!-- 加载 -->
4
+ <bri-loading
5
+ v-if="isLoading"
6
+ class="DshPanel-loading"
7
7
  >
8
- <!-- 标头 -->
9
- <div
10
- class="DshPanel-group-header"
11
- :style="{
12
- backgroundColor: getBgColor(groupItem),
13
- color: '#ffffff'
14
- }"
15
- >
16
- <!-- 左 -->
17
- <Checkbox
18
- v-if="multiple"
19
- class="header-checkbox"
20
- v-model="groupItem.isSelectAll"
21
- @on-change="selectGroupAll(groupItem, $event)"
22
- ></Checkbox>
23
-
24
- <!-- 左 -->
25
- <bri-tooltip
26
- class="header-left"
27
- :content="groupItem.name"
28
- placement="top"
29
- :transfer="true"
8
+ {{ loadingText }}
9
+ </bri-loading>
10
+ <template>
11
+ <!-- 有数据 -->
12
+ <template v-if="data.length">
13
+ <div
14
+ v-for="(groupItem, groupIndex) in data"
15
+ :key="groupIndex"
16
+ class="DshPanel-group"
30
17
  >
31
- <span class="header-left-name">
32
- {{ groupItem.name }}
33
- </span>
34
- </bri-tooltip>
35
-
36
- <!-- 右 -->
37
- <span class="header-right">
38
- <span class="header-right-num">
39
- {{ groupItem.total }}
40
- </span>
41
- 条(已加载{{ groupItem.list.length }}条)
42
- </span>
43
- </div>
44
-
45
- <!-- 组 数据列 -->
46
- <div
47
- class="DshPanel-group-list"
48
- :style="{
49
- backgroundColor: $getColor(getBgColor(groupItem))
50
- }"
51
- >
52
- <!-- 有数据 -->
53
- <template v-if="groupItem.list.length">
54
- <CheckboxGroup
55
- class="list-drag"
56
- v-model="groupItem.selectIds"
57
- @on-change="selectRow(groupItem, $event)"
18
+ <!-- 组 标头 -->
19
+ <div
20
+ class="DshPanel-group-header"
21
+ :style="{
22
+ backgroundColor: getBgColor(groupItem),
23
+ color: '#ffffff'
24
+ }"
58
25
  >
59
- <dsh-draggable
60
- class="list-drag-draggable"
61
- v-model="groupItem.list"
62
- group="panel"
63
- animation="300"
64
- :disabled="!dragOperationObj"
65
- @update="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
66
- @add="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
26
+ <!-- 左 -->
27
+ <Checkbox
28
+ v-if="multiple"
29
+ class="header-checkbox"
30
+ v-model="groupItem.isSelectAll"
31
+ @on-change="selectGroupAll(groupItem, $event)"
32
+ ></Checkbox>
33
+
34
+ <!-- 左 -->
35
+ <bri-tooltip
36
+ class="header-left"
37
+ :content="groupItem.name"
38
+ placement="top"
39
+ :transfer="true"
67
40
  >
68
- <transition-group
69
- :id="groupItem._key"
70
- class="list-drag-transition"
71
- @scroll.native="groupScroll(groupItem, groupIndex, $event)"
41
+ <span class="header-left-name">
42
+ {{ groupItem.name }}
43
+ </span>
44
+ </bri-tooltip>
45
+
46
+ <!-- 右 -->
47
+ <span class="header-right">
48
+ <span class="header-right-num">
49
+ {{ groupItem.total }}
50
+ </span>
51
+ 条(已加载{{ groupItem.list.length }}条)
52
+ </span>
53
+ </div>
54
+
55
+ <!-- 组 数据列 -->
56
+ <div
57
+ class="DshPanel-group-list"
58
+ :style="{
59
+ backgroundColor: $getColor(getBgColor(groupItem))
60
+ }"
61
+ >
62
+ <div class="list">
63
+ <!-- 提示语 -->
64
+ <div
65
+ v-if="!groupItem.finished"
66
+ class="list-tip"
67
+ :style="{
68
+ color: getBgColor(groupItem),
69
+ paddingTop: '5px',
70
+ paddingBottom: '0px'
71
+ }"
72
+ >
73
+ {{ getTip(groupItem) }}
74
+ </div>
75
+
76
+ <CheckboxGroup
77
+ class="list-drag"
78
+ v-model="groupItem.selectIds"
79
+ @on-change="selectRow(groupItem, $event)"
72
80
  >
73
- <div
74
- v-for="(dataItem, dataIndex) in groupItem.list"
75
- :key="dataItem._id"
76
- :id="dataItem._id"
77
- class="row-item"
78
- @click="clickRow(dataItem, dataIndex)"
81
+ <dsh-draggable
82
+ class="list-drag-draggable"
83
+ v-model="groupItem.list"
84
+ group="panel"
85
+ animation="300"
86
+ :disabled="!dragOperationObj"
87
+ @update="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
88
+ @add="$dshEmit(dragOperationObj, $event, groupItem, data.find(item => item._key === $event.from.id), { [groupField]: groupItem._key })"
79
89
  >
80
- <!-- 复选框 -->
81
- <Checkbox
82
- v-if="multiple"
83
- class="row-item-checkbox"
84
- :label="dataItem._id"
85
- @click.native.stop="clickRowCheckbox(dataItem)"
90
+ <transition-group
91
+ :id="groupItem._key"
92
+ class="list-drag-transition"
93
+ @scroll.native="groupScroll(groupItem, groupIndex, $event)"
86
94
  >
87
- {{ "" }}
88
- </Checkbox>
89
-
90
- <!-- 下拉操作 -->
91
- <dsh-dropdown
92
- v-if="operationList.length"
93
- class="row-item-dropdown"
94
- :dropdownObj="dropdownObj"
95
- :list="operationList"
96
- @click="$dshEmit($event, dataItem, dataIndex)"
97
- @click.native.stop="0"
98
- ></dsh-dropdown>
99
-
100
- <!-- 内容 -->
101
- <div class="row-item-info">
102
- <!-- 标题 -->
103
- <bri-tooltip
104
- class="title"
105
- :content="dataItem[titleField]"
106
- placement="top"
107
- :transfer="true"
108
- >
109
- <div class="title-name">
110
- {{ dataItem[titleField] }}
111
- </div>
112
- </bri-tooltip>
113
-
114
- <!-- 显示字段 -->
115
95
  <div
116
- v-for="colItem in selfColumns"
117
- :key="colItem._key"
118
- class="unit"
96
+ v-for="(dataItem, dataIndex) in groupItem.list"
97
+ :key="dataItem._id"
98
+ :id="dataItem._id"
99
+ class="row-item"
100
+ @click="clickRow(dataItem, dataIndex)"
119
101
  >
120
- <!-- label -->
121
- <bri-tooltip
122
- class="unit-label"
123
- :content="colItem._name"
124
- :transfer="true"
102
+ <!-- 复选框 -->
103
+ <Checkbox
104
+ v-if="multiple"
105
+ class="row-item-checkbox"
106
+ :label="dataItem._id"
107
+ @click.native.stop="clickRowCheckbox(dataItem)"
125
108
  >
126
- <span class="unit-label-name">
127
- {{ colItem._name }}
128
- </span>
129
- <span class="unit-label-colon">
130
-
131
- </span>
132
- </bri-tooltip>
133
-
134
- <!-- 右 val -->
135
- <div class="unit-control">
136
- <dsh-list-render
137
- v-if="colItem.renderBodyCell"
138
- :row="dataItem"
139
- :column="colItem"
140
- :index="0"
141
- :render="colItem.renderBodyCell"
142
- ></dsh-list-render>
109
+ {{ "" }}
110
+ </Checkbox>
111
+
112
+ <!-- 下拉操作 -->
113
+ <dsh-dropdown
114
+ v-if="operationList.length"
115
+ class="row-item-dropdown"
116
+ :dropdownObj="dropdownObj"
117
+ :list="operationList"
118
+ @click="$dshEmit($event, dataItem, dataIndex)"
119
+ @click.native.stop="0"
120
+ ></dsh-dropdown>
121
+
122
+ <!-- 内容 -->
123
+ <div class="row-item-info">
124
+ <!-- 标题 -->
125
+ <bri-tooltip
126
+ class="title"
127
+ :content="dataItem[titleField]"
128
+ placement="top"
129
+ :transfer="true"
130
+ >
131
+ <div class="title-name">
132
+ {{ dataItem[titleField] }}
133
+ </div>
134
+ </bri-tooltip>
143
135
 
136
+ <!-- 显示字段 -->
144
137
  <div
145
- v-else-if="colItem.formatter"
146
- v-html="colItem.formatter(dataItem, 0)"
147
- ></div>
148
-
149
- <span
150
- v-else
151
- class="unit-control-text"
138
+ v-for="colItem in selfColumns"
139
+ :key="colItem._key"
140
+ class="unit"
152
141
  >
153
- {{ dataItem[colItem._key] }}
154
- </span>
142
+ <!-- label -->
143
+ <bri-tooltip
144
+ class="unit-label-tooltip"
145
+ :content="colItem._name"
146
+ :transfer="true"
147
+ >
148
+ <div class="unit-label">
149
+ <span class="unit-label-name">
150
+ {{ colItem._name }}
151
+ </span>
152
+ <span class="unit-label-colon">
153
+
154
+ </span>
155
+ </div>
156
+ </bri-tooltip>
157
+
158
+ <!-- 右 val -->
159
+ <div class="unit-control">
160
+ <dsh-list-render
161
+ v-if="colItem.renderBodyCell"
162
+ :row="dataItem"
163
+ :column="colItem"
164
+ :index="0"
165
+ :render="colItem.renderBodyCell"
166
+ ></dsh-list-render>
167
+
168
+ <div
169
+ v-else-if="colItem.formatter"
170
+ v-html="colItem.formatter(dataItem, 0)"
171
+ ></div>
172
+
173
+ <span
174
+ v-else
175
+ class="unit-control-text"
176
+ >
177
+ {{ dataItem[colItem._key] }}
178
+ </span>
179
+ </div>
180
+ </div>
155
181
  </div>
156
182
  </div>
157
- </div>
158
- </div>
159
- </transition-group>
160
- </dsh-draggable>
161
- </CheckboxGroup>
162
- </template>
163
-
164
- <!-- 无数据 -->
165
- <div
166
- v-else
167
- class="dsh-tip"
168
- :style="{
169
- color: getBgColor(groupItem)
170
- }"
171
- >
172
- {{ noDataText }}
183
+ </transition-group>
184
+ </dsh-draggable>
185
+ </CheckboxGroup>
186
+
187
+ <!-- 提示语 -->
188
+ <div
189
+ v-if="groupItem.finished"
190
+ class="list-tip"
191
+ :style="{
192
+ color: getBgColor(groupItem),
193
+ paddingTop: '3px',
194
+ paddingBottom: '5px'
195
+ }"
196
+ >
197
+ {{ getTip(groupItem) }}
198
+ </div>
199
+ </div>
200
+
201
+ <!-- 组 操作按钮(添加) -->
202
+ <dsh-buttons
203
+ class="btns"
204
+ :list="groupBtnOperationList"
205
+ @click="$dshEmit($event, { [groupField]: groupItem._key })"
206
+ ></dsh-buttons>
207
+ </div>
173
208
  </div>
209
+ </template>
174
210
 
175
- <!-- 操作按钮(添加) -->
176
- <dsh-buttons
177
- class="list-btns"
178
- :list="groupBtnOperationList"
179
- @click="$dshEmit($event, { [groupField]: groupItem._key })"
180
- ></dsh-buttons>
211
+ <!-- 无数据 -->
212
+ <div
213
+ v-else
214
+ class="DshCard-nodata"
215
+ >
216
+ {{ noDataText }}
181
217
  </div>
182
- </div>
218
+ </template>
183
219
  </div>
184
220
  </template>
185
221
 
@@ -189,6 +225,10 @@
189
225
  export default {
190
226
  name: "DshPanel",
191
227
  props: {
228
+ isLoading: {
229
+ type: Boolean,
230
+ default: false
231
+ },
192
232
  data: {
193
233
  type: Array,
194
234
  default () {
@@ -204,15 +244,9 @@
204
244
  propsObj: {
205
245
  type: Object,
206
246
  default () {
207
- return {
208
- titleField: ""
209
- };
247
+ return {};
210
248
  }
211
249
  },
212
- noDataText: {
213
- type: String,
214
- default: "暂无内容..."
215
- },
216
250
 
217
251
  operationList: {
218
252
  type: Array,
@@ -236,34 +270,43 @@
236
270
  dropdownObj: {
237
271
  icon: "ios-more",
238
272
  size: 22,
239
- color: "#E9ECF4",
240
273
  showDropdownItemIcon: false
241
274
  }
242
275
  };
243
276
  },
244
277
  computed: {
245
- selectIds: {
246
- get () {
247
- return this.selections.map(item => item._id);
248
- },
249
- set (val) {
250
- this.selections = this.data
251
- .reduce((arr, groupItem) => [...arr, ...groupItem.list], [])
252
- .filter(item => val.includes(item._id));
253
- }
278
+ selfPropsObj () {
279
+ return {
280
+ multiple: false,
281
+ groupField: "",
282
+ titleField: "",
283
+ loadingText: "加载中,请稍等……",
284
+ finishedText: "暂无更多数据!",
285
+ noDataText: "暂无数据…",
286
+
287
+ ...this.propsObj
288
+ };
254
289
  },
255
-
256
290
  multiple () {
257
- return !!this.propsObj.multiple;
291
+ return !!this.selfPropsObj.multiple;
292
+ },
293
+ loadingText () {
294
+ return this.selfPropsObj.loadingText;
295
+ },
296
+ finishedText () {
297
+ return this.selfPropsObj.finishedText;
298
+ },
299
+ noDataText () {
300
+ return this.selfPropsObj.noDataText;
258
301
  },
259
302
  groupField () {
260
- return this.propsObj.groupField;
303
+ return this.selfPropsObj.groupField;
261
304
  },
262
305
  groupFieldObj () {
263
306
  return this.columns.find(colItem => colItem._key === this.groupField) || {};
264
307
  },
265
308
  titleField () {
266
- return this.propsObj.titleField;
309
+ return this.selfPropsObj.titleField;
267
310
  },
268
311
  // titleFieldObj () {
269
312
  // return this.columns.find(colItem => colItem._key === this.titleField) || {};
@@ -276,19 +319,33 @@
276
319
  titleAlign: "left",
277
320
  columnAlign: "left"
278
321
  }))
279
- .slice(0, 2);
322
+ .slice(0, 1);
280
323
  },
281
-
282
324
  groupBtnOperationList () {
283
325
  return this.extraOperationList
284
- .filter(item => ["canCreate", "canCustomCreate"].includes(item.type) || item.type.includes("canCustomCreate"))
326
+ .filter(item =>
327
+ ["canCreate", "canCustomCreate"].includes(item.type) || item.type.includes("canCustomCreate")
328
+ )
285
329
  .map(item => ({
286
330
  ...item,
287
331
  long: true
288
332
  }));
289
333
  },
290
334
  dragOperationObj () {
291
- return this.extraOperationList.find(item => ["canDrag", "canCustomDrag"].includes(item.type) || item.type.includes("canCustomDrag"));
335
+ return this.extraOperationList.find(item =>
336
+ ["canDrag", "canCustomDrag"].includes(item.type) || item.type.includes("canCustomDrag")
337
+ );
338
+ },
339
+
340
+ selectIds: {
341
+ get () {
342
+ return this.selections.map(item => item._id);
343
+ },
344
+ set (val) {
345
+ this.selections = this.data
346
+ .reduce((arr, groupItem) => [...arr, ...groupItem.list], [])
347
+ .filter(item => val.includes(item._id));
348
+ }
292
349
  }
293
350
  },
294
351
  created () {},
@@ -323,7 +380,7 @@
323
380
  groupItem.loading !== true &&
324
381
  groupItem.finished !== true &&
325
382
  groupElement.children.length === groupItem.list.length &&
326
- groupElement.clientHeight + groupElement.scrollTop > groupElement.scrollHeight - 20
383
+ groupElement.clientHeight + groupElement.scrollTop > groupElement.scrollHeight - 80
327
384
  ) {
328
385
  this.$emit("groupLoad", groupItem, groupElement);
329
386
  }
@@ -374,6 +431,15 @@
374
431
  return this.groupFieldObj._useColor
375
432
  ? resourceData.colorMap[(this.groupFieldObj._data.find(item => item._key === groupItem._key) || { color: "color-default" }).color]
376
433
  : resourceData.colorMap["color-default"];
434
+ },
435
+ getTip (groupItem) {
436
+ return !groupItem.list.length
437
+ ? this.noDataText
438
+ : groupItem.loading
439
+ ? this.loadingText
440
+ : groupItem.finished
441
+ ? this.finishedText
442
+ : "滑动加载更多数据...";
377
443
  }
378
444
  },
379
445
  watch: {
@@ -387,7 +453,7 @@
387
453
  };
388
454
  </script>
389
455
 
390
- <style lang="less">
456
+ <style lang="less" scoped>
391
457
  .DshPanel {
392
458
  min-width: 100%;
393
459
  height: 100%;
@@ -415,17 +481,7 @@
415
481
 
416
482
  .header {
417
483
  &-checkbox {
418
- .ivu-checkbox-inner {
419
- border: 2px solid #ffffff;
420
- background-color: transparent;
421
- }
422
484
 
423
- .ivu-checkbox-checked {
424
- .ivu-checkbox-inner:after {
425
- top: 1px;
426
- left: 4px;
427
- }
428
- }
429
485
  }
430
486
 
431
487
  &-left {
@@ -457,104 +513,164 @@
457
513
  flex-direction: column;
458
514
  justify-content: space-between;
459
515
 
460
- .list-drag {
516
+ .list {
461
517
  width: 100%;
462
518
  flex: 1;
463
519
  min-height: 0px;
520
+ display: flex;
521
+ flex-direction: column;
464
522
 
465
- &-draggable {
523
+ &-drag {
466
524
  width: 100%;
467
- height: 100%;
468
- }
469
-
470
- &-transition {
471
- display: block;
472
- width: 100%;
473
- height: 100%;
474
- padding: 10px;
475
- overflow: auto;
476
-
477
- .row-item {
478
- min-height: 60px;
479
- margin-bottom: 10px;
480
- padding: 8px 10px;
481
- border: 1px solid rgba(102, 110, 126, 0.1);
482
- // border-radius: 4px;
483
- background: #FFFFFF;
484
- cursor: pointer;
485
- position: relative;
486
-
487
- &-checkbox {
488
- position: absolute;
489
- top: -3px;
490
- left: -1px;
491
- }
525
+ flex: 1;
526
+ min-height: 0px;
527
+ overflow: hidden;
492
528
 
493
- &-dropdown {
494
- position: absolute;
495
- top: 5px;
496
- right: 5px;
497
- }
529
+ &-draggable {
530
+ width: 100%;
531
+ height: 100%;
532
+ }
498
533
 
499
- &-info {
500
- background: #ffffff;
534
+ &-transition {
535
+ display: block;
536
+ width: 100%;
537
+ height: 100%;
538
+ padding: 8px;
539
+ overflow: auto;
540
+
541
+ .row-item {
542
+ min-height: 60px;
543
+ margin-bottom: 8px;
544
+ padding: 8px;
545
+ border: 1px solid rgba(102, 110, 126, 0.1);
546
+ // border-radius: 4px;
547
+ // box-shadow: 0px 4px 8px 0px rgba(222, 222, 222, 0.75);
548
+ background: #FFFFFF;
549
+ cursor: pointer;
501
550
  overflow: hidden;
551
+ position: relative;
552
+
553
+ &-checkbox {
554
+ padding-right: 3px;
555
+ padding-bottom: 3px;
556
+ position: absolute;
557
+ top: -2px;
558
+ left: 0px;
559
+ }
502
560
 
503
- .title {
504
- height: 24px;
505
- padding: 0px 16px 0px 10px;
506
- font-size: 14px;
507
- font-weight: 600;
508
-
509
- &-name {
510
- .dsh-ellipsis();
511
- }
561
+ &-dropdown {
562
+ position: absolute;
563
+ top: 5px;
564
+ right: 5px;
512
565
  }
513
566
 
514
- .unit {
515
- height: 24px;
516
- display: flex;
517
- flex-direction: row;
567
+ &-info {
568
+ background: #ffffff;
518
569
 
519
- &-label {
520
- width: auto;
521
- font-weight: 400;
522
- color: #515A6E;
570
+ .title {
571
+ height: 24px;
572
+ padding: 0px 18px 0px 10px;
573
+ font-size: 14px;
574
+ font-weight: 600;
523
575
 
524
576
  &-name {
525
- min-width: 70px;
526
- max-width: 70px;
527
577
  .dsh-ellipsis();
528
- display: inline-block;
529
578
  }
579
+ }
580
+
581
+ .unit {
582
+ display: flex;
583
+ flex-direction: row;
584
+ align-items: center;
530
585
 
531
- &-colon {
586
+ &-label {
587
+ &-tooltip {
588
+ width: auto;
589
+ }
532
590
 
591
+ font-weight: 400;
592
+ color: #515A6E;
593
+ display: flex;
594
+ flex-direction: row;
595
+ align-items: center;
596
+
597
+ &-name {
598
+ .dsh-ellipsis();
599
+ display: inline-block;
600
+ min-width: 29px;
601
+ max-width: 71px;
602
+ }
603
+
604
+ &-colon {
605
+
606
+ }
533
607
  }
534
- }
535
608
 
536
- &-control {
537
- flex: 1;
538
- min-width: 0px;
539
- overflow: hidden;
609
+ &-control {
610
+ flex: 1;
611
+ min-width: 0px;
540
612
 
541
- &-text {
613
+ &-text {
542
614
 
615
+ }
543
616
  }
544
617
  }
545
618
  }
619
+
620
+ &:last-child {
621
+ margin-bottom: 0px;
622
+ }
546
623
  }
547
624
  }
548
625
  }
626
+
627
+ &-tip {
628
+ .dsh-subtip();
629
+ line-height: 16px;
630
+ }
549
631
  }
550
632
 
551
- .list-btns {
633
+ .btns {
552
634
  width: 100%;
553
635
  height: 40px;
554
- padding: 0px 10px;
636
+ padding: 4px 8px;
555
637
  text-align: center;
556
638
  }
557
639
  }
558
640
  }
559
641
  }
560
642
  </style>
643
+ <style lang="less">
644
+ .DshPanel {
645
+ &-group {
646
+ &-header {
647
+ .ivu-checkbox-inner {
648
+ border: 2px solid #ffffff;
649
+ background-color: transparent;
650
+ }
651
+
652
+ .ivu-checkbox-checked {
653
+ .ivu-checkbox-inner:after {
654
+ top: 1px;
655
+ left: 4px;
656
+ }
657
+ }
658
+ }
659
+
660
+ &-list {
661
+ .ivu-checkbox-inner {
662
+ border: none;
663
+ // border-radius: 4px;
664
+ box-shadow: 0px 1px 2px 0px rgba(222, 222, 222, 0.75);
665
+ }
666
+
667
+ .ivu-checkbox-checked {
668
+ .ivu-checkbox-inner:after {
669
+ top: 3px;
670
+ left: 6px;
671
+ }
672
+ }
673
+ }
674
+ }
675
+ }
676
+ </style>