重构

ity965 · Jun 26, 2019 · aad51fa · aad51fa
1 parent d67a309
commit aad51fa
Show file tree

Hide file tree

Showing 13 changed files with 450 additions and 47 deletions.
diff --git a/TODO.md b/TODO.md
@@ -20,3 +20,9 @@
 - [x] 左侧菜单自动滚动到可视范围之内
 - [x] gitBook编写文档
 - [x] 抓取脚本，如果修改了经过webpack构建的文件，会导致首次启动自动打开浏览器是白屏
+- [ ] 去掉QueryItem组件，使用FormElement编写查询条件
+- [x] 优化FormElement组件，参考QueryItem添加布局功能
+    - [x] ItemRow组件用于布局，flex方式 使用antd 的Row Col即可
+    - [ ] 添加propTypes，属性提示
+- [ ] 重写可编辑表格组件
+- [ ] FormElement组件 ref问题，有场景需要获取元素的dom，进行获取焦点等操作
diff --git a/src/commons/handle-error.js b/src/commons/handle-error.js
@@ -17,10 +17,6 @@ function getErrorTip({error, errorTip}) {
     if (error && error.response) {
         const {status, message} = error.response;
 
-        if (status === 401) { // 需要登录
-            return toLogin();
-        }
-
         // 后端自定义信息
         if (message) return message;
 
@@ -50,6 +46,10 @@ function getErrorTip({error, errorTip}) {
 
 export default function handleError({error, errorTip}) {
     const ajaxTip = getCurrentLocal()?.ajaxTip || {};
+    const {status} = error.response;
+
+    // 如果是未登录问题，不显示错误提示
+    if (status === 401) return toLogin();
 
     if (errorTip === false) return;
 

diff --git a/src/components/table/index.jsx b/src/components/table/index.jsx
@@ -0,0 +1,79 @@
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
+import {Table} from 'antd';
+
+export default class TableComponent extends Component {
+    static propTypes = {
+        otherHeight: PropTypes.number,
+    };
+
+    state = {
+        tableBodyHeight: 300,
+    };
+
+    componentDidMount() {
+        this.tableBody = this.wrapper.querySelector('.ant-table-body');
+        this.tablePlaceholder = this.wrapper.querySelector('.ant-table-placeholder');
+        this.header = document.getElementById('header');
+        this.tableHead = this.wrapper.querySelector('.ant-table-thead');
+        this.pagination = document.querySelector('.pagination-wrap');
+
+        window.addEventListener('resize', this.setTableBodyHeight);
+
+        this.setTableBodyHeight();
+    };
+
+    componentDidUpdate(prevProps) {
+        const prevDataSource = prevProps.dataSource;
+        const {dataSource} = this.props;
+
+        if (dataSource?.length !== prevDataSource?.length) {
+            this.setTableBodyHeight();
+        }
+    }
+
+    componentWillUnmount() {
+        window.removeEventListener('resize', this.setTableBodyHeight);
+    }
+
+    setTableBodyHeight = () => {
+        let {tableBodyHeight} = this.state;
+        const {dataSource} = this.props;
+        const windowHeight = document.documentElement.clientHeight;
+
+        // 计算除了表格内容之外，其他高度
+        if ('otherHeight' in this.props) {
+            const {otherHeight} = this.props;
+            tableBodyHeight = windowHeight - otherHeight;
+        } else {
+            const headerHeight = this.header.offsetHeight;
+            const wrapperTop = this.wrapper.offsetTop;
+            const tableHeadHeight = this.tableHead.offsetHeight + 1;
+            const paginationHeight = this.pagination ? this.pagination.offsetHeight + 8 : 0;
+            const bottomHeight = paginationHeight + 10 + 10;
+            const otherHeight = headerHeight + wrapperTop + tableHeadHeight + bottomHeight;
+
+            tableBodyHeight = windowHeight - otherHeight;
+        }
+
+        if (dataSource?.length) {
+            this.tableBody.style.height = `${tableBodyHeight}px`;
+        } else {
+            this.tablePlaceholder.style.height = `${tableBodyHeight}px`;
+        }
+
+        this.setState({tableBodyHeight});
+    };
+
+    render() {
+        const {scroll = {}, ...others} = this.props;
+        const {tableBodyHeight} = this.state;
+        let tableScroll = {y: tableBodyHeight, ...scroll};
+
+        return (
+            <div ref={node => this.wrapper = node}>
+                <Table scroll={tableScroll} {...others}/>
+            </div>
+        );
+    }
+}
diff --git a/src/library/antd/components/form-element/index.jsx b/src/library/antd/components/form-element/index.jsx
@@ -62,6 +62,7 @@ function getElement(item) {
 
     if (type === 'select') {
         const {options = [], ...others} = props;
+
         return (
             <Select {...commonProps} {...others}>
                 {
@@ -72,13 +73,22 @@ function getElement(item) {
     }
 
     if (type === 'select-tree') return <TreeSelect {...commonProps} {...props} treeData={props.options}/>;
-    if (type === 'checkbox-group') return <Checkbox.Group {...commonProps} {...props}/>;
-    if (type === 'radio-group') return <Radio.Group {...commonProps} {...props}/>;
-    if (type === 'cascader') return <Cascader {...commonProps} {...props}/>;
 
     if (type === 'checkbox') return <Checkbox {...commonProps} {...props}>{props.label}</Checkbox>;
+    if (type === 'checkbox-group') return <Checkbox.Group {...commonProps} {...props}/>;
 
     if (type === 'radio') return <Radio {...commonProps} {...props}>{props.label}</Radio>;
+    if (type === 'radio-group') return <Radio.Group {...commonProps} {...props}/>;
+    if (type === 'radio-button') {
+        const {options = [], ...others} = props;
+        return (
+            <Radio.Group buttonStyle="solid" {...commonProps} {...others}>
+                {options.map(opt => <Radio.Button key={opt.value} {...opt}>{opt.label}</Radio.Button>)}
+            </Radio.Group>
+        );
+    }
+
+    if (type === 'cascader') return <Cascader {...commonProps} {...props}/>;
 
     if (type === 'switch') return <Switch {...commonProps} {...props} style={{...props.style, width: 'auto'}}/>;
 
@@ -120,7 +130,8 @@ export default class FormElement extends Component {
             tip,
             field,
             decorator,
-            wrapperStyle = {},
+            style = {},
+            elementStyle = {},
             layout = false,
 
             // Form.Item属性
@@ -173,6 +184,10 @@ export default class FormElement extends Component {
             ...decorator,
         };
 
+        if (type === 'switch') {
+            nextDecorator.valuePropName = 'checked';
+        }
+
         // 删除undefined属性，否则会引发错误
         Object.keys(nextDecorator).forEach(key => {
             const value = nextDecorator[key];
@@ -181,15 +196,16 @@ export default class FormElement extends Component {
             }
         });
 
-        let elementStyle = {width: '100%'};
+
+        // 处理元素样式
+        let eleStyle = {width: '100%'};
         if (width !== void 0) {
-            elementStyle.width = width;
+            eleStyle.width = width;
         }
 
-        if (others.style) {
-            elementStyle = {...elementStyle, ...others.style};
-        }
+        eleStyle = {...eleStyle, ...elementStyle};
 
+        // 处理placeholder
         if (others.placeholder === void 0) {
             if (isInputLikeElement(type)) {
                 others.placeholder = `请输入${label}`;
@@ -200,6 +216,13 @@ export default class FormElement extends Component {
             }
         }
 
+        if (!nextDecorator.rules) nextDecorator.rules = [];
+
+        // 如果存在required属性，自动添加必填校验
+        if (required && !nextDecorator.rules.find(item => 'required' in item)) {
+            nextDecorator.rules.push({required: true, message: `${others.placeholder}!`});
+        }
+
         let formLabel = label;
         if (tip) {
             formLabel = (
@@ -217,7 +240,7 @@ export default class FormElement extends Component {
 
         return (
             <div
-                style={{display: type === 'hidden' ? 'none' : 'block', ...wrapperStyle}}
+                style={{display: type === 'hidden' ? 'none' : 'block', ...style}}
                 className="form-element-flex-root"
                 ref={node => this.container = node}
             >
@@ -233,7 +256,7 @@ export default class FormElement extends Component {
                     wrapperCol={wrapperCol}
                 >
                     {form ? getFieldDecorator(field, nextDecorator)(
-                        children ? children : getElement({type, ...others, style: elementStyle})
+                        children ? children : getElement({type, ...others, style: eleStyle})
                     ) : children}
                 </FormItem>
             </div>

diff --git a/src/library/antd/components/query-item/index.jsx b/src/library/antd/components/query-item/index.jsx
@@ -274,7 +274,7 @@ export default class QueryItem extends Component {
                                             // setTimeout 是 为了获取最新的value
                                             setTimeout(() => {
                                                 const value = form.getFieldValue(field);
-                                                const parentItem = this.state.options[field].find(it => it.value === value);
+                                                const parentItem = this.state.options[field] && this.state.options[field].find(it => it.value === value);
                                                 const parentOptions = data.find(i => i.field === item.parentField);
 
                                                 currentTrigger.forEach(it => {

diff --git a/src/library/utils/validation-rule.js b/src/library/utils/validation-rule.js
@@ -49,7 +49,6 @@ export default {
         };
     },
 
-    // fixme: landLine
     landline(message = '请输入正确的座机号！') { // 座机
         return {
             pattern: regexps.landLine,

diff --git a/src/pages/generator/EditPage.jsx b/src/pages/generator/EditPage.jsx
@@ -321,7 +321,7 @@ export default class EditPage extends Component {
                     <Col span={14}>
                         <div style={{display: 'flex'}}>
                             <FormElement
-                                wrapperStyle={{flex: 0}}
+                                style={{flex: 0}}
                                 label="目录/文件名"
                                 tip="可以继续填写子目录，比如：user/UserList.jsx，将自动创建user目录"
                                 type="select-tree"
@@ -339,7 +339,7 @@ export default class EditPage extends Component {
                                 treeNodeLabelProp="shortValue"
                             />
                             <FormElement
-                                wrapperStyle={{flex: 1}}
+                                style={{flex: 1}}
                                 width="100%"
                                 label="/"
                                 labelWidth={24}

diff --git a/src/pages/generator/ListPage.jsx b/src/pages/generator/ListPage.jsx
@@ -635,7 +635,7 @@ export default class ListPage extends Component {
                     <Col span={14}>
                         <div style={{display: 'flex'}}>
                             <FormElement
-                                wrapperStyle={{flex: 0}}
+                                style={{flex: 0}}
                                 label="目录/文件名"
                                 tip="可以继续填写子目录，比如：user/UserList.jsx，将自动创建user目录"
                                 type="select-tree"
@@ -653,7 +653,7 @@ export default class ListPage extends Component {
                                 treeNodeLabelProp="shortValue"
                             />
                             <FormElement
-                                wrapperStyle={{flex: 1}}
+                                style={{flex: 1}}
                                 width="100%"
                                 label="/"
                                 labelWidth={24}