| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { fromJS } from 'immutable' |
| | | import { notification, Modal, Spin, Tabs, Typography, Popconfirm, Button } from 'antd' |
| | | import { Form, notification, Modal, Spin, Tabs, Typography, Popconfirm, Button } from 'antd' |
| | | import { CheckCircleOutlined, StopOutlined, SwapOutlined, DeleteOutlined, BorderOutlined } from '@ant-design/icons' |
| | | import moment from 'moment' |
| | | |
| | |
| | | |
| | | class SettingForm extends Component { |
| | | static propTpyes = { |
| | | dict: PropTypes.object, // 字典项 |
| | | menu: PropTypes.object, // 菜单信息 |
| | | config: PropTypes.object, // 页面配置信息 |
| | | search: PropTypes.array, // 搜索条件 |
| | |
| | | } |
| | | |
| | | render() { |
| | | const { config, menu, dict } = this.props |
| | | const { config, menu } = this.props |
| | | const { loading, activeKey, setting, defaultSql, columns, scripts, status, visible, script, scriptValue } = this.state |
| | | |
| | | return ( |
| | |
| | | <TabPane tab="数据源" key="setting"> |
| | | <DataSource |
| | | menu={menu} |
| | | dict={dict} |
| | | config={config} |
| | | columns={columns} |
| | | setting={setting} |
| | |
| | | this.setState({visible: true, script: null, scriptValue: ''}) |
| | | }}/> : null} |
| | | <CustomScript |
| | | dict={dict} |
| | | setting={setting} |
| | | scripts={scripts} |
| | | defaultSql={defaultSql} |
| | |
| | | title = title && title[0] ? title[0] : '' |
| | | let _text = title ? item.sql.replace(title, '') : item.sql |
| | | |
| | | return ( |
| | | <div className={'script-item ' + (script && script.uuid === item.uuid ? 'active' : '') } key={item.uuid}> |
| | | <div style={{cursor: 'pointer'}} onClick={() => { |
| | | this.setState({script: item, scriptValue: item.sql}) |
| | | }}> |
| | | {title ? <div style={{color: '#a50', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{title}</div> : null} |
| | | <Paragraph copyable={{ text: item.sql }} ellipsis={{ rows: 4 }}>{_text}</Paragraph> |
| | | <div>{item.status === 'false' ? |
| | | <span style={{color: '#ff4d4f', marginLeft: '20px'}}> |
| | | 禁用 |
| | | <StopOutlined style={{marginLeft: '5px'}} /> |
| | | </span> : |
| | | <span style={{color: '#26C281', marginLeft: '20px'}}> |
| | | 启用 |
| | | <CheckCircleOutlined style={{marginLeft: '5px'}}/> |
| | | </span>} |
| | | if (item.status === 'false') { |
| | | return ( |
| | | <div className="script-item" key={item.uuid}> |
| | | <div style={{cursor: 'not-allowed'}}> |
| | | {title ? <div style={{color: '#a50', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{title}</div> : null} |
| | | <Paragraph copyable={{ text: item.sql }} ellipsis={{ rows: 4 }}>{_text}</Paragraph> |
| | | <div> |
| | | <span style={{color: '#ff4d4f', marginLeft: '20px'}}> |
| | | 禁用 |
| | | <StopOutlined style={{marginLeft: '5px'}} /> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div style={{height: '24px'}}></div> |
| | | </div> |
| | | ) |
| | | } else { |
| | | return ( |
| | | <div className={'script-item ' + (script && script.uuid === item.uuid ? 'active' : '') } key={item.uuid}> |
| | | <div style={{cursor: 'pointer'}} onClick={() => { |
| | | this.setState({script: item, scriptValue: item.sql}) |
| | | }}> |
| | | {title ? <div style={{color: '#a50', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis'}}>{title}</div> : null} |
| | | <Paragraph copyable={{ text: item.sql }} ellipsis={{ rows: 4 }}>{_text}</Paragraph> |
| | | <div> |
| | | <span style={{color: '#26C281', marginLeft: '20px'}}> |
| | | 启用 |
| | | <CheckCircleOutlined style={{marginLeft: '5px'}}/> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <div style={{textAlign: 'right'}}> |
| | | <span className="operation-btn" onClick={() => this.handleStatus(item)} style={{color: '#8E44AD'}}><SwapOutlined /></span> |
| | | <Popconfirm |
| | | overlayClassName="popover-confirm" |
| | | title="确定删除吗?" |
| | | onConfirm={() => this.handleDelete(item) |
| | | }> |
| | | <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> |
| | | </Popconfirm> |
| | | </div> |
| | | </div> |
| | | <div style={{textAlign: 'right'}}> |
| | | <span className="operation-btn" onClick={() => this.handleStatus(item)} style={{color: '#8E44AD'}}><SwapOutlined /></span> |
| | | <Popconfirm |
| | | overlayClassName="popover-confirm" |
| | | title={this.props.dict['model.query.delete']} |
| | | onConfirm={() => this.handleDelete(item) |
| | | }> |
| | | <span className="operation-btn" style={{color: '#ff4d4f'}}><DeleteOutlined /></span> |
| | | </Popconfirm> |
| | | </div> |
| | | </div> |
| | | ) |
| | | ) |
| | | } |
| | | })} |
| | | </div> |
| | | <div className="script-button"> |
| | |
| | | } |
| | | } |
| | | |
| | | export default SettingForm |
| | | export default Form.create()(SettingForm) |