Inspection/web/client/src/sections/deviceManage/containers/deviceManage.js

import React, { useEffect, useState } from 'react'
import { Spin, Popconfirm, message, Button, Input } from 'antd';
import { connect } from 'react-redux';
import ProTable from '@ant-design/pro-table';
import DeviceModal from '../components/modelModal'
import moment from 'moment';
import ImportDeviceModal from '../components/importDevicesModal'
function DeviceManagement(props) {
    const { loading, clientHeight, actions, dispatch, devices } = props;
    const [pageSize, setPageSize] = useState(10);
    const [currentPage, setCurrentPage] = useState(1);
    const [rowSelected, setRowSelected] = useState([])
    const [showImportModal, setShowImportModal] = useState(false);
    const [name, setName] = useState();

    const queryData = (search) => {
        const query = {
            limit: search ? 10 : pageSize || 10,
            page: search ? 1 : currentPage || 1,
            name: name
        }
        dispatch(actions.deviceManage.getDeviceList(query));
    }

    useEffect(() => {
        queryData();
    }, [pageSize, currentPage]);

    const handleDelete = (id) => {
        dispatch(actions.deviceManage.deleteDevice(id)).then(() => {
            queryData();
            setRowSelected([])
        });
    };

    const onFinish = async (values, editData) => {
        if (editData) {
            const dataToSave = { ...values }
            return dispatch(
                actions.deviceManage.modifyDevice(editData.id, dataToSave, values?.msg || ''),
            ).then((res) => {
                if (res.success) {
                    queryData();
                    return true;
                } else {
                    return false;
                }
            });
        }

        return dispatch(actions.deviceManage.addDevice({
            ...values,
        })).then(res => {
            if (res.success) {
                queryData();
                return true;
            } else {
                return false;
            }
        });
    };

    const columns = [
        {
            title: '设备名称',
            dataIndex: 'name',
            ellipsis: true,
        },
        {
            title: '设备类型',
            dataIndex: 'type',
            ellipsis: true,
        },
        {
            title: '规格型号',
            dataIndex: 'specification',
            ellipsis: true,
        },
        {
            title: '生产日期',
            dataIndex: 'dateProduced',
            ellipsis: true,
        },
        {
            title: '安装时间',
            dataIndex: 'dateInstall',
            ellipsis: true,
        },
        {
            title: '质保期',
            dataIndex: 'dateGuarantee',
            ellipsis: true,
            search: false,
        },
        {
            title: '维保期',
            dataIndex: 'dateMainten',
            ellipsis: true,
        },
        {
            title: '设备投入使用时长',
            dataIndex: 'length',
            ellipsis: true,
            render: (text, record) => {
                const start = moment(record?.dateInstall);
                const end = moment();
                const days = end.diff(start, 'days');

                return days + '天'
            }

        },
        {
            title: '操作',
            width: 160,
            key: 'option',
            valueType: 'option',
            render: (text, record) => {
                const options = [];
                options.push(<DeviceModal
                    triggerRender={<a>编辑</a>}
                    editData={record}
                    title="编辑设备"
                    onFinish={onFinish}
                    key="editModel"
                />)

                options.push(
                    <Popconfirm
                        key="del"
                        placement="top"
                        title="是否确认删除该设备？"
                        onConfirm={() => handleDelete(record.id)}
                        okText="是"
                        cancelText="否"
                    >
                        <a>删除</a>
                    </Popconfirm>)

                return options;

            },
        },
    ];

    return <div id='patrol-record' className='global-main'>
        <Spin spinning={loading}>
            <div style={{ marginBottom: 19 }}>
                <div className='top' style={{ marginBottom: 19 }}>
                    <div className='title'>
                        <span className='line'></span>
                        <span className='cn'>设备管理</span>
                        <span className='en'>&nbsp;DEVICE</span>
                    </div>
                    <div>
                        <DeviceModal
                            triggerRender={<Button type='primary'>新建</Button>}
                            title="新建设备"
                            onFinish={onFinish}
                            key="addModel"
                        />
                        <Button type="primary" style={{ marginRight: 10, marginLeft: 10 }} onClick={() => { setShowImportModal(true) }}>批量新增</Button>
                        <Popconfirm title="确认删除?" onConfirm={() => {
                            rowSelected?.length > 0 ? handleDelete(rowSelected?.toString()) : message.warning('请先选择要删除的设备')
                        }}>
                            <Button>批量删除</Button>
                        </Popconfirm>

                        <Input onChange={e => setName(e?.target?.value)} style={{ width: '13vw', marginLeft: 20, marginRight: 10 }} />
                        <Button type="primary" onClick={() => {
                            setPageSize(10)
                            setCurrentPage(1)
                            queryData(true)
                        }}>查询</Button>
                    </div>
                </div>
            </div>
            <ProTable
                columns={columns}
                rowKey="id"

                dateFormatter="string"
                scroll={
                    {
                        scrollToFirstRowOnChange: true,
                        y: clientHeight - 260
                    }
                }
                pagination={{
                    size: 'large',
                    total: devices?.count,
                    showSizeChanger: true,
                    // showQuickJumper: true,
                    current: currentPage,
                    pageSize: pageSize || 10,
                    pageSizeOptions: [10, 20, 50],
                    showTotal: (total) => {
                        return <span style={{ fontSize: 15 }}>{`共${Math.ceil(total / pageSize)}页，${total}项`}</span>
                    },
                    onShowSizeChange: (currentPage, pageSize) => {
                        setCurrentPage(currentPage);
                        setPageSize(pageSize);
                    },
                    onChange: (page, pageSize) => {
                        setCurrentPage(page);
                        setPageSize(pageSize);
                    }
                }}
                dataSource={devices?.rows || []}
                rowSelection={{
                    selectedRowKeys: rowSelected,
                    onChange: (selectedRowKeys) => {
                        setRowSelected(selectedRowKeys);
                    },
                    getCheckboxProps: (record) => {
                        return {
                            disabled: record.username === 'SuperAdmin',
                        }
                    }
                }}
                options={false}
                search={false}
            />
            {showImportModal && <ImportDeviceModal
                devices={devices?.rows || []}
                onCancel={() => {
                    setShowImportModal(false)
                }}
                onOk={() => {
                    setShowImportModal(false)
                    queryData()
                }}
            />}
        </Spin>
    </div>


}

function mapStateToProps(state) {
    const {
        auth, global, device
    } = state;
    return {
        loading: device.isRequesting,
        clientHeight: global.clientHeight,
        actions: global.actions,
        devices: device?.data || {}
    };
}

export default connect(mapStateToProps)(DeviceManagement);