tntd 1.3.53 → 1.3.54

package/components/Page/Box.js

@@ -4,7 +4,7 @@ import { addUnitForValue } from './utils';
 
 const Box = ({
     inLayout,
-    clsPrefix,
+    clsPrefix = 'tnt-page',
     children,
     noPadding = false,
     headerHeight,
@@ -46,8 +46,8 @@ const Box = ({
             bordered={bordered}
             bodyStyle={{
                 ...bodyStyle,
-                overflow: 'auto',
-                height: inLayout ? 'auto' : cardBodyHeight
+                // overflow: 'auto',
+                height: inLayout ? `calc(100% - ${headerHeight})` : cardBodyHeight
             }}
             size={size}
             headStyle={headStyle}

package/components/Page/README.md

@@ -67,8 +67,8 @@ const Demo = (props) => {
       <h3>第三种场景， 无标题栏</h3>
 
       <Page height="400px">
-        <Box title='分组列表' extra={<Button type="primary" size="small">添加</Button>}>第一列</Box>
-        <Box mode="white" title='菜单列表' extra={<Button type="primary" size="small">添加</Button>}>第二列</Box>
+        <Box title='分组列表' extra={<Button type="primary" size='small'>添加</Button>}>第一列</Box>
+        <Box mode="white" title='菜单列表' extra={<Button type="primary" size='small'>添加</Button>}>第二列</Box>
         <Box title="系统列表">第三列</Box>
         <Box title="功能注册">第四列</Box>
       </Page>
@@ -86,7 +86,13 @@ const Demo = (props) => {
             // extra={right}
             inLayout
         >
-            <Box title="系统列表" width={320}>第三列</Box>
+            <Box 
+                title="系统列表" 
+                width={320}
+                mode='white'
+            >
+                第三列
+            </Box>
             <Box title="功能注册">
                 第四列<br/>
                 第四列<br/>
@@ -114,7 +120,14 @@ const Demo = (props) => {
                 第四列<br/>
                 第四列<br/>
                 第四列<br/>
-                第四列<br/>
+                第四列end
+            </Box>
+             <Box 
+                title="系统列表" 
+                width={200}
+                mode='white'
+            >
+                第三列
             </Box>
         </Page>
       </Layout>
@@ -154,7 +167,6 @@ ReactDOM.render(<Demo />, document.getElementById('root'))
 
 
 
-
 #### Page.Box
 
 描述：Page.Box包裹了antd库中的Card组件，Box属性都会透传到Card组件。

package/components/Page/index.js

@@ -62,9 +62,9 @@ const PageLayout = ({
     console.log(boxCount);
 
     whiteCols = childrenToArray?.filter(({ props }) => props?.mode === 'white')?.length;
-    const total = childrenToArray?.length;
+    const total = childrenToArray?.length + 5;
     let startIndex = total - whiteCols - 1;
-    let endIndex = total - 1;
+    let endIndex = total - 2;
     const headerStyle = {
         height: computedHeaderHeight,
         padding: `${size === 'small' ? 20 : 24}px`,
@@ -140,7 +140,7 @@ const PageLayout = ({
                     const style = {
                         flex: computeWidth(width),
                         // 设置cols层级关系
-                        zIndex: mode === 'gray' ? startIndex-- : endIndex--
+                        zIndex: mode === 'gray' ? endIndex-- : startIndex++
                     };
 
                     const className = cn(`${clsPrefix}-box ${clsPrefix}-box-${mode}`);

package/components/Page/index.less

@@ -1,26 +1,46 @@
+.large-size > .ant-layout-content {
+    .tnt-page.in-layout {
+        height: calc(100vh - 60px);
+    }
+}
 .tnt-page {
     position: relative;
     width: 100%;
     height: 100%;
     overflow-y: hidden;
 
+    &.in-layout {
+        box-shadow: none;
+        height: calc(100vh - 50px);
+        .tnt-page-box,
+        .tnt-page-box > .ant-card {
+            height: 100%;
+        }
+        .tnt-page-content .tnt-page-box .ant-card .ant-card-body {
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+    }
+
     &-box-white {
         z-index: 1;
         background: #f3f5f6;
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 10px 12px 2px rgba(170, 182, 206, 0.2);
-        .inLayout & {
-            background: #fbfcfe;
-            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 2px rgba(170, 182, 206, 0.2);
+
+        .in-layout & {
+            background: #fafbfc;
         }
     }
 
+
     &-box-gray {
         background: #e8ebed;
         box-shadow: 0 10px 12px 2px rgba(0, 0, 0, 0.1);
 
-        .inLayout & {
+        .in-layout & {
             background: #f8f9fa;
-            box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.1);
+            // box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
         }
     }
 
@@ -36,7 +56,7 @@
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1),
                     0 10px 6px 0 rgba(170, 182, 206, 0.2);
 
-        .inLayout & {
+        .in-layout & {
             background: #ffffff;
             box-shadow: none;
         }
@@ -76,9 +96,13 @@
         .ant-card-head {
             border-bottom: 1px solid #e0e0e0;
             margin-bottom: 0;
-            height: 60px;
+            // height: 60px;
             .small & {
                 height: 40px;
+                line-height: 40px;
+            }
+            .ant-card-head-title {
+                font-weight: normal;
             }
         }
         .ant-card-body {

package/lib/Page/Box.js

@@ -29,7 +29,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 var Box = function Box(_ref) {
   var inLayout = _ref.inLayout,
-      clsPrefix = _ref.clsPrefix,
+      _ref$clsPrefix = _ref.clsPrefix,
+      clsPrefix = _ref$clsPrefix === void 0 ? 'tnt-page' : _ref$clsPrefix,
       children = _ref.children,
       _ref$noPadding = _ref.noPadding,
       noPadding = _ref$noPadding === void 0 ? false : _ref$noPadding,
@@ -73,8 +74,8 @@ var Box = function Box(_ref) {
     className: "".concat(clsPrefix, "-box-card"),
     bordered: bordered,
     bodyStyle: _objectSpread({}, bodyStyle, {
-      overflow: 'auto',
-      height: inLayout ? 'auto' : cardBodyHeight
+      // overflow: 'auto',
+      height: inLayout ? "calc(100% - ".concat(headerHeight, ")") : cardBodyHeight
     }),
     size: size,
     headStyle: headStyle

package/lib/Page/README.md

@@ -67,8 +67,8 @@ const Demo = (props) => {
       <h3>第三种场景， 无标题栏</h3>
 
       <Page height="400px">
-        <Box title='分组列表' extra={<Button type="primary" size="small">添加</Button>}>第一列</Box>
-        <Box mode="white" title='菜单列表' extra={<Button type="primary" size="small">添加</Button>}>第二列</Box>
+        <Box title='分组列表' extra={<Button type="primary" size='small'>添加</Button>}>第一列</Box>
+        <Box mode="white" title='菜单列表' extra={<Button type="primary" size='small'>添加</Button>}>第二列</Box>
         <Box title="系统列表">第三列</Box>
         <Box title="功能注册">第四列</Box>
       </Page>
@@ -86,7 +86,13 @@ const Demo = (props) => {
             // extra={right}
             inLayout
         >
-            <Box title="系统列表" width={320}>第三列</Box>
+            <Box 
+                title="系统列表" 
+                width={320}
+                mode='white'
+            >
+                第三列
+            </Box>
             <Box title="功能注册">
                 第四列<br/>
                 第四列<br/>
@@ -114,7 +120,14 @@ const Demo = (props) => {
                 第四列<br/>
                 第四列<br/>
                 第四列<br/>
-                第四列<br/>
+                第四列end
+            </Box>
+             <Box 
+                title="系统列表" 
+                width={200}
+                mode='white'
+            >
+                第三列
             </Box>
         </Page>
       </Layout>
@@ -154,7 +167,6 @@ ReactDOM.render(<Demo />, document.getElementById('root'))
 
 
 
-
 #### Page.Box
 
 描述：Page.Box包裹了antd库中的Card组件，Box属性都会透传到Card组件。

package/lib/Page/demo.js

@@ -0,0 +1,302 @@
+import React from 'react';
+import cn from 'classnames';
+<<<<<<< HEAD
+import styled from 'styled-components';
+import { Icon } from "antd";
+=======
+>>>>>>> b0d5e9811a677a0f26474e1b615ccac1683b6dec
+import { computeWidth, addUnitForValue } from './utils';
+import Box from './Box';
+import './index.less';
+
+<<<<<<< HEAD
+const PageWrapper = styled.div`
+  position: relative;
+  width: 100%;
+  overflow-y: hidden;
+  .box-white {
+    z-index: 1;
+    background: ${(props) => `${props.inLayout ? '#fbfcfe' : '#f3f5f6'}`};
+    box-shadow: ${(props) => {
+        let boxShadow = '0 0 6px 0 rgba(0, 0, 0, 0.1), 0 10px 12px 2px rgba(170, 182, 206, 0.2)';
+        if (props.inLayout) {
+            boxShadow = '0 0 4px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 2px rgba(170, 182, 206, 0.2)';
+        }
+        return boxShadow;
+    }};
+  }
+  .box-gray {
+    background: ${(props) => `${props.inLayout ? '#f8f9fa' : '#e8ebed'}`};
+    // box-shadow: 0 10px 12px 2px rgba(0, 0, 0, 0.1);
+    box-shadow: ${(props) => `${props.inLayout ? '0 5px 5px 2px rgba(0, 0, 0, 0.1)' : '0 10px 12px 2px rgba(0, 0, 0, 0.1)'}`};
+  }
+`;
+const HeaderWrapper = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: ${(props) => `${props.headerHeight}`};
+  padding: ${(props) => `${props.size === 'small' ? 20 : 24}px`};
+  z-index: ${(props) => `${props.zIndex}`};
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  background: ${(props) => `${props.inLayout ? '#ffffff' : '#f0f2f3'}`};
+  box-shadow: ${(props) =>
+        `${props.inLayout
+            ? 'none'
+            : '0 0 6px 0 rgba(0, 0, 0, 0.1),0 10px 6px 0 rgba(170, 182, 206, 0.2)'
+        }`};
+`;
+const ContentWrapper = styled.div`
+  display: ${(props) => `${props.boxCount > 0 ? 'flex' : 'block'}`};;
+  flex-direction: row;
+  width: 100%;
+  margin-top: ${(props) => `${props.contentMarginTop}`};
+  padding: ${(props) => `${props.contentPadding}`};
+  position: relative;
+  z-index:0;
+`;
+const Section = styled.div`
+  display: flex;
+  align-items: center;
+  &:nth-child(1) > * {
+    margin-right: 10px;
+  }
+  &:nth-child(2) > * {
+    margin: 0 5px;
+  }
+  &:nth-child(3) > * {
+    margin-left: 10px;
+  }
+`;
+
+const GoBack = styled.div`
+  position: relative;
+  display: inline-block;
+  margin-right: 40px !important;
+  cursor: pointer;
+  &::after {
+    content: "";
+    position: absolute;
+    width: 1px;
+    height: 16px;
+    right: -20px;
+    top: 50%;
+    transform: translateY(-50%);
+    background-color: #dcdfe6;
+  }
+  &:hover {
+      &,i {
+        color: #126BFB;
+      }
+  }
+  i {
+    font-size: 14px;
+    margin-right: 6px;
+    color: #4c4c4c;
+  }
+  span {
+    font-size: 14px;
+    font-weight: normal;
+  }
+`;
+
+const BoxWrapper = styled.div`
+  overflow: auto;
+`;
+=======
+const clsPrefix = 'tnt-page';
+>>>>>>> b0d5e9811a677a0f26474e1b615ccac1683b6dec
+
+const PageLayout = ({
+    className,
+    height = '100vh',
+    headerHeight = 50,
+    children,
+    title,
+    goBack,
+    goBackText,
+    center,
+    extra,
+    size = 'small',
+    inLayout = false,
+    className,
+    ...restProps
+}) => {
+    // 如果传入只有数字，需要默认加px
+    let computedHeaderHeight = addUnitForValue(headerHeight);
+    let computedHeight = addUnitForValue(height);
+
+    // 判断是否有标题栏
+    if (!(title || extra || center)) {
+        computedHeaderHeight = '0px';
+    }
+
+    if (inLayout) {
+        computedHeaderHeight = '40px';
+    }
+
+    // 计算中间的zIndex，灰色递减，白色递增
+    let whiteCols = 0;
+    let childrenToArray = [];
+
+    // 计算children type是box的数量
+    let boxCount = 0;
+
+    // 如果children是单个节点，统一转为数组处理计算层级
+    console.log('children', children);
+
+    if (typeof children === 'object') {
+        childrenToArray = [children];
+    } else if (Array.isArray(children)) {
+        childrenToArray = [...children];
+    }
+
+    console.log('React.Children', React.Children);
+    React.Children.map(children, (child) => {
+        if (child.type === Box) {
+            boxCount += 1;
+        }
+    });
+
+    console.log(boxCount);
+
+    whiteCols = childrenToArray?.filter(({ props }) => props?.mode === 'white')?.length;
+    const total = childrenToArray?.length;
+    let startIndex = total - whiteCols - 1;
+    let endIndex = total - 1;
+    const headerStyle = {
+        height: computedHeaderHeight,
+        padding: `${size === 'small' ? 20 : 24}px`,
+        zIndex: total || 2
+    };
+    const contentStyle = {
+        display: boxCount > 0 ? 'flex' : 'block',
+        marginTop: computedHeaderHeight,
+        padding: inLayout ? '16px 20px' : '0px'
+    };
+
+    return (
+<<<<<<< HEAD
+        <PageWrapper
+            className={cn('tntd-page-wrap', className)}
+            height={computedHeight}
+            inLayout={inLayout}
+            {...restProps}
+        >
+            {
+                (title || center || extra) &&
+                <HeaderWrapper
+                    headerHeight={computedHeaderHeight}
+                    size={size}
+                    zIndex={total || 2}
+                    inLayout={inLayout}
+                    className='page-header-wrap'
+                >
+                    {
+                        title &&
+                        <Section className='page-header-title'>
+                            {
+                                goBack &&
+                                <GoBack
+                                    className='page-header-title-back'
+                                    onClick={() => {
+                                        goBack();
+                                    }}
+                                >
+                                    <Icon type="left" />
+                                    <span>{goBackText ? goBackText : '返回'}</span>
+                                </GoBack>
+                            }
+                            {title}
+                        </Section>
+                    }
+                    {
+                        center &&
+                        <Section className='page-header-center'>{center}</Section>
+                    }
+                    {
+                        extra &&
+                        <Section className='page-header-extra'>{extra}</Section>
+                    }
+                </HeaderWrapper>
+            }
+
+            <ContentWrapper
+                contentMarginTop={computedHeaderHeight}
+                contentPadding={inLayout ? '16px 20px' : '0px'}
+                boxCount={boxCount}
+                className='page-body-wrap'
+            >
+=======
+        <div
+                    className={
+                        cn(clsPrefix, {
+                            [className]: className,
+                            inLayout
+                        })
+                    }
+                    {...restProps}
+                >
+                    {
+                        (title || center || extra) && (
+                            <div className={`${clsPrefix}-header`} style={headerStyle}>
+                                {
+                                    [title, center, extra].filter(
+                                        item => !!item
+                                    ).map(item => (
+                                        <div className={`${clsPrefix}-header-section`}>
+                                            {item}
+                                        </div>
+                                    ))
+                                }
+                            </div>
+                        )
+                    }
+                    <div className={`${clsPrefix}-content`} style={contentStyle}>
+>>>>>>> b0d5e9811a677a0f26474e1b615ccac1683b6dec
+                        {React.Children.map(children, (child) => {
+                            // 如果children不是Box,就不需要多列布局
+                            if (!child.type) {
+                                // console.log("没有type");
+                                return React.cloneElement(<div>{child}</div>);
+                            }
+
+                            const extraProps = {
+                                headerHeight: computedHeaderHeight,
+                                size,
+                                height: computedHeight,
+                                contentTotalMargin: inLayout ? '32px' : '0px',
+                                ...child.props
+                            };
+
+                            if (child.type !== Box) {
+                                return React.cloneElement(child, extraProps);
+                            }
+
+                            const { mode = 'gray', width } = child.props;
+
+                            const style = {
+                                flex: computeWidth(width),
+                                // 设置cols层级关系
+                                zIndex: mode === 'gray' ? startIndex-- : endIndex--
+                            };
+
+                            const className = cn(`${clsPrefix}-box ${clsPrefix}-box-${mode}`);
+
+                            return React.createElement(
+                                'div',
+                                { className, style },
+                                React.cloneElement(child, extraProps)
+                            );
+                        })}
+                    </div>
+                </div>
+    );
+};
+
+PageLayout.Box = Box;
+
+export default PageLayout;

package/lib/Page/index.js

@@ -108,9 +108,9 @@ var PageLayout = function PageLayout(_ref) {
     var props = _ref2.props;
     return (props == null ? void 0 : props.mode) === 'white';
   })) == null ? void 0 : _childrenToArray$filt.length;
-  var total = (_childrenToArray2 = childrenToArray) == null ? void 0 : _childrenToArray2.length;
+  var total = ((_childrenToArray2 = childrenToArray) == null ? void 0 : _childrenToArray2.length) + 5;
   var startIndex = total - whiteCols - 1;
-  var endIndex = total - 1;
+  var endIndex = total - 2;
   var headerStyle = {
     height: computedHeaderHeight,
     padding: "".concat(size === 'small' ? 20 : 24, "px"),
@@ -168,7 +168,7 @@ var PageLayout = function PageLayout(_ref) {
     var style = {
       flex: (0, _utils.computeWidth)(width),
       // 设置cols层级关系
-      zIndex: mode === 'gray' ? startIndex-- : endIndex--
+      zIndex: mode === 'gray' ? endIndex-- : startIndex++
     };
     var className = (0, _classnames["default"])("".concat(clsPrefix, "-box ").concat(clsPrefix, "-box-").concat(mode));
     return _react["default"].createElement('div', {

package/lib/Page/index.less

@@ -1,26 +1,46 @@
+.large-size > .ant-layout-content {
+    .tnt-page.in-layout {
+        height: calc(100vh - 60px);
+    }
+}
 .tnt-page {
     position: relative;
     width: 100%;
     height: 100%;
     overflow-y: hidden;
 
+    &.in-layout {
+        box-shadow: none;
+        height: calc(100vh - 50px);
+        .tnt-page-box,
+        .tnt-page-box > .ant-card {
+            height: 100%;
+        }
+        .tnt-page-content .tnt-page-box .ant-card .ant-card-body {
+            overflow-x: hidden;
+            overflow-y: auto;
+        }
+    }
+
     &-box-white {
         z-index: 1;
         background: #f3f5f6;
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1), 0 10px 12px 2px rgba(170, 182, 206, 0.2);
-        .inLayout & {
-            background: #fbfcfe;
-            box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1), 0 6px 10px 2px rgba(170, 182, 206, 0.2);
+
+        .in-layout & {
+            background: #fafbfc;
         }
     }
 
+
     &-box-gray {
         background: #e8ebed;
         box-shadow: 0 10px 12px 2px rgba(0, 0, 0, 0.1);
 
-        .inLayout & {
+        .in-layout & {
             background: #f8f9fa;
-            box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.1);
+            // box-shadow: 0 5px 5px 2px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.1);
         }
     }
 
@@ -36,7 +56,7 @@
         box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1),
                     0 10px 6px 0 rgba(170, 182, 206, 0.2);
 
-        .inLayout & {
+        .in-layout & {
             background: #ffffff;
             box-shadow: none;
         }
@@ -76,9 +96,13 @@
         .ant-card-head {
             border-bottom: 1px solid #e0e0e0;
             margin-bottom: 0;
-            height: 60px;
+            // height: 60px;
             .small & {
                 height: 40px;
+                line-height: 40px;
+            }
+            .ant-card-head-title {
+                font-weight: normal;
             }
         }
         .ant-card-body {

package/lib/QueryListScene/Field/SelectInput.js

@@ -27,10 +27,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
@@ -50,8 +46,7 @@ var Option = _select["default"].Option;
 var _default = function _default(props) {
   var _props$options = props.options,
       options = _props$options === void 0 ? [] : _props$options,
-      addonBeforeStyle = props.addonBeforeStyle,
-      inputProps = _objectWithoutProperties(props, ["options", "addonBeforeStyle"]);
+      inputProps = _objectWithoutProperties(props, ["options"]);
 
   var _useState = (0, _react.useState)(options),
       _useState2 = _slicedToArray(_useState, 2),
@@ -84,10 +79,7 @@ var _default = function _default(props) {
 
   var addonBefore = _react["default"].createElement(_select["default"], {
     value: key,
-    onChange: onKeyChange,
-    style: _objectSpread({
-      width: '120px'
-    }, addonBeforeStyle)
+    onChange: onKeyChange
   }, items.map(function (_ref) {
     var label = _ref.label,
         value = _ref.value;