2021-09-16

king

2021-09-16 73c0258e4e30f1d2e407cb067feea8e79fad081d

 src/menu/components/card/cardcellcomponent/elementform/index.jsx

@@ -2,18 +2,29 @@
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, Icon, Radio, Tooltip, InputNumber } from 'antd'
import { formRule } from '@/utils/option.js'

import ColorSketch from '@/mob/colorsketch'
import { formRule } from '@/utils/option.js'
import asyncComponent from '@/utils/asyncComponent'
import './index.scss'

const { TextArea } = Input
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const MkIcon = asyncComponent(() => import('@/components/mkIcon'))

const cardTypeOptions = {
  text: ['eleType', 'datatype', 'value', 'format', 'fontSize', 'fontWeight', 'width', 'height', 'color', 'align', 'padding', 'prefix', 'postfix'],
  number: ['eleType', 'datatype', 'value', 'format', 'fontSize', 'fontWeight', 'width', 'height', 'color', 'align', 'padding', 'prefix', 'postfix'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'radius', 'padding'],
  icon: ['eleType', 'icon', 'fontSize', 'width', 'height', 'color', 'align', 'padding', 'tooltip'],
  slider: ['eleType', 'field', 'width', 'sildercolor', 'padding'],
  splitline: ['eleType', 'color', 'padding'],
  sequence: ['eleType', 'width'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'noValue'],
  number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'],
  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'noValue'],
  icon: ['eleType', 'icon', 'datatype', 'width'],
  slider: ['eleType', 'datatype', 'width', 'color', 'maxValue'],
  splitline: ['eleType', 'color', 'width', 'borderWidth'],
  barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval', 'noValue'],
  qrcode: ['eleType', 'datatype', 'width', 'qrWidth', 'color', 'url', 'noValue'],
  currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix'],
  formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'formula'],
}

class MainSearch extends Component {
@@ -28,36 +39,50 @@
  state = {
    formlist: null,  // 表单信息
    eleType: '',
    datatype: ''
    datatype: '',
    link: ''
  }

  
  UNSAFE_componentWillMount () {
    const { card, config } = this.props

    let _options = this.getOptions(card.eleType, card.datatype)

    let _options = this.getOptions(card.eleType, card.datatype, card.link)
    
    this.setState({
      link: card.link,
      eleType: card.eleType,
      datatype: card.datatype,
      formlist: this.props.formlist.map(item => {
        item.hidden = !_options.includes(item.key)

        if (item.key === 'field') {
        if (item.key === 'field' || item.key === 'linkurl') {
          item.options = []
          config.columns.forEach(col => {
            if (!/^Nvarchar/ig.test(col.datatype) && (card.eleType === 'number' || card.eleType === 'slider')) {
            if (/^(Int|Decimal)/ig.test(col.datatype) && (card.eleType === 'number' || card.eleType === 'slider')) {
              item.options.push({
                value: col.field,
                text: col.label
              })
            } else if (/^Nvarchar/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') {
            } else if (/^(Nvarchar|date)/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') {
              item.options.push({
                value: col.field,
                text: col.label
              })
            }
          })
        } else if (item.key === 'value' && card.eleType === 'slider') {
          item.type = 'number'
          item.label = '值'
        } else if (item.key === 'format') {
          if (card.eleType === 'text') {
            item.options = item.oriOptions.filter(op => op.value !== 'percent' && op.value !== 'thdSeparator')
          } else if (card.eleType === 'number') {
            item.options = item.oriOptions.filter(op => op.value !== 'YYYY-MM-DD')
          }
        } else if (item.key === 'url') {
          item.required = card.eleType !== 'qrcode'
        }
        if (item.key === 'linkurl') {
          item.type = card.link === 'dynamic' ? 'select' : 'textarea'
        }

        return item
@@ -65,12 +90,34 @@
    })
  }

  getOptions = (eleType, datatype) => {
  getOptions = (eleType, datatype, link) => {
    let _options = fromJS(cardTypeOptions[eleType]).toJS() // 选项列表
    
    if (['text', 'number', 'picture'].includes(eleType)) {
    if (['text', 'number', 'picture', 'link', 'slider', 'barcode', 'qrcode', 'video'].includes(eleType)) {
      if (datatype === 'dynamic') {
        _options.push('field')
      } else if (eleType === 'picture' || eleType === 'video') {
        _options.push('url')
      } else {
        _options.push('value')
      }

      if (['text', 'picture'].includes(eleType) && link) {
        if (link === 'dynamic' || link === 'static' || link === 'custom') {
          _options.push('linkurl', 'joint')
        } else if (link === 'page') {
          _options.push('copyMenuId', 'joint', 'open')
        } else if (link === 'linkpage') {
          _options.push('linkmenu', 'joint', 'open')
        }
      } else if (eleType === 'picture' && !link) {
        _options.push('scale')
      }
    } else if (eleType === 'icon') {
      if (datatype === 'dynamic') {
        _options.push('field')
      } else {
        _options.push('tooltip')
      }
    }

@@ -85,47 +132,82 @@
   */
  selectChange = (key, value, option) => {
    const { config } = this.props
    const { datatype } = this.state
    const { datatype, eleType } = this.state

    if (key === 'eleType') {
      let _options = this.getOptions(value, datatype)
      let _options = this.getOptions(value, datatype, '')
      
      let _formlist = this.state.formlist.map(item => {
        item.hidden = !_options.includes(item.key)

        if (item.key === 'field') {
          item.options = []
          config.columns.forEach(col => {
            if (!/^Nvarchar/ig.test(col.datatype) && (value === 'number' || value === 'slider')) {
            if (/^(Int|Decimal)/ig.test(col.datatype) && (value === 'number' || value === 'slider')) {
              item.options.push({
                value: col.field,
                text: col.label
              })
            } else if (/^Nvarchar/ig.test(col.datatype) && value !== 'number' && value !== 'slider') {
            } else if (/^(Nvarchar|date)/ig.test(col.datatype) && value !== 'number' && value !== 'slider') {
              item.options.push({
                value: col.field,
                text: col.label
              })
            }
          })
        } else if (item.key === 'value') {
          if (value === 'slider') {
            item.type = 'number'
            item.label = '值'
          } else {
            item.type = 'text'
            item.label = '内容'
          }
        } else if (item.key === 'format') {
          if (value === 'text') {
            item.options = item.oriOptions.filter(op => op.value !== 'percent' && op.value !== 'thdSeparator')
          } else if (value === 'number') {
            item.options = item.oriOptions.filter(op => op.value !== 'YYYY-MM-DD')
          }
        } else if (item.key === 'url') {
          item.required = value !== 'qrcode'
        }

        return item
      })

      this.setState({
        link: '',
        eleType: value,
        formlist: _formlist
      }, () => {
        if (value === 'slider' || value === 'splitline') {
          if (this.props.form.getFieldValue('width') !== undefined) {
            this.props.form.setFieldsValue({width: 24})
          }
        if (value === 'slider') {
          this.props.form.setFieldsValue({width: 24, color: '#1890ff'})
        } else if (value === 'splitline') {
          this.props.form.setFieldsValue({width: 24, color: '#e8e8e8'})
        } else if (value === 'text' || value === 'number') {
          this.props.form.setFieldsValue({format: ''})
        }
        if (value === 'text' || value === 'picture') {
          this.props.form.setFieldsValue({link: ''})
        }
      })
    } else if (key === 'field') {
      if (this.props.form.getFieldValue('value') !== undefined) {
        this.props.form.setFieldsValue({value: option.props.title})
      }
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, this.state.datatype, value)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          if (item.key === 'linkurl') {
            item.type = value === 'dynamic' ? 'select' : 'textarea'
          }
          return item
        })
      })
    }
  }

@@ -134,11 +216,25 @@
    let value = e.target.value

    if (key === 'datatype') {
      let _options = this.getOptions(eleType, value)
      let _options = this.getOptions(eleType, value, this.state.link)

      this.setState({
        datatype: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)

          return item
        })
      })
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, this.state.datatype, value)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
          item.hidden = !_options.includes(item.key)
          if (item.key === 'linkurl') {
            item.type = value === 'dynamic' ? 'select' : 'textarea'
          }
          return item
        })
      })
@@ -158,22 +254,13 @@
    const fields = []

    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return
      if (item.hidden || item.forbid) return

      if (item.type === 'text') { // 文本搜索
        let rules = []

        if (item.key === 'padding') {
          rules = [{
            pattern: /^\d+px$|^\d+px\s\d+px$|^\d+px\s\d+px\s\d+px$|^\d+px\s\d+px\s\d+px\s\d+px$/ig,
            message: '请正确输入内边距！'
          }]
        }

        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
@@ -188,39 +275,17 @@
                  {
                    max: formRule.input.max,
                    message: formRule.input.message
                  },
                  ...rules
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
      } else if (item.type === 'textarea') { // 文本搜索
        fields.push(
          <Col span={12} key={index}>
          <Col span={24} className="textarea" key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: item.readonly ? false : !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<InputNumber min={0} max={10000} precision={0} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
@@ -229,10 +294,52 @@
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                    required: item.readonly ? false : !!item.required,
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  },
                  {
                    max: formRule.input.max,
                    message: formRule.input.message
                  }
                ]
              })(<TextArea rows={2} disabled={item.readonly} placeholder={item.placeholder || ''} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [{
                  required: item.readonly ? false : !!item.required,
                  message: this.props.dict['form.required.input'] + item.label + '!'
                }]
              })(<InputNumber min={item.min || 0} max={item.max || 10000} precision={item.precision || 0} onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'select') { // 下拉搜索
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [{
                  required: !!item.required,
                  message: this.props.dict['form.required.select'] + item.label + '!'
                }]
              })(
                <Select
                  showSearch
@@ -250,27 +357,49 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'icon') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [{
                  required: !!item.required,
                  message: this.props.dict['form.required.select'] + item.label + '!'
                }]
              })(
                <MkIcon />
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'radio') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <Icon type="question-circle" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
                rules: [{
                  required: !!item.required,
                  message: this.props.dict['form.required.select'] + item.label + '!'
                }]
              })(
                <Radio.Group onChange={(e) => {this.onChange(e, item.key)}} disabled={item.readonly}>
                  {
                    item.options.map(option => {
                      return (
                        <Radio key={option.value} value={option.value}>{option.text}</Radio>
                      )
                    })
                  }
                  {item.options.map(option => {
                    return (
                      <Radio key={option.value} value={option.value}>{option.text}</Radio>
                    )
                  })}
                </Radio.Group>
              )}
            </Form.Item>
@@ -294,6 +423,24 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'file') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <SourceComponent type={this.state.eleType} />
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    return fields
@@ -306,6 +453,7 @@
        if (!err) {
          values.uuid = this.props.card.uuid
          values.marks = this.props.card.marks || null

          resolve(values)
        } else {
          reject(err)