3、First-Hook-Demo

/*
 * @Date: 2021-12-16 09:47:02
 * @LastEditTime: 2021-12-28 10:06:30
 * @Description: Hook Demo
 */
import React, { useState, useEffect } from 'react'
import styles from './index.less'
import { appWork } from '@/api/index'
import moment from 'moment';
import * as TimeUtils from '@/utils/timeUtils'
import TimeSelect from '../../userManagement/components/timeSelect'
import CommonTable from '../../userManagement/components/table/table'
import { downloadExcel } from '../../utils/utils'
import {
    Layout,
    Row,
    Col,
    Form,
    Button,
    Select,
    notification,
    Tabs,
    Spin
} from 'antd';
const HourFill = () => {
	const { Header, Content } = Layout;
	const { Option } = Select;
	const { TabPane } = Tabs;
    const [tableData, setTableData] = useState([])
    const [titleList, setTitleList] = useState([])
    const [departMent, setDepartment] = useState([])
    const [peopleNum, setPeopleNum] = useState(0)
    const [defaultSelecType, setSelectType] = useState('昨日')
    const [isLoading, setLoading] = useState(false)
    const [params, setParams] = useState({
        dateFrom: TimeUtils.getTimeRange(defaultSelecType)?.dateFrom || '',
        dateTo: TimeUtils.getTimeRange(defaultSelecType)?.dateTo || '',
        centre: '',
        reportType: '未填报'
    })
    const getCenterDepartment = async () => {
        const res = await appWork.GetCenterDepartmentOption({})
        let { getMe, say } = res.data
        if (say.statusCode === '0000') {
            setDepartment(getMe)
        } else {
            notification.error({
                message: '请求错误',
                description: `查询不到部门数据,请重试`,
                duration: 1
            });
            setDepartment([])
        }
    }
    const query = async () => {
        setLoading(true)
        const res = await appWork.GetNotQualifiedInfo({
            ...params
        })
        if (res.data && res.data.say.statusCode === '0000') {
            let { getMe, jsonData } = res.data
            getMe = getMe.map((v, i) => {
                let obj = {}
                v.forEach(p => {
                    obj[p.key] = p.value
                })
                obj['soleKey'] = `${obj['工号']}-${i}`
                return obj
            })
            const resp = await appWork.GetNotQualifiedCount({
                ...params
            })
            let peopleNum = 0
            if (resp.data && resp.data.say.statusCode === "0000") {
                peopleNum = resp.data.getMe[0] * 1
            } else {
                notification.error({
                    message: '请求错误',
                    description: `查询不到填报相关情况,请重试`,
                    duration: 1
                });
            }
            setTableData(getMe)
            setTitleList(jsonData && jsonData.split(','))
            setLoading(false)
            setPeopleNum(peopleNum)
        } else {
            notification.error({
                message: '请求错误',
                description: `查询不到数据,请重试`,
                duration: 1
            });
            setTableData([])
            setTitleList([])
            setLoading(false)
            setPeopleNum(0)
        }
    }
    const handleTimeCheck = (date) => {
        const { dateFrom, dateTo } = date
        setParams({
            ...params,
            dateFrom,
            dateTo
        })
    }
    const handleExport = async () => {
        const res = await appWork.ExportNotQualifiedInfo({
            ...params
        })
        if (res.code) {
            notification.error({
                message: '下载失败，请重试',
                duration: 1
            });
            return void 0
        }
        downloadExcel(res.data.getMe[0])
    }
    const onSelectChange = (centre) => {
        setParams({
            ...params,
            centre
        })
    }
    const tabChange = (reportType) => {
        setParams({
            ...params,
            reportType,
            centre: ''
        })
    }
    const handleGetColumns = () => {
        const arr = titleList.map(v => {
            let obj = {
                title: v,
                dataIndex: v,
                key: v,
                align: 'center',
            }
            if (['工时合计', '标准工时'].includes(v)) obj.render = (text) => Number(text).toFixed(1)
            if (v == '日期') obj.render = (text) => text && moment(new Date(text)).format('YYYY-MM-DD') || ''
            if (v == '直属部门') obj.width = 300
            if (v == '名称') obj.width = 120
            return obj
        })
        return arr
    }

    const columns = handleGetColumns()
    const option = {
        pagination: {
            defaultPageSize: 100
        },
        rowKey: record => record.soleKey,
        bordered: true
    }
    useEffect(() => {
        getCenterDepartment()
    }, [])
    useEffect(() => {
        query()
    }, [params])
    return (
        <div className={styles.hourFill}>
            <Layout>
                <Header>
                    <Row align="middle" justify="space-between">
                        <Col span={16}>
                            <Form.Item label="报表切换">
                                <TimeSelect
                                    allOption={['前日', '昨日', '今日', '自定义']}
                                    defaultSelecType={defaultSelecType}
                                    pickerType={{
                                        name: 'DatePicker',
                                        picker: ''
                                    }}
                                    onCheck={(v) => { handleTimeCheck(v) }}
                                />
                                <div className={styles.departSelect}>
                                    <label>所属中心筛选:</label>
                                    <Select
                                        showSearch
                                        optionFilterProp="children"
                                        value={params.centre || '全部'}
                                        placeholder="请选择所属中心"
                                        onChange={onSelectChange}
                                    >
                                        <Option value="">全部</Option>
                                        {
                                            departMent.map(v => {
                                                return (
                                                    <Option
                                                        key={v}
                                                    >{v}</Option>
                                                )
                                            })
                                        }
                                    </Select>
                                </div>
                            </Form.Item>
                        </Col>
                        <Col span={8} style={{ textAlign: 'right' }}>
                            <Button type="primary" onClick={handleExport}>
                                下载
                            </Button>
                        </Col>
                    </Row>
                </Header>
                <Content>
                    <Tabs
                        defaultActiveKey={params.reportType}
                        type="card"
                        size={'small'}
                        onChange={tabChange}
                    >
                        <TabPane tab="工时未填报" key="未填报"></TabPane>
                        <TabPane tab="已填报未达标" key="未达标"></TabPane>
                    </Tabs>
                    <Spin spinning={isLoading} tip="Loading...">
                        {
                            <div className={styles.num}>
                                <>
                                    {

                                        params.dateFrom && moment(new Date(params.dateFrom)).format('YYYY-MM-DD')

                                    }
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                </>
                                {
                                    params.reportType == '未达标'
                                        ? '已填报未达标人数：'
                                        : (params.reportType == '未填报'
                                            ? '未填报人数：'
                                            : '已填报待审批人数：'
                                        )
                                }
                                总计<span>{peopleNum}</span>人
                            </div>
                        }

                        <CommonTable
                            tHeight='calc(100vh - 260px)'
                            data={tableData}
                            columns={columns}
                            params={option}
                        />

                    </Spin>
                </Content>
            </Layout>
        </div >

    )
}
export default HourFill
`