bri-components 1.2.96 → 1.2.98

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.2.96",
3
+ "version": "1.2.98",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
@@ -37,6 +37,7 @@
37
37
  ></dsh-buttons>
38
38
 
39
39
  <dsh-cascader-table
40
+ ref="dshCascaderTable"
40
41
  useCol
41
42
  :canEdit="finalCanEdit"
42
43
  :treeColumns="treeColumns"
@@ -134,6 +135,11 @@
134
135
  },
135
136
  created () {},
136
137
  methods: {
138
+ // 校验方法 -供外部使用
139
+ validate () {
140
+ return this.$refs.dshCascaderTable.validate();
141
+ },
142
+
137
143
  // 点击导出
138
144
  clickExport (operationItem) {
139
145
  operationItem.disabled = true;
@@ -433,3 +433,86 @@
433
433
  }
434
434
  };
435
435
  </script>
436
+
437
+ <style lang="less">
438
+ .BriFlatTable {
439
+ &-main {
440
+ width: 100%;
441
+ height: auto;
442
+
443
+ .table {
444
+ width: 100%;
445
+ border-spacing: 0;
446
+ border-collapse: collapse;
447
+ border-color: #E5E5E5;
448
+ background-color: #fff;
449
+
450
+ &-head {
451
+ background-color: #f0f0f0;
452
+ color: #666;
453
+
454
+ &-description {
455
+ color: #828499;
456
+ }
457
+ }
458
+
459
+ &-row {
460
+ height: 50px;
461
+
462
+ &:hover {
463
+ .table-row-td-add {
464
+ display: inline-block;
465
+ }
466
+ }
467
+
468
+ &-td {
469
+ position: relative;
470
+
471
+ .td-inner {
472
+ &-compare {
473
+ width: 100%;
474
+ }
475
+ }
476
+
477
+ &-tip {
478
+ padding: 2px 5px 0px 20px;
479
+ font-size: 12px;
480
+ line-height: 1;
481
+ color: #ed4014;
482
+ position: absolute;
483
+ top: calc(100% -15px);
484
+ left: 0px;
485
+ }
486
+
487
+ &-add {
488
+ line-height: 20px;
489
+ position: absolute;
490
+ bottom: 0px;
491
+ right: 0px;
492
+ display: none;
493
+ }
494
+ }
495
+
496
+ &-nodata {
497
+ width: 100%;
498
+ height: 40px;
499
+ text-align: center;
500
+ }
501
+ }
502
+
503
+ tbody {
504
+ // display: block;
505
+ // overflow-y: scroll;
506
+ }
507
+
508
+ thead {
509
+ // display: block;
510
+ }
511
+ }
512
+ }
513
+
514
+ &-create {
515
+ margin-top: 8px;
516
+ }
517
+ }
518
+ </style>
@@ -635,3 +635,186 @@
635
635
  }
636
636
  };
637
637
  </script>
638
+
639
+ <style lang="less">
640
+ .DshCrossTable {
641
+ width: 100%;
642
+ height: 100%;
643
+ display: flex;
644
+ flex-direction: row;
645
+
646
+ &-left,
647
+ &-right {
648
+ border-top: 1px solid #eeeeee;
649
+ border-bottom: 1px solid #eeeeee;
650
+ overflow: hidden;
651
+ display: flex;
652
+ flex-direction: column;
653
+
654
+ &-header {
655
+ width: 100%;
656
+ }
657
+
658
+ &-body {
659
+ width: 100%;
660
+ flex: 1;
661
+ min-height: 0px;
662
+ overflow: scroll;
663
+ }
664
+
665
+ &-footer {
666
+ width: 100%;
667
+ height: 38px;
668
+ }
669
+ }
670
+
671
+ &-left {
672
+ width: 160px;
673
+ height: 100%;
674
+ border-left: 1px solid #eeeeee;
675
+ border-right: 1px solid #eeeeee;
676
+ // background: #F7F9FD;
677
+ z-index: 2;
678
+
679
+ &-header {
680
+ overflow: hidden;
681
+ }
682
+
683
+ &-body {
684
+ overflow: hidden;
685
+ }
686
+
687
+ &-footer {
688
+ overflow: hidden;
689
+ }
690
+ }
691
+
692
+ &-right {
693
+ flex: 1;
694
+ min-width: 0px;
695
+ height: 100%;
696
+ border-right: 1px solid #eeeeee;
697
+
698
+ &-header {
699
+ overflow: hidden;
700
+ }
701
+
702
+ &-body {
703
+ overflow: scroll;
704
+ }
705
+
706
+ &-footer {
707
+ overflow: hidden;
708
+ }
709
+ }
710
+
711
+ &-row {
712
+ // height: 40px;
713
+ }
714
+
715
+ &-col {
716
+ font-weight: bold;
717
+ color: #5D5D5D;
718
+
719
+ &-checkbox,
720
+ &-index,
721
+ &-operation {}
722
+
723
+ &-Checkbox {}
724
+
725
+ &-index {}
726
+
727
+ &-content {
728
+ .crossTable-col {
729
+ width: 100%;
730
+ .dsh-flex-row-center-center();
731
+
732
+ &-title {
733
+ flex: 1;
734
+ min-width: 0px;
735
+ height: 100%;
736
+ .dsh-ellipsis();
737
+ }
738
+
739
+ &-sign {
740
+ #dsh-sign-change();
741
+ }
742
+ }
743
+ }
744
+
745
+ &-operation {}
746
+ }
747
+
748
+ &-td {
749
+
750
+ &-checkbox,
751
+ &-index,
752
+ &-operation {}
753
+
754
+ &-Checkbox {}
755
+
756
+ &-index {}
757
+
758
+ &-content {}
759
+
760
+ &-operation {}
761
+ }
762
+
763
+ table {
764
+ width: 100%;
765
+
766
+ tr {
767
+ height: 39px;
768
+ font-size: 12px;
769
+ overflow: hidden;
770
+
771
+ td {
772
+ display: inline-block;
773
+ width: 200px;
774
+ height: 40px;
775
+ line-height: 40px;
776
+ padding: 0 10px;
777
+ border-right: 1px solid #EDEDED;
778
+ border-bottom: 1px solid #EDEDED;
779
+ cursor: pointer;
780
+ overflow: hidden;
781
+
782
+ .td-content {
783
+ width: 100%;
784
+ height: 100%;
785
+ padding: 8px 0px;
786
+ line-height: 22px;
787
+ vertical-align: middle;
788
+ }
789
+ }
790
+ }
791
+ }
792
+
793
+ .cross-table-box {
794
+ height: 38px;
795
+ padding: 7px 0;
796
+
797
+ &-content {
798
+ width: auto;
799
+ border-radius: 2px;
800
+ border: 1px solid #6daef2;
801
+ font-size: 12px !important;
802
+ color: #6DAEF2;
803
+ cursor: pointer;
804
+ height: 24px;
805
+ display: inline-block;
806
+ line-height: 24px;
807
+ padding: 0 5px;
808
+ overflow: hidden;
809
+ word-break: keep-all;
810
+ white-space: nowrap;
811
+ text-overflow: ellipsis;
812
+
813
+ i {
814
+ margin-right: 5px;
815
+ font-size: 12px !important;
816
+ }
817
+ }
818
+ }
819
+ }
820
+ </style>
@@ -143,6 +143,7 @@
143
143
  <td
144
144
  v-else
145
145
  :key="col._key + ''"
146
+ class="table-row-td"
146
147
  :style="getTdStyle(col, row)"
147
148
  >
148
149
  <dsh-list-unit
@@ -153,8 +154,16 @@
153
154
  ...col,
154
155
  _heightAuto: true
155
156
  }"
156
- @change="$dispatchEvent(operationMap.changeVal, col, row, arguments)"
157
+ @blur="controlBlur(null, col, row[col.nodeKey], arguments)"
158
+ @change="$dispatchEvent(operationMap.changeVal, col, row[col.nodeKey], arguments)"
157
159
  ></dsh-list-unit>
160
+
161
+ <span
162
+ v-if="!getRuleResult(col, row[col.nodeKey], rowIndex).bool"
163
+ class="table-row-td-tip"
164
+ >
165
+ {{ getRuleResult(col, row[col.nodeKey], rowIndex).message }}
166
+ </span>
158
167
  </td>
159
168
  </template>
160
169
  </tr>
@@ -227,6 +236,9 @@
227
236
  },
228
237
  data () {
229
238
  return {
239
+ showRuleMessage: false, // 显示校验文字
240
+ ruleRecordMap: {},
241
+
230
242
  widthMap: this.$getModFieldPropertyMap("width"),
231
243
  boxWidth: 0,
232
244
  getColOperationNames (col) {
@@ -395,6 +407,14 @@
395
407
  };
396
408
  loop(this.data.tree);
397
409
  },
410
+ // 共外部使用
411
+ validate () {
412
+ this.showRuleMessage = true;
413
+
414
+ return this.rows.every((row, rowIndex) =>
415
+ this.subColumns.every(col => this.getRuleResult(col, row, rowIndex, true).bool)
416
+ );
417
+ },
398
418
 
399
419
  // 点击表头
400
420
  clickTh (operationItem, col) {
@@ -509,8 +529,34 @@
509
529
  },
510
530
  // 输入框值改变
511
531
  changeVal (operationItem, col, row, params) {
532
+ this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
512
533
  this.change("changeVal", col, row, params);
513
534
  },
535
+ // 表单控件失去焦点
536
+ controlBlur (operationItem, col, row, params) {
537
+ this.$set(this.ruleRecordMap, `${row._id}dsh${col._key}`, { showRuleMessage: true });
538
+ },
539
+ // 是否显示 单元格校验提示文字
540
+ getRuleResult (col, row, rowIndex, showRuleMessage = this.showRuleMessage) {
541
+ if ((this.ruleRecordMap[`${row._id}dsh${col._key}`] || {}).showRuleMessage || showRuleMessage) {
542
+ if (col._regStr && [";", ";"].some(symbol => col._regStr.includes(symbol))) {
543
+ col._regStr = col._regStr
544
+ .replace(/\n/g, "")
545
+ .split(";")
546
+ .reduce((arr, item) => arr.concat(item.split(";")), [])[rowIndex];
547
+ col._regMessage = (col._regMessage || "")
548
+ .replace(/\n/g, "")
549
+ .split(";")
550
+ .reduce((arr, item) => arr.concat(item.split(";")), [])[rowIndex];
551
+ }
552
+
553
+ return this.$getFieldRuleResult(col, row);
554
+ } else {
555
+ return {
556
+ bool: true
557
+ };
558
+ }
559
+ },
514
560
 
515
561
  /* ---- 工具方法 ---- */
516
562
  // 合并表头
@@ -868,6 +914,20 @@
868
914
  line-height: 18px;
869
915
  }
870
916
  }
917
+
918
+ &-td {
919
+ position: relative;
920
+
921
+ &-tip {
922
+ padding: 2px 5px 2px 14px;
923
+ font-size: 12px;
924
+ line-height: 1;
925
+ color: #ed4014;
926
+ position: absolute;
927
+ top: calc(100% -15px);
928
+ left: 0px;
929
+ }
930
+ }
871
931
  }
872
932
 
873
933
  .th-tree,
@@ -1,11 +1,9 @@
1
1
  // list
2
2
  @import "./list/DshBox/DshTable.less";
3
- @import "./list/DshBox/DshCrossTable.less";
4
3
  @import "./list/DshBox/DshList.less";
5
4
  @import "./list/BriTable.less";
6
5
  @import "./list/DshPage.less";
7
6
 
8
- @import "./list/BriFlatTable.less"; // 不能注释flatTable在用
9
7
  @import "./list/BriCard.less";
10
8
  @import "./list/BriTree.less";
11
9
  @import "./list/BriTreeItem.less";
@@ -62,12 +62,20 @@ const transformToColumns = function (form, {
62
62
  filter: headerFilter ? {
63
63
  isMultiple: true,
64
64
  maxHeight: 250,
65
- filterList: col._data.map(item => ({
66
- ...item,
67
- value: item._key,
68
- label: item.name,
69
- selected: false
70
- })),
65
+ filterList: (
66
+ col._selectFilterVals.length
67
+ ? col._data.filter(item =>
68
+ col._reverseFilter
69
+ ? !col._selectFilterVals.includes(item._key)
70
+ : col._selectFilterVals.includes(item._key)
71
+ )
72
+ : col._data
73
+ ).map(item => ({
74
+ ...item,
75
+ value: item._key,
76
+ label: item.name,
77
+ selected: false
78
+ })),
71
79
  filterConfirm: (filterList) => {
72
80
  let conditionItem = {
73
81
  logic: "field",
@@ -94,7 +102,7 @@ const transformToColumns = function (form, {
94
102
  ),
95
103
  ...col
96
104
  };
97
- });
105
+ });
98
106
  };
99
107
 
100
108
  export default {
@@ -1,80 +0,0 @@
1
- .BriFlatTable {
2
- .BriFlatTable-main {
3
- width: 100%;
4
- height: auto;
5
-
6
- .table {
7
- width: 100%;
8
- border-spacing: 0;
9
- border-collapse: collapse;
10
- border-color: #E5E5E5;
11
- background-color: #fff;
12
-
13
- &-head {
14
- background-color: #f0f0f0;
15
- color: #666;
16
-
17
- &-description {
18
- color: #828499;
19
- }
20
- }
21
-
22
- &-row {
23
- height: 50px;
24
-
25
- &:hover {
26
- .table-row-td-add {
27
- display: inline-block;
28
- }
29
- }
30
-
31
- &-td {
32
- position: relative;
33
-
34
- .td-inner {
35
- &-compare {
36
- width: 100%;
37
- }
38
- }
39
-
40
- &-tip {
41
- padding: 2px 5px 0px 20px;
42
- font-size: 12px;
43
- line-height: 1;
44
- color: #ed4014;
45
- position: absolute;
46
- top: calc(100% -15px);
47
- left: 0px;
48
- }
49
-
50
- &-add {
51
- line-height: 20px;
52
- position: absolute;
53
- bottom: 0px;
54
- right: 0px;
55
- display: none;
56
- }
57
- }
58
-
59
- &-nodata {
60
- width: 100%;
61
- height: 40px;
62
- text-align: center;
63
- }
64
- }
65
-
66
- tbody {
67
- // display: block;
68
- // overflow-y: scroll;
69
- }
70
-
71
- thead {
72
- // display: block;
73
- }
74
- }
75
- }
76
-
77
- &-create {
78
- margin-top: 8px;
79
- }
80
- }
@@ -1,180 +0,0 @@
1
- .DshCrossTable {
2
- width: 100%;
3
- height: 100%;
4
- display: flex;
5
- flex-direction: row;
6
-
7
- &-left,
8
- &-right {
9
- border-top: 1px solid #eeeeee;
10
- border-bottom: 1px solid #eeeeee;
11
- overflow: hidden;
12
- display: flex;
13
- flex-direction: column;
14
-
15
- &-header {
16
- width: 100%;
17
- }
18
-
19
- &-body {
20
- width: 100%;
21
- flex: 1;
22
- min-height: 0px;
23
- overflow: scroll;
24
- }
25
-
26
- &-footer {
27
- width: 100%;
28
- height: 38px;
29
- }
30
- }
31
-
32
- &-left {
33
- width: 160px;
34
- height: 100%;
35
- border-left: 1px solid #eeeeee;
36
- border-right: 1px solid #eeeeee;
37
- // background: #F7F9FD;
38
- z-index: 2;
39
-
40
- &-header {
41
- overflow: hidden;
42
- }
43
-
44
- &-body {
45
- overflow: hidden;
46
- }
47
-
48
- &-footer {
49
- overflow: hidden;
50
- }
51
- }
52
-
53
- &-right {
54
- flex: 1;
55
- min-width: 0px;
56
- height: 100%;
57
- border-right: 1px solid #eeeeee;
58
-
59
- &-header {
60
- overflow: hidden;
61
- }
62
-
63
- &-body {
64
- overflow: scroll;
65
- }
66
-
67
- &-footer {
68
- overflow: hidden;
69
- }
70
- }
71
-
72
- &-row {
73
- // height: 40px;
74
- }
75
-
76
- &-col {
77
- font-weight: bold;
78
- color: #5D5D5D;
79
-
80
- &-checkbox,
81
- &-index,
82
- &-operation {}
83
-
84
- &-Checkbox {}
85
-
86
- &-index {}
87
-
88
- &-content {
89
- .crossTable-col {
90
- width: 100%;
91
- .dsh-flex-row-center-center();
92
-
93
- &-title {
94
- flex: 1;
95
- min-width: 0px;
96
- height: 100%;
97
- .dsh-ellipsis();
98
- }
99
-
100
- &-sign {
101
- #dsh-sign-change();
102
- }
103
- }
104
- }
105
-
106
- &-operation {}
107
- }
108
-
109
- &-td {
110
-
111
- &-checkbox,
112
- &-index,
113
- &-operation {}
114
-
115
- &-Checkbox {}
116
-
117
- &-index {}
118
-
119
- &-content {}
120
-
121
- &-operation {}
122
- }
123
-
124
- table {
125
- width: 100%;
126
-
127
- tr {
128
- height: 39px;
129
- font-size: 12px;
130
- overflow: hidden;
131
-
132
- td {
133
- display: inline-block;
134
- width: 200px;
135
- height: 40px;
136
- line-height: 40px;
137
- padding: 0 10px;
138
- border-right: 1px solid #EDEDED;
139
- border-bottom: 1px solid #EDEDED;
140
- cursor: pointer;
141
- overflow: hidden;
142
-
143
- .td-content {
144
- width: 100%;
145
- height: 100%;
146
- padding: 8px 0px;
147
- line-height: 22px;
148
- vertical-align: middle;
149
- }
150
- }
151
- }
152
- }
153
-
154
- .cross-table-box {
155
- height: 38px;
156
- padding: 7px 0;
157
-
158
- &-content {
159
- width: auto;
160
- border-radius: 2px;
161
- border: 1px solid #6daef2;
162
- font-size: 12px !important;
163
- color: #6DAEF2;
164
- cursor: pointer;
165
- height: 24px;
166
- display: inline-block;
167
- line-height: 24px;
168
- padding: 0 5px;
169
- overflow: hidden;
170
- word-break: keep-all;
171
- white-space: nowrap;
172
- text-overflow: ellipsis;
173
-
174
- i {
175
- margin-right: 5px;
176
- font-size: 12px !important;
177
- }
178
- }
179
- }
180
- }