|
|
@@ -1,34 +1,31 @@
|
|
|
-import { App, Button, Card, Form, Input, InputNumber, Modal, Popover, Radio, Select, Space } from "antd";
|
|
|
-import React, { useEffect, useState } from "react";
|
|
|
+import { App, Card, Form, Modal, Popover, Space } from "antd";
|
|
|
+import React, { useContext, useEffect, useRef, useState } from "react";
|
|
|
import '../../../../businessPlan/create/global.less'
|
|
|
-import { PlusOutlined, MinusCircleOutlined, QuestionCircleFilled, RightOutlined, DownOutlined, VerticalLeftOutlined } from '@ant-design/icons';
|
|
|
+import { QuestionCircleFilled, RightOutlined, DownOutlined } from '@ant-design/icons';
|
|
|
import PreviewTime from "@/pages/weComTask/components/previewTime";
|
|
|
-import FilterUser from "@/pages/weComTask/components/filterUser";
|
|
|
import { getAllWxListApi } from "@/pages/weComTask/API/corpUserAssign";
|
|
|
import { useAjax } from "@/Hook/useAjax";
|
|
|
-import MindTags from "@/pages/weComTask/components/mindTags";
|
|
|
-
|
|
|
-interface Props extends GROUP_CHAT_CREATE.FoundationProps<any> {
|
|
|
- strategyDTO: { [x: string]: any }
|
|
|
-}
|
|
|
-
|
|
|
-// 默认进群对象
|
|
|
-const defaultGroupObject = { externalUserType: 'all', groupIndex: 1, groupUserCount: 37, autoOutGroup: false, excludeInGroup: true, deleteGroupTag: true }
|
|
|
+import AddGroupObject from "./addGroupObject";
|
|
|
+import { DispatchGroupChatCreate } from "../..";
|
|
|
+import NewSteps from "@/pages/weComTask/components/newSteps";
|
|
|
|
|
|
/**
|
|
|
* 群聊创建进群对象配置
|
|
|
* @param param0
|
|
|
* @returns
|
|
|
*/
|
|
|
-const SettingsGroupUser: React.FC<Props> = ({ strategyDTO, visible, onClose, value, onChange }) => {
|
|
|
+const SettingsGroupUser: React.FC<GROUP_CHAT_CREATE.FoundationProps<any>> = ({ visible, onClose, value, onChange }) => {
|
|
|
|
|
|
|
|
|
/***************************************/
|
|
|
+ const { bookPlatForm, bookList } = useContext(DispatchGroupChatCreate)!;
|
|
|
+ const ref1 = useRef<HTMLDivElement>(null)
|
|
|
+
|
|
|
const { message } = App.useApp();
|
|
|
const [form] = Form.useForm();
|
|
|
const strategyList = Form.useWatch('strategyList', form)
|
|
|
const [activeKey, setActiveKey] = useState<number[]>([])
|
|
|
- const [groupObjectActiveKey, setGroupObjectActiveKey] = useState<string[]>([])
|
|
|
+ const [stepsList, setStepsList] = useState<any>([])
|
|
|
|
|
|
const getAccountList = useAjax(() => getAllWxListApi())
|
|
|
/***************************************/
|
|
|
@@ -38,37 +35,53 @@ const SettingsGroupUser: React.FC<Props> = ({ strategyDTO, visible, onClose, val
|
|
|
}, [])
|
|
|
|
|
|
useEffect(() => {
|
|
|
+ const strategyList = value?.strategyList?.map(item => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ groupObjectList: item?.groupObjectList || []
|
|
|
+ }
|
|
|
+ })
|
|
|
form.setFieldsValue({
|
|
|
- strategyList: strategyDTO?.strategyList?.map(item => {
|
|
|
- return {
|
|
|
- ...item,
|
|
|
- groupObjectList: item?.groupObjectList || [defaultGroupObject]
|
|
|
- }
|
|
|
- })
|
|
|
+ strategyList
|
|
|
})
|
|
|
- }, [strategyDTO])
|
|
|
+ filedUpdateChange({ strategyList })
|
|
|
+ }, [value])
|
|
|
|
|
|
const handleOk = () => {
|
|
|
form.validateFields().then((values) => {
|
|
|
console.log(values)
|
|
|
- // onChange(data)
|
|
|
+ onChange?.(values)
|
|
|
}).catch(() => {
|
|
|
form.submit()
|
|
|
});
|
|
|
};
|
|
|
|
|
|
+ const filedUpdateChange = ({ strategyList }: any) => {
|
|
|
+ const stepsData = strategyList?.map((item, index) => {
|
|
|
+ const { strategyName } = item
|
|
|
+ return { title: `策略${index + 1}: ${strategyName}`, description: `进群对象名称、进群对象配置、群递增起始编号、群固定人数...`, id: `strategy_${index + 1}`, checked: item?.groupObjectList?.length > 0 }
|
|
|
+ })
|
|
|
+ setStepsList(stepsData)
|
|
|
+ }
|
|
|
+
|
|
|
return <Modal
|
|
|
- title={<strong>群聊创建进群对象配置</strong>}
|
|
|
+ title={<strong>群聊创建群配置</strong>}
|
|
|
open={visible}
|
|
|
onCancel={onClose}
|
|
|
- width={850}
|
|
|
+ width={1000}
|
|
|
onOk={handleOk}
|
|
|
className={`settingsModal`}
|
|
|
>
|
|
|
<div className={`body_steps`}>
|
|
|
-
|
|
|
+ <NewSteps
|
|
|
+ items={stepsList}
|
|
|
+ onChange={(e) => {
|
|
|
+ if (e?.id)
|
|
|
+ ref1.current?.querySelector('#' + e?.id)?.scrollIntoView({ behavior: 'smooth' })
|
|
|
+ }}
|
|
|
+ />
|
|
|
</div>
|
|
|
- <div className={`body_content`}>
|
|
|
+ <div className={`body_content`} ref={ref1}>
|
|
|
<Form
|
|
|
form={form}
|
|
|
name="newGroupUser"
|
|
|
@@ -83,7 +96,6 @@ const SettingsGroupUser: React.FC<Props> = ({ strategyDTO, visible, onClose, val
|
|
|
onFinishFailed={({ errorFields }) => {
|
|
|
console.log('errorFields--->', errorFields)
|
|
|
setActiveKey(data => data?.filter(item => item != errorFields?.[0]?.name?.[1]))
|
|
|
- setGroupObjectActiveKey(data => data?.filter(item => item != (errorFields?.[0]?.name?.[1] + '_' + errorFields?.[0]?.name?.[3])))
|
|
|
message.error(errorFields?.[0]?.errors?.[0])
|
|
|
}}
|
|
|
onFinish={handleOk}
|
|
|
@@ -91,19 +103,19 @@ const SettingsGroupUser: React.FC<Props> = ({ strategyDTO, visible, onClose, val
|
|
|
// strategyList: [{ id: Date.now() }]
|
|
|
}}
|
|
|
onFieldsChange={() => {
|
|
|
- // filedUpdateChange(form.getFieldsValue())
|
|
|
+ filedUpdateChange(form.getFieldsValue())
|
|
|
}}
|
|
|
preserve={true}
|
|
|
>
|
|
|
<Form.List name="strategyList">
|
|
|
{(fields) => (
|
|
|
<>
|
|
|
- {fields.map(({ key, name }, index) => {
|
|
|
+ {fields.map(({ key, name, ...restField }, index) => {
|
|
|
const strategyItem = strategyList[index]
|
|
|
return <Card
|
|
|
key={key}
|
|
|
title={<Space>
|
|
|
- <strong>策略{index + 1} {strategyItem?.strategyName}</strong>
|
|
|
+ <strong>{strategyItem?.strategyName}</strong>
|
|
|
<Popover
|
|
|
placement="right"
|
|
|
content={<div>
|
|
|
@@ -119,26 +131,15 @@ const SettingsGroupUser: React.FC<Props> = ({ strategyDTO, visible, onClose, val
|
|
|
style={{ background: '#fff', marginBottom: 10 }}
|
|
|
hoverable
|
|
|
id={`strategy_${index + 1}`}
|
|
|
- extra={<Space>
|
|
|
- <a
|
|
|
- style={{ padding: 2 }}
|
|
|
- onClick={() => {
|
|
|
- const allKey = strategyItem?.groupObjectList?.map((_, i) => `${index}_${i}`)
|
|
|
- setGroupObjectActiveKey(data => [...new Set([...data, ...allKey])])
|
|
|
- }}
|
|
|
- >
|
|
|
- <VerticalLeftOutlined />
|
|
|
- </a>
|
|
|
- <a
|
|
|
- style={{ padding: 2 }}
|
|
|
- onClick={() => setActiveKey(data => {
|
|
|
- if (data.includes(index)) {
|
|
|
- return data.filter(item => item !== index)
|
|
|
- }
|
|
|
- return [...new Set([...data, index])]
|
|
|
- })}
|
|
|
- >{activeKey.includes(index) ? <RightOutlined /> : <DownOutlined />}</a>
|
|
|
- </Space>}
|
|
|
+ extra={<a
|
|
|
+ style={{ padding: 2 }}
|
|
|
+ onClick={() => setActiveKey(data => {
|
|
|
+ if (data.includes(index)) {
|
|
|
+ return data.filter(item => item !== index)
|
|
|
+ }
|
|
|
+ return [...new Set([...data, index])]
|
|
|
+ })}
|
|
|
+ >{activeKey.includes(index) ? <RightOutlined /> : <DownOutlined />}</a>}
|
|
|
styles={{
|
|
|
body: {
|
|
|
transition: 'height 0.3s ease-in-out',
|
|
|
@@ -148,178 +149,13 @@ const SettingsGroupUser: React.FC<Props> = ({ strategyDTO, visible, onClose, val
|
|
|
}
|
|
|
}}
|
|
|
>
|
|
|
- <Form.List name={[name, 'groupObjectList']}>
|
|
|
- {(fields, { add, remove }) => (
|
|
|
- <>
|
|
|
- {fields.map(({ key, name, ...restField }, index1) => {
|
|
|
- const groupObjectItem = strategyItem?.groupObjectList?.[index1]
|
|
|
-
|
|
|
- return <Card
|
|
|
- key={key}
|
|
|
- title={<strong>进群对象{index1 + 1} 配置</strong>}
|
|
|
- style={{ background: '#fff', marginBottom: 10 }}
|
|
|
- id={`strategy_${index + 1}_groupObject_${index1 + 1}`}
|
|
|
- extra={<Space>
|
|
|
- {strategyItem?.groupObjectList?.length > 1 && <div
|
|
|
- style={{ color: 'red', cursor: 'pointer', padding: 2 }}
|
|
|
- onClick={() => {
|
|
|
- remove(name)
|
|
|
- }}
|
|
|
- >
|
|
|
- <MinusCircleOutlined />
|
|
|
- </div>}
|
|
|
- <a
|
|
|
- style={{ padding: 2 }}
|
|
|
- onClick={() => setGroupObjectActiveKey(data => {
|
|
|
- if (data.includes(index + '_' + index1)) {
|
|
|
- return data.filter(item => item !== (index + '_' + index1))
|
|
|
- }
|
|
|
- return [...new Set([...data, index + '_' + index1])]
|
|
|
- })}
|
|
|
- >{groupObjectActiveKey.includes(index + '_' + index1) ? <RightOutlined /> : <DownOutlined />}</a>
|
|
|
- </Space>}
|
|
|
- styles={{
|
|
|
- body: {
|
|
|
- transition: 'height 0.3s ease-in-out',
|
|
|
- overflow: 'hidden',
|
|
|
- height: !groupObjectActiveKey.includes(index + '_' + index1) ? 'auto' : 0,
|
|
|
- padding: !groupObjectActiveKey.includes(index + '_' + index1) ? '16px' : 0
|
|
|
- }
|
|
|
- }}
|
|
|
- >
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'groupObjectName']}
|
|
|
- label={<strong>进群对象名称</strong>}
|
|
|
- rules={[{ required: true, message: '请输入进群对象名称!' }]}
|
|
|
- >
|
|
|
- <Input placeholder='请输入进群对象名称' allowClear style={{ width: 358 }} />
|
|
|
- </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>
|
|
|
- {groupObjectItem?.externalUserType === 'specify' && <div style={{ marginTop: 8, width: '100%' }}>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'externalUserFilter']}
|
|
|
- rules={[{ required: true, message: '请选择人群包!' }]}
|
|
|
- noStyle
|
|
|
- >
|
|
|
- <FilterUser configType={'USER_GROUP'} />
|
|
|
- </Form.Item>
|
|
|
- </div>}
|
|
|
- </div>
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'groupIndex']}
|
|
|
- tooltip={{ title: `例如:起始编号为'1'群名为'测试群',再建群后群名为'测试群1'超出群人数的用户将分配到'测试群2'依次递增`, placement: 'top' }}
|
|
|
- label={<strong>群递增起始编号</strong>}
|
|
|
- rules={[{ required: true, message: '请输入群递增起始编号!' }]}
|
|
|
- >
|
|
|
- <InputNumber placeholder='请输入群递增起始编号' min={1} style={{ width: 358 }} />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'groupUserCount']}
|
|
|
- tooltip={{ title: `不包括建群人和固定企微号，最大上限数量38`, placement: 'top' }}
|
|
|
- label={<strong>群固定人数</strong>}
|
|
|
- rules={[{ required: true, message: '请输入群固定人数!' }]}
|
|
|
- >
|
|
|
- <InputNumber placeholder='请输入群固定人数' max={38} min={1} style={{ width: 358 }} />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'autoOutGroup']}
|
|
|
- label={<strong>邀请客户进群完毕后客服号是否退群</strong>}
|
|
|
- rules={[{ required: true, message: '请选择是否退群!' }]}
|
|
|
- >
|
|
|
- <Radio.Group>
|
|
|
- <Radio value={true}>是</Radio>
|
|
|
- <Radio value={false}>否</Radio>
|
|
|
- </Radio.Group>
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'excludeInGroup']}
|
|
|
- label={<strong>是否排除已在群的客户</strong>}
|
|
|
- rules={[{ required: true, message: '请选择是否排除已在群的客户!' }]}
|
|
|
- >
|
|
|
- <Radio.Group>
|
|
|
- <Radio value={true}>是</Radio>
|
|
|
- </Radio.Group>
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'deleteGroupTag']}
|
|
|
- label={<strong>拉群完成后自动删除拉群标签</strong>}
|
|
|
- rules={[{ required: true, message: '请选择拉群完成后自动删除拉群标签!' }]}
|
|
|
- >
|
|
|
- <Radio.Group>
|
|
|
- <Radio value={true}>是</Radio>
|
|
|
- </Radio.Group>
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'weChatAppid']}
|
|
|
- label={<strong>群聊关联公众号</strong>}
|
|
|
- >
|
|
|
- <Select
|
|
|
- showSearch
|
|
|
- style={{ width: 358 }}
|
|
|
- allowClear
|
|
|
- placeholder="选择公众号"
|
|
|
- filterOption={(input, option) =>
|
|
|
- (option?.label as any)?.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
- }
|
|
|
- options={getAccountList?.data?.data?.map(item => ({ label: item.name, value: item.appId }))}
|
|
|
- />
|
|
|
- </Form.Item>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'remark']}
|
|
|
- label={<strong>拉群完成后群聊备注</strong>}
|
|
|
- >
|
|
|
- <Input.TextArea placeholder="请输入群聊备注" style={{ width: 358 }} />
|
|
|
- </Form.Item>
|
|
|
-
|
|
|
- <Card title={<strong>拉群完成后群聊智能标签</strong>} style={{ background: '#fff', marginBottom: 10 }} styles={{ body: { padding: '6px 0 6px 16px' } }}>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'tagDTO']}
|
|
|
- style={{ marginBottom: 0 }}
|
|
|
- >
|
|
|
- <MindTags />
|
|
|
- </Form.Item>
|
|
|
- </Card>
|
|
|
- <Form.Item
|
|
|
- {...restField}
|
|
|
- name={[name, 'groupSendMsg']}
|
|
|
- label={<strong>建群成功发送内容</strong>}
|
|
|
- rules={[{ required: true, message: '请输入建群成功发送内容!' }]}
|
|
|
- >
|
|
|
- <Input.TextArea placeholder="请输入建群成功发送内容" style={{ width: 358 }} />
|
|
|
- </Form.Item>
|
|
|
- </Card>
|
|
|
- })}
|
|
|
- <Form.Item>
|
|
|
- <Button type="dashed" onClick={() => add(defaultGroupObject)} block icon={<PlusOutlined />}>
|
|
|
- 新增进群对象
|
|
|
- </Button>
|
|
|
- </Form.Item>
|
|
|
- </>
|
|
|
- )}
|
|
|
- </Form.List>
|
|
|
+ <Form.Item
|
|
|
+ {...restField}
|
|
|
+ name={[name, 'groupObjectList']}
|
|
|
+ rules={[{ required: true, message: '请新增群配置!' }]}
|
|
|
+ >
|
|
|
+ <AddGroupObject bookPlatForm={bookPlatForm} bookList={bookList} />
|
|
|
+ </Form.Item>
|
|
|
</Card>
|
|
|
})}
|
|
|
</>
|
