| | |
| | | import React, {Component} from 'react' |
| | | import PropTypes from 'prop-types' |
| | | import { Form, Row, Col, Select, Radio, Input } from 'antd' |
| | | import { Form, Row, Col, Select, Radio, Input, Tooltip, Icon, notification } from 'antd' |
| | | |
| | | import asyncComponent from '@/utils/asyncComponent' |
| | | import './index.scss' |
| | |
| | | inputSubmit: PropTypes.func // input回车提交 |
| | | } |
| | | |
| | | state = {} |
| | | state = {msgs: [], typename: 'mob', user_binding: []} |
| | | |
| | | UNSAFE_componentWillMount() { |
| | | const { card } = this.props |
| | | let msgs = sessionStorage.getItem('msgTemplate') |
| | | let user_binding = [] |
| | | let typename = 'mob' |
| | | |
| | | if (card) { |
| | | typename = card.typename || 'mob' |
| | | user_binding = card.user_binding ? card.user_binding.split(',') : [] |
| | | } |
| | | |
| | | this.setState({msgs: JSON.parse(msgs), typename, user_binding}) |
| | | } |
| | | |
| | | /** |
| | | * @description 获取表单值 |
| | |
| | | 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 = '' |
| | | values.user_binding = values.user_binding ? values.user_binding.join(',') : '' |
| | | if (values.user_binding.indexOf('sms_vcode') > -1 && !values.sms_id) { |
| | | notification.warning({ |
| | | top: 92, |
| | | message: '手机号绑定时,需要短信模板!', |
| | | duration: 5 |
| | | }) |
| | | return |
| | | } |
| | | resolve(values) |
| | | } |
| | |
| | | render() { |
| | | const { card, type } = this.props |
| | | const { getFieldDecorator } = this.props.form |
| | | const { msgs, typename, user_binding } = this.state |
| | | const formItemLayout = { |
| | | labelCol: { |
| | | xs: { span: 24 }, |
| | |
| | | } |
| | | } |
| | | |
| | | let filelist = [] |
| | | let file = '' |
| | | |
| | | if (type === 'edit' && card && card.favicon) { |
| | | filelist = [{ |
| | | uid: `favicon`, |
| | | name: card.favicon.slice(card.favicon.lastIndexOf('/') + 1), |
| | | status: 'done', |
| | | url: card.favicon, |
| | | origin: true |
| | | }] |
| | | file = card.favicon |
| | | } |
| | | |
| | | return ( |
| | | <Form {...formItemLayout} className="mob-card-edit-form"> |
| | | <Form {...formItemLayout} className="sub-app-edit-form"> |
| | | <Row gutter={24}> |
| | | <Col span={12}> |
| | | <Form.Item label="应用类型"> |
| | | {getFieldDecorator('typename', { |
| | | initialValue: card ? card.typename : 'mob' |
| | | initialValue: typename |
| | | })( |
| | | <Select disabled={type === 'edit'}> |
| | | <Select disabled={type === 'edit'} onChange={(val) => this.setState({typename: val})}> |
| | | <Select.Option value="mob">移动端(包括android、ios)</Select.Option> |
| | | <Select.Option value="pad">Pad端</Select.Option> |
| | | <Select.Option value="pc">PC端</Select.Option> |
| | | </Select> |
| | | )} |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | {/* <Col span={12}> |
| | | <Form.Item label="登录"> |
| | | {getFieldDecorator('login_types', { |
| | | initialValue: card ? card.login_types || 'true' : 'true' |
| | |
| | | </Radio.Group> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | </Col> */} |
| | | <Col span={12}> |
| | | <Form.Item label="权限管理"> |
| | | {getFieldDecorator('role_type', { |
| | |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | <Col span={12}> |
| | | <Form.Item label="短连接"> |
| | | {getFieldDecorator('link_type', { |
| | | initialValue: card ? card.link_type || 'true' : 'true' |
| | | {typename !== 'pc' ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="使用微信授权登录时,是否需要绑定用户。"> |
| | | <Icon type="question-circle" /> |
| | | 用户绑定 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('user_binding', { |
| | | initialValue: user_binding |
| | | })( |
| | | <Radio.Group> |
| | | <Radio value="true">启用</Radio> |
| | | <Radio value="false">不启用</Radio> |
| | | </Radio.Group> |
| | | <Select mode="multiple"> |
| | | <Select.Option value="uname_pwd">用户名</Select.Option> |
| | | <Select.Option value="sms_vcode">手机号</Select.Option> |
| | | </Select> |
| | | )} |
| | | </Form.Item> |
| | | </Col> |
| | | </Col> : null} |
| | | {typename !== 'pc' ? <Col span={12}> |
| | | <Form.Item label={ |
| | | <Tooltip placement="topLeft" title="短信模板可在管理系统 HS-奇云短信模板 处添加。"> |
| | | <Icon type="question-circle" /> |
| | | 短信模板 |
| | | </Tooltip> |
| | | }> |
| | | {getFieldDecorator('sms_id', { |
| | | initialValue: card ? card.sms_id || '' : '' |
| | | })( |
| | | <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('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.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 span={12}> |
| | | <Form.Item label="图标"> |
| | | {getFieldDecorator('favicon', { |
| | | initialValue: filelist |
| | | })(<FileUpload accept=".jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp,.ico" maxFile={1} fileType={'text'} />)} |
| | | initialValue: file |
| | | })(<FileUpload config={{ |
| | | initval: file, |
| | | suffix: '.jpg,.png,.gif,.pjp,.pjpeg,.jpeg,.jfif,.webp,.ico', |
| | | maxfile: 1, |
| | | fileType: 'text' |
| | | }}/>)} |
| | | </Form.Item> |
| | | </Col> |
| | | </Row> |