|
|
@@ -0,0 +1,128 @@
|
|
|
+import { useAjax } from "@/Hook/useAjax";
|
|
|
+import { getLogChatUserInfoListApi, GetLogChatUserInfoListProps } from "@/pages/weComTask/API/groupChat";
|
|
|
+import { Modal, Select, Table } from "antd";
|
|
|
+import React, { useEffect, useState } from "react";
|
|
|
+
|
|
|
+
|
|
|
+/**
|
|
|
+ * 客户详情
|
|
|
+ * @param param0
|
|
|
+ * @returns
|
|
|
+ */
|
|
|
+const UserInfo: React.FC<{ id: number, count: number, title?: string }> = ({ id, count, title }) => {
|
|
|
+
|
|
|
+ /*********************************************/
|
|
|
+ const [queryForm, setQueryForm] = useState<GetLogChatUserInfoListProps>({ id, pageNum: 1, pageSize: 20 })
|
|
|
+ const [visible, setVisible] = useState<boolean>(false);
|
|
|
+ const getLogChatUserInfoList = useAjax((params) => getLogChatUserInfoListApi(params))
|
|
|
+ /*********************************************/
|
|
|
+
|
|
|
+ useEffect(() => {
|
|
|
+ if (visible) {
|
|
|
+ getLogChatUserInfoList.run(queryForm);
|
|
|
+ }
|
|
|
+ }, [id, visible, queryForm])
|
|
|
+
|
|
|
+ return <>
|
|
|
+ <a onClick={() => setVisible(true)}>{count}</a>
|
|
|
+ {visible && <Modal
|
|
|
+ title={<strong>{title || '客户详情'}</strong>}
|
|
|
+ open={visible}
|
|
|
+ onCancel={() => setVisible(false)}
|
|
|
+ width={1100}
|
|
|
+ footer={null}
|
|
|
+ >
|
|
|
+ <Select
|
|
|
+ placeholder='状态'
|
|
|
+ allowClear
|
|
|
+ options={[{ label: '实际拉群', value: 1 }, { label: '删除或拉黑', value: 3 }, { label: '邀请', value: 4 }]}
|
|
|
+ showSearch
|
|
|
+ style={{ width: 150, marginBottom: 10 }}
|
|
|
+ filterOption={(input, option) =>
|
|
|
+ (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
|
|
|
+ }
|
|
|
+ value={queryForm?.status}
|
|
|
+ onChange={(value) => setQueryForm({ ...queryForm, status: value })}
|
|
|
+ />
|
|
|
+ <Table
|
|
|
+ dataSource={getLogChatUserInfoList?.data?.data?.records}
|
|
|
+ columns={[
|
|
|
+ {
|
|
|
+ title: '手机UUID',
|
|
|
+ dataIndex: 'corpUserPhoneUuid',
|
|
|
+ key: 'corpUserPhoneUuid',
|
|
|
+ width: 100,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客户名称',
|
|
|
+ dataIndex: 'nickName',
|
|
|
+ key: 'nickName',
|
|
|
+ width: 100,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客户ID',
|
|
|
+ dataIndex: 'externalUserId',
|
|
|
+ key: 'externalUserId',
|
|
|
+ width: 120,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '企业名称',
|
|
|
+ dataIndex: 'corpName',
|
|
|
+ key: 'corpName',
|
|
|
+ width: 120,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center',
|
|
|
+ render: (text) => text || '--'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '企业ID',
|
|
|
+ dataIndex: 'corpId',
|
|
|
+ key: 'corpId',
|
|
|
+ width: 120,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客服号名称',
|
|
|
+ dataIndex: 'corpUserName',
|
|
|
+ key: 'corpUserName',
|
|
|
+ width: 120,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center',
|
|
|
+ render: (text) => text || '--'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '客服号ID',
|
|
|
+ dataIndex: 'corpUserId',
|
|
|
+ key: 'corpUserId',
|
|
|
+ width: 90,
|
|
|
+ ellipsis: true,
|
|
|
+ align: 'center'
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ rowKey={'id'}
|
|
|
+ bordered={true}
|
|
|
+ size='small'
|
|
|
+ scroll={{ y: 500, x: 1000 }}
|
|
|
+ loading={getLogChatUserInfoList?.loading}
|
|
|
+ pagination={{
|
|
|
+ current: getLogChatUserInfoList?.data?.data?.current,
|
|
|
+ pageSize: getLogChatUserInfoList?.data?.data?.size,
|
|
|
+ total: getLogChatUserInfoList?.data?.data?.total,
|
|
|
+ showSizeChanger: true,
|
|
|
+ onChange: (page, pageSize) => {
|
|
|
+ setQueryForm({ ...queryForm, pageNum: page, pageSize })
|
|
|
+ }
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Modal>}
|
|
|
+ </>
|
|
|
+}
|
|
|
+
|
|
|
+export default React.memo(UserInfo);
|