子表、关联表全屏

乔启韬
1 parent 7095a683
Showing 5 changed files with 79 additions and 15 deletions
es/core/RenderChildren/RenderList/VirtualList.js
es/core/RenderChildren/RenderList/list.css
lib/core/RenderChildren/RenderList/VirtualList.js
lib/core/RenderChildren/RenderList/list.css
package.json
--- a/es/core/RenderChildren/RenderList/VirtualList.js
View file @fda8c29
+++ b/es/core/RenderChildren/RenderList/VirtualList.js
View file @fda8c29
@@ -2,6 +2,8 @@ import "antd/es/table/style";
 import _Table from "antd/es/table";
 import "antd/es/alert/style";
 import _Alert from "antd/es/alert";
+import _FullscreenOutlined from "@ant-design/icons/es/icons/FullscreenOutlined";
+import _FullscreenExitOutlined from "@ant-design/icons/es/icons/FullscreenExitOutlined";
 import "antd/es/dropdown/style";
 import _Dropdown from "antd/es/dropdown";
 import "antd/es/space/style";
@@ -184,6 +186,11 @@ var VirtualList = function VirtualList(_ref) {
       searchName = _useState12[0],
       setSearchName = _useState12[1];
+  var _useState13 = useState(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isFullscreen = _useState14[0],
+      setFullscreen = _useState14[1];
+
   var padding = useMemo(function () {
     return size === 'default' ? 32 : 16;
   }, [size]);
@@ -416,11 +423,7 @@ var VirtualList = function VirtualList(_ref) {
         width: column.width ? parseInt(column.width) : FIELD_LENGTH,
         align: column.align || 'left',
         fixed: column.fixed || props.fixed && index < props.fixed,
-        title: /*#__PURE__*/React.createElement("div", {
-          style: {
-            width: (parseInt(column.width) || FIELD_LENGTH) - padding + "px"
-          }
-        }, schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+        title: /*#__PURE__*/React.createElement("div", null, schema.required ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
           className: "fr-label-required"
         }, " *"), /*#__PURE__*/React.createElement("span", null, schema.title)) : schema.title),
         render: function render(value, record, index) {
@@ -829,7 +832,9 @@ var VirtualList = function VirtualList(_ref) {
     }
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, props.editable ? isSubCanEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: isFullscreen ? 'qx-virtual_full' : ''
+  }, props.editable ? isSubCanEdit ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Button, {
     type: 'text',
     size: "small",
     icon: /*#__PURE__*/React.createElement(_CheckOutlined, null),
@@ -898,7 +903,18 @@ var VirtualList = function VirtualList(_ref) {
     style: {
       marginLeft: 8
     }
-  }, /*#__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) {
+  }, /*#__PURE__*/React.createElement(_Space, null, "\u66F4\u591A\u64CD\u4F5C", /*#__PURE__*/React.createElement(_DownOutlined, null)))) : null, schema.fullscreen !== false ? /*#__PURE__*/React.createElement(_Tooltip, {
+    title: isFullscreen ? '退出全屏' : '全屏'
+  }, /*#__PURE__*/React.createElement(_Button, {
+    type: 'icon',
+    icon: isFullscreen ? /*#__PURE__*/React.createElement(_FullscreenExitOutlined, null) : /*#__PURE__*/React.createElement(_FullscreenOutlined, null),
+    onClick: function onClick() {
+      setFullscreen(!isFullscreen);
+    },
+    style: {
+      marginLeft: 10
+    }
+  })) : null), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) {
     var callback = item.callback,
         text = item.text,
         html = item.html;
--- a/es/core/RenderChildren/RenderList/list.css
View file @fda8c29
+++ b/es/core/RenderChildren/RenderList/list.css
View file @fda8c29
@@ -97,3 +97,18 @@
   display: inline-block;
   margin: 15px;
 }
+.qx-virtual_full {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  background: #fff;
+}
+.qx-virtual_full .qx-virtual-searchLine {
+  padding: 8px;
+}
--- a/lib/core/RenderChildren/RenderList/VirtualList.js
View file @fda8c29
+++ b/lib/core/RenderChildren/RenderList/VirtualList.js
View file @fda8c29
@@ -13,6 +13,10 @@ require("antd/es/alert/style");
 var _alert = _interopRequireDefault(require("antd/es/alert"));
+var _FullscreenOutlined2 = _interopRequireDefault(require("@ant-design/icons/lib/icons/FullscreenOutlined"));
+
+var _FullscreenExitOutlined2 = _interopRequireDefault(require("@ant-design/icons/lib/icons/FullscreenExitOutlined"));
+
 require("antd/es/dropdown/style");
 var _dropdown = _interopRequireDefault(require("antd/es/dropdown"));
@@ -234,6 +238,11 @@ var VirtualList = function VirtualList(_ref) {
       searchName = _useState12[0],
       setSearchName = _useState12[1];
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = _slicedToArray(_useState13, 2),
+      isFullscreen = _useState14[0],
+      setFullscreen = _useState14[1];
+
   var padding = (0, _react.useMemo)(function () {
     return size === 'default' ? 32 : 16;
   }, [size]);
@@ -468,11 +477,7 @@ var VirtualList = function VirtualList(_ref) {
         width: column.width ? parseInt(column.width) : FIELD_LENGTH,
         align: column.align || 'left',
         fixed: column.fixed || props.fixed && index < props.fixed,
-        title: /*#__PURE__*/_react.default.createElement("div", {
-          style: {
-            width: (parseInt(column.width) || FIELD_LENGTH) - padding + "px"
-          }
-        }, schema.required ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+        title: /*#__PURE__*/_react.default.createElement("div", null, schema.required ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
           className: "fr-label-required"
         }, " *"), /*#__PURE__*/_react.default.createElement("span", null, schema.title)) : schema.title),
         render: function render(value, record, index) {
@@ -881,7 +886,9 @@ var VirtualList = function VirtualList(_ref) {
     }
   };
-  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, {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: isFullscreen ? 'qx-virtual_full' : ''
+  }, props.editable ? isSubCanEdit ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_button.default, {
     type: 'text',
     size: "small",
     icon: /*#__PURE__*/_react.default.createElement(_CheckOutlined2.default, null),
@@ -950,7 +957,18 @@ var VirtualList = function VirtualList(_ref) {
     style: {
       marginLeft: 8
     }
-  }, /*#__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) {
+  }, /*#__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, {
+    title: isFullscreen ? '退出全屏' : '全屏'
+  }, /*#__PURE__*/_react.default.createElement(_button.default, {
+    type: 'icon',
+    icon: isFullscreen ? /*#__PURE__*/_react.default.createElement(_FullscreenExitOutlined2.default, null) : /*#__PURE__*/_react.default.createElement(_FullscreenOutlined2.default, null),
+    onClick: function onClick() {
+      setFullscreen(!isFullscreen);
+    },
+    style: {
+      marginLeft: 10
+    }
+  })) : null), Array.isArray(props.buttons) ? props.buttons.map(function (item, idx) {
     var callback = item.callback,
         text = item.text,
         html = item.html;
--- a/lib/core/RenderChildren/RenderList/list.css
View file @fda8c29
+++ b/lib/core/RenderChildren/RenderList/list.css
View file @fda8c29
@@ -97,3 +97,18 @@
   display: inline-block;
   margin: 15px;
 }
+.qx-virtual_full {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  background: #fff;
+}
+.qx-virtual_full .qx-virtual-searchLine {
+  padding: 8px;
+}
--- a/package.json
View file @fda8c29
+++ b/package.json
View file @fda8c29
 {
   "name": "@qx/form-render",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "description": "通过 JSON Schema 生成标准 Form，常用于自定义搭建配置界面生成",
   "repository": {
     "type": "git",