import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { Modal, Button, notification } from 'antd'
|
import moment from 'moment'
|
|
import Api from '@/api'
|
import Utils from '@/utils/utils.js'
|
import SettingForm from './settingform'
|
import { queryTableSql } from '@/utils/option.js'
|
import './index.scss'
|
|
class ReplaceField extends Component {
|
static propTpyes = {
|
type: PropTypes.string,
|
config: PropTypes.object,
|
updateConfig: PropTypes.func
|
}
|
|
state = {
|
visible: false,
|
loadingTable: false,
|
confirming: false,
|
tables: [],
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
trigger = () => {
|
const { tables } = this.state
|
|
if (tables.length === 0) {
|
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') || ''
|
}
|
|
this.setState({
|
loadingTable: true
|
})
|
|
Api.getSystemCacheConfig(param).then(res => {
|
if (res.status) {
|
this.setState({
|
visible: true,
|
confirming: false,
|
tables: res.data,
|
loadingTable: false
|
})
|
} else {
|
this.setState({
|
confirming: false,
|
loadingTable: false
|
})
|
notification.warning({
|
top: 92,
|
message: res.message,
|
duration: 5
|
})
|
}
|
})
|
} else {
|
this.setState({
|
confirming: false,
|
visible: true
|
})
|
}
|
}
|
|
submit = () => {
|
this.settingRef.handleConfirm().then(res => {
|
this.setState({confirming: true})
|
|
if (res.resource === 'custom') {
|
if (res.reType === 'name') {
|
let map = {[res.label.toLowerCase()]: {
|
FieldDec: res.label,
|
FieldName: res.field,
|
datatype: ''
|
}}
|
|
this.exec(map)
|
} else {
|
let map = {[res.field.toLowerCase()]: {
|
FieldDec: res.label,
|
FieldName: res.field,
|
datatype: ''
|
}}
|
|
this.execLabel(map)
|
}
|
} else {
|
let param = {func: 'sPC_Get_FieldName', TBName: res.table}
|
if (window.GLOB.cloudServiceApi) { // 且存在云端地址
|
param.rduri = window.GLOB.cloudServiceApi
|
param.userid = sessionStorage.getItem('CloudUserID') || ''
|
param.LoginUID = sessionStorage.getItem('CloudLoginUID') || ''
|
}
|
|
Api.getSystemCacheConfig(param).then(result => {
|
if (!result.status) {
|
this.setState({
|
confirming: false
|
})
|
notification.warning({
|
top: 92,
|
message: result.message,
|
duration: 5
|
})
|
return
|
}
|
|
if (res.reType === 'name') {
|
let map = {}
|
|
result.FDName.forEach(item => {
|
if (!item.FieldDec) return
|
if (/NVARCHAR|INT|Decimal/ig.test(item.FieldType)) {
|
item.datatype = item.FieldType
|
}
|
map[item.FieldDec.toLowerCase()] = item
|
})
|
|
this.exec(map)
|
} else {
|
let map = {}
|
|
result.FDName.forEach(item => {
|
if (!item.FieldName) return
|
map[item.FieldName.toLowerCase()] = item
|
})
|
|
this.execLabel(map)
|
}
|
})
|
}
|
})
|
}
|
|
// 依据原字段替换为新字段
|
exec = (map) => {
|
const { type } = this.props
|
let config = fromJS(this.props.config).toJS()
|
|
if (type === 'custom') {
|
let _replace = (components) => {
|
return components.map(item => {
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
tab.components = _replace(tab.components)
|
})
|
return item
|
} else if (item.type === 'group') {
|
item.components = _replace(item.components)
|
return item
|
}
|
|
if (item.columns) {
|
item.columns = item.columns.map(col => {
|
let cell = map[col.field.toLowerCase()]
|
if (cell) {
|
col.field = cell.FieldName
|
if (cell.datatype) {
|
col.datatype = cell.datatype
|
}
|
}
|
return col
|
})
|
}
|
if (item.search) {
|
item.search = item.search.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
|
if (item.action) {
|
item.action.forEach(m => {
|
if (m.modal && m.modal.fields) {
|
m.modal.fields = m.modal.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.verify && m.verify.columns) {
|
m.verify.columns = m.verify.columns.map(col => {
|
if (col.Column && map[col.Column.toLowerCase()]) {
|
col.Column = map[col.Column.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.config && m.config.components) {
|
m.config.components = _replace(m.config.components)
|
}
|
})
|
}
|
|
if (item.subcards) {
|
item.subcards.forEach(card => {
|
if (card.elements) { // 卡片
|
card.elements = card.elements.map(m => {
|
if (m.datatype === 'dynamic' && map[m.field.toLowerCase()]) {
|
m.field = map[m.field.toLowerCase()].FieldName
|
}
|
if (m.modal && m.modal.fields) {
|
m.modal.fields = m.modal.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.verify && m.verify.columns) {
|
m.verify.columns = m.verify.columns.map(col => {
|
if (col.Column && map[col.Column.toLowerCase()]) {
|
col.Column = map[col.Column.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.config && m.config.components) {
|
m.config.components = _replace(m.config.components)
|
}
|
return m
|
})
|
}
|
|
if (card.backElements) { // 卡片
|
card.backElements = card.backElements.map(m => {
|
if (m.datatype === 'dynamic' && map[m.field.toLowerCase()]) {
|
m.field = map[m.field.toLowerCase()].FieldName
|
}
|
if (m.modal && m.modal.fields) {
|
m.modal.fields = m.modal.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.verify && m.verify.columns) {
|
m.verify.columns = m.verify.columns.map(col => {
|
if (col.Column && map[col.Column.toLowerCase()]) {
|
col.Column = map[col.Column.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.config && m.config.components) {
|
m.config.components = _replace(m.config.components)
|
}
|
return m
|
})
|
}
|
|
if (card.fields) { // 表单
|
card.fields = card.fields.map(m => {
|
if (m.field && map[m.field.toLowerCase()]) {
|
m.field = map[m.field.toLowerCase()].FieldName
|
}
|
return m
|
})
|
}
|
})
|
}
|
|
if (item.elements) {
|
item.elements = item.elements.map(m => {
|
if (m.datatype === 'dynamic' && map[m.field.toLowerCase()]) {
|
m.field = map[m.field.toLowerCase()].FieldName
|
}
|
if (m.modal && m.modal.fields) {
|
m.modal.fields = m.modal.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.verify && m.verify.columns) {
|
m.verify.columns = m.verify.columns.map(col => {
|
if (col.Column && map[col.Column.toLowerCase()]) {
|
col.Column = map[col.Column.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.config && m.config.components) {
|
m.config.components = _replace(m.config.components)
|
}
|
return m
|
})
|
}
|
|
if (item.plot) {
|
if (item.plot.Xaxis && map[item.plot.Xaxis.toLowerCase()]) {
|
item.plot.Xaxis = map[item.plot.Xaxis.toLowerCase()].FieldName
|
}
|
// 统计图
|
if (item.plot.InfoValue && map[item.plot.InfoValue.toLowerCase()]) {
|
item.plot.InfoValue = map[item.plot.InfoValue.toLowerCase()].FieldName
|
}
|
if (item.plot.InfoType && map[item.plot.InfoType.toLowerCase()]) {
|
item.plot.InfoType = map[item.plot.InfoType.toLowerCase()].FieldName
|
}
|
// 占比图
|
if (item.plot.valueField && map[item.plot.valueField.toLowerCase()]) {
|
item.plot.valueField = map[item.plot.valueField.toLowerCase()].FieldName
|
}
|
if (item.plot.labelField && map[item.plot.labelField.toLowerCase()]) {
|
item.plot.labelField = map[item.plot.labelField.toLowerCase()].FieldName
|
}
|
// 饼图
|
if (item.plot.type && map[item.plot.type.toLowerCase()]) {
|
item.plot.type = map[item.plot.type.toLowerCase()].FieldName
|
}
|
// 散点图
|
if (item.plot.gender && map[item.plot.gender.toLowerCase()]) {
|
item.plot.gender = map[item.plot.gender.toLowerCase()].FieldName
|
}
|
if (item.Yaxis) {
|
if (Array.isArray(item.Yaxis)) {
|
item.Yaxis = item.Yaxis.map(m => {
|
if (map[m.toLowerCase()]) {
|
return map[m.toLowerCase()].FieldName
|
}
|
return m
|
})
|
} else {
|
if (item.Yaxis && map[item.Yaxis.toLowerCase()]) {
|
item.Yaxis = map[item.Yaxis.toLowerCase()].FieldName
|
}
|
}
|
}
|
}
|
|
if (item.cols) {
|
let _update = (cols) => {
|
return cols.map(col => {
|
if (col.type === 'custom' && col.elements) {
|
col.elements = col.elements.map(m => {
|
if (m.eleType === 'button') {
|
if (m.modal && m.modal.fields) {
|
m.modal.fields = m.modal.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.verify && m.verify.columns) {
|
m.verify.columns = m.verify.columns.map(col => {
|
if (col.Column && map[col.Column.toLowerCase()]) {
|
col.Column = map[col.Column.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
if (m.config && m.config.components) {
|
m.config.components = _replace(m.config.components)
|
}
|
} else {
|
if (m.datatype === 'dynamic' && map[m.field.toLowerCase()]) {
|
m.field = map[m.field.toLowerCase()].FieldName
|
}
|
}
|
|
return m
|
})
|
} else if (col.type === 'colspan') {
|
col.subcols = _update(col.subcols)
|
} else if (col.field) {
|
if (map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
}
|
|
return col
|
})
|
}
|
|
item.cols = _update(item.cols)
|
}
|
|
if (item.subtype === 'basetable') {
|
item.cols = item.cols.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
|
return item
|
})
|
}
|
|
config.components = _replace(config.components)
|
// } else if (type === 'table') {
|
// config.columns = config.columns.map(col => {
|
// if (col.field && map[col.field.toLowerCase()]) {
|
// col.field = map[col.field.toLowerCase()].FieldName
|
// }
|
// return col
|
// })
|
|
// config.search = config.search.map(col => {
|
// if (col.field && map[col.field.toLowerCase()]) {
|
// col.field = map[col.field.toLowerCase()].FieldName
|
// }
|
// if (col.datefield && map[col.datefield.toLowerCase()]) {
|
// col.datefield = map[col.datefield.toLowerCase()].FieldName
|
// }
|
// return col
|
// })
|
|
// config.action = config.action.map(m => {
|
// if (m.verify && m.verify.columns) {
|
// m.verify.columns = m.verify.columns.map(col => {
|
// if (col.Column && map[col.Column.toLowerCase()]) {
|
// col.Column = map[col.Column.toLowerCase()].FieldName
|
// }
|
// return col
|
// })
|
// }
|
// return m
|
// })
|
} else if (type === 'form') {
|
config.fields = config.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.field = map[col.field.toLowerCase()].FieldName
|
}
|
return col
|
})
|
}
|
|
this.setState({
|
confirming: false,
|
visible: false
|
})
|
|
notification.success({
|
top: 92,
|
message: '更新已完成。',
|
duration: 3
|
})
|
this.props.updateConfig(config)
|
}
|
|
// 依据字段替换名称
|
execLabel = (map) => {
|
const { type } = this.props
|
let config = fromJS(this.props.config).toJS()
|
|
if (type === 'custom') {
|
let _replace = (components) => {
|
return components.map(item => {
|
if (item.type === 'tabs') {
|
item.subtabs.forEach(tab => {
|
tab.components = _replace(tab.components)
|
})
|
return item
|
} else if (item.type === 'group') {
|
item.components = _replace(item.components)
|
return item
|
}
|
|
if (item.columns) {
|
item.columns = item.columns.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.label = map[col.field.toLowerCase()].FieldDec
|
}
|
return col
|
})
|
}
|
if (item.search) {
|
item.search = item.search.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.label = map[col.field.toLowerCase()].FieldDec
|
}
|
return col
|
})
|
}
|
|
if (item.action) {
|
item.action.forEach(m => {
|
if (m.modal && m.modal.fields) {
|
m.modal.fields = m.modal.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.label = map[col.field.toLowerCase()].FieldDec
|
}
|
return col
|
})
|
}
|
if (m.verify && m.verify.columns) {
|
m.verify.columns = m.verify.columns.map(col => {
|
if (col.Column && map[col.Column.toLowerCase()]) {
|
col.Text = map[col.Column.toLowerCase()].FieldDec
|
}
|
return col
|
})
|
}
|
if (m.config && m.config.components) {
|
m.config.components = _replace(m.config.components)
|
}
|
})
|
}
|
|
if (item.cols) {
|
let _update = (cols) => {
|
return cols.map(col => {
|
if (col.type === 'custom' && col.elements) {
|
col.elements = col.elements.map(m => {
|
if (m.eleType === 'button') {
|
if (m.modal && m.modal.fields) {
|
m.modal.fields = m.modal.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.label = map[col.field.toLowerCase()].FieldDec
|
}
|
return col
|
})
|
}
|
if (m.verify && m.verify.columns) {
|
m.verify.columns = m.verify.columns.map(col => {
|
if (col.Column && map[col.Column.toLowerCase()]) {
|
col.Text = map[col.Column.toLowerCase()].FieldDec
|
}
|
return col
|
})
|
}
|
if (m.config && m.config.components) {
|
m.config.components = _replace(m.config.components)
|
}
|
}
|
|
return m
|
})
|
} else if (col.type === 'colspan') {
|
col.subcols = _update(col.subcols)
|
} else if (col.field) {
|
if (map[col.field.toLowerCase()]) {
|
col.label = map[col.field.toLowerCase()].FieldDec
|
}
|
}
|
|
return col
|
})
|
}
|
|
item.cols = _update(item.cols)
|
}
|
|
if (item.subtype === 'basetable') {
|
item.cols = item.cols.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.label = map[col.field.toLowerCase()].FieldDec
|
}
|
return col
|
})
|
}
|
|
return item
|
})
|
}
|
|
config.components = _replace(config.components)
|
// } else if (type === 'table') {
|
// config.columns = config.columns.map(col => {
|
// if (col.field && map[col.field.toLowerCase()]) {
|
// col.label = map[col.field.toLowerCase()].FieldDec
|
// }
|
// return col
|
// })
|
|
// config.search = config.search.map(col => {
|
// if (col.field && map[col.field.toLowerCase()]) {
|
// col.label = map[col.field.toLowerCase()].FieldDec
|
// }
|
// return col
|
// })
|
|
// config.action = config.action.map(m => {
|
// if (m.verify && m.verify.columns) {
|
// m.verify.columns = m.verify.columns.map(col => {
|
// if (col.Column && map[col.Column.toLowerCase()]) {
|
// col.Text = map[col.Column.toLowerCase()].FieldDec
|
// }
|
// return col
|
// })
|
// }
|
// return m
|
// })
|
} else if (type === 'form') {
|
config.fields = config.fields.map(col => {
|
if (col.field && map[col.field.toLowerCase()]) {
|
col.label = map[col.field.toLowerCase()].FieldDec
|
}
|
return col
|
})
|
}
|
|
this.setState({
|
confirming: false,
|
visible: false
|
})
|
|
notification.success({
|
top: 92,
|
message: '更新已完成。',
|
duration: 3
|
})
|
this.props.updateConfig(config)
|
}
|
|
render() {
|
const { visible, loadingTable, tables, confirming } = this.state
|
|
return (
|
<>
|
<Button className="mk-border-yellow" icon="swap" loading={loadingTable} onClick={this.trigger}>字段替换</Button>
|
<Modal
|
title="字段替换"
|
wrapClassName="replace-field-modal"
|
visible={visible}
|
width={600}
|
maskClosable={false}
|
onOk={this.submit}
|
onCancel={() => { this.setState({ visible: false })}}
|
confirmLoading={confirming}
|
destroyOnClose
|
>
|
<SettingForm tables={tables} wrappedComponentRef={(inst) => this.settingRef = inst}/>
|
</Modal>
|
</>
|
)
|
}
|
}
|
|
export default ReplaceField
|
