bri-components 1.3.7 → 1.3.9

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 +164 -32
  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 () {
@@ -104,7 +112,7 @@
104
112
  ? (h) => {
105
113
  return h("div", {
106
114
  style: {
107
- padding: this.mode === "button" ? undefined : "0px 16px"
115
+ padding: ["button", "menu"].includes(this.mode) ? undefined : "0px 16px"
108
116
  }
109
117
  }, tabItem.name);
110
118
  }
@@ -203,6 +211,7 @@
203
211
  &-focused {
204
212
  color: @themeColor;
205
213
  background-color: #FFF;
214
+ font-weight: 500;
206
215
  }
207
216
  }
208
217
  }
@@ -371,46 +380,117 @@
371
380
  }
372
381
 
373
382
  // 按钮式、卡片式
374
- &-button,
375
- &-card {
376
- &.ivu-tabs.ivu-tabs-card {
377
- & > .ivu-tabs-bar {
383
+ &-button {
384
+ height: 32px;
385
+ &.ivu-tabs>.ivu-tabs-bar {
386
+ border: none;
387
+ margin-bottom: 0px;
388
+ height: 100%;
389
+
390
+ .ivu-tabs-tab {
391
+ height: 28px;
392
+ background-color: transparent;
393
+ color: @contentColor;
394
+ border-radius: 3px;
378
395
  border: none;
379
- margin-bottom: 0px;
396
+ margin: 2px;
397
+ padding: 3px 16px;
398
+ line-height: 22px;
380
399
 
381
- .ivu-tabs-nav-container {
382
- height: 33px;
400
+ &-active {
401
+ background-color: #fff;
402
+ color: @textColor;
383
403
  }
384
404
 
405
+ &:hover {
406
+ color: @textColor;
407
+ }
408
+ }
409
+
410
+ .ivu-tabs-ink-bar {
411
+ background-color: transparent;
412
+ }
413
+ }
414
+
415
+ .ivu-tabs-nav {
416
+ background-color: @borderColor;
417
+ border-radius: @borderRadius;
418
+ }
419
+
420
+ &-large {
421
+ height: 40px;
422
+ &.ivu-tabs > .ivu-tabs-bar {
423
+ .ivu-tabs-nav-container, .ivu-tabs-nav {
424
+ height: 40px;
425
+ }
385
426
  .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
- }
427
+ height: 36px;
428
+ font-size: 16px;
429
+ line-height: 24px;
430
+ padding: 6px 24px;
431
+ }
432
+ }
433
+ .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
434
+ line-height: 40px;
435
+ }
436
+ }
437
+ }
438
+
439
+ &-card {
440
+ height: 32px;
441
+ &.ivu-tabs > .ivu-tabs-bar {
442
+ border: none;
443
+ margin: 0px;
444
+ height: 100%;
445
+
446
+ .ivu-tabs-tab {
447
+ height: 28px;
448
+ background-color: transparent;
449
+ color: @contentColor;
450
+ border-radius: 3px;
451
+ border: none;
452
+ margin: 2px;
453
+ padding: 3px 16px;
454
+ line-height: 22px;
399
455
 
400
- &:hover {
401
- color: @textColor;
456
+ &-active {
457
+ background-color: @themeColor;
458
+ color: rgba(255,255,255,0.9);
459
+ &.ivu-tabs-tab:hover {
460
+ color: rgba(255,255,255,0.9);
402
461
  }
403
462
  }
404
463
 
405
- .ivu-tabs-ink-bar {
406
- background-color: transparent;
407
- display: none;
464
+ &:hover {
465
+ color: @textColor;
408
466
  }
409
467
  }
410
468
 
411
- .ivu-tabs-nav {
412
- background-color: @borderColor;
413
- border-radius: @borderRadius;
469
+ .ivu-tabs-ink-bar {
470
+ background-color: transparent;
471
+ }
472
+ }
473
+
474
+ .ivu-tabs-nav {
475
+ background-color: @borderColor;
476
+ border-radius: @borderRadius;
477
+ }
478
+
479
+ &-large {
480
+ height: 40px;
481
+ &.ivu-tabs > .ivu-tabs-bar {
482
+ .ivu-tabs-nav-container, .ivu-tabs-nav {
483
+ height: 40px;
484
+ }
485
+ .ivu-tabs-tab {
486
+ height: 36px;
487
+ font-size: 16px;
488
+ line-height: 24px;
489
+ padding: 6px 24px;
490
+ }
491
+ }
492
+ .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
493
+ line-height: 40px;
414
494
  }
415
495
  }
416
496
  }
@@ -447,7 +527,6 @@
447
527
  }
448
528
 
449
529
  .ivu-tabs-tab {
450
- // margin-right: 0px;
451
530
 
452
531
  &-active,
453
532
  &-focused {
@@ -462,5 +541,58 @@
462
541
  }
463
542
  }
464
543
  }
544
+
545
+ // menu
546
+ &-menu {
547
+ transform: translateY(4px);
548
+ &.ivu-tabs > .ivu-tabs-bar {
549
+ border: none;
550
+ margin: 0px;
551
+
552
+ .ivu-tabs-tab {
553
+ position: relative;
554
+ height: 32px;
555
+ color: @contentColor;
556
+ font-size: 16px;
557
+ line-height: 24px;
558
+ padding: 0 0px 8px 0px;
559
+ margin-right: 24px;
560
+
561
+ &:after {
562
+ content: " ";
563
+ display: flex;
564
+ width: 32px;
565
+ height: 2px;
566
+ background: transparent;
567
+ position: absolute;
568
+ left: calc(50% - 16px);
569
+ bottom: 2px;
570
+ }
571
+
572
+ &-active {
573
+ color: @textColor;
574
+ font-weight: 500;
575
+ &:after {
576
+ background: @themeColor;
577
+ }
578
+ }
579
+
580
+ &:hover {
581
+ color: @textColor;
582
+ }
583
+
584
+ &:last-of-type {
585
+ margin-right: 0px;
586
+ }
587
+ }
588
+
589
+ .ivu-tabs-ink-bar {
590
+ display: none;
591
+ }
592
+ .ivu-tabs-nav-prev, .ivu-tabs-nav-next {
593
+ line-height: 24px;
594
+ }
595
+ }
596
+ }
465
597
  }
466
598
  </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