import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Button, Modal, Empty, notification } from 'antd'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import EditCard from './editcard'
|
|
import MKEmitter from '@/utils/events.js'
|
import './index.scss'
|
|
class FieldsComponent extends Component {
|
static propTpyes = {
|
type: PropTypes.string,
|
config: PropTypes.object,
|
updatefield: PropTypes.func
|
}
|
|
state = {
|
appType: sessionStorage.getItem('appType'),
|
fields: [], // 字段集
|
visible: false, // 模态框控制
|
selectCards: []
|
}
|
|
checkField = () => {
|
if (!window.GLOB.publicTables || window.GLOB.publicTables.length === 0) {
|
notification.warning({
|
top: 92,
|
message: '请选择表名！',
|
duration: 5
|
})
|
return
|
}
|
|
window.GLOB.tableFields = window.GLOB.tableFields || []
|
|
let index = 0
|
|
let deffers = window.GLOB.publicTables.map(item => {
|
let tb = window.GLOB.tableFields.filter(tab => tab.tableName === item.TbName)[0]
|
|
if (tb) {
|
return Promise.resolve(fromJS(tb).toJS())
|
}
|
|
return new Promise(resolve => {
|
setTimeout(() => {
|
Api.getCloudConfig({func: 'sPC_Get_FieldName', TBName: item.TbName}).then(res => {
|
let tabmsg = {
|
status: res.status,
|
message: res.message,
|
tableName: item.TbName,
|
columns: []
|
}
|
|
if (res.FDName && res.FDName.length > 0) {
|
tabmsg.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 = 4000
|
}
|
_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()
|
}
|
})
|
}
|
|
resolve(tabmsg)
|
})
|
}, index * 50)
|
|
index++
|
})
|
})
|
Promise.all(deffers).then(response => {
|
let error = false
|
let _columns = response
|
|
response.forEach(item => {
|
if (!item.status) {
|
error = item.message || '字段查询失败！'
|
}
|
})
|
|
if (error) {
|
notification.warning({
|
top: 92,
|
message: error,
|
duration: 5
|
})
|
} else {
|
window.GLOB.tableFields = _columns
|
this.queryField(_columns)
|
}
|
})
|
}
|
|
queryField = (tableFields) => {
|
const { type, config } = this.props
|
|
// 表字段集转为map数据
|
let columns = new Map()
|
tableFields.forEach(table => {
|
table.columns.forEach(column => {
|
columns.set(column.field.toLowerCase(), column)
|
})
|
})
|
|
if (type === 'search') {
|
// 添加搜索条件，字段集中存在搜索条件字段，使用搜索条件对象替换字段集，设置数据类型
|
config.search.forEach(item => {
|
if (item.field && columns.has(item.field.toLowerCase())) {
|
let _datatype = columns.get(item.field.toLowerCase()).datatype
|
columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'columns') {
|
// 添加显示列，字段集中存在显示列字段，使用显示列对象替换字段集，设置数据类型
|
config.columns.forEach(item => {
|
if (item.field && columns.has(item.field.toLowerCase())) {
|
let _datatype = columns.get(item.field.toLowerCase()).datatype
|
columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'fields') {
|
config.columns.forEach(item => {
|
if (columns.has(item.field.toLowerCase())) {
|
let _datatype = columns.get(item.field.toLowerCase()).datatype
|
columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
|
}
|
})
|
} else if (type === 'form') {
|
config.fields.forEach(item => {
|
if (item.field && columns.has(item.field.toLowerCase())) {
|
let _datatype = columns.get(item.field.toLowerCase()).datatype
|
columns.set(item.field.toLowerCase(), {...item, origin: true, datatype: _datatype})
|
}
|
})
|
}
|
|
// 显示字段集弹窗
|
this.setState({
|
visible: true,
|
selectCards: [],
|
fields: [...columns.values()]
|
})
|
}
|
|
addFieldSubmit = () => {
|
const { type } = this.props
|
const { selectCards, fields } = this.state
|
// 字段集为空，关闭弹窗
|
if (!fields || fields.length === 0) {
|
this.setState({ visible: false })
|
}
|
|
let config = fromJS(this.props.config).toJS()
|
|
// 获取已选字段集合
|
let cards = selectCards
|
let columnsMap = new Map()
|
cards.forEach(card => {
|
columnsMap.set(card.field.toLowerCase(), card)
|
})
|
|
let items = []
|
let keys = []
|
if (type === 'search') {
|
selectCards.forEach(item => {
|
let _match = ''
|
let initval = ''
|
let _type = item.type
|
if (item.type === 'date') {
|
_type = 'daterange'
|
} else if (item.type === 'select') {
|
_match = '='
|
} else {
|
_type = 'text'
|
_match = 'like'
|
}
|
|
let newcard = {
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
initval: initval,
|
type: _type,
|
resourceType: '0',
|
options: [],
|
orderType: 'asc',
|
match: _match,
|
}
|
|
items.push(newcard)
|
keys.push(item.field.toLowerCase())
|
})
|
MKEmitter.emit('plusSearch', config.uuid, items, 'multil')
|
} else if (type === 'columns') {
|
selectCards.forEach(item => {
|
let newcard = {
|
uuid: Utils.getuuid(),
|
Align: 'left',
|
label: item.label,
|
field: item.field,
|
Hide: 'false',
|
IsSort: 'true',
|
type: item.type,
|
Width: item.type === 'number' ? 80 : 120
|
}
|
|
if (item.type === 'number') {
|
newcard.decimal = item.decimal
|
} else {
|
newcard.fieldlength = item.length || 50
|
}
|
|
items.push(newcard)
|
keys.push(item.field.toLowerCase())
|
})
|
MKEmitter.emit('plusColumns', config.uuid, items)
|
} else if (type === 'fields') {
|
items = [...config.columns]
|
|
selectCards.forEach(item => {
|
let _t = item.$datatype || (item.type === 'number' ? 'Decimal(18,0)' : 'Nvarchar(50)')
|
let newcard = {
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
datatype: _t
|
}
|
items.unshift(newcard)
|
keys.push(item.field.toLowerCase())
|
})
|
|
this.props.updatefield(items)
|
} else if (type === 'form') {
|
let firstItem = config.fields[0]
|
let span = this.state.appType === 'mob' ? 24 : 12
|
let labelwidth = 33.3
|
if (firstItem && firstItem.span) {
|
span = firstItem.span
|
labelwidth = firstItem.labelwidth || 33.3
|
}
|
selectCards.forEach(item => { // 循环添加新增字段
|
let newcard = {
|
uuid: Utils.getuuid(),
|
label: item.label,
|
field: item.field,
|
initval: item.type === 'number' ? 0 : '',
|
type: item.type,
|
resourceType: '0',
|
span: span,
|
labelwidth: labelwidth,
|
options: [],
|
dataSource: '',
|
decimal: item.decimal,
|
orderType: 'asc',
|
readonly: 'false',
|
required: 'true'
|
}
|
|
if (/^icon|images?$/ig.test(item.field)) {
|
newcard.type = 'fileupload'
|
newcard.fileType = 'picture-card'
|
newcard.fieldlength = item.length || 512
|
newcard.maxSize = 1
|
newcard.maxfile = 1
|
} else if (item.type === 'text' && item.length >= 256) {
|
newcard.type = 'textarea'
|
newcard.required = 'false'
|
newcard.fieldlength = item.length
|
if (firstItem) {
|
if (firstItem.type === newcard.type) {
|
newcard.span = firstItem.span
|
newcard.labelwidth = firstItem.labelwidth
|
} else {
|
newcard.span = 24
|
if (firstItem.span === 12) {
|
newcard.labelwidth = 16.2
|
} else if (firstItem.span === 8) {
|
newcard.labelwidth = 10.5
|
} else if (firstItem.span === 6) {
|
newcard.labelwidth = 7.7
|
}
|
}
|
} else {
|
newcard.span = 24
|
newcard.labelwidth = 16.2
|
}
|
}
|
|
items.push(newcard)
|
keys.push(item.field.toLowerCase())
|
})
|
|
this.props.plusFields(items)
|
}
|
|
this.setState({
|
selectCards: [],
|
fields: fromJS(fields).toJS().map(cell => {
|
if (keys.includes(cell.field.toLowerCase())) {
|
cell.origin = true
|
}
|
return cell
|
})
|
})
|
|
notification.success({
|
top: 92,
|
message: '操作成功',
|
duration: 2
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
/**
|
* @description 组件销毁，清除state更新
|
*/
|
componentWillUnmount () {
|
this.setState = () => {
|
return
|
}
|
}
|
|
onChange = (selectCards) => {
|
this.setState({selectCards})
|
}
|
|
render() {
|
const { type } = this.props
|
const { fields } = this.state
|
|
let label = '批量添加'
|
if (type === 'search') {
|
label = '添加搜索'
|
} else if (type === 'columns') {
|
label = '添加显示列'
|
}
|
|
return (
|
<div className="quickly-add">
|
<Button type="primary" block onClick={this.checkField}>{label}</Button>
|
{/* 根据字段名添加显示列及搜索条件 */}
|
<Modal
|
wrapClassName="model-table-fieldmanage-modal"
|
title="编辑"
|
visible={this.state.visible}
|
width={'65vw'}
|
maskClosable={false}
|
cancelText="关闭"
|
onOk={this.addFieldSubmit}
|
onCancel={() => this.setState({ visible: false })}
|
destroyOnClose
|
>
|
{fields.length > 0 ? <EditCard data={fields} onChange={this.onChange} type={type} /> : <Empty />}
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default FieldsComponent
|
