@nokecy/qc-ui 0.3.13 → 0.3.14

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.
@@ -33,7 +33,7 @@ var _setting = _interopRequireDefault(require("./setting"));
33
33
 
34
34
  var _ = require(".");
35
35
 
36
- var _excluded = ["style", "loading", "params", "request", "dataSource", "treeParentName", "rowData", "gridRef", "headerTitle", "toolBarRender", "search", "hideTool", "onGridReady", "gridKey", "gridColumnState", "children"];
36
+ var _excluded = ["style", "loading", "params", "request", "dataSource", "treeKeyName", "treeParentName", "rowData", "gridRef", "headerTitle", "toolBarRender", "search", "hideTool", "onGridReady", "gridKey", "gridColumnState", "children"];
37
37
 
38
38
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
39
39
 
@@ -75,6 +75,7 @@ function AgGridPlus(props) {
75
75
  gridParams = props.params,
76
76
  request = props.request,
77
77
  dataSource = props.dataSource,
78
+ treeKeyName = props.treeKeyName,
78
79
  treeParentName = props.treeParentName,
79
80
  propRowData = props.rowData,
80
81
  propsGridRef = props.gridRef,
@@ -293,7 +294,7 @@ function AgGridPlus(props) {
293
294
  return !columnProps ? props.columnDefs ? props.columnDefs : [] : columnProps;
294
295
  }, [props.columnDefs]);
295
296
  var rowDataMemo = (0, _react.useMemo)(function () {
296
- return props.treeData ? (0, _utils.flatten)((0, _utils.toTree)(rowData), treeParentName) : rowData;
297
+ return props.treeData ? (0, _utils.flatten)((0, _utils.toTree)(rowData, treeParentName !== null && treeParentName !== void 0 ? treeParentName : "id", treeParentName !== null && treeParentName !== void 0 ? treeParentName : "parentId"), treeParentName) : rowData;
297
298
  }, [rowData, props.treeData]);
298
299
  return /*#__PURE__*/_react.default.createElement(_antd.Spin, {
299
300
  spinning: loading,
@@ -12,6 +12,7 @@ interface GridProps extends AgGridReactProps {
12
12
  loading?: boolean;
13
13
  request?: (params: any, sort: any, filter: any) => Promise<any>;
14
14
  dataSource?: any[];
15
+ treeKeyName?: string;
15
16
  treeParentName?: string;
16
17
  search?: boolean;
17
18
  headerTitle?: React.ReactNode;
@@ -4,6 +4,6 @@ declare const convertSortModel: (sortModel: any[]) => string;
4
4
  declare const dateValueFormatter: (params: ValueFormatterParams) => string;
5
5
  declare const dateTimeValueFormatter: (params: ValueFormatterParams) => string;
6
6
  declare const flatten: (arr: any[], parentPropName: any, parentref?: any[]) => any;
7
- declare const toTree: (data: any[]) => any[];
7
+ declare const toTree: (data: any[], keyName: any, parentKeyName: any) => any[];
8
8
  declare const flattenTreeDeep: (treeData: any[], childrenName?: string) => any[];
9
9
  export { dateValueFormatter, dateTimeValueFormatter, convertFilterModel, convertSortModel, flattenTreeDeep, toTree, flatten };
@@ -133,7 +133,7 @@ var flatten = function flatten(arr, parentPropName, parentref) {
133
133
 
134
134
  exports.flatten = flatten;
135
135
 
136
- var toTree = function toTree(data) {
136
+ var toTree = function toTree(data, keyName, parentKeyName) {
137
137
  // 删除 所有 children,以防止多次调用
138
138
  data.forEach(function (item) {
139
139
  delete item.children;
@@ -141,12 +141,12 @@ var toTree = function toTree(data) {
141
141
 
142
142
  var map = {};
143
143
  data.forEach(function (item) {
144
- map[item.id] = item;
144
+ map[item[keyName]] = item;
145
145
  });
146
146
  var val = [];
147
147
  data.forEach(function (item) {
148
148
  // 以当前遍历项,的pid,去map对象中找到索引的id
149
- var parent = map[item.parentId]; // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
149
+ var parent = map[item[parentKeyName]]; // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
150
150
 
151
151
  if (parent) {
152
152
  (parent.children || (parent.children = [])).push(item);
@@ -1,49 +1,49 @@
1
- .react-dashboard-toolbar {
2
- display: flex;
3
- align-items: center;
4
- justify-content: space-between;
5
- // width: 100%;
6
- padding: 0 10px;
7
- padding-bottom: 10px;
8
- // background: var(--component-background);
9
-
10
- &:after {
11
- display: block;
12
- clear: both;
13
- content: '';
14
- }
15
-
16
- &-left {
17
- float: left;
18
-
19
- button {
20
- margin-right: 10px;
21
- }
22
- }
23
-
24
- &-right {
25
- float: right;
26
-
27
- button {
28
- margin-left: 10px;
29
- }
30
- }
31
-
32
- &-space {
33
- flex: auto;
34
- height: 1px;
35
- margin: 0 !important;
36
- padding: 0 !important;
37
- border: 0 !important;
38
- -webkit-box-flex: 1;
39
- }
40
-
41
- &-fixed {
42
- position: fixed;
43
- right: 0;
44
- bottom: 0;
45
- z-index: 9;
46
- border-top: 1px solid rgba(128, 128, 128, 0.1);
47
- box-shadow: 0 -1px 2px rgba(128, 128, 128, 0.03);
48
- }
49
- }
1
+ .react-dashboard-toolbar {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: space-between;
5
+ // width: 100%;
6
+ padding: 0 10px;
7
+ padding-bottom: 10px;
8
+ // background: var(--component-background);
9
+
10
+ &:after {
11
+ display: block;
12
+ clear: both;
13
+ content: '';
14
+ }
15
+
16
+ &-left {
17
+ float: left;
18
+
19
+ button {
20
+ margin-right: 10px;
21
+ }
22
+ }
23
+
24
+ &-right {
25
+ float: right;
26
+
27
+ button {
28
+ margin-left: 10px;
29
+ }
30
+ }
31
+
32
+ &-space {
33
+ flex: auto;
34
+ height: 1px;
35
+ margin: 0 !important;
36
+ padding: 0 !important;
37
+ border: 0 !important;
38
+ -webkit-box-flex: 1;
39
+ }
40
+
41
+ &-fixed {
42
+ position: fixed;
43
+ right: 0;
44
+ bottom: 0;
45
+ z-index: 9;
46
+ border-top: 1px solid rgba(128, 128, 128, 0.1);
47
+ box-shadow: 0 -1px 2px rgba(128, 128, 128, 0.03);
48
+ }
49
+ }
@@ -1,173 +1,173 @@
1
- @import '~react-grid-layout/css/styles.css';
2
-
3
- .react-resizable {
4
-
5
- position: relative;
6
- }
7
- .react-resizable-handle {
8
- position: absolute;
9
- width: 20px;
10
- height: 20px;
11
- background-repeat: no-repeat;
12
- background-origin: content-box;
13
- box-sizing: border-box;
14
- background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
15
- background-position: bottom right;
16
- padding: 0 3px 3px 0;
17
- display:none;
18
- }
19
- .react-resizable-handle-sw {
20
- bottom: 0;
21
- left: 0;
22
- cursor: sw-resize;
23
- transform: rotate(90deg);
24
- }
25
- .react-resizable-handle-se {
26
- bottom: 0;
27
- right: 0;
28
- cursor: se-resize;
29
- }
30
- .react-resizable-handle-nw {
31
- top: 0;
32
- left: 0;
33
- cursor: nw-resize;
34
- transform: rotate(180deg);
35
- }
36
- .react-resizable-handle-ne {
37
- top: 0;
38
- right: 0;
39
- cursor: ne-resize;
40
- transform: rotate(270deg);
41
- }
42
- .react-resizable-handle-w,
43
- .react-resizable-handle-e {
44
- top: 50%;
45
- margin-top: -10px;
46
- cursor: ew-resize;
47
- }
48
- .react-resizable-handle-w {
49
- left: 0;
50
- transform: rotate(135deg);
51
- }
52
- .react-resizable-handle-e {
53
- right: 0;
54
- transform: rotate(315deg);
55
- }
56
- .react-resizable-handle-n,
57
- .react-resizable-handle-s {
58
- left: 50%;
59
- margin-left: -10px;
60
- cursor: ns-resize;
61
- }
62
- .react-resizable-handle-n {
63
- top: 0;
64
- transform: rotate(225deg);
65
- }
66
- .react-resizable-handle-s {
67
- bottom: 0;
68
- transform: rotate(45deg);
69
- }
70
-
71
- :root{
72
- --primary-color:blue;
73
- --component-background:#fff;
74
- }
75
-
76
-
77
- .react-grid-item > .react-resizable-handle {
78
- z-index: 1;
79
- }
80
- .react-dashboard-item-edit{
81
- .react-resizable-handle {
82
- display:block;
83
- }
84
- }
85
-
86
- .react-dashboard-full {
87
- width: 100%;
88
- height: 100%;
89
- }
90
- .react-dashboard-aligncenter {
91
- display: flex;
92
- justify-content: center;
93
- align-items: center;
94
- }
95
- //空页面样式
96
- .react-dashboard-emptyContent {
97
- // min-height: calc(100vh - 50px - 41px - 50px - 10px - 22px);
98
- display: flex;
99
- justify-content: center;
100
- align-items: center;
101
- }
102
-
103
-
104
- .react-dashboard-item {
105
- position: relative;
106
- // overflow: hidden;
107
- // border:1px solid rgba(128,128,128,0.3);
108
- .react-dashboard-mask {
109
- position: absolute;
110
- top: 0;
111
- left: 0;
112
- z-index: 1;
113
- width: 100%;
114
- height: 100%;
115
- background: rgba(0, 0, 0, 0);
116
- cursor: move;
117
- transition: all 0.3s;
118
- }
119
-
120
- .react-dashboard-configicon {
121
- position: absolute;
122
- top: 0;
123
- right: 30px;
124
- z-index: 1;
125
- display: none;
126
- width: 30px;
127
- height: 30px;
128
- color: #fff;
129
- font-weight: bold;
130
- font-size: 16px;
131
- line-height: 30px;
132
- text-align: center;
133
- background: var(--primary-color);
134
- border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
135
- cursor: pointer;
136
- }
137
-
138
- .react-dashboard-deleteicon {
139
- position: absolute;
140
- top: 0;
141
- right: 0;
142
- z-index: 1;
143
- display: none;
144
- width: 30px;
145
- height: 30px;
146
- color: #fff;
147
- font-size: 16px;
148
- line-height: 30px;
149
- text-align: center;
150
- background: #f5222d;
151
- border-radius: var(--card-border-radius);
152
- cursor: pointer;
153
- }
154
-
155
- .react-dashboard-configicon + .react-dashboard-deleteicon {
156
- border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
157
- }
158
-
159
- &:hover {
160
- .react-dashboard-mask {
161
- background: rgba(0, 0, 0, 0.05);
162
- transition: all 0.3s;
163
- }
164
-
165
- .react-dashboard-configicon {
166
- display: block;
167
- }
168
-
169
- .react-dashboard-deleteicon {
170
- display: block;
171
- }
172
- }
173
- }
1
+ @import '~react-grid-layout/css/styles.css';
2
+
3
+ .react-resizable {
4
+
5
+ position: relative;
6
+ }
7
+ .react-resizable-handle {
8
+ position: absolute;
9
+ width: 20px;
10
+ height: 20px;
11
+ background-repeat: no-repeat;
12
+ background-origin: content-box;
13
+ box-sizing: border-box;
14
+ background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+');
15
+ background-position: bottom right;
16
+ padding: 0 3px 3px 0;
17
+ display:none;
18
+ }
19
+ .react-resizable-handle-sw {
20
+ bottom: 0;
21
+ left: 0;
22
+ cursor: sw-resize;
23
+ transform: rotate(90deg);
24
+ }
25
+ .react-resizable-handle-se {
26
+ bottom: 0;
27
+ right: 0;
28
+ cursor: se-resize;
29
+ }
30
+ .react-resizable-handle-nw {
31
+ top: 0;
32
+ left: 0;
33
+ cursor: nw-resize;
34
+ transform: rotate(180deg);
35
+ }
36
+ .react-resizable-handle-ne {
37
+ top: 0;
38
+ right: 0;
39
+ cursor: ne-resize;
40
+ transform: rotate(270deg);
41
+ }
42
+ .react-resizable-handle-w,
43
+ .react-resizable-handle-e {
44
+ top: 50%;
45
+ margin-top: -10px;
46
+ cursor: ew-resize;
47
+ }
48
+ .react-resizable-handle-w {
49
+ left: 0;
50
+ transform: rotate(135deg);
51
+ }
52
+ .react-resizable-handle-e {
53
+ right: 0;
54
+ transform: rotate(315deg);
55
+ }
56
+ .react-resizable-handle-n,
57
+ .react-resizable-handle-s {
58
+ left: 50%;
59
+ margin-left: -10px;
60
+ cursor: ns-resize;
61
+ }
62
+ .react-resizable-handle-n {
63
+ top: 0;
64
+ transform: rotate(225deg);
65
+ }
66
+ .react-resizable-handle-s {
67
+ bottom: 0;
68
+ transform: rotate(45deg);
69
+ }
70
+
71
+ :root{
72
+ --primary-color:blue;
73
+ --component-background:#fff;
74
+ }
75
+
76
+
77
+ .react-grid-item > .react-resizable-handle {
78
+ z-index: 1;
79
+ }
80
+ .react-dashboard-item-edit{
81
+ .react-resizable-handle {
82
+ display:block;
83
+ }
84
+ }
85
+
86
+ .react-dashboard-full {
87
+ width: 100%;
88
+ height: 100%;
89
+ }
90
+ .react-dashboard-aligncenter {
91
+ display: flex;
92
+ justify-content: center;
93
+ align-items: center;
94
+ }
95
+ //空页面样式
96
+ .react-dashboard-emptyContent {
97
+ // min-height: calc(100vh - 50px - 41px - 50px - 10px - 22px);
98
+ display: flex;
99
+ justify-content: center;
100
+ align-items: center;
101
+ }
102
+
103
+
104
+ .react-dashboard-item {
105
+ position: relative;
106
+ // overflow: hidden;
107
+ // border:1px solid rgba(128,128,128,0.3);
108
+ .react-dashboard-mask {
109
+ position: absolute;
110
+ top: 0;
111
+ left: 0;
112
+ z-index: 1;
113
+ width: 100%;
114
+ height: 100%;
115
+ background: rgba(0, 0, 0, 0);
116
+ cursor: move;
117
+ transition: all 0.3s;
118
+ }
119
+
120
+ .react-dashboard-configicon {
121
+ position: absolute;
122
+ top: 0;
123
+ right: 30px;
124
+ z-index: 1;
125
+ display: none;
126
+ width: 30px;
127
+ height: 30px;
128
+ color: #fff;
129
+ font-weight: bold;
130
+ font-size: 16px;
131
+ line-height: 30px;
132
+ text-align: center;
133
+ background: var(--primary-color);
134
+ border-radius: var(--card-border-radius) 0 0 var(--card-border-radius);
135
+ cursor: pointer;
136
+ }
137
+
138
+ .react-dashboard-deleteicon {
139
+ position: absolute;
140
+ top: 0;
141
+ right: 0;
142
+ z-index: 1;
143
+ display: none;
144
+ width: 30px;
145
+ height: 30px;
146
+ color: #fff;
147
+ font-size: 16px;
148
+ line-height: 30px;
149
+ text-align: center;
150
+ background: #f5222d;
151
+ border-radius: var(--card-border-radius);
152
+ cursor: pointer;
153
+ }
154
+
155
+ .react-dashboard-configicon + .react-dashboard-deleteicon {
156
+ border-radius: 0 var(--card-border-radius) var(--card-border-radius) 0;
157
+ }
158
+
159
+ &:hover {
160
+ .react-dashboard-mask {
161
+ background: rgba(0, 0, 0, 0.05);
162
+ transition: all 0.3s;
163
+ }
164
+
165
+ .react-dashboard-configicon {
166
+ display: block;
167
+ }
168
+
169
+ .react-dashboard-deleteicon {
170
+ display: block;
171
+ }
172
+ }
173
+ }
@@ -57,10 +57,10 @@ var request = /*#__PURE__*/function () {
57
57
  return _ref.apply(this, arguments);
58
58
  };
59
59
  }();
60
- /**
61
- *复制字符串到系统剪切板
62
- *
63
- * @param {*} str
60
+ /**
61
+ *复制字符串到系统剪切板
62
+ *
63
+ * @param {*} str
64
64
  */
65
65
 
66
66
 
@@ -73,10 +73,10 @@ var getPosition = function getPosition(random, fontSize) {
73
73
  left: left
74
74
  };
75
75
  };
76
- /*
77
- 生成uuid
78
- len:number 长度
79
- radix:number 进制
76
+ /*
77
+ 生成uuid
78
+ len:number 长度
79
+ radix:number 进制
80
80
  */
81
81
 
82
82
 
@@ -115,10 +115,10 @@ function generateUuid() {
115
115
  }
116
116
 
117
117
  var confirm = _antd.Modal.confirm;
118
- /**
119
- * 异步确认弹窗,抛出确认或取消布尔值
120
- *
121
- * @param {confirmUtilAsyncProps} props
118
+ /**
119
+ * 异步确认弹窗,抛出确认或取消布尔值
120
+ *
121
+ * @param {confirmUtilAsyncProps} props
122
122
  */
123
123
 
124
124
  var confirmUtilAsync = function confirmUtilAsync(props) {
@@ -1,7 +1,7 @@
1
- .react-dashboard-widget {
2
- width: 100%;
3
- height: 100%;
4
- position: relative;
5
- border:1px solid rgba(128,128,128,0.3);
6
- overflow:hidden;
7
- }
1
+ .react-dashboard-widget {
2
+ width: 100%;
3
+ height: 100%;
4
+ position: relative;
5
+ border:1px solid rgba(128,128,128,0.3);
6
+ overflow:hidden;
7
+ }