移交功能/图表数据视图列选择器bug修复

src/components/admin/addGroupMemberBox.jsx

@@ -30,19 +30,10 @@ class AddGroupMemberBox extends React.Component {
     }
 
     fetchUserData = (keyword) => {
-        // this.setState({ userData: [], fetching: true }, () => {
-        //     setTimeout(() => {
-        //         this.setState({
-        //             userData: dataSource.filter(d => d.name.indexOf(keyword)!==-1),
-        //             fetching: false
-        //         })
-        //     }, 500);
-        // });
         this.setState({ userData: [], fetching: true }, () => {
-            const body = {
-            };
+            const body = '1';
             service.fetch({
-                url: URLS.USER_LIST,
+                url: URLS.USER_QUERY,
                 body: body,
             }).then(r => {
                 if(!r.err && r.data.code > 0) {

src/components/chart/distributeBox.jsx

@@ -186,11 +186,11 @@ class DistributeBox extends React.Component {
         }, {
             title: '行开放策略',
             dataIndex: 'filters',
-            render: filter => <div>
-                {filter.length > 0 ? filter.map((f) =>
+            render: (filter, record, index) => <div key={index}>
+                {filter.length > 0 ? filter.map((f, i) =>
                     <Tag
                         className='filter-tag'
-                        key={f.code}
+                        key={i}
                         closable={false}
                     >
                         {this.createFilterLabel(f)}
@@ -209,9 +209,9 @@ class DistributeBox extends React.Component {
             dataIndex: 'targets',
             render: (targets, record, index) => <div key={index}>
                 {
-                    targets.map((item, index) => <Tag key={index}>{item.isGroup ? <Icon type='group' /> : <Icon type='geren' />}{item.name}</Tag>)
+                    targets.map((item, index) => <Tag className='user-tag' key={index}>{item.isGroup ? <Icon type='group' /> : <Icon type='geren' />}{item.name}</Tag>)
                 }
-                <Tag onClick={this.showAccessObjectBox}><Icon type="plus" /></Tag>
+                <Tag className='user-tag' onClick={this.showAccessObjectBox}><Icon type="plus" /></Tag>
             </div>,
             width: 300
         }, {

src/components/chart/distributeBox.less

@@ -18,6 +18,9 @@
         }
         .ant-card-body {
             padding: 0;
+            .filter-tag, .user-tag {
+                margin: 2px 8px 2px 0;
+            }
         }
     }
 }

src/components/chart/list.jsx

@@ -445,8 +445,8 @@ class ChartList extends React.Component {
                 }} />
                 <TransferBox
                     visibleTransferBox={visibleTransferBox}
-                    onOk={(obj) => {
-                        console.log(obj);
+                    onOk={(user) => {
+                        dispatch({ type: 'chart/transfer', chartCode: this.state.selectedRecord.code, userCode: user.code });
                     }}
                     hideBox={() => {
                         this.setState({

src/components/chart/resolveChartOption.js

@@ -242,14 +242,14 @@ function scatterConfig(option, silent, thumbnail) {
     return o;
 }
 
-function tableConfig(option, silent) {
+function tableConfig(option, silent, thumbnail) {
     const { columns, data } = option;
     let o = {
         columns: columns.map(c => {
             if(c.dataIndex === 'percent') {
                 return { ...c, render: (value, record, index) => ((+value*100).toFixed(2)) + '%'};
             }else {
-                return c;
+                return { ...c, width: 100 };
             }
         }),
         data: data.map((d, i) => {

src/components/chart/transferBox.jsx

@@ -24,10 +24,9 @@ class TransferBox extends React.Component {
         //     }, 500);
         // });
         this.setState({ userData: [], fetching: true }, () => {
-            const body = {
-            };
+            const body = keyword || '';
             service.fetch({
-                url: URLS.USER_LIST,
+                url: URLS.USER_QUERY,
                 body: body,
             }).then(r => {
                 if(!r.err && r.data.code > 0) {
@@ -86,6 +85,15 @@ class TransferBox extends React.Component {
                             filterOption={false}
                             labelInValue={true}
                             notFoundContent={fetching ? <Spin size="small" /> : '无'}
+                            onFocus={(value) => {
+                                const timeout = this.state.timeout;
+                                timeout && window.clearTimeout(timeout);
+                                this.setState({
+                                    timeout: window.setTimeout(() => {
+                                        this.fetchUserData(value)
+                                    }, 500)
+                                });
+                            }}
                             onSearch={(value) => {
                                 const timeout = this.state.timeout;
                                 timeout && window.clearTimeout(timeout);

src/components/chartDesigner/sections/dataViewConfigForm.jsx

@@ -48,7 +48,7 @@ class DataViewConfigForm extends React.Component {
 						}}
 					>
 						{chartDesigner.dataViewConfig.viewColumns.map((c, i)=>{
-							return <Option key={i} name={c.name}>{c.label}</Option>
+							return <Option key={c.name} value={c.name}>{c.label}</Option>
 						})}
 					</Select>
 				</FormItem>
@@ -76,10 +76,20 @@ class DataViewConfigForm extends React.Component {
 				</FormItem>
 				<DisplayColumnBox
 					key={Math.random()}
-					autoRefresh={autoRefresh} 
 					visibleDisplayColumnBox={this.state.visibleDisplayColumnBox}
 					hideBox={() => this.setState({visibleDisplayColumnBox:false})}
-					targetColumns={chartDesigner.dataViewConfig.viewColumns.map(c => c.key)}
+					allColumns={chartDesigner.columns}
+					defaultSelectedColumns={chartDesigner.dataViewConfig.viewColumns}
+					okHandler={(targetColumns) => {
+						dispatch(
+							{
+								type: 'chartDesigner/changeField', 
+								name: 'dataViewConfig', 
+								value: { ...chartDesigner.dataViewConfig, viewColumns: targetColumns, sortColumn: targetColumns.length > 0 ? { key: targetColumns[0].name, label: targetColumns[0].label } : {} },
+								autoRefresh 
+							}
+						);
+					}}
 				/>	
 			</Form>
         );

src/components/chartDesigner/sections/displayColumnBox.jsx

@@ -1,12 +1,11 @@
 import React from 'react'
 import { Modal, Transfer, Icon } from 'antd'
-import { connect } from 'dva'
 
 class DisplayColumnBox extends React.Component {
     constructor(props){
         super(props)
         this.state = {
-            targetColumns: props.targetColumns || []
+            targetColumns: props.defaultSelectedColumns || []
         }
     }
     swapItems = (arr, index1, index2) => {
@@ -37,7 +36,7 @@ class DisplayColumnBox extends React.Component {
     };
 
     renderRow = (item) => {
-        let index = this.state.targetColumns.indexOf(item.key);
+        let index = this.state.targetColumns.findIndex(c => c.name === item.name);
         return <span data-key={item.name}>
             {item.label}
             {index !== -1 && <span style={{ float: 'right' }}>
@@ -48,40 +47,26 @@ class DisplayColumnBox extends React.Component {
     }
 
     handleChange = (targetKeys, direction, moveKeys) => {
-        this.setState({ targetColumns: targetKeys });
+        const { allColumns } = this.props;
+        let targetColumns = allColumns.filter(c => targetKeys.indexOf(c.name) !== -1);
+        this.setState({ targetColumns });
     }
 
     onOk= () => {
-        const { dispatch, chartDesigner, autoRefresh, hideBox } = this.props;
+        const { hideBox, okHandler } = this.props;
         const { targetColumns } = this.state;
-        let viewColumns = targetColumns.map(c => {
-            let cl = chartDesigner.columns.find(_c => _c.name === c);
-            return {
-                name: cl.name,
-                label: cl.label
-            }
-        });
-        dispatch(
-            {
-                type: 'chartDesigner/changeField', 
-                name: 'dataViewConfig', 
-                value: { ...chartDesigner.dataViewConfig, viewColumns },
-                autoRefresh 
-            }
-        );
+        okHandler(targetColumns);
         hideBox()
     }
     
     onCancel = () => {
-        const { chartDesigner, hideBox } = this.props
-        this.setState({
-            targetColumns: chartDesigner.dataViewConfig.viewColumns})
-        hideBox()
+        const { hideBox } = this.props
+        hideBox();
     }
 
     render() {
-        const { visibleDisplayColumnBox } = this.props
-        const { targetColumns } = this.state
+        const { allColumns, visibleDisplayColumnBox } = this.props;
+        const { targetColumns } = this.state;
 
         return (
             <Modal
@@ -94,7 +79,7 @@ class DisplayColumnBox extends React.Component {
                 destroyOnClose={true}
             >
                 <Transfer
-                    dataSource={this.props.chartDesigner.columns.map(c => ({ ...c, key: c.name }))}
+                    dataSource={allColumns.map(c => ({ ...c, key: c.name }))}
                     showSearch
                     listStyle={{
                         width: 250,
@@ -102,7 +87,7 @@ class DisplayColumnBox extends React.Component {
                         textAlign:'left'
                     }}
                     operations={['显示', '隐藏']}
-                    targetKeys={targetColumns}
+                    targetKeys={targetColumns.map(c => c.name)}
                     onChange={this.handleChange}
                     render={this.renderRow}
                 />
@@ -111,4 +96,4 @@ class DisplayColumnBox extends React.Component {
     };
 }
 
-export default connect(({ present: {chartDesigner}}) => ({ chartDesigner}))(DisplayColumnBox);
+export default DisplayColumnBox;

src/components/chartDesigner/sections/filterBox.jsx

@@ -228,7 +228,8 @@ class FilterBox extends React.Component {
                 showSearch
                 notFoundContent={fetching ? <Spin size="small" /> : '无'}
                 onFocus={() => {this.fetchColumnData(column)}}
-                onChange={(value) => {this.changeFilterValue(filter, value, index)}}
+                // onChange={(value) => {this.changeFilterValue(filter, value, index)}}
+                onBlur={(value) => {this.changeFilterValue(filter, value, index)}}
             >
                 { columnData.map((s, i) => {
                     return <SelectOption key={i} value={s}>{s}</SelectOption>

src/components/chartDesigner/sections/toolbar.jsx

@@ -103,7 +103,7 @@ class Toolbar extends React.Component {
         return (
             <div className='toolbar'>
                 <div className='filters'>
-                    <h6 style={{ marginLeft: 10, marginRight: 8, display: 'inline' }}>筛选:</h6>
+                    <div style={{ margin: '10px 8px 0 10px' }}>筛选:</div>
                     {tags.map(tag => (
                         <Tag
                             className={`filter-tag ${tag.using?'filter-tag-using':''}`}

src/components/chartDesigner/sections/toolbar.less

@@ -11,7 +11,11 @@
         line-height: 100%;
         margin-bottom: 6px;
         .filters {
+            display: flex;
             .filter-tag {
+                max-width: 400px;
+                overflow: hidden;
+                text-overflow: ellipsis;
                 border-style: dashed;
                 margin: 6px 2px 0 2px;
             }

src/components/dashboard/list.jsx

@@ -4,7 +4,7 @@ import { connect } from 'dva'
 import { dateFormat } from '../../utils/baseUtils'
 import Ellipsis from 'ant-design-pro/lib/Ellipsis'
 import DistributeBox from './distributeBox'
-import TransferBox from './transferBox'
+import TransferBox from '../chart/transferBox';
 import 'ant-design-pro/dist/ant-design-pro.css'
 import Thumbnail from './thumbnail'
 import './list.less'
@@ -52,7 +52,6 @@ class DashboardList extends React.Component {
 
     generateCard() {
         const { dashboard, dispatch } = this.props;
-        const { selectedRecord } = this.state;
         const list = dashboard.list;
 
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
@@ -214,11 +213,15 @@ class DashboardList extends React.Component {
                     }} />
                 <TransferBox
                     visibleTransferBox={visibleTransferBox}
-                    onCancel={() => {
+                    onOk={(user) => {
+                        dispatch({ type: 'dashboard/transfer', dashboardCode: this.state.selectedRecord.code, userCode: user.code });
+                    }}
+                    hideBox={() => {
                         this.setState({
                             visibleTransferBox: false
                         })
-                    }} />
+                    }}
+                />
                 <DeleteBox
                     visibleDeleteBox={visibleDeleteBox}
                     type='dashboard'

src/components/datasource/baseConfig.jsx

@@ -49,13 +49,7 @@ class DataSourceBaseConfig extends React.Component {
                         value={dataSource.newOne.name}
                         onBlur={(e) => {
                             dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value });
-                            const timeout = this.state.timeout;
-                            timeout && window.clearTimeout(timeout);
-                            this.setState({
-                                timeout: window.setTimeout(() => {
-                                    dispatch({ type: 'dataSource/remoteModify' });
-                                }, 500)
-                            });
+                            dispatch({ type: 'dataSource/remoteModify' });
                         }}
                         onChange={(e) => {
                             dispatch({ type: 'dataSource/setNewModelField', name: 'name', value: e.target.value });
@@ -260,14 +254,9 @@ class DataSourceBaseConfig extends React.Component {
                         value={dataSource.newOne.description}
                         onChange={(e) => {
                             dispatch({ type: 'dataSource/setNewModelField', name: 'description', value: e.target.value });
-                            
-                            const timeout = this.state.timeout;
-                            timeout && window.clearTimeout(timeout);
-                            this.setState({
-                                timeout: window.setTimeout(() => {
-                                    dispatch({ type: 'dataSource/remoteModify' });
-                                }, 500)
-                            });
+                        }}
+                        onBlur={(e) => {
+                            dispatch({ type: 'dataSource/remoteModify' });
                         }}
                     />
                 </FormItem>

src/components/datasource/dataSource.jsx

@@ -460,8 +460,8 @@ class DataSource extends React.Component {
                         />
                         <TransferBox
                             visibleTransferBox={visibleTransferBox}
-                            onOk={(obj) => {
-                                console.log(obj);
+                            onOk={(user) => {
+                                dispatch({ type: 'dataSource/transfer', dataSourceCode: this.state.selectedRecord.code, userCode: user.code });
                             }}
                             hideBox={() => {
                                 this.setState({

src/constants/url.js

@@ -32,6 +32,8 @@ const URLS = {
 
     USER_ROLE_SET: BASE_URL + '/', // 设置用户角色
 
+    USER_QUERY: BASE_URL + '/getNameList', // 关键字查询
+
     /***************************************数据源***************************************/
 
     DATASOURCE_ADD: BASE_URL + '/inputDataConnector', // 新增数据源
@@ -60,6 +62,8 @@ const URLS = {
 
     DATASOURCE_POLICY_TARGET_UPDATE: BASE_URL + '/addObject', // 设置策略对象
 
+    DATASOURCE_TRANSFER: BASE_URL + '/changeDbOrder', // 数据源移交
+
     /***************************************数据连接配置***************************************/
 
     DATACONNECT_ADD: BASE_URL + '/inputDatabases', // 新增数据连接配置
@@ -110,6 +114,8 @@ const URLS = {
 
     CHART_POLICY_TARGET_UPDATE: BASE_URL + '/addObject', // 设置策略对象
 
+    CHART_TRANSFER: BASE_URL + '/changeChartOrder', // 图表移交
+
     /***************************************数据源分组***************************************/
 
     GROUP_DATASOURCE_LIST: BASE_URL + '/getConnectorGroup', // 获得数据源所有分组/子分组

src/models/chart.js

@@ -770,6 +770,38 @@ export default {
                 message.error('设置分组失败');
             }
         },
+        *transfer(action, { put, call, select }) {
+            const { userCode, chartCode } = action;
+            const body = {
+                userId: userCode,
+                id: chartCode
+            };
+            try {
+                const res = yield call(service.fetch, {
+                    url: URLS.CHART_TRANSFER,
+                    body
+                });
+                console.log('图表移交', body, res);
+                if(!res.err && res.data.code > 0) {
+                    const chart = yield select(state => state.present.chart);
+                    const list = chart.list;
+                    for(let i = 0; i < list.length; i++) {
+                        if(list[i].code === chartCode) {
+                            list.splice(i, 1);
+                            break;
+                        }
+                    }
+                    yield put({ type: 'list', list });
+                    message.success('移交成功');
+                }else {
+                    console.log(body, res.err || res.data.msg);
+                    message.error('移交失败');
+                }
+            }catch(e) {
+                console.log(body, e);
+                message.error('移交失败');
+            }
+        }
     },
     subscriptions: {
         setup({ dispatch, history }) {

src/models/chartDesigner.js

@@ -560,7 +560,7 @@ export default {
                 const { code, dataViewConfig, filters } = chartDesigner;
                 const body = {
                     id: code,
-                    columnListName: dataViewConfig.viewColumns.map(c => c.key),
+                    columnListName: dataViewConfig.viewColumns.map(c => c.name),
                     sortColumn: dataViewConfig.sortColumn.key,
                     sort: dataViewConfig.sortType,
                     showLine: dataViewConfig.count,
@@ -577,7 +577,7 @@ export default {
                     let columns = dataViewConfig.viewColumns.map(c => {
                         return {
                             title: c.label,
-                            dataIndex: c.key
+                            dataIndex: c.name
                         }
                     })
                     let dataSource = [];

src/models/dashboard.js

@@ -211,6 +211,39 @@ export default {
                 message.error('删除失败');
             }
         },
+        *transfer(action, { put, call, select }) {
+            const { userCode, dashboardCode } = action;
+            const body = {
+                userId: userCode,
+                id: dashboardCode
+            };
+            try {
+                // const res = yield call(service.fetch, {
+                //     url: URLS.DASHBOARD_TRANSFER,
+                //     body
+                // });
+                // console.log('看板移交', body, res);
+                const res = {data:{code:1}};
+                if(!res.err && res.data.code > 0) {
+                    const dashboard = yield select(state => state.present.dashboard);
+                    const list = dashboard.list;
+                    for(let i = 0; i < list.length; i++) {
+                        if(list[i].code === dashboardCode) {
+                            list.splice(i, 1);
+                            break;
+                        }
+                    }
+                    yield put({ type: 'list', list });
+                    message.success('移交成功');
+                }else {
+                    console.log(body, res.err || res.data.msg);
+                    message.error('移交失败');
+                }
+            }catch(e) {
+                console.log(body, e);
+                message.error('移交失败');
+            }
+        }
     },
     subscriptions: {
         setup({ dispatch, history}) {

src/models/dataSource.js

@@ -19,8 +19,8 @@ export default {
     },
     reducers: {
         list(state, action) {
-            let data = action.data;
-            return Object.assign({}, state, {list: data});
+            const { list } = action;
+            return { ...state, list };
         },
         add(state, action) {
             let newOne = Object.assign({}, state.newOne);
@@ -166,6 +166,7 @@ export default {
     },
     effects: {
         *fetchList(action, { select, call, put, takeEvery, takeLatest }) {
+            const body = {};
             try {
                 const dataSource = yield select(state => state.present.dataSource);
                 if(!action.mandatory && dataSource.list.length > 0) {
@@ -173,11 +174,12 @@ export default {
                 }
                 const res = yield call(service.fetch, {
                     url: URLS.DATASOURCE_LIST,
-                    body: {}
+                    body
                 });
                 
+                console.log('请求数据源列表', body, res);
                 if(!res.err && res.data.code > 0) {
-                    let data = res.data.data.map((r, i) => {
+                    let list = res.data.data.map((r, i) => {
                         let dbConfig = JSON.parse(r.dbConfig);
                         let tags = JSON.parse(r.dataTag);
                         return {
@@ -193,8 +195,7 @@ export default {
                             groupCode: r.connectorGroup+''
                         }
                     });
-                    console.log('请求数据源列表', res, data);
-                    yield put({ type: 'list', data });
+                    yield put({ type: 'list', list });
                 }else {
                     message.error('读取数据源列表错误: ' + (res.err || res.data.msg));
                 }
@@ -313,7 +314,7 @@ export default {
             }catch(e) {
                 console.log(e);
                 message.error('数据源解析错误');
-                yield put({ type: 'list', data: [] });
+                yield put({ type: 'list', list: [] });
             }
         },
         *importNewModelColumns(action, { select, call, put }) {
@@ -379,7 +380,7 @@ export default {
                             break;
                         }
                     }
-                    yield put({ type: 'list', data: list });
+                    yield put({ type: 'list', list });
                     message.success('删除成功');
                 }else {
                     message.error('删除失败: ' + (res.err || res.data.msg));
@@ -791,6 +792,38 @@ export default {
                 console.log(e);
                 message.error('设置分组失败');
             }
+        },
+        *transfer(action, { put, call, select }) {
+            const { userCode, dataSourceCode } = action;
+            const body = {
+                userId: userCode,
+                id: dataSourceCode
+            };
+            try {
+                const res = yield call(service.fetch, {
+                    url: URLS.DATASOURCE_TRANSFER,
+                    body
+                });
+                console.log('数据源移交', body, res);
+                if(!res.err && res.data.code > 0) {
+                    const dataSource = yield select(state => state.present.dataSource);
+                    const list = dataSource.list;
+                    for(let i = 0; i < list.length; i++) {
+                        if(list[i].code === dataSourceCode) {
+                            list.splice(i, 1);
+                            break;
+                        }
+                    }
+                    yield put({ type: 'list', list });
+                    message.success('移交成功');
+                }else {
+                    console.log(body, res.err || res.data.msg);
+                    message.error('移交失败');
+                }
+            }catch(e) {
+                console.log(body, e);
+                message.error('移交失败');
+            }
         }
     },
     subscriptions: {