|
|
@@ -1,13 +1,13 @@
|
|
|
import React from 'react'
|
|
|
import { routerRedux } from 'dva/router'
|
|
|
-import { Tabs, Input, Button, Table, Icon, Tag, Menu, Dropdown, Divider } from 'antd'
|
|
|
+import { Layout, Row, Col, Tabs, Input, Button, Table, Icon, Tag, Menu, Dropdown, Divider } from 'antd'
|
|
|
+const { Content } = Layout
|
|
|
const { TabPane } = Tabs
|
|
|
const { Search } = Input
|
|
|
import { connect } from 'dva'
|
|
|
import { Link } from 'react-router-dom'
|
|
|
-import DataConnectBox from './dataConnectBox'
|
|
|
-import dataSource from '../../models/dataSource'
|
|
|
-import dataConnect from '../../models/dataConnect'
|
|
|
+import '../../models/dataSource'
|
|
|
+import '../../models/dataConnect'
|
|
|
import './dataSource.less'
|
|
|
|
|
|
class DataSource extends React.Component {
|
|
|
@@ -16,11 +16,8 @@ class DataSource extends React.Component {
|
|
|
this.state = {
|
|
|
loading: false,
|
|
|
activeTab: 'dataSource',
|
|
|
- operation: 'create', // 打开数据编辑界面的类型
|
|
|
visibleCreateBox: false,
|
|
|
- visibleBox: false, // 数据编辑界面显示标识
|
|
|
selectedDataSourceCode: -1, // 当前选中的dataSource的code
|
|
|
- selectedDataConnectCode: -1, // 当前选中的dataConnect的code
|
|
|
filterDropdownVisible: false,
|
|
|
search: {} // 搜索条件
|
|
|
}
|
|
|
@@ -35,30 +32,11 @@ class DataSource extends React.Component {
|
|
|
*/
|
|
|
setScrollTableHeight() {
|
|
|
const mainContent = document.getElementsByClassName('main-content')[0];
|
|
|
- const tabBar = mainContent.getElementsByClassName('ant-tabs-bar')[0];
|
|
|
+ //const tabBar = mainContent.getElementsByClassName('datasource-view')[0];
|
|
|
+ const toolbar = mainContent.getElementsByClassName('datasource-tools')[0];
|
|
|
const tableHeader = mainContent.getElementsByClassName('ant-table-header')[0];
|
|
|
const tableBody = mainContent.getElementsByClassName('ant-table-body')[0];
|
|
|
-
|
|
|
- tableBody.style.maxHeight=`${mainContent.offsetHeight - tabBar.offsetHeight - tableHeader.offsetHeight - 38}px`;
|
|
|
- }
|
|
|
-
|
|
|
- showCreateBox = () => {
|
|
|
- this.setState({
|
|
|
- visibleCreateBox: true
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- showDataConnectBox = (o) => {
|
|
|
- this.setState({
|
|
|
- operation: o,
|
|
|
- visibleBox: true
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- hideDataConnectBox = () => {
|
|
|
- this.setState({
|
|
|
- visibleBox: false
|
|
|
- });
|
|
|
+ tableBody.style.maxHeight=`${mainContent.offsetHeight - toolbar.offsetHeight - tableHeader.offsetHeight - 38}px`;
|
|
|
}
|
|
|
|
|
|
onInputChange = (name, value) => {
|
|
|
@@ -198,105 +176,41 @@ class DataSource extends React.Component {
|
|
|
width: 80
|
|
|
}];
|
|
|
|
|
|
- const dataConnectColumns = [{
|
|
|
- title: '名称',
|
|
|
- dataIndex: 'name',
|
|
|
- key: 'name',
|
|
|
- width: 100,
|
|
|
- render: (text, record) => {
|
|
|
- return <div className='datasource-name'>
|
|
|
- <div className={`datasource-type type-${record.type}`}></div>
|
|
|
- <div>{text}</div>
|
|
|
- </div>
|
|
|
- }
|
|
|
- }, {
|
|
|
- title: '说明',
|
|
|
- dataIndex: 'description',
|
|
|
- key: 'description',
|
|
|
- width: 100
|
|
|
- }, {
|
|
|
- title: '操作',
|
|
|
- key: 'action',
|
|
|
- width: 300,
|
|
|
- render: (text, record) => (
|
|
|
- <div className='action-col'>
|
|
|
- <div className='operation' onClick={() => {
|
|
|
- let selectedModel = dataConnect.list.find((i) => { return i.code == record.code });
|
|
|
- dispatch({ type: 'dataConnect/setNewModel', model: selectedModel });
|
|
|
- this.showDataConnectBox('modify')
|
|
|
- }}><Icon type="info-circle-o"/>属性</div>
|
|
|
- <div className='operation'><Divider type="vertical" /></div>
|
|
|
- <div className='operation' onClick={() => {
|
|
|
- dispatch({ type: 'dataSource/resetNewModel' });
|
|
|
- dispatch({ type: 'dataSource/setNewModelField', fields: [
|
|
|
- { name: 'dbType', value: record.dbType },
|
|
|
- { name: 'address', value: record.address },
|
|
|
- { name: 'port', value: record.port },
|
|
|
- { name: 'dbName', value: record.dbName },
|
|
|
- { name: 'userName', value: record.userName },
|
|
|
- { name: 'password', value: record.password }
|
|
|
- ] });
|
|
|
-
|
|
|
- dispatch({type: 'main/redirect', path: {pathname: '/datasource/database/create'}});
|
|
|
- }}><Icon type="plus"/>创建数据源</div>
|
|
|
- <div className='operation'><Divider type="vertical" /></div>
|
|
|
- <div className='operation' onClick={() => {
|
|
|
- dispatch({ type: 'dataConnect/remoteDelete', code: record.code });
|
|
|
- }}><Icon type="delete"/>删除</div>
|
|
|
- </div>
|
|
|
- ),
|
|
|
- width: 80
|
|
|
- }];
|
|
|
-
|
|
|
return (
|
|
|
- <Tabs
|
|
|
- className='datasource-tabs'
|
|
|
- type="card"
|
|
|
- defaultActiveKey="1"
|
|
|
- tabBarExtraContent={
|
|
|
- <div className='datasource-tabs-tools'>
|
|
|
- <Search
|
|
|
- placeholder="请输入关键字"
|
|
|
- onSearch={value => console.log(value)}
|
|
|
- />
|
|
|
- <Dropdown overlay={(
|
|
|
- <Menu onClick={(item, key, keyPath) => {
|
|
|
- const type = item.key;
|
|
|
- dispatch({ type: 'dataSource/resetNewModel' });
|
|
|
- dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: type });
|
|
|
- dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ type +'/create'}});
|
|
|
- }}>
|
|
|
- <Menu.Item key='database'>数据库</Menu.Item>
|
|
|
- <Menu.Item key='file'>文件</Menu.Item>
|
|
|
- </Menu>
|
|
|
- )} trigger={['click']}>
|
|
|
- <Button style={{ display: activeTab=='dataConnect'?'none':'inline-block' }}>
|
|
|
- <Icon type="plus" />添加数据源
|
|
|
- </Button>
|
|
|
- </Dropdown>
|
|
|
- <Button style={{ display: activeTab=='dataConnect'?'inline-block':'none' }} onClick={(e) => {
|
|
|
- dispatch({ type: 'dataConnect/resetNewModel' });
|
|
|
- this.showDataConnectBox('create')
|
|
|
- }}>
|
|
|
- <Icon type="plus" />添加数据连接
|
|
|
- </Button>
|
|
|
- <DataConnectBox operation={operation} visibleBox={visibleBox} hideBox={this.hideDataConnectBox} />
|
|
|
- </div>
|
|
|
- }
|
|
|
- onChange={(key) => {
|
|
|
- this.setState({
|
|
|
- activeTab: key == '1' ? 'dataSource' : 'dataConnect'
|
|
|
- });
|
|
|
- }}
|
|
|
- >
|
|
|
- <TabPane className='datasource-tab' tab="数据源" key="1" >
|
|
|
+ <Layout className='datasource-view'>
|
|
|
+ <Content>
|
|
|
+ <Row className='datasource-tools' type='flex' justify='end'>
|
|
|
+ <Col className='search'>
|
|
|
+ <Search
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ onSearch={value => console.log(value)}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ <Col>
|
|
|
+ <Dropdown overlay={(
|
|
|
+ <Menu onClick={(item, key, keyPath) => {
|
|
|
+ const type = item.key;
|
|
|
+ dispatch({ type: 'dataSource/resetNewModel' });
|
|
|
+ dispatch({ type: 'dataSource/setNewModelField', name: 'type', value: type });
|
|
|
+ dispatch({type: 'main/redirect', path: {pathname: '/datasource/'+ type +'/create'}});
|
|
|
+ }}>
|
|
|
+ <Menu.Item key='database'>数据库</Menu.Item>
|
|
|
+ <Menu.Item key='file'>文件</Menu.Item>
|
|
|
+ </Menu>
|
|
|
+ )} trigger={['click']}>
|
|
|
+ <Button style={{ display: activeTab=='dataConnect'?'none':'inline-block' }}>
|
|
|
+ <Icon type="plus" />添加数据源
|
|
|
+ </Button>
|
|
|
+ </Dropdown>
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
<Table
|
|
|
className='datasource-table datasource-table'
|
|
|
columns={dataSourceColumns}
|
|
|
dataSource={dataSource.list}
|
|
|
loading={loading}
|
|
|
size='small'
|
|
|
- scroll={{x: false, y: 471}}
|
|
|
+ scroll={{x: false, y: true}}
|
|
|
pagination={false}
|
|
|
onRow={(record) => {
|
|
|
return {
|
|
|
@@ -304,19 +218,8 @@ class DataSource extends React.Component {
|
|
|
}
|
|
|
}}
|
|
|
/>
|
|
|
- </TabPane>
|
|
|
- <TabPane className='dataconnect-tab dataconnect' tab="数据库连接" key="2" >
|
|
|
- <Table
|
|
|
- className='dataconnect-table'
|
|
|
- columns={dataConnectColumns}
|
|
|
- dataSource={dataConnect.list}
|
|
|
- loading={loading}
|
|
|
- size='small'
|
|
|
- scroll={{x: false, y: 471}}
|
|
|
- pagination={false}
|
|
|
- />
|
|
|
- </TabPane>
|
|
|
- </Tabs>
|
|
|
+ </Content>
|
|
|
+ </Layout>
|
|
|
)
|
|
|
|
|
|
|
zhuth