bri-components 1.2.90 → 1.2.91

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/form/DshAdvSearch.vue +8 -8
  3. package/src/components/form/searchMixin.js +8 -3
  4. package/src/components/list/DshBox/DshPanel.vue +194 -203
  5. package/src/styles/global/control.less +6 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.2.90",
3
+ "version": "1.2.91",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
package/src/components/form/DshAdvSearch.vue CHANGED
@@ -7,7 +7,7 @@
7
7
  <div class="DshAdvSearch-logic-title">筛选逻辑</div>
8
8
  <dsh-select
9
9
  class="DshAdvSearch-logic-option"
10
- :value="value"
10
+ :value="advSearchObj"
11
11
  :propsObj="selfLogicPropsObj"
12
12
  @change="change"
13
13
  ></dsh-select>
@@ -16,7 +16,7 @@
16
16
  <!-- 筛选条件 -->
17
17
  <div class="DshAdvSearch-title">筛选条件</div>
18
18
  <div class="DshAdvSearch-conditions">
19
- <template v-for="(conditionItem, conditionIndex) in value.conditions">
19
+ <template v-for="(conditionItem, conditionIndex) in advSearchObj.conditions">
20
20
  <!-- 'and', 'or' 循环模式 -->
21
21
  <div
22
22
  v-if="['and', 'or'].includes(conditionItem.logic)"
@@ -43,7 +43,7 @@
43
43
  slot="corner"
44
44
  class="DshAdvSearch-conditions-delete"
45
45
  :list="$getOperationList(['deleteCondition'])"
46
- @click="$dispatchEvent($event, conditionItem, conditionIndex, value.conditions)"
46
+ @click="$dispatchEvent($event, conditionItem, conditionIndex, advSearchObj.conditions)"
47
47
  />
48
48
  </div>
49
49
 
@@ -132,7 +132,7 @@
132
132
  v-if="conditionItem.dynamicList.length"
133
133
  class="extra-dynamic"
134
134
  :list="['set'].includes(mode) && ['reference', 'flatTable'].includes(conditionItem.fieldType) ? [] : parameterPropsObj._data"
135
- @click="$dispatchEvent(operationMap.selectParameterType, conditionItem, conditionIndex, value.conditions, $event)"
135
+ @click="$dispatchEvent(operationMap.selectParameterType, conditionItem, conditionIndex, advSearchObj.conditions, $event)"
136
136
  >
137
137
  <span class="extra-operator-wrap">
138
138
  <span class="extra-operator-name">
@@ -151,7 +151,7 @@
151
151
  v-if="conditionItem.operators.length"
152
152
  class="extra-operator"
153
153
  :list="conditionItem.operators"
154
- @click="$dispatchEvent(operationMap.selectOperator, conditionItem, conditionIndex, value.conditions, $event)"
154
+ @click="$dispatchEvent(operationMap.selectOperator, conditionItem, conditionIndex, advSearchObj.conditions, $event)"
155
155
  >
156
156
  <span class="extra-operator-wrap">
157
157
  <span class="extra-operator-name">
@@ -170,7 +170,7 @@
170
170
  slot="corner"
171
171
  class="DshAdvSearch-conditions-delete"
172
172
  :list="$getOperationList(['deleteCondition'])"
173
- @click="$dispatchEvent($event, conditionItem, conditionIndex, value.conditions)"
173
+ @click="$dispatchEvent($event, conditionItem, conditionIndex, advSearchObj.conditions)"
174
174
  />
175
175
  </dsh-form-unit>
176
176
 
@@ -201,7 +201,7 @@
201
201
  :list="canSearchFormList"
202
202
  :useSearch="true"
203
203
  trigger="click"
204
- @click="$dispatchEvent(operationMap.createCondition, false, $event, value.conditions)"
204
+ @click="$dispatchEvent(operationMap.createCondition, false, $event, advSearchObj.conditions)"
205
205
  >
206
206
  <dsh-buttons
207
207
  itemClass="DshAdvSearch-btns-item"
@@ -213,7 +213,7 @@
213
213
  <dsh-buttons
214
214
  class="DshAdvSearch-btns-loop"
215
215
  :list="$getOperationList(['createLoopContion'])"
216
- @click="$dispatchEvent($event, true, undefined, value.conditions)"
216
+ @click="$dispatchEvent($event, true, undefined, advSearchObj.conditions)"
217
217
  ></dsh-buttons>
218
218
  </div>
219
219
  </template>
package/src/components/form/searchMixin.js CHANGED
@@ -42,6 +42,10 @@ export default {
42
42
  return {
43
43
  fieldMap: this.$modFieldMap,
44
44
 
45
+ advSearchObj: {
46
+ logic: "and",
47
+ conditions: []
48
+ },
45
49
  selfLogicPropsObj: {
46
50
  _name: "筛选逻辑",
47
51
  _key: "logic",
@@ -79,7 +83,8 @@ export default {
79
83
  methods: {
80
84
  // 初始化
81
85
  init () {
82
- this.value.conditions = [...this.initFields, ...this.value.conditions].map(conditionItem => {
86
+ this.advSearchObj = this.$deepCopy(this.value);
87
+ this.advSearchObj.conditions = [...this.initFields, ...this.advSearchObj.conditions].map(conditionItem => {
83
88
  const newConditionItem = typeof conditionItem === "string"
84
89
  ? this.createContionFunc(undefined, undefined, conditionItem)
85
90
  : this.createContionFunc(conditionItem, undefined, conditionItem.fieldKey);
@@ -145,8 +150,8 @@ export default {
145
150
  // 发生改动
146
151
  change (operationType, conditionItem) {
147
152
  const advSearchObj = {
148
- ...this.value,
149
- conditions: this.transformConditions(this.value.conditions)
153
+ ...this.advSearchObj,
154
+ conditions: this.transformConditions(this.advSearchObj.conditions)
150
155
  };
151
156
  this.$emit("change", advSearchObj, operationType, conditionItem);
152
157
  },
package/src/components/list/DshBox/DshPanel.vue CHANGED
@@ -17,8 +17,7 @@
17
17
  <div
18
18
  class="DshPanel-group-header"
19
19
  :style="{
20
- backgroundColor: getBgColor(groupItem),
21
- color: '#ffffff'
20
+ 'border-color': getBgColor(groupItem)
22
21
  }"
23
22
  >
24
23
  <!-- 左 -->
@@ -30,46 +29,48 @@
30
29
  ></Checkbox>
31
30
 
32
31
  <!-- 左 -->
33
- <bri-tooltip
34
- class="header-left"
35
- :content="groupItem.name"
36
- placement="top"
37
- :transfer="true"
38
- >
39
- <span class="header-left-name">
40
- {{ groupItem.name }}
32
+ <div class="header-left">
33
+ <bri-tooltip
34
+ :content="groupItem.name"
35
+ placement="top"
36
+ :transfer="true"
37
+ class="header-left-tooltip"
38
+ >
39
+ <span class="header-left-name">
40
+ {{ groupItem.name }}
41
+ </span>
42
+ </bri-tooltip>
43
+ <span
44
+ class="header-left-num"
45
+ :style="{
46
+ 'color': getBgColor(groupItem)
47
+ }"
48
+ >
49
+ {{ groupItem.total }}
41
50
  </span>
42
- </bri-tooltip>
51
+ </div>
43
52
 
44
53
  <!-- 右 -->
45
54
  <span class="header-right">
46
- <span class="header-right-num">
47
- {{ groupItem.total }}
48
- </span>
49
- 条（已加载{{ groupItem.list.length }}条）
55
+ <dsh-buttons
56
+ :list="groupBtnOperationList"
57
+ @click="$dshEmit($event, { [groupField]: groupItem._key })"
58
+ ></dsh-buttons>
50
59
  </span>
51
60
  </div>
52
61
 
53
62
  <!-- 组 数据列 -->
54
63
  <div
55
64
  class="DshPanel-group-list"
56
- :style="{
57
- backgroundColor: $getColor(getBgColor(groupItem))
58
- }"
59
65
  >
60
66
  <div class="list">
61
- <!-- 提示语 -->
62
- <div
63
- v-if="!groupItem.list.length || !groupItem.finished"
64
- class="list-tip"
65
- :style="{
66
- color: getBgColor(groupItem),
67
- paddingTop: '5px',
68
- paddingBottom: '0px'
69
- }"
70
- >
71
- {{ getTip(groupItem) }}
72
- </div>
67
+ <!-- 空数据 -->
68
+ <bri-loading
69
+ v-if="!groupItem.list.length"
70
+ class="list-loading"
71
+ :value="2"
72
+ :noText="selfPropsObj.noDataText"
73
+ ></bri-loading>
73
74
 
74
75
  <CheckboxGroup
75
76
  class="list-drag"
@@ -97,39 +98,45 @@
97
98
  class="row-item"
98
99
  @click="clickRow(dataItem, dataIndex)"
99
100
  >
100
- <!-- 复选框 -->
101
- <Checkbox
102
- v-if="multiple"
103
- class="row-item-checkbox"
104
- :label="dataItem._id"
105
- @click.native.stop="clickRowCheckbox(dataItem)"
106
- >
107
- {{ "" }}
108
- </Checkbox>
109
-
110
- <!-- 下拉操作 -->
111
- <dsh-dropdown
112
- v-if="operationList.length"
113
- class="row-item-dropdown"
114
- :dropdownObj="dropdownObj"
115
- :list="operationList"
116
- @click="$dshEmit($event, dataItem, dataIndex)"
117
- @click.native.stop="0"
118
- ></dsh-dropdown>
119
-
101
+ <dsh-icons
102
+ class="row-item-move"
103
+ :list="[{
104
+ customIcon: 'bico-tuodong',
105
+ size: '14px'
106
+ }]"
107
+ ></dsh-icons>
120
108
  <!-- 内容 -->
121
109
  <div class="row-item-info">
122
- <!-- 标题 -->
123
- <bri-tooltip
124
- class="title"
125
- :content="dataItem[titleField]"
126
- placement="top"
127
- :transfer="true"
128
- >
129
- <div class="title-name">
130
- {{ dataItem[titleField] }}
131
- </div>
132
- </bri-tooltip>
110
+ <div class="title">
111
+ <!-- 复选框 -->
112
+ <Checkbox
113
+ v-if="multiple"
114
+ class="title-checkbox"
115
+ :label="dataItem._id"
116
+ @click.native.stop="clickRowCheckbox(dataItem)"
117
+ > {{ "" }}</Checkbox>
118
+
119
+ <!-- 标题 -->
120
+ <bri-tooltip
121
+ class="title-tooltip"
122
+ :content="dataItem[titleField]"
123
+ placement="top"
124
+ :transfer="true"
125
+ >
126
+ <div class="title-name">
127
+ {{ dataItem[titleField] }}
128
+ </div>
129
+ </bri-tooltip>
130
+ <!-- 下拉操作 -->
131
+ <dsh-dropdown
132
+ v-if="operationList.length"
133
+ class="title-dropdown"
134
+ :dropdownObj="dropdownObj"
135
+ :list="operationList"
136
+ @click="$dshEmit($event, dataItem, dataIndex)"
137
+ @click.native.stop="0"
138
+ ></dsh-dropdown>
139
+ </div>
133
140
 
134
141
  <!-- 显示字段 -->
135
142
  <div
@@ -137,44 +144,25 @@
137
144
  :key="colItem._key"
138
145
  class="unit"
139
146
  >
140
- <!-- 左 label -->
141
- <bri-tooltip
142
- class="unit-label-tooltip"
143
- :content="colItem._name"
144
- :transfer="true"
145
- >
146
- <div class="unit-label">
147
- <span class="unit-label-name">
148
- {{ colItem._name }}
149
- </span>
150
- <span class="unit-label-colon">
151
- ：
152
- </span>
153
- </div>
154
- </bri-tooltip>
147
+ <dsh-list-render
148
+ v-if="colItem.renderBodyCell"
149
+ :row="dataItem"
150
+ :column="colItem"
151
+ :index="0"
152
+ :render="colItem.renderBodyCell"
153
+ ></dsh-list-render>
155
154
 
156
- <!-- 右 val -->
157
- <div class="unit-control">
158
- <dsh-list-render
159
- v-if="colItem.renderBodyCell"
160
- :row="dataItem"
161
- :column="colItem"
162
- :index="0"
163
- :render="colItem.renderBodyCell"
164
- ></dsh-list-render>
165
-
166
- <div
167
- v-else-if="colItem.formatter"
168
- v-html="colItem.formatter(dataItem, 0)"
169
- ></div>
170
-
171
- <span
172
- v-else
173
- class="unit-control-text"
174
- >
175
- {{ dataItem[colItem._key] }}
176
- </span>
177
- </div>
155
+ <div
156
+ v-else-if="colItem.formatter"
157
+ v-html="colItem.formatter(dataItem, 0)"
158
+ ></div>
159
+
160
+ <span
161
+ v-else
162
+ class="unit-control-text"
163
+ >
164
+ {{ dataItem[colItem._key] }}
165
+ </span>
178
166
  </div>
179
167
  </div>
180
168
  </div>
@@ -184,10 +172,9 @@
184
172
 
185
173
  <!-- 提示语 -->
186
174
  <div
187
- v-if="groupItem.list.length && groupItem.finished"
175
+ v-if="groupItem.loading"
188
176
  class="list-tip"
189
177
  :style="{
190
- color: getBgColor(groupItem),
191
178
  paddingTop: '3px',
192
179
  paddingBottom: '5px'
193
180
  }"
@@ -195,13 +182,6 @@
195
182
  {{ getTip(groupItem) }}
196
183
  </div>
197
184
  </div>
198
-
199
- <!-- 组 操作按钮（添加） -->
200
- <dsh-buttons
201
- class="btns"
202
- :list="groupBtnOperationList"
203
- @click="$dshEmit($event, { [groupField]: groupItem._key })"
204
- ></dsh-buttons>
205
185
  </div>
206
186
  </div>
207
187
  </template>
@@ -280,7 +260,8 @@
280
260
  titleField: "",
281
261
  loadingText: "加载中，请稍等……",
282
262
  finishedText: "暂无更多数据！",
283
- noDataText: "暂无数据…",
263
+ noDataText: "暂无数据",
264
+ noDataImg: "https://apaas-static.oss-cn-beijing.aliyuncs.com/kongdata.png",
284
265
 
285
266
  ...this.propsObj
286
267
  };
@@ -321,7 +302,9 @@
321
302
  )
322
303
  .map(item => ({
323
304
  ...item,
324
- long: true
305
+ name: "",
306
+ btnType: "text",
307
+ size: "small"
325
308
  }));
326
309
  },
327
310
  dragOperationObj () {
@@ -452,46 +435,67 @@
452
435
  height: 100%;
453
436
  display: flex;
454
437
  flex-direction: row;
438
+ overflow: auto;
439
+ .bri-scrollbar6();
455
440
 
456
441
  &-group {
457
- width: 300px;
458
- min-width: 300px;
459
- max-width: 300px;
442
+ width: 254px;
443
+ min-width:254px;
444
+ max-width:254px;
460
445
  height: 100%;
461
- padding: 10px;
462
446
  overflow: hidden;
463
447
  display: flex;
464
448
  flex-direction: column;
449
+ background: #fff;
450
+ padding: 0 8px;
451
+
452
+ &:first-of-type {
453
+ padding-left: 0px;
454
+ }
455
+ &:last-of-type {
456
+ padding-right: 0px;
457
+ }
465
458
 
466
459
  &-header {
467
460
  width: 100%;
468
- height: 50px;
469
- padding: 15px 10px;
470
- border-radius: 10px 10px 0px 0px;
461
+ height: 34px;
462
+ padding-bottom: 10px;
463
+ margin-bottom: 8px;
471
464
  font-size: 14px;
465
+ border-bottom: 2px solid @themeColor;
472
466
  display: flex;
473
467
  justify-content: space-between;
468
+ align-items: center;
474
469
 
475
470
  .header {
476
- &-checkbox {
477
-
478
- }
479
-
480
471
  &-left {
481
472
  flex: 1;
482
473
  min-width: 0px;
474
+ display: flex;
475
+ &-tooltip {
476
+ max-width: calc(100% - 20px);
477
+ width: auto!important;
478
+ }
483
479
 
484
480
  &-name {
485
481
  .dsh-ellipsis();
482
+ font-size: 16px;
483
+ font-weight: 500;
484
+ line-height: 24px;
485
+ color: @textColor;
486
+ }
487
+
488
+ &-num {
489
+ color: @themeColor;
490
+ font-size: 16px;
491
+ font-weight: 500;
492
+ line-height: 24px;
493
+ margin-left: 8px;
486
494
  }
487
495
  }
488
496
 
489
497
  &-right {
490
498
  margin-left: 5px;
491
-
492
- &-num {
493
- font-weight: bold;
494
- }
495
499
  }
496
500
  }
497
501
  }
@@ -500,11 +504,12 @@
500
504
  width: 100%;
501
505
  flex: 1;
502
506
  min-height: 0px;
503
- border: 1px dashed #cccccc;
504
507
  border-top: none;
505
508
  display: flex;
506
509
  flex-direction: column;
507
510
  justify-content: space-between;
511
+ background: #f5f5f5;
512
+ border-radius: 4px;
508
513
 
509
514
  .list {
510
515
  width: 100%;
@@ -530,83 +535,67 @@
530
535
  height: 100%;
531
536
  padding: 8px;
532
537
  overflow: auto;
538
+ .bri-scrollbar6();
533
539
 
534
540
  .row-item {
535
- min-height: 60px;
541
+ min-height: 70px;
536
542
  margin-bottom: 8px;
537
543
  padding: 8px;
538
- border: 1px solid rgba(102, 110, 126, 0.1);
539
- // border-radius: 4px;
540
- // box-shadow: 0px 4px 8px 0px rgba(222, 222, 222, 0.75);
541
- background: #FFFFFF;
544
+ border-radius: 4px;
545
+ background: #fff;
546
+ border: 1px solid #fff;
542
547
  cursor: pointer;
543
548
  overflow: hidden;
544
549
  position: relative;
545
-
546
- &-checkbox {
547
- padding-right: 3px;
548
- padding-bottom: 3px;
549
- position: absolute;
550
- top: -2px;
551
- left: 0px;
550
+ &:hover {
551
+ border-color: @themeColor;
552
+ .row-item-move {
553
+ display: block;
554
+ }
552
555
  }
553
556
 
554
- &-dropdown {
557
+ &-move {
555
558
  position: absolute;
556
- top: 5px;
557
- right: 5px;
559
+ bottom: 0px;
560
+ right: 0px;
561
+ background: @themeColor;
562
+ color: #fff;
563
+ width: 16px;
564
+ height: 16px;
565
+ border-top-left-radius: 4px;
566
+ line-height: 14px;
567
+ text-align: center;
568
+ display: none;
558
569
  }
559
570
 
560
571
  &-info {
561
- background: #ffffff;
562
-
563
572
  .title {
564
- height: 24px;
565
- padding: 0px 18px 0px 10px;
566
- font-size: 14px;
567
- font-weight: 600;
568
-
573
+ display: flex;
574
+ align-items: center;
575
+ justify-content: space-around;
576
+ margin-bottom: 4px;
577
+ &-tooltip {
578
+ flex: 1;
579
+ width: auto;
580
+ white-space: nowrap;
581
+ overflow: hidden;
582
+ text-overflow: ellipsis;
583
+ }
569
584
  &-name {
570
585
  .dsh-ellipsis();
586
+ color: @textColor;
587
+ font-size: 14px;
588
+ line-height: 22px;
571
589
  }
572
- }
573
-
574
- .unit {
575
- display: flex;
576
- flex-direction: row;
577
- align-items: center;
578
590
 
579
- &-label {
580
- &-tooltip {
581
- width: auto;
582
- }
583
-
584
- font-weight: 400;
585
- color: #515A6E;
586
- display: flex;
587
- flex-direction: row;
588
- align-items: center;
589
-
590
- &-name {
591
- .dsh-ellipsis();
592
- display: inline-block;
593
- min-width: 29px;
594
- max-width: 71px;
595
- }
596
-
597
- &-colon {
598
-
599
- }
591
+ &-right {
592
+ margin-left: 4px;
593
+ color: @contentColor;
600
594
  }
595
+ }
601
596
 
602
- &-control {
603
- flex: 1;
604
- min-width: 0px;
605
-
606
- &-text {
597
+ .unit {
607
598
 
608
- }
609
- }
610
599
  }
611
600
  }
612
601
 
@@ -621,13 +610,12 @@
621
610
  #dsh-nodata-small();
622
611
  line-height: 16px;
623
612
  }
624
- }
625
613
 
626
- .btns {
627
- width: 100%;
628
- height: 40px;
629
- padding: 4px 8px;
630
- text-align: center;
614
+ &-loading {
615
+ background: #fff;
616
+ border: 1px solid @borderColor;
617
+ border-radius: 4px;
618
+ }
631
619
  }
632
620
  }
633
621
  }
@@ -637,30 +625,33 @@
637
625
  .DshPanel {
638
626
  &-group {
639
627
  &-header {
628
+ .ivu-tooltip-rel {
629
+ width: 100%;
630
+ }
640
631
  .ivu-checkbox-inner {
641
- border: 2px solid #ffffff;
642
- background-color: transparent;
632
+ outline: none;
633
+ box-shadow: none;
643
634
  }
644
635
 
645
- .ivu-checkbox-checked {
646
- .ivu-checkbox-inner:after {
647
- top: 1px;
648
- left: 4px;
636
+ .BriButton {
637
+ width: 24px;
638
+ padding: 0px;
639
+ color: @contentColor;
640
+ span {
641
+ display: none;
649
642
  }
650
643
  }
651
644
  }
652
645
 
653
646
  &-list {
654
- .ivu-checkbox-inner {
655
- border: none;
656
- // border-radius: 4px;
657
- box-shadow: 0px 1px 2px 0px rgba(222, 222, 222, 0.75);
658
- }
659
-
660
- .ivu-checkbox-checked {
661
- .ivu-checkbox-inner:after {
662
- top: 3px;
663
- left: 6px;
647
+ .list {
648
+ &-loading {
649
+ svg {
650
+ width: 70%;
651
+ }
652
+ }
653
+ .ivu-tooltip-rel {
654
+ width: 100%;
664
655
  }
665
656
  }
666
657
  }
package/src/styles/global/control.less CHANGED
@@ -6,24 +6,25 @@
6
6
  color: @textColor;
7
7
  cursor: pointer;
8
8
  }
9
+
9
10
  .bri-control-disabled {
10
11
  border: 1px solid @border-disabled;
11
12
  border-radius: @borderRadius;
12
13
  background: @inputBg-disabled;
13
14
  color: @textColor;
14
15
  cursor: not-allowed;
15
-
16
+
16
17
  &.bri-control-nodata {
17
18
  color: @placeholder-disabled-color;
18
19
  }
19
20
  }
21
+
20
22
  // .bri-control-readonly {
21
23
  // border: 1px solid @border-readonly;
22
24
  // border-radius: @borderRadius;
23
25
  // background: @inputBg-readonly;
24
26
  // color: @textColor-readonly;
25
27
  // cursor: not-allowed;
26
-
27
28
  // .ivu-icon {
28
29
  // color: @textColor-readonly;
29
30
  // }
@@ -37,6 +38,7 @@
37
38
  .dsh-ellipsis();
38
39
  }
39
40
  }
41
+
40
42
  .bri-control-unit {
41
43
  border: none;
42
44
  background-color: transparent;
@@ -56,7 +58,8 @@
56
58
  .bri-unit-show () {
57
59
  display: inline-block;
58
60
  max-width: 100%;
59
- padding: 2px 6px;
61
+ padding: 0px 6px;
62
+ line-height: 24px;
60
63
  border-radius: @borderRadius;
61
64
  background-color: @theme-focus;
62
65
  color: @themeColor;