2022-09-06

king

2022-09-06 b8e1395f02c929eaa96b949cf6027ee2a43856a6

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

@@ -1,7 +1,7 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { fromJS } from 'immutable'
import { Form, Row, Col, Input, Select, Icon, Radio, Tooltip, InputNumber } from 'antd'
import { Form, Row, Col, Input, Select, Radio, Tooltip, InputNumber, Cascader } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import { formRule } from '@/utils/option.js'
@@ -11,21 +11,21 @@
const { TextArea } = Input
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const MkIcon = asyncComponent(() => import('@/components/mkIcon'))
const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))

const cardTypeOptions = {
  sequence: ['eleType', 'width'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'noValue'],
  number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'anchors', 'noValue', 'bgImage', 'fixStyle', 'copyable'],
  number: ['eleType', 'datatype', 'width', 'height', 'prefix', 'postfix', 'noValue', 'fixStyle'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'],
  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'noValue'],
  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'startTime', 'noValue', 'posterType'],
  icon: ['eleType', 'icon', 'datatype', 'width'],
  slider: ['eleType', 'datatype', 'width', 'color', 'maxValue', 'showInfo', 'showType', 'strokeWidth', 'strokeLinecap', 'trailColor'],
  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', 'eval', 'formula'],
  currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix', 'fixStyle'],
  formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula', 'noValue', 'fixStyle'],
}

class MainSearch extends Component {
@@ -43,12 +43,13 @@
    datatype: '',
    showType: '',
    showInfo: 'false',
    fixStyle: '',
    link: ''
  }

  UNSAFE_componentWillMount () {
    const { card, config } = this.props
    let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo)
    let _options = this.getOptions(card.eleType, card.datatype, card.link, (card.showType || 'line'), card.showInfo, card.fixStyle || '', card.posterType || '')
    
    this.setState({
      link: card.link,
@@ -56,32 +57,41 @@
      datatype: card.datatype,
      showType: card.showType || 'line',
      showInfo: card.showInfo || 'false',
      fixStyle: card.fixStyle || '',
      posterType: card.posterType || '',
      formlist: this.props.formlist.map(item => {
        item.hidden = !_options.includes(item.key)

        if (item.key === 'field' || item.key === 'linkurl') {
        if (item.key === 'field' || item.key === 'linkurl' || item.key === 'bgImage' || item.key === 'posterField') {
          item.options = []
          config.columns.forEach(col => {
            let label = col.label
            if (label.toLowerCase() !== col.field.toLowerCase()) {
              label = col.field + ' ' + col.label
            }
            if (/^(Int|Decimal)/ig.test(col.datatype) && (card.eleType === 'number' || card.eleType === 'slider')) {
              item.options.push({
                value: col.field,
                text: col.label
                text: label
              })
            } else if (/^(Nvarchar|date)/ig.test(col.datatype) && card.eleType !== 'number' && card.eleType !== 'slider') {
              item.options.push({
                value: col.field,
                text: col.label
                text: label
              })
            }
          })
        } else if (item.key === 'value' && card.eleType === 'slider') {
          item.type = 'number'
          item.label = '值'
        } else if (item.key === 'value' && card.eleType === 'text') {
          item.type = 'textarea'
          item.label = '内容'
        } else if (item.key === 'format') {
          if (card.eleType === 'text') {
            item.options = item.oriOptions.filter(op => op.value !== 'percent' && op.value !== 'thdSeparator')
            item.options = item.oriOptions.filter(op => !['percent', 'thdSeparator', 'abs'].includes(op.value))
          } else if (card.eleType === 'number') {
            item.options = item.oriOptions.filter(op => !op.value || op.value === 'percent' || op.value === 'thdSeparator')
            item.options = item.oriOptions.filter(op => !op.value || ['percent', 'thdSeparator', 'abs'].includes(op.value))
          }
        } else if (item.key === 'url') {
          item.required = card.eleType !== 'qrcode'
@@ -95,16 +105,26 @@
    })
  }

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

      if (['text', 'picture'].includes(eleType) && link) {
@@ -128,6 +148,9 @@
        _options.push('tooltip')
      }
    }
    if (_options.includes('fixStyle') && fixStyle === 'alone') {
      _options.push('fixSize', 'fixColor', 'fixLeft', 'fixRight')
    }

    return _options
  }
@@ -140,10 +163,10 @@
   */
  selectChange = (key, value, option) => {
    const { card, config } = this.props
    const { datatype, eleType, showType, showInfo } = this.state
    const { datatype, eleType, showType, showInfo, fixStyle, posterType } = this.state

    if (key === 'eleType') {
      let _options = this.getOptions(value, datatype, '', showType, showInfo)
      let _options = this.getOptions(value, datatype, '', showType, showInfo, fixStyle, posterType)
      
      let _formlist = this.state.formlist.map(item => {
        item.hidden = !_options.includes(item.key)
@@ -151,15 +174,20 @@
        if (item.key === 'field') {
          item.options = []
          config.columns.forEach(col => {
            let label = col.label
            if (label.toLowerCase() !== col.field.toLowerCase()) {
              label = col.field + ' ' + col.label
            }

            if (/^(Int|Decimal)/ig.test(col.datatype) && (value === 'number' || value === 'slider')) {
              item.options.push({
                value: col.field,
                text: col.label
                text: label
              })
            } else if (/^(Nvarchar|date)/ig.test(col.datatype) && value !== 'number' && value !== 'slider') {
              item.options.push({
                value: col.field,
                text: col.label
                text: label
              })
            }
          })
@@ -167,20 +195,27 @@
          if (value === 'slider') {
            item.type = 'number'
            item.label = '值'
          } else if (value === 'text') {
            item.type = 'textarea'
            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')
            item.options = item.oriOptions.filter(op => !['percent', 'thdSeparator', 'abs'].includes(op.value))
          } else if (value === 'number') {
            item.options = item.oriOptions.filter(op => !op.value || op.value === 'percent' || op.value === 'thdSeparator')
            item.options = item.oriOptions.filter(op => !op.value || ['percent', 'thdSeparator', 'abs'].includes(op.value))
          }
        } else if (item.key === 'url') {
          item.required = value !== 'qrcode'
        } else if (item.key === 'showInfo') {
          item.initVal = showInfo
        } else if (item.key === 'posterType') {
          item.initVal = posterType
        } else if (item.key === 'fixStyle') {
          item.initVal = fixStyle
        }

        return item
@@ -194,8 +229,6 @@
      }, () => {
        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 === 'qrcode') {
          this.props.form.setFieldsValue({color: '#000000'})
        } else if (value === 'text' || value === 'number') {
@@ -210,7 +243,7 @@
        this.props.form.setFieldsValue({value: option.props.title})
      }
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo)
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo, fixStyle, posterType)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
@@ -225,11 +258,11 @@
  }

  onChange = (e, key) => {
    const { eleType, datatype, link, showType, showInfo } = this.state
    const { eleType, datatype, link, showType, showInfo, fixStyle, posterType } = this.state
    let value = e.target.value

    if (key === 'datatype') {
      let _options = this.getOptions(eleType, value, link, showType, showInfo)
      let _options = this.getOptions(eleType, value, link, showType, showInfo, fixStyle, posterType)

      this.setState({
        datatype: value,
@@ -240,7 +273,7 @@
        })
      })
    } else if (key === 'link') {
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo)
      let _options = this.getOptions(eleType, datatype, value, showType, showInfo, fixStyle, posterType)
      this.setState({
        link: value,
        formlist: this.state.formlist.map(item => {
@@ -252,7 +285,7 @@
        })
      })
    } else if (key === 'showInfo') {
      let _options = this.getOptions(eleType, datatype, link, showType, value)
      let _options = this.getOptions(eleType, datatype, link, showType, value, fixStyle, posterType)
      this.setState({
        showInfo: value,
        formlist: this.state.formlist.map(item => {
@@ -264,7 +297,31 @@
      this.setState({
        showType: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, value, showInfo)
        let _options = this.getOptions(eleType, datatype, link, value, showInfo, fixStyle, posterType)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)
            return item
          })
        })
      })
    } else if (key === 'fixStyle') {
      this.setState({
        fixStyle: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, showType, showInfo, value, posterType)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)
            return item
          })
        })
      })
    } else if (key === 'posterType') {
      this.setState({
        posterType: value
      }, () => {
        let _options = this.getOptions(eleType, datatype, link, showType, showInfo, fixStyle, value)
        this.setState({
          formlist: this.state.formlist.map(item => {
            item.hidden = !_options.includes(item.key)
@@ -290,7 +347,7 @@
    this.state.formlist.forEach((item, index) => {
      if (item.hidden || item.forbid) return

      if (item.type === 'text') { // 文本搜索
      if (item.type === 'text') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
@@ -315,7 +372,7 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'textarea') { // 文本搜索
      } else if (item.type === 'textarea') {
        fields.push(
          <Col span={24} className="textarea" key={index}>
            <Form.Item label={item.tooltip ?
@@ -330,20 +387,16 @@
                  {
                    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 || ''} />)}
              })(<TextArea autoSize={{minRows: 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 ?
            <Form.Item help={item.help || null} label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
@@ -377,13 +430,14 @@
              })(
                <Select
                  showSearch
                  filterOption={(input, option) => option.props.children[2].toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  allowClear={item.allowClear || false}
                  filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  onChange={(value, option) => {this.selectChange(item.key, value, option)}}
                  getPopupContainer={() => document.getElementById('card-winter')}
                >
                  {item.options.map((option, index) =>
                    <Select.Option id={`${index}`} title={option.text} key={`${index}`} value={option.value}>
                      {item.key === 'icon' && option.value && <Icon type={option.value} />} {option.text}
                      {option.text}
                    </Select.Option>
                  )}
                </Select>
@@ -407,7 +461,7 @@
                  message: this.props.dict['form.required.select'] + item.label + '!'
                }]
              })(
                <MkIcon />
                <MkEditIcon />
              )}
            </Form.Item>
          </Col>
@@ -458,9 +512,18 @@
          </Col>
        )
      } else if (item.type === 'file') {
        let type = this.state.eleType
        if (item.key === 'posterUrl') {
          type = 'picture'
        }
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal,
                rules: [
@@ -470,7 +533,30 @@
                  }
                ]
              })(
                <SourceComponent type={this.state.eleType} />
                <SourceComponent type={type} />
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'cascader') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || [],
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Cascader options={item.options || []} expandTrigger="hover" placeholder=""/>
              )}
            </Form.Item>
          </Col>