From 5b66fe77e55767eabbf1df66a026157356dd807d Mon Sep 17 00:00:00 2001 From: king <18310653075@163.com> Date: 星期六, 07 一月 2023 17:28:28 +0800 Subject: [PATCH] 2023-01-07 --- src/views/appmanage/submutilform/index.jsx | 304 ++++++++++++++++++++++++++++++++------------------ 1 files changed, 196 insertions(+), 108 deletions(-) diff --git a/src/views/appmanage/submutilform/index.jsx b/src/views/appmanage/submutilform/index.jsx index c374caf..9c4cb9c 100644 --- a/src/views/appmanage/submutilform/index.jsx +++ b/src/views/appmanage/submutilform/index.jsx @@ -1,10 +1,12 @@ import React, {Component} from 'react' import PropTypes from 'prop-types' -import { Form, Row, Col, Select, Radio, Input, Tooltip, Icon, notification, InputNumber } from 'antd' +import { Form, Row, Col, Select, Radio, Input, Tooltip, InputNumber, Checkbox } from 'antd' +import { QuestionCircleOutlined } from '@ant-design/icons' 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 { @@ -14,20 +16,29 @@ inputSubmit: PropTypes.func // input鍥炶溅鎻愪氦 } - state = {msgs: [], typename: 'mob', user_binding: []} + state = {typename: 'mob', adapters: [], exts: []} UNSAFE_componentWillMount() { const { card } = this.props - let msgs = sessionStorage.getItem('msgTemplate') - let user_binding = [] + let adapters = [] + let exts = [] 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 (typename !== 'pc') { + if (card.user_binding === 'true') { + exts.push('user_binding') + } + if (card.share === 'true') { + exts.push('share') + } + } } - this.setState({msgs: JSON.parse(msgs), typename, user_binding}) + this.setState({typename, adapters, exts}) } /** @@ -37,19 +48,25 @@ return new Promise(resolve => { this.props.form.validateFieldsAndScroll((err, values) => { if (!err) { - 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 + 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 } + resolve(values) } }) }) + } + + onAdapterChange = (vals) => { + if (!vals.includes('weixin') && !vals.includes('wxmini')) { + this.setState({exts: []}) + } + this.setState({adapters: vals}) } /** @@ -63,7 +80,7 @@ render() { const { card, type } = this.props const { getFieldDecorator } = this.props.form - const { msgs, typename, user_binding } = this.state + const { typename, adapters, exts } = this.state const formItemLayout = { labelCol: { xs: { span: 24 }, @@ -84,7 +101,7 @@ initialValue: typename })( <Select disabled={type === 'edit'} onChange={(val) => this.setState({typename: val})}> - <Select.Option value="mob">绉诲姩绔�(鍖呮嫭android銆乮os)</Select.Option> + <Select.Option value="mob">绉诲姩绔�</Select.Option> <Select.Option value="pad">Pad绔�</Select.Option> <Select.Option value="pc">PC绔�</Select.Option> </Select> @@ -103,22 +120,10 @@ )} </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' + initialValue: card ? card.role_type || 'false' : 'false' })( <Radio.Group> <Radio value="true">鍚敤</Radio> @@ -127,72 +132,128 @@ )} </Form.Item> </Col> - {typename !== 'pc' ? <Col span={12}> - <Form.Item label={ - <Tooltip placement="topLeft" title="浣跨敤寰俊鎺堟潈鐧诲綍鏃讹紝鏄惁闇�瑕佺粦瀹氱敤鎴枫��"> - <Icon type="question-circle" /> - 鐢ㄦ埛缁戝畾 - </Tooltip> - }> - {getFieldDecorator('user_binding', { - initialValue: user_binding - })( - <Select mode="multiple"> - <Select.Option value="uname_pwd">鐢ㄦ埛鍚�</Select.Option> - <Select.Option value="sms_vcode">鎵嬫満鍙�</Select.Option> - </Select> - )} - </Form.Item> - </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_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.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} + {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="鏍囬"> + <Form.Item label={ + exts.includes('share') ? + <Tooltip placement="topLeft" title="瀛愬簲鐢ㄥ強鍒嗕韩鏃剁殑鏍囬銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> + 鏍囬 + </Tooltip> : '鏍囬' + }> {getFieldDecorator('title', { - initialValue: card ? card.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', { @@ -202,31 +263,10 @@ )} </Form.Item> </Col> - <Col span={12}> + {typename !== 'pc' && adapters.includes('app') ? <Col span={12}> <Form.Item label={ - <Tooltip placement="topLeft" title="浣跨敤寰俊鎺堟潈鐧诲綍鏃讹紝缁戝畾鐢ㄦ埛椤甸潰鐨勭増鏉冨0鏄庯紝娉細鍙坊鍔爃tml鏍囩銆�"> - <Icon type="question-circle" /> - 鐗堟潈 - </Tooltip> - }> - {getFieldDecorator('copyright', { - initialValue: card ? card.copyright || '' : '' - })(<Input placeholder="" autoComplete="off" onPressEnter={this.handleSubmit} />)} - </Form.Item> - </Col> - <Col span={12}> - <Form.Item label="LOGO"> - {getFieldDecorator('logo', { - initialValue: card ? card.logo : '' - })( - <SourceComponent type="picture" placement="right"/> - )} - </Form.Item> - </Col> - {typename !== 'pc' ? <Col span={12}> - <Form.Item label={ - <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄦ槑绉戜簯APP鏃讹紝椤甸潰鐨勫垏鎹㈡ā寮�"> - <Icon type="question-circle" /> + <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄦ槑绉戜簯APP鏃讹紝椤甸潰鐨勫垏鎹㈡ā寮忋�傛敞锛氳嫻鏋淎PP鏆備笉鏀寔H5妯″紡銆�"> + <QuestionCircleOutlined className="mk-form-tip" /> 搴旂敤妯″紡 </Tooltip> }> @@ -242,16 +282,64 @@ </Col> : null} {typename !== 'pc' ? <Col span={12}> <Form.Item label={ - <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄦ槑绉戜簯APP鏃讹紝涓斿湪app妯″紡涓棤鏁�"> - <Icon type="question-circle" /> - 寤惰繜鍔犺浇 + <Tooltip placement="topLeft" title="鍦ㄤ娇鐢ㄥ皬绋嬪簭鎴栨槑绉戜簯APP鏃讹紙app妯″紡涓級鏃犳晥"> + <QuestionCircleOutlined className="mk-form-tip" /> + 寤惰繜鍔犺浇(ms) </Tooltip> }> {getFieldDecorator('delay', { - initialValue: card ? card.delay || 0 : 0 + 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} + <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> ) -- Gitblit v1.8.0