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 = {
@@ -15,38 +16,56 @@

  state = {
    formlist: null,
    columns: null
    oriformlist: null,
    columns: null,
    actions: []
  }

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

    let columns = this.props.formlist.filter(item => item.key === 'field')[0].options
    let columns = []
    let actions = []

    let formlist = this.props.formlist.filter(item => !item.forbid)
    formlist.forEach(item => {
      if (item.key === 'field') {
        columns = JSON.parse(JSON.stringify(item.options))
      } else if (item.key === 'actions') {
        actions = JSON.parse(JSON.stringify(item.options))
      }
    })

    this.setState({
      columns: columns,
      formlist: this.props.formlist.map(item => {
      actions: actions,
      oriformlist: formlist,
      formlist: formlist.map(item => {
        if (item.key === 'content' && card.datatype === 'dynamic') {
          item.hidden = true
        } else if (item.key === 'field' && card.datatype === 'static') {
          item.hidden = true
        } else if (item.key === 'field' && card.elemType === 'avatar') {
          item.options = columns.filter(option => option.type === card.type)
        } 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
      })
    })
  }

  componentDidMount () {

  }

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

    if (key === 'datatype') {
      this.setState({
        formlist: this.props.formlist.map(item => {
        formlist: oriformlist.map(item => {
          item.hidden = false

          if (item.key === 'content' && value === 'dynamic') {
            item.hidden = true
          } else if (item.key === 'field' && value === 'static') {
@@ -56,9 +75,26 @@
          return item
        })
      })
      // if (this.props.form.getFieldValue('fieldlength') !== undefined) {
      //   this.props.form.setFieldsValue({fieldlength: fieldlength})
      // }
    } else if (key === 'type') {
      this.setState({
        formlist: oriformlist.map(item => {
          if (item.key === 'field') {
            item.options = columns.filter(option => option.type === value)
          } else if (item.key === 'width') {
            item.hidden = value !== 'picture'
          } else if (item.key === 'size') {
            item.hidden = value !== 'icon'
          } else if (item.key === 'radius') {
            item.hidden = value !== 'picture'
          }

          return item
        })
      }, () => {
        if (this.props.form.getFieldValue('field') !== undefined) {
          this.props.form.setFieldsValue({field: ''})
        }
      })
    }
  }

@@ -74,14 +110,14 @@
    const { getFieldDecorator } = this.props.form
    const fields = []
    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return
      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
            }>
@@ -106,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
            }>
@@ -118,8 +154,7 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(item.unlimit ? <InputNumber /> :
                  <InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
              })(<InputNumber min={item.min} max={item.max} precision={item.precision || 0} />)}
            </Form.Item>
          </Col>
        )
@@ -165,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 (
@@ -205,15 +240,36 @@

  
  handleConfirm = () => {
    const { columns } = this.state
    const { columns, actions } = this.state
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.uuid = this.props.card.uuid || ''
          if (this.props.card.uuid) {
            values.uuid = this.props.card.uuid
          }
          values.elemType = this.props.card.elemType

          if (values.field && !values.content) {
            values.content = columns.filter(col => col.value === values.field)[0].text
          if (['detail', 'header'].includes(values.elemType)) {
            if (values.field && !values.content) {
              values.content = columns.filter(col => col.value === values.field)[0].text
            }
          }
          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
            }
          }

          resolve(values)
@@ -236,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>
    )