import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Icon, Modal } from 'antd'
|
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/mob.js'
|
import enUS from '@/locales/en-US/mob.js'
|
import VerifyCard from './verifycard'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class DataSource extends Component {
|
static propTpyes = {
|
config: PropTypes.any,
|
updateConfig: PropTypes.func
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
sourcelist: [],
|
searches: [],
|
visible: false,
|
loading: false,
|
source: null
|
}
|
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
this.setState({sourcelist: config.sourcelist || []})
|
}
|
|
UNSAFE_componentWillReceiveProps(nextProps) {
|
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
editDataSource = (item) => {
|
// const { config } = this.props
|
|
if (!item) {
|
item = {
|
uuid: Utils.getuuid(),
|
setting: {},
|
columns: [],
|
scripts: []
|
}
|
}
|
|
this.setState({
|
visible: true,
|
source: item,
|
searches: []
|
})
|
}
|
|
closeDataSource = (item) => {
|
const { config } = this.props
|
let sourcelist = fromJS(this.state.sourcelist).toJS()
|
const _this = this
|
|
sourcelist = sourcelist.filter(cell => cell.uuid !== item.uuid)
|
|
confirm({
|
title: '确定删除数据源吗？',
|
content: '',
|
okText: _this.state.dict['mob.confirm'],
|
cancelText: _this.state.dict['mob.cancel'],
|
onOk() {
|
_this.setState({sourcelist})
|
_this.props.updateConfig({...config, sourcelist: fromJS(sourcelist).toJS()})
|
},
|
onCancel() {}
|
})
|
}
|
|
verifySubmit = () => {
|
const { config } = this.props
|
let sourcelist = fromJS(this.state.sourcelist).toJS()
|
|
this.setState({loading: true})
|
this.verifyRef.submitDataSource().then((res) => {
|
let isadd = true
|
sourcelist = sourcelist.map(item => {
|
if (item.uuid === res.uuid) {
|
isadd = false
|
return res
|
} else {
|
return item
|
}
|
})
|
|
if (isadd) {
|
sourcelist.push(res)
|
}
|
|
this.setState({loading: false, visible: false, sourcelist})
|
this.props.updateConfig({...config, sourcelist: fromJS(sourcelist).toJS()})
|
}, () => {
|
this.setState({loading: false})
|
})
|
}
|
|
render () {
|
const { config } = this.props
|
const { sourcelist, visible, source, dict, searches, loading } = this.state
|
|
let addable = true
|
if (config.components && config.components.length === 1 && config.components[0].type === 'login') {
|
addable = false
|
}
|
|
return (
|
<div className="mob-datasource">
|
{sourcelist.map(item => (
|
<span className="mob-input-group-wrapper" key={item.uuid}>
|
<span className="mob-input-wrapper">
|
<span className="mob-input-value">{item.setting.name}</span>
|
<span className="mob-input-group-addon">
|
<Icon type="setting" onClick={() => this.editDataSource(item)} />
|
<Icon type="close" onClick={() => this.closeDataSource(item)} />
|
</span>
|
</span>
|
</span>
|
))}
|
{addable ? <span className="mob-input-group-wrapper">
|
<span className="mob-input-wrapper">
|
<span className="mob-input-insert" onClick={() => this.editDataSource()}>
|
<Icon type="plus" />
|
</span>
|
</span>
|
</span> : null}
|
<Modal
|
wrapClassName="mob-datasource-verify-modal popview-modal"
|
title={'数据源配置'}
|
visible={visible}
|
width={'75vw'}
|
maskClosable={false}
|
style={{minWidth: '900px', maxWidth: '1200px'}}
|
okText={dict['mob.submit']}
|
cancelText={dict['mob.cancel']}
|
onOk={this.verifySubmit}
|
confirmLoading={loading}
|
onCancel={() => { this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
<VerifyCard
|
dict={dict}
|
card={source}
|
menuId={this.props.config.uuid}
|
searches={searches}
|
wrappedComponentRef={(inst) => this.verifyRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default DataSource
|
