system-copyright-react/src/components/ContactPeople/ContactPeople.tsx

import { message, Modal, Table, Space } from "antd";
import { FolderAddOutlined } from '@ant-design/icons';
// import locale from 'antd/es/date-picker/locale/zh_CN';
// import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";
// import { get, put, post, del, downloadUrl } from "../../../util/AjaxUtils.ts";
import {
    get, put, post, del,
    downloadUrl
} from "../../util/AjaxUtils.ts";
import { Button, Form, Input } from 'antd';
import { AxiosResponse } from "axios";

import type { SearchProps } from 'antd/es/input/Search';
// import type { TableColumnsType } from 'antd';

type ContactType = {
    csaNo: string
    gmtCreate: string
    gmtModified: string
    name: string
    phone: string
    projContactId: string
    email: string
    company: string
}
const { Search } = Input;
const { Column } = Table;

export default function ContactPeople(props: any) {
    const [applyConcatId, setApplyConcatId] = useState('') //联系人id
    const [applyContactCsaNo, setapplyContactCsaNo] = useState('') //客服编号
    const [applyContactEmail, setapplyContactEmail] = useState('') //联系人邮箱
    const [applyContactName, setapplyContactName] = useState('')  //联系人姓名
    const [applyContactPhone, setapplyContactPhone] = useState('') //联系人手机
    const [applyContactCompany, setapplyContactCompany] = useState('')
    const [messageApi, contextHolder] = message.useMessage();
    const [formContact] = Form.useForm<ContactType>()
    const height = window.innerHeight - 200;
    const [isContantOpen, steIsContantOpen] = useState(false)
    // 联系人弹窗标题
    const [contactTitle, setContactTitle] = useState('')
    // 客服二维码
    const [imgUrl, setImgUrl] = useState('')
    // 联系人搜索关键字
    const [peopleKeyWords, setPeopleKeyWords] = useState('')
    // 联系人表格数据
    const [tableContactData, setTableContactData] = useState<ContactDataType[]>([])
    // 联系人id 关键字
    const [contactId, setContactId] = useState('')
    // 申请人信息搜索 applicantPeopleSearch
    const applicantPeopleSearch: SearchProps['onSearch'] = (value, _e, info) => (
        console.log(info?.source, value),
        // alert(value),
        setPeopleKeyWords(value),
        getSearchProjContactList(value)
    );
    // 获取联系人表格
    const getProjContactList = () => {
        get({
            messageApi,
            url: `/api/proj-contact/list/self`,
            onSuccess({ data }: AxiosResponse) {
                console.log('联系人表格', data);
                // setTableBelongData(data)
                setTableContactData(data)
            }
        })
    }
    // 获取联系人表格 带搜索
    const getSearchProjContactList = (keywords: any) => {
        get({
            messageApi,
            url: `/api/proj-contact/list/self?keywords=${keywords}`,
            onSuccess({ data }: AxiosResponse) {
                // console.log('联系人表格', data);
                // setTableBelongData(data)
                setTableContactData(data)
            }
        })
    }
    // 联系人表格选择触发
    const ContantRowSelection = {
        // selectedRowKeys: React.Key[]
        onChange: (selectedRowKeys: React.Key[], selectedRows: ContactDataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            setApplyConcatId(selectedRows[0].projContactId)
            setapplyContactCsaNo(selectedRows[0].csaNo)
            setapplyContactEmail(selectedRows[0].email)
            setapplyContactName(selectedRows[0].name)
            setapplyContactPhone(selectedRows[0].phone)
            setapplyContactCompany(selectedRows[0].company)
        },

    };
    // 点击创建联系热人获取随机客服
    const getCas = () => {
        get({
            messageApi,
            url: `/api/csa/get`,
            onSuccess({ data }: AxiosResponse) {
                console.log('随机客服信息二维码', data.casQrCode);
                formContact.setFieldsValue({
                    csaNo: data.csaNo
                });
                if (data.casQrCode) {
                    const imgUrl = downloadUrl(data.casQrCode);
                    console.log('图片地址', imgUrl);
                    setImgUrl(imgUrl)
                }

            }
        })
    }
    // 创建联系人
    const newContact = () => {
        post({
            messageApi,
            url: '/api/proj-contact/save',
            body: {
                csaNo: formContact.getFieldValue('csaNo'),
                name: formContact.getFieldValue('name'),
                phone: formContact.getFieldValue('phone'),
                email: formContact.getFieldValue('email'),
                company: formContact.getFieldValue('company')
            },
            onBefore() {

            },
            onSuccess() {
                messageApi.success('提交成功')
                getProjContactList()
                steIsContantOpen(false)
            },
            onFinally() {
            }
        })
    }
    // 编辑联系人
    const upContact = () => {
        put({
            messageApi,
            url: `/api/proj-contact/update/${contactId}`,
            body: {
                csaNo: formContact.getFieldValue('csaNo'),
                name: formContact.getFieldValue('name'),
                phone: formContact.getFieldValue('phone'),
                email: formContact.getFieldValue('email'),
                company: formContact.getFieldValue('company')
            },
            onBefore() {
            },
            onSuccess() {
                // console.log(data);
                // alert('编辑成功')
                messageApi.open({
                    type: 'success',
                    content: '编辑成功'
                })
                // getProjContactList()
                getSearchProjContactList(peopleKeyWords)
                steIsContantOpen(false)

            },
            onFinally() {
            }
        })
    }
    // 联系人人表单信息 点击确定
    const contactHandleOk = () => {
        // alert('联系热确定')
        formContact.validateFields().then(() => {
            // 如果验证通过，则执行确认操作
            // 这里可以放置你的确认操作逻辑
            if (contactTitle === '编辑联系人') {
                upContact()
            }
            if (contactTitle === '创建联系人') {
                newContact()
            }
            // 关闭 弹窗
            // setIsNewBelongOpen(false)
            // 初始化数据
            formContact.resetFields(); // 重置表单字段为初始值

        }).catch(() => {
            // 如果验证不通过，可以根据需要处理错误信息
            // (errorInfo);
        });
    };
    useEffect(() => {

        getProjContactList()

    }, [])
    return (
        <div style={{ height: props.isShow ? `${height - 80}px`:`${height - 160}px`, overflow: 'auto', position: 'relative' }}>
            {contextHolder}
            <div style={{ padding: '22px 15px 0 15px', background: 'var(--color-light)' }}>
                <div style={{ padding: '14px 19px', background: '#F3F3F3', color: '#A3A3A3', fontSize: '14px' }}>
                    联系人用于接受平台相关业务办理进度的通知信息与各类协议的线下签章等工作。
                </div>
                <div className='belongPeople-center'>
                    <Button onClick={() => {
                        formContact.resetFields()
                        getCas()
                        steIsContantOpen(true)
                        setContactTitle('创建联系人')

                    }} type="primary" icon={<FolderAddOutlined style={{ fontSize: '18px' }} />} style={{ width: "160px", height: '43px', fontSize: '14px' }}>
                        创建联系人
                    </Button>
                    <div className='belongPeople-search'>
                        <Search placeholder="请输入持有者名称搜索对应信息" onSearch={applicantPeopleSearch} style={{ width: '353px', height: '43px' }} />
                    </div>
                </div>
                <div className='showInfo' style={{ display: props.isShow ? 'block' : 'none' }}>
                    {applyContactName ? (
                        <div style={{display:'flex'}}>
                            <div style={{ marginRight: '22px' }}>当前联系人:</div>
                            <div style={{ display: applyContactName == '' ? 'block' : 'none' }}>请选择联系人</div>
                            <div style={{ display: applyContactName == '' ? 'none' : 'block' }}>
                                {applyContactName}/{applyContactPhone}{applyContactEmail ? '/' + applyContactEmail : ''}
                            </div>
                        </div>
                    ) : (
                        <div style={{display:'flex'}}>
                            <div style={{ marginRight: '22px' }}>当前联系人:</div>
                            <div style={{ display: props.concatPeopleInfo.applyContactName == '' ? 'block' : 'none' }}>请选择联系人</div>
                            <div style={{ display: props.concatPeopleInfo.applyContactName == '' ? 'none' : 'block' }}>
                                {props.concatPeopleInfo.applyContactName}/{props.concatPeopleInfo.applyContactPhone}{props.concatPeopleInfo.applyContactEmail ? '/' + props.concatPeopleInfo.applyContactEmail : ''}
                            </div>

                        </div>
                    )}

                </div>
                <div className='belongPeople-bot'>
                    {/* 表格 lyp*/}
                    {props.isShow ? (<Table
                        rowSelection={{
                            type: 'radio',
                            ...ContantRowSelection,
                            // selectedRowKeys: selectedKeys // 设置默认选中的行
                        }}

                        dataSource={tableContactData}
                        pagination={{
                            defaultPageSize: 5, // 设置默认一页显示 5 条数据
                        }}
                        style={{ textAlign: 'center' }} // 设置表格内容居中显示
                        rowKey="projContactId" // 指定数据项的唯一标识符
                    >
                        <Column title="联系人" dataIndex="name" />
                        <Column title="联系人手机号" dataIndex="phone" />
                        <Column title="平台专属客服" dataIndex="csaNo" />
                        <Column title="所属公司" dataIndex="company"
                            render={(text) => (text !== '' ? text : '一')}
                        />

                        {/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
                        <Column
                            title="操作"
                            render={(text, record: any) => (
                                <Space size="middle">
                                    <a onClick={() => {
                                        // alert(record.projOwnerId);

                                        console.log('text:', text);
                                        console.log('record:', record);

                                        setContactId(record.projContactId)
                                        setContactTitle('编辑联系人')
                                        steIsContantOpen(true)
                                        // formContact 表单赋值
                                        formContact.setFieldsValue({
                                            csaNo: record.csaNo,
                                            name: record.name,
                                            phone: record.phone,
                                            email: record.email,
                                            company: record.company
                                        })
                                    }}>编辑 </a>
                                    <span style={{ color: '#3472EE' }}>|</span>
                                    <a onClick={() => {
                                        // alert(record.projOwnerId); 
                                        del({
                                            messageApi,
                                            url: `/api/proj-contact/remove/${record.projContactId}`,
                                            onSuccess() {
                                                messageApi.success('删除成功');
                                                getProjContactList()
                                            }
                                        })
                                    }}>删除</a>
                                    <span style={{ color: '#3472EE' }}>|</span>
                                    <a onClick={() => {
                                        setContactTitle('查看联系人')
                                        steIsContantOpen(true)
                                        formContact.setFieldsValue({
                                            csaNo: record.csaNo,
                                            name: record.name,
                                            phone: record.phone,
                                            email: record.email

                                        })
                                    }}>查看</a>

                                </Space>
                            )}
                        />
                    </Table>) : (<Table

                        dataSource={tableContactData}
                        pagination={{
                            defaultPageSize: 5, // 设置默认一页显示 5 条数据
                        }}
                        style={{ textAlign: 'center' }} // 设置表格内容居中显示
                        rowKey="projContactId" // 指定数据项的唯一标识符
                    >
                        <Column title="联系人" dataIndex="name" />
                        <Column title="联系人手机号" dataIndex="phone" />
                        <Column title="平台专属客服" dataIndex="csaNo" />
                        <Column title="所属公司" dataIndex="company"
                            render={(text) => (text !== '' ? text : '一')}
                        />

                        {/* <Column title="实名认证状态" dataIndex="address" key="key" /> */}
                        <Column
                            title="操作"
                            render={(text, record: any) => (
                                <Space size="middle">
                                    <a onClick={() => {
                                        // alert(record.projOwnerId);

                                        console.log('text:', text);
                                        console.log('record:', record);

                                        setContactId(record.projContactId)
                                        setContactTitle('编辑联系人')
                                        steIsContantOpen(true)
                                        // formContact 表单赋值
                                        formContact.setFieldsValue({
                                            csaNo: record.csaNo,
                                            name: record.name,
                                            phone: record.phone,
                                            email: record.email,
                                            company: record.company
                                        })
                                    }}>编辑 </a>
                                    <span style={{ color: '#3472EE' }}>|</span>
                                    <a onClick={() => {
                                        // alert(record.projOwnerId); 
                                        del({
                                            messageApi,
                                            url: `/api/proj-contact/remove/${record.projContactId}`,
                                            onSuccess() {
                                                messageApi.success('删除成功');
                                                getProjContactList()
                                            }
                                        })
                                    }}>删除</a>
                                    <span style={{ color: '#3472EE' }}>|</span>
                                    <a onClick={() => {
                                        setContactTitle('查看联系人')
                                        steIsContantOpen(true)
                                        formContact.setFieldsValue({
                                            csaNo: record.csaNo,
                                            name: record.name,
                                            phone: record.phone,
                                            email: record.email

                                        })
                                    }}>查看</a>

                                </Space>
                            )}
                        />
                    </Table>)}


                </div>

            </div>
            <div style={{ display: props.isShow ? 'block' : 'none', position: 'absolute', right: 0, bottom: 10 }}>
                <div className="belongPeopleModal-btn" style={{ display: 'flex', justifyContent: 'flex-end' }} >
                    <Button onClick={() => {
                        props.closeModal()
                    }}>取消</Button>
                    <Button style={{
                        marginLeft: 20
                    }} type="primary"
                        onClick={() => {
                            props.setConcatPeopleInfo({
                                applyConcatId,
                                applyContactCsaNo,
                                applyContactEmail,
                                applyContactName,
                                applyContactPhone,
                                applyContactCompany
                            })
                            props.setConcatValue(applyContactName)
                            props.closeModal()
                        }}
                    >确定</Button>
                </div>
            </div>
            {/* 选择创建/编辑/查看联系人弹框 lyp*/}
            <Modal
                destroyOnClose
                okText="确认"
                // cancelText="取消"
                cancelText={contactTitle === '查看联系人' ? '返回' : '取消'}
                open={isContantOpen}
                // 点击确认上传事件
                // onOk={() => {
                // }}
                onOk={
                    contactHandleOk
                }
                width={745}
                // 确认按钮样式
                okButtonProps={{ size: 'large', style: { display: contactTitle == '查看联系人' ? 'none' : 'block' } }}
                // 返回按钮样式
                cancelButtonProps={{ size: 'large', style: {} }}

                onCancel={() => {
                    steIsContantOpen(false)
                    getSearchProjContactList(peopleKeyWords)
                }}
            >
                <div className='belongPeople-Modal'>
                    <div className='belongPeople-Mtop'>
                        {contactTitle}
                    </div>
                    <div className='contact-modal-context'>
                        <div>
                            <Form
                                name="contactInfo"
                                form={formContact}
                                layout="vertical"
                                labelCol={{ span: 8 }}
                                wrapperCol={{ span: 24 }}
                                style={{ width: '100%', }}
                                onFinish={() => {
                                    // setIsNewBelongOpen(true);   
                                }}
                                autoComplete="off"
                            >
                                <div className='blongNameInt'>
                                    <div className='blongTitle ' style={{ width: 65, marginRight: '15px' }}>姓名: </div>


                                    <Form.Item<ContactType>
                                        name="name"
                                        rules={[{ required: true, message: '请输入姓名' }]}
                                    >
                                        <Input placeholder="请输入姓名"
                                            style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}

                                            disabled={contactTitle == '查看联系人' ? true : false}
                                        />
                                    </Form.Item>
                                </div>
                                <div className='blongNameInt'>
                                    <div className='blongTitle ' style={{ width: 65, marginRight: '15px' }}>电话: </div>

                                    <Form.Item<ContactType>
                                        name="phone"
                                        rules={[{ required: true, message: '请输入电话号码' }]}
                                    >
                                        <Input placeholder="请输入电话号码"
                                            style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}

                                            disabled={contactTitle == '查看联系人' ? true : false}
                                        />
                                    </Form.Item>
                                </div>
                                <div className='blongNameInt'>
                                    <div className='blongTitle ' style={{ width: 65, marginRight: '15px' }}>所属公司: </div>

                                    <Form.Item<ContactType>
                                        name="company"
                                        rules={[{ required: false, message: '请输入所属公司' }]}
                                    >
                                        <Input placeholder="请输入所属公司"
                                            style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}

                                            disabled={contactTitle == '查看联系人' ? true : false}
                                        />

                                    </Form.Item>
                                </div>
                                <div className='blongNameInt'>
                                    <div className='blongTitle ' style={{ width: 65, marginRight: '15px' }}>邮箱: </div>

                                    <Form.Item<ContactType>
                                        name="email"
                                        rules={[{ required: false, message: '请输入邮箱' },
                                        { type: 'email', message: '请输入有效的邮箱地址' }
                                        ]}
                                    >
                                        <Input placeholder="请输入邮箱"
                                            style={{ height: '44px', width: '384px', fontSize: '15px', marginTop: '22px' }}

                                            disabled={contactTitle == '查看联系人' ? true : false}
                                        />
                                    </Form.Item>
                                </div>
                                <div
                                    style={{ display: 'none' }}
                                >
                                    <Form.Item<ContactType>
                                        name="csaNo"
                                    >
                                        <Input placeholder="客服编码 需隐藏"
                                            style={{ height: '44px', width: '384px', fontSize: '15px', }}

                                            disabled={contactTitle == '查看联系人' ? true : false}
                                        />
                                    </Form.Item>
                                </div>



                            </Form>
                        </div>
                        <div className='cas' style={{
                            display: contactTitle == '创建联系人' ? 'block' : 'none'
                        }}>
                            <div className='cas-title'>
                                请使用微信扫一扫
                            </div>
                            <div className='cas-text'>
                                添加您的专属客服
                            </div>
                            <img src={imgUrl} alt="" width={137} height={138} />
                        </div>
                    </div>
                </div>

            </Modal >
        </div>
    )
}