看板请求图表数据时机调整，只有首次加载和点击刷新才请求（原来是改变了编辑模式也会请求）

src/components/dashboardDesigner/chartView.jsx

@@ -18,10 +18,10 @@ class ChartView extends React.Component {
     }
 
     componentDidMount() {
-        const { item, dispatch } = this.props;
+        const { item, dispatch, reload } = this.props;
         const { viewType } = item;
         if(viewType === 'chart') {
-            dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: true });
+            dispatch({ type: 'dashboardDesigner/fetchChartData', item, mandatory: reload });
         }
     }
 

src/components/dashboardDesigner/viewLayout.jsx

@@ -31,7 +31,7 @@ class ViewLayout extends React.PureComponent {
         });
     }
 
-    createElement = (item, isPreview) => {
+    createElement = (item, isPreview, reload) => {
         const { dispatch, main, dashboardDesigner } = this.props;
         const { currentUser } = main;
         const { editMode } = dashboardDesigner;
@@ -58,7 +58,7 @@ class ViewLayout extends React.PureComponent {
                         {isPreview && <Icon className={iconCls} type="close" onClick={this.hidePreviewBox}/>}
                     </div>
                 </div>
-                <ChartView tableBodyHeight={isPreview ? (this.state.screenHeight * 0.8 - 24 - 40 - 50 - 38) : 50 * layout.h - 30 - 50 -38} editMode={isPreview ? false : editMode} item={{...item}}/>
+                <ChartView tableBodyHeight={isPreview ? (this.state.screenHeight * 0.8 - 24 - 40 - 50 - 38) : 50 * layout.h - 30 - 50 -38} editMode={isPreview ? false : editMode} item={{...item}} reload={reload}/>
             </div>
         )
     }
@@ -92,7 +92,7 @@ class ViewLayout extends React.PureComponent {
         const { dashboardDesigner, contentSize } = this.props;
         const { editMode } = dashboardDesigner;
         const { visiblePreviewBox, previewItem } = this.state;
-        const children = dashboardDesigner.items.map((item) => this.createElement(item));
+        const children = dashboardDesigner.items.map((item) => this.createElement(item, false, !item.chartOption));
         return (<div className='dashboard-viewcontent'>
             <ReactGridLayout
                 width={contentSize.width}
@@ -126,7 +126,7 @@ class ViewLayout extends React.PureComponent {
                 keyboard={true}
                 maskClosable={true}
                 >
-                {!!previewItem && this.createElement(dashboardDesigner.items.find(item => item.code === previewItem.code), true)}
+                {!!previewItem && this.createElement(dashboardDesigner.items.find(item => item.code === previewItem.code), true, false)}
             </Modal>
         </div>);
     }

src/components/dashboardDesigner/viewLayout.less

@@ -18,6 +18,7 @@
     padding-top: 30px;
     z-index: 1;
     border: 1px solid #CCCCCC;
+    background: white;
     .chartview-toolbar {
       height: 30px;
       margin-top: -30px;

src/models/dashboard.js

@@ -190,7 +190,7 @@ export default {
                     id: code,
                     bdName: name,
                     bdNote: description,
-                    bdConfiguration: JSON.stringify(items),
+                    bdConfiguration: JSON.stringify(items.map(item => ({ ...item, chartOption: null }))),
                     thumbnail: thumbnail,
                     relationColumns: JSON.stringify(relationColumns),
                 }

src/models/dashboardDesigner.js

@@ -285,16 +285,31 @@ export default {
             };
             return { ...state, items };
         },
-        setItemChartOption(state, action) {
-            const { code, chartOption } = action
+        setItemField(state, action) {
+            const { code, name, value } = action;
             const { items } = state;
             let index = items.findIndex(item => item.code === code);
+            const targetItem = items[index];
+            targetItem[name] = value;
+
             items[index] = {
-                ...items[index],
-                chartOption
+                ...targetItem
             };
             return { ...state, items };
-        }
+        },
+        setItemFields(state, action) {
+            const { code, fields } = action;
+            const { items } = state;
+            let index = items.findIndex(item => item.code === code);
+            const targetItem = items[index];
+            fields.forEach(field => {
+                targetItem[field.name] = field.value;
+            });
+            items[index] = {
+                ...targetItem
+            };
+            return { ...state, items };
+        },
     },
 
     effects: {
@@ -366,7 +381,7 @@ export default {
             }
         },
         *fetchChartData(action, { put, call, select }) {
-            const { item } = action;
+            const { item, mandatory } = action;
             const dashboardDesigner = yield select(state => state.present.dashboardDesigner);
             const { filters, relationColumns } = dashboardDesigner;
             const { chartCode } = item;
@@ -374,9 +389,9 @@ export default {
                 dashCreateId: chartCode,
                 filters: getBodyFilters(getTrueFilters(item, filters, relationColumns))
             };
-            // if(!mandatory && !!item.chartOption) {
-            //     return;
-            // }
+            if(!mandatory && !!item.chartOption) {
+                return;
+            }
 
             try {
                 yield put({ type: 'setItemFetching', code: chartCode, fetching: true });
@@ -388,18 +403,29 @@ export default {
                 console.log('看板请求图表展示数据', body, res);
                 if(!res.err && res.data.code > 0) {
                     let resData = res.data.data;
-                    const { chartType } = resData.chartsColumnConfig;
-                    let chartOption = parseChartOption(CHART_TYPE[chartType], resData, JSON.parse(resData.chartsColumnConfig.chartConfig));
+                    const { chartType : ctype, chartConfig: cfg } = resData.chartsColumnConfig;
+                    const chartType = CHART_TYPE[ctype];
+                    const chartConfig = JSON.parse(cfg);
+                    let chartOption = parseChartOption(chartType, resData, chartConfig);
                     
-                    yield put({ type: 'setItemChartOption', code: chartCode, chartOption });
+                    yield put({ type: 'setItemFields', code: chartCode, fields: [
+                        { name: 'chartType', value: chartType },
+                        { name: 'chartOption', value: chartOption }
+                    ] });
                 }else {
-                    yield put({ type: 'setItemChartOption', code: chartCode, chartOption: {} });
+                    yield put({ type: 'setItemFields', code: chartCode, fields: [
+                        { name: 'chartType', value: '' },
+                        { name: 'chartOption', value: {} }
+                    ] });
                     console.error(body, res.err || res.data.msg);
                     message.error('请求图表展示数据失败: ' + (res.err || res.data.msg));
                 }
             }catch(e) {
                 console.error(body, e);
-                yield put({ type: 'setItemChartOption', code: chartCode, chartOption: {} });
+                yield put({ type: 'setItemFields', code: chartCode, fields: [
+                    { name: 'chartType', value: '' },
+                    { name: 'chartOption', value: {} }
+                ] });
                 message.error('请求图表展示数据失败: ' + e);
             }finally {
                 yield put({ type: 'setItemFetching', code: chartCode, fetching: false });