2020-11-10

king

2020-11-10 a9ac16fecc0cf9bc66dfaefe4e9b35fa3c722812

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

@@ -1,19 +1,25 @@
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 { formRule } from '@/utils/option.js'
import { Form, Row, Col, Input, Select, Icon, Radio, Tooltip, InputNumber, notification } from 'antd'

import { formRule } from '@/utils/option.js'
import FileUpload from '@/tabviews/zshare/fileupload'
import ColorSketch from '@/mob/colorsketch'
import './index.scss'

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'],
  number: ['eleType', 'datatype', 'format', 'width', 'height', 'prefix', 'postfix'],
  picture: ['eleType', 'datatype', 'width', 'lenWidRadio', 'url'],
  icon: ['eleType', 'icon', 'datatype', 'width'],
  link: ['eleType', 'datatype', 'label', 'width', 'height', 'joint'],
  slider: ['eleType', 'datatype', 'width', 'color', 'maxValue'],
  splitline: ['eleType', 'color', 'width', 'borderWidth'],
  barcode: ['eleType', 'datatype', 'width', 'barHeight', 'displayValue', 'interval'],
  qrcode: ['eleType', 'datatype', 'width', 'qrWidth', 'color', 'url'],
  currentDate: ['eleType', 'width', 'dateFormat', 'prefix', 'postfix'],
}

class MainSearch extends Component {
@@ -34,9 +40,8 @@
  
  UNSAFE_componentWillMount () {
    const { card, config } = this.props

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

    
    this.setState({
      eleType: card.eleType,
      datatype: card.datatype,
@@ -58,6 +63,9 @@
              })
            }
          })
        } else if (item.key === 'value' && card.eleType === 'slider') {
          item.type = 'number'
          item.label = '值'
        }

        return item
@@ -68,9 +76,17 @@
  getOptions = (eleType, datatype) => {
    let _options = fromJS(cardTypeOptions[eleType]).toJS() // 选项列表
    
    if (['text', 'number', 'picture'].includes(eleType)) {
    if (['text', 'number', 'picture', 'link', 'slider', 'barcode', 'qrcode'].includes(eleType)) {
      if (datatype === 'dynamic') {
        _options.push('field')
      } else if (eleType !== 'picture') {
        _options.push('value')
      }
    } else if (eleType === 'icon') {
      if (datatype === 'dynamic') {
        _options.push('field')
      } else {
        _options.push('tooltip')
      }
    }

@@ -92,6 +108,7 @@
      
      let _formlist = this.state.formlist.map(item => {
        item.hidden = !_options.includes(item.key)

        if (item.key === 'field') {
          item.options = []
          config.columns.forEach(col => {
@@ -107,6 +124,14 @@
              })
            }
          })
        } else if (item.key === 'value') {
          if (value === 'slider') {
            item.type = 'number'
            item.label = '值'
          } else {
            item.type = 'text'
            item.label = '内容'
          }
        }

        return item
@@ -116,10 +141,10 @@
        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 (key === 'field') {
@@ -135,7 +160,9 @@

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

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

@@ -162,13 +189,6 @@

      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}>
@@ -212,7 +232,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<InputNumber min={0} max={10000} precision={0} />)}
              })(<InputNumber min={item.min || 0} max={item.max || 10000} precision={item.precision || 0} onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
        )
@@ -294,6 +314,35 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'file') {
        let filelist = []
        if (item.initVal) {
          filelist = [{
            uid: `1`,
            name: item.initVal.slice(item.initVal.lastIndexOf('/') + 1),
            status: 'done',
            url: item.initVal,
            origin: true
          }]
        }

        fields.push(
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: filelist,
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <FileUpload maxFile={item.maxfile} fileType={'text'} />
              )}
            </Form.Item>
          </Col>
        )
      }
    })
    return fields
@@ -306,6 +355,30 @@
        if (!err) {
          values.uuid = this.props.card.uuid
          values.marks = this.props.card.marks || null

          if (values.url) {
            if (values.url.length > 0) {
              if (values.url[0].origin && values.url[0].url) {
                values.url = values.url[0].url
              } else if (!values.url[0].origin && values.url[0].status === 'done' && values.url[0].response) {
                values.url = values.url[0].response
              } else {
                values.url = ''
              }
            } else {
              values.url = ''
            }
          }

          if (values.eleType === 'picture' && values.datatype === 'static' && !values.url) {
            notification.warning({
              top: 92,
              message: '尚未添加图片或图片上传失败，请重新添加！',
              duration: 5
            })
            return
          }

          resolve(values)
        } else {
          reject(err)