2021-09-01

king

2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d

 src/menu/components/table/normal-table/wrapsetting/settingform/index.jsx

@@ -2,11 +2,11 @@
import PropTypes from 'prop-types'
import { Form, Row, Col, Input, Radio, Tooltip, Icon, InputNumber, Select } from 'antd'

import ColorSketch from '@/mob/colorsketch'
import './index.scss'

class SettingForm extends Component {
  static propTpyes = {
    MenuType: PropTypes.any,     // 菜单类型
    dict: PropTypes.object,      // 字典项
    config: PropTypes.object,    // 卡片行信息
    wrap: PropTypes.object,      // 数据源配置
@@ -14,7 +14,8 @@
  }

  state = {
    roleList: []
    roleList: [],
    appType: sessionStorage.getItem('appType')
  }

  UNSAFE_componentWillMount () {
@@ -22,7 +23,7 @@
    if (roleList) {
      try {
        roleList = JSON.parse(roleList)
      } catch {
      } catch (e) {
        roleList = []
      }
    } else {
@@ -54,9 +55,9 @@
  }

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

    const formItemLayout = {
      labelCol: {
@@ -74,6 +75,13 @@
        <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" />
@@ -89,6 +97,115 @@
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit} />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="表格属性">
                {getFieldDecorator('tableType', {
                  initialValue: wrap.tableType
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}}>
                    <Radio key="" value=""> 不可选 </Radio>
                    <Radio key="radio" value={'radio'}> 单选 </Radio>
                    <Radio key="checkbox" value={'checkbox'}> 多选 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="边框">
                {getFieldDecorator('bordered', {
                  initialValue: wrap.bordered || 'true'
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}}>
                    <Radio key="true" value="true"> 有 </Radio>
                    <Radio key="false" value="false"> 无 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="表头">
                {getFieldDecorator('tableHeader', {
                  initialValue: wrap.tableHeader || 'show'
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}}>
                    <Radio key="show" value="show"> 显示 </Radio>
                    <Radio key="hidden" value="hidden"> 隐藏 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            {appType !== 'mob' ? <Col span={12}>
              <Form.Item label="可收起">
                {getFieldDecorator('collapse', {
                  initialValue: wrap.collapse || 'false'
                })(
                  <Radio.Group>
                    <Radio key="true" value="true"> 是 </Radio>
                    <Radio key="false" value="false"> 否 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            <Col span={12}>
              <Form.Item label="表格大小">
                {getFieldDecorator('size', {
                  initialValue: wrap.size || 'middle'
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}}>
                    <Radio key="default" value="default"> 大 </Radio>
                    <Radio key="middle" value="middle"> 中 </Radio>
                    <Radio key="small" value="small"> 小 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={12} style={{height: '64px'}}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="默认值 #e8e8e8。">
                  <Icon type="question-circle" />
                  边框颜色
                </Tooltip>
              }>
                {getFieldDecorator('borderColor', {
                  initialValue: wrap.borderColor || '#e8e8e8'
                })(
                  <ColorSketch />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="模式">
                {getFieldDecorator('mode', {
                  initialValue: wrap.mode || 'default'
                })(
                  <Radio.Group>
                    <Radio key="default" value="default"> 常规 </Radio>
                    <Radio key="ghost" value="ghost"> 透明 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            <Col span={12} style={{height: '64px'}}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="默认值 rgba(0, 0, 0, 0.65)。">
                  <Icon type="question-circle" />
                  字体颜色
                </Tooltip>
              }>
                {getFieldDecorator('color', {
                  initialValue: wrap.color || 'rgba(0, 0, 0, 0.65)'
                })(
                  <ColorSketch />
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="字体大小">
                {getFieldDecorator('fontSize', {
                  initialValue: wrap.fontSize || 14
                })(<InputNumber min={14} max={30} precision={0} />)}
              </Form.Item>
            </Col>
            <Col span={12}>
@@ -109,32 +226,37 @@
                })(<InputNumber min={1} max={24} precision={0} onPressEnter={this.handleSubmit} />)}
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="表格属性">
                {getFieldDecorator('tableType', {
                  initialValue: wrap.tableType
            {appType !== 'mob' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="高级搜索弹窗的宽度，注：当宽度值小于100时表示占窗口的百分比，大于100时表示宽度的绝对值。">
                  <Icon type="question-circle" />
                  高级搜索
                </Tooltip>
              }>
                {getFieldDecorator('advanceWidth', {
                  initialValue: wrap.advanceWidth || 1000
                })(<InputNumber min={10} max={3000} precision={0} onPressEnter={this.handleSubmit}/>)}
              </Form.Item>
            </Col> : null}
            {appType !== 'mob' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="双击表格中行，触发的按钮。">
                  <Icon type="question-circle" />
                  双击事件
                </Tooltip>
              }>
                {getFieldDecorator('doubleClick', {
                  initialValue: wrap.doubleClick || ''
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}}>
                    <Radio key="" value=""> 不可选 </Radio>
                    <Radio key="radio" value={'radio'}> 单选 </Radio>
                    <Radio key="checkbox" value={'checkbox'}> 多选 </Radio>
                  </Radio.Group>
                  <Select allowClear>
                    {config.action.map(option =>
                      <Select.Option key={option.uuid} value={option.uuid}>{option.label}</Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col>
            </Col> : null}
            <Col span={12}>
              <Form.Item label="边框">
                {getFieldDecorator('border', {
                  initialValue: wrap.border || 'true'
                })(
                  <Radio.Group style={{whiteSpace: 'nowrap'}}>
                    <Radio key="true" value={'true'}> 有 </Radio>
                    <Radio key="false" value={'false'}> 无 </Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col>
            {MenuType !== 'billPrint' ? <Col span={12}>
              <Form.Item label="黑名单">
                {getFieldDecorator('blacklist', {
                  initialValue: wrap.blacklist || []
@@ -150,7 +272,7 @@
                  </Select>
                )}
              </Form.Item>
            </Col> : null}
            </Col>
          </Row>
        </Form>
      </div>