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/styles/components/list/BriTable.less CHANGED
@@ -10,6 +10,64 @@
10
10
  overflow: auto;
11
11
  word-break: break-word;
12
12
 
13
+ td {
14
+ white-space: normal !important;
15
+ }
16
+ th.ve-table-fixed-right {
17
+ box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.1);
18
+ }
19
+ td.ve-table-fixed-right {
20
+ box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.1);
21
+ }
22
+ th.ve-table-last-left-fixed-column {
23
+ box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.1);
24
+ }
25
+ td.ve-table-last-left-fixed-column {
26
+ box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.1);
27
+ }
28
+
29
+ &-th {
30
+ padding: 4px 8px;
31
+ border-bottom: none !important;
32
+ background-color: #F0F0F0;
33
+ font-size: 14px;
34
+ font-weight: 500;
35
+ color: rgba(0, 0, 0, 0.6);
36
+ position: relative;
37
+ }
38
+
39
+ &-td {
40
+ position: relative;
41
+ padding: 4px 20px 12px 20px;
42
+
43
+ &-tip {
44
+ padding: 0px 0px 0px 20px;
45
+ font-size: 12px;
46
+ line-height: 1;
47
+ color: #ed4014;
48
+ position: absolute;
49
+ top: calc(100% -15px);
50
+ left: 0px;
51
+ }
52
+
53
+ &-operation {
54
+ .DshButtons-dropdown-more {
55
+ padding: 0px;
56
+ margin-left: 16px;
57
+ }
58
+
59
+ &-btn {
60
+ margin-left: 16px;
61
+ padding: 0px;
62
+
63
+
64
+ &:first-of-type {
65
+ margin: 0px;
66
+ }
67
+ }
68
+ }
69
+ }
70
+
13
71
  &-content {
14
72
  width: 100%;
15
73
  max-height: 100%;
@@ -19,13 +77,50 @@
19
77
 
20
78
  &-container {
21
79
  height: 100% !important;
22
- }
23
80
 
81
+ .ve-table-content-wrapper table.ve-table-content {
82
+ thead.ve-table-header tr.ve-table-header-tr th.ve-table-header-th {
83
+ padding: 4px 8px;
84
+
85
+ .ve-table-filter .ve-table-filter-icon {
86
+ &:hover {
87
+ color: @themeColor;
88
+ }
89
+ }
90
+
91
+ // 排序
92
+ .ve-table-sort {
93
+ position: absolute !important;
94
+ top: 5px;
95
+ right: 4px;
96
+
97
+ .icon-vet-sort-top-arrow:before {
98
+ content: "\e6347";
99
+ }
100
+
101
+ .icon-vet-sort-bottom-arrow:before {
102
+ content: "\e6349";
103
+ }
104
+ }
105
+ }
106
+
107
+ tbody.ve-table-body tr.ve-table-body-tr td.ve-table-body-td {
108
+ padding: 4px 20px 12px 20px;
109
+ }
110
+ }
111
+ }
112
+
24
113
  &.ve-table-border-around {
25
114
  border-radius: @borderRadius;
26
115
  }
27
116
  }
28
117
  }
118
+
119
+ &-click {
120
+ td {
121
+ cursor: pointer;
122
+ }
123
+ }
29
124
 
30
125
  &-onlyhead {
31
126
  .ve-table.ve-table-border-around {
@@ -47,70 +142,9 @@
47
142
  color: @textColor;
48
143
  .dsh-flex-row-center-center();
49
144
  }
50
-
51
- &-ellipsis {
52
- max-width: calc(100% - 20px);
53
- }
54
-
55
- &-click {
56
- td {
57
- cursor: pointer;
58
- }
59
- }
60
-
61
- td {
62
- white-space: normal !important;
63
- }
64
-
65
- &-th {
66
- border-bottom: none !important;
67
- }
68
-
69
- &-td {
70
- position: relative;
71
- }
72
-
73
- th.ve-table-fixed-right {
74
- box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.1);
75
- }
76
-
77
- td.ve-table-fixed-right {
78
- box-shadow: -4px 0 6px -2px rgba(0, 0, 0, 0.1);
79
- }
80
-
81
- th.ve-table-last-left-fixed-column {
82
- box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.1);
83
- }
84
-
85
- td.ve-table-last-left-fixed-column {
86
- box-shadow: 4px 0 7px -2px rgba(0, 0, 0, 0.1);
87
- }
88
145
  }
89
146
 
90
- .ve-table .ve-table-container.ve-table-container-left-scrolling .ve-table-last-left-fixed-column {
91
- // border-color: transparent;
92
- // box-shadow: -5px 0 10px 0 rgba(0,0,0,0.1), -1px 0 4px 0 rgba(0,0,0,0.2), -2px 0 8px 0 rgba(0,0,0,0.2);
93
- }
94
147
 
95
- .ve-table .ve-table-container.ve-table-container-right-scrolling .ve-table-first-right-fixed-column {
96
- // border-color: transparent;
97
- // box-shadow: -5px 0 10px 0 rgba(0,0,0,0.1), -1px 0 4px 0 rgba(0,0,0,0.2), -2px 0 8px 0 rgba(0,0,0,0.2);
98
- }
99
-
100
- // 排序
101
- .ve-table-sort {
102
- position: absolute !important;
103
- top: 7px;
104
- right: 20px;
105
-
106
- .icon-vet-sort-top-arrow:before {
107
- content: "\e6347";
108
- }
109
-
110
- .icon-vet-sort-bottom-arrow:before {
111
- content: "\e6349";
112
- }
113
- }
114
148
 
115
149
  // 筛选
116
150
  .ve-dropdown {
@@ -119,12 +153,6 @@
119
153
  right: 42px;
120
154
  }
121
155
 
122
- .ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content thead.ve-table-header .ve-table-header-tr .ve-table-header-th .ve-table-filter .ve-table-filter-icon {
123
- &:hover {
124
- color: @themeColor;
125
- }
126
- }
127
-
128
156
  .ve-dropdown-popper {
129
157
  .ve-dropdown-items-warpper {
130
158
  max-width: 200px;
package/src/utils/table.js CHANGED
@@ -1,7 +1,69 @@
1
1
  /* -------------------- 表格 -------------- */
2
+ // 生成表格表头的渲染函数
3
+ const getHeadRender = function (h, column, {
4
+ showRequired = false,
5
+ showDescription = false,
6
+ headHeightAuto = false
7
+ }) {
8
+ return h("div", {
9
+ style: {
10
+ display: "inline-block",
11
+ maxWidth: "100%",
12
+ paddingLeft: "12px",
13
+ paddingRight: column._description ? "30px" : "12px",
14
+ verticalAlign: "middle",
15
+ position: "relative"
16
+ }
17
+ }, [
18
+ showRequired && column._required && h("i", {
19
+ style: {
20
+ position: "absolute",
21
+ top: "0px",
22
+ left: "0px",
23
+ color: "#ed4014"
24
+ }
25
+ }, "*"),
26
+
27
+ h("span", {
28
+ style: {
29
+ display: "inline-block",
30
+ maxWidth: "100%",
31
+ verticalAlign: "middle"
32
+ },
33
+ directives: [
34
+ headHeightAuto
35
+ ? {}
36
+ : { name: "ellipsis" }
37
+ ]
38
+ }, column.title || column._name),
39
+
40
+ showDescription && column._description && h("Tooltip", {
41
+ style: {
42
+ position: "absolute",
43
+ bottom: "1px",
44
+ right: "12px",
45
+ cursor: "pointer"
46
+ },
47
+ props: {
48
+ content: column._description,
49
+ transfer: true,
50
+ maxWidth: 240
51
+ },
52
+ scopedSlots: {
53
+ default: props => h("i", {
54
+ class: "ivu-icon bico-font bico-explain"
55
+ })
56
+ }
57
+ })
58
+ ]);
59
+ };
60
+
2
61
  // 转化表单字段属性 to 表格参数, 是否需要过滤tag
3
62
  const transformToColumns = function (form, {
4
- headFilter = false
63
+ showHeadFilter = false,
64
+ showRequired = false,
65
+ showDescription = false,
66
+ headHeightAuto = false
5
67
  } = {}) {
6
68
  return form
7
69
  .map(col => {
@@ -14,100 +76,96 @@ const transformToColumns = function (form, {
14
76
  align: col._align || typeData.align,
15
77
  fixed: col._fixed,
16
78
  width: col._width || typeData.width,
17
- sortBy: headFilter ? col._sortBy || typeData.sortBy : undefined,
79
+ sortBy: showHeadFilter
80
+ ? col._sortBy || typeData.sortBy
81
+ : undefined,
82
+ filter: showHeadFilter
83
+ ? ["select", "checkbox"].includes(col._type) && col._hideHeadFilter !== true
84
+ ? {
85
+ isMultiple: true,
86
+ maxHeight: 250,
87
+ filterList: (
88
+ col._selectFilterVals.length
89
+ ? col._data.filter(item =>
90
+ col._reverseFilter
91
+ ? !col._selectFilterVals.includes(item._key)
92
+ : col._selectFilterVals.includes(item._key)
93
+ )
94
+ : col._data
95
+ ).map(item => ({
96
+ ...item,
97
+ value: item._key,
98
+ label: item.name,
99
+ selected: false
100
+ })),
101
+ filterConfirm: (filterList) => {
102
+ let conditionItem = {
103
+ logic: "field",
104
+ fieldKey: col._key,
105
+ fieldType: col._type,
106
+ fieldValue: filterList.filter(dataItem => dataItem.selected).map(dataItem => dataItem._key),
107
+ fieldOperator: "eq"
108
+ };
109
+ this.filterConfirm && this.filterConfirm(conditionItem);
110
+ },
111
+ filterReset: () => {
112
+ let conditionItem = {
113
+ logic: "field",
114
+ fieldKey: col._key,
115
+ fieldType: col._type,
116
+ fieldValue: [],
117
+ fieldOperator: "eq"
118
+ };
119
+ this.filterReset && this.filterReset(conditionItem);
120
+ }
121
+ }
122
+ : undefined
123
+ : undefined,
18
124
  renderHeaderCell: ({ row, column }, h) => {
19
- return h("div", {
20
- class: { "bri-table-ellipsis": column.sortBy != undefined || column.filter || column.filterCustom },
21
- directives: [
22
- { name: "ellipsis" }
23
- ]
24
- }, column.title);
125
+ return getHeadRender(h, column, {
126
+ showRequired,
127
+ showDescription,
128
+ headHeightAuto
129
+ });
25
130
  },
26
-
27
- ...(
28
- col._type
29
- ? col._type === "operation"
30
- ? {
31
- renderBodyCell: (params, h) => {
32
- return h("dsh-buttons", {
33
- props: {
34
- list: col._getBtnList ? col._getBtnList.call(this, params.row) : this.$getOperationList(col._list),
35
- itemClass: "table-operation-btn"
36
- },
37
- on: {
38
- click: (operationItem) => {
39
- this.$dispatchEvent(operationItem, params);
40
- }
41
- }
42
- });
43
- }
44
- }
45
- : {
46
- renderBodyCell: ({ row, column, rowIndex }, h) => {
47
- return h("dsh-list-unit", {
48
- props: {
49
- canEdit: false,
50
- rowIndex: rowIndex,
51
- formData: row,
52
- formItem: col
53
- }
54
- });
55
- }
56
- }
57
- : {}
58
- ),
59
- ...(
60
- ["select", "checkbox"].includes(col._type) && col._hideHeadFilter !== true
61
- ? {
62
- filter: headFilter ? {
63
- isMultiple: true,
64
- maxHeight: 250,
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
- })),
79
- filterConfirm: (filterList) => {
80
- let conditionItem = {
81
- logic: "field",
82
- fieldKey: col._key,
83
- fieldType: col._type,
84
- fieldValue: filterList.filter(dataItem => dataItem.selected).map(dataItem => dataItem._key),
85
- fieldOperator: "eq"
86
- };
87
- this.filterConfirm && this.filterConfirm(conditionItem);
131
+ renderBodyCell: col._type
132
+ ? col._type === "operation"
133
+ ? (params, h) => {
134
+ return h("dsh-buttons", {
135
+ class: "bri-table-td-operation",
136
+ props: {
137
+ list: col._getBtnList ? col._getBtnList.call(this, params.row) : this.$getOperationList(col._list),
138
+ itemClass: "bri-table-td-operation-btn"
88
139
  },
89
- filterReset: () => {
90
- let conditionItem = {
91
- logic: "field",
92
- fieldKey: col._key,
93
- fieldType: col._type,
94
- fieldValue: [],
95
- fieldOperator: "eq"
96
- };
97
- this.filterReset && this.filterReset(conditionItem);
140
+ on: {
141
+ click: (operationItem) => {
142
+ this.$dispatchEvent(operationItem, params);
143
+ }
144
+ }
145
+ });
146
+ }
147
+ : ({ row, column, rowIndex }, h) => {
148
+ return h("dsh-list-unit", {
149
+ props: {
150
+ canEdit: false,
151
+ rowIndex: rowIndex,
152
+ formData: row,
153
+ formItem: col
98
154
  }
99
- } : null
155
+ });
100
156
  }
101
- : {}
102
- ),
157
+ : undefined,
158
+
103
159
  ...col
104
160
  };
105
161
  });
106
162
  };
107
163
 
108
164
  export default {
165
+ getHeadRender,
109
166
  transformToColumns
110
167
  };
111
168
  export {
169
+ getHeadRender,
112
170
  transformToColumns
113
171
  };
package/src/styles/components/list/DshBox/DshList.less DELETED
@@ -1,119 +0,0 @@
1
- .DshList {
2
- @height:44px;
3
-
4
- .list {
5
- &-loading {
6
- margin-top: 120px;
7
- }
8
-
9
- &-cols,
10
- &-rows {
11
- position: relative;
12
-
13
- &-left {
14
- width: 48px;
15
- text-align: center;
16
- position: absolute;
17
- left: 0;
18
- top: 0;
19
-
20
- label {
21
- display: inline-block;
22
- height: 36px;
23
- padding: 9px 5px;
24
- margin: 0px;
25
- line-height: 18px;
26
- }
27
- }
28
-
29
- .row {
30
- width: 100%;
31
- line-height: 20px;
32
- display: flex;
33
- justify-content: space-between;
34
-
35
- &-item {
36
- min-width: 120px;
37
- height: 100%;
38
- padding: 0 16px;
39
- font-size: 14px;
40
- align-items: center;
41
- }
42
- }
43
- }
44
-
45
- &-cols {
46
- height: @height;
47
- background: #f0f0f0;
48
-
49
- &-left {}
50
- &-right {
51
-
52
- }
53
-
54
- .row {
55
- font-weight: 700;
56
-
57
- &-item {
58
- padding: 10px 16px;
59
- border-top: 1px #e5e5e5 solid;
60
- border-bottom: 1px #f0f0f0 solid;
61
- border-left: 1px #e5e5e5 solid;
62
- background: #f0f0f0;
63
-
64
- &:last-child{
65
- border-right: 1px #e5e5e5 solid;
66
- }
67
-
68
- &-inner {
69
- .dsh-ellipsis{
70
- font-size: 14px;
71
- color: #666;
72
- font-weight: 700;
73
- line-height: 24px;
74
- }
75
- }
76
- }
77
- }
78
- }
79
-
80
- &-rows {
81
- &-left {
82
- label {
83
- height: 44px;
84
- line-height: 20px;
85
- }
86
- }
87
-
88
- &-right {}
89
-
90
- .row {
91
- height: 44px;
92
- line-height: 20px;
93
- cursor: pointer;
94
-
95
- &-item {
96
- display: flex;
97
- border: 1px solid #E5E5E5;
98
- border-width: 0 0 1px 1px;
99
-
100
- &:last-child {
101
- border-width: 0 1px 1px 1px;
102
- }
103
-
104
- &-inner {
105
- width: 100%;
106
- font-size: 14px;
107
- color: #333;
108
- font-weight: 400;
109
- line-height: 24px;
110
- }
111
- }
112
- }
113
- }
114
-
115
- &-nodata {
116
- #dsh-nodata();
117
- }
118
- }
119
- }
package/src/styles/components/list/DshBox/DshTable.less DELETED
@@ -1,23 +0,0 @@
1
- .DshTable {
2
- width: 100%;
3
- height: 100%;
4
-
5
- .table-operation {
6
- display: flex;
7
- justify-content: center;
8
- }
9
-
10
- .table-operation-btn {
11
- margin-left: 16px;
12
- padding: 0px;
13
-
14
- &:first-of-type {
15
- margin: 0px;
16
- }
17
- }
18
-
19
- .DshButtons-dropdown-more {
20
- padding: 0px;
21
- margin-left: 16px;
22
- }
23
- }