publictransportation/src/pages/linePageChild/basicInfomationOfTheLine/basicInfomationOfTheLine.jsx

import {Button, Select, Table} from "antd";
import {useEffect, useState} from "react";
import ModalHooks from "./components/modal.jsx";
import "./basicInfomationOfTheLine.scss";
import axios from "@/utils/axios.js";
import DeleteButton from "@/components/delete.jsx";
import {useSelector} from "react-redux";
import {findDictValue} from "@/utils/getDict.js";

const {Column} = Table;

export default function BasicInfomationOfTheLine() {
    // 页面数据
    const [data, setData] = useState([]);
    // 是否展示弹框
    const [isModalOpen, setIsModalOpen] = useState(false);
    // 一行的数据
    const [row, setRow] = useState({});
    // 设置下拉框绑定的值
    const [val, setVal] = useState('')
    // 获取store的数据
    const dictData = useSelector((state) => state.counter.dictData);

    // 新增用户页面
    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", {params: {hasModel: 1}})
        setLineList(data)
        let option = data.map(item => {
            return {
                label: item.lineName,
                value: item.lineId,
            }

        })
        // 默认查询第一个
        if (!val) {
            setVal(option[0].value)
            // console.log(option[0])
        }
        setOption(option)

    }

    // 获取数据
    async function getData() {
        if (!val) return
        let {data} = await axios.get("/lineOperate/getBusLineDetail", {params: {lineId: val}});
        if (!data) {
            setData([]);
            return
        }
        setData([data]);
    }

    // 设置线路名称
    function setText(text) {
        let it = option.find((item) => item.value === text)?.label
        return it
    }

    /**
     * 设置下拉框值并重新搜索
     * @param value 数据值
     */
    function changeSelect(value) {
        setVal(value)
    }


    useEffect(() => {
        async function request() {
            await getLineData()
            await getData()
        }

        request()
    }, [val])
    return (
        <div className="basicin">
            <div className="top">
                <div className="slect">
                    <Select options={option} style={{width: '100px'}} value={val} onChange={changeSelect}></Select>
                </div>
                <div className="button">
                    <Button type="primary" onClick={addUser} disabled={data.length}>
                        新增线路基本情况
                    </Button>
                </div>
            </div>
            <Table
                dataSource={data}
                bordered={true}
                rowKey="id"
                pagination={false}
                scroll={{y: 900}}
            >
                <Column title="线路名称" dataIndex="lineId" key="id" render={(text) => (
                    setText(text)
                )
                }></Column>
                <Column title="类型" dataIndex="type" key="id" render={(text) =>
                    text === 1 ? '主线公交' : '干线公交'
                }/>
                <Column title="线路类型" dataIndex="lineType" key="id" render={(text) =>
                    findDictValue(dictData, text)

                }/>
                <Column title="上行起点站" dataIndex="upStartStation" key="id"/>
                <Column title="上行终点站" dataIndex="upEndStation" key="id"/>
                <Column title="下行起点站" dataIndex="downStartStation" key="id"/>
                <Column title="下行终点站" dataIndex="downEndStation" key="id"/>

                <Column
                    title="操作"
                    width="170px"
                    dataIndex="id"
                    key="id"
                    render={(text, record) => (
                        <div className="btn">
                            <Button type="primary" onClick={() => modify(record)}>
                                修改
                            </Button>
                            <DeleteButton url='/lineOperateEdit/delBusLineDetail' id={text}
                                          getData={getData}></DeleteButton>
                        </div>
                    )}
                />
            </Table>
            <ModalHooks
                isModalOpen={isModalOpen}
                closeModal={closeModal}
                row={row}
                option={option}
                lineList={lineList}
                val={val}
            ></ModalHooks>
        </div>
    );
}