用户组名编辑器校验逻辑

src/components/admin/userGroupDetailBox.jsx

@@ -4,6 +4,12 @@ import { connect } from 'dva'
 const FormItem = Form.Item
 
 class DetailBox extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            okButtonDisabled: false
+        }
+    }
 
     okHandler = () => {
         const { dispatch, userGroup, form } = this.props;
@@ -26,7 +32,9 @@ class DetailBox extends React.Component {
     }
 
     render() {
+        const me = this;
         const { dispatch, userGroup, form } = this.props;
+        const { okButtonDisabled } = this.state;
         const { newOne } = userGroup;
 
         const { getFieldDecorator } = form;
@@ -40,6 +48,7 @@ class DetailBox extends React.Component {
                 title={`${newOne.operate === 'create' ? '新建' : '修改'}用户组`}
                 visible={newOne.visibleDetailBox}
                 onOk={this.okHandler}
+                okButtonProps={{ disabled: okButtonDisabled }}
                 onCancel={this.hideBox}
                 maskClosable={false}
                 destroyOnClose={true}
@@ -49,7 +58,21 @@ class DetailBox extends React.Component {
                         {
                             getFieldDecorator('groupName', {
                                 initialValue: newOne.name,
-                                rules: [{ required: true, whitespace: true, message: '用户组名不能为空' }],
+                                validateFirst: true,
+                                rules: [
+                                    { validator(rule, value, callback, source, options) {
+                                        let msg;
+                                        if(value.trim().length === 0) {
+                                            msg = '用户组名不能为空'
+                                        }else if(value.length > 20) {
+                                            msg = '用户组名长度不能大于20个字符'
+                                        }
+                                        me.setState({
+                                            okButtonDisabled: !!msg
+                                        });
+                                        callback(msg);
+                                    } }
+                                ],
                             })(
                                 <Input
                                     placeholder="请输入用户组名称"

src/models/chartDesigner.js

@@ -518,14 +518,14 @@ export default {
                     let option = parseChartOption('dataView', res.data.data, dataViewConfig);
                     yield put({ type: 'silentSetField', name: 'chartOption', value: option });
                 }else {
-                    // message.error('请求列表数据失败: ' + (res.err || res.data.msg));
-                    // yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                    message.error('请求列表数据失败: ' + (res.err || res.data.msg));
+                    yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
                 }
                 yield put({ type: 'silentSetField', name: 'fetchConfig', value: body });
             }catch(e) {
                 console.error(e);
-                // yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
-                // message.error('请求列表数据失败: ' + e);
+                yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
+                message.error('请求列表数据失败: ' + e);
             }
         },
         *fetchAggregateTableData(action, { select, call, put }) {