qingdan/front/src/Rcjhz.js

import * as React from 'react';
import Box from "@mui/material/Box";
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";
//registerPlugin(NestedRows);
import Service from './Service';
import EditableSelect from './EditableSelect';
import EditableSelectGC from './EditableSelectGC';
import Editable from './Editable';
import Button from '@mui/material/Button';

import {copy} from './utils';
import {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
import "tabulator-tables/dist/css/tabulator.min.css"; //import Tabulator stylesheet
import './Tabulator.css';
export default function Rcjhz({id, bh, tiaojiaCallback}) {
  const myTable = React.useRef(null);
  const myRef = React.useRef(null);
  const [detail, setDetail] = React.useState([]);
  var editCheck = function(cell){
    //cell - the cell component for the editable cell

    //get row data
    //console.log(cell);
    if(cell._cell.row.data['序号']) return false;
    return true;
  }

  function handleSelect(row){

  }



  React.useEffect(() => {
    myTable.current = new Tabulator(myRef.current, {
         index: "key",
         height: 600,
       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:"ID", field:"ID", width:80, headerSort:false,}, //never hide this column
                    {title:"编码", field:"编码", width:120,headerSort:false,headerFilter:"input" },
                    {title:"名称", field:"名称", width:150, headerSort:false, formatter:"textarea", headerFilter:"input"}, //hide this column first
                    {title:"规格型号", field:"规格型号", width:70 , headerSort:false, formatter:"textarea"},
                    {title:"单位", field:"单位", width:50, headerSort:false},
                    {title:"数量", field:"数量", width:100, headerSort:true, sorter:"number", formatter:"money", formatterParams:{
                      precision:4,
                  } },
                    {title:"单价", field:"单价", width:100, headerSort:true, sorter:"number", formatter:"money", editor: "input"},
                    {title:"合价", field:"合价", width:100, headerSort:true, sorter:"number", formatter:"money"},
                    {title:"产地", field:"产地", width:50, headerSort:false, },
                    {title:"供应厂商", field:"供应厂商", width:80, headerSort:false, },
                    {title:"人材机类别", field:"人材机类别", width:120, headerSort:true, sorter: 'string', headerFilter:"input"},
                    {title:"主要材料标志", field:"主要材料标志", width:100, headerSort:false},
                    {title:"主材标志", field:"主材标志", width:100, headerSort:false, },
                    {title:"设备标志", field:"设备标志", width:100, headerSort:false, },
                    {title:"甲供标志", field:"甲供标志", width:100, headerSort:false, },
                    {title:"暂估价标志", field:"暂估价标志", width:100, headerSort:false, },
            ]
     }); 
     
     myTable.current.on("cellDblClick", function(e, cell){
         //e - the click event object
         //cell - cell component
         console.log(cell);
     });

     myTable.current.on("rowSelected", handleSelect);
     

     myTable.current.on("cellEdited", function(cell){
         //console.log("edited");
         //console.log();
         let newData = copy(cell._cell.row.data);
         let newDj = newData['单价'];
         let sl = newData['数量'];
         newData['合价'] = Number(newDj) * Number(sl);
         myTable.current.updateData([newData]);
         tiaojiaCallback(bh, newData['编码'], newData['名称'], newData['单位'], newDj);
         
         
         
                          
                                                      
         
     });


     myTable.current.on("tableBuilt", () => {
         Service.generateRencaijihuizong2(id, bh).then(x=>{
              myTable.current.replaceData(x);
              });
       });
   
  }, [id, bh]);

    return (
      <div ref={myRef}> 
      </div>



    );
}