数据视图 图表数据源变更时的异常处理

src/components/dashboardDesigner/viewLayoutItem.jsx

@@ -47,7 +47,6 @@ class ViewLayoutItem extends React.Component {
                             }}
                             onBlur={(e) => {
                                 let value = e.target.value;
-                                console.log(value);
                                 this.setState({
                                     editing: false,
                                 }, () => {
@@ -56,7 +55,6 @@ class ViewLayoutItem extends React.Component {
                             }}
                             onPressEnter={(e) => {
                                 let value = e.target.value;
-                                console.log(value);
                                 this.setState({
                                     editing: false,
                                 }, () => {

src/models/chart.js

@@ -303,9 +303,7 @@ export default {
                         })
                     }
                     yield put({ type: 'chartDesigner/silentChangeFields', fields: fields });
-                    yield put({ type: 'chartDesigner/silentChangeDataSource', dataSource: data.baseConfig.dataSource });
-                    let pageSize = ~~((document.getElementsByClassName('content-body')[0].offsetHeight - 12 * 2 - 40 - 24 - 8 * 2)/38) + 1;
-                    yield put({ type: 'chartDesigner/fetchChartData', page: 1, pageSize });
+                    yield put({ type: 'chartDesigner/initChangeDataSource', dataSource: data.baseConfig.dataSource });
                 }else {
                     message.error('解析图表错误: ' + res.msg);
                 }

src/models/chartDesigner.js

@@ -162,12 +162,15 @@ export default {
             yield put({ type: 'changeField', name: 'baseConfig', value: { ...baseConfig, dataSource } });
             yield put({ type: 'remoteDataColumn', code: dataSource.code });
         },
-        *silentChangeDataSource(action, { select, call, put }) {
+        *initChangeDataSource(action, { select, call, put, take }) {
             const { dataSource } = action;
             const chartDesigner = yield select(state => state.present.chartDesigner);
             const { baseConfig } = chartDesigner;
             yield put({ type: 'silentChangeField', name: 'baseConfig', value: { ...baseConfig, dataSource } });
             yield put({ type: 'remoteDataColumn', code: dataSource.code });
+            yield take('remoteDataColumn/@@end');
+            let pageSize = ~~((document.getElementsByClassName('content-body')[0].offsetHeight - 12 * 2 - 40 - 24 - 8 * 2)/38) + 1;
+            yield put({ type: 'fetchChartData', page: 1, pageSize });
         },
         *remoteQucikAdd(action, { select, call, put }) {
             try{
@@ -251,7 +254,7 @@ export default {
                 message.error('创建副本失败: ' + e.message);
             }
         },
-        *remoteDataColumn(action, { select, call, put }) {
+        *remoteDataColumn(action, { select, call, put, take }) {
             const code = action.code;
             try {
                 const res = yield call(service.fetch, {
@@ -275,6 +278,7 @@ export default {
                     })
                     yield put({ type: 'silentSetField', name: 'columns', value: columns });
                     yield put({ type: 'updateColumns' });
+                    yield take('updateColumns/@@end');
                 }else {
                     message.error('请求列数据失败:' + res.msg);
                     yield put({ type: 'silentSetField', name: 'columns', value: [] });
@@ -339,11 +343,11 @@ export default {
                     const newSortColumn = columns.find(c => c.name === sortColumn.key);
                     let arr = viewColumns.map(v => {
                         const newViewColumn = columns.find(c => c.name === v.name);
-                        return newViewColumn ? { label: newViewColumn.label, type: newViewColumn.type } : {};
-                    });
-                    newSortColumn ? fields.sortColumn = { label: newSortColumn.label, type: newSortColumn.type } : void(0);
+                        return newViewColumn ? newViewColumn : null;
+                    }).filter(c => !!c);
+                    newSortColumn ? fields.sortColumn = { label: newSortColumn.label, key: newSortColumn.name } : fields.sortColumn = {key:''};
                     fields.viewColumns = arr;
-                    yield put({ type: 'silentSetField', name: 'dataViewConfig', value: deepAssign(dataViewConfig, { ...fields }) });
+                    yield put({ type: 'silentSetField', name: 'dataViewConfig', value: { ...dataViewConfig, ...fields } });
                 }else if(viewType === 'aggregateTable') {
                     const { aggregateTableConfig } = chartDesigner;
                     const { groupBy, targetColumn } = aggregateTableConfig;
@@ -368,6 +372,7 @@ export default {
             }
         },
         *fetchChartData(action, { select, call, put }) {
+            console.log('fetchChartData');
             const chartDesigner = yield select(state => state.present.chartDesigner);
             const { baseConfig } = chartDesigner;
             const { viewType } = baseConfig;
@@ -407,7 +412,6 @@ export default {
                     const { dataViewConfig } = chartDesigner;
                     if(dataViewConfig.viewColumns.length > 0) {
                         yield put({ type: 'fetchDataViewData', page, pageSize });
-                        // yield put({ type: 'fetchDataViewData' }); // dataView不需要在这里触发数据请求，组件在计算完pageSize后会自动发起数据请求
                     }else {
                         yield put({ type: 'silentSetField', name: 'chartOption', value: {} });
                     }