qingdan/front/src/Zjcs.js

import * as React from 'react';
import Box from "@mui/material/Box";
import 'handsontable/dist/handsontable.full.min.css';
//import 'handsontable/styles/ht-theme-main.min.css';
import { HandsonTable } from 'handsontable/base';
import {HotTable} from "@handsontable/react";
//import { registerAllModules } from 'handsontable/registry';
import {RichTreeView } from "@mui/x-tree-view/RichTreeView";
import { Grid } from '@mui/material';
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
import Stack from "@mui/material/Stack";
//import { registerPlugin, NestedRows } from 'handsontable/plugins';
//registerPlugin(NestedRows);
import Service from './Service';


export default function Zjcs({name, bh}) {
    const [detail, setDetail] = React.useState([

                    {
                    "序号" : null, "清单编码": null, "名称" : null, "计算基数" : null,
                     "计算基础" : null, "费率" : null, "金额" : null, "项目类别" : null}
    ]);
    const hotRef = React.useRef(null);
    React.useEffect(
        () => {
          Service.generateZjcs(name, bh).then(x=>{
          setDetail(x);
          });
        }, [bh]
      );




    return (
                 <HotTable 
                 nestedRows={true}
                    data={detail
                    }
                    ref = {hotRef}
                    contextMenu={true}
                    bindRowsWithHeaders={true}
                    fixedRowsTop={0}
                    fixedColumnsStart={2}
                    manualColumnResize={true}
                    rowHeaders={true}
                    colHeaders={["序号", "清单编码", "名称", "计算基数", "计算基础", "费率", "金额" , "项目类别" ]}
                    height="600"
                    readOnly={true}
                    selectionMode="single"
                    autoWrapRow={false}
                    autoWrapCol={false}
                    licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                  />



    );
}