11import React , { useState , useEffect } from 'react' ;
2- import { Modal , Input , Select , message as Message , Form } from 'antd' ;
2+ import { Modal , Input , Select , message as Message , Form , Radio , Switch } from 'antd' ;
33import ChooseSendTime from '../ChooseSendTime' ;
44import { SUBSCRIPTIONSENDTYPE } from '../../consts' ;
55import { isFunction } from 'lodash' ;
@@ -19,19 +19,24 @@ const SubscriptionModal = (props: any) => {
1919 useEffect ( ( ) => {
2020 visible && form . resetFields ( )
2121 if ( visible && data ) {
22- const { groupName = '' , webHook = '' , remark = '' , topicIds = [ ] , siteNames = '' , sendType = SUBSCRIPTIONSENDTYPE . WORKDAY , time = '' } = data
23- setSiteNames ( siteNames )
22+ const { groupName = '' , webHook = '' , remark = '' , topicIds = [ ] , siteNames = '' , sendType = SUBSCRIPTIONSENDTYPE . WORKDAY , time = '' , messageTitle = '' , message = '' , isAtAll = false } = data ;
23+ const radio = siteNames === '自定义消息' && ! ! message ? 'custom-message' : 'article-subscription' ;
24+ setSiteNames ( siteNames ) ;
2425 form . setFieldsValue ( {
2526 groupName,
2627 webHook,
28+ radio,
29+ messageTitle,
30+ message,
31+ isAtAll,
2732 remark,
2833 topicIds,
2934 sendTime : {
3035 sendType,
3136 time
3237 }
33- } )
34- form . validateFields ( )
38+ } ) ;
39+ form . validateFields ( ) ;
3540 }
3641 } , [ visible ] )
3742
@@ -75,6 +80,8 @@ const SubscriptionModal = (props: any) => {
7580 cron = `0 ${ minute } ${ hour } ? * MON-FRI`
7681 } else if ( type === SUBSCRIPTIONSENDTYPE . EVERYDAY ) {
7782 cron = `0 ${ minute } ${ hour } ? * *`
83+ } else if ( type === SUBSCRIPTIONSENDTYPE . FRIDAY ) {
84+ cron = `0 ${ minute } ${ hour } ? * FRI`
7885 }
7986 return cron
8087 }
@@ -83,6 +90,11 @@ const SubscriptionModal = (props: any) => {
8390 isFunction ( onCancel ) && onCancel ( )
8491 }
8592
93+ const handleRadioChange = ( e ) => {
94+ if ( e ?. target ?. value === 'custom-message' ) {
95+ setSiteNames ( '自定义消息' )
96+ }
97+ }
8698 const handleTopicChange = ( value , option ) => {
8799 setSiteNames ( Array . from ( new Set ( option . map ( item => item . children . split ( ' - ' ) [ 0 ] ) ) ) . join ( '、' ) )
88100 }
@@ -103,7 +115,7 @@ const SubscriptionModal = (props: any) => {
103115 { max : 64 , message : '长度不超过64个字符' }
104116 ] }
105117 >
106- < Input placeholder = "请输入钉钉群名称" />
118+ < Input placeholder = "请输入钉钉群名称" maxLength = { 64 } />
107119 </ FormItem >
108120 < FormItem
109121 label = "webHook"
@@ -116,40 +128,88 @@ const SubscriptionModal = (props: any) => {
116128 < Input placeholder = "请输入webHook" />
117129 </ FormItem >
118130 < FormItem
119- label = "订阅项"
120- name = "topicIds"
121- rules = { [
122- { required : true , message : '请选择订阅项,最多三个' } ,
123- {
124- validator : ( rule , value = [ ] , callback ) => {
125- if ( value ?. length > 3 ) {
126- callback ( '最多选择三个订阅项' )
127- }
128- callback ( )
129- }
130- }
131- ] }
131+ label = "订阅类型"
132+ name = "radio"
133+ required
134+ initialValue = "article-subscription"
132135 >
133- < Select
134- showSearch
135- mode = "multiple"
136- onChange = { handleTopicChange }
137- placeholder = "请选择订阅项,最多三个"
138- >
139- {
140- topicList . map ( site => {
136+ < Radio . Group onChange = { handleRadioChange } >
137+ < Radio value = "article-subscription" > 文章订阅</ Radio >
138+ < Radio value = "custom-message" > 自定义消息</ Radio >
139+ </ Radio . Group >
140+ </ FormItem >
141+ < FormItem noStyle dependencies = { [ 'radio' ] } >
142+ { ( { getFieldValue } ) => {
143+ const radio = getFieldValue ( 'radio' ) ;
144+ if ( radio === 'article-subscription' ) {
141145 return (
142- < OptGroup key = { site . name } label = { site . name } >
143- {
144- site ?. children ?. map ( item => {
145- return < Option key = { item . id } value = { item . id } > { item . name } </ Option >
146- } )
147- }
148- </ OptGroup >
149- )
150- } )
151- }
152- </ Select >
146+ < FormItem
147+ label = "订阅项"
148+ name = "topicIds"
149+ rules = { [
150+ { required : true , message : '请选择订阅项,最多三个' } ,
151+ {
152+ validator : ( rule , value = [ ] , callback ) => {
153+ if ( value ?. length > 3 ) {
154+ callback ( '最多选择三个订阅项' )
155+ }
156+ callback ( )
157+ }
158+ }
159+ ] }
160+ >
161+ < Select
162+ showSearch
163+ mode = "multiple"
164+ onChange = { handleTopicChange }
165+ placeholder = "请选择订阅项,最多三个"
166+ >
167+ {
168+ topicList . map ( site => {
169+ return (
170+ < OptGroup key = { site . name } label = { site . name } >
171+ {
172+ site ?. children ?. map ( item => {
173+ return < Option key = { item . id } value = { item . id } > { item . name } </ Option >
174+ } )
175+ }
176+ </ OptGroup >
177+ )
178+ } )
179+ }
180+ </ Select >
181+ </ FormItem >
182+ ) ;
183+ } else if ( radio === 'custom-message' ) {
184+ return (
185+ < >
186+ < FormItem
187+ label = "消息标题"
188+ name = "messageTitle"
189+ rules = { [
190+ { required : true , message : '请输入消息标题' } ,
191+ { max : 64 , message : '长度不超过64个字符' }
192+ ] }
193+ initialValue = "定时提醒"
194+ >
195+ < Input placeholder = "请输入消息标题" maxLength = { 64 } />
196+ </ FormItem >
197+ < FormItem
198+ label = "消息内容"
199+ name = "message"
200+ rules = { [
201+ { required : true , message : '请输入消息内容' } ,
202+ { max : 2000 , message : '长度不超过2000个字符' }
203+ ] }
204+ >
205+ < TextArea placeholder = "请输入消息内容" rows = { 5 } maxLength = { 2000 } />
206+ </ FormItem >
207+ </ >
208+ ) ;
209+ } else {
210+ return null ;
211+ }
212+ } }
153213 </ FormItem >
154214 < FormItem
155215 label = "推送时间"
@@ -158,6 +218,9 @@ const SubscriptionModal = (props: any) => {
158218 >
159219 < ChooseSendTime />
160220 </ FormItem >
221+ < Form . Item label = "@所有人" name = "isAtAll" valuePropName = "checked" >
222+ < Switch />
223+ </ Form . Item >
161224 < FormItem
162225 label = "备注"
163226 name = "remark"
0 commit comments