2021-11-12

king

2021-11-12 0c84df247914f893ef5e41d57a422e10a2dc814c

 src/templates/sharecomponent/cardcomponent/carddetailform/index.jsx

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

import { formRule } from '@/utils/option.js'
import './index.scss'
// import './index.scss'

class MainSearch extends Component {
  static propTpyes = {
@@ -46,11 +47,11 @@
          item.hidden = true
        } else if (item.key === 'field' && card.elemType === 'avatar') {
          item.options = columns.filter(option => option.type === card.type)
        } else if (item.key === 'widthType' && card.elemType === 'avatar' && card.type === 'picture') {
          item.hidden = false
        } else if (item.key === 'size' && card.elemType === 'avatar' && card.type === 'icon') {
          item.hidden = false
        } else if (item.key === 'width' && card.elemType === 'avatar' && card.type === 'picture') {
          item.hidden = false
        } else if (item.key === 'radius' && card.elemType === 'avatar' && card.type === 'picture') {
          item.hidden = false
        }
        return item
@@ -59,7 +60,6 @@
  }

  typeChange = (key, value) => {
    const { card } = this.props
    const { columns, oriformlist } = this.state

    if (key === 'datatype') {
@@ -80,13 +80,12 @@
        formlist: oriformlist.map(item => {
          if (item.key === 'field') {
            item.options = columns.filter(option => option.type === value)
          } else if (item.key === 'widthType') {
            item.hidden = value !== 'picture'
          } else if (item.key === 'width') {
            item.hidden = value !== 'picture'
            item.max = card.widthType === 'ratio' ? 100 : 500
          } else if (item.key === 'size') {
            item.hidden = value !== 'icon'
          } else if (item.key === 'radius') {
            item.hidden = value !== 'picture'
          }

          return item
@@ -94,20 +93,6 @@
      }, () => {
        if (this.props.form.getFieldValue('field') !== undefined) {
          this.props.form.setFieldsValue({field: ''})
        }
      })
    } else if (key === 'widthType') {
      this.setState({
        formlist: oriformlist.map(item => {
          if (item.key === 'width') {
            item.max = value === 'ratio' ? 100 : 500
          }

          return item
        })
      }, () => {
        if (this.props.form.getFieldValue('width') !== undefined) {
          this.props.form.setFieldsValue({width: 32})
        }
      })
    }
@@ -127,12 +112,12 @@
    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 ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
@@ -157,7 +142,7 @@
          <Col span={12} key={index}>
            <Form.Item label={item.tooltip ?
              <Tooltip placement="topLeft" overlayClassName={item.tooltipClass} title={item.tooltip}>
                <Icon type="question-circle" />
                <QuestionCircleOutlined className="mk-form-tip" />
                {item.label}
              </Tooltip> : item.label
            }>
@@ -169,7 +154,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<InputNumber min={item.min} max={item.max} precision={0} />)}
              })(<InputNumber min={item.min} max={item.max} precision={item.precision || 0} />)}
            </Form.Item>
          </Col>
        )
@@ -215,7 +200,7 @@
                  }
                ]
              })(
                <Radio.Group onChange={(e) => {this.typeChange(item.key, e.target.value)}}>
                <Radio.Group style={{whiteSpace: 'nowrap'}} disabled={item.readonly} onChange={(e) => {this.typeChange(item.key, e.target.value)}}>
                  {
                    item.options.map(option => {
                      return (
@@ -270,14 +255,20 @@
              values.content = columns.filter(col => col.value === values.field)[0].text
            }
          }
          if (['bottom', 'header'].includes(values.elemType) && values.actions) {
          if (values.elemType === 'bottom' && values.actions) {
            values.actions = values.actions.map(item => actions.filter(action => action.value === item)[0])
          }
          if (values.elemType === 'header' && values.actions) {
            values.actions = actions.filter(action => action.value === values.actions)
          }
          
          if (['avatar'].includes(values.elemType)) {
            if (values.type === 'icon') {
              let column = columns.filter(col => col.value === values.field)[0]
              values.icon = column.icon
              values.color = column.color

              values.width = values.size
            }
          }

@@ -301,7 +292,7 @@
      }
    }
    return (
      <Form {...formItemLayout} className="card-detail-edit-form" id="card-detail-edit-form">
      <Form {...formItemLayout} style={{minHeight: '190px'}} id="card-detail-edit-form">
        <Row gutter={24}>{this.getFields()}</Row>
      </Form>
    )