dva数据流控制Header/Preparing

app/components/chartDesigner/header.jsx

@@ -4,31 +4,48 @@ import emitter from '../../eventManger/ev';
 const Option = Select.Option;
 import './header.less';
 import { connect } from 'dva';
+import { ActionCreators } from 'redux-undo';
 import title from '../../models/title';
 
-
-const Header = connect(({ title: { title } }) => ({
-    title,
-}))(props => {
-    return (
-        <div className='header'>
-            <div className='header-item toolbar-title'>
-                <Input className='input-title' 
-                    width={200} 
-                    addonAfter={<Icon type="edit" onClick={props.dispatch({ type: 'title/set', text: '测试标题' })}/>} 
-                    value={props.title}
-                />
-            </div>
-            <div className='header-item toolbar-buttons'>
-                <div className=''>
-                    <Button className='button-uodo' icon='undo' onClick={this.emit('undo')}>撤销</Button>
-                    <Button className='button-redo' onClick={this.emit('redo')}>重做</Button>
-                    <Button className='button-uodo' onClick={this.emit('Preview')}>预览</Button>
-                    <Button className='button-uodo' onClick={this.emit('save')}>保存</Button>
+class Header extends React.Component {
+    render() {
+        const props = this.props;
+        return (
+            <div className='header'>
+                <div className='header-item toolbar-title'>
+                    <Input
+                        ref='titleInput'
+                        className='input-title' 
+                        focus={props.title.focus}
+                        addonAfter={<Icon type="edit" 
+                            onClick={() => {
+                                const input = this.refs.titleInput
+                                input.focus()
+                            }}
+                        />}
+                        onChange={(e) => {
+                            props.dispatch({ type: 'title/set', text: e.target.value});
+                        }}
+                        value={props.title.label}
+                    />
+                </div>
+                <div className='header-item toolbar-buttons'>
+                    <div className=''>
+                        <Button className='button-uodo' icon='undo' onClick={() => {
+                            props.dispatch(ActionCreators.undo());
+                        }}>撤销</Button>
+                        <Button className='button-redo' onClick={() => {
+                            props.dispatch(ActionCreators.redo());
+                        }}>重做</Button>
+                        <Button className='button-uodo' >预览</Button>
+                        <Button className='button-uodo' >保存</Button>
+                    </div>
                 </div>
             </div>
-        </div>
-    )
-});
-
-export default Header;
+        )
+    }
+}
+function mapStateToProps({ present: { title } }) {
+    return { title: title }
+}
+export default connect(mapStateToProps)(Header);

app/components/chartDesigner/header.less

@@ -13,5 +13,24 @@
     .toolbar-title {
         flex: 1;
         text-align: center;
+        .ant-input-group{
+            width: 300px;
+            .input-title {
+                text-align: center;
+                font-size: 18px;
+                border: none;
+                border-bottom-right-radius: 4px;
+                border-top-right-radius: 4px;
+                background-color: transparent;
+            }
+            .ant-input-group-addon {
+                cursor: pointer;
+                border: none;
+                background: transparent;
+                :hover {
+                    color: #40a9ff;
+                }
+            }
+        }
     }
 }

app/components/chartDesigner/sections/preparingForm.jsx

@@ -2,75 +2,139 @@ import React from 'react';
 import { Form, Icon, Input, Button, Select, Switch } from 'antd';
 const FormItem = Form.Item;
 const { Option } = Select;
+import { connect } from 'dva';
+import preparing from '../../../models/preparing';
 
-class PreparingForm extends React.Component {
+const PreparingForm = connect(
+    ({ present: { preparing } }) => ({
+        preparing,
+    }
+))(props => {
+	const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = props.form;
 
-	constructor(props) {
-		super(props);
-		this.state = {
-			config: props.config
-		}
-	}
+	const formItemLayout = {
+		labelCol: { span: 10 },
+		wrapperCol: { span: 14 },
+	};
 
-	componentDidMount() {
-		// To disabled submit button at the beginning.
-		this.props.form.validateFields();
-	}
+	const columns = [
+		{ value: 'c1', label: '列1' },
+		{ value: 'c2', label: '列2' },
+		{ value: 'c3', label: '列3' },
+		{ value: 'c4', label: '列4' },
+		{ value: 'c5', label: '列5' },
+		{ value: 'c6', label: '列6' },
+		{ value: 'c7', label: '列7' },
+		{ value: 'c8', label: '列8' },
+		{ value: 'c9', label: '列9' },
+		{ value: 'c10', label: '列10' },
+		{ value: 'c11', label: '列11' },
+		{ value: 'c12', label: '列12' },
+		{ value: 'c13', label: '列13' }
+	];
 
-	render() {
-		const { config } = this.state;
-		const { groupBy } = config;
+	return (
+		<Form layout='horizontal'>
+			<FormItem label='分组' {...formItemLayout}>
+				{getFieldDecorator('groupBy', {
+					initialValue : props.preparing.groupBy
+				})(
+					<Select 
+						mode="multiple"
+						onChange={(value) => {
+							props.dispatch({ type: 'preparing/set', groupBy: value});
+						}}
+					>
+						{columns.map((c, i)=>{
+							return (<Option key={`column-${i}`} value={c.value}>{c.label}</Option>)
+						})}
+					</Select>
+				)}
+			</FormItem>
+			{/* <FormItem label='分段' {...formItemLayout}>
+				{getFieldDecorator('bucketization', {
+					initialValue : bucketization
+				})(
+					<Select mode="multiple">
+						{bucketizations.map((b, i)=>{
+							return (<Option key={`bucketization-${i}`} value={b.value}>{b.label}</Option>)
+						})}
+					</Select>
+				)}
+			</FormItem> */}
+		</Form>
+	);
+});
+export default Form.create()(PreparingForm);
+
+// class PreparingForm extends React.Component {
+
+// 	constructor(props) {
+// 		super(props);
+// 		this.state = {
+// 			config: props.config
+// 		}
+// 	}
+
+// 	componentDidMount() {
+// 		// To disabled submit button at the beginning.
+// 		this.props.form.validateFields();
+// 	}
+
+// 	render() {
+// 		const { config } = this.state;
+// 		const { groupBy } = config;
 		
-		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
+// 		const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
 
-		const formItemLayout = {
-			labelCol: { span: 10 },
-			wrapperCol: { span: 14 },
-		};
+// 		const formItemLayout = {
+// 			labelCol: { span: 10 },
+// 			wrapperCol: { span: 14 },
+// 		};
 
-		const columns = [
-			{ value: 'c1', label: '列1' },
-			{ value: 'c2', label: '列2' },
-			{ value: 'c3', label: '列3' },
-			{ value: 'c4', label: '列4' },
-			{ value: 'c5', label: '列5' },
-			{ value: 'c6', label: '列6' },
-			{ value: 'c7', label: '列7' },
-			{ value: 'c8', label: '列8' },
-			{ value: 'c9', label: '列9' },
-			{ value: 'c10', label: '列10' },
-			{ value: 'c11', label: '列11' },
-			{ value: 'c12', label: '列12' },
-			{ value: 'c13', label: '列13' }
-		];
+// 		const columns = [
+// 			{ value: 'c1', label: '列1' },
+// 			{ value: 'c2', label: '列2' },
+// 			{ value: 'c3', label: '列3' },
+// 			{ value: 'c4', label: '列4' },
+// 			{ value: 'c5', label: '列5' },
+// 			{ value: 'c6', label: '列6' },
+// 			{ value: 'c7', label: '列7' },
+// 			{ value: 'c8', label: '列8' },
+// 			{ value: 'c9', label: '列9' },
+// 			{ value: 'c10', label: '列10' },
+// 			{ value: 'c11', label: '列11' },
+// 			{ value: 'c12', label: '列12' },
+// 			{ value: 'c13', label: '列13' }
+// 		];
 
-		return (
-			<Form layout='horizontal'>
-				<FormItem label='分组' {...formItemLayout}>
-					{getFieldDecorator('groupBy', {
-						initialValue : groupBy
-					})(
-						<Select mode="multiple">
-							{columns.map((c, i)=>{
-								return (<Option key={`column-${i}`} value={c.value}>{c.label}</Option>)
-							})}
-						</Select>
-					)}
-				</FormItem>
-				{/* <FormItem label='分段' {...formItemLayout}>
-					{getFieldDecorator('bucketization', {
-						initialValue : bucketization
-					})(
-						<Select mode="multiple">
-							{bucketizations.map((b, i)=>{
-								return (<Option key={`bucketization-${i}`} value={b.value}>{b.label}</Option>)
-							})}
-						</Select>
-					)}
-				</FormItem> */}
-			</Form>
-		);
-	}
-}
+// 		return (
+// 			<Form layout='horizontal'>
+// 				<FormItem label='分组' {...formItemLayout}>
+// 					{getFieldDecorator('groupBy', {
+// 						initialValue : groupBy
+// 					})(
+// 						<Select mode="multiple">
+// 							{columns.map((c, i)=>{
+// 								return (<Option key={`column-${i}`} value={c.value}>{c.label}</Option>)
+// 							})}
+// 						</Select>
+// 					)}
+// 				</FormItem>
+// 				{/* <FormItem label='分段' {...formItemLayout}>
+// 					{getFieldDecorator('bucketization', {
+// 						initialValue : bucketization
+// 					})(
+// 						<Select mode="multiple">
+// 							{bucketizations.map((b, i)=>{
+// 								return (<Option key={`bucketization-${i}`} value={b.value}>{b.label}</Option>)
+// 							})}
+// 						</Select>
+// 					)}
+// 				</FormItem> */}
+// 			</Form>
+// 		);
+// 	}
+// }
 
-export default Form.create()(PreparingForm);
+// export default Form.create()(PreparingForm);

app/custom.less

@@ -0,0 +1 @@
+@icon-url: "/app/resources/iconfont/iconfont"; // 把 iconfont 地址改到本地

app/index.js

@@ -1,9 +1,14 @@
+import React from 'react';
 import dva from 'dva';
+import undoable, { ActionCreators } from 'redux-undo';
+import title from './models/title'
+import preparing from './models/preparing'
 
 // 1. Initialize
 const app = dva({
     onReducer: reducer => (state, action) => {
-        return { ...state};
+        const newState = undoable(reducer, {})(state, action);
+        return { ...newState };
     },
 });
 
@@ -12,7 +17,8 @@ const app = dva({
 
 // 3. Model
 app.model(require('./models/example'));
-app.model(require('./models/title'));
+app.model(title);
+app.model(preparing);
 
 // 4. Router
 app.router(require('./router'));

app/index.less

@@ -0,0 +1,26 @@
+@import "./custom.less";
+
+.ant-collapse {
+    border: none;
+    border-radius: 0;
+    .ant-collapse-item {
+        .ant-collapse-header {
+            line-height: 14px;
+            padding: 10px 0 10px 40px;
+            color: rgba(0, 0, 0, 0.85);
+            cursor: pointer;
+            position: relative;
+            -webkit-transition: all .3s;
+            transition: all .3s;
+            .arrow {
+                line-height: 35px;
+            }
+        }
+    }
+}
+.ant-collapse-content > .ant-collapse-content-box {
+    padding: 4px;
+}
+.ant-form-item {
+    margin-bottom: 0;
+}

app/models/preparing.js

@@ -0,0 +1,11 @@
+export default {
+    namespace: 'preparing',
+    state: {
+        groupBy: []
+    },
+    reducers: {
+      set(state, action) {
+        return action.groupBy;
+      }
+    },
+  };

app/models/title.js

@@ -1,10 +1,12 @@
 export default {
-    namespace: 'title',
-    state: '标题',
-    reducers: {
-      set(state, action) {
-        return action.title;
-      }
-    },
-  };
-  
+  namespace: 'title',
+  state: {
+    label: '标题'
+  },
+  reducers: {
+    set(state, action) {
+      let newState = Object.assign({}, state, { label: action.text});
+      return newState;
+    }
+  },
+};

app/router.js

@@ -1,17 +1,24 @@
 import React from 'react';
+import { LocaleProvider } from 'antd'
 import { Router, Route, Switch } from 'dva/router';
 import IndexPage from './routes/IndexPage';
 import Welcome from './components/welcome/welcome';
 import ChartDesigner from './components/chartDesigner/layout';
+// 由于 antd 组件的默认文案是英文，所以需要修改为中文
+import zhCN from 'antd/lib/locale-provider/zh_CN';
+import './utils/baseUtils';
+import './index.less';
 
 function RouterConfig({ history }) {
   return (
+    <LocaleProvider locale={zhCN}>
     <Router history={history}>
       <Switch>
         <Route exact path='/' component={Welcome}/>
         <Route path='/chartDesigner' component={ChartDesigner}/>
       </Switch>
     </Router>
+    </LocaleProvider>
   );
 }
 

package.json

@@ -15,7 +15,8 @@
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "react-router": "^4.3.1",
-    "react-router-dom": "^4.3.1"
+    "react-router-dom": "^4.3.1",
+    "redux-undo": "^0.6.1"
   },
   "devDependencies": {
     "atool-build": "^0.9.0",