资源文件引用路径调整/数据连接界面

.webpackrc

@@ -5,7 +5,7 @@
     "disableCSSModules": true,
     "hash": true,
     "html": {
-        "favicon": "./public/favicon.png",
+        "favicon": "./static/images/favicon.png",
         "template": "./src/index.ejs"
     }
 }

src/components/chart/list.less

@@ -90,7 +90,7 @@
                                         cursor: pointer;
                                     }
                                     .table-default {
-                                        background-image: url(/images/table-default.png);
+                                        background-image: url(../../../static/images/table-default.png);
                                         width: 100%;
                                         height: 100%;
                                         background-position: center;
@@ -99,7 +99,7 @@
                                         cursor: pointer;
                                     }
                                     .chart-default {
-                                        background-image: url(/images/chart-default.png);
+                                        background-image: url(../../../static/images/chart-default.png);
                                         width: 100%;
                                         height: 100%;
                                         background-position: center;

src/components/chartDesigner/header.jsx

@@ -62,14 +62,14 @@ class Header extends React.Component {
                     >
                         <Button onClick={(e) => {
                             if(!chartDesigner.dirty) {
-                                dispatch({ type: 'main/goBack', path: '/chart' });
+                                dispatch({ type: 'main/goBack', path: '/workshop/chart' });
                             }
                         }}>
                             <Icon type='left' />返回
                         </Button>
                     </Popconfirm>}
                     {!this.isOwner() && <Button onClick={(e) => {
-                        dispatch({ type: 'main/goBack', path: '/chart' });
+                        dispatch({ type: 'main/goBack', path: '/workshop/chart' });
                     }}>
                         <Icon type='left' />返回
                     </Button>}

src/components/common/CardList.less

@@ -47,7 +47,7 @@
                     cursor: pointer;
                 }
                 .table-default {
-                    background-image: url(/images/table-default.png);
+                    background-image: url(../../../static/images/table-default.png);
                     width: 100%;
                     height: 100%;
                     background-position: center;
@@ -56,7 +56,7 @@
                     cursor: pointer;
                 }
                 .chart-default {
-                    background-image: url(/images/chart-default.png);
+                    background-image: url(../../../static/images/chart-default.png);
                     width: 100%;
                     height: 100%;
                     background-position: center;
@@ -112,7 +112,7 @@
                     cursor: pointer;
                 }
                 .table-default {
-                    background-image: url(/images/table-default.png);
+                    background-image: url(../../../static/images/table-default.png);
                     width: 100%;
                     height: 100%;
                     background-position: center;
@@ -121,7 +121,7 @@
                     cursor: pointer;
                 }
                 .dashboard-default {
-                    background-image: url(/images/dashboard-default.png);
+                    background-image: url(../../../static/images/dashboard-default.png);
                     width: 100%;
                     height: 100%;
                     background-position: center;

src/components/common/login/login.jsx

@@ -75,7 +75,7 @@ class LoginComponent extends React.Component {
                 <div className='content'>
                     <div className='main'>
                         <div className='login-header'>
-                            <img className='logo' src='/images/uas.png' alt='UAS' style={{ height: '30px', marginTop: '3px'}}></img>
+                            <div className='logo'></div>
                             <span className='text' >BI 商业智能平台</span>
                         </div>
                         <Login

src/components/common/login/login.less

@@ -5,7 +5,7 @@
     overflow: auto;
     background-repeat: no-repeat;
     background-size: cover;
-    background-image: url(/images/login-bg.png);
+    background-image: url(../../../../static/images/login-bg.png);
     .content {
         padding: 112px 0 24px;
         flex: 1 1;
@@ -19,7 +19,10 @@
                 justify-content: center;
                 align-items: center;
                 .logo {
+                    height: 28px;
+                    width: 84px;
                     margin-top: 3px;
+                    background-image: url(../../../../static/images/uas.png);
                 }
                 .text {
                     font-size: 24px;

src/components/dashboardDesigner/header.jsx

@@ -46,21 +46,21 @@ class Header extends React.Component {
                                 url = 'dashboard/remoteAdd'
                             }
                             dispatch({ type: url }).then(() => {
-                                dispatch({ type: 'main/redirect', path: '/dashboard' });
+                                dispatch({ type: 'main/redirect', path: '/workshop/dashboard' });
                             });
                         }}
                         onCancel={() => {
                             this.setState({
                                 visibleConfirm: false
                             });
-                            dispatch({ type: 'main/redirect', path: '/dashboard' });
+                            dispatch({ type: 'main/redirect', path: '/workshop/dashboard' });
                         }}
                         okText="保存"
                         cancelText="不保存"
                     >
                         <Button onClick={() => {
                             if(!dashboardDesigner.dirty) {
-                                dispatch({ type: 'main/goBack', path: '/dashboard' });
+                                dispatch({ type: 'main/goBack', path: '/workshop/dashboard' });
                                 dispatch({ type: 'dashboardDesigner/reset' });
                             }
                         }}>
@@ -68,7 +68,7 @@ class Header extends React.Component {
                         </Button>
                     </Popconfirm>}
                     {!this.isOwner() && <Button onClick={(e) => {
-                        dispatch({ type: 'main/goBack', path: '/chart' });
+                        dispatch({ type: 'main/goBack', path: '/workshop/chart' });
                         dispatch({ type: 'dashboardDesigner/reset' });
                     }}>
                         <Icon type='left' />返回

src/components/dashboardDesigner/viewLayout.less

@@ -68,7 +68,7 @@
         }
       }
       .chart-default { // echart缺省
-        background-image: url(/images/chart-default.png);
+        background-image: url(../../../static/images/chart-default.png);
         width: 100%;
         height: 100%;
         background-position: center;

src/components/dataConnect/list.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Layout, Row, Col, Input, Button, Icon, Menu, Dropdown, Card } from 'antd'
+import { Layout, Row, Col, Input, Button, Icon, Card, Tooltip } from 'antd'
 import { connect } from 'dva'
 import DeleteBox from '../common/deleteBox/deleteBox'
 import DataConnectBox from '../dataSourceDetail/dataConnectBox'
@@ -60,50 +60,27 @@ class DataConnect extends React.Component {
 
     generateCard() {
         const { dataConnect, dispatch } = this.props;
-        const { selected } = dataConnect;
         const reg = new RegExp('([+ \\- & | ! ( ) { } \\[ \\] ^ \" ~ * ? : ( ) \/])', 'g'); // 需要转义的字符
         let filterLabel = dataConnect.filterLabel.replace(new RegExp('(\\\\)', 'g'), '\\$1').replace(reg, '\\$1'); // 添加转义符号
 
-        const operationMenu = (
-            <Menu className='menu-operation'>
-                <Menu.Item onClick={(e) => {
-                    dispatch({ type: 'dataConnect/setNewModel', model: selected });
-                    dispatch({ type: 'dataConnect/setNewModelFields', fields: [
-                        { name: 'visibleBox', value: true },
-                        { name: 'boxOperation', value: 'modify' }
-                    ] });
-                    }}>
-                    <Icon type="info-circle-o" />属性设置
-                </Menu.Item>
-                <Menu.Divider />
-                <Menu.Item
-                    onClick={(e) => {
-                        dispatch({ type: 'dataConnect/setNewModel', model: { ...selected, code: null } });
-                        dispatch({ type: 'dataConnect/setNewModelFields', fields: [
-                            { name: 'visibleBox', value: true },
-                            { name: 'boxOperation', value: 'create' }
-                        ] });
-                    }}
-                >
-                    <Icon type="copy" />复制新增
-                </Menu.Item>
-                <Menu.Item
-                    onClick={(e) => {
-                        this.setState({ visibleDeleteBox: true})
-                    }}
-                >
-                    <Icon type="delete" />删除
-                </Menu.Item>
-            </Menu>
-        )
-
         let cards = dataConnect.list.filter(l => {
             return ((l.name || '').search(new RegExp('(' + filterLabel + '){1}', 'ig')) !== -1);
         }).map( (l, i) => (
             <CardGrid className='dataconnect-card' key={i}>
                 <Card
+                    hoverable={true}
                     title={
-                        <Row type='flex' justify='start'>
+                        <Row type='flex' justify='start'
+                            onClick={() => {
+                                // 选中项设置
+                                dispatch({ type: 'dataConnect/setSelected', selected: l });
+                                dispatch({ type: 'dataConnect/setNewModel', model: l });
+                                dispatch({ type: 'dataConnect/setNewModelFields', fields: [
+                                    { name: 'visibleBox', value: true },
+                                    { name: 'boxOperation', value: 'modify' }
+                                ] });
+                            }}
+                        >
                             <Col className='label'>
                                 { filterLabel ?
                                     ((l.name || '').split(new RegExp(`(${filterLabel})`, 'i')).map((fragment, i) => {
@@ -118,31 +95,55 @@ class DataConnect extends React.Component {
                             </Col>
                         </Row>
                     }
-                    onClick={() => {
-                        // 选中项设置
-                        dispatch({ type: 'dataConnect/setSelected', selected: l });
-                        dispatch({ type: 'dataConnect/setNewModel', model: l });
-                        dispatch({ type: 'dataConnect/setNewModelFields', fields: [
-                            { name: 'visibleBox', value: true },
-                            { name: 'boxOperation', value: 'modify' }
-                        ] });
-                    }}
+                    actions={[
+                        <Tooltip placement='bottom' title="属性设置">
+                            <Icon type="info-circle-o" onClick={() => {
+                                // 选中项设置
+                                dispatch({ type: 'dataConnect/setSelected', selected: l });
+                                dispatch({ type: 'dataConnect/setNewModel', model: l });
+                                dispatch({ type: 'dataConnect/setNewModelFields', fields: [
+                                    { name: 'visibleBox', value: true },
+                                    { name: 'boxOperation', value: 'modify' }
+                                ] });
+                            }}/>
+                        </Tooltip>,
+                        <Tooltip placement='bottom' title="复制新增">
+                            <Icon type="copy" onClick={() => {
+                                // 选中项设置
+                                dispatch({ type: 'dataConnect/setSelected', selected: l });
+                                dispatch({ type: 'dataConnect/setNewModel', model: { ...l, code: null } });
+                                dispatch({ type: 'dataConnect/setNewModelFields', fields: [
+                                    { name: 'visibleBox', value: true },
+                                    { name: 'boxOperation', value: 'create' }
+                                ] });
+                            }}/>
+                        </Tooltip>,
+                        <Tooltip placement='bottom' title="删除">
+                            <Icon type="delete" onClick={() => {
+                                // 选中项设置
+                                dispatch({ type: 'dataConnect/setSelected', selected: l });
+                                this.setState({ visibleDeleteBox: true})
+                            }}/>
+                        </Tooltip>,
+                    ]}
                 >
-                    <div className='content'>
+                    <div className='content'
+                        onClick={() => {
+                            // 选中项设置
+                            dispatch({ type: 'dataConnect/setSelected', selected: l });
+                            dispatch({ type: 'dataConnect/setNewModel', model: l });
+                            dispatch({ type: 'dataConnect/setNewModelFields', fields: [
+                                { name: 'visibleBox', value: true },
+                                { name: 'boxOperation', value: 'modify' }
+                            ] });
+                        }}
+                    >
                         <Row className='address'>
                             {l.address}
                         </Row>
                         <Row className='username'>
                             {l.userName}
                         </Row>
-                        <Row className='bottom' type='flex' justify='space-between'>
-                            <Col>{l.dbType}</Col>
-                            <Col>
-                                <Dropdown overlay={operationMenu} trigger={['click']}>
-                                    <Icon type="ellipsis" />
-                                </Dropdown>
-                            </Col>
-                        </Row>
                     </div>
                 </Card>
             </CardGrid>

src/components/dataConnect/list.less

@@ -57,8 +57,11 @@
                                 flex-direction: column;
                                 justify-content: space-between;
                                 height: 100%;
-                                .bottom {
-                                }
+                            }
+                        }
+                        .ant-card-actions {
+                            li {
+                                margin: 8px 0;
                             }
                         }
                     }

src/components/dataSourceDetail/content.less

@@ -106,7 +106,7 @@
                                             height: 32px;
                                             background-repeat: no-repeat;
                                             background-size: 32px;
-                                            background-image: url(/images/selected.png);
+                                            background-image: url(../../../static/images/selected.png);
                                             position: absolute;
                                             right: 0px;
                                             top: 0px;

src/components/dataSourceDetail/dataConnectBox.jsx

@@ -26,6 +26,14 @@ class DataConnectBox extends React.Component {
         }
     }
 
+    checkValid() {
+        const { dataConnect } = this.props;
+        const { newOne } = dataConnect;
+
+        return !!newOne && !!newOne.name && !!newOne.dbType && !!newOne.address && !!newOne.port &&
+            !!newOne.dbName && !!newOne.userName && (newOne.boxOperation === 'create' ? !!newOne.password : true);
+    }
+
     render() {
         const { dispatch, dataConnect } = this.props;
         const operation = dataConnect.newOne.boxOperation;
@@ -62,7 +70,7 @@ class DataConnectBox extends React.Component {
                                 </Button> */}
                                 <Button type='danger' disabled={dataConnect.newOne.validating || dataConnect.newOne.saving} onClick={() => dispatch({ type:'dataConnect/resetNewModel'})}>清空</Button>
                                 <Button onClick={() => {this.hideBox()}}>取 消</Button>
-                                <Button className={dataConnect.newOne.validating ? 'ant-btn-loading' : ''} type="primary" disabled={dataConnect.newOne.validating || dataConnect.newOne.saving} onClick={() => {this.okHandler()}}>
+                                <Button className={dataConnect.newOne.validating ? 'ant-btn-loading' : ''} type="primary" disabled={dataConnect.newOne.validating || dataConnect.newOne.saving || !this.checkValid()} onClick={() => {this.okHandler()}}>
                                     {dataConnect.newOne.saving ? (<Icon type='loading' />) : ''}
                                     {dataConnect.newOne.saving ? '校验中' : '保存'}
                                 </Button>
@@ -75,8 +83,8 @@ class DataConnectBox extends React.Component {
                     <FormItem
                         label='连接名'
                         {...formItemLayout}
-                        validateStatus={dataConnect.newOne.name ? 'success' : 'error'}
-                        help={dataConnect.newOne.name ? '' : '连接名不能为空'}
+                        validateStatus={(dataConnect.newOne.name === undefined || dataConnect.newOne.name) ? 'success' : 'error'}
+                        help={dataConnect.newOne.name === undefined || dataConnect.newOne.name ? '' : '连接名不能为空'}
                     >
                         <Input
                             disabled={disabled}
@@ -87,8 +95,8 @@ class DataConnectBox extends React.Component {
                         </Input>
                     </FormItem>
                     <FormItem label='数据库类型' {...formItemLayout}
-                        validateStatus={dataConnect.newOne.dbType ? 'success' : 'error'}
-                        help={dataConnect.newOne.dbType ? '' : '数据库类型不能为空'}
+                        validateStatus={(dataConnect.newOne.dbType === undefined || dataConnect.newOne.dbType) ? 'success' : 'error'}
+                        help={(dataConnect.newOne.dbType === undefined || dataConnect.newOne.dbType) ? '' : '数据库类型不能为空'}
                     >
                         <Select
                             disabled={true}
@@ -119,8 +127,8 @@ class DataConnectBox extends React.Component {
                                 labelCol: { span: 5 },
                                 wrapperCol: { span: 19 }
                             }}
-                            validateStatus={dataConnect.newOne.address ? 'success' : 'error'}
-                            help={dataConnect.newOne.address ? '' : '数据库地址不能为空'}
+                            validateStatus={(dataConnect.newOne.address === undefined || dataConnect.newOne.address) ? 'success' : 'error'}
+                            help={(dataConnect.newOne.address === undefined || dataConnect.newOne.address) ? '' : '数据库地址不能为空'}
                             >
                                 <Input
                                     disabled={disabled}
@@ -137,8 +145,8 @@ class DataConnectBox extends React.Component {
                                 labelCol: { span: 12 },
                                 wrapperCol: { span: 12 }
                             }}
-                            validateStatus={dataConnect.newOne.port ? 'success' : 'error'}
-                            help={dataConnect.newOne.port ? '' : '端口不能为空'}
+                            validateStatus={(dataConnect.newOne.port === undefined || dataConnect.newOne.port) ? 'success' : 'error'}
+                            help={(dataConnect.newOne.port === undefined || dataConnect.newOne.port) ? '' : '端口不能为空'}
                             >
                                 <InputNumber
                                     disabled={disabled}
@@ -151,8 +159,8 @@ class DataConnectBox extends React.Component {
                         </Col>
                     </Row>
                     <FormItem label='数据库名(SID)' {...formItemLayout}
-                        validateStatus={dataConnect.newOne.dbName ? 'success' : 'error'}
-                        help={dataConnect.newOne.dbName ? '' : '数据库名不能为空'}
+                        validateStatus={(dataConnect.newOne.dbName === undefined || dataConnect.newOne.dbName) ? 'success' : 'error'}
+                        help={(dataConnect.newOne.dbName === undefined || dataConnect.newOne.dbName) ? '' : '数据库名不能为空'}
                     >
                         <Input
                             disabled={disabled}
@@ -168,8 +176,8 @@ class DataConnectBox extends React.Component {
                                 labelCol: { span: 8 },
                                 wrapperCol: { span: 16 }
                             }}
-                            validateStatus={dataConnect.newOne.userName ? 'success' : 'error'}
-                            help={dataConnect.newOne.userName ? '' : '用户名不能为空'}
+                            validateStatus={(dataConnect.newOne.userName === undefined || dataConnect.newOne.userName) ? 'success' : 'error'}
+                            help={(dataConnect.newOne.userName === undefined || dataConnect.newOne.userName) ? '' : '用户名不能为空'}
                             >
                                 <Input
                                     disabled={disabled}
@@ -185,8 +193,8 @@ class DataConnectBox extends React.Component {
                                 labelCol: { span: 8 },
                                 wrapperCol: { span: 16 }
                             }}
-                            // validateStatus={dataConnect.newOne.userName ? 'success' : 'error'}
-                            // help={dataConnect.newOne.userName ? '' : '用户名不能为空'}
+                            validateStatus={operation === 'create' ? ((dataConnect.newOne.password === undefined || dataConnect.newOne.password) ? 'success' : 'error') : 'success'}
+                            help={operation === 'create' ? ((dataConnect.newOne.password === undefined || dataConnect.newOne.password) ? '' : '密码不能为空') : ''}
                             >
                                 <Input
                                     disabled={disabled}
@@ -205,7 +213,7 @@ class DataConnectBox extends React.Component {
                                     style={{ marginLeft: '10px' }}
                                     disabled={dataConnect.newOne.validating || dataConnect.newOne.saving}
                                     onClick={() => dispatch({ type:'dataConnect/remoteValidate'})}
-                                    className={dataConnect.newOne.invalid === undefined ? 'valid-default' : ( dataConnect.newOne.invalid ? 'valid-failure' : 'valid-success' )}
+                                    className={`valid-btn ${dataConnect.newOne.invalid === undefined ? 'valid-default' : ( dataConnect.newOne.invalid ? 'valid-failure' : 'valid-success' )}`}
                                 >
                                     {dataConnect.newOne.validating ? (<Icon type='loading' />) : ( dataConnect.newOne.invalid === undefined ? <Icon type='question-circle' /> : ( dataConnect.newOne.invalid ? <Icon type="exclamation-circle" /> : <Icon type="check-circle" /> ) ) }
                                     {dataConnect.newOne.invalid === undefined ? '测试' : ( dataConnect.newOne.invalid ? '失败' : '成功' )}

src/components/dataSourceDetail/dataConnectBox.less

@@ -10,18 +10,23 @@
         .textarea-desc {
             margin-top: 4px;
         }
-        .valid-default {
+        .valid-btn {
             color: #fff;
+            &[disabled] {
+                color: rgba(0, 0, 0, 0.25);
+                background-color: #f5f5f5;
+                border-color: #d9d9d9;
+            }
+        }
+        .valid-default {
             background-color: #faad14;
             border-color: #faad14;
         }
         .valid-failure {
-            color: #fff;
             background-color: #ff4d4f;
             border-color: #ff4d4f;
         }
         .valid-success {
-            color: #fff;
             background-color: #52C41A;
             border-color: #52C41A;
         }

src/components/dataSourceDetail/header.jsx

@@ -12,7 +12,7 @@ class DataSourceDetailHeader extends React.Component {
             <div className='dataSourcedetail-header'>
                 <div className='header-item toolbar-back'>
                     <Button onClick={(e) => {
-                        dispatch({ type: 'main/redirect', path: '/datasource' });
+                        dispatch({ type: 'main/redirect', path: '/workshop/datasource' });
                     }}>
                         <Icon type='left' />返回
                     </Button>

src/constants/url.js

@@ -30,7 +30,7 @@ const URLS = {
 
     USER_LIST: BASE_URL + '/getUserList', // 获取用户列表
 
-    USER_ROLE_SET: BASE_URL + '/', // 设置用户角色
+    USER_UPDATE: BASE_URL + '/updateUser', // 设置用户角色
 
     USER_QUERY: BASE_URL + '/getNameList', // 关键字查询
 

src/models/dataConnect.js

@@ -93,7 +93,7 @@ export default {
         resetNewModel(state, action) {
             let newOne = state.newOne;
             delete newOne.name;
-            delete newOne.dbType;
+            // delete newOne.dbType;
             delete newOne.address;
             delete newOne.port;
             delete newOne.dbName;
@@ -164,6 +164,15 @@ export default {
             try {
                 // 设置validating为true
                 yield put({ type: 'setNewModelField', name: 'validating', value: true });
+                yield put({ type: 'setNewModelFields', fields: [
+                    { name: 'name', value: model.name || '' },
+                    { name: 'address', value: model.address || '' },
+                    { name: 'port', value: model.port || '' },
+                    { name: 'dbType', value: model.dbType || '' },
+                    { name: 'dbName', value: model.dbName || '' },
+                    { name: 'userName', value: model.userName || '' },
+                    { name: 'password', value: model.password || '' },
+                ] });
                 // 调用检测接口检测连接配置是否合法
                 let validBody = {
                     id: model.code,