2024-04-18

king

2024-04-18 8f78c97ffcde201e2a4d1ffa7ccb97a13f0f045d

 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, Radio, Tooltip, InputNumber, Cascader, Popover } from 'antd'
import { Form, Row, Col, Input, Select, Radio, Tooltip, InputNumber, Cascader, Popover, message, AutoComplete } from 'antd'
import { QuestionCircleOutlined } from '@ant-design/icons'

import { formRule } from '@/utils/option.js'
@@ -10,23 +10,26 @@

const { TextArea } = Input
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
const MKTable = asyncComponent(() => import('@/components/normalform/modalform/mkTable'))
const MkEditIcon = asyncComponent(() => import('@/components/mkIcon'))

const cardTypeOptions = {
  sequence: ['eleType', 'width'],
  sequence: ['eleType', 'width', 'prefix', 'postfix'],
  text: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix', 'link', 'anchors', 'noValue', 'bgImage', 'fixStyle', 'copyable', 'alignItems', 'sortField'],
  number: ['eleType', 'datatype', 'width', 'height', 'prefix', 'postfix', 'noValue', 'fixStyle', 'alignItems'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'maxWidth', 'link', 'noValue'],
  video: ['eleType', 'datatype', 'width', 'aspectRatio', 'autoPlay', 'loop', 'startTime', 'noValue', 'posterType'],
  icon: ['eleType', 'datatype', 'width', 'tooltip'],
  icon: ['eleType', 'datatype', 'tipType', 'width', 'tooltip'],
  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', 'fixStyle'],
  formula: ['eleType', 'width', 'height', 'prefix', 'postfix', 'eval', 'formula', 'noValue', 'fixStyle', 'alignItems'],
  formula: ['eleType', 'width', 'height', 'eval', 'formula', 'noValue'],
  color: ['eleType', 'datatype', 'width', 'lenWidRadio', 'noValue', 'copyable'],
  tag: ['eleType', 'datatype', 'width', 'noValue', 'signs'],
}

class ElementEditForm extends Component {
@@ -58,7 +61,7 @@
      formlist: formlist.map(item => {
        item.hidden = !_options.includes(item.key)

        if (item.key === 'field' || item.key === 'linkurl' || item.key === 'bgImage' || item.key === 'posterField') {
        if ((item.key === 'field' || item.key === 'linkurl' || item.key === 'bgImage' || item.key === 'posterField') && item.type === 'select') {
          item.options = []
          
          if (side === 'sub') {
@@ -112,26 +115,39 @@
              })
            })
          }
        } else if (item.key === 'value' && card.eleType === 'slider') {
          item.type = 'number'
          item.label = '值'
        } else if (item.key === 'formula') {
          item.fields = []

          config.columns.forEach(col => {
            item.fields.push(col.field)
          })
          
          if (config.subColumns) {
            config.subColumns.forEach(col => {
          if (side === 'sub') {
            if (config.subColumns) {
              config.subColumns.forEach(col => {
                item.fields.push(col.field)
              })
            }
          } else {
            config.columns.forEach(col => {
              item.fields.push(col.field)
            })
          }

          item.fields = item.fields.join(', ')
        } else if (item.key === 'value' && card.eleType === 'text') {
          item.type = 'textarea'
          item.label = '内容'
        } else if (item.key === 'value') {
          item.tooltip = ''
          if (card.eleType === 'slider') {
            item.type = 'number'
            item.label = '值'
          } else if (card.eleType === 'text') {
            item.type = 'textarea'
            item.label = '内容'
            item.tooltip = '文本类型，会替换内容中的@username@、@fullName@、@mk_city@、@appname@、@bid@、@month@、@week@、@day@'
          } else if (card.eleType === 'tag') {
            item.type = 'textarea'
            item.label = '内容'
            item.tooltip = '多个值请使用逗号（英文）分隔。'
          } else {
            item.type = 'text'
            item.label = '内容'
          }
        } else if (item.key === 'format') {
          if (card.eleType === 'text') {
            item.options = item.oriOptions.filter(op => !['percent', 'thdSeparator', 'abs'].includes(op.value))
@@ -142,7 +158,7 @@
          item.required = card.eleType !== 'qrcode'
        }
        if (item.key === 'linkurl') {
          item.type = card.link === 'dynamic' ? 'select' : 'textarea'
          item.type = card.link === 'dynamic' ? item.defType : 'textarea'
        }

        return item
@@ -153,7 +169,7 @@
  getOptions = () => {
    let _options = fromJS(cardTypeOptions[this.record.eleType]).toJS() // 选项列表
    
    if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video', 'color'].includes(this.record.eleType)) {
    if (['text', 'number', 'picture', 'slider', 'barcode', 'qrcode', 'video', 'color', 'tag'].includes(this.record.eleType)) {
      if (this.record.datatype === 'dynamic') {
        _options.push('field')
        if (this.record.eleType === 'number') {
@@ -164,7 +180,10 @@
      } else {
        _options.push('value')
      }
      if (this.record.eleType === 'video' && this.record.posterType) {
      
      if (this.record.eleType === 'picture' && this.record.noValue === 'show') {
        _options.push('lostTip')
      } else if (this.record.eleType === 'video' && this.record.posterType) {
        if (this.record.posterType === 'dynamic') {
          _options.push('posterField')
        } else {
@@ -182,7 +201,7 @@
            _options.push('linkurl')
          }
        } else if (this.record.linkType === 'other') {
          _options.push('linkurl', 'joint')
          _options.push('linkurl', 'joint', 'open')
        } else {
          _options.push('linkurl')
        }
@@ -199,11 +218,21 @@
    } else if (this.record.eleType === 'icon') {
      if (this.record.datatype === 'dynamic') {
        _options.push('field', 'noValue')
      } else if (this.record.tipType === 'text') {
        _options.push('value')
      } else {
        _options.push('icon')
      }
    } else if (this.record.eleType === 'formula' && this.record.eval === 'true') {
      _options.push('decimal')
      if (this.record.tipType === 'text') {
        _options.push('height')
      }
    } else if (this.record.eleType === 'formula') {
      if (this.record.eval !== 'func') {
        _options.push('prefix', 'postfix', 'fixStyle', 'alignItems')
      }
      if (this.record.eval === 'true') {
        _options.push('decimal')
      }
    }
    if (_options.includes('fixStyle') && this.record.fixStyle === 'alone') {
      _options.push('fixSize', 'fixColor', 'fixLeft', 'fixRight')
@@ -237,7 +266,7 @@
        item.initVal = this.record[item.key]
        item.hidden = !_options.includes(item.key)

        if (item.key === 'field') {
        if (item.key === 'field' && item.type === 'select') {
          item.options = []

          if (side === 'sub') {
@@ -273,12 +302,18 @@
            })
          }
        } else if (item.key === 'value') {
          item.tooltip = ''
          if (value === 'slider') {
            item.type = 'number'
            item.label = '值'
          } else if (value === 'text') {
            item.type = 'textarea'
            item.label = '内容'
            item.tooltip = '文本类型，会替换内容中的@username@、@fullName@、@mk_city@、@appname@、@bid@、@month@、@week@、@day@'
          } else if (value === 'tag') {
            item.type = 'textarea'
            item.label = '内容'
            item.tooltip = '多个值请使用逗号（英文）分隔。'
          } else {
            item.type = 'text'
            item.label = '内容'
@@ -331,12 +366,12 @@
          item.hidden = !_options.includes(item.key)

          if (item.key === 'linkurl') {
            item.type = value === 'dynamic' ? 'select' : 'textarea'
            item.type = value === 'dynamic' ? item.defType : 'textarea'
          }
          return item
        })
      })
    } else if (['datatype', 'showInfo', 'showType', 'fixStyle', 'posterType', 'eval', 'linkType'].includes(key)) {
    } else if (['datatype', 'showInfo', 'showType', 'fixStyle', 'posterType', 'eval', 'linkType', 'tipType', 'noValue'].includes(key)) {
      let _options = this.getOptions()

      this.setState({
@@ -366,8 +401,68 @@
      if (item.hidden || item.forbid) return

      if (item.type === 'text') {
        if (item.options && item.options.length > 0) {
          fields.push(
            <Col span={12} key={index}>
              <Form.Item label={item.label}>
                {getFieldDecorator(item.key, {
                  initialValue: item.initVal || '',
                  rules: [
                    {
                      required: !!item.required,
                      message: '请输入' + item.label + '!'
                    },
                    {
                      pattern: formRule.field.pattern,
                      message: formRule.field.message
                    },
                    {
                      max: formRule.input.max,
                      message: formRule.input.message
                    }
                  ]
                })(
                  <AutoComplete
                    dataSource={item.options.map((cell, i) => <AutoComplete.Option value={cell.value} key={i}>
                      {cell.value}
                    </AutoComplete.Option>)}
                    filterOption={(input, option) => option.props.children.indexOf(input) > -1}
                  >
                    <Input autoComplete="off" onPressEnter={this.handleSubmit} />
                  </AutoComplete>
                )}
              </Form.Item>
            </Col>
          )
        } else {
          fields.push(
            <Col span={12} key={index}>
              <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: [
                    {
                      required: item.readonly ? false : !!item.required,
                      message: '请输入' + item.label + '!'
                    },
                    {
                      max: formRule.input.max,
                      message: formRule.input.message
                    }
                  ]
                })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
              </Form.Item>
            </Col>
          )
        }
      } 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" title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
@@ -380,44 +475,35 @@
                  {
                    required: item.readonly ? false : !!item.required,
                    message: '请输入' + item.label + '!'
                  },
                  {
                    max: formRule.input.max,
                    message: formRule.input.message
                  }
                ]
              })(<Input placeholder="" autoComplete="off" disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
              })(<TextArea autoSize={{minRows: 2}} disabled={item.readonly} placeholder={item.placeholder || ''} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'textarea') {
        if (item.key === 'formula') {
      } else if (item.type === 'number') {
        if (item.help) {
          fields.push(
            <Col span={24} className="textarea" key={index}>
              <Form.Item label={item.tooltip ?
            <Col span={12} key={index}>
              <Form.Item help={item.help} 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: [
                    {
                      required: item.readonly ? false : !!item.required,
                      message: '请输入' + item.label + '!'
                    }
                  ]
                })(<TextArea autoSize={{minRows: 2}} disabled={item.readonly} placeholder={item.placeholder || ''} />)}
                  initialValue: item.initVal,
                  rules: [{
                    required: item.readonly ? false : !!item.required,
                    message: '请输入' + item.label + '!'
                  }]
                })(<InputNumber min={item.min || 0} max={item.max || 10000} precision={item.precision || 0} onPressEnter={this.handleSubmit} />)}
              </Form.Item>
              <Popover overlayClassName="formula-fields" placement="topLeft" title="" content={<div>{item.fields}</div>} trigger="click">
                <span className="formula-icon">字段集</span>
              </Popover>
            </Col>
          )
        } else {
          fields.push(
            <Col span={24} className="textarea" key={index}>
            <Col span={12} key={index}>
              <Form.Item label={item.tooltip ?
                <Tooltip placement="topLeft" title={item.tooltip}>
                  <QuestionCircleOutlined className="mk-form-tip" />
@@ -425,37 +511,16 @@
                </Tooltip> : item.label
              }>
                {getFieldDecorator(item.key, {
                  initialValue: item.initVal || '',
                  rules: [
                    {
                      required: item.readonly ? false : !!item.required,
                      message: '请输入' + item.label + '!'
                    }
                  ]
                })(<TextArea autoSize={{minRows: 2}} disabled={item.readonly} placeholder={item.placeholder || ''} />)}
                  initialValue: item.initVal,
                  rules: [{
                    required: item.readonly ? false : !!item.required,
                    message: '请输入' + 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 === 'number') {
        fields.push(
          <Col span={12} key={index}>
            <Form.Item help={item.help || null} 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: [{
                  required: item.readonly ? false : !!item.required,
                  message: '请输入' + 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}>
@@ -556,10 +621,11 @@
          </Col>
        )
      } else if (item.type === 'file') {
        let type = this.state.eleType
        let type = this.record.eleType
        if (item.key === 'posterUrl') {
          type = 'picture'
        }

        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
@@ -605,6 +671,55 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'table') {
        fields.push(
          <Col span={24} key={index} className="textarea">
            <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: [
                  {
                    required: !!item.required,
                    message: '请输入' + item.label + '!'
                  }
                ]
              })(
                <MKTable columns={item.columns || []} actions={item.actions}/>
              )}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'codemirror') {
        fields.push(
          <Col span={24} key={index} className="textarea">
            <Form.Item label={
              <Tooltip placement="topLeft" overlayStyle={{width: 500, maxWidth: 500}} title={item.tooltip}>
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip>
            }>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || '',
                rules: [
                  {
                    required: !!item.required,
                    message: '请输入' + item.label + '!'
                  }
                ]
              })(
                <CodeMirror mode="text/javascript"/>
              )}
            </Form.Item>
            <Popover overlayClassName="formula-fields" placement="topLeft" title="" content={<div>{item.fields}</div>} trigger="click">
              <span className="formula-icon">字段集</span>
            </Popover>
          </Col>
        )
      }
    })
    return fields
@@ -621,7 +736,7 @@
          values.marks = this.props.card.marks || null

          // eslint-disable-next-line
          if (values.eleType === 'formula' && values.eval !== 'false' && /^[\u4E00-\u9FA50-9a-zA-Z_\s@\+\-\*\/]*$/ig.test(values.formula) && /[\+\-\*\/]/ig.test(values.formula)) {
          if (values.eleType === 'formula' && values.eval === 'true' && /^[\u4E00-\u9FA50-9a-zA-Z_\s@\+\-\*\/]*$/ig.test(values.formula) && /[\+\-\*\/]/ig.test(values.formula)) {
            let cols = []
            config.subColumns && config.subColumns.forEach(col => {
              if (/^(Int|Decimal)/ig.test(col.datatype)) {
@@ -639,6 +754,19 @@
            })
          }

          if (values.width === 0) {
            let utype = {picture: '图片', video: '视频', slider: '进度条', splitline: '分割线', barcode: '条形码', qrcode: '二维码'}
            
            if (utype[values.eleType]) {
              message.warning(utype[values.eleType] + '元素宽度不可为0！')
              return
            }
          }
          
          if (values.eleType === 'tag' && values.signs && values.signs.length === 0) {
            values.signs = null
          }

          resolve(values)
        } else {
          reject(err)