import React, { Component } from 'react'
|
import PropTypes from 'prop-types'
|
import { notification } from 'antd'
|
import { PlusOutlined } from '@ant-design/icons'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import Utils from '@/utils/utils.js'
|
import './index.scss'
|
|
const EditTable = asyncComponent(() => import('@/templates/zshare/editTable'))
|
|
class EdiFieldsTable extends Component {
|
static propTpyes = {
|
onChange: PropTypes.func // 数据变化
|
}
|
|
UNSAFE_componentWillMount () {
|
let data = this.props['data-__meta'].initialValue || []
|
|
this.setState({
|
loading: false,
|
data: data.map(item => {
|
item.uuid = item.uuid || item.key
|
return item
|
})
|
})
|
}
|
|
state = {
|
data: [],
|
columns: [
|
{
|
title: '字段名',
|
dataIndex: 'field',
|
inputType: 'input',
|
editable: true,
|
width: '20%',
|
},
|
{
|
title: '字体颜色',
|
dataIndex: 'color',
|
inputType: 'color',
|
editable: true,
|
width: '20%',
|
render: (text, record) => {
|
return <span style={{color: text}}>示例</span>
|
}
|
},
|
{
|
title: '字体大小',
|
dataIndex: 'fontSize',
|
inputType: 'number',
|
min: 12,
|
max: 50,
|
editable: true,
|
width: '20%',
|
},
|
{
|
title: '对齐方式',
|
dataIndex: 'align',
|
inputType: 'select',
|
editable: true,
|
width: '20%',
|
options: [
|
{value: 'left', text: '居左'},
|
{value: 'center', text: '居中'},
|
{value: 'right', text: '居右'},
|
// {value: 'justify', text: 'justify'}
|
],
|
render: (text, record) => {
|
if (text === 'center') {
|
return '居中'
|
} else if (text === 'right') {
|
return '居右'
|
} else {
|
return '居左'
|
}
|
}
|
}
|
]
|
}
|
|
handleAdd = () => {
|
let _index = this.state.data.length + 1
|
let item = {
|
key: Utils.getuuid(),
|
field: `field${_index}`,
|
color: 'rgba(0, 0, 0, 0.85)',
|
align: 'left',
|
fontSize: 14,
|
}
|
|
item.uuid = item.key
|
|
while (this.state.data.filter(cell => cell.field === item.field).length > 0) {
|
_index++
|
item.field = `field${_index}`
|
}
|
|
let data = [...this.state.data, item]
|
|
this.setState({ data }, () => {
|
this.props.onChange(data)
|
})
|
}
|
|
changeData = (data) => {
|
let fields = data.map(cell => cell.field)
|
fields = Array.from(new Set(fields))
|
if (data.length > 1 && data.length > fields.length) {
|
notification.warning({
|
top: 92,
|
message: '字段名不可重复！',
|
duration: 5
|
})
|
this.setState({loading: true}, () => {
|
this.setState({loading: false})
|
})
|
return
|
} else if (fields.filter(f => f.toLowerCase() === 'value').length > 0) {
|
notification.warning({
|
top: 92,
|
message: '字段名不可使用value！',
|
duration: 5
|
})
|
this.setState({loading: true}, () => {
|
this.setState({loading: false})
|
})
|
return
|
} else if (fields.filter(f => f.toLowerCase() === 'parentid').length > 0) {
|
notification.warning({
|
top: 92,
|
message: '字段名不可使用parentid！',
|
duration: 5
|
})
|
this.setState({loading: true}, () => {
|
this.setState({loading: false})
|
})
|
return
|
} else if (fields.filter(f => f.toLowerCase() === 'pid').length > 0) {
|
notification.warning({
|
top: 92,
|
message: '字段名不可使用pid！',
|
duration: 5
|
})
|
this.setState({loading: true}, () => {
|
this.setState({loading: false})
|
})
|
return
|
}
|
|
this.setState({ data }, () => {
|
this.props.onChange(data)
|
})
|
}
|
|
render() {
|
const { data, columns, loading } = this.state
|
|
return (
|
<div className="modal-card-field-table">
|
{data.length < 6 ? <PlusOutlined className="add-row" onClick={this.handleAdd} /> : null}
|
{!loading ? <EditTable indexShow={false} actions={['edit', 'move', 'del']} data={data} columns={columns} onChange={this.changeData}/> : null}
|
</div>
|
)
|
}
|
}
|
|
export default EdiFieldsTable
|
