import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Checkbox, Tooltip, Radio } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
// import './index.scss'
|
|
class MainTab extends Component {
|
static propTpyes = {
|
config: PropTypes.object, // 页面配置
|
calendar: PropTypes.any // 日历配置信息
|
}
|
|
handleConfirm = () => {
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { calendar, config } = this.props
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 10 }
|
}
|
}
|
return (
|
<Form {...formItemLayout}>
|
<Row gutter={24}>
|
<Col span={24}>
|
<Form.Item label="开始时间">
|
{getFieldDecorator('startfield', {
|
initialValue: calendar.startfield,
|
rules: [
|
{
|
required: true,
|
message: '请选择开始时间!'
|
}
|
]
|
})(
|
<Select>
|
{config.columns.map(option =>
|
<Select.Option key={option.uuid} value={option.field}>{option.label}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="结束时间">
|
{getFieldDecorator('endfield', {
|
initialValue: calendar.endfield,
|
rules: [
|
{
|
required: true,
|
message: '请选择结束时间!'
|
}
|
]
|
})(
|
<Select>
|
{config.columns.map(option =>
|
<Select.Option key={option.uuid} value={option.field}>{option.label}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="信息字段">
|
{getFieldDecorator('remarkfield', {
|
initialValue: calendar.remarkfield,
|
rules: [
|
{
|
required: true,
|
message: '请选择信息字段!'
|
}
|
]
|
})(
|
<Select>
|
{config.columns.map(option =>
|
<Select.Option key={option.uuid} value={option.field}>{option.label}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="颜色字段">
|
{getFieldDecorator('colorfield', {
|
initialValue: calendar.colorfield,
|
rules: [
|
{
|
required: false,
|
message: '请选择颜色字段!'
|
}
|
]
|
})(
|
<Select>
|
{config.columns.map(option =>
|
<Select.Option key={option.uuid} value={option.field}>{option.label}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label="日历等级">
|
{getFieldDecorator('levels', {
|
initialValue: calendar.levels,
|
rules: [
|
{
|
required: true,
|
message: '请选择日历等级!'
|
}
|
]
|
})(
|
<Checkbox.Group options={[{ value: 'day', label: '日' }, { value: 'month', label: '月' }, { value: 'year', label: '年' }]}/>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={24}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="开启后，使用系统函数时会自动替换数据源及自定义脚本中的calendarDate与calendarDate1，其值分别为选择年份的开始和结束时间，使用自定义函数时，会增加calendarDate传参，其值为选择年份。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
数据刷新
|
</Tooltip>
|
}>
|
{getFieldDecorator('refresh', {
|
initialValue: calendar.refresh || 'false',
|
})(
|
<Radio.Group>
|
<Radio key="true" value="true">开启</Radio>
|
<Radio key="false" value="false">关闭</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainTab)
|
