publictransportation/src/pages/homePageChild/stationEquipment/stationEquipment.jsx

import {Table, Button, Input, Popconfirm} from "antd";
import {useState, useEffect} from "react";
import ModalHooks from "./components/stationEquipmentModal.jsx";
import "./stationEquipment.scss";
import axios from "@/utils/axios.js";
import {  useDispatch } from 'react-redux';
import {  setDictData } from '@/store/reducer.js';
const {Column} = Table;

export default function StationEquipment() {

    // 页面数据
    const [data, setData] = useState([]);
    // 是否展示弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [row, setRow] = useState({});

    // 新增用户页面
    function addUser() {
        setRow([]);
        setIsModalOpen(true);
    }

    // 关闭页面
    function closeModal() {
        setIsModalOpen(false);

        getData()
        dispatch(setDictData(data))
    }

    // 点击修改的回调
    function modify(data) {
        setRow(data);
        setIsModalOpen(true);

    }
    // reduce状态
    const dispatch = useDispatch();
    // 获取数据
    async function getData() {
        let {data} = await axios.get("/homePage/getBusTotal");
        setData([data]);

    }


    const columns = [
        {
            title: '设备车辆数量',
            dataIndex: 'busNum',
            key: 'id',
        },
        {
            title: '线路数量',
            dataIndex: 'lineNum',
            key: 'id',
        },
        {
            title: '场站数量',
            dataIndex: 'stationNum',
            key: 'id',
        },
        {
            title: '中途站数量',
            dataIndex: 'midwayStationNum',
            key: 'id',
        },
        {
            title: '班次数量',
            dataIndex: 'classesNum',
            key: 'id',
        },
        {
            title: '总里程',
            dataIndex: 'totalMileage',
            key: 'id',
        },
        {
            title: '入场率',
            dataIndex: 'admissionRate',
            key: 'id',
        },

        {
            title: '操作',
           render:(text, record)=>(
               <div className="btn">
                   <Button type="primary" onClick={() => modify(record)}>
                       修改
                   </Button>

               </div>
           )
        },

    ];
    useEffect(() => {
        getData();
    }, []);
    return (
        <div className="user">

            <Table
                dataSource={data}
                pagination={{position: ["bottomRight"]}}
                bordered={true}
                rowKey="id"
                columns={columns}

            >

            </Table>
            <ModalHooks
                isModalOpen={isModalOpen}
                closeModal={closeModal}
                row={row}
            ></ModalHooks>
        </div>
    );
}