| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, notification } from 'antd' |
| | | import { Form, Row, Col, Input, Radio, Tooltip, notification, InputNumber } from 'antd' |
| | | import { QuestionCircleOutlined } from '@ant-design/icons' |
| | | |
| | | import Utils from '@/utils/utils.js' |
| | |
| | | |
| | | class SettingForm extends Component { |
| | | static propTpyes = { |
| | | btnType: PropTypes.any, |
| | | setting: PropTypes.object, // 数据源配置 |
| | | } |
| | | |
| | |
| | | } |
| | | |
| | | UNSAFE_componentWillMount () { |
| | | const { setting } = this.props |
| | | const { setting, btnType } = this.props |
| | | |
| | | this.setState({ |
| | | dataType: setting.dataType, |
| | | dataType: btnType === 'print' ? 'custom' : setting.dataType, |
| | | defaultSql: setting.defaultSql || 'true' |
| | | }) |
| | | } |
| | |
| | | }) |
| | | reject() |
| | | return |
| | | } else if (/,,/ig.test(values.dataresource)) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '数据源中,不可出现连续的英文逗号(,,)', |
| | | duration: 5 |
| | | }) |
| | | reject() |
| | | return |
| | | } |
| | | |
| | | let error = Utils.verifySql(values.dataresource) |
| | |
| | | } |
| | | |
| | | updateDataType = (e) => { |
| | | this.setState({dataType: e.target.value}) |
| | | this.props.updateDataType(e.target.value) |
| | | |
| | | if (e.target.value === 'custom') { |
| | | setTimeout(() => { |
| | | this.setState({ |
| | | dataType: e.target.value, |
| | | defaultSql: this.props.setting.defaultSql || 'true' |
| | | }) |
| | | }, 10) |
| | | } else { |
| | | this.setState({dataType: e.target.value}) |
| | | } |
| | | } |
| | | |
| | | render() { |
| | | const { setting } = this.props |
| | | const { setting, btnType } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { dataType, defaultSql } = this.state |
| | | |
| | |
| | | <div className="excelout-datasource-wrap"> |
| | | <Form {...formItemLayout}> |
| | | <Row gutter={24}> |
| | | <Col span={8}> |
| | | {btnType !== 'print' ? <Col span={8}> |
| | | <Form.Item label="导出数据"> |
| | | {getFieldDecorator('dataType', { |
| | | initialValue: setting.dataType |
| | |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | </Col> : null} |
| | | {dataType === 'custom' ? <Col className="short-label" span={8}> |
| | | <Form.Item label="表名"> |
| | | {getFieldDecorator('tableName', { |
| | |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {/* {dataType === 'custom' && defaultSql === 'true' ? <Col className="short-label" span={8}> |
| | | <Form.Item label="主键"> |
| | | {getFieldDecorator('primaryKey', { |
| | | initialValue: setting.primaryKey || 'ID', |
| | | })(<Input placeholder={''} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> : null} */} |
| | | {dataType === 'custom' && defaultSql === 'true' ? <Col className="short-label" span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="排序方式为空时,使用表格或组件中的排序方式。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 排序方式 |
| | | </Tooltip> |
| | | }> |
| | | <Form.Item label="排序方式"> |
| | | {getFieldDecorator('order', { |
| | | initialValue: setting.order || '', |
| | | rules: [ |
| | |
| | | })(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {dataType === 'custom' ? <Col span={8}> |
| | | {dataType === 'custom' && btnType !== 'print' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="不使用搜索条件时,不会进行搜索条件的拼接与相关统计字段的替换。注:自定义数据来源时,只使用内部搜索。"> |
| | | <Tooltip placement="topLeft" title="不使用搜索条件时,不会进行搜索条件的拼接与相关统计字段的替换。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 搜索条件 |
| | | </Tooltip> |
| | |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {btnType !== 'print' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="导出excel中工作表名称,默认为Sheet1。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 工作表 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('sheet', { |
| | | initialValue: setting.sheet || '' |
| | | })(<Input placeholder="" autoComplete="off" />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {btnType !== 'print' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="导出excel中的行高。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 行高 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('rowHeight', { |
| | | initialValue: setting.rowHeight || '' |
| | | })(<InputNumber min={10} max={200} precision={0} />)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {btnType !== 'print' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="请将需要合并的表头使用中横线分隔(如:商品-数量、商品-单价),前部分将作为主表头,后部分将作为子表头。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 表头合并 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('merge', { |
| | | initialValue: setting.merge || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="false">否</Radio> |
| | | <Radio value="true">是</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | {btnType !== 'print' ? <Col span={8}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="Excel内容区是否自动换行。"> |
| | | <QuestionCircleOutlined className="mk-form-tip" /> |
| | | 自动换行 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('wrapText', { |
| | | initialValue: setting.wrapText || 'false' |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="false">否</Radio> |
| | | <Radio value="true">是</Radio> |
| | | </Radio.Group>)} |
| | | </Form.Item> |
| | | </Col> : null} |
| | | </Row> |
| | | </Form> |
| | | </div> |