2022-09-06

king

2022-09-06 b8e1395f02c929eaa96b949cf6027ee2a43856a6

 src/templates/sharecomponent/columncomponent/columnform/index.jsx

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

import { formRule } from '@/utils/option.js'
import options from '@/store/options.js'
import Api from '@/api'
import './index.scss'

const { TextArea } = Input
const columnTypeOptions = {
  text: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'textFormat', 'fieldlength', 'blacklist', 'linkmenu', 'rowspan'],
  number: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'decimal', 'format', 'prefix', 'postfix', 'blacklist', 'linkmenu', 'sum'],
  text: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'textFormat', 'fieldlength', 'blacklist', 'perspective', 'rowspan'],
  number: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'decimal', 'format', 'prefix', 'postfix', 'blacklist', 'perspective', 'sum', 'rowspan'],
  link: ['label', 'field', 'type', 'nameField', 'Align', 'Hide', 'IsSort', 'joint', 'Width', 'fieldlength', 'blacklist'],
  textarea: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'prefix', 'postfix', 'fieldlength', 'blacklist'],
  picture: ['label', 'field', 'type', 'Align', 'Hide', 'IsSort', 'Width', 'fieldlength', 'blacklist', 'scale', 'maxHeight']
  picture: ['label', 'field', 'type', 'Align', 'Hide', 'Width', 'fieldlength', 'blacklist', 'scale', 'lenWidRadio', 'span'], 
  video: ['label', 'field', 'type', 'Align', 'Hide', 'startTime', 'Width', 'fieldlength', 'blacklist', 'aspectRatio'],
  index: ['label', 'type', 'Align', 'Width']
}

class MainSearch extends Component {
@@ -26,6 +28,7 @@

  state = {
    formlist: null,
    type: '',
    menulist: null
  }

@@ -34,8 +37,16 @@
    let _menulist = this.props.formlist.filter(form => form.key === 'linkmenu')[0] || ''

    let _options = JSON.parse(JSON.stringify(columnTypeOptions[card.type]))
    if (card.type === 'text' || card.type === 'number') {
      if (card.perspective === 'linkmenu') {
        _options.push('linkmenu', 'linkfields')
      } else if (card.perspective === 'linkurl') {
        _options.push('linkurl', 'linkfields')
      }
    }

    this.setState({
      type: card.type,
      menulist: _menulist.options || [],
      formlist: this.props.formlist.map(item => {
        item.hidden = !_options.includes(item.key)
@@ -55,15 +66,25 @@
      try {
        let _form = document.getElementById('label')
        _form.select()
      } catch {
      } catch (e) {
        console.warn('表单focus失败！')
      }
    }
  }

  typeChange = (key, value) => {
    const { card } = this.props
    if (key === 'type') {
      let _options = JSON.parse(JSON.stringify(columnTypeOptions[value]))

      if (card.type === 'text' || card.type === 'number') {
        if (card.perspective === 'linkmenu') {
          _options.push('linkmenu', 'linkfields')
        } else if (card.perspective === 'linkurl') {
          _options.push('linkurl', 'linkfields')
        }
      }

      let fieldlength = 50

      if (value !== 'text') {
@@ -71,6 +92,7 @@
      }

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

@@ -84,6 +106,26 @@
    } else if (key === 'format' && value === 'percent') {
      this.props.form.setFieldsValue({postfix: '%'})
    }
  }

  changeRadio = (key, value) => {
    if (key === 'perspective') {
      let _options = JSON.parse(JSON.stringify(columnTypeOptions[this.state.type]))
      if (value === 'linkmenu') {
        _options.push('linkmenu', 'linkfields')
      } else if (value === 'linkurl') {
        _options.push('linkurl', 'linkfields')
      }

      this.setState({
        formlist: this.props.formlist.map(item => {
          item.hidden = !_options.includes(item.key)

          return item
        })
      })
    }

  }

  handleSubmit = (e) => {
@@ -100,7 +142,7 @@
    this.state.formlist.forEach((item, index) => {
      if (item.hidden) return

      if (item.type === 'text') { // 文本搜索
      if (item.type === 'text') {
        let rules = []
        if (item.key === 'field' || item.key === 'nameField') {
          rules = [{
@@ -110,7 +152,7 @@
            max: formRule.field.max,
            message: formRule.field.maxMessage
          }]
        } else {
        } else if (item.key !== 'linkurl') {
          rules = [{
            max: formRule.input.max,
            message: formRule.input.message
@@ -120,7 +162,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
            }>
@@ -137,12 +179,33 @@
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'textarea') {
        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: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(<TextArea rows={2} disabled={item.readonly} onPressEnter={this.handleSubmit} />)}
            </Form.Item>
          </Col>
        )
      } else if (item.type === 'number') {
        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
            }>
@@ -154,8 +217,8 @@
                    message: this.props.dict['form.required.input'] + item.label + '!'
                  }
                ]
              })(item.unlimit ? <InputNumber /> :
                  <InputNumber min={item.min} max={item.max} precision={item.decimal} />)}
              })(item.unlimit ? <InputNumber onPressEnter={this.handleSubmit}/> :
                  <InputNumber min={item.min} max={item.max} precision={item.decimal} onPressEnter={this.handleSubmit}/>)}
            </Form.Item>
          </Col>
        )
@@ -193,7 +256,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
            }>
@@ -206,7 +269,7 @@
                  }
                ]
              })(
                <Radio.Group>
                <Radio.Group onChange={(e) => {this.changeRadio(item.key, e.target.value)}}>
                  {
                    item.options.map(option => {
                      return (
@@ -244,11 +307,16 @@
          <Col span={12} key={index}>
            <Form.Item label={item.label}>
              {getFieldDecorator(item.key, {
                initialValue: item.initVal || []
                initialValue: item.initVal || [],
                rules: [
                  {
                    required: !!item.required,
                    message: this.props.dict['form.required.select'] + item.label + '!'
                  }
                ]
              })(
                <Cascader
                  options={this.state.menulist}
                  loadData={this.loadData}
                  placeholder=""
                  getPopupContainer={() => document.getElementById('columnwinter')}
                />
@@ -261,84 +329,13 @@
    return fields
  }

  loadData = selectedOptions => {
    const { MenuID } = this.props
    const targetOption = selectedOptions[selectedOptions.length - 1]
    targetOption.loading = true

    let _param = {
      func: 'sPC_Get_FunMenu',
      ParentID: targetOption.value,
      systemType: options.sysType,
      debug: 'Y'
    }

    Api.getSystemConfig(_param).then(result => {
      if (result.status) {
        targetOption.loading = false
        targetOption.children = result.data.map(item => {
          let submenu = {
            value: item.ParentID,
            label: item.MenuNameP,
            children: item.FunMenu.map(cell => {
              return {
                value: cell.MenuID,
                label: cell.MenuName,
                MenuID: cell.MenuID,
                MenuName: cell.MenuName,
                MenuNo: cell.MenuNo,
                Ot: cell.Ot,
                PageParam: cell.PageParam,
                LinkUrl: cell.LinkUrl,
                disabled: cell.MenuID === MenuID
              }
            })
          }

          return submenu
        })

        this.setState({
          menulist: [...this.state.menulist]
        })
      } else {
        notification.warning({
          top: 92,
          message: result.message,
          duration: 5
        })
        targetOption.loading = false
      }
    })
  }

  handleConfirm = () => {
    const { menulist } = this.state
    // 表单提交时检查输入值是否正确
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          values.id = this.props.card.id
          values.uuid = this.props.card.uuid
          values.marks = this.props.card.marks || ''
          
          if ((values.type === 'text' || values.type === 'number') && values.linkmenu && values.linkmenu.length > 0) {
            let linkThdMenu = ''
            menulist.forEach(menu => {
              if (menu.value === values.linkmenu[0]) {
                menu.children.forEach(item => {
                  if (item.value === values.linkmenu[1]) {
                    item.children.forEach(cell => {
                      if (cell.value === values.linkmenu[2]) {
                        linkThdMenu = cell
                      }
                    })
                  }
                })
              }
            })
            values.linkThdMenu = linkThdMenu
          }
          
          resolve(values)
        } else {