diff --git a/src/api/chat.ts b/src/api/chat.ts index 9679499..92d172f 100644 --- a/src/api/chat.ts +++ b/src/api/chat.ts @@ -5,4 +5,16 @@ export const chat_groupList = (params) => $axios.post('/admin/openImGroupList', export const chat_groupMemberList = (params) => $axios.post('/admin/openImGroupMemberList', params) export const chat_inviteUsetToGroup = (params) => $axios.post('/admin/openImInviteUserToGroup', params) -export const chat_kickGroup = (params) => $axios.post('/admin/openImKickGroup', params) \ No newline at end of file +export const chat_kickGroup = (params) => $axios.post('/admin/openImKickGroup', params) +export const chat_muteGroupMember = (params) => $axios.post('/admin/openImMuteGroupMember', params) +export const chat_cancelMuteGroupMember = (params) => $axios.post('/admin/openImCancelMuteGroupMember', params) + +export const chat_setGroupMemberInfo = (params) => $axios.post('/admin/openImSetGroupMemberInfo', params) +export const chat_tansferGroupOwner = (params) => $axios.post('/admin/openImTransferGroup', params) + +export const chat_cancelMuteGroup = (params) => $axios.post('/admin/openImCancelMuteGroup', params) +export const chat_muteGroup = (params) => $axios.post('/admin/openImMuteGroup', params) + +export const chat_dismissGroup = (params) => $axios.post('/admin/openImDismissGroup', params) +export const chat_createGroup = (params) => $axios.post('/admin/openImCreateGroup', params) +export const chat_changeGroup = (params) => $axios.post('/admin/openImSetGroupInfo', params) \ No newline at end of file diff --git a/src/components/MyTable/index.tsx b/src/components/MyTable/index.tsx index e1c2738..0c08125 100644 --- a/src/components/MyTable/index.tsx +++ b/src/components/MyTable/index.tsx @@ -47,7 +47,9 @@ interface TableProps { expandedRowRender?: () => ReactNode; onExpand?: () => void; header?: JSX.Element; - disableKeys?: string[] + disableKeys?: string[]; + selectionType?: 'checkbox' | 'radio', + selectKeys?: string[] } const MyTable: FC = forwardRef( @@ -75,7 +77,9 @@ const MyTable: FC = forwardRef( expandedRowRender, onExpand, header, - disableKeys + disableKeys, + selectKeys = [], + selectionType = 'checkbox' } = props // 搜索参数,如果有特殊需要处理的参数，就处理 @@ -97,7 +101,7 @@ const MyTable: FC = forwardRef( } // 多选框的选择值 - const [selectedKeys, setSelectedKeys] = useState([]) + const [selectedKeys, setSelectedKeys] = useState(selectKeys) // 列表所有的筛选参数（包括搜索、分页、排序等） const [tableParams, setTableParams] = useState(initParams) // 列表搜索参数 @@ -186,6 +190,7 @@ const MyTable: FC = forwardRef( } // 复选框配置 const rowSelection = { + type: selectionType, selectedRowKeys: selectedKeys, onChange: onSelectChange, getCheckboxProps: (record: any) => { @@ -255,9 +260,12 @@ const MyTable: FC = forwardRef( ? searchForm.current.resetFields([...field]) : searchForm.current.resetFields() }, - getSelectedKeys(): CommonObjectType[] { + getSelectedKeys(): string[] { return selectedKeys }, + setKeys(keys): void { + setSelectedKeys(keys) + }, // 获取当前列表数据 getTableData(): CommonObjectType[] { return tableData diff --git a/src/components/SearchForm/index.tsx b/src/components/SearchForm/index.tsx index 2e0eec5..1fa552a 100644 --- a/src/components/SearchForm/index.tsx +++ b/src/components/SearchForm/index.tsx @@ -21,6 +21,7 @@ const SearchForm: FC = forwardRef( name={item.key} rules={item.rules} style={{ marginBottom: '6px' }} + label={item.label} > {item.slot} @@ -70,8 +71,8 @@ const SearchForm: FC = forwardRef( ) SearchForm.defaultProps = { - beforeSearch: () => {}, - onFieldsChange: () => {} + beforeSearch: () => { }, + onFieldsChange: () => { } } export default SearchForm diff --git a/src/components/buzzup/BuzzFaceURL.tsx b/src/components/buzzup/BuzzFaceURL.tsx index 70bc8ba..8f18412 100644 --- a/src/components/buzzup/BuzzFaceURL.tsx +++ b/src/components/buzzup/BuzzFaceURL.tsx @@ -7,7 +7,7 @@ interface BuzzFaceURLProps { } const BuzzFaceURL = (props: BuzzFaceURLProps) => { - const { faceUrl, name, size = 40 } = props + const { faceUrl, name, size = 35 } = props return faceUrl ? ( { ) : (
{name.toLocaleUpperCase().substring(0, 1)}
diff --git a/src/pages/chat/group-list/index.tsx b/src/pages/chat/group-list/index.tsx index 55a3bdd..52f29b4 100644 --- a/src/pages/chat/group-list/index.tsx +++ b/src/pages/chat/group-list/index.tsx @@ -1,15 +1,141 @@ -import { chat_groupList, chat_userList } from "@/api/chat" +import { chat_cancelMuteGroup, chat_changeGroup, chat_createGroup, chat_dismissGroup, chat_groupList, chat_muteGroup, chat_userList } from "@/api/chat" import BuzzFaceURL from "@/components/buzzup/BuzzFaceURL"; import MyTable from "@/components/MyTable" import { getTime, isGender, isPlatformId } from "@/utils"; -import React from "react" +import { LoadingOutlined, PlusOutlined } from "@ant-design/icons"; +import { Button, Drawer, Form, Input, Modal, notification, Popconfirm, Select, Upload } from "antd"; +import TextArea from "antd/lib/input/TextArea"; +import React, { useRef, useState } from "react" import { useLocation, useHistory } from "react-router-dom"; const ChatGroupList = () => { const history = useHistory() + const tableRef = useRef(null) + const tableOwnerRef = useRef(null) + const tableAdminRef = useRef(null) + const tableMemberRef = useRef(null) + + const [visible, setVisible] = useState(false) + const [visibleModal, setVisibleModal] = useState(false) + const [visibleModal1, setVisibleModal1] = useState(false) + const [visibleModal2, setVisibleModal2] = useState(false) + const [loading, setLoading] = useState(false) + + const groupOperate = useRef('' as 'c' | 'u') + + const [form] = Form.useForm() + + const muteGroup = async (item) => { + try { + const res: any = await chat_muteGroup({ + groupID: item.groupInfo.groupID + }) + if (res.code === 0) { + notification.success({ + message: '全体禁言成功' + }); + tableRef.current.update() + } + } catch (error) { + + } + } + + const cancelMuteGroup = async (item) => { + try { + const res: any = await chat_cancelMuteGroup({ + groupID: item.groupInfo.groupID + }) + if (res.code === 0) { + notification.success({ + message: '解除禁言成功' + }); + tableRef.current.update() + } + } catch (error) { + + } + } + + const dismissGroup = async (item) => { + try { + const res: any = await chat_dismissGroup({ + groupID: item.groupInfo.groupID + }) + if (res.code === 0) { + notification.success({ + message: '解散群组成功' + }); + tableRef.current.update() + } + } catch (error) { + + } + } + + const createGroup = async (values) => { + try { + const params = { + "adminUserIDs": values.adminUserIDs ? values.adminUserIDs.map(v => v.userID) : [], + "groupInfo": { + applyMemberFriend: values.applyMemberFriend, + groupName: values.groupName, + groupType: 2, + lookMemberInfo: values.lookMemberInfo, + needVerification: values.needVerification, + introduction: values.introduction || '', + notification: values.notification || '' + }, + "memberUserIDs": values.memberUserIDs.map(v => v.userID), + "ownerUserID": values.ownerUserID[0].userID + } + setVisible(false) + form.resetFields() + const res: any = await chat_createGroup(params) + if (res.code === 0) { + notification.success({ + message: '创建成功' + }) + tableRef.current.update() + } + } catch (error) { + + } + } + + const changeGroup = async (values) => { + const { applyMemberFriend, groupID, groupName, introduction, lookMemberInfo, needVerification } = values + const params = { applyMemberFriend, groupID, groupName, introduction, lookMemberInfo, needVerification, notification: values.notification } + setVisible(false) + form.resetFields() + const res: any = await chat_changeGroup({ groupInfoForSet: params }) + if (res.code === 0) { + notification.success({ + message: '修改成功' + }); + tableRef.current.update() + } + } + + const onFinish = async (values) => { + if (groupOperate.current === 'c') { + createGroup(values) + } else { + changeGroup(values) + } + } + + const openVisible = async (item) => { + setVisible(true); + groupOperate.current = 'u'; + console.log(item); + form.setFieldsValue({ + ...item.groupInfo + }) + } const columns = [ { @@ -74,24 +200,246 @@ const ChatGroupList = () => { { title: 'options', fixed: 'right', - width: 250, + width: 280, render: (item) => (
history.push(`/group-member?id=${item.groupInfo.groupID}`)}>群成员
-
群聊设置
-
全体禁言
-
解散群组
+
openVisible(item)}>群聊设置
+ {item.groupInfo.status === 3 ? ( + cancelMuteGroup(item)}> +
解除禁言
+ + ) : muteGroup(item)}> +
全体禁言
+ } + dismissGroup(item)}> +
解散群组
+
) } + ] + const searchConfig = [ + { + key: 'groupID', + label: '群组ID', + slot: + }, + { + key: 'groupName', + label: '群组名称', + slot: + }, ] + + const userColumnData = [ + { + title: '头像', + dataIndex: "", + width: 100, + render: (row) => ( +
+ +
+ ) + }, + { + title: '用户昵称', + dataIndex: "nickname", + width: 200 + }, + { + title: '用户ID', + dataIndex: "userID", + }, + ] + + const handleDisableKeys = (type: 'adminUserIDs' | 'ownerUserID' | 'memberUserIDs') => { + let list = [] + if (form.getFieldValue('adminUserIDs') && type !== 'adminUserIDs') { + list = list.concat(form.getFieldValue('adminUserIDs')) + } + if (form.getFieldValue('ownerUserID') && type !== 'ownerUserID') { + list = list.concat(form.getFieldValue('ownerUserID')) + } + if (form.getFieldValue('memberUserIDs') && type !== 'memberUserIDs') { + list = list.concat(form.getFieldValue('memberUserIDs')) + } + return list.map(v => v.userID) + } + + const uploadButton = ( +
+ {loading ? : } +
Upload
+
+ ); + // 用户头像 用户昵称 用户ID 性别 手机号 在线状态 return ( - + <> + { + setVisible(true) + groupOperate.current = 'c' + }}>新建群组 + } + searchConfigList={searchConfig} + ref={tableRef} + apiFun={chat_groupList} + columns={columns} + /> + + {visibleModal && < Modal visible={visibleModal} onCancel={() => setVisibleModal(false)} title="选择群主" width={700} onOk={() => { + setVisibleModal(false) + }}> + { + form.setFieldsValue({ + ownerUserID: row + }) + }} + apiFun={chat_userList} + columns={userColumnData} + selectionType="radio" + disableKeys={handleDisableKeys('ownerUserID')} + selectKeys={form.getFieldValue('ownerUserID') ? form.getFieldValue('ownerUserID').map(v => v.userID) : []} + /> + } + + {visibleModal1 && < Modal visible={visibleModal1} onCancel={() => setVisibleModal1(false)} title="选择管理员" width={700} onOk={() => { + setVisibleModal1(false) + }}> + { + form.setFieldsValue({ + adminUserIDs: row + }) + }} + apiFun={chat_userList} + columns={userColumnData} + selectionType="checkbox" + disableKeys={handleDisableKeys('adminUserIDs')} + selectKeys={form.getFieldValue('adminUserIDs') ? form.getFieldValue('adminUserIDs').map(v => v.userID) : []} + /> + } + + + {visibleModal2 && < Modal visible={visibleModal2} onCancel={() => setVisibleModal2(false)} title="选择群员" width={700} onOk={() => { + setVisibleModal2(false) + }}> + { + form.setFieldsValue({ + memberUserIDs: row + }) + }} + apiFun={chat_userList} + columns={userColumnData} + selectionType="checkbox" + disableKeys={handleDisableKeys('memberUserIDs')} + selectKeys={form.getFieldValue('memberUserIDs') ? form.getFieldValue('memberUserIDs').map(v => v.userID) : []} + /> + } + + { + setVisible(false) + form.resetFields() + }}> +
+ +
+ + {form.getFieldValue('faceURL') ? avatar : uploadButton} + +
+ + + + + {groupOperate.current === 'c' && <> + +
setVisibleModal(true)}> + { + form.getFieldValue('ownerUserID') && form.getFieldValue('ownerUserID').length > 0 && ( +
{form.getFieldValue('ownerUserID')[0].nickname}
+ ) + } +
+ + +
setVisibleModal1(true)}> + { + form.getFieldValue('adminUserIDs') && form.getFieldValue('adminUserIDs').length > 0 && form.getFieldValue('adminUserIDs').map(item => ( +
{item.nickname}
+ )) + } +
+ + +
setVisibleModal2(true)}> + { + form.getFieldValue('memberUserIDs') && form.getFieldValue('memberUserIDs').length > 0 && form.getFieldValue('memberUserIDs').map(item => ( +
{item.nickname}
+ )) + } +
+ + } + { + groupOperate.current === 'u' && ( + + + + ) + } + + + + +