import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { Form, Row, Col, Select, Radio, Input, Tooltip, InputNumber, Checkbox } from 'antd'
|
import { QuestionCircleOutlined } from '@ant-design/icons'
|
|
import { langs } from '@/store/options.js'
|
import asyncComponent from '@/utils/asyncComponent'
|
import './index.scss'
|
|
const ColorSketch = asyncComponent(() => import('@/mob/colorsketch'))
|
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 = {
|
typename: 'mob',
|
adapters: [],
|
exts: [],
|
WXApps: null
|
}
|
|
UNSAFE_componentWillMount() {
|
const { card } = this.props
|
let adapters = []
|
let exts = []
|
let typename = 'mob'
|
let _langs = []
|
Object.keys(langs).forEach(key => {
|
_langs.push({value: key, label: langs[key]})
|
})
|
|
if (card) {
|
typename = card.typename || 'mob'
|
adapters = card.adapter ? card.adapter.split(',') : []
|
|
if (typename !== 'pc') {
|
if (card.user_binding === 'true') {
|
exts.push('user_binding')
|
}
|
if (card.share === 'true') {
|
exts.push('share')
|
}
|
}
|
}
|
|
let apps = null
|
if (window.GLOB.WXApps) {
|
apps = window.GLOB.WXApps.filter(app => app.appType === 'public')
|
|
if (apps.length === 0) {
|
apps = null
|
}
|
}
|
|
this.setState({typename, adapters, exts, langs: _langs, WXApps: apps})
|
}
|
|
/**
|
* @description 获取表单值
|
*/
|
handleConfirm = () => {
|
return new Promise(resolve => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (!err) {
|
values.adapter = values.adapter ? values.adapter.join(',') : ''
|
|
if (values.exts) {
|
values.user_binding = values.exts.includes('user_binding') ? 'true' : 'false'
|
values.share = values.exts.includes('share') ? 'true' : 'false'
|
delete values.exts
|
}
|
if (values.wxAppId) {
|
let app = window.GLOB.WXApps.filter(app => app.appType === 'public' && values.wxAppId === app.appId)[0]
|
values.wxAppName = app ? app.appName : values.wxAppId
|
}
|
|
resolve(values)
|
}
|
})
|
})
|
}
|
|
onAdapterChange = (vals) => {
|
if (!vals.includes('weixin') && !vals.includes('wxmini')) {
|
this.setState({exts: []})
|
}
|
this.setState({adapters: vals})
|
}
|
|
/**
|
* @description 回车提交
|
*/
|
handleSubmit = (e) => {
|
e.preventDefault()
|
this.props.inputSubmit()
|
}
|
|
render() {
|
const { card, type } = this.props
|
const { getFieldDecorator } = this.props.form
|
const { typename, adapters, exts, langs, WXApps } = 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'
|
})(
|
<Select disabled={type === 'edit'}>
|
{langs.map(item => <Select.Option key={item.value} value={item.value}>{item.label}</Select.Option>)}
|
</Select>
|
)}
|
</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"><span className="color-block" style={{background: '#1890ff'}}></span>蓝色（#1890ff）</Select.Option>
|
<Select.Option value="bg_black_style_red"><span className="color-block" style={{background: '#f5222d'}}></span>红色（#f5222d）</Select.Option>
|
<Select.Option value="bg_black_style_orange_red"><span className="color-block" style={{background: '#fa541c'}}></span>橙红色（#fa541c）</Select.Option>
|
<Select.Option value="bg_black_style_orange"><span className="color-block" style={{background: '#fa8c16'}}></span>橙色（#fa8c16）</Select.Option>
|
<Select.Option value="bg_black_style_orange_yellow"><span className="color-block" style={{background: '#faad14'}}></span>橙黄色（#faad14）</Select.Option>
|
<Select.Option value="bg_black_style_yellow"><span className="color-block" style={{background: '#fadb14'}}></span>黄色（#fadb14）</Select.Option>
|
<Select.Option value="bg_black_style_yellow_green"><span className="color-block" style={{background: '#a0d911'}}></span>黄绿色（#a0d911）</Select.Option>
|
<Select.Option value="bg_black_style_green"><span className="color-block" style={{background: '#52c41a'}}></span>绿色（#52c41a）</Select.Option>
|
<Select.Option value="bg_black_style_cyan"><span className="color-block" style={{background: '#13c2c2'}}></span>青色（#13c2c2）</Select.Option>
|
<Select.Option value="bg_black_style_blue_purple"><span className="color-block" style={{background: '#2f54eb'}}></span>蓝紫色（#2f54eb）</Select.Option>
|
<Select.Option value="bg_black_style_purple"><span className="color-block" style={{background: '#722ed1'}}></span>紫色（#722ed1）</Select.Option>
|
<Select.Option value="bg_black_style_magenta"><span className="color-block" style={{background: '#eb2f96'}}></span>洋红色（#eb2f96）</Select.Option>
|
<Select.Option value="bg_black_style_grass_green"><span className="color-block" style={{background: '#aeb303'}}></span>草绿色（#aeb303）</Select.Option>
|
<Select.Option value="bg_black_style_deep_red"><span className="color-block" style={{background: '#c32539'}}></span>深红色（#c32539）</Select.Option>
|
<Select.Option value="bg_black_style_deep_blue"><span className="color-block" style={{background: '#1d3661'}}></span>深蓝色（#1d3661）</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}
|
{WXApps ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="用户可通过此公众号进行支付及退款。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
关联公众号
|
</Tooltip>
|
}>
|
{getFieldDecorator('wxAppId', {
|
initialValue: card ? card.wxAppId : ''
|
})(
|
<Select allowClear>
|
{WXApps.map(item => <Select.Option key={item.appId} value={item.appId}>{item.appName}</Select.Option>)}
|
</Select>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{typename !== 'pc' && (adapters.includes('weixin') || adapters.includes('wxmini')) ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="在公众号或小程序中，可添加绑定系统用户、自定义分享等功能，自定义分享设置后，当前子应用将默认使用此分享链接。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
扩展功能
|
</Tooltip>
|
}>
|
{getFieldDecorator('exts', {
|
initialValue: exts
|
})(
|
<Checkbox.Group onChange={(vals) => this.setState({exts: vals})}>
|
<Checkbox value="user_binding">用户绑定</Checkbox>
|
<Checkbox value="share">分享</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: card ? card.user_binding : 'false'
|
})(
|
<Radio.Group>
|
<Radio value="true">需要</Radio>
|
<Radio value="false">不需要</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null} */}
|
<Col span={12}>
|
<Form.Item label={
|
exts.includes('share') ?
|
<Tooltip placement="topLeft" title="子应用及分享时的标题。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
标题
|
</Tooltip> : '标题'
|
}>
|
{getFieldDecorator('title', {
|
initialValue: card ? card.title || '' : '',
|
rules: exts.includes('share') ? [{
|
required: true,
|
message: '请填写标题!'
|
}] : []
|
})(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
|
</Form.Item>
|
</Col>
|
{exts.includes('share') ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="分享时的描述信息。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
分享描述
|
</Tooltip>
|
}>
|
{getFieldDecorator('share_des', {
|
initialValue: card ? card.share_des || '' : ''
|
})(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)}
|
</Form.Item>
|
</Col> : null}
|
{exts.includes('share') ? <Col span={12}>
|
<Form.Item label="分享图片">
|
{getFieldDecorator('share_url', {
|
initialValue: card ? card.share_url : ''
|
})(
|
<SourceComponent type="picture" placement="right"/>
|
)}
|
</Form.Item>
|
</Col> : null}
|
{exts.includes('share') ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="分享的链接为用户浏览的页面地址或当前应用的入口地址。注：可在页面中自定义设置。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
分享链接
|
</Tooltip>
|
}>
|
{getFieldDecorator('share_link', {
|
initialValue: card ? card.share_link || 'main' : 'main'
|
})(
|
<Radio.Group>
|
<Radio value="main">应用入口</Radio>
|
<Radio value="view">页面链接</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={12}>
|
<Form.Item label="网站头像">
|
{getFieldDecorator('favicon', {
|
initialValue: card ? card.favicon : ''
|
})(
|
<SourceComponent type="picture" placement="right"/>
|
)}
|
</Form.Item>
|
</Col>
|
{typename !== 'pc' && adapters.includes('app') ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="在使用明科云APP时，页面的切换模式。注：苹果APP暂不支持H5模式。">
|
<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 : 200
|
})(<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}
|
{typename === 'pad' && adapters.includes('app') ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="在明科云APP中，状态栏的最大高度，空值时使用APP获取到的状态栏高度。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
状态栏高度
|
</Tooltip>
|
}>
|
{getFieldDecorator('topHeight', {
|
initialValue: card ? card.topHeight || '' : ''
|
})(<InputNumber min={0} max={5000} precision={0} onPressEnter={this.handleSubmit}/>)}
|
</Form.Item>
|
</Col> : null}
|
<Col span={12}>
|
<Form.Item className="sys-bgcolor" label={
|
<Tooltip placement="topLeft" title="子应用通用的背景色，子应用页面创建时会默认添加此背景色。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
背景色
|
</Tooltip>
|
}>
|
{getFieldDecorator('sysBgColor', {
|
initialValue: card ? card.sysBgColor || '#ffffff' : '#ffffff'
|
})(
|
<ColorSketch/>
|
)}
|
</Form.Item>
|
</Col>
|
{typename === 'pad' ? <Col span={12}>
|
<Form.Item label={
|
<Tooltip placement="topLeft" title="系统默认屏幕方向，单个页面方向请在页面中配置。">
|
<QuestionCircleOutlined className="mk-form-tip" />
|
屏幕方向
|
</Tooltip>
|
}>
|
{getFieldDecorator('direction', {
|
initialValue: card ? card.direction || 'vertical' : 'vertical'
|
})(
|
<Radio.Group>
|
<Radio value="vertical">竖屏</Radio>
|
<Radio value="horizontal">横屏</Radio>
|
</Radio.Group>
|
)}
|
</Form.Item>
|
</Col> : null}
|
</Row>
|
</Form>
|
)
|
}
|
}
|
|
export default Form.create()(MainSearch)
|
