publictransportation/src/pages/homePageChild/carCompletionRate/carCompletionRate.jsx

import {Table, Button, Input, Popconfirm} from "antd";
import {useState, useEffect} from "react";
import ModalHooks from "./components/modal.jsx";
import "./carCompletionRate.scss";
import axios from "@/utils/axios.js";

const {Column} = Table;

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

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

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

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

    }
    // 线路下拉框
    const [option,setOption] = useState([])
    // 线路数据
    const [lineList, setLineList] = useState([])
    /**
     * 线路数据请求
     * @returns {Promise<void>}
     */
    async function getLineData() {
        let {data} = await axios.get('/busLine/getList')
        setLineList(data)
        let option = data.map(item => {
            return {
                label: item.lineName,
                value: item.lineId,
            }
        })
        setOption(option)

    }
    // 获取数据
    async function getData() {
        let {data} = await axios.get("/homePage/getDepartPunctualityRateList");
        setData(data);
    }
    // 设置线路名称
    function setText(text){
       let it= option.find((item)=>item.value===text)?.label
        return it
    }
    useEffect(() => {
        getLineData()
        getData();
    }, []);
    return (
        <div className="completion">
            <div className="top">

                <div className="button">
                    <Button type="primary" onClick={addUser}>
                        添加准点率
                    </Button>
                </div>
            </div>
            <Table
                dataSource={data}
                bordered={true}
                rowKey="id"
                pagination={{
                    current: 1, // 当前页数
                    pageSize: 12, // 每页显示的数量
                }}
            >
                <Column title="线路名称" dataIndex="lineId" key="id"  render={(text)=>(
                setText(text)
                )
                }></Column>
                <Column title="跑法" dataIndex="modelId" key="id" render={(text)=>
                    !text?'上行':'下行'
                }/>
                <Column title="发车总数" dataIndex="total" key="id" />
                <Column title="准点数" dataIndex="onTime" key="id"/>
                <Column title="开始站点" dataIndex="startStation" key="id"/>
                <Column title="结束站点" dataIndex="endStation" key="id"/>
                <Column title="车牌" dataIndex="licensePlate" key="id"/>
                <Column
                    title="操作"
                    width="170px"
                    dataIndex="id"
                    key="id"
                    render={(text, record) => (
                        <div className="btn">
                            <Button type="primary" onClick={() => modify(record)}>
                                修改
                            </Button>

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