PersonalDutyInfo.jsx

import React, { useState, useEffect } from 'react';
import { Card, Form, Row, Col, Avatar, Pagination, Spin , Tabs } from 'antd'
import { connect, history } from 'umi'
import Description from '@/components/Customized/Description';
import moment from 'moment'

import style from './index.less'
import { dispatchHandle } from '@/utils/publicHandle';
import useFormTable from '@/useHooks/useFormTable';

const {TabPane} = Tabs

const PersonalDutyInfo = (props) => {
    const {
        dispatch,
        loading,
        location: {
            query
        },
        dispatching: {
            taskList,
            dutyPeopleDetail
        }
    } = props
    const [form] = Form.useForm()
    const infoData = [
        { title: '姓名', name: 'name' },
        { title: '工号', name: 'jobNumber' },
        {
            title: '部门', name: 'departmentName',
        },
        {
            title: '职位', name: 'position',
        },
        { title: '值班类型', name: 'dutyType' },
        { title: '值班时间', name: 'dutyHours' },
        { title: '联系电话', name: 'phone' },
    ]
    const getListItem = (payload = {}) => {
        const payloads = {
            ...payload,
            taskStates: [1 , 2]
        }
        dispatchHandle(
            dispatch,
            'dispatching/operation_service_m_task_taskList_post',
            payloads
        )
    }
    const { tableProps, search } = useFormTable(getListItem, {
        form, manual: true
    })
    useEffect(() => {
        if (query?.userId && query?.dutyDate) {
            search.submit({
                inquiryDate: query?.dutyDate,
                userId: query?.userId,
                queryFormat: 'YYYY-MM-DD'
            })
            dispatchHandle(
                dispatch,
                'dispatching/common_service_calendar_attcDasicInformation_post',
                { userId: query?.userId }
            )
        }
    }, [])
    const stateType = { 0: '未分派', 1: '未开始', 2: '进行中', 3: '异常', 4: '已完成', 5: '已关闭', 6: '已超时', 7: '待验收', 8: '验收通过', 9: '验收不通过', 10: '已撤销' }
    const stateColor = { 0: 'btn_black', 1: 'btn_ing', 2: 'btn_ing', 3: 'btn_abnormal', 4: 'btn_success', 5: 'btn_disabled', 6: 'btn_abnormal', 7: 'btn_common', 8: 'btn_success', 9: 'btn_abnormal', 10: 'btn_disabled' }
    const targetUrl = (record) => {
        const { id, planBusinessType, auditId } = record
        const urlTask = {  // 任务
            schedule: `/ops/staff/workforce/audit/union/${auditId}`, // 排班计划
            personnel_leave: `/ops/staff/leave/${id}`, // 人员请假
            personnel_adjustment: `/ops/staff/shifts/${id}`, // 人员调班
            inspection: `/ops/inspection/tasks/record?id=${id}`, // 巡检计划
            device_inventory: `/warehouse-keeper/homework/inventory/task/invent/${id}`, // 设备盘点
            curing: `/ops/mainmanage/maintask/taskdetail?id=${id}`, // 养护
            repair_task: `/ops/maintenance/order/detail?id=${id}`, // 维修任务
            material_check_task: `/warehouse-keeper/homework/inventory/task/audit/main/auditView/${id}`, // 库存盘点任务
        }[planBusinessType]

        history.push(urlTask)
    }
    return <>
        <Card style={{ marginBottom: 16 }}>
            <h3 className={style.h3_title}>个人信息</h3>
            <Description columns={4} data={infoData} dataSource={dutyPeopleDetail} />
        </Card>
        <Tabs style={{marginBottom: 11 , background: '#fff' , paddingLeft: 16}}>
            <TabPane tab="工作"/>
        </Tabs>
        <Spin spinning={loading || false}>
            <Row gutter={12}>
                {taskList?.list?.map((item, index) => (
                    <Col span={12} key={index}>
                        <Card
                            key={index}
                            size="small"
                            style={{ margin: '5px 0', cursor: 'pointer' }}
                            onClick={() => targetUrl(item)}
                            title={
                                <div>
                                    <span style={{ background: '#85C700' }} className={style.calendar_title}>
                                        {item?.planBusinessTypeName || ''}
                                    </span>{item?.taskName}
                                </div>
                            }
                            extra={
                                (item?.plannedStartTime || item?.plannedStartTime) && (
                                    <div>
                                        {item?.plannedStartTime && moment(item.plannedStartTime).format("YYYY-MM-DD HH:mm:ss") || '~'}
                        -
                                        {item?.plannedEndTime && moment(item.plannedEndTime).format("YYYY-MM-DD HH:mm:ss") || '~'}
                                    </div>
                                )
                            }
                        >
                            <div className="pos_btw" style={{ padding: '0 10px' }}>
                                <div className="pos_aline">
                                    <Avatar
                                        size={45}
                                        src={item?.creationUserUrl}
                                        icon={<img src="/img/tempHead.png" />}
                                    />
                                    <span style={{ marginLeft: 10 }}>
                                        <p>{item?.taskNumber || '系统触发'}</p>
                                        <p>{item?.creationTime && moment(item.creationTime).format("YYYY-MM-DD")}</p>
                                    </span>
                                </div>
                                <div className={stateColor[item?.taskState]}>
                                    {stateType[item?.taskState]}
                                </div>
                            </div>
                        </Card>
                    </Col>
                ))}
                {
                    taskList?.list?.length > 0 && (<Col span={24} className="pos_end" style={{ marginTop: 15 }}>
                        <Pagination
                            size="small"
                            {...tableProps?.pagination}
                            onChange={(pageNumber, pageSize) =>
                                tableProps?.onChange({ current: pageNumber, pageSize })
                            }
                        />
                    </Col>)
                }
            </Row>
        </Spin>
    </>
}

export default connect(({ dispatching, user, dict, loading }) => ({
    dict,
    dispatching,
    user,
    loading: loading.effects['dispatching/operation_service_m_task_taskList_post']
}))(PersonalDutyInfo);