import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Button, Input, InputNumber, Radio, Icon, Cascader } from 'antd'
|
import './index.scss'
|
|
|
class UniqueForm extends Component {
|
static propTpyes = {
|
dict: PropTypes.object, // 字典项
|
card: PropTypes.object, // 字段信息
|
columns: PropTypes.array, // 列名集合
|
markChange: PropTypes.func // 修改函数
|
}
|
|
state = {
|
editItem: null, // 编辑元素
|
contrastType: 'static',
|
originField: this.props.card,
|
signType: 'background',
|
selectIcon: '',
|
options: [
|
{
|
value: 'DustRed',
|
label: '薄暮',
|
children: [
|
{ value: 'dust-red-1', label: 'dust-red-1' },
|
{ value: 'dust-red-2', label: 'dust-red-2' },
|
{ value: 'dust-red-3', label: 'dust-red-3' },
|
{ value: 'dust-red-4', label: 'dust-red-4' },
|
{ value: 'dust-red-5', label: 'dust-red-5' },
|
{ value: 'dust-red-6', label: 'dust-red-6' },
|
{ value: 'dust-red-7', label: 'dust-red-7' },
|
{ value: 'dust-red-8', label: 'dust-red-8' },
|
{ value: 'dust-red-9', label: 'dust-red-9' },
|
{ value: 'dust-red-10', label: 'dust-red-10' }
|
]
|
},
|
{
|
value: 'Volcano',
|
label: '火山',
|
children: [
|
{ value: 'volcano-1', label: 'volcano-1' },
|
{ value: 'volcano-2', label: 'volcano-2' },
|
{ value: 'volcano-3', label: 'volcano-3' },
|
{ value: 'volcano-4', label: 'volcano-4' },
|
{ value: 'volcano-5', label: 'volcano-5' },
|
{ value: 'volcano-6', label: 'volcano-6' },
|
{ value: 'volcano-7', label: 'volcano-7' },
|
{ value: 'volcano-8', label: 'volcano-8' },
|
{ value: 'volcano-9', label: 'volcano-9' },
|
{ value: 'volcano-10', label: 'volcano-10' }
|
],
|
},
|
{
|
value: 'SunsetOrange',
|
label: '日暮',
|
children: [
|
{ value: 'orange-1', label: 'orange-1' },
|
{ value: 'orange-2', label: 'orange-2' },
|
{ value: 'orange-3', label: 'orange-3' },
|
{ value: 'orange-4', label: 'orange-4' },
|
{ value: 'orange-5', label: 'orange-5' },
|
{ value: 'orange-6', label: 'orange-6' },
|
{ value: 'orange-7', label: 'orange-7' },
|
{ value: 'orange-8', label: 'orange-8' },
|
{ value: 'orange-9', label: 'orange-9' },
|
{ value: 'orange-10', label: 'orange-10' }
|
]
|
},
|
{
|
value: 'CalendulaGold',
|
label: '金盏花',
|
children: [
|
{ value: 'gold-1', label: 'gold-1' },
|
{ value: 'gold-2', label: 'gold-2' },
|
{ value: 'gold-3', label: 'gold-3' },
|
{ value: 'gold-4', label: 'gold-4' },
|
{ value: 'gold-5', label: 'gold-5' },
|
{ value: 'gold-6', label: 'gold-6' },
|
{ value: 'gold-7', label: 'gold-7' },
|
{ value: 'gold-8', label: 'gold-8' },
|
{ value: 'gold-9', label: 'gold-9' },
|
{ value: 'gold-10', label: 'gold-10' }
|
]
|
},
|
{
|
value: 'SunriseYellow',
|
label: '日出',
|
children: [
|
{ value: 'yellow-1', label: 'yellow-1' },
|
{ value: 'yellow-2', label: 'yellow-2' },
|
{ value: 'yellow-3', label: 'yellow-3' },
|
{ value: 'yellow-4', label: 'yellow-4' },
|
{ value: 'yellow-5', label: 'yellow-5' },
|
{ value: 'yellow-6', label: 'yellow-6' },
|
{ value: 'yellow-7', label: 'yellow-7' },
|
{ value: 'yellow-8', label: 'yellow-8' },
|
{ value: 'yellow-9', label: 'yellow-9' },
|
{ value: 'yellow-10', label: 'yellow-10' }
|
]
|
},
|
{
|
value: 'Lime',
|
label: '青柠',
|
children: [
|
{ value: 'lime-1', label: 'lime-1' },
|
{ value: 'lime-2', label: 'lime-2' },
|
{ value: 'lime-3', label: 'lime-3' },
|
{ value: 'lime-4', label: 'lime-4' },
|
{ value: 'lime-5', label: 'lime-5' },
|
{ value: 'lime-6', label: 'lime-6' },
|
{ value: 'lime-7', label: 'lime-7' },
|
{ value: 'lime-8', label: 'lime-8' },
|
{ value: 'lime-9', label: 'lime-9' },
|
{ value: 'lime-10', label: 'lime-10' }
|
]
|
},
|
{
|
value: 'PolarGreen',
|
label: '极光绿',
|
children: [
|
{ value: 'green-1', label: 'green-1' },
|
{ value: 'green-2', label: 'green-2' },
|
{ value: 'green-3', label: 'green-3' },
|
{ value: 'green-4', label: 'green-4' },
|
{ value: 'green-5', label: 'green-5' },
|
{ value: 'green-6', label: 'green-6' },
|
{ value: 'green-7', label: 'green-7' },
|
{ value: 'green-8', label: 'green-8' },
|
{ value: 'green-9', label: 'green-9' },
|
{ value: 'green-10', label: 'green-10' }
|
]
|
},
|
{
|
value: 'Cyan',
|
label: '明青',
|
children: [
|
{ value: 'cyan-1', label: 'cyan-1' },
|
{ value: 'cyan-2', label: 'cyan-2' },
|
{ value: 'cyan-3', label: 'cyan-3' },
|
{ value: 'cyan-4', label: 'cyan-4' },
|
{ value: 'cyan-5', label: 'cyan-5' },
|
{ value: 'cyan-6', label: 'cyan-6' },
|
{ value: 'cyan-7', label: 'cyan-7' },
|
{ value: 'cyan-8', label: 'cyan-8' },
|
{ value: 'cyan-9', label: 'cyan-9' },
|
{ value: 'cyan-10', label: 'cyan-10' }
|
]
|
},
|
{
|
value: 'DaybreakBlue',
|
label: '拂晓蓝',
|
children: [
|
{ value: 'blue-1', label: 'blue-1' },
|
{ value: 'blue-2', label: 'blue-2' },
|
{ value: 'blue-3', label: 'blue-3' },
|
{ value: 'blue-4', label: 'blue-4' },
|
{ value: 'blue-5', label: 'blue-5' },
|
{ value: 'blue-6', label: 'blue-6' },
|
{ value: 'blue-7', label: 'blue-7' },
|
{ value: 'blue-8', label: 'blue-8' },
|
{ value: 'blue-9', label: 'blue-9' },
|
{ value: 'blue-10', label: 'blue-10' }
|
]
|
},
|
{
|
value: 'GeekBlue',
|
label: '极客蓝',
|
children: [
|
{ value: 'geekblue-1', label: 'geekblue-1' },
|
{ value: 'geekblue-2', label: 'geekblue-2' },
|
{ value: 'geekblue-3', label: 'geekblue-3' },
|
{ value: 'geekblue-4', label: 'geekblue-4' },
|
{ value: 'geekblue-5', label: 'geekblue-5' },
|
{ value: 'geekblue-6', label: 'geekblue-6' },
|
{ value: 'geekblue-7', label: 'geekblue-7' },
|
{ value: 'geekblue-8', label: 'geekblue-8' },
|
{ value: 'geekblue-9', label: 'geekblue-9' },
|
{ value: 'geekblue-10', label: 'geekblue-10' }
|
]
|
},
|
{
|
value: 'GoldenPurple',
|
label: '酱紫',
|
children: [
|
{ value: 'purple-1', label: 'purple-1' },
|
{ value: 'purple-2', label: 'purple-2' },
|
{ value: 'purple-3', label: 'purple-3' },
|
{ value: 'purple-4', label: 'purple-4' },
|
{ value: 'purple-5', label: 'purple-5' },
|
{ value: 'purple-6', label: 'purple-6' },
|
{ value: 'purple-7', label: 'purple-7' },
|
{ value: 'purple-8', label: 'purple-8' },
|
{ value: 'purple-9', label: 'purple-9' },
|
{ value: 'purple-10', label: 'purple-10' }
|
]
|
},
|
{
|
value: 'Magenta',
|
label: '法式洋红',
|
children: [
|
{ value: 'magenta-1', label: 'magenta-1' },
|
{ value: 'magenta-2', label: 'magenta-2' },
|
{ value: 'magenta-3', label: 'magenta-3' },
|
{ value: 'magenta-4', label: 'magenta-4' },
|
{ value: 'magenta-5', label: 'magenta-5' },
|
{ value: 'magenta-6', label: 'magenta-6' },
|
{ value: 'magenta-7', label: 'magenta-7' },
|
{ value: 'magenta-8', label: 'magenta-8' },
|
{ value: 'magenta-9', label: 'magenta-9' },
|
{ value: 'magenta-10', label: 'magenta-10' }
|
]
|
},
|
{
|
value: 'Gray',
|
label: '中性色',
|
children: [
|
{ value: 'gray-1', label: 'gray-1' },
|
{ value: 'gray-2', label: 'gray-2' },
|
{ value: 'gray-3', label: 'gray-3' },
|
{ value: 'gray-4', label: 'gray-4' },
|
{ value: 'gray-5', label: 'gray-5' },
|
{ value: 'gray-6', label: 'gray-6' },
|
{ value: 'gray-7', label: 'gray-7' },
|
{ value: 'gray-8', label: 'gray-8' },
|
{ value: 'gray-9', label: 'gray-9' },
|
{ value: 'gray-10', label: 'gray-10' }
|
]
|
}
|
]
|
}
|
|
UNSAFE_componentWillMount() {
|
this.setState({
|
options: this.state.options.map(option => {
|
option.children = option.children.map(cell => {
|
cell.label = <div className={'background ' + cell.value}>{cell.value}</div>
|
|
return cell
|
})
|
return option
|
})
|
})
|
}
|
|
edit = (record) => {
|
const { columns } = this.props
|
let item = columns.filter(col => col.field === record.field)[0]
|
|
this.setState({
|
originField: item || '',
|
editItem: record,
|
contrastType: record.contrastType || '',
|
signType: record.signType || '',
|
selectIcon: record.icon || ''
|
}, () => {
|
let fieldvalue = {}
|
Object.keys(record).forEach(key => {
|
if (this.props.form.getFieldValue(key) !== undefined) {
|
fieldvalue[key] = record[key]
|
}
|
})
|
|
this.props.form.setFieldsValue(fieldvalue)
|
})
|
}
|
|
fieldChange = (value) => {
|
const { columns } = this.props
|
let item = columns.filter(col => col.field === value)[0]
|
|
this.setState({
|
originField: item
|
})
|
|
if (this.state.contrastType !== 'static') {
|
this.props.form.setFieldsValue({contrastField: ''})
|
} else {
|
this.props.form.setFieldsValue({contrastValue: ''})
|
}
|
}
|
|
changeType = (val) => {
|
this.setState({
|
contrastType: val
|
})
|
}
|
|
changeSignType = (val) => {
|
let _type = 'background '
|
if (val === 'icon' || val === 'font') {
|
_type = 'font '
|
}
|
|
let newState = {
|
signType: val,
|
selectIcon: ''
|
}
|
|
if (val !== 'icon') {
|
newState.options = this.state.options.map(option => {
|
option.children = option.children.map(cell => {
|
cell.label = <div className={_type + cell.value}>{cell.value}</div>
|
|
return cell
|
})
|
return option
|
})
|
}
|
|
this.setState(newState)
|
}
|
|
changeIcon = (val) => {
|
this.setState({
|
selectIcon: val,
|
options: this.state.options.map(option => {
|
option.children = option.children.map(cell => {
|
cell.label = <div className={'font ' + cell.value}><Icon type={val} /></div>
|
|
return cell
|
})
|
return option
|
})
|
})
|
}
|
|
handleConfirm = () => {
|
// const { columns } = this.props
|
// 表单提交时检查输入值是否正确
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.uuid = this.state.editItem ? this.state.editItem.uuid : ''
|
|
this.props.markChange(values)
|
this.setState({
|
editItem: null
|
})
|
this.props.form.setFieldsValue({
|
field: '',
|
})
|
if (this.state.contrastType !== 'static') {
|
this.props.form.setFieldsValue({contrastField: ''})
|
} else {
|
this.props.form.setFieldsValue({contrastValue: ''})
|
}
|
}
|
})
|
}
|
|
render() {
|
const { columns } = this.props
|
const { originField, contrastType, signType, options, selectIcon } = this.state
|
const { getFieldDecorator } = this.props.form
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
let contFields = columns.filter(col => originField.field !== col.field && originField.type === col.type)
|
|
return (
|
<Form {...formItemLayout} id="model-mark-form-box" className="mingke-table">
|
<Row gutter={24}>
|
<Col span={6}>
|
<Form.Item label={'字段'}>
|
{getFieldDecorator('field', {
|
initialValue: originField.field,
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '字段!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
onChange={this.fieldChange}
|
>
|
{columns.map(item => (
|
<Select.Option key={item.uuid} title={item.label + '(' + item.field + ')'} value={item.field}>{item.label + '(' + item.field + ')'}</Select.Option>
|
))}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item label={'对比类型'}>
|
{getFieldDecorator('contrastType', {
|
initialValue: 'static'
|
})(
|
<Radio.Group onChange={(e) => this.changeType(e.target.value)}>
|
<Radio value="static">静态</Radio>
|
<Radio value="dynamic">动态</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
{contrastType === 'static' ? <Col span={6}>
|
<Form.Item label={'对比值'}>
|
{getFieldDecorator('contrastValue', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.input'] + '对比值!'
|
}
|
]
|
})(originField.type === 'number' ? <InputNumber /> : <Input placeholder="" autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{contrastType === 'dynamic' ? <Col span={6}>
|
<Form.Item label={'对比字段'}>
|
{getFieldDecorator('contrastField', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '对比字段!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
>
|
{contFields.map(item => (
|
<Select.Option key={item.uuid} title={item.label + '(' + item.field + ')'} value={item.field}>{item.label + '(' + item.field + ')'}</Select.Option>
|
))}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={6}>
|
<Form.Item label={'对比方式'}>
|
{getFieldDecorator('match', {
|
initialValue: '=',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '对比方式!'
|
}
|
]
|
})(
|
<Select>
|
<Select.Option value="="> = </Select.Option>
|
{originField.type === 'number' ? <Select.Option value=">"> > </Select.Option> : null}
|
{originField.type === 'number' ? <Select.Option value="<"> < </Select.Option> : null}
|
{originField.type === 'text' ? <Select.Option value="like"> like </Select.Option> : null}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={6}>
|
<Form.Item label={'标记方式'}>
|
{getFieldDecorator('signType', {
|
initialValue: 'background',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '标记方式!'
|
}
|
]
|
})(
|
<Select onChange={this.changeSignType}>
|
<Select.Option value="font">单元格（文字）</Select.Option>
|
<Select.Option value="background">单元格（背景）</Select.Option>
|
<Select.Option value="line">行</Select.Option>
|
<Select.Option value="icon">图标</Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
{signType === 'icon' ? <Col span={6}>
|
<Form.Item label={'图标位置'}>
|
{getFieldDecorator('position', {
|
initialValue: 'back'
|
})(
|
<Radio.Group>
|
<Radio value="front">前</Radio>
|
<Radio value="back">后</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{signType === 'icon' ? <Col span={6}>
|
<Form.Item label={'图标'}>
|
{getFieldDecorator('icon', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '图标!'
|
}
|
]
|
})(
|
<Select onChange={this.changeIcon} getPopupContainer={() => document.getElementById('model-mark-form-box')}>
|
<Select.Option value="arrow-up"><Icon type="arrow-up" /></Select.Option>
|
<Select.Option value="arrow-down"><Icon type="arrow-down" /></Select.Option>
|
<Select.Option value="arrow-left"><Icon type="arrow-left" /></Select.Option>
|
<Select.Option value="arrow-right"><Icon type="arrow-right" /></Select.Option>
|
<Select.Option value="check-circle"><Icon type="check-circle" /></Select.Option>
|
<Select.Option value="close-circle"><Icon type="close-circle" /></Select.Option>
|
<Select.Option value="clock-circle"><Icon type="clock-circle" /></Select.Option>
|
<Select.Option value="pause-circle"><Icon type="pause-circle" /></Select.Option>
|
<Select.Option value="stop"><Icon type="stop" /></Select.Option>
|
<Select.Option value="question-circle"><Icon type="question-circle" /></Select.Option>
|
<Select.Option value="exclamation-circle"><Icon type="exclamation-circle" /></Select.Option>
|
<Select.Option value="check-square"><Icon type="check-square" /></Select.Option>
|
<Select.Option value="warning"><Icon type="warning" /></Select.Option>
|
<Select.Option value="minus-circle"><Icon type="minus-circle" /></Select.Option>
|
<Select.Option value="issues-close"><Icon type="issues-close" /></Select.Option>
|
<Select.Option value="question"><Icon type="question" /></Select.Option>
|
<Select.Option value="fall"><Icon type="fall" /></Select.Option>
|
<Select.Option value="rise"><Icon type="rise" /></Select.Option>
|
<Select.Option value="link"><Icon type="link" /></Select.Option>
|
{/* <Select.Option value="link"></Select.Option> */}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{(signType === 'icon' && selectIcon) || signType !== 'icon' ? <Col span={6}>
|
<Form.Item label="颜色">
|
{getFieldDecorator('color', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: this.props.dict['form.required.select'] + '颜色!'
|
}
|
]
|
})(
|
<Cascader
|
options={options}
|
placeholder=""
|
displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + ' / ' + selectedOptions[1].value : ''}
|
getPopupContainer={() => document.getElementById('model-mark-form-box')}
|
/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={signType === 'icon' ? 24 : 12} style={{textAlign: 'right', marginBottom: 10}}>
|
<Button onClick={this.handleConfirm} type="primary" className="mk-green">
|
保存
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(UniqueForm)
|
