2021-12-22

king

2021-12-22 bd1dfc9e6c9b9f8076ca2783ce598e0936b4c664

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

@@ -1,8 +1,10 @@
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'
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 = {
@@ -18,216 +20,8 @@
    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' }
        ]
      }
    ]
    options: JSON.parse(JSON.stringify(minkeColorSystem)),
    icons: minkeIconSystem.direction
  }

  UNSAFE_componentWillMount() {
@@ -247,12 +41,25 @@
    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 || ''
      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 => {
@@ -265,6 +72,9 @@
    })
  }

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

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

  /**
   * @description 标记类型切换
   */
  changeSignType = (val) => {
    let _type = 'background '
    if (val === 'icon' || val === 'font') {
@@ -311,12 +127,26 @@
    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}><Icon type={val} /></div>
          cell.label = <div className={'font ' + cell.value}><MkIcon type={val} /></div>

          return cell
        })
@@ -335,21 +165,13 @@
        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 { originField, contrastType, signType, options, selectIcon, icons } = this.state
    const { getFieldDecorator } = this.props.form
    const formItemLayout = {
      labelCol: {
@@ -362,13 +184,11 @@
      }
    }

    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={'字段'}>
            <Form.Item label="字段">
              {getFieldDecorator('field', {
                initialValue: originField.field,
                rules: [
@@ -391,7 +211,7 @@
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label={'对比类型'}>
            <Form.Item label="对比类型">
              {getFieldDecorator('contrastType', {
                initialValue: 'static'
              })(
@@ -403,7 +223,7 @@
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item label={'对比方式'}>
            <Form.Item label="对比方式">
              {getFieldDecorator('match', {
                initialValue: '=',
                rules: [
@@ -415,28 +235,23 @@
              })(
                <Select>
                  <Select.Option value="="> = </Select.Option>
                  {originField.type === 'number' ? <Select.Option value=">"> > </Select.Option> : null}
                  {originField.type === 'number' ? <Select.Option value="<"> &lt; </Select.Option> : null}
                  {originField.type === 'text' ? <Select.Option value="like"> like </Select.Option> : null}
                  <Select.Option value="!="> != </Select.Option>
                  <Select.Option value=">"> &gt; </Select.Option>
                  <Select.Option value="<"> &lt; </Select.Option>
                  <Select.Option value="like"> like </Select.Option>
                </Select>
              )}
            </Form.Item>
          </Col>
          {contrastType === 'static' ? <Col span={6}>
            <Form.Item label={'对比值'}>
            <Form.Item label="对比值">
              {getFieldDecorator('contrastValue', {
                initialValue: '',
                rules: [
                  {
                    required: true,
                    message: this.props.dict['form.required.input'] + '对比值!'
                  }
                ]
              })(originField.type === 'number' ? <InputNumber /> : <Input placeholder="" autoComplete="off" />)}
                initialValue: ''
              })(<Input placeholder="" autoComplete="off" />)}
            </Form.Item>
          </Col> : null}
          {contrastType === 'dynamic' ? <Col span={6}>
            <Form.Item label={'对比字段'}>
            <Form.Item label="对比字段">
              {getFieldDecorator('contrastField', {
                initialValue: '',
                rules: [
@@ -450,7 +265,7 @@
                  showSearch
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                >
                  {contFields.map(item => (
                  {columns.map(item => (
                    <Select.Option key={item.uuid} title={item.label + '(' + item.field + ')'} value={item.field}>{item.label + '(' + item.field + ')'}</Select.Option>
                  ))}
                </Select>
@@ -458,7 +273,7 @@
            </Form.Item>
          </Col> : null}
          <Col span={6}>
            <Form.Item label={'标记方式'}>
            <Form.Item label="标记方式">
              {getFieldDecorator('signType', {
                initialValue: 'background',
                rules: [
@@ -473,6 +288,7 @@
                  <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>
@@ -490,6 +306,21 @@
            </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: '',
@@ -501,26 +332,7 @@
                ]
              })(
                <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> */}
                  {icons.map(icon => <Select.Option key={icon} value={icon}><MkIcon type={icon} /></Select.Option>)}
                </Select>
              )}
            </Form.Item>
@@ -539,13 +351,13 @@
                <Cascader
                  options={options}
                  placeholder=""
                  displayRender={(label, selectedOptions) => selectedOptions[0] ? selectedOptions[0].label + ' / ' + selectedOptions[1].value : ''}
                  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' ? 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>