bri-components 1.2.64 → 1.2.66

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