2021-04-09

king

2021-04-09 92a9b175fda139d6608c53af62e4d8b7b1c926cf

 src/pc/components/login/wrapsetting/settingform/index.jsx

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

import StyleInput from '@/menu/stylecontroller/styleInput'
import './index.scss'

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

  state = {
    roleList: []
    roleList: [],
    msgTemps: []
  }

  UNSAFE_componentWillMount () {
    let roleList = sessionStorage.getItem('sysRoles')
    let msgTemps = sessionStorage.getItem('msgTemplate')

    if (roleList) {
      try {
        roleList = JSON.parse(roleList)
@@ -28,7 +31,17 @@
      roleList = []
    }

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

    this.setState({roleList, msgTemps})
  }

  handleConfirm = () => {
@@ -36,6 +49,14 @@
    return new Promise((resolve, reject) => {
      this.props.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          if (values.loginWays.includes('sms_vcode') && !values.tempId) {
            notification.warning({
              top: 92,
              message: '使用短信验证码登录时，需要选择短信模板！',
              duration: 5
            })
            return
          }
          resolve(values)
        } else {
          reject(err)
@@ -53,9 +74,9 @@
  }

  render() {
    const { wrap, config } = this.props
    const { wrap } = this.props
    const { getFieldDecorator } = this.props.form
    const { roleList } = this.state
    const { roleList, msgTemps } = this.state

    const formItemLayout = {
      labelCol: {
@@ -73,13 +94,6 @@
        <Form {...formItemLayout}>
          <Row gutter={24}>
            <Col span={12}>
              <Form.Item label="标题">
                {getFieldDecorator('title', {
                  initialValue: wrap.title || ''
                })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="用于组件间的区分。">
                  <Icon type="question-circle" />
@@ -95,6 +109,26 @@
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="登录方式">
                {getFieldDecorator('loginWays', {
                  initialValue: wrap.loginWays || [],
                  rules: [
                    {
                      required: true,
                      message: this.props.dict['form.required.select'] + '登录方式!'
                    }
                  ]
                })(
                  <Checkbox.Group
                    options={[
                      { label: '账号密码', value: 'uname_pwd' },
                      { label: '短信验证码', value: 'sms_vcode' },
                    ]}
                  />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
@@ -115,117 +149,35 @@
                })(<InputNumber min={1} max={24} precision={0} onPressEnter={this.handleSubmit} />)}
              </Form.Item>
            </Col>
            {config.subtype === 'propcard' ? <Col span={12}>
            <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择静态值，无需配置数据源。">
                  <Icon type="question-circle" />
                  数据来源
                </Tooltip>
              }>
                {getFieldDecorator('datatype', {
                  initialValue: wrap.datatype || 'dynamic'
                })(
                  <Radio.Group>
                    <Radio value="dynamic">动态</Radio>
                    <Radio value="static">静态</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.subtype === 'datacard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="数据源中选择分页时有效。">
                  <Icon type="question-circle" />
                  分页风格
                </Tooltip>
              }>
                {getFieldDecorator('pagestyle', {
                  initialValue: wrap.pagestyle || 'page'
                })(
                  <Radio.Group>
                    <Radio value="page">页码</Radio>
                    <Radio value="switch">左右切换</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.subtype !== 'tablecard' ? <Col span={12}>
              <Form.Item label="卡片属性">
                {getFieldDecorator('cardType', {
                  initialValue: wrap.cardType || ''
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}}>
                    <Radio key="" value=""> 不可选 </Radio>
                    <Radio key="radio" value={'radio'}> 单选 </Radio>
                    {config.subtype !== 'propcard' ? <Radio key="checkbox" value={'checkbox'}> 多选 </Radio> : null}
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.subtype !== 'tablecard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="设置为居中对齐或右对齐，只在卡片为1行时有效。">
                  <Icon type="question-circle" />
                  卡片排列
                </Tooltip>
              }>
                {getFieldDecorator('cardFloat', {
                  initialValue: wrap.cardFloat || 'left'
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}}>
                    <Radio key="left" value="left"> 左对齐 </Radio>
                    <Radio key="center" value="center"> 居中 </Radio>
                    <Radio key="right" value="right"> 右对齐 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.subtype !== 'tablecard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="鼠标悬浮于卡片上方时，卡片放大1.05倍。">
                  <Icon type="question-circle" />
                  卡片放大
                </Tooltip>
              }>
                {getFieldDecorator('scale', {
                  initialValue: wrap.scale || 'false'
                })(
                  <Radio.Group>
                    <Radio key="false" value="false"> 否 </Radio>
                    <Radio key="true" value="true"> 是 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {config.subtype === 'tablecard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="表格高度，超出时滚动，高度为空时根据内容自适应。">
                <Tooltip placement="topLeft" title="组件占用的最小高度，用于页面布局。">
                  <Icon type="question-circle" />
                  高度
                </Tooltip>
              }>
                {getFieldDecorator('height', {
                  initialValue: wrap.height
                })(<InputNumber min={100} max={2000} precision={0} onPressEnter={this.handleSubmit} />)}
                })(<StyleInput options={['px', 'vh', 'vw', '%']}/>)}
              </Form.Item>
            </Col> : null}
            {config.subtype === 'propcard' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="选择类型为《页眉/页脚》时，打印的每页里都会带有该组件。">
                  <Icon type="question-circle" />
                  组件类型
                </Tooltip>
              }>
                {getFieldDecorator('printType', {
                  initialValue: wrap.printType || 'content'
            </Col>
            <Col span={12}>
              <Form.Item label="短信模板">
                {getFieldDecorator('tempId', {
                  initialValue: wrap.tempId || ''
                })(
                  <Radio.Group>
                    <Radio value="content">内容</Radio>
                    <Radio value="headerOrfooter">页眉/页脚</Radio>
                  </Radio.Group>
                  <Select
                    showSearch
                    allowClear
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    {msgTemps.map(option =>
                      <Select.Option key={option.ID} value={option.ID}>{option.SignName + ' - ' + option.TemplateCode}</Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col> : null}
            </Col>
            <Col span={12}>
              <Form.Item label="黑名单">
                {getFieldDecorator('blacklist', {