Highways4Good/web/client/src/sections/fillion/containers/task.js

'use strict';
import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { Button, Table, Spin, Select, Divider, Popconfirm } from 'antd';
import moment from 'moment';
import { debounce } from 'lodash'
import AddModal from '../components/task/addTaskModal';
import { getRoadway } from '../actions/infor'
import { getTask } from '../actions/task'
import { delTask } from '../actions/task'

const Task = (props) => {
    const { dispatch, isRequesting } = props
    const [addModalVis, setAddModalVis] = useState(false)
    const [roadRes, setRoadRes] = useState([])//路线列表
    const [selectVal, setSelectVal] = useState('all')//选择框得值
    const [inputVal, setIputVal] = useState(undefined)
    const [taskRes, setTaskRes] = useState([])
    const [recordRow, setRecordRow] = useState(null)
    const [lookVal, setLookval] = useState('')
    useEffect(async () => {
        const res = await dispatch(getRoadway({}))
        setRoadRes(res.payload.data)
    }, [])

    const getData = async (querySelect = { id: inputVal, isdanger: selectVal === 'all' ? undefined : selectVal === 'y' ? true : false }) => {
        console.log('getData', inputVal, selectVal)
        const task = await dispatch(getTask(querySelect))
        setTaskRes(task.payload?.data)
    }
    useEffect(async () => {
        getData()
    }, [])
    //搜索道路名称
    const searchRoadName = async (value) => {
        const task = await dispatch(getTask({ id: value, isdanger: selectVal === 'all' ? undefined : selectVal === 'y' ? true : false }))
        setTaskRes(task.payload?.data)
        setIputVal(value)
    }
    //选择安全是否消除
    const changeSelect = async (value) => {
        console.log('value', value)
        const task1 = await dispatch(getTask({ id: inputVal, isdanger: value === 'all' ? undefined : value === 'y' ? true : false }))
        setTaskRes(task1.payload?.data)
        setSelectVal(value)
    }
    //刪除task
    const delTaskHandler = async (record) => {
        const res = await dispatch(delTask({ id: record.id }))
        if (res.success) {
            const task = await getData()
            setTaskRes(task.payload?.data)
        }
    }
    //查看
    const look = (record) => {
        setAddModalVis(true)
        setLookval(record)
        setRecordRow(record);

    }
    //配置表格列
    const columns = [{
        title: '路线名称',
        render: (_, record) => {
            return <div>{record.road.routeName}</div>
        }
    },
    {
        title: '路线代码',
        render: (_, record) => {
            return <div>{record.road.routeCode}</div>
        }
    },
    {
        title: '隐患说明',
        dataIndex: 'dangerDescription',
    },
    {
        title: '下发时间',
        render: (_, record) => {
            return <div>{record.issuanceTime ? moment(record?.issuanceTime).format('YYYY-MM-DD HH:mm:ss') : ''}</div>
        }
    },
    {
        title: '责任人',
        render: (_, record) => {
            return <div>{record.user.name}</div>
        }
    },
    {
        title: '是否消除隐患',
        render: (_, record) => {
            return <div>{record.isdanger === null ? '' : record.isdanger === 'true' ? '是' : '否'}</div>
        }
    },
    {
        title: '上报时间',
        render: (_, record) => {
            return <div>{record.reportTime ? moment(record.reportTime).format('YYYY-MM-DD HH:mm:ss') : ''}</div>
        }
    },
    {
        title: '操作',
        render: (dom, record) => {
            return <div>
                {record.reportTime ? '' : <Button type='link' onClick={() => {
                    setRecordRow(record);
                    setAddModalVis(true)
                }}>编辑</Button>}
                <Popconfirm title='确定要删除吗？' onConfirm={() => { delTaskHandler(record) }}><Button type='link'>刪除</Button></Popconfirm>
                <Button type='link' onClick={() => { look(record) }}>查看</Button>
            </div>

        }
    },
    ]

    //配置分页
    const paginationOpt = {
        defaultCurrent: 1,
        defaultPageSize: 5,
        total: taskRes?.count,
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["5", "10", "15"],
        showTotal: function () {
            return `共有${taskRes?.count}条`
        }
    }


    return (<div className='taskMenu'>
        <div style={{ display: 'flex', flexWrap: ' nowrap', justifyContent: 'space-between' }}>
            <div style={{ marginLeft: 20 }}>
                路线名称:  <Select
                    allowClear='true'
                    loading={isRequesting}
                    showSearch
                    placeholder="请输入关键词"
                    //optionFilterProp="children"
                    onChange={(value) => { searchRoadName(value) }}
                    //onSearch={(value) => { console.log('11111', value) }}
                    filterOption={(input, option) =>
                        (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                    }
                    options={roadRes?.map((item) => ({
                        label: item.routeName,
                        value: item.id
                    })
                    )}
                />
            </div>
            <div>
                是否存在安全隐患:  <Select placeholder='请输入关键词'
                    options={[{ value: 'all', label: '全部' }, { value: 'y', label: '是' }, { value: 'n', label: '否' }]}

                    onChange={(value) => { changeSelect(value) }}>
                </Select>
            </div>
            <div >
                <Button type='primary' onClick={() => { setRecordRow(null); setAddModalVis(true) }}>新增</Button>
            </div>
        </div>
        <Divider style={{ marginTop: 10 }} />
        <Table columns={columns} dataSource={taskRes?.rows} size="small" pagination={paginationOpt}>
        </Table>
        <AddModal visible={addModalVis} onClose={() => { setAddModalVis(false); getData(); setRecordRow(null); setLookval(null) }} recordRow={recordRow}
            lookVal={lookVal}
        ></AddModal>

    </div >)


}

function mapStateToProps(state) {
    const { auth } = state;
    return {
        user: auth.user,
        error: auth.error,
        isRequesting: auth.isRequesting,
    }
}

export default connect(mapStateToProps)(Task);