jobwebsite/src/components/Manage/Jobseeker/Resume/Certificate/index.tsx

import { useState, useEffect, useRef } from 'react';
import { HomeOutlined, FormOutlined, CameraOutlined } from '@ant-design/icons'
import { LoginForm, ProConfigProvider, ProFormCaptcha, ProFormCheckbox, ProFormText, setAlpha, ProForm, ProFormDependency } from '@ant-design/pro-components';
import { Space, Tabs, Button, Avatar, Row, Col, Image, Modal, Card, List, Popconfirm } from 'antd';

import { Imageprefix } from '@/constants/index'


import { GetJobapplicantListcertificate,   PostJobapplicantDelcertificate} from '@/services/apis/resume'

import ManageJobseekerResumeCertificateCreate from '../Create/Certificate'


interface ManageJobseekerResumeCertificateProps {
}
const ManageJobseekerResumeCertificate: React.FC<ManageJobseekerResumeCertificateProps> = () => {
    const [openPreview, setOpenPreview] = useState(false);
    const [list, setList] = useState<object[]>([])
    const [total, setTotal] = useState<number>(0)
    const [detail, setDetail] = useState<any>({})

    const closeModel = (value: boolean) => {
        setOpenPreview(value)
        GetJobapplicantListcertificate({ page: 1, pagesize: 10, sortby: 'desc' }).then((res: any) => {
            setList(res.data.jobapplicantcertificates && res.data.jobapplicantcertificates.length > 0 ? res.data.jobapplicantcertificates : []);
            setTotal(res.data.total);
        })
    }
    useEffect(() => {
        GetJobapplicantListcertificate({ page: 1, pagesize: 10, sortby: 'desc' }).then((res: any) => {
            setList(res.data.jobapplicantcertificates && res.data.jobapplicantcertificates.length > 0 ? res.data.jobapplicantcertificates : []);
            setTotal(res.data.total);
        })
    }, [])

    return (
        <>
            <Card title={<><Space>证书 <div style={{ color: '#999', fontSize: 14 }}> {total} 条证书</div></Space> </>} extra={<><Button type='primary' onClick={() => {
                setOpenPreview(true)
            }}>添加证书</Button></>}>
                <List
                    className="demo-loadmore-list"
                    itemLayout="horizontal"
                    // loadMore={loadMore}
                    dataSource={list}
                    renderItem={(item, index) => (
                        <List.Item
                            actions={[<Button size='small' onClick={() => { setOpenPreview(true); setDetail(item) }}>编辑</Button>,
                            <Popconfirm
                                title="是否删除"
                                onConfirm={(e) => {
                                    PostJobapplicantDelcertificate({ id: item.id }).then((res: any) => {
                                        GetJobapplicantListcertificate({ page: 1, pagesize: 10, sortby: 'desc' }).then((res: any) => {
                                            setList(res.data.jobapplicantcertificates && res.data.jobapplicantcertificates.length > 0 ? res.data.jobapplicanttrainings : []);
                                            setTotal(res.data.total);
                                        })
                                    })
                                }}
                                okText="删除"
                                cancelText="取消"
                            >
                                <Button size='small'>删除</Button>
                            </Popconfirm>]}
                        >
                            <List.Item.Meta
                                avatar={<><Avatar>{index + 1}</Avatar></>}
                                title={<><h3 style={{ fontWeight: 'bold' }}>{item.name}</h3></>}
                                description={
                                    <>
                                        <Space direction='vertical' style={{ color: '#000' }}>
                                            {
                                                item.certificate_photo ? <Image src={Imageprefix + item.certificate_photo} shape='square' width={200} height={200} />
                                                    : ''
                                            }
                                        </Space>
                                    </>
                                }
                            />
                        </List.Item>
                    )}
                />
            </Card>

            <Modal
                open={openPreview}
                title='编辑简历信息'
                centered
                maskClosable={false}
                footer={null}
                destroyOnClose
                width={1000}
                onCancel={() => {
                    setOpenPreview(false)
                }}
            >
                <ManageJobseekerResumeCertificateCreate detail={detail} closeModel={closeModel}></ManageJobseekerResumeCertificateCreate>
            </Modal>
        </>
    );
};

export default ManageJobseekerResumeCertificate;