import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Input, Radio, Tooltip, notification, InputNumber } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
import { checkSQL } from '@/utils/utils-custom.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const CodeMirror = asyncComponent(() => import('@/templates/zshare/codemirror'))
|
|
class SettingForm extends Component {
|
static propTpyes = {
|
btnType: PropTypes.any,
|
setting: PropTypes.object, // 数据源配置
|
}
|
|
state = {
|
dataType: '',
|
defaultSql: 'true',
|
excelHandle: 'false'
|
}
|
|
UNSAFE_componentWillMount () {
|
const { setting, btnType } = this.props
|
|
this.setState({
|
dataType: btnType === 'print' ? 'custom' : setting.dataType,
|
defaultSql: setting.defaultSql || 'true',
|
excelHandle: setting.excelHandle || 'false'
|
})
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
// 数据源前端验证
|
if (values.defaultSql === 'true' && !values.dataresource) {
|
notification.warning({
|
top: 92,
|
message: '请填写数据源！',
|
duration: 5
|
})
|
reject()
|
return
|
} else if (values.defaultSql === 'true' && values.dataresource) {
|
let pass = checkSQL(values.dataresource)
|
|
if (!pass) {
|
reject()
|
return
|
}
|
}
|
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
updateDataType = (e) => {
|
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, btnType } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { dataType, defaultSql, excelHandle } = this.state
|
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<div className="excelout-datasource-wrap">
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
{btnType !== 'print' ? <Col span={8}>
|
<Form.Item label="导出数据">
|
{getFieldDecorator('dataType', {
|
initialValue: setting.dataType
|
})(
|
<Radio.Group onChange={this.updateDataType}>
|
<Radio value="default">默认</Radio>
|
<Radio value="custom">自定义</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{dataType === 'custom' ? <Col className="short-label" span={8}>
|
<Form.Item label="表名">
|
{getFieldDecorator('tableName', {
|
initialValue: setting.tableName || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入表名!'
|
},
|
{
|
max: 50,
|
message: '表名最长为50个字符!'
|
}
|
]
|
})(<Input placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{dataType === 'custom' ? <Col span={8}>
|
<Form.Item label="默认sql">
|
{getFieldDecorator('defaultSql', {
|
initialValue: setting.defaultSql || 'true'
|
})(
|
<Radio.Group onChange={(e) => this.setState({defaultSql: e.target.value})}>
|
<Radio value="true">执行</Radio>
|
<Radio value="false">不执行</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
{dataType === 'custom' && defaultSql === 'true' ? <Col span={24} className="data-source" style={{paddingLeft: '7px'}}>
|
<Form.Item labelCol={{xs: { span: 24 }, sm: { span: 4 }}} wrapperCol={ {xs: { span: 24 }, sm: { span: 20 }} } label={
|
<Tooltip placement="topLeft" title={`注：数据权限替换符 $@ -> /* 或 ''、 @$ -> */ 或 ''。`}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
数据源
|
</Tooltip>
|
}>
|
{getFieldDecorator('dataresource', {
|
initialValue: setting.dataresource || '',
|
rules: [
|
{
|
required: true,
|
message: '请填写数据源!'
|
}
|
]
|
})(<CodeMirror />)}
|
</Form.Item>
|
</Col> : null}
|
{dataType === 'custom' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title={'查询时，搜索条件以where条件拼接进入sql，统计时，将数据源中以“@+搜索字段+@”的内容，以搜索条件中的值进行替换后，提交查询，注：查询类型仅在使用系统函数时有效。'}>
|
<QuestionCircleOutlined className="mk-form-tip" />
|
查询类型
|
</Tooltip>
|
}>
|
{getFieldDecorator('queryType', {
|
initialValue: setting.queryType || 'query'
|
})(
|
<Radio.Group>
|
<Radio value="query">查询</Radio>
|
<Radio value="statistics">统计</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
{btnType !== 'print' && dataType === 'custom' && defaultSql === 'true' ? <Col className="short-label" span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="可自定义主键，空时默认为数据源主键。注：选行导出时使用。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
主键
|
</Tooltip>
|
}>
|
{getFieldDecorator('primaryKey', {
|
initialValue: setting.primaryKey || '',
|
})(<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="如果在自定义脚本中使用了@pageSize@或@orderBy@，请在数据源中单独写排序语句。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
排序方式
|
</Tooltip>
|
}>
|
{getFieldDecorator('order', {
|
initialValue: setting.order || '',
|
rules: [
|
{
|
required: true,
|
message: '请填写排序方式!'
|
}
|
]
|
})(<Input placeholder={'ID asc, UID desc'} autoComplete="off" />)}
|
</Form.Item>
|
</Col> : null}
|
{dataType === 'custom' && btnType !== 'print' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="不使用搜索条件时，不会进行搜索条件的拼接与相关统计字段的替换。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
搜索条件
|
</Tooltip>
|
}>
|
{getFieldDecorator('useSearch', {
|
initialValue: setting.useSearch || 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">使用</Radio>
|
<Radio value="false">不使用</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
{btnType !== 'print' ? <Col span={8}>
|
<Form.Item label={
|
<Tooltip placement="topRight" title="自定义生成Excel，可用参数为 XLSX、data、columns、searches、callback。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
导出格式
|
</Tooltip>
|
}>
|
{getFieldDecorator('excelHandle', {
|
initialValue: excelHandle
|
})(
|
<Radio.Group onChange={(e) => this.setState({excelHandle: e.target.value})}>
|
<Radio value="false">默认</Radio>
|
<Radio value="true">自定义</Radio>
|
</Radio.Group>)}
|
</Form.Item>
|
</Col> : null}
|
{btnType !== 'print' && excelHandle === 'true' ? <Col span={24} style={{paddingLeft: '30px'}}>
|
<Form.Item wrapperCol={ {xs: { span: 24 }, sm: { span: 24 }} } label="">
|
{getFieldDecorator('excel_func', {
|
initialValue: setting.excel_func || '',
|
rules: [
|
{
|
required: true,
|
message: '请填写自定义逻辑!'
|
}
|
]
|
})(<CodeMirror mode="text/javascript" theme="cobalt" />)}
|
</Form.Item>
|
</Col> : null}
|
{btnType !== 'print' && excelHandle !== 'true' ? <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' && excelHandle !== 'true' ? <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' && excelHandle !== 'true' ? <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' && excelHandle !== 'true' ? <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>
|
)
|
}
|
}
|
|
export default Form.create()(SettingForm)
|
