king
2021-09-01 31ec63f0419895876cbaba99637a884a32d33d0d
src/menu/components/tabs/tabsetting/settingform/index.jsx
@@ -8,12 +8,28 @@
  static propTpyes = {
    dict: PropTypes.object,       // 字典项
    setting: PropTypes.object,    // 数据源配置
    inputSubmit: PropTypes.func   // 回车事件
  }
  state = {}
  state = {
    appType: sessionStorage.getItem('appType'),
    position: this.props.setting.position,
    roleList: []
  }
  UNSAFE_componentWillMount () {
    let roleList = sessionStorage.getItem('sysRoles')
    if (roleList) {
      try {
        roleList = JSON.parse(roleList)
      } catch (e) {
        roleList = []
      }
    } else {
      roleList = []
    }
    this.setState({roleList})
  }
  handleConfirm = () => {
@@ -29,10 +45,18 @@
    })
  }
  handleSubmit = (e) => {
    e.preventDefault()
    if (this.props.inputSubmit) {
      this.props.inputSubmit()
    }
  }
  render() {
    const { setting } = this.props
    const { getFieldDecorator } = this.props.form
    const { roleList, appType, position } = this.state
    const formItemLayout = {
      labelCol: {
@@ -64,7 +88,7 @@
                      message: this.props.dict['form.required.input'] + '组件名称!'
                    }
                  ]
                })(<Input placeholder={''} autoComplete="off" />)}
                })(<Input placeholder={''} autoComplete="off" onPressEnter={this.handleSubmit}/>)}
              </Form.Item>
            </Col>
            <Col span={12}>
@@ -82,7 +106,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}>
@@ -90,7 +114,7 @@
                {getFieldDecorator('position', {
                  initialValue: setting.position || 'top'
                })(
                  <Select>
                  <Select onChange={(val) => this.setState({position: val})}>
                    <Select.Option key="top" value="top"> top </Select.Option>
                    <Select.Option key="bottom" value="bottom"> bottom </Select.Option>
                    <Select.Option key="left" value="left"> left </Select.Option>
@@ -99,7 +123,7 @@
                )}
              </Form.Item>
            </Col>
            <Col span={12}>
            {appType !== 'mob' ? <Col span={12}>
              <Form.Item label={
                <Tooltip placement="topLeft" title="标签位置为top时有效,默认值为line。">
                  <Icon type="question-circle" />
@@ -115,6 +139,35 @@
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            {appType === 'mob' && (position === 'top' || position === 'bottom') ? <Col span={12}>
              <Form.Item label="标签显示">
                {getFieldDecorator('display', {
                  initialValue: setting.display || 'flex'
                })(
                  <Radio.Group>
                    <Radio value="flex">弹性布局</Radio>
                    <Radio value="inline-block">定宽</Radio>
                  </Radio.Group>
                )}
              </Form.Item>
            </Col> : null}
            <Col span={12}>
              <Form.Item label="黑名单">
                {getFieldDecorator('blacklist', {
                  initialValue: setting.blacklist || []
                })(
                  <Select
                    showSearch
                    mode="multiple"
                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                  >
                    {roleList.map(option =>
                      <Select.Option key={option.uuid} value={option.value}>{option.text}</Select.Option>
                    )}
                  </Select>
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>