import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { fromJS } from 'immutable'
|
import { Icon, Tooltip, Select, List, notification } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
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: (!localStorage.getItem('lang') || localStorage.getItem('lang') === 'zh-CN') ? zhCN : enUS,
|
tables: [], // 系统表
|
tableFields: [], // 已选表字段集
|
selectedTables: [], // 已选表
|
searchlist: null, // 搜索条件集
|
visible: false // 模态框控制
|
}
|
|
/**
|
* @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') + '.000'
|
param.secretkey = Utils.encrypt(param.LText, param.timestamp)
|
|
Api.getSystemConfig(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 => {
|
Api.getSystemConfig({func: 'sPC_Get_FieldName', TBName: item.TbName}).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
|
if (/^nvarchar/.test(_type)) {
|
_type = 'text'
|
} else if (/^int/.test(_type)) {
|
_type = 'number'
|
} else if (/^decimal/.test(_type)) {
|
_decimal = _type.split(',')[1]
|
_decimal = parseInt(_decimal)
|
if (_decimal > 4) {
|
_decimal = 4
|
}
|
_type = 'number'
|
} else if (/^decimal/.test(_type)) {
|
_decimal = _type.split(',')[1]
|
_decimal = parseInt(_decimal)
|
if (_decimal > 4) {
|
_decimal = 4
|
}
|
_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
|
}
|
})
|
}
|
_columns.push(tabmsg)
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
|
this.setState({
|
tableFields: _columns
|
})
|
|
this.props.updatetable(this.props.config, _columns)
|
})
|
}
|
|
queryField = (type) => {
|
const {selectedTables, tableFields, config} = this.state
|
// 判断是否已选择表名
|
if (selectedTables.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择表名！',
|
duration: 5
|
})
|
return
|
}
|
|
// 表字段集转为map数据
|
let columns = new Map()
|
tableFields.forEach(table => {
|
table.columns.forEach(column => {
|
columns.set(column.field, column)
|
})
|
})
|
|
if (type === 'search') {
|
// 添加搜索条件，字段集中存在搜索条件字段，使用搜索条件对象替换字段集，设置数据类型
|
config.search.forEach(item => {
|
if (columns.has(item.field)) {
|
let _datatype = columns.get(item.field).datatype
|
columns.set(item.field, {...item, selected: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'columns') {
|
// 添加显示列，字段集中存在显示列字段，使用显示列对象替换字段集，设置数据类型
|
config.columns.forEach(item => {
|
if (columns.has(item.field)) {
|
let _datatype = columns.get(item.field).datatype
|
columns.set(item.field, {...item, selected: true, datatype: _datatype})
|
}
|
})
|
}
|
|
// 显示字段集弹窗
|
this.setState({
|
addType: type,
|
tableVisible: true,
|
fields: [...columns.values()]
|
})
|
}
|
|
addFieldSubmit = () => {
|
// 字段集为空，关闭弹窗
|
if (!this.state.fields || this.state.fields.length === 0) {
|
this.setState({
|
tableVisible: false,
|
addType: ''
|
})
|
}
|
|
const {addType, config} = this.state
|
|
// 获取已选字段集合
|
let cards = this.refs.searchcard.state.selectCards
|
let columnsMap = new Map()
|
cards.forEach(card => {
|
columnsMap.set(card.field, card)
|
})
|
|
let items = []
|
if (addType === 'search') {
|
config.search.forEach(item => {
|
if (columnsMap.has(item.field)) {
|
let cell = columnsMap.get(item.field)
|
|
if (cell.selected && cell.type === item.type) { // 数据未修改
|
items.push(item)
|
} else if (cell.selected) { // 数据类型修改
|
if (cell.type === 'select') {
|
item.match = '='
|
} else if (cell.type === 'daterange') {
|
item.match = 'between'
|
} else {
|
cell.type = 'text'
|
item.match = 'like'
|
}
|
|
item.type = cell.type
|
item.initval = ''
|
items.push(item)
|
}
|
columnsMap.delete(item.field)
|
} else if (!item.origin) {
|
items.push(item)
|
}
|
})
|
|
let _columns = [...columnsMap.values()]
|
|
_columns.forEach(item => {
|
if (item.selected) {
|
let _match = ''
|
if (item.type === 'select') {
|
_match = '='
|
} else if (item.type === 'daterange') {
|
_match = 'between'
|
} else {
|
item.type = 'text'
|
_match = 'like'
|
}
|
|
let newcard = {
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
initval: '',
|
type: item.type,
|
resourceType: '0',
|
setAll: 'false',
|
options: [],
|
dataSource: '',
|
linkField: '',
|
valueField: '',
|
valueText: '',
|
orderBy: '',
|
orderType: 'asc',
|
match: _match,
|
display: 'dropdown'
|
}
|
|
items.push(newcard)
|
}
|
})
|
} else {
|
config.columns.forEach(item => {
|
if (columnsMap.has(item.field)) {
|
let cell = columnsMap.get(item.field)
|
|
if (cell.selected) {
|
items.push(item)
|
}
|
columnsMap.delete(item.field)
|
} else if (!item.origin) {
|
items.push(item)
|
}
|
})
|
|
let _columns = [...columnsMap.values()]
|
|
_columns.forEach(item => {
|
if (item.selected) {
|
let newcard = {
|
uuid: Utils.getuuid(),
|
Align: 'left',
|
label: item.label,
|
field: item.field,
|
Hide: 'false',
|
IsSort: item.type === 'picture' ? 'false' : 'true',
|
type: item.type,
|
Width: 120
|
}
|
|
items.push(newcard)
|
}
|
})
|
}
|
|
this.setState({
|
config: {...config, [addType]: items}
|
})
|
|
notification.success({
|
top: 92,
|
message: '操作成功',
|
duration: 2
|
})
|
}
|
|
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.name,
|
columns: res.FDName.map(item => {
|
let _type = item.FieldType.toLowerCase()
|
let _decimal = 0
|
if (/^nvarchar/.test(_type)) {
|
_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
|
}
|
})
|
}
|
this.setState({
|
tableFields: [...tableFields, tabmsg]
|
})
|
|
this.props.updatetable(_config, [...tableFields, tabmsg])
|
} else {
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
}
|
}
|
|
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
|
})
|
|
this.props.updatetable({...config, tables: _tables}, _fields)
|
}
|
|
changeSetting = () => {
|
this.setState({
|
settingVisible: true
|
})
|
}
|
|
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={dict['model.tooltip.table.guide']}>
|
<Icon type="question-circle" />
|
{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={() => document.getElementById(containerId)}
|
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 + ')'}
|
<Icon type="close" onClick={() => this.deleteTable(item)}/>
|
<div className="bottom-mask"></div>
|
</List.Item>}
|
/>}
|
</div>
|
)
|
}
|
}
|
|
export default TablesComponent
|
