关于前端:先锋电风扇

import React, { useState } from 'react';import { Table, Input, InputNumber, Row, Popconfirm, Button, Form } from 'antd';const originData = [];const EditableCell = ({ editing, dataIndex, title, inputType, record, index, children, ...restProps }) => {  const inputNode = <Input />;  return (    <td {...restProps}>      {editing ? (        <Form.Item          name={dataIndex}          style={{            margin: 0,          }}          rules={[            {              required: true,              message: `请输出${title}!`,            },          ]}        >          {inputNode}        </Form.Item>      ) : (        children      )}    </td>  );};const EditableTable = () => {  const [form] = Form.useForm(); // 原来的form  const [data, setData] = useState(originData);   //dataSource  const [editingKey, setEditingKey] = useState('');   //正在编辑的行key 唯一性  const isEditing = (record) => record.key === editingKey;  const edit = (record) => {    console.log('111',record)    form.setFieldsValue({      name: '',      dim_name: '',      dim_value: '',      order_no:'',      ...record,    });    setEditingKey(record.key);  };  const cancel = () => {    setEditingKey('');  };  const save = async (key) => {    try {      const row = await form.validateFields();      console.log('row',row)      const newData = [...data];      const index = newData.findIndex((item) => key === item.key);      if (index > -1) {        const item = newData[index];        newData.splice(index, 1, { ...item, ...row });        setData(newData);        setEditingKey('');      } else {        newData.push(row);        setData(newData);        setEditingKey('');      }    } catch (errInfo) {      console.log('Validate Failed:', errInfo);    }  };  const columns = [    {      title: '中文名',      dataIndex: 'name',      width: '25%',      editable: false,    },    {      title: '标签值',      dataIndex: 'dim_name',      width: '15%',      editable: true,    },    {      title: '标签存储值',      dataIndex: 'dim_value',      width: '20%',      editable: true,    },{      title: '排序',      dataIndex: 'order_no',      width: '20%',      editable: true,    },    {      title: '操作',      dataIndex: 'operation',      render: (_, record) => {        const editable = isEditing(record);        return editable ? (          <Row>            <Button type='link'  onClick={() => save(record.key)}>              保留            </Button>            <Button type='link' onClick={() => cancel()}>勾销</Button>          </Row>        ) : (          <Row>            <Button type='link' disabled={editingKey !== ''} onClick={() => edit(record)}>              编辑            </Button>            <Button type='link' danger disabled={editingKey !== ''} onClick={() => handleDelete(record)}>              删除            </Button>          </Row>        );      },    },  ];  const handleDelete = (record) => {    console.log('record',record,data)    let newData = [...data];    setData(newData.filter(item=> item.key !== record.key))      }      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 handleAdd = () => {    console.log('datra',data)    setData([...data,{key:parseInt(Math.random() * 61),name:'111',dim_name:'',dim_value:'',order_no:''}])  }  return (    <Form form={form} component={false}>      <Button onClick={handleAdd}>增加记录</Button>      <Table        components={{          body: {            cell: EditableCell,          },        }}        bordered        dataSource={data}        columns={mergedColumns}        rowClassName="editable-row"        pagination={false}      />    </Form>  );};export default EditableTable