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 options from '@/store/options.js'
|
import Utils from '@/utils/utils.js'
|
import zhCN from '@/locales/zh-CN/model.js'
|
import enUS from '@/locales/en-US/model.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 = {
|
dict: sessionStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
tables: [], // 系统表
|
tableFields: [], // 已选表字段集
|
selectedTables: [], // 已选表
|
}
|
|
/**
|
* @description 搜索条件初始化
|
*/
|
UNSAFE_componentWillMount () {
|
const { config } = this.props
|
|
this.setState({
|
selectedTables: config.tables ? fromJS(config.tables).toJS() : []
|
}, () => {
|
this.gettableFields()
|
})
|
}
|
|
componentDidMount () {
|
this.gettables()
|
}
|
|
/**
|
* @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 (options.cloudServiceApi) { // 且存在云端地址
|
param.rduri = options.cloudServiceApi
|
param.userid = sessionStorage.getItem('CloudUserID') || ''
|
param.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
|
}
|
|
Api.getSystemCacheConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
tables: res.data
|
})
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
|
gettableFields = () => {
|
let deffers = this.state.selectedTables.map(item => {
|
return new Promise(resolve => {
|
let param = {func: 'sPC_Get_FieldName', TBName: item.TbName}
|
if (options.cloudServiceApi) { // 且存在云端地址
|
param.rduri = options.cloudServiceApi
|
param.userid = sessionStorage.getItem('CloudUserID') || ''
|
param.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
|
}
|
|
Api.getSystemCacheConfig(param).then(res => {
|
res.TBName = item.TbName
|
resolve(res)
|
})
|
})
|
})
|
Promise.all(deffers).then(response => {
|
let _columns = []
|
response.forEach(res => {
|
if (res.status) {
|
let tabmsg = {
|
tableName: res.TBName,
|
columns: res.FDName.map(item => {
|
let _type = item.FieldType.toLowerCase()
|
let _decimal = 0
|
let _length = 50
|
if (/^nvarchar/.test(_type)) {
|
try { // 存在max
|
_length = +_type.match(/\d+/)[0] || 50
|
} catch (e) {
|
_length = 2048
|
}
|
_type = 'text'
|
} else if (/^int/.test(_type)) {
|
_type = 'number'
|
} else if (/^decimal/.test(_type)) {
|
_decimal = _type.split(',')[1]
|
_decimal = parseInt(_decimal)
|
_type = 'number'
|
} else if (/^datetime/.test(_type)) {
|
_type = 'datetime'
|
} else if (/^date/.test(_type)) {
|
_type = 'date'
|
} else {
|
_type = 'text'
|
}
|
|
return {
|
field: item.FieldName || '',
|
label: item.FieldDec,
|
type: _type,
|
datatype: _type,
|
decimal: _decimal,
|
length: _length,
|
$datatype: item.FieldType.toLowerCase()
|
}
|
})
|
}
|
_columns.push(tabmsg)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
|
this.setState({
|
tableFields: _columns
|
})
|
window.GLOB.tableFields = _columns
|
})
|
}
|
|
/**
|
* @description 添加表名
|
*/
|
onTableChange = (value) => {
|
const { config } = this.props
|
const { tables, tableFields, selectedTables } = this.state
|
|
let _table = tables.filter(item => item.TbName === value)[0]
|
let isSelected = !!selectedTables.filter(cell => cell.TbName === value)[0]
|
if (!isSelected) {
|
this.setState({
|
selectedTables: [...selectedTables, _table]
|
})
|
|
let _config = {...config, tables: [...selectedTables, _table]}
|
|
Api.getSystemConfig({func: 'sPC_Get_FieldName', TBName: value}).then(res => {
|
if (res.status) {
|
let tabmsg = {
|
tableName: _table.TbName,
|
columns: res.FDName.map(item => {
|
let _type = item.FieldType.toLowerCase()
|
let _decimal = 0
|
let _length = 50
|
|
if (/^nvarchar/.test(_type)) {
|
try { // 存在max
|
_length = +_type.match(/\d+/)[0] || 50
|
} catch (e) {
|
_length = 2048
|
}
|
_type = 'text'
|
} else if (/^int/.test(_type)) {
|
_type = 'number'
|
} else if (/^decimal/.test(_type)) {
|
_decimal = _type.split(',')[1]
|
_decimal = parseInt(_decimal)
|
_type = 'number'
|
} else if (/^datetime/.test(_type)) {
|
_type = 'datetime'
|
} else if (/^date/.test(_type)) {
|
_type = 'date'
|
} else {
|
_type = 'text'
|
}
|
|
return {
|
field: item.FieldName,
|
label: item.FieldDec,
|
type: _type,
|
datatype: _type,
|
decimal: _decimal,
|
length: _length,
|
$datatype: item.FieldType.toLowerCase()
|
}
|
})
|
}
|
|
let _columns = [...tableFields, tabmsg]
|
|
this.setState({
|
tableFields: _columns
|
})
|
|
window.GLOB.tableFields = _columns
|
|
this.props.updatetable(_config)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
}
|
|
/**
|
* @description 删除表名
|
*/
|
deleteTable = (table) => {
|
const { config } = this.props
|
const { selectedTables, tableFields } = this.state
|
|
let _tables = selectedTables.filter(item => item.TbName !== table.TbName)
|
let _fields = tableFields.filter(item => item.tableName !== table.TbName)
|
|
this.setState({
|
selectedTables: _tables,
|
tableFields: _fields
|
})
|
|
window.GLOB.tableFields = _fields
|
|
this.props.updatetable({...config, tables: _tables})
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
render() {
|
const { containerId } = this.props
|
const { dict, tables, selectedTables } = this.state
|
|
return (
|
<div className="model-table-tablemanage-view">
|
{/* 表名添加 */}
|
<div className="ant-col ant-form-item-label">
|
<label>
|
<Tooltip placement="topLeft" title="此处可以添加页面配置相关的常用表，可通过工具栏中的添加按钮，可批量添加表格相关字段。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
{dict['header.menu.table.add']}
|
</Tooltip>
|
</label>
|
</div>
|
<Select
|
showSearch
|
className="tables"
|
style={{ width: '100%' }}
|
optionFilterProp="children"
|
value={dict['header.menu.table.placeholder']}
|
onChange={this.onTableChange}
|
showArrow={false}
|
getPopupContainer={() => containerId ? document.getElementById(containerId) : document.body}
|
filterOption={(input, option) => {
|
return option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 ||
|
option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
}}
|
>
|
{tables.map((table, index) => (
|
<Option key={index} title={table.TbName} value={table.TbName}>{table.Remark}</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)}/>
|
<div className="bottom-mask"></div>
|
</List.Item>}
|
/>}
|
</div>
|
)
|
}
|
}
|
|
export default TablesComponent
|
