ykzz-web/src/views/TestLine/index.js

import React, { Fragment, useRef, useMemo, useEffect, useState } from 'react';
import { Table, Card, Modal, Form, Input, Button, Row, Col, Typography, message, Tabs, Image, InputNumber } from 'antd';
import ToolBar from './toolbar'
import ReactEcharts from 'echarts-for-react';
import './index.less'
import drpOption from './drpOption.js'


const TableE = ({count,setEditData,tableData}) => {
  const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  }) => {
    const inputNode = <InputNumber min={0} style={{ textAlign: "center", flex: 1 }} />;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
            name={dataIndex}
            wrapperCol={[24]}
            style={{
              margin: 0,
            }}
          >
            {inputNode}
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
  const [editingKey, setEditingKey] = useState('');
  const [details, setDetails] = useState([])
  const isEditing = (record) => {
    return record.key === editingKey;
  }
  const columns = [
    {
      title: '预见期',
      dataIndex: 'tm',
      width: '30%',
      
    },
    {
      title: '雨量',
      dataIndex: 'drp',
      width: '30%',
      editable: true,
      align:'center'
    },
    {
      title: '水位',
      dataIndex: 'rz',
      width: '20%',
    },
    {
      title: '操作', key: 'operation', width: "20%", fixed: 'right',align: 'center',
      render: (_, record) => {
        const editable = isEditing(record);  
        return editable ? (
          <span>
            <Typography.Link
              onClick={() => save(record.key)}
              style={{
                marginRight: 8,
              }}
            >
              完成
            </Typography.Link>
           
          </span>
        ) : (
            <div style={{display:"flex",justifyContent:"center",columnGap:10}}>
              <Typography.Link disabled={editingKey !== ''} onClick={() => edit1(record)}>
            编辑
            </Typography.Link>
            </div>
            
        );
      },
    },
  ] 
  const [form1] = Form.useForm()
  const edit1 = (record) => {
    form1.setFieldsValue({
      drp: '',
      ...record,
    });
    setEditingKey(record.key);
  };
  const save = async (key) => {
    try {
      const row = await form1.validateFields();
      const newData = [...details];
      const index = newData.findIndex((item) => key === item.key);
      if (index > -1) {
        const item = newData[index];
        newData.splice(index, 1, {
          ...item,
          ...row,
        });
        setDetails(newData);
        setEditData(newData);
        setEditingKey('');
      } else {
        newData.push(row);
        setDetails(newData);
        setEditData(newData);
        setEditingKey('');
      }
    } catch (errInfo) {
      console.log('Validate Failed:', errInfo);
    }
  };
  
  useEffect(() => {
    if (tableData.length > 0) { 
      setDetails(tableData)
    }
  }, [tableData])
  

  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        inputType: col.dataIndex === 'age' ? 'number' : 
        col.dataIndex === 'sex' ? 'select' : "text",
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });

  const handleAddRow = (count) => {
    const newArr = Array(count).fill(0).map((item, i) => ({
      key: (i + 1).toString(),
      tm: `${i + 1}小时`,
      drp: '',
      rz: '',
    }))
    form1.setFieldsValue(newArr[0])
    setDetails([...newArr]);
    setEditData([...newArr]);
    setEditingKey(newArr[0].key);
  };

  useEffect(() => {
    if (count) {
      handleAddRow(count)
    }
  }, [count])
  
  return (
    <>
    <Form form={form1} component={false}>
          <Table
            rowKey="index"
            components={{
              body: {
                // row: EditableRow,
                cell: EditableCell,
              },
            }}
            columns={mergedColumns}
            dataSource={details}
            scroll={{ x: 200,y: 'calc( 100vh - 400px )'}}
            pagination={false}
          />
     </Form>
    </>
  )
}



export default function TestLine() {
  const [form] = Form.useForm()
  const [searchVal, setSearchVal] = useState({})
  const [editData, setEditData] = useState([])
  const [type, setType] = useState({})
  const [tmCount, setTmCount] = useState('')
  useEffect(() => {
    let count;
    if (type?.time) {
      count = type.time == '1h' ? 1 :
        type.time == '3h' ? 3 :
          type.time == '6h' ? 6 :
            type.time == '12h' ? 12 :
              type.time == '24h' ? 24 : '';
      setTmCount(count)
    } else {
      count = 1
      setTmCount('')
    }
  }, [type])
  const [tableForm, setTableForm] = useState({})
  const options = useMemo(() => {
    return drpOption(tableForm.time,tableForm.tabArr || [])
  }, [tableForm])

  const [tableData, setTableData] = useState([])
  const rowObj = {
    "1小时": 420,
    "2小时": 450,
    "3小时": 480,
    "4小时": 510,
    "5小时": 540,
    "6小时": 480,
    "7小时": 420,
    "8小时": 450,
    "9小时": 480,
    "10小时": 510,
    "11小时": 540,
    "12小时": 480,
    "13小时": 420,
    "14小时": 450,
    "15小时": 480,
    "16小时": 510,
    "17小时": 540,
    "18小时": 480,
    "19小时": 420,
    "20小时": 450,
    "21小时": 480,
    "22小时": 510,
    "23小时": 540,
    "24小时": 480,
    
}
  const save = async () => {
    try {
      setTableForm({ tabArr: editData, time: type.time })
      const newTabl = editData.map(item => ({
        ...item,
        rz: rowObj[item.tm],
      }))
      setTableData(newTabl)
      
    } catch (errInfo) {
      console.log('Validate Failed:', errInfo);
    }
  };

  return (
    <>
      <div className='content-root clearFloat xybm' style={{ paddingBottom: "0" }}>
        <div className='lf CrudAdcdTreeTableBox' style={{ width: "100%", overflowY: "auto" }}>
          <Card className='nonebox'>
            <ToolBar
              setSearchVal={setSearchVal}
              setType={setType}
              save={save}
              form1={form}
            />
          </Card>
          <div className="ant-card-body" style={{ padding: "20px 0 0 0", height: 'calc( 100vh - 400px )' }}>
            
            <div style={{ display: 'flex', columnGap: 20 }}>
              <div style={{ flex: 1,height: 'calc( 100vh - 400px )' }}>
              <ReactEcharts option={options} style={{ width: "100%", height: '100%' }} notMerge={true} />
              </div>
              <div style={{ width: 380 }}>
              <TableE count={tmCount} setEditData={setEditData} tableData={tableData} />
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}