2021-05-26

king

2021-05-26 f66e19dd13af07ee466306632ad43c72f1f16ae7

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

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

import './index.scss'

const { TextArea } = Input

class SettingForm extends Component {
  static propTpyes = {
@@ -13,7 +15,32 @@
  }

  state = {
    type: this.props.setting.type || 'simple'
    type: this.props.setting.type || 'simple',
    click: this.props.setting.click || '',
    appType: sessionStorage.getItem('appType'),
    menulist: []
  }

  UNSAFE_componentWillMount() {
    const { appType } = this.state
    let menulist = null

    if (appType) {
      menulist = sessionStorage.getItem('appMenus')
    } else {
      menulist = sessionStorage.getItem('fstMenuList')
    }

    if (menulist) {
      try {
        menulist = JSON.parse(menulist)
      } catch {
        menulist = []
      }
    } else {
      menulist = []
    }
    this.setState({menulist})
  }

  handleConfirm = () => {
@@ -40,6 +67,7 @@
  render() {
    const { setting, cards } = this.props
    const { getFieldDecorator } = this.props.form
    const { menulist, click, appType } = this.state

    const formItemLayout = {
      labelCol: {
@@ -53,7 +81,7 @@
    }

    return (
      <div className="model-menu-setting-form">
      <div className="model-menu-card-setting-form">
        <Form {...formItemLayout}>
          <Row gutter={24}>
            <Col span={12}>
@@ -74,7 +102,7 @@
                })(<InputNumber min={1} max={24} precision={0} onPressEnter={this.handleSubmit}/>)}
              </Form.Item>
            </Col>
            <Col span={12}>
            {appType !== 'mob' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择复式卡时，可配置鼠标悬浮时的显示信息。">
                  <Icon type="question-circle" />
@@ -90,7 +118,7 @@
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            </Col> : null}
            {this.state.type === 'multi' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="复式卡片鼠标悬浮信息的动画效果。">
@@ -126,6 +154,99 @@
                })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit}/>)}
              </Form.Item>
            </Col> : null}
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="当选择触发按钮时，只有当卡片中只存在一个按钮时有效。">
                  <Icon type="question-circle" />
                  点击事件
                </Tooltip>
              }>
                {getFieldDecorator('click', {
                  initialValue: click
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}} onChange={(e) => this.setState({click: e.target.value})}>
                    <Radio value="">无</Radio>
                    <Radio value="menu">菜单</Radio>
                    <Radio value="link">链接</Radio>
                    <Radio value="button">按钮</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            {!appType && click === 'menu' ? <Col span={12}>
              <Form.Item label="菜单">
                {getFieldDecorator('menu', {
                  initialValue: setting.menu || [],
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.select'] + '菜单!'
                    }
                  ]
                })(
                  <Cascader options={menulist} placeholder=""/>
                )}
              </Form.Item>
            </Col> : null}
            {appType && click === 'menu' ? <Col span={12}>
              <Form.Item label="关联菜单">
                {getFieldDecorator('menu', {
                  initialValue: setting.menu || '',
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.select'] + '关联菜单!'
                    }
                  ]
                })(
                  <Select
                    showSearch
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    {menulist.map(option =>
                      <Select.Option key={option.MenuID} value={option.MenuID}>{option.MenuName}</Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col> : null}
            {click === 'link' ? <Col span={24} className="textarea">
              <Form.Item label="链接">
                {getFieldDecorator('linkurl', {
                  initialValue: setting.linkurl || '',
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.input'] + '链接!'
                    }
                  ]
                })( <TextArea rows={2}/> )}
              </Form.Item>
            </Col> : null}
            {appType === 'pc' && click !== '' && click !== 'button' ? <Col span={12}>
              <Form.Item label="打开方式">
                {getFieldDecorator('open', {
                  initialValue: setting.open || 'blank'
                })(
                  <Radio.Group>
                    <Radio value="blank">新窗口</Radio>
                    <Radio value="self">当前窗口</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {click !== '' && click !== 'button' ? <Col span={12}>
              <Form.Item label="参数拼接">
                {getFieldDecorator('joint', {
                  initialValue: setting.joint || 'true'
                })(
                  <Radio.Group>
                    <Radio value="true">是</Radio>
                    <Radio value="false">否</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
          </Row>
        </Form>
      </div>