@bchr/bchr-front-lib 0.3.151 → 0.3.153
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/lib/base/layout/ui_tpl/page/components/CustomLeftRightView.js +83 -1
- package/lib/base/layout/ui_tpl/page/components/LeftRightView.js +60 -2
- package/lib/style/bchr.less +13 -1
- package/package.json +3 -2
- package/src/base/layout/ui_tpl/page/components/CustomLeftRightView.js +191 -67
- package/src/base/layout/ui_tpl/page/components/LeftRightView.js +131 -48
- package/src/style/bchr.less +13 -1
|
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _antd = require("antd");
|
|
13
13
|
|
|
14
|
+
var _kendoReactLayout = require("@progress/kendo-react-layout");
|
|
15
|
+
|
|
14
16
|
var _jquery = _interopRequireDefault(require("jquery"));
|
|
15
17
|
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -69,6 +71,13 @@ var CustomLeftRightView = function CustomLeftRightView(props, ref) {
|
|
|
69
71
|
footerToggle = _useState12[0],
|
|
70
72
|
setFooterToggle = _useState12[1];
|
|
71
73
|
|
|
74
|
+
var _useState13 = (0, _react.useState)([{
|
|
75
|
+
size: "330px"
|
|
76
|
+
}]),
|
|
77
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
78
|
+
panes = _useState14[0],
|
|
79
|
+
setPanes = _useState14[1];
|
|
80
|
+
|
|
72
81
|
var className = props.className,
|
|
73
82
|
loading_tips = props.loading_tips,
|
|
74
83
|
page_title = props.page_title,
|
|
@@ -89,7 +98,8 @@ var CustomLeftRightView = function CustomLeftRightView(props, ref) {
|
|
|
89
98
|
children = props.children,
|
|
90
99
|
page_extra_content = props.page_extra_content,
|
|
91
100
|
page_extra_content_class_name = props.page_extra_content_class_name,
|
|
92
|
-
page_filter_extra_okcallback = props.page_filter_extra_okcallback
|
|
101
|
+
page_filter_extra_okcallback = props.page_filter_extra_okcallback,
|
|
102
|
+
is_enable_left_and_right_drag = props.is_enable_left_and_right_drag;
|
|
93
103
|
(0, _react.useEffect)(function () {
|
|
94
104
|
if (page_filter_extra_content) {
|
|
95
105
|
var extra_height = (0, _jquery["default"])('.operating-filter-extra-content').height();
|
|
@@ -166,6 +176,11 @@ var CustomLeftRightView = function CustomLeftRightView(props, ref) {
|
|
|
166
176
|
}
|
|
167
177
|
};
|
|
168
178
|
});
|
|
179
|
+
|
|
180
|
+
var splitterOnChange = function splitterOnChange(event) {
|
|
181
|
+
setPanes(event.newState);
|
|
182
|
+
};
|
|
183
|
+
|
|
169
184
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
170
185
|
ref: viewRef
|
|
171
186
|
}, props, {
|
|
@@ -173,7 +188,74 @@ var CustomLeftRightView = function CustomLeftRightView(props, ref) {
|
|
|
173
188
|
}), /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
|
|
174
189
|
spinning: fullLoading,
|
|
175
190
|
tip: loading_tips || '请稍后...'
|
|
191
|
+
}, is_enable_left_and_right_drag && /*#__PURE__*/_react["default"].createElement("div", {
|
|
192
|
+
className: "content-area custom-content-area " + (content_fixed ? "content-area-fixed content-area-fixed-".concat(content_fixed, " ") + (contentToggle ? "".concat(is_revert ? 'right' : 'left', "-content-area-children-show ") : "".concat(is_revert ? 'right' : 'left', "-content-area-children-hide ")) : " ")
|
|
193
|
+
}, /*#__PURE__*/_react["default"].createElement(_kendoReactLayout.Splitter, {
|
|
194
|
+
style: {
|
|
195
|
+
height: "100%"
|
|
196
|
+
},
|
|
197
|
+
panes: panes,
|
|
198
|
+
onChange: splitterOnChange
|
|
176
199
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
200
|
+
className: "page-left-area-drag "
|
|
201
|
+
}, is_revert ? /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
|
|
202
|
+
spinning: loading,
|
|
203
|
+
tip: loading_tips || '努力加载中...'
|
|
204
|
+
}, grid_header && /*#__PURE__*/_react["default"].createElement("div", {
|
|
205
|
+
className: "smart-grid-header"
|
|
206
|
+
}, grid_header), left_children) : left_children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
207
|
+
style: {
|
|
208
|
+
width: "100%"
|
|
209
|
+
},
|
|
210
|
+
className: "page-right-area " + (grid_footer ? footerToggle ? ' smart-grid-footer-container-show ' : '' : '')
|
|
211
|
+
}, (page_title || page_filter || page_btn_group) && /*#__PURE__*/_react["default"].createElement("div", {
|
|
212
|
+
className: "operating-area " + (bordered ? "operating-area-border " : " ")
|
|
213
|
+
}, page_title && /*#__PURE__*/_react["default"].createElement("div", {
|
|
214
|
+
className: "operating-title"
|
|
215
|
+
}, /*#__PURE__*/_react["default"].createElement("span", null, page_title)), page_title_extra_content && /*#__PURE__*/_react["default"].createElement("div", {
|
|
216
|
+
className: "operating-title-extra-content"
|
|
217
|
+
}, page_title_extra_content), page_filter && /*#__PURE__*/_react["default"].createElement("div", {
|
|
218
|
+
className: "operating-filter"
|
|
219
|
+
}, page_filter, page_filter_extra_content && !filterToggle && /*#__PURE__*/_react["default"].createElement(ButtonGroup, null, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
|
|
220
|
+
className: "default-btn",
|
|
221
|
+
onClick: onFilterOkCallBack
|
|
222
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
223
|
+
className: "iconfont icon-bchr-search"
|
|
224
|
+
}), "\u641C\u7D22"))), page_filter_extra_content && filterExtraBtnToggle && /*#__PURE__*/_react["default"].createElement("div", {
|
|
225
|
+
className: "operating-filter-more " + (filterToggle ? "operating-filter-more-show " : "operating-filter-more-hide "),
|
|
226
|
+
onClick: onSetFilterToggle
|
|
227
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
228
|
+
className: "iconfont ".concat(filterToggle ? 'icon-bchr-up1' : 'icon-bchr-down1', " ")
|
|
229
|
+
})), page_btn_group && /*#__PURE__*/_react["default"].createElement("div", {
|
|
230
|
+
className: "operating-btn-group " + (!page_filter ? "operating-not-filter-btn-group " : " ")
|
|
231
|
+
}, page_btn_group)), page_filter_extra_content && /*#__PURE__*/_react["default"].createElement("div", {
|
|
232
|
+
className: "operating-filter-extra-content " + (filterToggle ? "operating-filter-extra-content-show " : "operating-filter-extra-content-hide ")
|
|
233
|
+
}, /*#__PURE__*/_react["default"].createElement(_antd.Row, {
|
|
234
|
+
className: "operating-filter-extra-groups"
|
|
235
|
+
}, page_filter_extra_content, /*#__PURE__*/_react["default"].createElement(ButtonGroup, {
|
|
236
|
+
className: "operating-filter-extra-btns"
|
|
237
|
+
}, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
|
|
238
|
+
className: "default-btn",
|
|
239
|
+
onClick: onFilterOkCallBack
|
|
240
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
241
|
+
className: "iconfont icon-bchr-search"
|
|
242
|
+
}), "\u641C\u7D22")))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
243
|
+
className: 'content-area inner-content-area ' + (page_filter_extra_content ? 'content-area-filter-extra ' : ' ') + ('smart-' + (content_type ? content_type : 'grid') + ' ') + (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ') + (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '')
|
|
244
|
+
}, !is_revert ? /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
|
|
245
|
+
spinning: loading,
|
|
246
|
+
tip: loading_tips || '努力加载中...'
|
|
247
|
+
}, grid_header && /*#__PURE__*/_react["default"].createElement("div", {
|
|
248
|
+
className: "smart-grid-header"
|
|
249
|
+
}, grid_header), right_children, grid_footer && /*#__PURE__*/_react["default"].createElement("div", {
|
|
250
|
+
className: "smart-grid-footer"
|
|
251
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
252
|
+
className: "smart-grid-footer-toggle-btn",
|
|
253
|
+
onClick: onGridFooterChange
|
|
254
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
255
|
+
className: 'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')
|
|
256
|
+
}), footerToggle ? '收起' : '展开'), /*#__PURE__*/_react["default"].createElement("div", {
|
|
257
|
+
className: "smart-grid-footer-content"
|
|
258
|
+
}, grid_footer))) : right_children)))), !is_enable_left_and_right_drag && /*#__PURE__*/_react["default"].createElement("div", {
|
|
177
259
|
className: "content-area custom-content-area " + (content_fixed ? "content-area-fixed content-area-fixed-".concat(content_fixed, " ") + (contentToggle ? "".concat(is_revert ? 'right' : 'left', "-content-area-children-show ") : "".concat(is_revert ? 'right' : 'left', "-content-area-children-hide ")) : " ")
|
|
178
260
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
179
261
|
style: {
|
|
@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _antd = require("antd");
|
|
13
13
|
|
|
14
|
+
var _kendoReactLayout = require("@progress/kendo-react-layout");
|
|
15
|
+
|
|
14
16
|
var _jquery = _interopRequireDefault(require("jquery"));
|
|
15
17
|
|
|
16
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -69,6 +71,13 @@ var LeftRightView = function LeftRightView(props, ref) {
|
|
|
69
71
|
footerToggle = _useState12[0],
|
|
70
72
|
setFooterToggle = _useState12[1];
|
|
71
73
|
|
|
74
|
+
var _useState13 = (0, _react.useState)([{
|
|
75
|
+
size: "330px"
|
|
76
|
+
}]),
|
|
77
|
+
_useState14 = _slicedToArray(_useState13, 2),
|
|
78
|
+
panes = _useState14[0],
|
|
79
|
+
setPanes = _useState14[1];
|
|
80
|
+
|
|
72
81
|
var className = props.className,
|
|
73
82
|
loading_tips = props.loading_tips,
|
|
74
83
|
page_title = props.page_title,
|
|
@@ -88,7 +97,8 @@ var LeftRightView = function LeftRightView(props, ref) {
|
|
|
88
97
|
children = props.children,
|
|
89
98
|
page_extra_content = props.page_extra_content,
|
|
90
99
|
page_extra_content_class_name = props.page_extra_content_class_name,
|
|
91
|
-
page_filter_extra_okcallback = props.page_filter_extra_okcallback
|
|
100
|
+
page_filter_extra_okcallback = props.page_filter_extra_okcallback,
|
|
101
|
+
is_enable_left_and_right_drag = props.is_enable_left_and_right_drag;
|
|
92
102
|
(0, _react.useEffect)(function () {
|
|
93
103
|
if (page_filter_extra_content) {
|
|
94
104
|
var extra_height = (0, _jquery["default"])('.operating-filter-extra-content').height();
|
|
@@ -165,6 +175,11 @@ var LeftRightView = function LeftRightView(props, ref) {
|
|
|
165
175
|
}
|
|
166
176
|
};
|
|
167
177
|
});
|
|
178
|
+
|
|
179
|
+
var splitterOnChange = function splitterOnChange(event) {
|
|
180
|
+
setPanes(event.newState);
|
|
181
|
+
};
|
|
182
|
+
|
|
168
183
|
return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", _extends({
|
|
169
184
|
ref: viewRef
|
|
170
185
|
}, props, {
|
|
@@ -203,7 +218,50 @@ var LeftRightView = function LeftRightView(props, ref) {
|
|
|
203
218
|
onClick: onFilterOkCallBack
|
|
204
219
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
205
220
|
className: "iconfont icon-bchr-search"
|
|
206
|
-
}), "\u641C\u7D22")))), /*#__PURE__*/_react["default"].createElement("div", {
|
|
221
|
+
}), "\u641C\u7D22")))), is_enable_left_and_right_drag && /*#__PURE__*/_react["default"].createElement("div", {
|
|
222
|
+
className: "content-area " + (page_filter_extra_content ? 'content-area-filter-extra ' : ' ') + (content_fixed ? "content-area-fixed content-area-fixed-".concat(content_fixed, " ") + (contentToggle ? "".concat(is_revert ? 'right' : 'left', "-content-area-children-show ") : "".concat(is_revert ? 'right' : 'left', "-content-area-children-hide ")) : " ") + (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ')
|
|
223
|
+
}, /*#__PURE__*/_react["default"].createElement(_kendoReactLayout.Splitter, {
|
|
224
|
+
style: {
|
|
225
|
+
height: "100%"
|
|
226
|
+
},
|
|
227
|
+
panes: panes,
|
|
228
|
+
onChange: splitterOnChange
|
|
229
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
230
|
+
className: "page-left-area-drag " + (is_revert ? 'smart-' + (content_type ? content_type : 'grid') + ' ' + (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '') : " ")
|
|
231
|
+
}, is_revert ? /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
|
|
232
|
+
spinning: loading,
|
|
233
|
+
tip: loading_tips || '努力加载中...'
|
|
234
|
+
}, grid_header && /*#__PURE__*/_react["default"].createElement("div", {
|
|
235
|
+
className: "smart-grid-header"
|
|
236
|
+
}, grid_header), left_children, grid_footer && /*#__PURE__*/_react["default"].createElement("div", {
|
|
237
|
+
className: "smart-grid-footer"
|
|
238
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
239
|
+
className: "smart-grid-footer-toggle-btn",
|
|
240
|
+
onClick: onGridFooterChange
|
|
241
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
242
|
+
className: 'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')
|
|
243
|
+
}), footerToggle ? '收起' : '展开'), /*#__PURE__*/_react["default"].createElement("div", {
|
|
244
|
+
className: "smart-grid-footer-content"
|
|
245
|
+
}, grid_footer))) : left_children), /*#__PURE__*/_react["default"].createElement("div", {
|
|
246
|
+
className: "page-right-area " + ('smart-' + (content_type ? content_type : 'grid') + ' ' + (grid_footer ? 'smart-grid-footer-container-show smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show ' : 'smart-grid-footer-hide ') : '')),
|
|
247
|
+
style: {
|
|
248
|
+
width: "100%"
|
|
249
|
+
}
|
|
250
|
+
}, !is_revert ? /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
|
|
251
|
+
spinning: loading,
|
|
252
|
+
tip: loading_tips || '努力加载中...'
|
|
253
|
+
}, grid_header && /*#__PURE__*/_react["default"].createElement("div", {
|
|
254
|
+
className: "smart-grid-header"
|
|
255
|
+
}, grid_header), right_children, grid_footer && /*#__PURE__*/_react["default"].createElement("div", {
|
|
256
|
+
className: "smart-grid-footer"
|
|
257
|
+
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
258
|
+
className: "smart-grid-footer-toggle-btn",
|
|
259
|
+
onClick: onGridFooterChange
|
|
260
|
+
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
261
|
+
className: 'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')
|
|
262
|
+
}), footerToggle ? '收起' : '展开'), /*#__PURE__*/_react["default"].createElement("div", {
|
|
263
|
+
className: "smart-grid-footer-content"
|
|
264
|
+
}, grid_footer))) : right_children))), !is_enable_left_and_right_drag && /*#__PURE__*/_react["default"].createElement("div", {
|
|
207
265
|
className: "content-area " + (page_filter_extra_content ? 'content-area-filter-extra ' : ' ') + (content_fixed ? "content-area-fixed content-area-fixed-".concat(content_fixed, " ") + (contentToggle ? "".concat(is_revert ? 'right' : 'left', "-content-area-children-show ") : "".concat(is_revert ? 'right' : 'left', "-content-area-children-hide ")) : " ") + (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ')
|
|
208
266
|
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
209
267
|
className: "page-left-area " + (is_revert ? "page-left-revert-area " + ('smart-' + (content_type ? content_type : 'grid') + ' ') + (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '') : " ") + (!is_revert && (contentToggle ? "left-content-area-fixed-show " : "left-content-area-fixed-hide ")),
|
package/lib/style/bchr.less
CHANGED
|
@@ -257,6 +257,18 @@
|
|
|
257
257
|
}
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
+
.page-left-area-drag {
|
|
261
|
+
padding: 10px 10px 10px 0;
|
|
262
|
+
border-right: 1px solid #e5e5e5;
|
|
263
|
+
height: 100%;
|
|
264
|
+
overflow-y: auto;
|
|
265
|
+
position: relative;
|
|
266
|
+
|
|
267
|
+
&.page-left-revert-area {
|
|
268
|
+
width: calc(100% - 330px);
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
260
272
|
.page-right-area {
|
|
261
273
|
width: calc(100% - 330px);
|
|
262
274
|
padding: 10px;
|
|
@@ -924,7 +936,7 @@
|
|
|
924
936
|
}
|
|
925
937
|
}
|
|
926
938
|
|
|
927
|
-
@media screen and (max-width:
|
|
939
|
+
@media screen and (max-width: 1200px) {
|
|
928
940
|
.operating-filter {
|
|
929
941
|
.form-group-filter_group {
|
|
930
942
|
.form-group-input {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bchr/bchr-front-lib",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.153",
|
|
4
4
|
"description": "bchr front lib",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -40,6 +40,8 @@
|
|
|
40
40
|
"@progress/kendo-data-query": "^1.5.4",
|
|
41
41
|
"@progress/kendo-react-excel-export": "^3.15.0",
|
|
42
42
|
"@progress/kendo-react-grid": "^3.15.0",
|
|
43
|
+
"@progress/kendo-react-layout": "^3.15.0",
|
|
44
|
+
"@progress/kendo-react-progressbars": "^3.15.0",
|
|
43
45
|
"@progress/kendo-treeview-react-wrapper": "^2019.4.1014",
|
|
44
46
|
"antd": "^4.5.4",
|
|
45
47
|
"handsontable": "^7.2.2",
|
|
@@ -49,4 +51,3 @@
|
|
|
49
51
|
"react-loadable": "^5.5.0"
|
|
50
52
|
}
|
|
51
53
|
}
|
|
52
|
-
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, {forwardRef, Fragment, useEffect, useImperativeHandle, useRef, useState} from "react";
|
|
2
2
|
import {Button, Row, Spin} from "antd";
|
|
3
|
+
import { Splitter } from "@progress/kendo-react-layout";
|
|
3
4
|
import $ from "jquery";
|
|
4
5
|
|
|
5
6
|
const ButtonGroup = Button.Group;
|
|
@@ -13,6 +14,7 @@ const CustomLeftRightView = (props, ref) => {
|
|
|
13
14
|
const [filterToggle, setFilterToggle] = useState(false);
|
|
14
15
|
const [filterExtraBtnToggle, setFilterExtraBtnToggle] = useState(true);
|
|
15
16
|
const [footerToggle, setFooterToggle] = useState(false);
|
|
17
|
+
const [panes, setPanes] = useState([{size: "330px"}]);
|
|
16
18
|
|
|
17
19
|
let {
|
|
18
20
|
className,
|
|
@@ -35,7 +37,8 @@ const CustomLeftRightView = (props, ref) => {
|
|
|
35
37
|
children,
|
|
36
38
|
page_extra_content,
|
|
37
39
|
page_extra_content_class_name,
|
|
38
|
-
page_filter_extra_okcallback
|
|
40
|
+
page_filter_extra_okcallback,
|
|
41
|
+
is_enable_left_and_right_drag
|
|
39
42
|
} = props;
|
|
40
43
|
|
|
41
44
|
useEffect(() => {
|
|
@@ -102,6 +105,10 @@ const CustomLeftRightView = (props, ref) => {
|
|
|
102
105
|
}
|
|
103
106
|
});
|
|
104
107
|
|
|
108
|
+
const splitterOnChange = (event) => {
|
|
109
|
+
setPanes(event.newState);
|
|
110
|
+
};
|
|
111
|
+
|
|
105
112
|
return <Fragment>
|
|
106
113
|
<div ref={viewRef} {...props}
|
|
107
114
|
className={
|
|
@@ -110,100 +117,138 @@ const CustomLeftRightView = (props, ref) => {
|
|
|
110
117
|
+ (className || '')}>
|
|
111
118
|
|
|
112
119
|
<Spin spinning={fullLoading} tip={loading_tips || '请稍后...'}>
|
|
120
|
+
{
|
|
121
|
+
is_enable_left_and_right_drag &&
|
|
122
|
+
<div className={
|
|
123
|
+
"content-area custom-content-area "
|
|
124
|
+
+ (content_fixed ?
|
|
125
|
+
`content-area-fixed content-area-fixed-${content_fixed} `
|
|
126
|
+
+ (contentToggle ? `${is_revert ? 'right' : 'left'}-content-area-children-show `
|
|
127
|
+
: `${is_revert ? 'right' : 'left'}-content-area-children-hide `) : " ")}>
|
|
128
|
+
<Splitter
|
|
129
|
+
style={{
|
|
130
|
+
height: `100%`
|
|
131
|
+
}}
|
|
132
|
+
panes={panes}
|
|
133
|
+
onChange={splitterOnChange}>
|
|
113
134
|
|
|
114
|
-
|
|
115
|
-
"content-area custom-content-area "
|
|
116
|
-
+ (content_fixed ?
|
|
117
|
-
`content-area-fixed content-area-fixed-${content_fixed} `
|
|
118
|
-
+ (contentToggle ? `${is_revert ? 'right' : 'left'}-content-area-children-show `
|
|
119
|
-
: `${is_revert ? 'right' : 'left'}-content-area-children-hide `) : " ")}>
|
|
135
|
+
<div className={"page-left-area-drag "}>
|
|
120
136
|
|
|
121
|
-
|
|
122
|
-
className={
|
|
123
|
-
"page-left-area "
|
|
124
|
-
+ (is_revert ? "page-left-revert-area " : " ")
|
|
125
|
-
+ (!is_revert && (contentToggle ? "left-content-area-fixed-show " : "left-content-area-fixed-hide "))}>
|
|
137
|
+
{is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
126
138
|
|
|
127
|
-
|
|
139
|
+
{grid_header && <div className="smart-grid-header">
|
|
128
140
|
|
|
129
|
-
|
|
141
|
+
{grid_header}
|
|
130
142
|
|
|
131
|
-
|
|
143
|
+
</div>}
|
|
132
144
|
|
|
133
|
-
|
|
145
|
+
{left_children}
|
|
134
146
|
|
|
135
|
-
|
|
147
|
+
</Spin> : left_children}
|
|
136
148
|
|
|
137
|
-
|
|
149
|
+
</div>
|
|
138
150
|
|
|
139
|
-
|
|
151
|
+
<div style={{width: `100%`}}
|
|
152
|
+
className={
|
|
153
|
+
"page-right-area "
|
|
154
|
+
+ (grid_footer ? (footerToggle ? ' smart-grid-footer-container-show ' : '') : '')}>
|
|
140
155
|
|
|
141
|
-
|
|
156
|
+
{(page_title || page_filter || page_btn_group) &&
|
|
157
|
+
<div className={"operating-area " + (bordered ? "operating-area-border " : " ")}>
|
|
142
158
|
|
|
143
|
-
|
|
144
|
-
className={
|
|
145
|
-
"page-right-area "
|
|
146
|
-
+ (is_revert ? "page-right-revert-area " : " ")
|
|
147
|
-
+ (is_revert && (contentToggle ? "right-content-area-fixed-show " : "right-content-area-fixed-hide "))
|
|
148
|
-
+ (grid_footer ? (footerToggle ? ' smart-grid-footer-container-show ' : '') : '')}>
|
|
159
|
+
{page_title && <div className="operating-title"><span>{page_title}</span></div>}
|
|
149
160
|
|
|
150
|
-
|
|
161
|
+
{page_title_extra_content && <div className="operating-title-extra-content">{page_title_extra_content}</div>}
|
|
151
162
|
|
|
152
|
-
|
|
153
|
-
<div className={"operating-area " + (bordered ? "operating-area-border " : " ")}>
|
|
163
|
+
{page_filter && <div className="operating-filter">
|
|
154
164
|
|
|
155
|
-
|
|
165
|
+
{page_filter}
|
|
156
166
|
|
|
157
|
-
|
|
167
|
+
{page_filter_extra_content && !filterToggle && <ButtonGroup>
|
|
158
168
|
|
|
159
|
-
|
|
169
|
+
<Button className={"default-btn"} onClick={onFilterOkCallBack}>
|
|
170
|
+
<span className={"iconfont icon-bchr-search"}></span>搜索
|
|
171
|
+
</Button>
|
|
160
172
|
|
|
161
|
-
|
|
173
|
+
</ButtonGroup>}
|
|
162
174
|
|
|
163
|
-
|
|
175
|
+
</div>}
|
|
164
176
|
|
|
165
|
-
|
|
166
|
-
<span className={"iconfont icon-bchr-search"}></span>搜索
|
|
167
|
-
</Button>
|
|
177
|
+
{page_filter_extra_content && filterExtraBtnToggle && <div className={"operating-filter-more " + (filterToggle ? "operating-filter-more-show " : "operating-filter-more-hide ")} onClick={onSetFilterToggle}><span className={`iconfont ${filterToggle ? 'icon-bchr-up1' : 'icon-bchr-down1'} `}></span></div>}
|
|
168
178
|
|
|
169
|
-
|
|
179
|
+
{page_btn_group && <div className={"operating-btn-group " + (!page_filter ? "operating-not-filter-btn-group " : " ")}>
|
|
180
|
+
{page_btn_group}
|
|
181
|
+
</div>}
|
|
170
182
|
|
|
171
|
-
|
|
183
|
+
</div>}
|
|
172
184
|
|
|
173
|
-
|
|
185
|
+
{page_filter_extra_content && <div className={"operating-filter-extra-content " + (filterToggle ? "operating-filter-extra-content-show " : "operating-filter-extra-content-hide ")}>
|
|
174
186
|
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
187
|
+
<Row className="operating-filter-extra-groups">
|
|
188
|
+
|
|
189
|
+
{page_filter_extra_content}
|
|
190
|
+
|
|
191
|
+
<ButtonGroup className="operating-filter-extra-btns">
|
|
192
|
+
|
|
193
|
+
<Button className="default-btn" onClick={onFilterOkCallBack}>
|
|
194
|
+
<span className="iconfont icon-bchr-search"></span>搜索
|
|
195
|
+
</Button>
|
|
196
|
+
|
|
197
|
+
</ButtonGroup>
|
|
198
|
+
|
|
199
|
+
</Row>
|
|
200
|
+
|
|
201
|
+
</div>}
|
|
178
202
|
|
|
179
|
-
|
|
203
|
+
<div className={
|
|
204
|
+
'content-area inner-content-area '
|
|
205
|
+
+ (page_filter_extra_content ? 'content-area-filter-extra ' : ' ')
|
|
206
|
+
+ ('smart-' + (content_type ? content_type : 'grid') + ' ')
|
|
207
|
+
+ (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ')
|
|
208
|
+
+ (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '')}>
|
|
180
209
|
|
|
181
|
-
|
|
210
|
+
{!is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
182
211
|
|
|
183
|
-
|
|
212
|
+
{grid_header && <div className="smart-grid-header">
|
|
184
213
|
|
|
185
|
-
|
|
214
|
+
{grid_header}
|
|
186
215
|
|
|
187
|
-
|
|
216
|
+
</div>}
|
|
188
217
|
|
|
189
|
-
|
|
190
|
-
<span className="iconfont icon-bchr-search"></span>搜索
|
|
191
|
-
</Button>
|
|
218
|
+
{right_children}
|
|
192
219
|
|
|
193
|
-
|
|
220
|
+
{grid_footer && <div className="smart-grid-footer">
|
|
194
221
|
|
|
195
|
-
|
|
222
|
+
<div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
|
|
196
223
|
|
|
197
|
-
|
|
224
|
+
<div className="smart-grid-footer-content">{grid_footer}</div>
|
|
198
225
|
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
226
|
+
</div>}
|
|
227
|
+
</Spin> : right_children}
|
|
228
|
+
</div>
|
|
229
|
+
</div>
|
|
230
|
+
</Splitter>
|
|
231
|
+
</div>
|
|
232
|
+
}
|
|
233
|
+
|
|
234
|
+
{
|
|
235
|
+
!is_enable_left_and_right_drag &&
|
|
236
|
+
<div className={
|
|
237
|
+
"content-area custom-content-area "
|
|
238
|
+
+ (content_fixed ?
|
|
239
|
+
`content-area-fixed content-area-fixed-${content_fixed} `
|
|
240
|
+
+ (contentToggle ? `${is_revert ? 'right' : 'left'}-content-area-children-show `
|
|
241
|
+
: `${is_revert ? 'right' : 'left'}-content-area-children-hide `) : " ")}>
|
|
242
|
+
|
|
243
|
+
<div style={{width: is_revert ? `calc(100% - ${custom_left_width}px)` : custom_left_width}}
|
|
244
|
+
className={
|
|
245
|
+
"page-left-area "
|
|
246
|
+
+ (is_revert ? "page-left-revert-area " : " ")
|
|
247
|
+
+ (!is_revert && (contentToggle ? "left-content-area-fixed-show " : "left-content-area-fixed-hide "))}>
|
|
205
248
|
|
|
206
|
-
{!is_revert
|
|
249
|
+
{!is_revert && <div className="page-left-area-toggle-btn" onClick={onContentToggle}><span className={"iconfont " + (contentToggle ? "icon-bchr-hcm-arrow-left-doubl" : "icon-bchr-hcm-arrow-right-doub")}></span></div>}
|
|
250
|
+
|
|
251
|
+
{is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
207
252
|
|
|
208
253
|
{grid_header && <div className="smart-grid-header">
|
|
209
254
|
|
|
@@ -211,19 +256,98 @@ const CustomLeftRightView = (props, ref) => {
|
|
|
211
256
|
|
|
212
257
|
</div>}
|
|
213
258
|
|
|
214
|
-
{
|
|
259
|
+
{left_children}
|
|
260
|
+
|
|
261
|
+
</Spin> : left_children}
|
|
262
|
+
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<div style={{width: is_revert ? custom_left_width : `calc(100% - ${custom_left_width}px)`}}
|
|
266
|
+
className={
|
|
267
|
+
"page-right-area "
|
|
268
|
+
+ (is_revert ? "page-right-revert-area " : " ")
|
|
269
|
+
+ (is_revert && (contentToggle ? "right-content-area-fixed-show " : "right-content-area-fixed-hide "))
|
|
270
|
+
+ (grid_footer ? (footerToggle ? ' smart-grid-footer-container-show ' : '') : '')}>
|
|
271
|
+
|
|
272
|
+
{is_revert && <div className="page-right-area-toggle-btn" onClick={onContentToggle}><span className={"iconfont " + (contentToggle ? "icon-bchr-hcm-arrow-right-doub" : "icon-bchr-hcm-arrow-left-doubl")}></span></div>}
|
|
273
|
+
|
|
274
|
+
{(page_title || page_filter || page_btn_group) &&
|
|
275
|
+
<div className={"operating-area " + (bordered ? "operating-area-border " : " ")}>
|
|
276
|
+
|
|
277
|
+
{page_title && <div className="operating-title"><span>{page_title}</span></div>}
|
|
278
|
+
|
|
279
|
+
{page_title_extra_content && <div className="operating-title-extra-content">{page_title_extra_content}</div>}
|
|
215
280
|
|
|
216
|
-
|
|
281
|
+
{page_filter && <div className="operating-filter">
|
|
217
282
|
|
|
218
|
-
|
|
283
|
+
{page_filter}
|
|
219
284
|
|
|
220
|
-
|
|
285
|
+
{page_filter_extra_content && !filterToggle && <ButtonGroup>
|
|
286
|
+
|
|
287
|
+
<Button className={"default-btn"} onClick={onFilterOkCallBack}>
|
|
288
|
+
<span className={"iconfont icon-bchr-search"}></span>搜索
|
|
289
|
+
</Button>
|
|
290
|
+
|
|
291
|
+
</ButtonGroup>}
|
|
292
|
+
|
|
293
|
+
</div>}
|
|
294
|
+
|
|
295
|
+
{page_filter_extra_content && filterExtraBtnToggle && <div className={"operating-filter-more " + (filterToggle ? "operating-filter-more-show " : "operating-filter-more-hide ")} onClick={onSetFilterToggle}><span className={`iconfont ${filterToggle ? 'icon-bchr-up1' : 'icon-bchr-down1'} `}></span></div>}
|
|
296
|
+
|
|
297
|
+
{page_btn_group && <div className={"operating-btn-group " + (!page_filter ? "operating-not-filter-btn-group " : " ")}>
|
|
298
|
+
{page_btn_group}
|
|
299
|
+
</div>}
|
|
221
300
|
|
|
222
301
|
</div>}
|
|
223
|
-
|
|
302
|
+
|
|
303
|
+
{page_filter_extra_content && <div className={"operating-filter-extra-content " + (filterToggle ? "operating-filter-extra-content-show " : "operating-filter-extra-content-hide ")}>
|
|
304
|
+
|
|
305
|
+
<Row className="operating-filter-extra-groups">
|
|
306
|
+
|
|
307
|
+
{page_filter_extra_content}
|
|
308
|
+
|
|
309
|
+
<ButtonGroup className="operating-filter-extra-btns">
|
|
310
|
+
|
|
311
|
+
<Button className="default-btn" onClick={onFilterOkCallBack}>
|
|
312
|
+
<span className="iconfont icon-bchr-search"></span>搜索
|
|
313
|
+
</Button>
|
|
314
|
+
|
|
315
|
+
</ButtonGroup>
|
|
316
|
+
|
|
317
|
+
</Row>
|
|
318
|
+
|
|
319
|
+
</div>}
|
|
320
|
+
|
|
321
|
+
<div className={
|
|
322
|
+
'content-area inner-content-area '
|
|
323
|
+
+ (page_filter_extra_content ? 'content-area-filter-extra ' : ' ')
|
|
324
|
+
+ ('smart-' + (content_type ? content_type : 'grid') + ' ')
|
|
325
|
+
+ (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ')
|
|
326
|
+
+ (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '')}>
|
|
327
|
+
|
|
328
|
+
{!is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
329
|
+
|
|
330
|
+
{grid_header && <div className="smart-grid-header">
|
|
331
|
+
|
|
332
|
+
{grid_header}
|
|
333
|
+
|
|
334
|
+
</div>}
|
|
335
|
+
|
|
336
|
+
{right_children}
|
|
337
|
+
|
|
338
|
+
{grid_footer && <div className="smart-grid-footer">
|
|
339
|
+
|
|
340
|
+
<div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
|
|
341
|
+
|
|
342
|
+
<div className="smart-grid-footer-content">{grid_footer}</div>
|
|
343
|
+
|
|
344
|
+
</div>}
|
|
345
|
+
</Spin> : right_children}
|
|
346
|
+
</div>
|
|
224
347
|
</div>
|
|
225
348
|
</div>
|
|
226
|
-
|
|
349
|
+
}
|
|
350
|
+
|
|
227
351
|
{page_extra_content && <div className={"page-extra-content " + (page_extra_content_class_name ? page_extra_content_class_name + " " : " ")}>
|
|
228
352
|
|
|
229
353
|
<Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, {forwardRef, Fragment, useImperativeHandle, useRef, useState, useEffect} from "react";
|
|
2
2
|
import {Button, Row, Spin} from "antd";
|
|
3
|
+
import { Splitter } from "@progress/kendo-react-layout";
|
|
3
4
|
import $ from "jquery";
|
|
4
5
|
|
|
5
6
|
const ButtonGroup = Button.Group;
|
|
@@ -13,6 +14,7 @@ const LeftRightView = (props, ref) => {
|
|
|
13
14
|
const [filterExtraBtnToggle, setFilterExtraBtnToggle] = useState(true);
|
|
14
15
|
const [contentToggle, setContentToggle] = useState(false);
|
|
15
16
|
const [footerToggle, setFooterToggle] = useState(false);
|
|
17
|
+
const [panes, setPanes] = useState([{size: "330px"}]);
|
|
16
18
|
|
|
17
19
|
let {
|
|
18
20
|
className,
|
|
@@ -34,7 +36,8 @@ const LeftRightView = (props, ref) => {
|
|
|
34
36
|
children,
|
|
35
37
|
page_extra_content,
|
|
36
38
|
page_extra_content_class_name,
|
|
37
|
-
page_filter_extra_okcallback
|
|
39
|
+
page_filter_extra_okcallback,
|
|
40
|
+
is_enable_left_and_right_drag
|
|
38
41
|
} = props;
|
|
39
42
|
|
|
40
43
|
useEffect(() => {
|
|
@@ -101,6 +104,10 @@ const LeftRightView = (props, ref) => {
|
|
|
101
104
|
}
|
|
102
105
|
});
|
|
103
106
|
|
|
107
|
+
const splitterOnChange = (event) => {
|
|
108
|
+
setPanes(event.newState);
|
|
109
|
+
};
|
|
110
|
+
|
|
104
111
|
return <Fragment>
|
|
105
112
|
<div ref={viewRef}
|
|
106
113
|
{...props}
|
|
@@ -152,79 +159,155 @@ const LeftRightView = (props, ref) => {
|
|
|
152
159
|
|
|
153
160
|
</div>}
|
|
154
161
|
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
+ (page_filter_extra_content ? 'content-area-filter-extra ' : ' ')
|
|
158
|
-
+ (content_fixed ?
|
|
159
|
-
`content-area-fixed content-area-fixed-${content_fixed} `
|
|
160
|
-
+ (contentToggle ? `${is_revert ? 'right' : 'left'}-content-area-children-show `
|
|
161
|
-
: `${is_revert ? 'right' : 'left'}-content-area-children-hide `) : " ")
|
|
162
|
-
+ (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ')}>
|
|
163
|
-
|
|
162
|
+
{
|
|
163
|
+
is_enable_left_and_right_drag &&
|
|
164
164
|
<div className={
|
|
165
|
-
"
|
|
166
|
-
+ (
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
+ (
|
|
170
|
-
|
|
171
|
-
|
|
165
|
+
"content-area "
|
|
166
|
+
+ (page_filter_extra_content ? 'content-area-filter-extra ' : ' ')
|
|
167
|
+
+ (content_fixed ?
|
|
168
|
+
`content-area-fixed content-area-fixed-${content_fixed} `
|
|
169
|
+
+ (contentToggle ? `${is_revert ? 'right' : 'left'}-content-area-children-show `
|
|
170
|
+
: `${is_revert ? 'right' : 'left'}-content-area-children-hide `) : " ")
|
|
171
|
+
+ (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ')}>
|
|
172
|
+
<Splitter
|
|
173
|
+
style={{
|
|
174
|
+
height: `100%`
|
|
175
|
+
}}
|
|
176
|
+
panes={panes}
|
|
177
|
+
onChange={splitterOnChange}>
|
|
178
|
+
<div className={
|
|
179
|
+
"page-left-area-drag "
|
|
180
|
+
+ (is_revert ?
|
|
181
|
+
('smart-' + (content_type ? content_type : 'grid') + ' ')
|
|
182
|
+
+ (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '') : " ")}>
|
|
183
|
+
|
|
184
|
+
{is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
185
|
+
|
|
186
|
+
{grid_header && <div className="smart-grid-header">
|
|
187
|
+
|
|
188
|
+
{grid_header}
|
|
189
|
+
|
|
190
|
+
</div>}
|
|
191
|
+
|
|
192
|
+
{left_children}
|
|
172
193
|
|
|
173
|
-
|
|
194
|
+
{grid_footer && <div className="smart-grid-footer">
|
|
174
195
|
|
|
175
|
-
|
|
196
|
+
<div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
|
|
176
197
|
|
|
177
|
-
|
|
198
|
+
<div className="smart-grid-footer-content">{grid_footer}</div>
|
|
178
199
|
|
|
179
|
-
|
|
200
|
+
</div>}
|
|
201
|
+
</Spin> : left_children}
|
|
202
|
+
</div>
|
|
203
|
+
<div className={
|
|
204
|
+
"page-right-area "
|
|
205
|
+
+ (('smart-' + (content_type ? content_type : 'grid') + ' ')
|
|
206
|
+
+ (grid_footer ? 'smart-grid-footer-container-show smart-grid-footer-container '
|
|
207
|
+
+ (footerToggle ? 'smart-grid-footer-show ' : 'smart-grid-footer-hide ') : ''))}
|
|
208
|
+
style={{width: `100%`}}>
|
|
180
209
|
|
|
181
|
-
|
|
210
|
+
{!is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
182
211
|
|
|
183
|
-
|
|
212
|
+
{grid_header && <div className="smart-grid-header">
|
|
184
213
|
|
|
185
|
-
|
|
214
|
+
{grid_header}
|
|
186
215
|
|
|
187
|
-
|
|
216
|
+
</div>}
|
|
188
217
|
|
|
189
|
-
|
|
218
|
+
{right_children}
|
|
190
219
|
|
|
191
|
-
|
|
192
|
-
|
|
220
|
+
{grid_footer && <div className="smart-grid-footer">
|
|
221
|
+
|
|
222
|
+
<div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
|
|
223
|
+
|
|
224
|
+
<div className="smart-grid-footer-content">{grid_footer}</div>
|
|
225
|
+
|
|
226
|
+
</div>}
|
|
227
|
+
|
|
228
|
+
</Spin> : right_children}
|
|
229
|
+
|
|
230
|
+
</div>
|
|
231
|
+
</Splitter>
|
|
193
232
|
</div>
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
{
|
|
236
|
+
!is_enable_left_and_right_drag &&
|
|
194
237
|
<div className={
|
|
195
|
-
"
|
|
196
|
-
+ (
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
+ (
|
|
200
|
-
|
|
201
|
-
|
|
238
|
+
"content-area "
|
|
239
|
+
+ (page_filter_extra_content ? 'content-area-filter-extra ' : ' ')
|
|
240
|
+
+ (content_fixed ?
|
|
241
|
+
`content-area-fixed content-area-fixed-${content_fixed} `
|
|
242
|
+
+ (contentToggle ? `${is_revert ? 'right' : 'left'}-content-area-children-show `
|
|
243
|
+
: `${is_revert ? 'right' : 'left'}-content-area-children-hide `) : " ")
|
|
244
|
+
+ (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ')}>
|
|
202
245
|
|
|
203
|
-
|
|
246
|
+
<div className={
|
|
247
|
+
"page-left-area "
|
|
248
|
+
+ (is_revert ?
|
|
249
|
+
"page-left-revert-area "
|
|
250
|
+
+ ('smart-' + (content_type ? content_type : 'grid') + ' ')
|
|
251
|
+
+ (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '') : " ")
|
|
252
|
+
+ (!is_revert && (contentToggle ? "left-content-area-fixed-show " : "left-content-area-fixed-hide "))}
|
|
253
|
+
style={{width: is_revert ? `calc(100% - ${custom_left_width}px)` : custom_left_width}}>
|
|
204
254
|
|
|
205
|
-
|
|
255
|
+
{!is_revert && <div className="page-left-area-toggle-btn" onClick={onContentToggle}><span className={"iconfont " + (contentToggle ? "icon-bchr-hcm-arrow-left-doubl" : "icon-bchr-hcm-arrow-right-doub")}></span></div>}
|
|
206
256
|
|
|
207
|
-
{
|
|
257
|
+
{is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
208
258
|
|
|
209
|
-
{grid_header
|
|
259
|
+
{grid_header && <div className="smart-grid-header">
|
|
210
260
|
|
|
211
|
-
|
|
261
|
+
{grid_header}
|
|
212
262
|
|
|
213
|
-
|
|
263
|
+
</div>}
|
|
214
264
|
|
|
215
|
-
|
|
265
|
+
{left_children}
|
|
216
266
|
|
|
217
|
-
<div className="smart-grid-footer
|
|
267
|
+
{grid_footer && <div className="smart-grid-footer">
|
|
218
268
|
|
|
219
|
-
|
|
269
|
+
<div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
|
|
220
270
|
|
|
221
|
-
|
|
271
|
+
<div className="smart-grid-footer-content">{grid_footer}</div>
|
|
222
272
|
|
|
223
|
-
|
|
273
|
+
</div>}
|
|
274
|
+
</Spin> : left_children}
|
|
275
|
+
</div>
|
|
276
|
+
<div className={
|
|
277
|
+
"page-right-area "
|
|
278
|
+
+ (is_revert ? "page-right-revert-area " :
|
|
279
|
+
" " + ('smart-' + (content_type ? content_type : 'grid') + ' ')
|
|
280
|
+
+ (grid_footer ? 'smart-grid-footer-container-show smart-grid-footer-container '
|
|
281
|
+
+ (footerToggle ? 'smart-grid-footer-show ' : 'smart-grid-footer-hide ') : ''))
|
|
282
|
+
+ (is_revert && (contentToggle ? "right-content-area-fixed-show " : "right-content-area-fixed-hide "))}
|
|
283
|
+
style={{width: is_revert ? custom_left_width : `calc(100% - ${custom_left_width}px)`}}>
|
|
224
284
|
|
|
225
|
-
|
|
285
|
+
{is_revert && <div className="page-right-area-toggle-btn" onClick={onContentToggle}><span className={"iconfont " + (contentToggle ? "icon-bchr-hcm-arrow-right-doub" : "icon-bchr-hcm-arrow-left-doubl")}></span></div>}
|
|
286
|
+
|
|
287
|
+
{!is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
|
|
288
|
+
|
|
289
|
+
{grid_header && <div className="smart-grid-header">
|
|
290
|
+
|
|
291
|
+
{grid_header}
|
|
292
|
+
|
|
293
|
+
</div>}
|
|
294
|
+
|
|
295
|
+
{right_children}
|
|
296
|
+
|
|
297
|
+
{grid_footer && <div className="smart-grid-footer">
|
|
226
298
|
|
|
227
|
-
|
|
299
|
+
<div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
|
|
300
|
+
|
|
301
|
+
<div className="smart-grid-footer-content">{grid_footer}</div>
|
|
302
|
+
|
|
303
|
+
</div>}
|
|
304
|
+
|
|
305
|
+
</Spin> : right_children}
|
|
306
|
+
|
|
307
|
+
</div>
|
|
308
|
+
|
|
309
|
+
</div>
|
|
310
|
+
}
|
|
228
311
|
|
|
229
312
|
{page_extra_content && <div className={"page-extra-content " + (page_extra_content_class_name ? page_extra_content_class_name + " " : " ")}>
|
|
230
313
|
|
package/src/style/bchr.less
CHANGED
|
@@ -257,6 +257,18 @@
|
|
|
257
257
|
}
|
|
258
258
|
}
|
|
259
259
|
|
|
260
|
+
.page-left-area-drag {
|
|
261
|
+
padding: 10px 10px 10px 0;
|
|
262
|
+
border-right: 1px solid #e5e5e5;
|
|
263
|
+
height: 100%;
|
|
264
|
+
overflow-y: auto;
|
|
265
|
+
position: relative;
|
|
266
|
+
|
|
267
|
+
&.page-left-revert-area {
|
|
268
|
+
width: calc(100% - 330px);
|
|
269
|
+
}
|
|
270
|
+
}
|
|
271
|
+
|
|
260
272
|
.page-right-area {
|
|
261
273
|
width: calc(100% - 330px);
|
|
262
274
|
padding: 10px;
|
|
@@ -924,7 +936,7 @@
|
|
|
924
936
|
}
|
|
925
937
|
}
|
|
926
938
|
|
|
927
|
-
@media screen and (max-width:
|
|
939
|
+
@media screen and (max-width: 1200px) {
|
|
928
940
|
.operating-filter {
|
|
929
941
|
.form-group-filter_group {
|
|
930
942
|
.form-group-input {
|