jobwebsite/src/pages/Talent/Detail/Company/index.tsx

import { useState, useEffect, useRef } from 'react';
import { ProList, PageContainer } from '@ant-design/pro-components';
import { ConfigProvider, Button, Flex, Input, Space, Image, Row, Col, Carousel, Tag, Card, Avatar, Typography, Anchor, List, Result, Divider, Descriptions } from 'antd';
import { PhoneOutlined, MailOutlined, EnvironmentOutlined, ArrowRightOutlined, FireOutlined, StarOutlined, PayCircleOutlined } from '@ant-design/icons';
import { useSearchParams, connect, history, Link } from 'umi';
import { Imageprefix } from '@/constants/index'


import { GetCompanyInfo } from '@/services/apis/company';
import { GetJobCompanyjobs } from '@/services/apis/post';

import EmptyResult from '@/components/Common/EmptyResult'
import CommonJob from '@/components/Common/Job'

const HomePage: React.FC = () => {
    const [searchParams] = useSearchParams();
    const [current, setCurrent] = useState(1)
    const [detail, setDetail] = useState(null)
    const [list, setList] = useState<object[]>([])
    const [total, setTotal] = useState<number>(0)
    const [page, setPage] = useState<number>(1)
    const [pageSize, setPageSize] = useState<number>(3)
    const [positionList, setPositionList] = useState<any[]>([]);
    const [loginHeight, setLoginHeight] = useState<number>(3) // 获取登录的高度


    useEffect(() => {
        GetCompanyInfo({ id: searchParams.get('id') }).then(res => {
            setDetail(res.data)
        })
        GetJobCompanyjobs({ company_id: searchParams.get('id') }).then(res => {
            setList(res.data.jobs)
        })
    }, []);


    return (
        <>
            <ConfigProvider
                theme={{
                    token: {
                        colorPrimary: '#19be6e',
                    },
                    components: {
                        Button: {
                            colorText: '#19be6e'
                        }
                    }
                }}
            >

                <PageContainer
                    header={{ title: '' }}
                >

                    {
                        detail &&
                        <>
                            <Space direction='vertical' size={30} style={{ minHeight: 800 }}>
                                <Space direction='vertical' size={30}>
                                    <Flex justify='space-between' align='center' style={{ padding: 20, borderRadius: 8, background: '#ffffff' }}>
                                        <Space direction='vertical' size={30}>
                                            <Space size={20}>
                                                <Image src={detail.photo ? `${Imageprefix}${detail.photo}`  : '/images/onlylogo.jpg'} width={48} height={48}></Image>
                                                <Space direction='vertical'>
                                                    <Typography.Title level={4}>{detail.full_name}</Typography.Title>
                                                    <div> 成立日期：{detail.situation.establishment_date}</div>
                                                </Space>
                                            </Space>
                                            <Descriptions>
                                                <Descriptions.Item label="社会统一信用代码" >{detail.registration_number}</Descriptions.Item>
                                                <Descriptions.Item label="企业性质" >{detail.situation.nature_text}</Descriptions.Item>
                                                <Descriptions.Item label="所属行业" >{detail.situation.industry_text}</Descriptions.Item>
                                                <Descriptions.Item label="企业规模" >{detail.situation.scale_text}</Descriptions.Item>
                                            </Descriptions>
                                        </Space>
                                    </Flex>
                                    <Row style={{ background: '#ffffff', borderRadius: 8, padding: 20 }}>
                                        <Col span={18}>
                                            <Space direction='vertical' style={{ width: '90%' }}>
                                                <Space direction='vertical' style={{ width: '90%', minHeight: 200 }}>
                                                    <Typography.Title level={5}>企业介绍</Typography.Title>
                                                    <Typography.Paragraph>
                                                        <div dangerouslySetInnerHTML={{ __html: detail.introduction }} />
                                                    </Typography.Paragraph>
                                                </Space>
                                                <Space direction='vertical' style={{ width: '90%', minHeight: 200 }}>
                                                    <Typography.Title level={5}>企业地址</Typography.Title>
                                                    <Typography.Paragraph>
                                                        <Space direction='vertical'>
                                                            <Space>{detail.detail_address} </Space>
                                                            {/* <Image src='/images/bg1.jpg'></Image> */}
                                                        </Space>
                                                    </Typography.Paragraph>
                                                </Space>

                                            </Space>
                                        </Col>
                                        <Col span={6}>
                                            <Space direction='vertical' style={{ width: '100%' }}>
                                                <Typography.Title level={5}>联系方式</Typography.Title>
                                                <Descriptions>
                                                    <Descriptions.Item label="企业邮箱" span={24}>{detail.email ? detail.email : '未公开'}</Descriptions.Item>
                                                    <Descriptions.Item label="企业官网" span={24} >{detail.website ? detail.website : '未公开'}</Descriptions.Item>
                                                    <Descriptions.Item label="企业传真" span={24} >{detail.fax ? detail.fax : '未公开'}</Descriptions.Item>
                                                </Descriptions>
                                            </Space>
                                        </Col>
                                        <Col span={24}>
                                            <Space direction='vertical' style={{ width: '100%' }}>
                                                <Typography.Title level={5}>在招职位</Typography.Title>
                                                <div style={{ background: '#f5f5f5', padding: 20, borderRadius: 8 }}>
                                                    <Row gutter={[10, 10]} style={{ width: '100%' }}>
                                                        <Col span={24}>
                                                            {
                                                             list &&   list.length > 0 && list.map((item: any, index: number) => (
                                                                    <>
                                                                        <CommonJob item={item}></CommonJob>
                                                                    </>
                                                                ))
                                                            }
                                                            {
                                                                !list || list.length == 0 && <EmptyResult description="没有找到符合条件的职位" />
                                                            }
                                                        </Col>
                                                    </Row>
                                                </div>


                                            </Space>
                                        </Col>
                                    </Row>
                                </Space>
                            </Space>

                            {/* <Space direction='vertical' size={60} style={{ margin: '40px 0', width: '100%' }}>
                                    <Card
                                        style={{
                                            border: 'none'
                                        }}
                                        title={
                                            <>
                                                <Space>
                                                    <Image src={detail.photo ? detail.photo : '/images/onlylogo.jpg'} width={48} height={48}></Image>
                                                    <Typography.Title level={4}>{detail.full_name}</Typography.Title>
                                                </Space>
                                            </>
                                        }
                                        extra={<>
                                            <Space>
                                                <Button type='primary' onClick={() => {
                                                    setList([])
                                                    setCurrent(1)
                                                }}>企业详情</Button>
                                                <Button type='primary' onClick={() => {
                                                    GetJobCompanyjobs({ company_id: searchParams.get('id') }).then(res => {
                                                        setList(res.data.jobs)
                                                    })
                                                    setCurrent(2)
                                                }}>在招职位</Button>
                                            </Space>
                                        </>}
                                        styles={{
                                            header: {
                                                borderBottom: 'none'
                                            },
                                            title: {
                                                fontSize: '14px'
                                            },
                                        }}>
                                        {current === 1 ? <>
                                            <Row gutter={[20, 10]} style={{ minHeight: '600px', width: '100%' }}>
                                                <Col span={16}>
                                                    <Space direction='vertical'>
                                                        <Space direction='vertical'>
                                                            <Typography.Title level={5}>企业介绍</Typography.Title>
                                                            <Typography.Paragraph>
                                                                <div dangerouslySetInnerHTML={{ __html: detail.introduction }} />
                                                            </Typography.Paragraph>
                                                        </Space>
                                                        <Space direction='vertical'>
                                                            <Typography.Title level={5}>企业相册</Typography.Title>
                                                            <Typography.Paragraph>
                                                                In the process of internal desktop applications development, many different design specs and
                                                                implementations would be involved, which might cause designers and developers difficulties and
                                                                duplication and reduce the efficiency of development.
                                                            </Typography.Paragraph>
                                                        </Space>
                                                        <Space direction='vertical'>
                                                            <Typography.Title level={5}>企业地址</Typography.Title>
                                                            <Typography.Paragraph>
                                                                <Space direction='vertical'>
                                                                    <Space>{detail.detail_address} <Link to='/'>导航</Link></Space>
                                                                    <Image src='/images/bg1.jpg'></Image>
                                                                </Space>

                                                            </Typography.Paragraph>
                                                        </Space>
                                                    </Space>
                                                </Col>
                                                <Col span={8}>
                                                    <Space direction='vertical' size={30} style={{ width: '100%' }}>
                                                        <Card bordered={false} style={{ boxShadow: '0 2px 20px #edfff3', borderRadius: '8px' }}>
                                                            <Descriptions>
                                                                <Descriptions.Item label="社会统一信用代码" span={24}>{detail.registration_number}</Descriptions.Item>
                                                                <Descriptions.Item label="企业邮箱" span={24}>{detail.email ? detail.email : '未公开'}</Descriptions.Item>
                                                                <Descriptions.Item label="企业官网" span={24}>{detail.website ? detail.website : '未公开'}</Descriptions.Item>
                                                                <Descriptions.Item label="企业传真" span={24}>{detail.fax ? detail.fax : '未公开'}</Descriptions.Item>
                                                            </Descriptions>
                                                        </Card>
                                                        <Card bordered={false} style={{ boxShadow: '0 2px 20px #edfff3', borderRadius: '8px' }}>
                                                            <Descriptions>
                                                                <Descriptions.Item label="注册日期" span={24}>{detail.situation.establishment_date}</Descriptions.Item>
                                                                <Descriptions.Item label="企业性质" span={24}>{detail.situation.nature_text}</Descriptions.Item>
                                                                <Descriptions.Item label="所属行业" span={24}>{detail.situation.industry_text}</Descriptions.Item>
                                                                <Descriptions.Item label="企业规模" span={24}>{detail.situation.scale_text}</Descriptions.Item>
                                                            </Descriptions>
                                                        </Card>
                                                        <Card
                                                            bordered={false}
                                                            title="联系方式"
                                                            actions={[
                                                                <PhoneOutlined style={{ color: '#19be6e' }} />
                                                            ]}
                                                            style={{ border: '1px solid #edfff3', borderRadius: '8px' }}>
                                                            <Card.Meta
                                                                avatar={<Image src={detail.photo ? detail.photo : '/images/onlylogo.jpg'} width={48} height={48}></Image>}
                                                                title={detail.contact}
                                                                description={detail.phone}
                                                            />
                                                        </Card>

                                                    </Space>
                                                </Col>
                                            </Row>

                                        </> : <>
                                            在招岗位
                                            {
                                                list.length > 0 && <>
                                                    <div style={{ minHeight: 700 }}>
                                                        <Row gutter={[10, 10]} style={{ marginBottom: 40, margin: '40px 0', width: '100%' }}>
                                                            {
                                                                list.length > 0 && list.map((item: any, index: number) => (
                                                                    <>
                                                                        <Col span={8}>
                                                                            <Card size="small"
                                                                                title={
                                                                                    <>
                                                                                        <Link to={{ pathname: `/job/detail?id=${item.id}` }} target="_blank" style={{ color: '#000000', fontSize: 16, marginRight: 10 }}>
                                                                                            {item.name}
                                                                                        </Link>
                                                                                        {item.urgent === 1 && <Tag icon={<FireOutlined />} bordered={false} color="#f50">急招</Tag>}
                                                                                    </>
                                                                                }
                                                                                extra={<StarOutlined />}
                                                                                styles={{
                                                                                    header: {
                                                                                        borderBottom: 'none'
                                                                                    },
                                                                                    title: {
                                                                                        fontSize: '14px'
                                                                                    },
                                                                                }}>
                                                                                <Space size={0}>

                                                                                    <Tag>{item.experience_text ? item.experience_text : '经验不限'}</Tag>
                                                                                    <Tag> {item.school_degree_text ? item.school_degree_text : '学历不限'}</Tag>
                                                                                    <Tag> {item.profelevel_text ? item.profelevel_text : '职称不限'}</Tag>
                                                                                </Space>
                                                                                <Card.Meta
                                                                                    style={{ marginTop: 20 }}
                                                                                    avatar={<Avatar src="/images/onlylogo.jpg" style={{ width: 48, height: 48 }} />}
                                                                                    title={<Link to={{ pathname: `/job/detail?id=${item.id}` }} target="_blank" style={{ color: '#000000', fontSize: '12px' }}>
                                                                                        {item.full_name}
                                                                                    </Link>}
                                                                                    description={<><div style={{ fontSize: '12px' }}>{item.locations ? item.locations[0].name : '未知地址'}</div></>}
                                                                                />
                                                                            </Card>
                                                                        </Col>
                                                                    </>
                                                                ))
                                                            }
                                                        </Row>
                                                    </div>

                                                </>
                                            }
                                        </>}

                                    </Card>
                                </Space> */}
                        </>
                    }

                </PageContainer >
            </ConfigProvider >
        </>
    );
};

export default HomePage;