tsg-web/src/views/sq/qys/gcys/monthLl/index.js

import React, { useState,useEffect } from 'react'
import { Table, Input, Form, Row, Col, Button, message } from "antd"
import { httppost2 } from '../../../../../utils/request';
import apiurl from '../../../../../service/apiurl';
import moment from "moment"
const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  }) => {
    const inputNode = <Input style={{ textAlign: "center" }} />;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
            name={dataIndex}
            wrapperCol={[24]}
            style={{
              margin: 0,
            }}
          >
            {inputNode}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
export default function MonthLl() {
    const [form] = Form.useForm()
    const columns = Array(12).fill(0).map((item, i) => ({
        title: (i + 1) + '月',
        key: String(i + 1),
        dataIndex: String(i + 1),
        align:"center",
        ellipsis: true,
        editable: true,
    }))
    const [details, setDetails] = useState([])
    const [editingKey, setEditingKey] = useState('');
    const [skdisabled, setSkDisabled] = useState(true)
    const [data, setData] = useState([])
    const isEditing = (record) => {
        console.log("editingKey",editingKey,record.id);
        return record.id === editingKey;
    }
    const mergedColumns = columns.map((col) => {
        if (!col.editable) {
          return col;
        }
        return {
          ...col,
          onCell: (record) => ({
            record,
            inputType: "text",
            dataIndex: col.dataIndex,
            title: col.title,
            editing: isEditing(record),
          }),
        };
    });
 

    const edit = () => {
        form.setFieldsValue(details[0])
        setSkDisabled(false);
        setEditingKey(details[0]?.id)
    }

    const cancel = () => { 
        setSkDisabled(true);
        setEditingKey("")
    }
  const editItem = async(arr) => {
      try {
        const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.monthLl.update,arr)
        if (res.code == 200) {
          message.success('修改成功');
          getData()
        }
      } catch (error) {
        console.log(error);
        
      }
    }
    const save = async () => {
        try {
          const row = await form.validateFields();
          const newData = [];
            const index = newData.findIndex((item) => details[0]?.id === item.id);
          if (index > -1) {
            const item = newData[index];
            newData.splice(index, 1, {
              ...item,
              ...row,
            });
            setDetails(newData);
            setEditingKey('');
            
          } else {
            newData.push(row);
            setDetails(newData);
            setEditingKey('');
            }
            setSkDisabled(true)
         const arr = data.map(item => ({
            ...item,
            value:newData[0][item.month] ? Number(newData[0][item.month]) : ''
          }))
           
            editItem(arr)
        } catch (errInfo) {
          console.log('Validate Failed:', errInfo);
        }
    };
    
    const getData = async () => {
      try {
        const res = await httppost2(apiurl.dataResourcesCenter.projectAndWater.monthLl.page, { year: moment().year() })
        setData(res.data)
        let obj = {}
        for (let i = 0; i < res.data.length; i++) {
          obj[res.data[i].month] = res.data[i].value
        }
        setDetails([{...obj,id:"42120250085"}])
      } catch (error) {
          console.log(error);
      }
  }
    useEffect(() => {
      console.log(details);
    }, [details])
  
  useEffect(() => {
    getData()
  }, [])
  
  return (
      <div>
          <h1 style={{ textAlign: "center" }}>月核定生态流量</h1>
          <div style={{ textAlign: "center", marginLeft: "30vw" }}>单位:m³/s</div>
          <Form form={form} component={false}>
          <Table
              rowKey="id"
              columns={mergedColumns}
              components={{
                body: {
                  cell: EditableCell,
                },
              }}
              dataSource={details}
              pagination={false}
          />
          </Form>
         
             <Row style={{marginTop:"60vh"}}>
                  <Col span={24}>
                      <Form.Item
                        wrapperCol={{span:14,offset:10}}
                      >
                          {
                              skdisabled ? <Button type="primary" onClick={edit}>编辑</Button> :
                                  <div style={{ display: 'flex', columnGap: 20 }}>
                                      <Button onClick={cancel}>取消</Button>
                                      <Button type="primary" onClick={save}>保存</Button>
                               </div>   
                          }
                          
                      </Form.Item>
                  </Col>
            </Row>
    </div>
  )
}