import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Input, Radio } from 'antd'
|
|
import FileUpload from '@/tabviews/zshare/fileupload'
|
import './index.scss'
|
|
const { TextArea } = Input
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
card: PropTypes.object,
|
inputSubmit: PropTypes.func // 回车事件
|
}
|
|
state = {
|
linkurl: '',
|
plusType: 'upload'
|
}
|
|
handleConfirm = () => {
|
const { card } = this.props
|
// 表单提交时检查输入值是否正确
|
return new Promise((resolve, reject) => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
if (values.urls) {
|
values.linkurl = values.urls
|
} else if (card.typecharone === 'color' && /^[0-9a-f]{6}$/.test(values.linkurl)) {
|
values.linkurl = '#' + values.linkurl
|
}
|
resolve(values)
|
} else {
|
reject(err)
|
}
|
})
|
})
|
}
|
|
changeType = (val) => {
|
let _url = ''
|
|
if (val === 'input') {
|
_url = this.props.form.getFieldValue('urls') || ''
|
}
|
|
this.setState({plusType: val, linkurl: _url})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { card } = this.props
|
const { linkurl, plusType } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 5 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 18 }
|
}
|
}
|
return (
|
<Form {...formItemLayout} className="picture-edit-model-form">
|
<Row gutter={24}>
|
{!card.id && card.typecharone !== 'color' ? <Col span={24}>
|
<Form.Item label="添加方式">
|
<Radio.Group value={plusType} onChange={(e) => {this.changeType(e.target.value)}} disabled={false}>
|
<Radio value="upload">上传</Radio>
|
<Radio value="input">地址输入</Radio>
|
</Radio.Group>
|
</Form.Item>
|
</Col> : null}
|
{!card.id && card.typecharone === 'image' && plusType === 'upload' ? <Col span={24}>
|
<Form.Item label="图片上传">
|
{getFieldDecorator('urls', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请上传图片!'
|
}
|
]
|
})(
|
<FileUpload config={{
|
initval: '',
|
suffix: '.jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp,.ico',
|
maxfile: 1,
|
fileType: 'picture'
|
}} />
|
)}
|
</Form.Item>
|
</Col> : null}
|
{!card.id && card.typecharone === 'video' && plusType === 'upload' ? <Col span={24}>
|
<Form.Item label="视频上传">
|
{getFieldDecorator('urls', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请上传视频!'
|
}
|
]
|
})(
|
<FileUpload config={{
|
initval: '',
|
suffix: '.mp4,.webm,.ogg',
|
maxfile: 1,
|
fileType: 'text'
|
}}/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{!card.id && card.typecharone !== 'color' && plusType === 'input' ? <Col span={24}>
|
<Form.Item label="地址">
|
{getFieldDecorator('linkurl', {
|
initialValue: linkurl,
|
rules: [
|
{
|
required: true,
|
message: '请添加地址信息!'
|
},
|
{
|
max: 1024,
|
message: '地址最多1024个字符!'
|
}
|
]
|
})(<TextArea autoSize={{ minRows: 3 }} onPressEnter={() => this.props.inputSubmit()}/>)}
|
</Form.Item>
|
</Col> : null}
|
{card.id && card.typecharone !== 'color' ? <Col span={24}>
|
<Form.Item label="地址">
|
<TextArea value={card.linkurl} readOnly={true} autoSize={{ minRows: 3 }} />
|
</Form.Item>
|
</Col> : null}
|
{card.typecharone === 'color' ? <Col span={24}>
|
<Form.Item label="色值">
|
{getFieldDecorator('linkurl', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请填写色值!'
|
},
|
{
|
max: 100,
|
message: '色值最多100个字符!'
|
}
|
]
|
})(<Input onPressEnter={() => this.props.inputSubmit()}/>)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={24}>
|
<Form.Item label="备注">
|
{getFieldDecorator('remark', {
|
initialValue: card.remark || '',
|
rules: [
|
{
|
max: 50,
|
message: '备注最多50个字符!'
|
}
|
]
|
})(<TextArea autoSize={{ minRows: 4 }} onPressEnter={() => this.props.inputSubmit()}/>)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
