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

import React, { useState, useEffect } from 'react';
import { connect } from 'react-redux';
import { getAssess, delAssess, editAssess } from '../actions/assess';
import ProTable from '@ant-design/pro-table';
import AssessModal from '../components/assessModal';
import { Form, Space, DatePicker, Button, Select, Popconfirm } from 'antd'
import moment from 'moment';

export const unitList = [
    '县道',
    '蒋巷镇',
    '三江镇',
    '塔城乡',
    '泾口乡',
    '八一乡',
    '冈上镇',
    '南新乡',
    '富山乡',
    '莲塘镇',
    '金湖管理处',
    '武阳镇',
    '向塘镇',
    '幽兰镇',
    '广福镇',
    '塘南镇',
    '银三角管委会',
    '黄马乡',
]
function Assess(props) {
    const { dispatch, assess } = props;
    const [assessModalVisible, setAssessModalVisible] = useState(false);
    const [editData, setEditData] = useState(null);
    const [query, setQuery] = useState({ page: 1, pageSize: 10 })
    const [loading, setLoading] = useState(false);
    const [isCheck, setIsCheck] = useState(false)
    const [editAble, setEditAble] = useState(user?.username !== 'SuperAdmin' && user?.userResources?.find(i => i.resourceId === 'ASSESSMANAGE')?.isshow === "true" ? true : '')
    useEffect(() => {
        return () => { };
    }, []);

    useEffect(() => {
        getData()
    }, [query])

    const getData = () => {
        setLoading(true)
        dispatch(getAssess(query)).then(res => {
            setLoading(false)
        })
    }

    return (
        <div>
            <div style={{ marginBottom: '20px', display: 'flex', justifyContent: 'space-between' }}>
                <Form layout="inline" onFinish={(v) => {
                    setQuery({ ...query, unit: v.unit, month: v.month ? moment(v.month).format() : undefined })
                }}>
                    <Form.Item name="unit" label="责任单位" >
                        <Select style={{ width: 200 }} placeholder="全部" allowClear>
                            {
                                unitList.map(item => (
                                    <Option value={item} key={item} />
                                ))
                            }
                        </Select>
                    </Form.Item>

                    <Form.Item name="month" label="考核月份">
                        <DatePicker picker="month" style={{ width: 200 }} />
                    </Form.Item>

                    <Form.Item>
                        <Button type="primary" htmlType="submit">搜索</Button>
                    </Form.Item>
                </Form>

                <Button type="primary" disabled={editAble}
                    onClick={() => {
                        setAssessModalVisible(true)
                    }}>新增</Button>
            </div>
            <ProTable
                columns={[{
                    title: '责任单位',
                    dataIndex: 'unit',
                    key: 'unit',
                },
                {
                    title: '考核月份',
                    dataIndex: 'month',
                    key: 'month',
                    render: (text, record) => (
                        text ? moment(record.month).format('YYYY-MM') : ''
                    )
                },
                {
                    title: '考核得分',
                    dataIndex: 'totalPoints',
                    key: 'totalPoints',
                },
                {
                    title: '操作',
                    key: 'action',
                    render: (text, record) => (
                        <span>
                            <Button type="link" onClick={() => {
                                setAssessModalVisible(true)
                                setEditData(record)
                                setIsCheck(true)
                            }}>详情</Button>
                            <Button type="link" onClick={() => {
                                setAssessModalVisible(true)
                                setEditData(record)
                                disabled = { editAble }
                            }}>编辑</Button>
                            <Popconfirm
                                title="确定删除此条数据吗?"
                                onConfirm={() => {
                                    setLoading(true)
                                    dispatch(delAssess({ id: record.id })).then(res => {
                                        setLoading(false)
                                        if (res.success) {
                                            getData()
                                        }
                                    })
                                }}
                            >
                                <Button type="link" danger disabled={editAble}>删除</Button>
                            </Popconfirm>
                        </span>
                    ),
                },]}
                dataSource={assess.rows || []}
                loading={loading}
                pagination={{
                    total: assess?.count || 0,
                    pageSize: 10,
                    defaultPageSize: 10,
                    showSizeChanger: false,
                    onChange: (page, pageSize) => {
                        setQuery({
                            ...query,
                            page, limit: pageSize
                        })
                    }
                }}
                rowKey="key"
                toolBarRender={false}
                search={false}
            />
            {
                assessModalVisible ? <AssessModal check={isCheck} visible={assessModalVisible} editData={editData} onCancel={() => {
                    getData()
                    setIsCheck(false)
                    setEditData(null)
                    setAssessModalVisible(false)
                }} /> : ''
            }
        </div>
    );
}
function mapStateToProps(state) {
    const { auth, assess } = state
    return {
        user: auth.user,
        assess: assess.data || [],
    }
}
export default connect(mapStateToProps)(Assess);