| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, Icon, notification, InputNumber, Select } from 'antd' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, Icon, notification, Select, InputNumber } from 'antd' |
| | | |
| | | import { formRule } from '@/utils/option.js' |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | <div className="model-datasource-setting-form-box"> |
| | | <Form {...formItemLayout} className="model-setting-form"> |
| | | <Row gutter={24}> |
| | | <Col span={8}> |
| | | <Form.Item label="标题"> |
| | | {getFieldDecorator('title', { |
| | | initialValue: setting.title |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="用于组件间的区分。"> |
| | | <Icon type="question-circle" /> |
| | | 组件名称 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('name', { |
| | | initialValue: setting.name, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '组件名称!' |
| | | } |
| | | ] |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="栅格布局,每行等分24份。"> |
| | | <Icon type="question-circle" /> |
| | | 宽度 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('span', { |
| | | initialValue: setting.span || 12, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '宽度!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={1} max={24} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | |
| | | <Col span={8}> |
| | | <Form.Item label="表名"> |
| | | {getFieldDecorator('tableName', { |
| | |
| | | })(<CodeMirror />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="高度为空时,使用系统自适应设置。"> |
| | | <Icon type="question-circle" /> |
| | | 高度 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('height', { |
| | | initialValue: setting.height || 400 |
| | | })(<InputNumber min={150} max={1500} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> |
| | | {interType === 'system' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'查询时,搜索条件以where条件拼接进入sql,统计时,将数据源中以“@+搜索字段+@”的内容,以搜索条件中的值进行替换后,提交查询,注:查询类型仅在使用系统函数时有效。'}> |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {config.pageable ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="选择分页时有效。"> |
| | | <Icon type="question-circle" /> |
| | | 每页数量 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('pageSize', { |
| | | initialValue: setting.pageSize || 10, |
| | | rules: [ |
| | | { |
| | | required: true, |
| | | message: this.props.dict['form.required.input'] + '每页数量!' |
| | | } |
| | | ] |
| | | })(<InputNumber min={1} max={500} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title={'使用主搜索条件(存在时),主搜索条件与组件的搜索条件会一同用作数据过滤(组件的搜索条件优先)。'}> |