Showing
5 changed files
with
79 additions
and
15 deletions
... | ... | @@ -2,6 +2,8 @@ import "antd/es/table/style"; |
2 | 2 | import _Table from "antd/es/table"; |
3 | 3 | import "antd/es/alert/style"; |
4 | 4 | import _Alert from "antd/es/alert"; |
5 | +import _FullscreenOutlined from "@ant-design/icons/es/icons/FullscreenOutlined"; | |
6 | +import _FullscreenExitOutlined from "@ant-design/icons/es/icons/FullscreenExitOutlined"; | |
5 | 7 | import "antd/es/dropdown/style"; |
6 | 8 | import _Dropdown from "antd/es/dropdown"; |
7 | 9 | import "antd/es/space/style"; |
... | ... | @@ -184,6 +186,11 @@ var VirtualList = function VirtualList(_ref) { |
184 | 186 | searchName = _useState12[0], |
185 | 187 | setSearchName = _useState12[1]; |
186 | 188 | |
189 | + var _useState13 = useState(false), | |
190 | + _useState14 = _slicedToArray(_useState13, 2), | |
191 | + isFullscreen = _useState14[0], | |
192 | + setFullscreen = _useState14[1]; | |
193 | + | |
187 | 194 | var padding = useMemo(function () { |
188 | 195 | return size === 'default' ? 32 : 16; |
189 | 196 | }, [size]); |
... | ... | @@ -416,11 +423,7 @@ var VirtualList = function VirtualList(_ref) { |
416 | 423 | width: column.width ? parseInt(column.width) : FIELD_LENGTH, |
417 | 424 | align: column.align || 'left', |
418 | 425 | fixed: column.fixed || props.fixed && index < props.fixed, |
419 | - title: /*#__PURE__*/React.createElement("div", { | |
420 | - style: { | |
421 | - width: (parseInt(column.width) || FIELD_LENGTH) - padding + "px" | |
422 | - } | |
423 | - }, schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { | |
426 | + title: /*#__PURE__*/React.createElement("div", null, schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", { | |
424 | 427 | className: "fr-label-required" |
425 | 428 | }, " *"), /*#__PURE__*/React.createElement("span", null, schema.title)) : schema.title), |
426 | 429 | render: function render(value, record, index) { |
... | ... | @@ -829,7 +832,9 @@ var VirtualList = function VirtualList(_ref) { |
829 | 832 | } |
830 | 833 | }; |
831 | 834 | |
832 | - return /*#__PURE__*/React.createElement(React.Fragment, null, props.editable ? isSubCanEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, { | |
835 | + return /*#__PURE__*/React.createElement("div", { | |
836 | + className: isFullscreen ? 'qx-virtual_full' : '' | |
837 | + }, props.editable ? isSubCanEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, { | |
833 | 838 | type: 'text', |
834 | 839 | size: "small", |
835 | 840 | icon: /*#__PURE__*/React.createElement(_CheckOutlined, null), |
... | ... | @@ -898,7 +903,18 @@ var VirtualList = function VirtualList(_ref) { |
898 | 903 | style: { |
899 | 904 | marginLeft: 8 |
900 | 905 | } |
901 | - }, /*#__PURE__*/React.createElement(_Space, null, "\u66F4\u591A\u64CD\u4F5C", /*#__PURE__*/React.createElement(_DownOutlined, null)))) : null), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
906 | + }, /*#__PURE__*/React.createElement(_Space, null, "\u66F4\u591A\u64CD\u4F5C", /*#__PURE__*/React.createElement(_DownOutlined, null)))) : null, schema.fullscreen !== false ? /*#__PURE__*/React.createElement(_Tooltip, { | |
907 | + title: isFullscreen ? '退出全屏' : '全屏' | |
908 | + }, /*#__PURE__*/React.createElement(_Button, { | |
909 | + type: 'icon', | |
910 | + icon: isFullscreen ? /*#__PURE__*/React.createElement(_FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(_FullscreenOutlined, null), | |
911 | + onClick: function onClick() { | |
912 | + setFullscreen(!isFullscreen); | |
913 | + }, | |
914 | + style: { | |
915 | + marginLeft: 10 | |
916 | + } | |
917 | + })) : null), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
902 | 918 | var callback = item.callback, |
903 | 919 | text = item.text, |
904 | 920 | html = item.html; | ... | ... |
... | ... | @@ -97,3 +97,18 @@ |
97 | 97 | display: inline-block; |
98 | 98 | margin: 15px; |
99 | 99 | } |
100 | +.qx-virtual_full { | |
101 | + position: fixed; | |
102 | + top: 0; | |
103 | + left: 0; | |
104 | + bottom: 0; | |
105 | + right: 0; | |
106 | + z-index: 999; | |
107 | + width: 100vw; | |
108 | + height: 100vh; | |
109 | + overflow: auto; | |
110 | + background: #fff; | |
111 | +} | |
112 | +.qx-virtual_full .qx-virtual-searchLine { | |
113 | + padding: 8px; | |
114 | +} | ... | ... |
... | ... | @@ -13,6 +13,10 @@ require("antd/es/alert/style"); |
13 | 13 | |
14 | 14 | var _alert = _interopRequireDefault(require("antd/es/alert")); |
15 | 15 | |
16 | +var _FullscreenOutlined2 = _interopRequireDefault(require("@ant-design/icons/lib/icons/FullscreenOutlined")); | |
17 | + | |
18 | +var _FullscreenExitOutlined2 = _interopRequireDefault(require("@ant-design/icons/lib/icons/FullscreenExitOutlined")); | |
19 | + | |
16 | 20 | require("antd/es/dropdown/style"); |
17 | 21 | |
18 | 22 | var _dropdown = _interopRequireDefault(require("antd/es/dropdown")); |
... | ... | @@ -234,6 +238,11 @@ var VirtualList = function VirtualList(_ref) { |
234 | 238 | searchName = _useState12[0], |
235 | 239 | setSearchName = _useState12[1]; |
236 | 240 | |
241 | + var _useState13 = (0, _react.useState)(false), | |
242 | + _useState14 = _slicedToArray(_useState13, 2), | |
243 | + isFullscreen = _useState14[0], | |
244 | + setFullscreen = _useState14[1]; | |
245 | + | |
237 | 246 | var padding = (0, _react.useMemo)(function () { |
238 | 247 | return size === 'default' ? 32 : 16; |
239 | 248 | }, [size]); |
... | ... | @@ -468,11 +477,7 @@ var VirtualList = function VirtualList(_ref) { |
468 | 477 | width: column.width ? parseInt(column.width) : FIELD_LENGTH, |
469 | 478 | align: column.align || 'left', |
470 | 479 | fixed: column.fixed || props.fixed && index < props.fixed, |
471 | - title: /*#__PURE__*/_react.default.createElement("div", { | |
472 | - style: { | |
473 | - width: (parseInt(column.width) || FIELD_LENGTH) - padding + "px" | |
474 | - } | |
475 | - }, schema.required ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", { | |
480 | + title: /*#__PURE__*/_react.default.createElement("div", null, schema.required ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", { | |
476 | 481 | className: "fr-label-required" |
477 | 482 | }, " *"), /*#__PURE__*/_react.default.createElement("span", null, schema.title)) : schema.title), |
478 | 483 | render: function render(value, record, index) { |
... | ... | @@ -881,7 +886,9 @@ var VirtualList = function VirtualList(_ref) { |
881 | 886 | } |
882 | 887 | }; |
883 | 888 | |
884 | - return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.editable ? isSubCanEdit ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, { | |
889 | + return /*#__PURE__*/_react.default.createElement("div", { | |
890 | + className: isFullscreen ? 'qx-virtual_full' : '' | |
891 | + }, props.editable ? isSubCanEdit ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, { | |
885 | 892 | type: 'text', |
886 | 893 | size: "small", |
887 | 894 | icon: /*#__PURE__*/_react.default.createElement(_CheckOutlined2.default, null), |
... | ... | @@ -950,7 +957,18 @@ var VirtualList = function VirtualList(_ref) { |
950 | 957 | style: { |
951 | 958 | marginLeft: 8 |
952 | 959 | } |
953 | - }, /*#__PURE__*/_react.default.createElement(_space.default, null, "\u66F4\u591A\u64CD\u4F5C", /*#__PURE__*/_react.default.createElement(_DownOutlined2.default, null)))) : null), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
960 | + }, /*#__PURE__*/_react.default.createElement(_space.default, null, "\u66F4\u591A\u64CD\u4F5C", /*#__PURE__*/_react.default.createElement(_DownOutlined2.default, null)))) : null, schema.fullscreen !== false ? /*#__PURE__*/_react.default.createElement(_tooltip.default, { | |
961 | + title: isFullscreen ? '退出全屏' : '全屏' | |
962 | + }, /*#__PURE__*/_react.default.createElement(_button.default, { | |
963 | + type: 'icon', | |
964 | + icon: isFullscreen ? /*#__PURE__*/_react.default.createElement(_FullscreenExitOutlined2.default, null) : /*#__PURE__*/_react.default.createElement(_FullscreenOutlined2.default, null), | |
965 | + onClick: function onClick() { | |
966 | + setFullscreen(!isFullscreen); | |
967 | + }, | |
968 | + style: { | |
969 | + marginLeft: 10 | |
970 | + } | |
971 | + })) : null), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) { | |
954 | 972 | var callback = item.callback, |
955 | 973 | text = item.text, |
956 | 974 | html = item.html; | ... | ... |
... | ... | @@ -97,3 +97,18 @@ |
97 | 97 | display: inline-block; |
98 | 98 | margin: 15px; |
99 | 99 | } |
100 | +.qx-virtual_full { | |
101 | + position: fixed; | |
102 | + top: 0; | |
103 | + left: 0; | |
104 | + bottom: 0; | |
105 | + right: 0; | |
106 | + z-index: 999; | |
107 | + width: 100vw; | |
108 | + height: 100vh; | |
109 | + overflow: auto; | |
110 | + background: #fff; | |
111 | +} | |
112 | +.qx-virtual_full .qx-virtual-searchLine { | |
113 | + padding: 8px; | |
114 | +} | ... | ... |