import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Radio, Input } from 'antd'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const FileUpload = asyncComponent(() => import('@/tabviews/zshare/fileupload'))
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
type: PropTypes.any, // 编辑类型
|
card: PropTypes.any, // 编辑应用
|
inputSubmit: PropTypes.func // input回车提交
|
}
|
|
state = {}
|
|
/**
|
* @description 获取表单值
|
*/
|
handleConfirm = () => {
|
return new Promise(resolve => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
if (values.favicon && values.favicon.length > 0 && values.favicon[0].status === 'done') {
|
values.favicon = values.favicon[0].response || values.favicon[0].url || ''
|
} else {
|
values.favicon = ''
|
}
|
resolve(values)
|
}
|
})
|
})
|
}
|
|
/**
|
* @description 回车提交
|
*/
|
handleSubmit = (e) => {
|
e.preventDefault()
|
this.props.inputSubmit()
|
}
|
|
render() {
|
const { card, type } = this.props
|
const { getFieldDecorator } = this.props.form
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
let filelist = []
|
|
if (type === 'edit' && card && card.favicon) {
|
filelist = [{
|
uid: `favicon`,
|
name: card.favicon.slice(card.favicon.lastIndexOf('/') + 1),
|
status: 'done',
|
url: card.favicon,
|
origin: true
|
}]
|
}
|
|
return (
|
<Form {...formItemLayout} className="mob-card-edit-form">
|
<Row gutter={24}>
|
<Col span={12}>
|
<Form.Item label="应用类型">
|
{getFieldDecorator('typename', {
|
initialValue: card ? card.typename : 'mob'
|
})(
|
<Select disabled={type === 'edit'}>
|
<Select.Option value="mob">移动端(包括android、ios)</Select.Option>
|
<Select.Option value="pc">PC端</Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="语言">
|
{getFieldDecorator('lang', {
|
initialValue: card ? card.lang || 'zh-CN' : 'zh-CN'
|
})(
|
<Radio.Group disabled={type === 'edit'}>
|
<Radio value="zh-CN">中文</Radio>
|
<Radio value="en-US">英文</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="登录">
|
{getFieldDecorator('login_types', {
|
initialValue: card ? card.login_types || 'true' : 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">需要</Radio>
|
<Radio value="false">不需要</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="权限管理">
|
{getFieldDecorator('role_type', {
|
initialValue: card ? card.role_type || 'true' : 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">启用</Radio>
|
<Radio value="false">不启用</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="短连接">
|
{getFieldDecorator('link_type', {
|
initialValue: card ? card.link_type || 'true' : 'true'
|
})(
|
<Radio.Group>
|
<Radio value="true">启用</Radio>
|
<Radio value="false">不启用</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="皮肤">
|
{getFieldDecorator('css', {
|
initialValue: card ? card.css : 'bg_black_style_blue'
|
})(
|
<Select>
|
<Select.Option value="bg_black_style_blue">蓝黑色系</Select.Option>
|
<Select.Option value="bg_white_style_blue">蓝白色系</Select.Option>
|
<Select.Option value="bg_black_style_red">红黑色系</Select.Option>
|
<Select.Option value="bg_white_style_red">红白色系</Select.Option>
|
<Select.Option value="bg_black_style_orange_red">橙红黑色系</Select.Option>
|
<Select.Option value="bg_white_style_orange_red">橙红白色系</Select.Option>
|
<Select.Option value="bg_black_style_orange">橙黑色系</Select.Option>
|
<Select.Option value="bg_white_style_orange">橙白色系</Select.Option>
|
<Select.Option value="bg_black_style_orange_yellow">橙黄黑色系</Select.Option>
|
<Select.Option value="bg_white_style_orange_yellow">橙黄白色系</Select.Option>
|
<Select.Option value="bg_black_style_yellow">黄黑色系</Select.Option>
|
<Select.Option value="bg_white_style_yellow">黄白色系</Select.Option>
|
<Select.Option value="bg_black_style_yellow_green">黄绿黑色系</Select.Option>
|
<Select.Option value="bg_white_style_yellow_green">黄绿白色系</Select.Option>
|
<Select.Option value="bg_black_style_green">绿黑色系</Select.Option>
|
<Select.Option value="bg_white_style_green">绿白色系</Select.Option>
|
<Select.Option value="bg_black_style_cyan">青黑色系</Select.Option>
|
<Select.Option value="bg_white_style_cyan">青白色系</Select.Option>
|
<Select.Option value="bg_black_style_blue_purple">蓝紫黑色系</Select.Option>
|
<Select.Option value="bg_white_style_blue_purple">蓝紫白色系</Select.Option>
|
<Select.Option value="bg_black_style_purple">紫黑色系</Select.Option>
|
<Select.Option value="bg_white_style_purple">紫白色系</Select.Option>
|
<Select.Option value="bg_black_style_magenta">洋红黑色系</Select.Option>
|
<Select.Option value="bg_white_style_magenta">洋红白色系</Select.Option>
|
<Select.Option value="bg_black_style_grass_green">草绿黑色系</Select.Option>
|
<Select.Option value="bg_white_style_grass_green">草绿白色系</Select.Option>
|
<Select.Option value="bg_black_style_deep_red">深红黑色系</Select.Option>
|
<Select.Option value="bg_white_style_deep_red">深红白色系</Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="标题">
|
{getFieldDecorator('title', {
|
initialValue: card ? card.title || '' : ''
|
})(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
|
</Form.Item>
|
</Col>
|
<Col span={12}>
|
<Form.Item label="图标">
|
{getFieldDecorator('favicon', {
|
initialValue: filelist
|
})(<FileUpload accept=".jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp,.ico" maxFile={1} fileType={'text'} />)}
|
</Form.Item>
|
</Col>
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
