publictransportation/src/pages/homePageChild/consumptionProportion/components/modal.jsx

import {Modal, Input, Select, message, Table, Button} from 'antd';
import axios from '@/utils/axios.js'
import {useEffect, useState} from 'react'
import './modal.scss'
import {getChild} from '@/utils/getDict.js'
import {useSelector} from "react-redux";
export default function ModalHooks({isModalOpen, closeModal, row,submitValue}) {
    const [messageApi, contextHolder] = message.useMessage();
    const [tableData, setTableData] = useState([])
    let dict = useSelector((state) => state.counter.dictData);
    const options = getChild(dict,'consumptionProportion')
    // const options = []
    /**
     *确定时候的回调
     */
    function handleOk() {
        // 验证表单
        for (const item of tableData) {
            if(!item.name|| !item.value){
                messageApi.error('未填写完整，无法提交')
                return
            }
        }
        const str = JSON.stringify(tableData)
        submitValue(str)


    }

    /**
     * 设置每个input的数据类型
     * @param value 数据值
     * @param index 下标
     * @param dataName 名称
     */
    function setValue(value,index,dataName){
        let newData = JSON.parse(JSON.stringify(tableData))
        newData[index][dataName]=value
        setTableData(newData)

    }
    // 关闭页面
    const handleCancel = () => {
        closeModal(false);
    };
    // table的数值
    const columns = [{
        title: '占比次数',
        dataIndex: 'name',
        render: (text, record, index) => (
            <Select
                value={text}
                onChange={(val)=>setValue(val,index,'name')}
                options={options}
                style={{width:'80px'}}
                fieldNames={{
                    label:'name',
                    value:'name'
                }}
            />
        )
    }, {
        title: '占比次数',
        dataIndex: 'value',
        render: (text, record,index) => <Input value={text} onChange={(e)=>setValue(e.target.value,index,'value')}></Input>,
    },
    {
        title: '操作',
        render: (text, record, index) => (
            <Button danger onClick={() => removeRowList(index)}>删除</Button>
        )
    }
    ]

    /**
     * 删除每一行的数据
     * @param index
     */
    function removeRowList(index) {
        let newData = JSON.parse(JSON.stringify(tableData))
        newData.splice(index, 1)
        setTableData(newData)
    }
    function add(){
        let newData = JSON.parse(JSON.stringify(tableData))
        newData.push({
            name:null,
            value:''
        })
        setTableData(newData)
    }
    // 表单请求
    useEffect(() => {
        let newData = JSON.parse(JSON.stringify(row))
        setTableData(newData)


    }, [row])


    return (
        <div className="form">

            {contextHolder}
            <Modal title="修改数据" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} width={900}
                   cancelText="取消" okText="确定">
                <Button type="primary" style={{marginBottom: '10px'}} onClick={add}>新增占比</Button>
                <Table
                    dataSource={tableData}
                    pagination={false}
                    bordered={true}
                    rowKey="name"
                    columns={columns}
                >

                </Table>

            </Modal>
        </div>
    )


}