my-app/src/Zjcs2.js

import * as React from 'react';
import Box from "@mui/material/Box";
import { Grid } from '@mui/material';
import Tab from "@mui/material/Tab";
import Tabs from '@mui/material/Tabs';
import FormControl from '@mui/material/FormControl';
import InputLabel from '@mui/material/InputLabel';
import Select from '@mui/material/Select';
import MenuItem from '@mui/material/MenuItem';
import { v4 as uuidv4 } from 'uuid';
import {copy} from './utils';

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 Service from './Service';
import SimpleService from './SimpleService';
import {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
import './Tabulator.css';

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

                    {
                    "序号" : null, "清单编码": null, "名称" : null, "计算基数" : null,
                     "计算基础" : null, "费率" : null, "金额" : null, "项目类别" : null}
    ]);
    const [cankao, setCankao] = React.useState([

    ]);
    const myRef = React.useRef(null);
    const myTable = React.useRef(null);
    const cankaoRef = React.useRef(null);
    const cankaoTable = React.useRef(null);
    const hotRef = React.useRef(null);
    const allRef = React.useRef([]);

    const [value, setValue] = React.useState(10);
    const [valueTab, setValueTab] = React.useState("1");
    React.useEffect(
        () => {



          myTable.current = new Tabulator(myRef.current, {
            index: "key",
            height: 380,
          data: detail, //link data to table
          reactiveData: false, //enable data reactivity
          dataTreeStartExpanded:true,
          dataTree: true,
          selectableRows:1, //make rows selectable
          editTriggerEvent:"dblclick", //trigger edit on double click
          dataTreeStartExpanded:function(row, level){
              //console.log(row);
              //console.log(level);
              return true; //expand rows where the "driver" data field is true;
          },
          columns: [ //Define Table Columns
                       {title:"序号", field:"序号", width:80, headerSort:false, frozen: true}, //never hide this column
                       {title:"清单编码", field:"清单编码", width:120,headerSort:false, frozen: true, formatter:"textarea" },
                       {title:"名称", field:"名称", width:150, headerSort:false, formatter:"textarea"}, //hide this column first
                       {title:"计算基数", field:"计算基数", width:150 , headerSort:false, formatter:"money"},
                       {title:"计算基础", field:"计算基础", width:250, headerSort:false, formatter:"textarea"},
                       {title:"费率", field:"费率", width:60 , headerSort:false, formatter:"money", editor:"input", editable:editCheck},
                       {title:"金额", field:"金额", width:150, headerSort:false, formatter:"money"},
                       {title:"项目类别", field:"项目类别", width:80 , headerSort:false, formatter:"textarea"},
                       

               ]
        }); 
        
        myTable.current.on("cellDblClick", function(e, cell){
            //e - the click event object
            //cell - cell component
            console.log(cell);
        });
  
        myTable.current.on("cellEdited", function(cell){
          //cell - cell component
          console.log(cell);
          let newData = copy(cell._cell.row.data);
          newData['金额'] = Number(newData['计算基数']) * Number(newData['费率']) / Number(100);
          myTable.current.updateData([newData]);
          zjcsCallback(name, bh, newData);
        });
        
  
        


          SimpleService.generateZjcs(name, bh).then(x=>{
            let addedkey = x.map(y=>{
              y['key'] = uuidv4();
              if (y.hasOwnProperty('_children')) {
              y['_children'] = y['_children'].map(z=>{
                z['key'] = uuidv4();
                return z;
              });
            }
              return y;
            });
            myTable.current.replaceData(addedkey);
          });
        }, [bh]
      );

      React.useEffect(
        () => {

          cankaoTable.current = new Tabulator(cankaoRef.current, {
            index: "key",
            height: 200,
          data: cankao, //link data to table
          reactiveData: false, //enable data reactivity
          
          dataTree: false,
          selectableRows:1, //make rows selectable
          
         
          columns: [ //Define Table Columns
                       {title:"工程类型", field:"工程类型", width:200, headerSort:false, headerFilter:"input", formatter:"textarea"}, //never hide this column
                       {title:"名称", field:"名称", width:150, headerSort:false, formatter:"textarea"}, //hide this column first
                       {title:"计算基础", field:"计算基础", width:250, headerSort:false, formatter:"textarea"},
                       {title:"参考费率", field:"参考费率", width:100 , headerSort:false, formatter:"money"},
                       {title:"地区", field:"地区", width:50, headerSort:false, formatter:"textarea"},
                       {title:"备注", field:"备注", width:280 , headerSort:false, formatter:"textarea"},
                       

               ]
        }); 
          SimpleService.cankao().then(x=>{
            allRef.current = x;
            filterData(value);
            
          });
        }, []
      );

      const filterData = (value) => {
        if (value == 10) {
          let newData = allRef.current.filter(y=>y['名称'].includes('安全文明施工措施费'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 20) {
          let newData = allRef.current.filter(y=>y['名称'].includes('扬尘污染防治增加费'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 30) {
          let newData = allRef.current.filter(y=>y['名称'].includes('按质论价'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 40) {
          let newData = allRef.current.filter(y=>y['名称'].includes('非夜间施工照明'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 50) {
          let newData = allRef.current.filter(y=>y['名称'].includes('冬雨季施工'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 60) {
          let newData = allRef.current.filter(y=>y['名称'].includes('已完工程及设备保护'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 70) {
          let newData = allRef.current.filter(y=>y['名称'].includes('临时设施'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 80) {
          let newData = allRef.current.filter(y=>y['名称'].includes('赶工措施'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 90) {
          let newData = allRef.current.filter(y=>y['名称'].includes('住宅分户验收'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 100) {
          let newData = allRef.current.filter(y=>y['名称'].includes('夜间施工'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 110) {
          let newData = allRef.current.filter(y=>y['名称'].includes('建筑工人实名制费用'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 120) {
          let newData = allRef.current.filter(y=>y['名称'].includes('苏安码管理增加费'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 130) {
          let newData = allRef.current.filter(y=>y['名称'].includes('特殊施工降效'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 140) {
          let newData = allRef.current.filter(y=>y['名称'].includes('交通组织维护'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 150) {
          let newData = allRef.current.filter(y=>y['名称'].includes('协管费'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 160) {
          let newData = allRef.current.filter(y=>y['名称'].includes('垂直运输'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 170) {
          let newData = allRef.current.filter(y=>y['名称'].includes('二次搬运'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 180) {
          let newData = allRef.current.filter(y=>y['名称'].includes('智慧工地费用'));
          cankaoTable.current.replaceData(newData);
        } else if (value == 190) {
          let newData = allRef.current.filter(y=>y['名称'].includes('外脚手架钢板网使用增加费'));
          cankaoTable.current.replaceData(newData);
        }
        
      };

      const handleChange = (event) => {
        setValue(event.target.value);
        filterData(event.target.value);

      };

      var editCheck = function(cell){
        //cell - the cell component for the editable cell
    
        //get row data
        let row = cell._cell.row;
        while(row.modules.dataTree.parent) {
          row = row.modules.dataTree.parent;
        }
        if (row.data['名称'] != null && row.data['名称'].includes('安全文明施工')) return false;
    
        return true; // only allow the name cell to be edited if the age is over 18
    }






    return (
      <Stack spacing={1}>
      
        <div ref={myRef}> 
        </div>
        <Box >
                   
          <TabContext value={valueTab}>
          <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                         <TabList sx={{minHeight: '24px'}}  aria-label="lab API tabs example">
                           <Tab sx={{p: 0, minHeight: '24px'}} label="参考费率" value="1" />
                         </TabList>
           </Box>
           <TabPanel sx={{p: 1}} value="1">
           <Stack direction="row" spacing={1}>
        <FormControl sx={{width: 200}}>
         <InputLabel id="demo-simple-select-label">措施分类</InputLabel>
         <Select
           labelId="demo-simple-select-label"
           id="demo-simple-select"
            value={value}
            label="措施分类"
            onChange={handleChange}
          >
            <MenuItem value={10}>安全文明施工措施费</MenuItem>
            <MenuItem value={20}>扬尘污染防治增加费</MenuItem>
            <MenuItem value={30}>按质论价</MenuItem>
            <MenuItem value={40}>非夜间施工照明</MenuItem>
            <MenuItem value={50}>冬雨季施工</MenuItem>
            <MenuItem value={60}>已完工程及设备保护</MenuItem>
            <MenuItem value={70}>临时设施</MenuItem>
            <MenuItem value={80}>赶工措施</MenuItem>
            <MenuItem value={90}>住宅分户验收</MenuItem>
            <MenuItem value={100}>夜间施工</MenuItem>
            <MenuItem value={110}>建筑工人实名制费用</MenuItem>
            <MenuItem value={120}>苏安码管理增加费</MenuItem>
            <MenuItem value={130}>特殊施工降效</MenuItem>
            <MenuItem value={140}>交通组织维护</MenuItem>
            <MenuItem value={150}>协管费</MenuItem>
            <MenuItem value={160}>垂直运输</MenuItem>
            <MenuItem value={170}>二次搬运</MenuItem>
            <MenuItem value={180}>智慧工地费用</MenuItem>
            <MenuItem value={190}>外脚手架钢板网使用增加费</MenuItem>

            </Select>
          </FormControl>
            <div ref={cankaoRef}> 
            </div>
        </Stack>
       </TabPanel>
     </TabContext>
     </Box>

    
     
    </Stack>




    );
}