bri-components 1.3.7 → 1.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/package.json +1 -1
  2. package/src/components/controls/senior/flatTable.vue +1 -0
  3. package/src/components/controls/senior/selectUsers/selectUsers.vue +46 -1
  4. package/src/components/list/BriFlatTable.vue +87 -170
  5. package/src/components/list/DshBox/DshList.vue +122 -0
  6. package/src/components/list/DshBox/DshTable.vue +11 -4
  7. package/src/components/list/DshCascaderTable.vue +105 -118
  8. package/src/components/small/DshTabs.vue +161 -36
  9. package/src/styles/components/index.less +0 -2
  10. package/src/styles/components/list/BriTable.less +96 -68
  11. package/src/utils/table.js +140 -82
  12. package/src/styles/components/list/DshBox/DshList.less +0 -119
  13. package/src/styles/components/list/DshBox/DshTable.less +0 -23
package/src/components/list/DshCascaderTable.vue CHANGED
@@ -7,7 +7,12 @@
7
7
  'DshCascaderTable-wrap': true,
8
8
  'DshCascaderTable-readonly': !canEdit
9
9
  }">
10
- <div class="DshCascaderTable-wrap-center">
10
+ <div
11
+ class="DshCascaderTable-wrap-center"
12
+ :style="{
13
+ maxHeight: `${contentHeight}px`
14
+ }"
15
+ >
11
16
  <!-- 表头 -->
12
17
  <div class="DshCascaderTable-wrap-center-top">
13
18
  <div class="DshCascaderTable-wrap-center-top-inner">
@@ -22,17 +27,11 @@
22
27
  <th
23
28
  v-for="(col, colIndex) in columns"
24
29
  :key="col._id"
25
- class="th-tree"
26
- :style="getThStyle(col)"
30
+ class="table-col-th bri-table-th"
31
+ :style="getThStyle(col, 'th')"
27
32
  @click="$dispatchEvent(operationMap.clickTh, col)"
28
33
  >
29
- <span class="th-tree-name">
30
- <i
31
- v-if="col._required"
32
- class="th-tree-name-icon"
33
- >*</i>
34
- {{ col._name }}
35
- </span>
34
+ <dsh-render :render="getHeaderRender(col)"></dsh-render>
36
35
 
37
36
  <!-- 级联表头 的下拉 -->
38
37
  <dsh-dropdown
@@ -42,8 +41,8 @@
42
41
  col.level === treeColumns.length &&
43
42
  $getOperationList(getColOperationNames(col)).length
44
43
  "
45
- class="th-tree-dropdown"
46
- menuClass="th-tree-dropdown-list"
44
+ class="table-col-th-dropdown"
45
+ menuClass="table-col-th-dropdown-list"
47
46
  trigger="hover"
48
47
  :list="$getOperationList(getColOperationNames(col))"
49
48
  @click="$dispatchEvent($event, col, colIndex, columns)"
@@ -84,7 +83,7 @@
84
83
  <td
85
84
  v-if="['tree', 'summary'].includes(col.colType)"
86
85
  :key="col._key"
87
- :class="`td-${col.colType}`"
86
+ :class="`bri-table-td table-row-${col.colType}`"
88
87
  :style="getTdStyle(col, row)"
89
88
  :rowspan="geTdRowspan(col, row)"
90
89
  :colspan="geTdColspan(col, row)"
@@ -116,8 +115,8 @@
116
115
  <!-- 操作下拉 -->
117
116
  <dsh-dropdown
118
117
  v-if="$getOperationList(getNodeOperationNames(col, row, row[col._key])).length"
119
- class="td-tree-dropdown"
120
- menuClass="td-tree-dropdown-list"
118
+ class="table-row-tree-dropdown"
119
+ menuClass="table-row-tree-dropdown-list"
121
120
  trigger="hover"
122
121
  :list="$getOperationList(getNodeOperationNames(col, row, row[col._key]))"
123
122
  @click="$dispatchEvent($event, row, rowIndex, col)"
@@ -143,7 +142,7 @@
143
142
  <td
144
143
  v-else
145
144
  :key="col._key + ''"
146
- class="table-row-td"
145
+ class="bri-table-td"
147
146
  :style="getTdStyle(col, row)"
148
147
  >
149
148
  <dsh-list-unit
@@ -160,7 +159,7 @@
160
159
 
161
160
  <span
162
161
  v-if="!getRuleResult(col, row[col.nodeKey], rowIndex).bool"
163
- class="table-row-td-tip"
162
+ class="bri-table-td-tip"
164
163
  >
165
164
  {{ getRuleResult(col, row[col.nodeKey], rowIndex).message }}
166
165
  </span>
@@ -338,35 +337,55 @@
338
337
  };
339
338
  },
340
339
  computed: {
341
- treeData () {
342
- return this.transforBriTreeData();
343
- },
344
- rows () {
345
- return this.transformRows();
346
- },
347
- // 供表格渲染行使用的columns的数组集合, 每一行columns不一样，组成二重数组
348
- rowColumnsArr () {
349
- return this.transformRowColumnsArr();
350
- },
351
-
352
340
  selfPropsObj () {
353
341
  return {
342
+ isShare: false, // 是否是分享页在用
343
+
344
+ _showRequired: true, // 表头显示校验符号*
345
+ _showDescription: true, // 表头显示提示
346
+ _headHeightAuto: false, // 表头高度自适应
347
+ _heightAuto: false, // 单元格高度自适应
354
348
  _disabledBtns: false, // 禁用增删按钮
355
- _heightAuto: false, // 单元格内容高度自适应
349
+ ...this.propsObj,
356
350
 
357
- ...this.propsObj
351
+ _contentHeight: this.propsObj._contentHeight || 500 // 表格最大高度
358
352
  };
359
353
  },
360
- disabledBtns () {
361
- return this.selfPropsObj._disabledBtns;
354
+ isShare () {
355
+ return this.selfPropsObj.isShare;
356
+ },
357
+ contentHeight () {
358
+ return this.selfPropsObj._contentHeight;
359
+ },
360
+ showRequired () {
361
+ return this.selfPropsObj._showRequired;
362
+ },
363
+ showDescription () {
364
+ return this.selfPropsObj._showDescription;
365
+ },
366
+ headHeightAuto () {
367
+ return this.selfPropsObj._headHeightAuto;
362
368
  },
363
369
  heightAuto () {
364
370
  return this.selfPropsObj._heightAuto;
365
371
  },
372
+ disabledBtns () {
373
+ return this.selfPropsObj._disabledBtns;
374
+ },
366
375
 
367
376
  columns () {
368
377
  return this.transformColumns(this.treeColumns);
369
378
  },
379
+ treeData () {
380
+ return this.transforBriTreeData();
381
+ },
382
+ rows () {
383
+ return this.transformRows();
384
+ },
385
+ // 供表格渲染行使用的columns的数组集合, 每一行columns不一样，组成二重数组
386
+ rowColumnsArr () {
387
+ return this.transformRowColumnsArr();
388
+ },
370
389
 
371
390
  operationMap () {
372
391
  return this.canEdit
@@ -765,6 +784,15 @@
765
784
  },
766
785
 
767
786
  /* ----- 模板获值方法 ---- */
787
+ getHeaderRender (column) {
788
+ return (h) => {
789
+ return this.$getHeadRender(h, column, {
790
+ showRequired: this.showRequired,
791
+ showDescription: this.showDescription,
792
+ headHeightAuto: this.headHeightAuto
793
+ });
794
+ };
795
+ },
768
796
  getSummaryVal (col, row) {
769
797
  if (col._calField && col._operator) {
770
798
  const calFieldFormItem = this.subColumns.find(item => item._key === col._calField);
@@ -794,21 +822,20 @@
794
822
  : "未选择算法";
795
823
  }
796
824
  },
797
- getThStyle (col) {
825
+ getThStyle (col, position) {
798
826
  const boxColWidth = this.boxWidth / this.columns.length;
799
827
  const defaultWidth = Math.max(boxColWidth, this.widthMap[col._type], (col._name ? col._name.length * 14 : 36) + (col._type === "reference" ? 200 : 26));
800
828
  const width = col._width || defaultWidth;
801
829
 
802
830
  const selfStyle = col.colType === "tree"
803
831
  ? {
804
- backgroundColor: "f0f0f0",
805
832
  textAlign: col._align || "left",
806
833
  fontSize: "14px"
807
834
  }
808
835
  : col.colType === "summary"
809
836
  ? {
810
- backgroundColor: "#eeeeee",
811
- textAlign: "right"
837
+ // backgroundColor: "#eeeeee",
838
+ textAlign: col._align || "right"
812
839
  }
813
840
  : {
814
841
  textAlign: col._align || "left"
@@ -818,7 +845,8 @@
818
845
  width: `${width}px`,
819
846
  minWidth: `${width}px`,
820
847
  maxWidth: `${width}px`,
821
- padding: "5px 12px",
848
+ paddingTop: position === "th" && !this.headHeightAuto ? "10px" : undefined,
849
+ paddingBottom: position === "th" && !this.headHeightAuto ? "10px" : undefined,
822
850
  "word-break": "break-all",
823
851
  cursor: "pointer",
824
852
  ...selfStyle
@@ -867,41 +895,10 @@
867
895
  &-center {
868
896
  width: 100%;
869
897
  height: 100%;
870
- max-height: 600px;
871
898
  margin-left: 0px;
872
899
  margin-right: 0px;
873
- position: relative;
874
900
  display: flex;
875
-
876
- &-top {
877
- width: 100%;
878
- height: 48px;
879
- overflow: hidden;
880
- position: absolute;
881
- top: 0px;
882
- left: 0px;
883
- z-index: 99;
884
-
885
- &-inner {
886
- display: block;
887
- float: left;
888
- width: 10000px;
889
-
890
- .table {
891
- background-color: #f0f0f0;
892
- }
893
- }
894
- }
895
-
896
- &-list {
897
- width: 100%;
898
- flex: 1;
899
- min-height: 0px;
900
- margin-top: 47px;
901
- overflow: auto;
902
-
903
- &-inner {}
904
- }
901
+ flex-direction: column;
905
902
 
906
903
  .table {
907
904
  border-spacing: 0;
@@ -909,41 +906,8 @@
909
906
  border-color: #E5E5E5;
910
907
  line-height: 18px;
911
908
 
912
- &-col {
913
- height: 40px;
914
- }
915
-
916
- &-row {
917
- .textarea {
918
- .ivu-input {
919
- min-height: 18px;
920
- padding: 0px;
921
- border: none;
922
- background-color: transparent;
923
- box-shadow: none;
924
- line-height: 18px;
925
- }
926
- }
927
-
928
- &-td {
929
- position: relative;
930
-
931
- &-tip {
932
- padding: 2px 5px 2px 14px;
933
- font-size: 12px;
934
- line-height: 1;
935
- color: #ed4014;
936
- position: absolute;
937
- top: calc(100% -15px);
938
- left: 0px;
939
- }
940
- }
941
- }
942
-
943
- .th-tree,
944
- .td-tree {
945
- position: relative;
946
-
909
+ &-col-th,
910
+ &-row-tree {
947
911
  &-dropdown {
948
912
  position: absolute;
949
913
  right: 0px;
@@ -963,27 +927,26 @@
963
927
  }
964
928
 
965
929
  &:hover {
966
- .th-tree-dropdown,
967
- .td-tree-dropdown {
930
+ .table-col-th-dropdown,
931
+ .table-row-tree-dropdown {
968
932
  display: inline-block;
969
933
  }
970
934
  }
971
935
  }
972
936
 
973
- // 表头
974
- .th-tree {
975
- // .dsh-ellipsis2();
976
- // line-height: 16px;
977
- // display: table-cell;
937
+ &-col {
978
938
 
979
- &-name {
980
- position: relative;
939
+ }
981
940
 
982
- &-icon {
983
- position: absolute;
984
- top: 0px;
985
- left: -10px;
986
- color: red;
941
+ &-row {
942
+ .textarea {
943
+ .ivu-input {
944
+ min-height: 18px;
945
+ padding: 0px;
946
+ border: none;
947
+ background-color: transparent;
948
+ box-shadow: none;
949
+ line-height: 18px;
987
950
  }
988
951
  }
989
952
  }
@@ -993,6 +956,30 @@
993
956
  text-align: center;
994
957
  }
995
958
  }
959
+
960
+ &-top {
961
+ width: 100%;
962
+ z-index: 99;
963
+ overflow: hidden;
964
+
965
+ &-inner {
966
+ display: block;
967
+ float: left;
968
+ width: 10000px;
969
+ }
970
+ }
971
+
972
+ &-list {
973
+ width: 100%;
974
+ flex: 1;
975
+ min-height: 0px;
976
+ margin-top: -1px;
977
+ overflow: auto;
978
+
979
+ &-inner {
980
+
981
+ }
982
+ }
996
983
  }
997
984
  }
998
985
  }
package/src/components/small/DshTabs.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <Tabs
3
- :class="['DshTabs', `DshTabs-${mode}`]"
3
+ :class="['DshTabs', `DshTabs-${mode}`, `DshTabs-${mode}-${size}`]"
4
4
  v-model="curTabKey"
5
5
  :type="['button', 'card'].includes(mode) ? 'card' : undefined"
6
6
  :animated="false"
@@ -11,6 +11,7 @@
11
11
  class="DshTabs-item"
12
12
  :name="tabItem[keyField]"
13
13
  :label="getLabel(tabItem)"
14
+ :size="size"
14
15
  >
15
16
  <slot
16
17
  v-if="renderStatusMap[tabItem[keyField]]"
@@ -51,7 +52,7 @@
51
52
  type: String,
52
53
  default: "creative",
53
54
  validator (val) {
54
- return ["creative", "tradition", "page", "button", "card", "line"].includes(val);
55
+ return ["creative", "tradition", "page", "button", "card", "line", "menu"].includes(val);
55
56
  }
56
57
  },
57
58
  keyField: {
@@ -63,6 +64,13 @@
63
64
  default () {
64
65
  return [];
65
66
  }
67
+ },
68
+ size: {
69
+ type: String,
70
+ default: "default",
71
+ validator (val) {
72
+ return ["default", "small", "large"].includes(val);
73
+ }
66
74
  }
67
75
  },
68
76
  data () {
@@ -103,9 +111,6 @@
103
111
  return tabItem.slot !== "extra"
104
112
  ? (h) => {
105
113
  return h("div", {
106
- style: {
107
- padding: this.mode === "button" ? undefined : "0px 16px"
108
- }
109
114
  }, tabItem.name);
110
115
  }
111
116
  : undefined;
@@ -191,7 +196,7 @@
191
196
  .ivu-tabs-tab {
192
197
  // display: inline-block;
193
198
  // height: 44px;
194
- padding: 0px!important;
199
+ padding: 0px 16px!important;
195
200
  margin-right: 1px!important;
196
201
  // background-color: #E5E5E5;
197
202
  text-align: center;
@@ -203,6 +208,7 @@
203
208
  &-focused {
204
209
  color: @themeColor;
205
210
  background-color: #FFF;
211
+ font-weight: 500;
206
212
  }
207
213
  }
208
214
  }
@@ -332,7 +338,7 @@
332
338
  .ivu-tabs-tab {
333
339
  display: inline-block;
334
340
  height: 40px;
335
- padding: 0px!important;
341
+ padding: 0px 16px!important;
336
342
  margin-right: 1px!important;
337
343
  background-color: #E5E5E5;
338
344
  text-align: center;
@@ -371,46 +377,117 @@
371
377
  }
372
378
 
373
379
  // 按钮式、卡片式
374
- &-button,
375
- &-card {
376
- &.ivu-tabs.ivu-tabs-card {
377
- & > .ivu-tabs-bar {
380
+ &-button {
381
+ height: 32px;
382
+ &.ivu-tabs>.ivu-tabs-bar {
383
+ border: none;
384
+ margin-bottom: 0px;
385
+ height: 100%;
386
+
387
+ .ivu-tabs-tab {
388
+ height: 28px;
389
+ background-color: transparent;
390
+ color: @contentColor;
391
+ border-radius: 3px;
378
392
  border: none;
379
- margin-bottom: 0px;
393
+ margin: 2px;
394
+ padding: 3px 16px;
395
+ line-height: 22px;
380
396
 
381
- .ivu-tabs-nav-container {
382
- height: 33px;
397
+ &-active {
398
+ background-color: #fff;
399
+ color: @textColor;
400
+ }
401
+
402
+ &:hover {
403
+ color: @textColor;
383
404
  }
405
+ }
406
+
407
+ .ivu-tabs-ink-bar {
408
+ background-color: transparent;
409
+ }
410
+ }
411
+
412
+ .ivu-tabs-nav {
413
+ background-color: @borderColor;
414
+ border-radius: @borderRadius;
415
+ }
384
416
 
417
+ &-large {
418
+ height: 40px;
419
+ &.ivu-tabs > .ivu-tabs-bar {
420
+ .ivu-tabs-nav-container, .ivu-tabs-nav {
421
+ height: 40px;
422
+ }
385
423
  .ivu-tabs-tab {
386
- height: 28px;
387
- background-color: transparent;
388
- color: @contentColor;
389
- border-radius: 4px;
390
- border: none;
391
- margin: 2px;
392
- padding: 3px 16px;
393
- line-height: 22px;
394
-
395
- &-active {
396
- background-color: #fff;
397
- color: @textColor;
398
- }
424
+ height: 36px;
425
+ font-size: 16px;
426
+ line-height: 24px;
427
+ padding: 6px 24px;
428
+ }
429
+ }
430
+ .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
431
+ line-height: 40px;
432
+ }
433
+ }
434
+ }
435
+
436
+ &-card {
437
+ height: 32px;
438
+ &.ivu-tabs > .ivu-tabs-bar {
439
+ border: none;
440
+ margin: 0px;
441
+ height: 100%;
442
+
443
+ .ivu-tabs-tab {
444
+ height: 28px;
445
+ background-color: transparent;
446
+ color: @contentColor;
447
+ border-radius: 3px;
448
+ border: none;
449
+ margin: 2px;
450
+ padding: 3px 16px;
451
+ line-height: 22px;
399
452
 
400
- &:hover {
401
- color: @textColor;
453
+ &-active {
454
+ background-color: @themeColor;
455
+ color: rgba(255,255,255,0.9);
456
+ &.ivu-tabs-tab:hover {
457
+ color: rgba(255,255,255,0.9);
402
458
  }
403
459
  }
404
460
 
405
- .ivu-tabs-ink-bar {
406
- background-color: transparent;
407
- display: none;
461
+ &:hover {
462
+ color: @textColor;
408
463
  }
409
464
  }
410
465
 
411
- .ivu-tabs-nav {
412
- background-color: @borderColor;
413
- border-radius: @borderRadius;
466
+ .ivu-tabs-ink-bar {
467
+ background-color: transparent;
468
+ }
469
+ }
470
+
471
+ .ivu-tabs-nav {
472
+ background-color: @borderColor;
473
+ border-radius: @borderRadius;
474
+ }
475
+
476
+ &-large {
477
+ height: 40px;
478
+ &.ivu-tabs > .ivu-tabs-bar {
479
+ .ivu-tabs-nav-container, .ivu-tabs-nav {
480
+ height: 40px;
481
+ }
482
+ .ivu-tabs-tab {
483
+ height: 36px;
484
+ font-size: 16px;
485
+ line-height: 24px;
486
+ padding: 6px 24px;
487
+ }
488
+ }
489
+ .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
490
+ line-height: 40px;
414
491
  }
415
492
  }
416
493
  }
@@ -447,7 +524,6 @@
447
524
  }
448
525
 
449
526
  .ivu-tabs-tab {
450
- // margin-right: 0px;
451
527
 
452
528
  &-active,
453
529
  &-focused {
@@ -462,5 +538,54 @@
462
538
  }
463
539
  }
464
540
  }
541
+
542
+ // menu
543
+ &-menu {
544
+ transform: translateY(4px);
545
+ &.ivu-tabs > .ivu-tabs-bar {
546
+ border: none;
547
+ margin: 0px;
548
+
549
+ .ivu-tabs-tab {
550
+ position: relative;
551
+ height: 32px;
552
+ color: @contentColor;
553
+ font-size: 16px;
554
+ line-height: 24px;
555
+ padding: 0 0px 8px 0px;
556
+ margin-right: 24px;
557
+
558
+ &:after {
559
+ content: " ";
560
+ display: flex;
561
+ width: 32px;
562
+ height: 2px;
563
+ background: transparent;
564
+ position: absolute;
565
+ left: calc(50% - 16px);
566
+ bottom: 2px;
567
+ }
568
+
569
+ &-active {
570
+ color: @textColor;
571
+ font-weight: 500;
572
+ &:after {
573
+ background: @themeColor;
574
+ }
575
+ }
576
+
577
+ &:hover {
578
+ color: @textColor;
579
+ }
580
+ }
581
+
582
+ .ivu-tabs-ink-bar {
583
+ display: none;
584
+ }
585
+ .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
586
+ line-height: 24px;
587
+ }
588
+ }
589
+ }
465
590
  }
466
591
  </style>
package/src/styles/components/index.less CHANGED
@@ -1,6 +1,4 @@
1
1
  // list
2
- @import "./list/DshBox/DshTable.less";
3
- @import "./list/DshBox/DshList.less";
4
2
  @import "./list/BriTable.less";
5
3
  @import "./list/DshPage.less";
6
4