@bchr/bchr-front-lib 0.3.151 → 0.3.152

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 (7) hide show
  1. package/lib/base/layout/ui_tpl/page/components/CustomLeftRightView.js +83 -1
  2. package/lib/base/layout/ui_tpl/page/components/LeftRightView.js +60 -2
  3. package/lib/style/bchr.less +12 -0
  4. package/package.json +3 -2
  5. package/src/base/layout/ui_tpl/page/components/CustomLeftRightView.js +191 -67
  6. package/src/base/layout/ui_tpl/page/components/LeftRightView.js +131 -48
  7. package/src/style/bchr.less +12 -0
package/lib/base/layout/ui_tpl/page/components/CustomLeftRightView.js CHANGED
@@ -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: {
package/lib/base/layout/ui_tpl/page/components/LeftRightView.js CHANGED
@@ -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;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bchr/bchr-front-lib",
3
- "version": "0.3.151",
3
+ "version": "0.3.152",
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
-
package/src/base/layout/ui_tpl/page/components/CustomLeftRightView.js CHANGED
@@ -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
- <div className={
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
- <div style={{width: is_revert ? `calc(100% - ${custom_left_width}px)` : custom_left_width}}
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
- {!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>}
139
+ {grid_header && <div className="smart-grid-header">
128
140
 
129
- {is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
141
+ {grid_header}
130
142
 
131
- {grid_header && <div className="smart-grid-header">
143
+ </div>}
132
144
 
133
- {grid_header}
145
+ {left_children}
134
146
 
135
- </div>}
147
+ </Spin> : left_children}
136
148
 
137
- {left_children}
149
+ </div>
138
150
 
139
- </Spin> : left_children}
151
+ <div style={{width: `100%`}}
152
+ className={
153
+ "page-right-area "
154
+ + (grid_footer ? (footerToggle ? ' smart-grid-footer-container-show ' : '') : '')}>
140
155
 
141
- </div>
156
+ {(page_title || page_filter || page_btn_group) &&
157
+ <div className={"operating-area " + (bordered ? "operating-area-border " : " ")}>
142
158
 
143
- <div style={{width: is_revert ? custom_left_width : `calc(100% - ${custom_left_width}px)`}}
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
- {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>}
161
+ {page_title_extra_content && <div className="operating-title-extra-content">{page_title_extra_content}</div>}
151
162
 
152
- {(page_title || page_filter || page_btn_group) &&
153
- <div className={"operating-area " + (bordered ? "operating-area-border " : " ")}>
163
+ {page_filter && <div className="operating-filter">
154
164
 
155
- {page_title && <div className="operating-title"><span>{page_title}</span></div>}
165
+ {page_filter}
156
166
 
157
- {page_title_extra_content && <div className="operating-title-extra-content">{page_title_extra_content}</div>}
167
+ {page_filter_extra_content && !filterToggle && <ButtonGroup>
158
168
 
159
- {page_filter && <div className="operating-filter">
169
+ <Button className={"default-btn"} onClick={onFilterOkCallBack}>
170
+ <span className={"iconfont icon-bchr-search"}></span>搜索
171
+ </Button>
160
172
 
161
- {page_filter}
173
+ </ButtonGroup>}
162
174
 
163
- {page_filter_extra_content && !filterToggle && <ButtonGroup>
175
+ </div>}
164
176
 
165
- <Button className={"default-btn"} onClick={onFilterOkCallBack}>
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
- </ButtonGroup>}
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
- </div>}
183
+ </div>}
172
184
 
173
- {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>}
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
- {page_btn_group && <div className={"operating-btn-group " + (!page_filter ? "operating-not-filter-btn-group " : " ")}>
176
- {page_btn_group}
177
- </div>}
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
- </div>}
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
- {page_filter_extra_content && <div className={"operating-filter-extra-content " + (filterToggle ? "operating-filter-extra-content-show " : "operating-filter-extra-content-hide ")}>
210
+ {!is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
182
211
 
183
- <Row className="operating-filter-extra-groups">
212
+ {grid_header && <div className="smart-grid-header">
184
213
 
185
- {page_filter_extra_content}
214
+ {grid_header}
186
215
 
187
- <ButtonGroup className="operating-filter-extra-btns">
216
+ </div>}
188
217
 
189
- <Button className="default-btn" onClick={onFilterOkCallBack}>
190
- <span className="iconfont icon-bchr-search"></span>搜索
191
- </Button>
218
+ {right_children}
192
219
 
193
- </ButtonGroup>
220
+ {grid_footer && <div className="smart-grid-footer">
194
221
 
195
- </Row>
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
- </div>}
224
+ <div className="smart-grid-footer-content">{grid_footer}</div>
198
225
 
199
- <div className={
200
- 'content-area inner-content-area '
201
- + (page_filter_extra_content ? 'content-area-filter-extra ' : ' ')
202
- + ('smart-' + (content_type ? content_type : 'grid') + ' ')
203
- + (page_title || page_filter || page_btn_group ? '' : 'not-operating-content-area ')
204
- + (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '')}>
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 ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
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
- {right_children}
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
- {grid_footer && <div className="smart-grid-footer">
281
+ {page_filter && <div className="operating-filter">
217
282
 
218
- <div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
283
+ {page_filter}
219
284
 
220
- <div className="smart-grid-footer-content">{grid_footer}</div>
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
- </Spin> : right_children}
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
- </div>
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 || '努力加载中...'}>
package/src/base/layout/ui_tpl/page/components/LeftRightView.js CHANGED
@@ -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
- <div className={
156
- "content-area "
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
- "page-left-area "
166
- + (is_revert ?
167
- "page-left-revert-area "
168
- + ('smart-' + (content_type ? content_type : 'grid') + ' ')
169
- + (grid_footer ? 'smart-grid-footer-container ' + (footerToggle ? 'smart-grid-footer-show' : 'smart-grid-footer-hide') : '') : " ")
170
- + (!is_revert && (contentToggle ? "left-content-area-fixed-show " : "left-content-area-fixed-hide "))}
171
- style={{width: is_revert ? `calc(100% - ${custom_left_width}px)` : custom_left_width}}>
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
- {!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>}
194
+ {grid_footer && <div className="smart-grid-footer">
174
195
 
175
- {is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
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
- {grid_header && <div className="smart-grid-header">
198
+ <div className="smart-grid-footer-content">{grid_footer}</div>
178
199
 
179
- {grid_header}
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
- </div>}
210
+ {!is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
182
211
 
183
- {left_children}
212
+ {grid_header && <div className="smart-grid-header">
184
213
 
185
- {grid_footer && <div className="smart-grid-footer">
214
+ {grid_header}
186
215
 
187
- <div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
216
+ </div>}
188
217
 
189
- <div className="smart-grid-footer-content">{grid_footer}</div>
218
+ {right_children}
190
219
 
191
- </div>}
192
- </Spin> : left_children}
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
- "page-right-area "
196
- + (is_revert ? "page-right-revert-area " :
197
- " " + ('smart-' + (content_type ? content_type : 'grid') + ' ')
198
- + (grid_footer ? 'smart-grid-footer-container-show smart-grid-footer-container '
199
- + (footerToggle ? 'smart-grid-footer-show ' : 'smart-grid-footer-hide ') : ''))
200
- + (is_revert && (contentToggle ? "right-content-area-fixed-show " : "right-content-area-fixed-hide "))}
201
- style={{width: is_revert ? custom_left_width : `calc(100% - ${custom_left_width}px)`}}>
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
- {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>}
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
- {!is_revert ? <Spin spinning={loading} tip={loading_tips || '努力加载中...'}>
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
- {grid_header && <div className="smart-grid-header">
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
- </div>}
261
+ {grid_header}
212
262
 
213
- {right_children}
263
+ </div>}
214
264
 
215
- {grid_footer && <div className="smart-grid-footer">
265
+ {left_children}
216
266
 
217
- <div className="smart-grid-footer-toggle-btn" onClick={onGridFooterChange}><span className={'iconfont ' + (footerToggle ? 'icon-bchr-up1' : 'icon-bchr-down1')}></span>{footerToggle ? '收起' : '展开'}</div>
267
+ {grid_footer && <div className="smart-grid-footer">
218
268
 
219
- <div className="smart-grid-footer-content">{grid_footer}</div>
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
- </div>}
271
+ <div className="smart-grid-footer-content">{grid_footer}</div>
222
272
 
223
- </Spin> : right_children}
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
- </div>
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
- </div>
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;