2021-01-20

king

2021-01-20 0227c25e4ed573d3095ada3f9c9a4ba5f18b0de5

 src/menu/components/card/cardcomponent/settingform/index.jsx

@@ -1,13 +1,19 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { Form, Row, Col, Radio, Tooltip, Icon, InputNumber } from 'antd'
import { Form, Row, Col, Radio, Tooltip, Icon, Input, InputNumber, Select } from 'antd'

import './index.scss'

class SettingForm extends Component {
  static propTpyes = {
    dict: PropTypes.object,    // 字典项
    setting: PropTypes.object, // 数据源配置
    dict: PropTypes.object,      // 字典项
    cards: PropTypes.object,     // 卡片集
    setting: PropTypes.object,   // 数据源配置
    inputSubmit: PropTypes.func  // 回车事件
  }

  state = {
    type: this.props.setting.type || 'simple'
  }

  handleConfirm = () => {
@@ -23,8 +29,16 @@
    })
  }

  handleSubmit = (e) => {
    e.preventDefault()

    if (this.props.inputSubmit) {
      this.props.inputSubmit()
    }
  }

  render() {
    const { setting } = this.props
    const { setting, cards } = this.props
    const { getFieldDecorator } = this.props.form

    const formItemLayout = {
@@ -44,7 +58,7 @@
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="栅格布局，每行等分24份。">
                <Tooltip placement="topLeft" title="栅格布局，每行等分为24列。">
                  <Icon type="question-circle" />
                  卡片宽度
                </Tooltip>
@@ -57,7 +71,7 @@
                      message: this.props.dict['form.required.input'] + '宽度!'
                    }
                  ]
                })(<InputNumber min={1} max={24} precision={0} />)}
                })(<InputNumber min={1} max={24} precision={0} onPressEnter={this.handleSubmit}/>)}
              </Form.Item>
            </Col>
            <Col span={12}>
@@ -70,14 +84,14 @@
                {getFieldDecorator('type', {
                  initialValue: setting.type || 'simple'
                })(
                  <Radio.Group>
                  <Radio.Group onChange={(e) => this.setState({ type: e.target.value })}>
                    <Radio value="simple">单卡</Radio>
                    <Radio value="multi">复式卡</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
            {this.state.type === 'multi' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="复式卡片鼠标悬浮信息的动画效果。">
                  <Icon type="question-circle" />
@@ -87,13 +101,31 @@
                {getFieldDecorator('transform', {
                  initialValue: setting.transform || 'up'
                })(
                  <Radio.Group>
                    <Radio value="up">向上滑动</Radio>
                    <Radio value="down">向下滑动</Radio>
                  </Radio.Group>
                  <Select>
                    <Select.Option value="up">向上滑动</Select.Option>
                    <Select.Option value="down">向下滑动</Select.Option>
                    <Select.Option value="left">向左滑动</Select.Option>
                    <Select.Option value="right">向右滑动</Select.Option>
                    <Select.Option value="scale">缩放</Select.Option>
                    <Select.Option value="opacity">透明度</Select.Option>
                    <Select.Option value="rotateX">纵向展开</Select.Option>
                    <Select.Option value="rotateY">横向展开</Select.Option>
                  </Select>
                )}
              </Form.Item>
            </Col>
            </Col> : null}
            {cards.subtype === 'propcard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="卡片点击时，向其他组件传递的BID值。">
                  <Icon type="question-circle" />
                  主键值
                </Tooltip>
              }>
                {getFieldDecorator('primaryId', {
                  initialValue: setting.primaryId || ''
                })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit}/>)}
              </Form.Item>
            </Col> : null}
          </Row>
        </Form>
      </div>