AllTasks.jsx

import React, { useRef, useState, useEffect } from "react"
import { Card, Space, Tag, Input, Form, Select, Button, Tabs, Table, Divider, Popconfirm, Row, Col } from "antd";
import { SettingOutlined, SearchOutlined } from "@ant-design/icons"
import { history, connect, useAccess, Access } from "umi";
import moment from 'moment'

import PopTableCheckbox from '@/components/PopTableCheckbox';
import useFormTable from '@/useHooks/useFormTable'
import { dispatchHandle } from '@/utils/publicHandle'
import CheckAccept from "./components/CheckAccept"
import AssignTaskModal from './components/AssignTaskModal'

import style from "./index.less"
import TreeSelector from "@/components/TreeSelector";
import useUrlState from '@ahooksjs/use-url-state'

const { Option } = Select;
const { TabPane } = Tabs;

const AllTasks = (props) => {
    const {
        dispatch,
        loading,
        maintainTypeList,
        user: { userTree, currentUser },
        maintaining: {
            taskList
        },
        query
    } = props
    const access = useAccess();
    const popRef = useRef();
    const tabsList = [
        { name: '全部任务', key: '' },
        { name: '未分派', key: 0 },
        { name: '未开始', key: 1 },
        { name: '进行中', key: 2 },
        { name: '已超时', key: 6 },
        { name: '待验收', key: 7 },
        { name: '已完成', key: 4 },
        { name: '验收不通过', key: 9 },
        { name: '已关闭', key: 5 }
    ]
    const [form] = Form.useForm();
    const timeFormat = 'YYYY-MM-DD HH:mm:ss';
    const [tabType, setTabType] = useState('')
    const [queryParams, setQuertParams] = useUrlState({})
    const getListItem = (payload = {}) => {
        dispatchHandle(
            dispatch,
            'maintaining/operation_service_m_curing_task_pageList_post',
            payload
        )
    }
    const { tableProps, search } = useFormTable(getListItem, {
        form, manual: true
    })
    // tab切换
    const tabChange = (activeKey) => {
        setTabType(activeKey)
        setQuertParams({taskStateFirst: undefined, taskStateSecond: undefined})
        search.submit({
            taskState: activeKey
        })
    }
    useEffect(() => {
        if (query && query?.taskStateFirst && query?.taskStateSecond) {
            // setTabType(query?.type)
            setQuertParams({taskStateFirst: query?.taskStateFirst, taskStateSecond: query?.taskStateSecond})
        } else if (query?.inquiryDate) {
            search.submit({
                inquiryDate: query?.inquiryDate,
                // taskStates: [query?.taskStateFirst, query?.taskStateSecond]
            })
        } else if (query && query?.statisticalTime || (query?.taskType && query?.equipmentId)) {
            search.submit({
                statisticalTime: query?.statisticalTime,
                taskType: query?.taskType || undefined,
                equipmentId: query?.equipmentId || undefined,
                costStatistics: true
            })
            form.setFieldsValue({
                taskType: parseInt(query?.taskType, 10) || undefined
            })
        }
        else {
            search.submit()
        }

    }, [])
    useEffect(()=> {
        if(queryParams?.taskStateFirst && queryParams?.taskStateSecond){
            search.submit({
                taskStates: [queryParams?.taskStateFirst, queryParams?.taskStateSecond] || []
            })
        }
    }, [queryParams])
    // 验收弹框
    const [checkVisible, setCheckVisible] = useState(false)
    const [checkTask, setCheckTask] = useState()
    const checkShowModal = (record) => {
        setCheckVisible(true)
        setCheckTask(record)
    }
    // 分派弹框
    const [assignVisible, setAssignVisible] = useState(false)
    const [assignTask, setAssignTask] = useState()
    const assignAction = (record) => {
        setAssignTask(record.id)
        setAssignVisible(true)
    }
    // 关闭或回复
    const closeTask = (record) => {
        dispatchHandle(
            dispatch,
            'maintaining/operation_service_m_curing_task_closeRecovery_id_get',
            { id: record.id },
            () => {
                search.refresh()
            }
        )
    }
    // 手动开始
    const manualUpdateAction = (id) => {
        dispatchHandle(
            dispatch,
            'maintaining/operation_service_m_curing_task_updateToStart_id_get',
            { id },
            () => {
                search.refresh();
            }
        );
    }
    const taskColumns = [
        {
            title: '任务编号',
            dataIndex: 'taskNumber',
            width: '7%'
        },
        {
            title: '任务名称',
            dataIndex: 'taskName',
            width: '9%'
        },
        {
            title: '养护类型',
            dataIndex: 'taskTypeName',
            width: '9%'
        },
        {
            title: '养护设备',
            dataIndex: 'deviceName',
            width: '9%'
        },
        {
            title: '触发计划/来源',
            dataIndex: 'inspectionId',
            width: '9%',
            render: (text, record) => <a style={{ color: '#1890ff' }}>{record?.taskName || ''}</a>,
        },
        {
            title: '起止时间',
            dataIndex: 'duration',
            key: 'duration',
            align: "center",
            width: '18%',
            render: (text, record) => (
                <>{`${moment(record.plannedStartTime).format(timeFormat)} - ${moment(record.plannedEndTime).format(timeFormat)}` || ''}</>
            ),
        },
        {
            title: '负责人',
            dataIndex: 'principalName',
            width: '7%'
        },
        {
            title: '任务执行人',
            dataIndex: 'taskExecutorNames',
            width: '10%',
            ellipsis: true
        },
        {
            title: '任务状态',
            key: 'taskState',
            dataIndex: 'taskState',
            align: "center",
            width: '10%',
            render: (text, record) => (
                {
                    0: <span className='btn_common'>未分派</span>,
                    1: <span className='btn_success'>未开始</span>,
                    2: <span className='btn_warning'>进行中</span>,
                    6: <span className='btn_alarm'>已超时</span>,
                    4: <span className='btn_common'>已完成</span>,
                    5: <span className='btn_disabled'>已关闭</span>,
                    7: <span className='btn_alarm'>待验收</span>,
                    8: <span className='btn_success'>验收通过</span>,
                    9: <span className='btn_fail'>验收不通过</span>,
                }[text]
            )
        },
        {
            title: '操作',
            align: "center",
            dataIndex: 'action',
            fixed: 'right',
            disabled: true,
            width: '15%',
            render: (text, record) => (
                <>
                    <Access accessible={access.insideAccess('sCcSrjaAyCA')}>
                        <a onClick={() => history.push(`/ops/mainmanage/maintask/taskdetail?id=${record.id}`)}>查看</a>
                    </Access>
                    <Divider type="vertical" />
                    {
                        (currentUser.id && record.principalId) && currentUser.id === record.principalId && record.taskState === 0 && (
                            <Access accessible={access.insideAccess('WwKpPsUAUcS')}>
                                <>
                                    <a onClick={() => assignAction(record)}>分派</a>
                                    <Divider type="vertical" />
                                </>
                            </Access>
                        )
                    }
                    {
                        record.taskState === 7 && (
                            <Access accessible={access.insideAccess('yIuPKTbNHYW')}>
                                <>
                                    <a onClick={() => checkShowModal(record)}>验收</a>
                                    <Divider type="vertical" />
                                </>
                            </Access>
                        )
                    }
                    <Access accessible={access.insideAccess('BdHryTVCcVS')}>
                        <Popconfirm
                            title={`确认${record.taskState === 5 ? '恢复' : '关闭'}此任务？`}
                            onConfirm={() => closeTask(record)}
                        >
                            <a>{record.taskState === 5 ? '恢复' : '关闭'}</a>
                        </Popconfirm>
                    </Access>
                    <Access accessible={access.insideAccess('RvojGTMsoVG')}>
                        {
                            record.taskState === 1 && (<>
                                <Divider type="vertical" />
                                <Popconfirm title="确认手动开始此任务吗?" onConfirm={() => manualUpdateAction(record.id)}>
                                    <a>手动开始</a>
                                </Popconfirm>
                            </>)
                        }
                    </Access>
                </>
            ),
        },

    ];
    // 配置列
    const [tableColumns, setTableColumns] = useState([
        "taskNumber",
        "taskName",
        "taskTypeName",
        "deviceName",
        "inspectionId",
        "duration",
        "principalName",
        "taskExecutorNames",
        "taskState",
        "action"
    ])
    const options = popRef && (popRef.current?.handleFormColumns(tableColumns, taskColumns)) || taskColumns;
    return (
        <div className={style.main_task}>
            {/* // 筛选条件 */}
            <div className={style.main_header}>
                <Form form={form} name="achieve-form" onValuesChange={search.submit}>
                    <Row justify="space-between">
                        <Col span={6}>
                            <Form.Item name="taskType" label="养护类型">
                                <Select allowClear placeholder="请选择">
                                    {
                                        maintainTypeList.length !== 0 && maintainTypeList.map(i => <Option key={i.id} value={i.id}>{i.dicValue}</Option>)
                                    }
                                </Select>
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item name="principalId" label="责任人">
                                <TreeSelector />
                            </Form.Item>
                        </Col>
                        <Col span={6}>
                            <Form.Item name="taskNumberName" label="查询">
                                <Input suffix={<SearchOutlined style={{ color: "rgba(0 , 0 , 0 , 0.25)" }} />} placeholder="请输入任务名称/任务编号" allowClear />
                            </Form.Item>
                        </Col>
                        <Col>
                            <PopTableCheckbox
                                ref={popRef}
                                options={taskColumns}
                                tableColumns={tableColumns}
                                setTableColumns={setTableColumns}
                            >
                                <Button
                                    bd="blue"
                                    icon={<SettingOutlined />}
                                >
                                    配置列</Button>
                            </PopTableCheckbox>
                        </Col>
                    </Row>
                </Form>
            </div>
            <Tabs className={style.tables} type="card" onChange={tabChange} defaultActiveKey={tabType || query?.type}>
                {
                    tabsList.map(item => {
                        return <TabPane tab={item.name} key={item.key} />
                    })
                }
            </Tabs>
            <Table
                loading={loading || false}
                columns={options || taskColumns}
                dataSource={taskList.list}
                // scroll={{
                //     x: 2500
                // }}
                pagination={taskList.pagination}
                {...tableProps}
            />
            <CheckAccept
                checkVisible={checkVisible}
                setCheckVisible={setCheckVisible}
                detail={checkTask}
                type={1}
                search={search}
            />
            <AssignTaskModal
                visible={assignVisible}
                setVisible={setAssignVisible}
                id={assignTask}
                search={search}
            />
        </div>
    )
}

export default connect(({ maintaining, user, dict, loading }) => ({
    user,
    dict,
    maintaining,
    loading: loading.effects['maintaining/operation_service_m_curing_task_pageList_post']
}))(AllTasks)