import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Button, Input, Radio, Cascader } from 'antd'
|
|
import { minkeColorSystem, minkeIconSystem } from '@/utils/option.js'
|
import MkIcon from '@/components/mk-icon'
|
import './index.scss'
|
|
class UniqueForm extends Component {
|
static propTpyes = {
|
card: PropTypes.object, // 字段信息
|
columns: PropTypes.array, // 列名集合
|
markChange: PropTypes.func // 修改函数
|
}
|
|
state = {
|
editItem: null, // 编辑元素
|
contrastType: 'static',
|
originField: this.props.card,
|
signType: 'background',
|
selectIcon: '',
|
options: JSON.parse(JSON.stringify(minkeColorSystem)),
|
icons: minkeIconSystem.direction
|
}
|
|
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]
|
|
let _type = 'background '
|
if (record.signType === 'icon' || record.signType === 'font') {
|
_type = 'font '
|
}
|
|
this.setState({
|
originField: item || '',
|
editItem: record,
|
contrastType: record.contrastType || '',
|
signType: record.signType || '',
|
selectIcon: record.icon || '',
|
options: this.state.options.map(option => {
|
option.children = option.children.map(cell => {
|
cell.label = <div className={_type + cell.value}>{record.icon ? <MkIcon type={record.icon} /> : cell.value}</div>
|
|
return cell
|
})
|
return option
|
})
|
}, () => {
|
let fieldvalue = {}
|
Object.keys(record).forEach(key => {
|
if (this.props.form.getFieldValue(key) !== undefined) {
|
fieldvalue[key] = record[key]
|
}
|
})
|
|
this.props.form.setFieldsValue(fieldvalue)
|
})
|
}
|
|
/**
|
* @description 字段切换
|
*/
|
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: ''})
|
}
|
}
|
|
/**
|
* @description 对比值类型切换
|
*/
|
changeType = (val) => {
|
this.setState({
|
contrastType: val
|
})
|
}
|
|
/**
|
* @description 标记类型切换
|
*/
|
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)
|
}
|
|
/**
|
* @description 图标类型切换
|
*/
|
changeIconType = (val) => {
|
this.setState({
|
icons: minkeIconSystem[val],
|
selectIcon: ''
|
})
|
this.props.form.setFieldsValue({icon: ''})
|
}
|
|
/**
|
* @description 切换图标
|
*/
|
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}><MkIcon type={val} /></div>
|
|
return cell
|
})
|
return option
|
})
|
})
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
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
|
})
|
}
|
})
|
}
|
|
render() {
|
const { columns } = this.props
|
const { originField, contrastType, signType, options, selectIcon, icons } = this.state
|
const { getFieldDecorator } = this.props.form
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
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: '请选择字段!'
|
}
|
]
|
})(
|
<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>
|
<Col span={6}>
|
<Form.Item label="对比方式">
|
{getFieldDecorator('match', {
|
initialValue: '=',
|
rules: [
|
{
|
required: true,
|
message: '请选择对比方式!'
|
}
|
]
|
})(
|
<Select>
|
<Select.Option value="="> = </Select.Option>
|
<Select.Option value="!="> != </Select.Option>
|
<Select.Option value=">"> > </Select.Option>
|
<Select.Option value="<"> < </Select.Option>
|
<Select.Option value="like"> like </Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
{contrastType === 'static' ? <Col span={6}>
|
<Form.Item label="对比值">
|
{getFieldDecorator('contrastValue', {
|
initialValue: ''
|
})(<Input placeholder="" autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{contrastType === 'dynamic' ? <Col span={6}>
|
<Form.Item label="对比字段">
|
{getFieldDecorator('contrastField', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请选择对比字段!'
|
}
|
]
|
})(
|
<Select
|
showSearch
|
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
|
>
|
{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> : null}
|
<Col span={6}>
|
<Form.Item label="标记方式">
|
{getFieldDecorator('signType', {
|
initialValue: 'background',
|
rules: [
|
{
|
required: true,
|
message: '请选择标记方式!'
|
}
|
]
|
})(
|
<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.Option value="card">卡片</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('iconType', {
|
initialValue: 'direction'
|
})(
|
<Select onChange={this.changeIconType}>
|
<Select.Option value="direction">方向性图标</Select.Option>
|
<Select.Option value="hint">提示建议性图标</Select.Option>
|
<Select.Option value="edit">编辑类图标</Select.Option>
|
<Select.Option value="data">数据类图标</Select.Option>
|
<Select.Option value="normal">网站通用图标</Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{signType === 'icon' ? <Col span={6}>
|
<Form.Item label="图标">
|
{getFieldDecorator('icon', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请选择图标!'
|
}
|
]
|
})(
|
<Select onChange={this.changeIcon} getPopupContainer={() => document.getElementById('model-mark-form-box')}>
|
{icons.map(icon => <Select.Option key={icon} value={icon}><MkIcon type={icon} /></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: '请选择颜色!'
|
}
|
]
|
})(
|
<Cascader
|
options={options}
|
placeholder=""
|
displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + (selectedOptions[1] ? ' / ' + selectedOptions[1].value : '') : ''}
|
getPopupContainer={() => document.getElementById('model-mark-form-box')}
|
/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={signType === 'icon' ? (!selectIcon ? 24 : 18) : 12} style={{textAlign: 'right', marginBottom: 10}}>
|
<Button onClick={this.handleConfirm} type="primary" className="mk-green">
|
保存
|
</Button>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(UniqueForm)
|
