2020-05-22

king

2020-05-22 523cec6c87d88b43954a4409a8dfde6aade095a1

 src/templates/sharecomponent/columncomponent/markcolumn/markform/index.jsx

@@ -2,7 +2,7 @@
import PropTypes from 'prop-types'
import { Form, Row, Col, Select, Button, Input, InputNumber, Radio, Icon, Cascader, Tooltip } from 'antd'

import { minkeColorSystem } from '@/utils/option.js'
import { minkeColorSystem, minkeIconSystem } from '@/utils/option.js'
import './index.scss'

class UniqueForm extends Component {
@@ -19,7 +19,8 @@
    originField: this.props.card,
    signType: 'background',
    selectIcon: '',
    options: minkeColorSystem
    options: minkeColorSystem,
    icons: minkeIconSystem.direction
  }

  UNSAFE_componentWillMount() {
@@ -57,6 +58,9 @@
    })
  }

  /**
   * @description 字段切换
   */
  fieldChange = (value) => {
    const { columns } = this.props
    let item = columns.filter(col => col.field === value)[0]
@@ -72,12 +76,18 @@
    }
  }

  /**
   * @description 对比值类型切换
   */
  changeType = (val) => {
    this.setState({
      contrastType: val
    })
  }

  /**
   * @description 标记类型切换
   */
  changeSignType = (val) => {
    let _type = 'background '
    if (val === 'icon' || val === 'font') {
@@ -103,6 +113,20 @@
    this.setState(newState)
  }

  /**
   * @description 图标类型切换
   */
  changeIconType = (val) => {
    this.setState({
      icons: minkeIconSystem[val],
      selectIcon: ''
    })
    this.props.form.setFieldsValue({icon: ''})
  }

  /**
   * @description 切换图标
   */
  changeIcon = (val) => {
    this.setState({
      selectIcon: val,
@@ -141,7 +165,7 @@

  render() {
    const { columns } = this.props
    const { originField, contrastType, signType, options, selectIcon } = this.state
    const { originField, contrastType, signType, options, selectIcon, icons } = this.state
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
@@ -288,6 +312,22 @@
            </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="trademark">品牌和标识</Select.Option>
                  <Select.Option value="normal">网站通用图标</Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col> : null}
          {signType === 'icon' ? <Col span={6}>
            <Form.Item label={'图标'}>
              {getFieldDecorator('icon', {
                initialValue: '',
@@ -299,7 +339,8 @@
                ]
              })(
                <Select onChange={this.changeIcon} getPopupContainer={() => document.getElementById('model-mark-form-box')}>
                  <Select.Option value="arrow-up"><Icon type="arrow-up" /></Select.Option>
                  {icons.map(icon => <Select.Option key={icon} value={icon}><Icon type={icon} /></Select.Option>)}
                  {/* <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>
@@ -317,7 +358,7 @@
                  <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"><Icon type="link" /></Select.Option> */}
                  {/* <Select.Option value="link"></Select.Option> */}
                </Select>
              )}
@@ -343,7 +384,7 @@
              )}
            </Form.Item>
          </Col> : null}
          <Col span={signType === 'icon' ? 24 : 12} style={{textAlign: 'right', marginBottom: 10}}>
          <Col span={signType === 'icon' ? (!selectIcon ? 24 : 18) : 12} style={{textAlign: 'right', marginBottom: 10}}>
            <Button onClick={this.handleConfirm} type="primary" className="mk-green">
              保存
            </Button>