将updateThumbnail和保存打包成saveWithThumbnail后放入model中以解决异步编程问题

src/components/dashboardDesigner/header.jsx

@@ -31,8 +31,7 @@ class Header extends React.Component {
                             this.setState({
                                 visibleConfirm: false
                             });
-                            updateThumbnail()// 添加更新thumbnail
-                            dispatch({ type: 'dashboard/remoteModify' });
+                            dispatch({ type: 'dashboardDesigner/saveWithThumbnail' });
                             dispatch({ type: 'main/redirect', path: '/dashboard' });
                         }}
                         onCancel={() => {
@@ -55,15 +54,11 @@ class Header extends React.Component {
                     </Popconfirm>
                     <Button onClick={() => {
                         if(dashboardDesigner.code && dashboardDesigner.code !== -1) {
-                            updateThumbnail()// 添加更新thumbnail
-                            dispatch({ type: 'dashboard/remoteModify' });
+                            dispatch({ type: 'dashboardDesigner/saveWithThumbnail' });
                         }else {
-                            updateThumbnail()// 添加更新thumbnail
                             dispatch({ type: 'dashboard/remoteAdd' });
                         }
                     }}><Icon type='save' />保存</Button>
-                    <Button onClick={updateThumbnail}
-                    ><Icon type='save' />保存Thumbnail(Debug用)</Button>
                 </div>
                 <div className='header-item toolbar-title'>
                     <Input

src/components/dashboardDesigner/layout.jsx

@@ -35,13 +35,6 @@ class DashboardDesigner extends React.Component {
                 pdf.save('stone.pdf');
         });
     }
-    updateThumbnail = () => {
-        const { dispatch } = this.props
-        html2canvas(document.getElementsByClassName('dashboard-content')[0]).then(function(canvas){
-            let thumbnail = canvas.toDataURL('image/png', 1.0);
-            dispatch({ type: 'dashboardDesigner/setField', name: 'thumbnail', value: thumbnail })
-        })
-    }
 
     render() {
         const { loading } = this.props;

src/models/dashboardDesigner.js

@@ -1,3 +1,6 @@
+import html2canvas from 'html2canvas'
+import { message } from 'antd'
+
 export default {
     namespace: 'dashboardDesigner',
     state: {
@@ -131,8 +134,28 @@ export default {
     },
 
     effects: {
-        
-    },
+        *saveWithThumbnail(action, {put, call}) {
+            let thumbnail;
+            yield call(async ()=> {
+                try {
+                    await html2canvas(document.getElementsByClassName('dashboard-content')[0]).then(
+                        function(canvas){
+                            thumbnail = canvas.toDataURL('image/png', 1.0);
+                        }
+                    )
+                }catch (e) {
+                    return null;
+                }
+            }); 
+                try {
+                    yield put.resolve({ type: 'setField', name: 'thumbnail', value: thumbnail })
+                    yield put.resolve({ type: 'dashboard/remoteModify' })
+                }catch (e){
+                    message.error('保存失败');
+                }
+            }
+
+        },
     subscription: {
 
     },