|
@@ -0,0 +1,176 @@
|
|
|
|
+import { App, Button, Card, Form, Input, Modal, Radio, Select } from "antd";
|
|
|
|
+import React, { useRef } from "react";
|
|
|
|
+import '../../../../../businessPlan/create/global.less'
|
|
|
|
+import SendTimeSet from "@/pages/weComTask/components/sendTimeSet";
|
|
|
|
+import { MinusCircleOutlined, PlusOutlined, DeleteOutlined } from "@ant-design/icons";
|
|
|
|
+import FilterUser from "@/pages/weComTask/components/filterUser";
|
|
|
|
+import { DefaultOptionType } from "antd/es/select";
|
|
|
|
+
|
|
|
|
+interface Props extends GROUP_CHAT_CREATE.FoundationProps<any> {
|
|
|
|
+ mpList: DefaultOptionType[]
|
|
|
|
+}
|
|
|
|
+/**
|
|
|
|
+ * 官方 群聊群发策略配置
|
|
|
|
+ * @param param0
|
|
|
|
+ * @returns
|
|
|
|
+ */
|
|
|
|
+const SettingsStrategy: React.FC<Props> = ({ visible, onClose, value, onChange, mpList }) => {
|
|
|
|
+
|
|
|
|
+ /************************************/
|
|
|
|
+ const { message } = App.useApp()
|
|
|
|
+ const [form] = Form.useForm();
|
|
|
|
+ const ref1 = useRef<HTMLDivElement>(null)
|
|
|
|
+ const strategyList = Form.useWatch('strategyList', form)
|
|
|
|
+ /************************************/
|
|
|
|
+
|
|
|
|
+ const handleOk = () => {
|
|
|
|
+ form.validateFields().then((values) => {
|
|
|
|
+
|
|
|
|
+ }).catch(() => {
|
|
|
|
+ form.submit()
|
|
|
|
+ });
|
|
|
|
+ };
|
|
|
|
+
|
|
|
|
+ return <Modal
|
|
|
|
+ title={<strong>群聊群发策略配置 <span style={{ color: 'red' }}>对于执行时间冲突的策略,按照策略的排序执行</span></strong>}
|
|
|
|
+ open={visible}
|
|
|
|
+ onCancel={onClose}
|
|
|
|
+ width={850}
|
|
|
|
+ onOk={handleOk}
|
|
|
|
+ className={`settingsModal`}
|
|
|
|
+ >
|
|
|
|
+ <div className={`body_steps`}>
|
|
|
|
+
|
|
|
|
+ </div>
|
|
|
|
+ <div className={`body_content`} ref={ref1}>
|
|
|
|
+ <Form
|
|
|
|
+ form={form}
|
|
|
|
+ name="newGroupChatSendStrategy"
|
|
|
|
+ labelAlign='left'
|
|
|
|
+ labelCol={{ span: 5 }}
|
|
|
|
+ colon={false}
|
|
|
|
+ scrollToFirstError={{
|
|
|
|
+ behavior: 'smooth',
|
|
|
|
+ block: 'center'
|
|
|
|
+ }}
|
|
|
|
+ onFinishFailed={({ errorFields }) => {
|
|
|
|
+ message.error(errorFields?.[0]?.errors?.[0])
|
|
|
|
+ }}
|
|
|
|
+ onFinish={handleOk}
|
|
|
|
+ initialValues={{
|
|
|
|
+ strategyList: [{ id: Date.now(), sendData: [{ externalUserType: 'all', id: Date.now() }] }]
|
|
|
|
+ }}
|
|
|
|
+ onFieldsChange={() => {
|
|
|
|
+ // filedUpdateChange(form.getFieldsValue())
|
|
|
|
+ }}
|
|
|
|
+ preserve={true}
|
|
|
|
+ >
|
|
|
|
+ <Card title={<strong>基础信息配置</strong>} style={{ background: '#fff', marginBottom: 10 }} id='basicInfo'>
|
|
|
|
+ <Form.Item label={<strong>任务名称</strong>} name="taskName" rules={[{ required: true, message: '请输入任务名称!' }]}>
|
|
|
|
+ <Input placeholder="请输入任务名称" style={{ width: 358 }} allowClear />
|
|
|
|
+ </Form.Item>
|
|
|
|
+ </Card>
|
|
|
|
+
|
|
|
|
+ <Form.List name="strategyList">
|
|
|
|
+ {(fields, { add, remove }) => (
|
|
|
|
+ <>
|
|
|
|
+ {fields.map(({ key, name, ...restField }, index) => {
|
|
|
|
+ const timeRepeatType = strategyList?.[index]?.timeRepeatType
|
|
|
|
+ const sendData = strategyList?.[index]?.sendData
|
|
|
|
+
|
|
|
|
+ return <Card
|
|
|
|
+ key={key}
|
|
|
|
+ title={<strong>策略{index + 1} 配置</strong>}
|
|
|
|
+ style={{ background: '#fff', marginBottom: 10 }}
|
|
|
|
+ extra={strategyList?.length > 1 && <div style={{ color: 'red', cursor: 'pointer' }} onClick={() => remove(name)}>
|
|
|
|
+ <MinusCircleOutlined />
|
|
|
|
+ </div>}
|
|
|
|
+ id={`strategy_${index + 1}`}
|
|
|
|
+ >
|
|
|
|
+ <Form.Item
|
|
|
|
+ {...restField}
|
|
|
|
+ name={[name, 'strategyName']}
|
|
|
|
+ label={<strong>策略名称</strong>}
|
|
|
|
+ rules={[{ required: true, message: '请输入策略名称!' }]}
|
|
|
|
+ >
|
|
|
|
+ <Input placeholder='请输入策略名称' allowClear style={{ width: 358 }} />
|
|
|
|
+ </Form.Item>
|
|
|
|
+ <SendTimeSet active='all' form={form} restField={restField} name={name} timeRepeatType={timeRepeatType} />
|
|
|
|
+ <Form.List name={[name, 'sendData']}>
|
|
|
|
+ {(fields, { add, remove }) => (
|
|
|
|
+ <>
|
|
|
|
+ {fields.map(({ key, name, ...restField }, i) => {
|
|
|
|
+ return <Card
|
|
|
|
+ key={i}
|
|
|
|
+ title={<strong>策略{index + 1} 发送群对象{i + 1} 配置</strong>}
|
|
|
|
+ style={{ background: '#fff', marginBottom: 10 }}
|
|
|
|
+ extra={sendData?.length > 1 ? <Button icon={<DeleteOutlined />} type='link' style={{ color: 'red' }} onClick={() => remove(name)}></Button> : null}
|
|
|
|
+ id={`strategy_${index}_${i}_sendData`}
|
|
|
|
+ >
|
|
|
|
+ <Form.Item
|
|
|
|
+ {...restField}
|
|
|
|
+ label={<strong>群聊关联公众号</strong>}
|
|
|
|
+ name={[name, 'weChatAppid']}
|
|
|
|
+ >
|
|
|
|
+ <Select
|
|
|
|
+ showSearch
|
|
|
|
+ allowClear
|
|
|
|
+ placeholder="选择公众号"
|
|
|
|
+ filterOption={(input, option) =>
|
|
|
|
+ (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
|
+ }
|
|
|
|
+ style={{ width: 358 }}
|
|
|
|
+ options={mpList}
|
|
|
|
+ />
|
|
|
|
+ </Form.Item>
|
|
|
|
+ <Form.Item
|
|
|
|
+ label={<strong>发送群对象配置</strong>}
|
|
|
|
+ required
|
|
|
|
+ >
|
|
|
|
+ <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>
|
|
|
|
+ <Form.Item
|
|
|
|
+ {...restField}
|
|
|
|
+ name={[name, 'externalUserType']}
|
|
|
|
+ rules={[{ required: true, message: '请选择转移对象!' }]}
|
|
|
|
+ noStyle
|
|
|
|
+ >
|
|
|
|
+ <Radio.Group options={[{ label: '全部', value: 'all' }, { label: '指定', value: 'specify' }]} />
|
|
|
|
+ </Form.Item>
|
|
|
|
+ {sendData?.[i]?.externalUserType === 'specify' && <div style={{ marginTop: 8, width: '100%' }}>
|
|
|
|
+ <Form.Item
|
|
|
|
+ {...restField}
|
|
|
|
+ name={[name, 'externalUserFilter']}
|
|
|
|
+ rules={[{ required: true, message: '请选择人群包!' }]}
|
|
|
|
+ noStyle
|
|
|
|
+ >
|
|
|
|
+ <FilterUser configType={'GROUP_GROUP'} />
|
|
|
|
+ </Form.Item>
|
|
|
|
+ </div>}
|
|
|
|
+ </div>
|
|
|
|
+ </Form.Item>
|
|
|
|
+ </Card>
|
|
|
|
+ })}
|
|
|
|
+ <Form.Item>
|
|
|
|
+ <Button type="dashed" onClick={() => add({ externalUserType: 'all', id: Date.now() })} block icon={<PlusOutlined />}>
|
|
|
|
+ 新增发送群对象
|
|
|
|
+ </Button>
|
|
|
|
+ </Form.Item>
|
|
|
|
+ </>
|
|
|
|
+ )}
|
|
|
|
+ </Form.List>
|
|
|
|
+ </Card>
|
|
|
|
+ })}
|
|
|
|
+ <Form.Item>
|
|
|
|
+ <Button type="primary" onClick={() => add({ id: Date.now() })} block icon={<PlusOutlined />}>
|
|
|
|
+ 新增策略
|
|
|
|
+ </Button>
|
|
|
|
+ </Form.Item>
|
|
|
|
+ </>
|
|
|
|
+ )}
|
|
|
|
+ </Form.List>
|
|
|
|
+ </Form>
|
|
|
|
+ </div>
|
|
|
|
+ </Modal>
|
|
|
|
+}
|
|
|
|
+
|
|
|
|
+export default React.memo(SettingsStrategy);
|