import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Modal } from 'antd'
|
import { SettingOutlined } from '@ant-design/icons'
|
|
import VerifyCard from './verifycard'
|
import './index.scss'
|
|
class DataSource extends Component {
|
static propTpyes = {
|
config: PropTypes.any,
|
updateConfig: PropTypes.func
|
}
|
|
state = {
|
appType: sessionStorage.getItem('appType'),
|
sourcelist: [],
|
mainSearch: [],
|
visible: false,
|
loading: false,
|
setting: null
|
}
|
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
this.setState({setting: fromJS(config.setting).toJS()})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
editDataSource = () => {
|
const { config } = this.props
|
const { appType } = this.state
|
|
if (config.type === 'interface') { // 公共数据源不使用搜索
|
this.setState({visible: true})
|
return
|
}
|
|
let search = []
|
let menu = fromJS(window.GLOB.customMenu).toJS()
|
|
if (appType === 'mob') {
|
let ms = null
|
menu.components.forEach(item => {
|
if (item.type === 'topbar' && item.wrap.type !== 'navbar' && item.search) {
|
ms = item.search
|
} else if (item.type === 'search' && item.wrap.field) {
|
search.push({
|
type: 'text',
|
label: item.wrap.label,
|
field: item.wrap.field,
|
match: item.wrap.match,
|
required: item.wrap.required,
|
value: item.wrap.initval || ''
|
})
|
}
|
})
|
|
if (ms) {
|
if (ms.setting.type === 'search') {
|
search.push({
|
type: 'text',
|
label: '搜索栏',
|
field: ms.setting.field,
|
match: ms.setting.match,
|
required: ms.setting.required,
|
value: ms.setting.initval || ''
|
})
|
}
|
ms.fields.forEach(item => {
|
if (item.type === 'range') {
|
item.initval = `${item.minValue},${item.maxValue}`
|
}
|
search.push(item)
|
})
|
|
ms.groups.forEach(group => {
|
if (group.setting.type === 'search') {
|
search.push({
|
type: 'text',
|
label: group.wrap.name,
|
field: group.setting.field,
|
match: group.setting.match,
|
required: group.setting.required,
|
value: group.setting.initval || ''
|
})
|
}
|
|
group.fields.forEach(item => {
|
if (item.type === 'range') {
|
item.initval = `${item.minValue},${item.maxValue}`
|
}
|
search.push(item)
|
})
|
})
|
}
|
} else {
|
let _search = null
|
let filterComponent = (box) => {
|
box.components.forEach(item => {
|
if (_search) return
|
|
if (item.type === 'search') {
|
box.slist = [...box.slist, item.search]
|
} else if (item.uuid === config.uuid) {
|
_search = box.slist.pop()
|
} else if (item.type === 'group') {
|
item.components.forEach(m => {
|
if (m.uuid !== config.uuid) return
|
_search = box.slist.pop()
|
})
|
} else if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
tab.slist = [...box.slist]
|
filterComponent(tab)
|
})
|
}
|
})
|
}
|
menu.slist = []
|
filterComponent(menu)
|
|
if (_search) {
|
search = _search
|
} else {
|
menu.components.forEach(item => {
|
if (item.type !== 'search') return
|
search = item.search
|
})
|
}
|
}
|
|
this.setState({
|
visible: true,
|
mainSearch: search
|
})
|
}
|
|
verifySubmit = () => {
|
const { config } = this.props
|
|
this.setState({loading: true})
|
this.verifyRef.submitDataSource().then(res => {
|
|
if (res.columns) {
|
res.columns = res.columns.map(item => {
|
|
if (/int/ig.test(item.datatype)) {
|
item.type = 'number'
|
item.decimal = 0
|
} else if (/Decimal/ig.test(item.datatype)) {
|
item.type = 'number'
|
item.decimal = +item.datatype.replace(/^Decimal\(18,/ig, '').replace(/\)/ig, '')
|
} else {
|
item.type = 'text'
|
item.fieldlength = +item.datatype.replace(/^Nvarchar\(/ig, '').replace(/\)/ig, '')
|
}
|
return item
|
})
|
}
|
|
let maxScript = 0
|
|
if (window.GLOB.funcs && window.GLOB.funcs.length > 0) {
|
window.GLOB.funcs.forEach(m => {
|
let reg = new RegExp('\\$ex@' + m.func_code + '@ex\\$', 'ig')
|
if (res.setting.dataresource) {
|
res.setting.dataresource = res.setting.dataresource.replace(reg, `/*$ex@${m.func_code}-begin*/\n${m.key_sql}\n/*@ex$-end*/`)
|
}
|
res.scripts.forEach(item => {
|
item.sql = item.sql.replace(reg, `/*$ex@${m.func_code}-begin*/\n${m.key_sql}\n/*@ex$-end*/`)
|
|
if (item.status === 'false') return
|
|
if (/exec\s/ig.test(item.sql)) {
|
maxScript = 1000
|
} else if (item.sql.length > maxScript) {
|
maxScript = item.sql.length
|
}
|
})
|
})
|
} else {
|
res.scripts.forEach(item => {
|
if (item.status === 'false') return
|
|
if (/exec\s/ig.test(item.sql)) {
|
maxScript = 1000
|
} else if (item.sql.length > maxScript) {
|
maxScript = item.sql.length
|
}
|
})
|
}
|
|
res.setting.maxScript = maxScript
|
|
if (config.subtype !== 'dualdatacard') {
|
delete res.subColumns
|
}
|
|
this.setState({loading: false, visible: false})
|
this.props.updateConfig({...config, ...res})
|
}, () => {
|
this.setState({loading: false})
|
})
|
}
|
|
render () {
|
const { config } = this.props
|
const { visible, loading, mainSearch } = this.state
|
|
return (
|
<div className="model-datasource">
|
<SettingOutlined title="数据源" onClick={() => this.editDataSource()} />
|
<Modal
|
wrapClassName="mk-pop-modal"
|
title=""
|
visible={visible}
|
width={'75vw'}
|
maskClosable={false}
|
okText="提交"
|
onOk={this.verifySubmit}
|
confirmLoading={loading}
|
onCancel={() => {this.setState({ visible: false }) }}
|
destroyOnClose
|
>
|
<VerifyCard
|
mainSearch={mainSearch}
|
config={config}
|
wrappedComponentRef={(inst) => this.verifyRef = inst}
|
/>
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default DataSource
|
