import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Radio, Input, Tooltip, notification, InputNumber, Checkbox } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const SourceComponent = asyncComponent(() => import('@/menu/components/share/sourcecomponent'))
|
|
class MainSearch extends Component {
|
static propTpyes = {
|
type: PropTypes.any, // 编辑类型
|
card: PropTypes.any, // 编辑应用
|
inputSubmit: PropTypes.func // input回车提交
|
}
|
|
state = {msgs: [], typename: 'mob', user_binding: [], adapters: []}
|
|
UNSAFE_componentWillMount() {
|
const { card } = this.props
|
let msgs = sessionStorage.getItem('msgTemplate')
|
let user_binding = []
|
let adapters = []
|
let typename = 'mob'
|
|
if (card) {
|
typename = card.typename || 'mob'
|
user_binding = card.user_binding ? card.user_binding.split(',') : []
|
adapters = card.adapter ? card.adapter.split(',') : []
|
|
if (!adapters.includes('weixin') && !adapters.includes('wxmini')) {
|
user_binding = []
|
}
|
}
|
|
this.setState({msgs: JSON.parse(msgs), typename, user_binding, adapters})
|
}
|
|
/**
|
* @description 获取表单值
|
*/
|
handleConfirm = () => {
|
return new Promise(resolve => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.user_binding = values.user_binding ? values.user_binding.join(',') : ''
|
values.adapter = values.adapter ? values.adapter.join(',') : ''
|
if (values.user_binding.indexOf('sms_vcode') > -1 && !values.sms_id) {
|
notification.warning({
|
top: 92,
|
message: '手机号绑定时，需要短信模板！',
|
duration: 5
|
})
|
return
|
}
|
resolve(values)
|
}
|
})
|
})
|
}
|
|
onChange = (vals) => {
|
this.setState({user_binding: vals})
|
}
|
|
onAdapterChange = (vals) => {
|
this.setState({adapters: vals})
|
if (!vals.includes('weixin') && !vals.includes('wxmini')) {
|
this.setState({user_binding: []})
|
}
|
}
|
|
/**
|
* @description 回车提交
|
*/
|
handleSubmit = (e) => {
|
e.preventDefault()
|
this.props.inputSubmit()
|
}
|
|
render() {
|
const { card, type } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { msgs, typename, user_binding, adapters } = this.state
|
const formItemLayout = {
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 16 }
|
}
|
}
|
|
return (
|
<Form {...formItemLayout} className="sub-app-edit-form">
|
<Row gutter={24}>
|
<Col span={12}>
|
<Form.Item label="应用类型">
|
{getFieldDecorator('typename', {
|
initialValue: typename
|
})(
|
<Select disabled={type === 'edit'} onChange={(val) => this.setState({typename: val})}>
|
<Select.Option value="mob">移动端</Select.Option>
|
<Select.Option value="pad">Pad端</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('role_type', {
|
initialValue: card ? card.role_type || 'false' : 'false'
|
})(
|
<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_black_style_red">红色</Select.Option>
|
<Select.Option value="bg_black_style_orange_red">橙红色</Select.Option>
|
<Select.Option value="bg_black_style_orange">橙色</Select.Option>
|
<Select.Option value="bg_black_style_orange_yellow">橙黄色</Select.Option>
|
<Select.Option value="bg_black_style_yellow">黄色</Select.Option>
|
<Select.Option value="bg_black_style_yellow_green">黄绿色</Select.Option>
|
<Select.Option value="bg_black_style_green">绿色</Select.Option>
|
<Select.Option value="bg_black_style_cyan">青色</Select.Option>
|
<Select.Option value="bg_black_style_blue_purple">蓝紫色</Select.Option>
|
<Select.Option value="bg_black_style_purple">紫色</Select.Option>
|
<Select.Option value="bg_black_style_magenta">洋红色</Select.Option>
|
<Select.Option value="bg_black_style_grass_green">草绿色</Select.Option>
|
<Select.Option value="bg_black_style_deep_red">深红色</Select.Option>
|
</Select>
|
)}
|
</Form.Item>
|
</Col>
|
{typename !== 'pc' ? <Col span={12}>
|
<Form.Item label="适配">
|
{getFieldDecorator('adapter', {
|
initialValue: adapters
|
})(
|
<Checkbox.Group onChange={this.onAdapterChange}>
|
<Checkbox value="app">app</Checkbox>
|
<Checkbox value="weixin">公众号</Checkbox>
|
<Checkbox value="wxmini">小程序</Checkbox>
|
</Checkbox.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{typename !== 'pc' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={12}>
|
<Form.Item label="用户绑定">
|
{getFieldDecorator('user_binding', {
|
initialValue: user_binding
|
})(
|
<Checkbox.Group onChange={this.onChange}>
|
<Checkbox value="uname_pwd">账号</Checkbox>
|
<Checkbox value="sms_vcode">手机短信</Checkbox>
|
</Checkbox.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{typename !== 'pc' && user_binding.includes('sms_vcode') ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="短信模板可在管理系统 HS-奇云短信模板 处添加。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
短信模板
|
</Tooltip>
|
}>
|
{getFieldDecorator('sms_id', {
|
initialValue: card ? card.sms_id || '' : '',
|
rules: [{
|
required: true,
|
message: '使用手机短信时请选择短信模板!'
|
}]
|
})(
|
<Select allowClear>
|
{msgs.map(option =>
|
<Select.Option key={option.ID} value={option.ID}>{option.SignName + ' - ' + option.TemplateCode}</Select.Option>
|
)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<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: card ? card.favicon : ''
|
})(
|
<SourceComponent type="picture" placement="right"/>
|
)}
|
</Form.Item>
|
</Col>
|
{typename !== 'pc' && user_binding.length > 0 ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="使用微信授权登录时，绑定用户页面的版权声明，注：可添加html标签。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
版权
|
</Tooltip>
|
}>
|
{getFieldDecorator('copyright', {
|
initialValue: card ? card.copyright || '' : ''
|
})(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
|
</Form.Item>
|
</Col> : null}
|
{typename !== 'pc' && user_binding.length > 0 ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="使用微信授权登录时，绑定用户页面的LOGO。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
LOGO
|
</Tooltip>
|
}>
|
{getFieldDecorator('logo', {
|
initialValue: card ? card.logo : ''
|
})(
|
<SourceComponent type="picture" placement="right"/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{typename !== 'pc' && adapters.includes('app') ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="在使用明科云APP时，页面的切换模式">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
应用模式
|
</Tooltip>
|
}>
|
{getFieldDecorator('apptype', {
|
initialValue: card ? card.apptype || 'H5' : 'H5'
|
})(
|
<Radio.Group>
|
<Radio value="H5">H5</Radio>
|
<Radio value="app">app</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{typename !== 'pc' ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="在使用小程序或明科云APP时（app模式中）无效">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
延迟加载(ms)
|
</Tooltip>
|
}>
|
{getFieldDecorator('delay', {
|
initialValue: card ? card.delay || 0 : 0
|
})(<InputNumber min={0} max={5000} precision={0} onPressEnter={this.handleSubmit}/>)}
|
</Form.Item>
|
</Col> : null}
|
{typename !== 'pc' && adapters.includes('app') ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="在使用明科云APP时，状态栏的字体颜色。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
状态栏
|
</Tooltip>
|
}>
|
{getFieldDecorator('statusBarColor', {
|
initialValue: card ? card.statusBarColor || 'black' : 'black'
|
})(
|
<Radio.Group>
|
<Radio value="black">黑色</Radio>
|
<Radio value="white">白色</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
