import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Tooltip, Select, List, notification } from 'antd'
|
import { QuestionCircleOutlined, CloseOutlined } from '@ant-design/icons'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import MKEmitter from '@/utils/events.js'
|
import { queryTableSql } from '@/utils/option.js'
|
|
import './index.scss'
|
|
const { Option } = Select
|
|
class TablesComponent extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 容器Id
|
containerId: PropTypes.string, // 容器Id
|
updatetable: PropTypes.func
|
}
|
|
state = {
|
tables: [], // 系统表
|
selectedTables: [], // 已选表
|
}
|
|
/**
|
* @description 搜索条件初始化
|
*/
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
let tables = config.tables ? fromJS(config.tables).toJS() : []
|
|
window.GLOB.publicTables = tables
|
|
this.setState({
|
selectedTables: tables
|
})
|
}
|
|
componentDidMount () {
|
MKEmitter.addListener('publicTableChange', this.publicTableChange)
|
this.gettables()
|
}
|
|
publicTableChange = (table, type) => {
|
if (type === 'plus') {
|
this.onTableChange(table)
|
} else if (type === 'del') {
|
this.deleteTable(table)
|
}
|
}
|
|
/**
|
* @description 获取系统表
|
*/
|
gettables = () => {
|
let param = {
|
func: 'sPC_Get_SelectedList',
|
LText: queryTableSql,
|
obj_name: 'data',
|
arr_field: 'TbName,Remark'
|
}
|
|
param.LText = Utils.formatOptions(param.LText)
|
param.timestamp = moment().format('YYYY-MM-DD HH:mm:ss')
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
param.open_key = Utils.encryptOpenKey(param.secretkey, param.timestamp) // 云端数据验证
|
|
if (window.GLOB.cloudServiceApi) { // 且存在云端地址
|
param.rduri = window.GLOB.cloudServiceApi
|
param.userid = sessionStorage.getItem('CloudUserID') || ''
|
param.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
|
}
|
|
Api.getSystemCacheConfig(param).then(res => {
|
if (res.status) {
|
let tbNames = res.data.map(item => item.TbName).join(',')
|
sessionStorage.setItem('mk_tb_names', ',' + tbNames.toLowerCase() + ',')
|
this.setState({
|
tables: res.data
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
/**
|
* @description 添加表名
|
*/
|
onTableChange = (value) => {
|
const { config } = this.props
|
const { tables, selectedTables } = this.state
|
|
let _table = tables.filter(item => item.TbName === value)[0]
|
|
if (selectedTables.findIndex(cell => cell.TbName === value) > -1) return
|
|
let _tables = [...selectedTables, _table]
|
|
window.GLOB.publicTables = _tables
|
|
this.setState({
|
selectedTables: _tables
|
})
|
|
let _config = {...config, tables: _tables}
|
|
this.props.updatetable(_config)
|
}
|
|
/**
|
* @description 删除表名
|
*/
|
deleteTable = (table) => {
|
const { config } = this.props
|
const { selectedTables } = this.state
|
|
let _tables = selectedTables.filter(item => item.TbName !== table.TbName)
|
|
window.GLOB.publicTables = _tables
|
|
this.setState({
|
selectedTables: _tables,
|
})
|
|
this.props.updatetable({...config, tables: _tables})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
MKEmitter.removeListener('publicTableChange', this.publicTableChange)
|
}
|
|
render() {
|
const { containerId } = this.props
|
const { tables, selectedTables } = this.state
|
|
return (
|
<div className="model-tablename-manage-view">
|
{/* 表名添加 */}
|
<div className="ant-col ant-form-item-label">
|
<label>
|
<Tooltip placement="topLeft" title="此处可以添加页面配置相关的常用表。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
表名
|
</Tooltip>
|
</label>
|
</div>
|
<Select
|
showSearch
|
className="tables"
|
style={{ width: '100%' }}
|
optionFilterProp="children"
|
value="请选择表名"
|
onSelect={this.onTableChange}
|
dropdownClassName="mk-tables"
|
dropdownMatchSelectWidth={false}
|
showArrow={false}
|
getPopupContainer={() => containerId ? document.getElementById(containerId) : document.body}
|
filterOption={(input, option) => {
|
return option.props.children[0].toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
|
option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0
|
}}
|
>
|
{tables.map((table, index) => (
|
<Option key={index} title={table.TbName} value={table.TbName}>{table.Remark}<br/>{table.TbName}</Option>
|
))}
|
</Select>
|
{selectedTables.length > 0 && <List
|
size="small"
|
bordered
|
dataSource={selectedTables}
|
renderItem={(item, index) => <List.Item key={index} title={item.Remark + ' (' + item.TbName + ')'}>
|
{item.Remark + ' (' + item.TbName + ')'}
|
<CloseOutlined onClick={() => this.deleteTable(item)}/>
|
</List.Item>}
|
/>}
|
</div>
|
)
|
}
|
}
|
|
export default TablesComponent
|
