my-app/src/Qingdan3.js

import * as React from 'react';
import Box from "@mui/material/Box";
import { Table, ConfigProvider } from "antd";
import { Grid } from '@mui/material';
import Tooltip from '@mui/material/Tooltip';
import AddIcon from '@mui/icons-material/Add';
import SaveIcon from '@mui/icons-material/Save';
import CancelIcon from '@mui/icons-material/Close';
import EditIcon from '@mui/icons-material/Edit';
import DeleteIcon from '@mui/icons-material/DeleteOutlined';

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 Service from './Service';
import Button from '@mui/material/Button';
import ButtonGroup from '@mui/material/ButtonGroup';
import {extractFuzhu} from './utils';
import {shanchu, undo, redo, danxiangdinge, updateDercj, changguidinge, handleBeizhu, huan, updateShuliang, handleYuban, updateDeMingcheng, handleRcjbc} from './editor';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import { DataGrid, GridRowModes, GridActionsCellItem, GridRowEditStopReasons, zhCN as zhCN_MUI, GridToolbarContainer } from '@mui/x-data-grid';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import IconButton from '@mui/material/IconButton';
import Typography from '@mui/material/Typography';
import {

     SettingFilled,

   } from '@ant-design/icons';
import { v4 as uuidv4 } from 'uuid';

import zhCN from 'antd/locale/zh_CN';
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';


/**
 * 
本条规定了工程量清单编码的表示方式：十二位阿拉伯数字及其设置规定。
各位数字的含义是：一、二位为专业工程代码（01—房屋建筑与装饰工程；02—仿古建筑工程；
03—通用安装工程；04—市政工程；05—园林绿化工程；06—矿山工程；07—构筑物工程；08—城市
轨道交通工程；09—爆破工程。以后进入国标的专业工程代码以此类推）；三、四位为附录分类顺序码；
五、六位为分部工程顺序码；七、八、九位为分项工程项目名称顺序码；十至十二位为清单项目名称
顺序码。
 */








export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台传回来的附注信息，要整理后才能成为展示用的行*/ , beizhuFK, clickCallback, loadingCallback, dingeclick, tihuanCallback, tihuanClick, suanshiCallback}) {
    
     const myTable = React.useRef(null);
     const myRef = React.useRef(null);
     const [valueTab, setValueTab] = React.useState("1");
     const handleChange = (event, newValue) => {
          setValueTab(newValue);
        };
     const [rcjhl, setRcjhl] = React.useState([]);
     const [rcjhl2, setRcjhl2] = React.useState([]);
     const [fuzhu, setFuzhu] = React.useState([]);//展示用的附注行
     const [yuban, setYuban] = React.useState([{'key': '0', '说明': '无'}, {'key': '1', '说明': '湿拌砂浆'}, {'key': '2', '说明': '散装干拌（混）砂浆'}, {'key': '3', '说明': '袋装干拌（混）砂浆'}]);
     const [tuijian, setTuijian] = React.useState([]);
     const [fuzhuEnable, setFuzhuEnable] = React.useState(false);
     const [yubanEnable, setYubanEnable] = React.useState(false);
     const hotRcjRef = React.useRef(null);
     const hotTuijianRef = React.useRef(null);
     const highlight = React.useRef([]);
     const debmRef = React.useRef(null);
     const lastClickRef = React.useRef(null);
     const tuijianRef = React.useRef(null);
     const tuijianTable = React.useRef(null);
     const rcj2Ref = React.useRef(null);
     const rcj2Table = React.useRef(null);
     const rcjRef = React.useRef(null);
     const rcjTable = React.useRef(null);
     const [detail, setDetail] = React.useState([
                    
     ]);

     const selectedRowKeysTable = React.useRef([]);
     const selectedRowKeysTableParent = React.useRef(null);
     const beizhuFKRef = React.useRef(null);


     const rgdeRef = React.useRef(null);
     const jxdeRef = React.useRef(null);
     const cldeRef = React.useRef(null);
     const isQdrcj = React.useRef(false);
     const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
     const [selectedRowKeys2, setSelectedRowKeys2] = React.useState([]);
     const onSelectChange = (newSelectedRowKeys) => {
          console.log('selectedRowKeys changed: ', newSelectedRowKeys);
          setSelectedRowKeys(newSelectedRowKeys);
          const [newData, newHl] = handleBeizhu(beizhuFKRef.current, selectedRowKeysTable.current[0], newSelectedRowKeys, fuzhu);
                                       if (newData) {
                                          myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current));
                                          let y =[];
                                          for (let i = 1; i < newHl.length; i++) {
                                            y.push({
                                          'ID' : newHl[i][0],
                                          '人材机编码' : newHl[i][1],
                                          '名称' : newHl[i][2],
                                          '规格型号': newHl[i][3],
                                          '单位' : newHl[i][4],
                                          '单价' : newHl[i][5],
                                          '产地' : newHl[i][6],
                                          '供应厂商' : newHl[i][7],
                                          '人材机类别' : newHl[i][8],
                                          '甲供标志': newHl[i][9],
                                          '含量' : newHl[i][10],
                                          '合价' : newHl[i][11],
                                          '暂估价标志' : newHl[i][12],
                                          '主要材料标志' : newHl[i][13],
                                          '主材标志' : newHl[i][14],
                                          '设备标志' : newHl[i][15] 

                                          });
                                        }
                                         setRcjhl(y);
                                         if (rcjTable.current) {
                                            rcjTable.current.replaceData(y);
                                         }
     
                                       }
        };


        const onSelectChange2 = (newSelectedRowKeys) => {
          
          setSelectedRowKeys2(newSelectedRowKeys);
          const [newData, newHl]  = handleYuban(selectedRowKeysTable.current[0], newSelectedRowKeys);
          if (newData) {
               myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current));
               let y =[];
               for (let i = 1; i < newHl.length; i++) {
                 y.push({
               'ID' : newHl[i][0],
               '人材机编码' : newHl[i][1],
               '名称' : newHl[i][2],
               '规格型号': newHl[i][3],
               '单位' : newHl[i][4],
               '单价' : newHl[i][5],
               '产地' : newHl[i][6],
               '供应厂商' : newHl[i][7],
               '人材机类别' : newHl[i][8],
               '甲供标志': newHl[i][9],
               '含量' : newHl[i][10],
               '合价' : newHl[i][11],
               '暂估价标志' : newHl[i][12],
               '主要材料标志' : newHl[i][13],
               '主材标志' : newHl[i][14],
               '设备标志' : newHl[i][15] 

               });
             }
              setRcjhl(y);
              if (rcjTable.current) {
                 rcjTable.current.replaceData(y);
              }

            }
        
        };


     /**fuzhu select */
     const rowSelection = {
          selectedRowKeys,
          onChange: onSelectChange,
          getCheckboxProps: (record) => {
               return {
                    disabled: !fuzhuEnable
               };
          }
     };

     const rowSelection2 = {
          type: 'radio',
          selectedRowKeys: selectedRowKeys2,
          selections: [Table.SELECTION_NONE],
          onChange: onSelectChange2,
          getCheckboxProps: (record) => {
               return {
                    disabled: !yubanEnable
               };
          }
     };


     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;
      }

      var editCheckRcj = function(cell){
          //cell - the cell component for the editable cell
      
          //get row data
          //console.log(cell);
          if(isQdrcj.current) return false;
          if (cell._cell.row.getData()['人材机编码'] == '410000F') {
               return false;
          }
          return true;
      }


      var sparklineFormatter = function(cell, formatterParams, onRendered){
          for (let i = 0; i < highlight.current.length; i++) {
               let entry = highlight.current[i];
               if (entry.row + 1 == cell._cell.row.position && entry.col + 1 == cell._cell.column.getPosition()) {
                    cell.getElement().style.fontWeight = 'bold';
                    cell.getElement().style.color = 'green';
                    cell.getElement().style.background = '#d7f1e1';
               }
              }
              return Number(cell.getValue()).toFixed(2).toString(); 
          };

      function handleSelect(row){
          selectedRowKeysTable.current = [row._row['data']['key']];
          if (row._row.data['序号'] != null && row._row.data['序号'].length >0) {
               selectedRowKeysTableParent.current = row._row['data']['key'];

               setFuzhu([]);
               setRcjrows([]);
               setYubanEnable(false);
               setSelectedRowKeys2([]);
               setShowToolbar(false);
               Service.generateQingdanrcj(name, bh,bt,row._row.data['清单编码']).then(x=>{
                
                
                    let y =[];
                    for (let i = 1; i < x.length; i++) {
                         y.push({
                              'ID' : x[i][0],
                              '人材机编码' : x[i][1],
                              '名称' : x[i][2],
                              '规格型号': x[i][3],
                              '单位' : x[i][4],
                              '单价' : x[i][5],
                              '产地' : x[i][6],
                              '供应厂商' : x[i][7],
                              '人材机类别' : x[i][8],
                              '甲供标志': x[i][9],
                              '含量' : x[i][10],
                              '合价' : x[i][11],
                              '暂估价标志' : x[i][12],
                              '主要材料标志' : x[i][13],
                              '主材标志' : x[i][14],
                              '设备标志' : x[i][15] 

                         });
                    }
                    setRcjhl(y);
                    if (rcjTable.current) {
                         rcjTable.current.replaceData(y);
                    }
                
                  isQdrcj.current = true;
                  highlight.current = [];
               });
               Service.generateQingdanTuijian(name, bh,bt,row._row.data['清单编码']).then(x=>{
                setTuijian(x);
                if (tuijianTable.current) tuijianTable.current.replaceData(x);
                
             });
          }else{
               setTuijian([]);
               
               
               if (tuijianTable.current) tuijianTable.current.replaceData([]);
              let row_parent = row._row;
              while(row_parent.modules.dataTree.parent) {
                   row_parent = row_parent.modules.dataTree.parent;
              }
              

               //console.log(name, bh,bt,qdbm, selected[1]);
               debmRef.current = row._row['data']['清单编码'];
               selectedRowKeysTableParent.current = row_parent['data']['key'];
               let qdbm = row_parent['data']['清单编码'];
               let debm = row._row['data']['清单编码'];
               console.log('debm=');
               console.log(debm);
               let danwei = row._row['data']['单位'];

               clickCallback(qdbm, debm);
               Service.generateDingercj(name, bh,bt,qdbm, debm, danwei).then(x=>{
                 console.log(x);
                 let y =[];
                              for (let i = 1; i < x[0].length; i++) {
                                   y.push({
                                        'ID' : x[0][i][0],
                                        '人材机编码' : x[0][i][1],
                                        '名称' : x[0][i][2],
                                        '规格型号': x[0][i][3],
                                        '单位' : x[0][i][4],
                                        '单价' : x[0][i][5],
                                        '产地' : x[0][i][6],
                                        '供应厂商' : x[0][i][7],
                                        '人材机类别' : x[0][i][8],
                                        '甲供标志': x[0][i][9],
                                        '含量' : x[0][i][10],
                                        '合价' : x[0][i][11],
                                        '暂估价标志' : x[0][i][12],
                                        '主要材料标志' : x[0][i][13],
                                        '主材标志' : x[0][i][14],
                                        '设备标志' : x[0][i][15] 
          
                                   });
                              }
                              setRcjhl(y);
                              if (rcjTable.current) {
                                   rcjTable.current.replaceData(y);
                              }
                 setShowToolbar(true);
                 setFuzhuEnable(x[1]);
                 setYubanEnable(x[1]);
                 setSelectedRowKeys2(x[2]);
                 setRcjrows(x[3]);
                 //hotRcjRef.current?.hotInstance?.loadData(x);
                 isQdrcj.current = false;
                 let toHighlight = [];
                 for(let i = 0; i < y.length; i++) {
                     let entry = y[i];
                     let bianhao = entry['人材机编码'];
                     let rcjlb = entry['人材机类别'];
                     let hit = false;
                     if (Number(rcjlb) == 1 &&  rgdeRef.current  ) {
                        for (let j = 0;j < rgdeRef.current.length; j++) {
                           if (rgdeRef.current[j]["CLBH"] == bianhao) {
                               if(rgdeRef.current[j]["CLMC"] == entry['名称'])hit = true;
                                let danjia = Number(entry['单价']);
                                if (danjia != rgdeRef.current[j]["YSJG"]) {
                                     //console.log(`[${i},5]danjia bu yizhi`);
                                     toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                                }
                                let hanliang = Number(entry['含量']);
                                if (hanliang != rgdeRef.current[j]["gr"]) {
                                     //console.log(`[${i}, 10]hanliang bu yizhi`);
                                     toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"});
                                }
                           }
                        }

                     }   
                     if (Number(rcjlb) == 3 && jxdeRef.current  ) {
                        for (let j = 0; j < jxdeRef.current.length; j++) {
                           if (jxdeRef.current[j]["jxbh"] == bianhao) {
                               if(jxdeRef.current[j]["jxmc"] == entry['名称'])hit = true;
                                 let danjia = Number(entry['单价']);
                                 if (danjia != jxdeRef.current[j]["tbdj"]) {
                                      //console.log(`[${i},5]danjia bu yizhi`);
                                      toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                                 }
                                 let hanliang = Number(entry['含量']);
                                 if (hanliang != jxdeRef.current[j]["sl"]) {
                                      //console.log(`[${i}, 10]hanliang bu yizhi`);
                                      toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"});
                                 }
                           }
                        }

                     }   
                     if (Number(rcjlb) == 2 && cldeRef.current  ) {
                        for (let j = 0; j < cldeRef.current.length; j++) {
                           if (cldeRef.current[j]["CLBH"] == bianhao) {
                               if(cldeRef.current[j]["CLMC"] == entry['名称'])hit = true;
                                 let danjia = Number(entry['单价']);
                                 if (danjia != cldeRef.current[j]["YSJG"]) {
                                      //console.log(`[${i},5]danjia bu yizhi`);
                                      toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                                 }
                                 let hanliang = Number(entry['含量']);
                                 if (hanliang != cldeRef.current[j]["SL"]) {
                                      //console.log(`[${i}, 10]hanliang bu yizhi`);
                                      toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"});
                                 }
                           }
                        }

                     }
                     if (!hit) {
                          toHighlight.push({row: i, col: 1, renderer: "customStylesRenderer"});
                     }   
                 }
                 highlight.current = toHighlight;
               });

          }

      }

     /**补充人材机 */
     const [rcjrows, setRcjrows] = React.useState([]);
     //const [rowModesModel, setRowModesModel] = React.useState({});
     const [showToolbar, setShowToolbar] = React.useState(false);
     const rcjcolumns = [
          {
               field: 'actions',
               type: 'actions',
               headerName: '操作',
               width: 100,
               cellClassName: 'actions',
               getActions: ({ id }) => {
                
         
                
         
                 return [
               
                   <GridActionsCellItem
                     icon={<DeleteIcon />}
                     label="Delete"
                     onClick={handleDeleteClick(id)}
                     color="inherit"
                   />,
                 ];
               },
             },
          { field: '人材机编码', headerName: '人材机编码', width: 120, editable: false },
          {
            field: '名称',
            headerName: '名称',
            width: 120,
            align: 'left',
            headerAlign: 'left',
            editable: true,
          },
          {
            field: '规格型号',
            headerName: '规格型号',
            width: 100,
            editable: true,
          },
          {
            field: '单位',
            headerName: '单位',
            width: 80,
            editable: true,
          },
          {
               field: '单价',
               headerName: '单价',
               width: 80,
               editable: true,
             },
             {
               field: '产地',
               headerName: '产地',
               width: 80,
               editable: true,
             },
             {
               field: '供应厂商',
               headerName: '供应厂商',
               width: 80,
               editable: true,
             },
          {
               field: '人材机类别',
               headerName: '人材机类别',
               width: 120,
               editable: true,
             },
             {
               field: '甲供标志',
               headerName: '甲供标志',
               width: 80,
               editable: true,
             },
             {
               field: '含量',
               headerName: '含量',
               width: 80,
               editable: true,
             },
            /* {
               field: '合价',
               headerName: '合价',
               width: 80,
               editable: true,
             },*/
             {
               field: '暂估价标志',
               headerName: '暂估价标志',
               width: 100,
               editable: true,
             },
             {
               field: '主要材料标志',
               headerName: '主要材料标志',
               width: 120,
               editable: true,
             },
             {
               field: '主材标志',
               headerName: '主材标志',
               width: 80,
               editable: true,
             },
             {
               field: '设备标志',
               headerName: '设备标志',
               width: 80,
               editable: true,
             },
       
        ];

    
      
        const handleDeleteClick = (id) => () => {
          setRcjrows(rcjrows.filter((row) => row.id !== id));
          const [newData, newHl] = handleRcjbc(selectedRowKeysTable.current[0], rcjrows.filter((row) => row.id !== id));
          if (newData) {
               myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current));
               let y =[];
               for (let i = 1; i < newHl.length; i++) {
                 y.push({
               'ID' : newHl[i][0],
               '人材机编码' : newHl[i][1],
               '名称' : newHl[i][2],
               '规格型号': newHl[i][3],
               '单位' : newHl[i][4],
               '单价' : newHl[i][5],
               '产地' : newHl[i][6],
               '供应厂商' : newHl[i][7],
               '人材机类别' : newHl[i][8],
               '甲供标志': newHl[i][9],
               '含量' : newHl[i][10],
               '合价' : newHl[i][11],
               '暂估价标志' : newHl[i][12],
               '主要材料标志' : newHl[i][13],
               '主材标志' : newHl[i][14],
               '设备标志' : newHl[i][15] 

               });
             }
              setRcjhl(y);
              if (rcjTable.current) {
                 rcjTable.current.replaceData(y);
              }

            }

        };
      
      
        const processRowUpdate = (newRow) => {
          const updatedRow = { ...newRow, isNew: false };
          setRcjrows(rcjrows.map((row) => (row.id === newRow.id ? updatedRow : row)));
          const [newData, newHl] = handleRcjbc(selectedRowKeysTable.current[0], rcjrows.map((row) => (row.id === newRow.id ? updatedRow : row)));
          if (newData) {
               myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current));
               let y =[];
               for (let i = 1; i < newHl.length; i++) {
                 y.push({
               'ID' : newHl[i][0],
               '人材机编码' : newHl[i][1],
               '名称' : newHl[i][2],
               '规格型号': newHl[i][3],
               '单位' : newHl[i][4],
               '单价' : newHl[i][5],
               '产地' : newHl[i][6],
               '供应厂商' : newHl[i][7],
               '人材机类别' : newHl[i][8],
               '甲供标志': newHl[i][9],
               '含量' : newHl[i][10],
               '合价' : newHl[i][11],
               '暂估价标志' : newHl[i][12],
               '主要材料标志' : newHl[i][13],
               '主材标志' : newHl[i][14],
               '设备标志' : newHl[i][15] 

               });
             }
              setRcjhl(y);
              if (rcjTable.current) {
                 rcjTable.current.replaceData(y);
              }

            }
          return updatedRow;
        };

        function EditToolbar(props) {
          const { setRcjrows } = props;
        
          const handleClick = () => {
            const id = uuidv4();
            let a = [];
            setRcjrows((oldRows) => {
               a = [
                 ...oldRows,
                 { id, '人材机编码': '410000F', '名称': '', '规格型号': '', '单位': '', '单价':'0','产地': '', '供应厂商': '', '人材机类别':'2',
                '甲供标志':'', '含量':'1', '暂估价标志':'', '主要材料标志':'true', '主材标志':'true', '设备标志':'' },
               ];
               return a;
             });
             const [newData, newHl] = handleRcjbc(selectedRowKeysTable.current[0], a);
             if (newData) {
               myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current));
               let y =[];
               for (let i = 1; i < newHl.length; i++) {
                 y.push({
               'ID' : newHl[i][0],
               '人材机编码' : newHl[i][1],
               '名称' : newHl[i][2],
               '规格型号': newHl[i][3],
               '单位' : newHl[i][4],
               '单价' : newHl[i][5],
               '产地' : newHl[i][6],
               '供应厂商' : newHl[i][7],
               '人材机类别' : newHl[i][8],
               '甲供标志': newHl[i][9],
               '含量' : newHl[i][10],
               '合价' : newHl[i][11],
               '暂估价标志' : newHl[i][12],
               '主要材料标志' : newHl[i][13],
               '主材标志' : newHl[i][14],
               '设备标志' : newHl[i][15]

               });
             }
             setRcjhl(y);
              if (rcjTable.current) {
                 rcjTable.current.replaceData(y);
              }
          }
            
          };
        
          return (
            <GridToolbarContainer>
              <Button disabled={!showToolbar}
              color="primary" startIcon={<AddIcon />} onClick={handleClick}>
                补充
              </Button>
            </GridToolbarContainer>
          );
        }
   
    

   
     
    



     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", editor: "input", editable: editCheck}, //hide this column first
                          {title:"项目特征", field:"项目特征", width:200 , headerSort:false, formatter:"textarea"},
                          {title:"计算规则", field:"计算规则", width:200, headerSort:false, formatter:"textarea"},
                          {title:"单位", field:"单位", width:100, headerSort:false},
                          {title:"数量", field:"数量", width:100, headerSort:false, editor: "input", editable: editCheck },
                          {title:"综合单价", field:"综合单价", width:100, headerSort:false, formatter:"money"},
                          {title:"合价", field:"合价", width:100, headerSort:false, formatter:"money"},
                          {title:"人工费", field:"人工费", width:100, headerSort:false, formatter:"money"},
                          {title:"主材费", field:"主材费", width:100, headerSort:false, formatter:"money"},
                          {title:"设备费", field:"设备费", width:100, headerSort:false, formatter:"money"},
                          {title:"辅材费", field:"辅材费", width:100, headerSort:false, formatter:"money"},
                          {title:"材料费", field:"材料费", width:100, headerSort:false, formatter:"money"},
                          {title:"机械费", field:"机械费", width:100, headerSort:false, formatter:"money"},
                          {title:"管理费", field:"管理费", width:100, headerSort:false, formatter:"money"},
                          {title:"利润", field:"利润", width:100, headerSort:false, formatter:"money"},
                          {title:"暂估价", field:"暂估价", width:100, headerSort:false, formatter:"money"},
                          {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 key = cell._cell.row.data['key'];
               myTable.current.deselectRow();
               if(cell._cell.column.field == '名称') {
                    let newData = updateDeMingcheng(cell._cell.row.data['名称'], selectedRowKeysTable.current[0]);
                    myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function() {
                         let getRow = myTable.current.getRows(); //get array of currently selected row components.
                         let component = null;
                         for(let i = 0; i < getRow.length; i++) {
                              let entry = getRow[i]._row.modules.dataTree.children;
                              for(let j = 0; j < entry.length; j++) {
                                   let child = entry[j];
                                   if(child.data['key'] == key) {
                                        //console.log(child);
                                        component = child.component;
                                        break;
                                   }
                                   
                              }

                         }
                         component.select();
                         handleSelect(component);
                         //handleSelect(getRow[0]);
                      });                
               }

               else{

               
               
               let [success, data] = updateShuliang(cell._cell.row.data['数量'], selectedRowKeysTable.current[0]);
               if (success) {
                                myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function() {
                                   let getRow = myTable.current.getRows(); //get array of currently selected row components.
                                   let component = null;
                                   for(let i = 0; i < getRow.length; i++) {
                                        let entry = getRow[i]._row.modules.dataTree.children;
                                        for(let j = 0; j < entry.length; j++) {
                                             let child = entry[j];
                                             if(child.data['key'] == key) {
                                                  //console.log(child);
                                                  component = child.component;
                                                  break;
                                             }
                                             
                                        }
     
                                   }
                                   component.select();
                                   handleSelect(component);
                                   //handleSelect(getRow[0]);
                                });                            
                                                            
               }
          }
           });
     
     
           myTable.current.on("tableBuilt", () => {
               Service.generateQingdanmingxi(name, bh, bt).then(x=>{
                    myTable.current.replaceData(x);
                    });
             });
         
        }, [bh, bt]);



        React.useEffect(
          () => {
            //console.log("rgde changed");
            //console.log(rgde);
            rgdeRef.current = rgde;
            jxdeRef.current = jxde;
            cldeRef.current = clde;
            if (isQdrcj.current) {
               highlight.current = [];
            } else {
            let toHighlight = [];
            for(let i = 0; i < rcjhl.length; i++) {
                let entry = rcjhl[i];
                let bianhao = entry['人材机编码'];
                let rcjlb = entry['人材机类别'];
                let hit = false;
                if (Number(rcjlb) == Number(1) && rgde) {
                    for (let j = 0; j < rgde.length; j++) {
                        if (rgde[j]["CLBH"] == bianhao) {
                            if(rgde[j]["CLMC"] == entry['名称'])hit = true;
                            let danjia = Number(entry['单价']);
                            if (danjia != rgde[j]["YSJG"]) {
                                 //console.log(`[${i},5]danjia bu yizhi`);
                                 toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                            }
                            let hanliang = Number(entry['含量']);
                            if (hanliang != rgde[j]["gr"]) {
                                 //console.log(`[${i}, 10]hanliang bu yizhi`);
                                 toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"});
                            }
  
                        }              
                    }
  
                }   
                if (Number(rcjlb) == Number(3) && jxde ) {
                     for (let j = 0; j < jxde.length; j++) {
                        if (jxde[j]["jxbh"] == bianhao) {
                           if(jxde[j]["jxmc"] == entry['名称'])hit = true;
                           let danjia = Number(entry['单价']);
                           if (danjia != jxde[j]["tbdj"]) {
                                //console.log(`[${i},5]danjia bu yizhi`);
                                toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                           }
                           let hanliang = Number(entry['含量']);
                           if (hanliang != jxde[j]["sl"]) {
                                //console.log(`[${i}, 10]hanliang bu yizhi`);
                                toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"});
                           }
                        }
                     }
  
                }   
                if (Number(rcjlb) == Number(2) && clde ) {
                     for (let j = 0; j < clde.length; j++) {
                        if (clde[j]["CLBH"] == bianhao) {
                           if(clde[j]["CLMC"] == entry['名称'])hit = true;
                           let danjia = Number(entry['单价']);
                           if (danjia != clde[j]["YSJG"]) {
                                //console.log(`[${i},5]danjia bu yizhi`);
                                toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                           }
                           let hanliang = Number(entry['含量']);
                           if (hanliang != clde[j]["SL"]) {
                                //console.log(`[${i}, 10]hanliang bu yizhi`);
                                toHighlight.push({row: i, col: 10, renderer: "customStylesRenderer"});
                           }
                        }
                     }
  
                }
                if (!hit) {
                   toHighlight.push({row: i, col: 1, renderer: "customStylesRenderer"});
                }   
            }
            //console.log(toHighlight);
            highlight.current = toHighlight;
            }
            let bzrcjhl = [/*["人材机编码", "名称", "单位", "单价", "合价", "含量"]*/] 
            if (rgde)
          for (let i = 0; i  < rgde.length; i++) {
               bzrcjhl.push({'人材机编码': rgde[i]["CLBH"], '名称': rgde[i]["CLMC"], '单位': rgde[i]["JLDW"], '单价': rgde[i]["YSJG"], '合价': rgde[i]["gf"], '含量': rgde[i]["gr"]});
          }
          
          if (clde)
          for (let i = 0; i  < clde.length; i++) {
               bzrcjhl.push({'人材机编码': clde[i]["CLBH"], '名称': clde[i]["CLMC"], '单位': clde[i]["JLDW"], '单价': clde[i]["YSJG"], '合价': clde[i]["HJ"], '含量': clde[i]["SL"]});
          }
          if (jxde)
          for (let i = 0; i  < jxde.length; i++) {
               bzrcjhl.push({'人材机编码': jxde[i]["jxbh"], '名称': jxde[i]["jxmc"], '单位': jxde[i]["DW"], '单价': jxde[i]["tbdj"], '合价': jxde[i]["hj"], '含量': jxde[i]["sl"]});
          }
            setRcjhl2(bzrcjhl);
          }, [rgde, jxde, clde]
        );



        React.useEffect(
          () => {
              console.log(beizhu);
              let result = [];
              if (beizhu != null) { 
                  let keys = Object.keys(beizhu["BZBH"]);
                  for(let i = 0; i < keys.length; i++) {
                      let key = keys[i];
                      result.push({'key': i+1, '序号': i+1, '编号': beizhu["BZBH"][key], '说明': beizhu["SM"][key]});//序号很重要
                  }
                  setFuzhu(result);
                  let newSelect = extractFuzhu(debmRef.current);
                  setSelectedRowKeys(newSelect);
                  //setSelectedRowKeys([1]);
                  
              }
          }, [beizhu]
        );

        React.useEffect(
          () => {
               beizhuFKRef.current = beizhuFK;
          }, [beizhuFK]
      );

  


      React.useEffect(
          () => {
               
               myTable.current.deselectRow();
               //console.log(dingeclick);
               if (selectedRowKeysTable.current.length > 0 ) {
                    const [success, data, key] = changguidinge(JSON.parse(dingeclick), selectedRowKeysTable.current[0]);
                    if (success) {
                         myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                              let getRow = myTable.current.getRows(); //get array of currently selected row components.
                              let component = null;
                              for(let i = 0; i < getRow.length; i++) {
                                   let entry = getRow[i]._row.modules.dataTree.children;
                                   for(let j = 0; j < entry.length; j++) {
                                        let child = entry[j];
                                        if(child.data['key'] == key) {
                                             //console.log(child);
                                             component = child.component;
                                             break;
                                        }
                                        
                                   }

                              }
                              
                              component.select();
                              handleSelect(component);

                                   
                               
                          });
                    }
               }
              
          }, [dingeclick]//常规添加定额
      );


      React.useEffect(
          () => {
               //console.log(dingeclick);
               if (selectedRowKeysTable.current.length > 0 ) {
                    const data = huan(JSON.parse(tihuanClick), selectedRowKeysTable.current[0]);
                    
                    myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                         let getRow = myTable.current.getRows(); //get array of currently selected row components.
                         let component = null;
                         for(let i = 0; i < getRow.length; i++) {
                              let entry = getRow[i]._row.modules.dataTree.children;
                              for(let j = 0; j < entry.length; j++) {
                                   let child = entry[j];
                                   if(child.data['key'] == selectedRowKeysTable.current[0]) {
                                        //console.log(child);
                                        component = child.component;
                                        break;
                                   }
                                   
                              }

                         }
                         
                         
                         handleSelect(component);

                              
                          
                     });
                         

                        
                    
               }
               
          }, [tihuanClick]//替换定额人材机
      );



      React.useEffect(
          () => {
               if (tuijianRef.current != null ) {
               tuijianTable.current = new Tabulator(tuijianRef.current, {
                    index: "key",
                    height: 200,
                  data: tuijian, //link data to table
                  reactiveData: false, //enable data reactivity
                  dataTreeStartExpanded:false,
                  dataTree: false,
                  selectableRows:1, //make rows selectable
                  
                  
                  columns: [ //Define Table Columns
                               {title:"ID", field:"ID", width:80, headerSort:false, }, //never hide this column
                               {title:"定额编号", field:"定额编号", width:120,headerSort:false,  formatter:"textarea" },
                               {title:"工程量名称", field:"工程量名称", width:150, headerSort:false, formatter:"textarea"}, //hide this column first
                               {title:"工作内容", field:"工作内容", width:150 , headerSort:false, formatter:"textarea"},
                             
                       ]
               });
               tuijianTable.current.on("tableBuilt", () => {
                    
                    tuijianTable.current.replaceData(tuijian);
                         
                  });
               }
               if (rcj2Ref.current != null ) {
                    rcj2Table.current = new Tabulator(rcj2Ref.current, {
                         index: "key",
                         height: 200,
                       data: rcjhl2, //link data to table
                       reactiveData: false, //enable data reactivity
                       dataTreeStartExpanded:false,
                       dataTree: false,
                       selectableRows:1, //make rows selectable
                       
                       
                       columns: [ //Define Table Columns
                                    {title:"人材机编码", field:"人材机编码", width:100, headerSort:false, }, //never hide this column
                                    {title:"名称", field:"名称", width:120,headerSort:false,  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:150 , headerSort:false, formatter:"money"},
                                    {title:"含量", field:"含量", width:150 , headerSort:false, formatter:"textarea"},
                                  
                            ]
                    });
                    rcj2Table.current.on("tableBuilt", () => {
                         
                         rcj2Table.current.replaceData(rcjhl2);
                              
                       });
                    }

               if (rcjRef.current != null ) {
                    
                         rcjTable.current = new Tabulator(rcjRef.current, {
                              index: "key",
                              height: 250,
                            data: rcjhl, //link data to table
                            reactiveData: false, //enable data reactivity
                            dataTreeStartExpanded:false,
                            dataTree: false,
                            selectableRows:1, //make rows selectable
                            editTriggerEvent:"dblclick",
                            rowFormatter:function(row){
                              //row - row component
                              
                              var data = row.getData();
                              if (data['人材机编码'] == '410000F') {
                                   row.getElement().style.backgroundColor = "#ffff00";
                              }
                              
                            
                          },
                            
                            columns: [ //Define Table Columns
                                         {title:"ID", field:"ID", width:80, headerSort:false, },
                                         {title:"人材机编码", field:"人材机编码", width:100, headerSort:false, }, //never hide this column
                                         {title:"名称", field:"名称", width:120,headerSort:false,  formatter:"textarea", editor: "input", editable: editCheckRcj },
                                         {title:"规格型号", field:"规格型号", width:80, headerSort:false, editor: "input", editable: editCheckRcj },
                                         {title:"单位", field:"单位", width:80, headerSort:false, formatter:"textarea"}, //hide this column first
                                         {title:"单价", field:"单价", width:80 , headerSort:false, formatter: sparklineFormatter, editor: "input", editable: editCheckRcj },
                                         {title:"产地", field:"产地", width:80, headerSort:false, },
                                         {title:"供应厂商", field:"供应厂商", width:80, headerSort:false, },
                                         {title:"人材机类别", field:"人材机类别", width:80, headerSort:false, },
                                         {title:"甲供标志", field:"甲供标志", width:80 , headerSort:false, formatter:"textarea"},
                                         {title:"含量", field:"含量", width:80 , headerSort:false, formatter:"money", formatterParams:{precision:4}, editor: "input", editable: editCheckRcj },
                                         {title:"合价", field:"合价", width:80 , headerSort:false, formatter:"money"},
                                         {title:"暂估价标志", field:"暂估价标志", width:80 , headerSort:false, formatter:"textarea"},
                                         {title:"主要材料标志", field:"主要材料标志", width:100 , headerSort:false, formatter:"textarea"},
                                         {title:"主材标志", field:"主材标志", width:80 , headerSort:false, formatter:"textarea"},
                                         {title:"设备标志", field:"设备标志", width:80 , headerSort:false, formatter:"textarea"},
                                       
                                 ]
                         });
                         rcjTable.current.on("tableBuilt", () => {
                              
                              rcjTable.current.replaceData(rcjhl);
                                   
                            });
                         rcjTable.current.on("cellDblClick", function(e, cell){
                              //e - the click event object
                              //cell - cell component
                              let determine = cell._cell.row.getData()['人材机编码'] != '410000F';
                              if(cell._cell.column.getPosition() == 2  && !isQdrcj.current && determine) {
                                  tihuanCallback(cell._cell.row.position, cell._cell.column.getPosition());
                              }
                          });
                         rcjTable.current.on("cellEdited", function(cell){
                              let data =  copy(cell._cell.table.getData());
                              for(let i = 0; i < data.length; i++) {
                                   data[i]['合价'] = Number(data[i]['单价']) * Number(data[i]['含量']);
                              }
                              setRcjhl(data);
                              if (rcjTable.current) {
                                   rcjTable.current.replaceData(data);
                              }
                              let data2 = [['ID', '人材机编码', '名称', '规格型号', '单位', '单价', '产地', '供应厂商', '人材机类别', '甲供标志', '含量', '合价', '暂估价标志', '主要材料标志', '主材标志', '设备标志']]
                              for (let i = 0; i < data.length; i++) {
                                   data2.push([data[i]['ID'], data[i]['人材机编码'], data[i]['名称'], data[i]['规格型号'], data[i]['单位'], 
                                   data[i]['单价'], data[i]['产地'], data[i]['供应厂商'], data[i]['人材机类别'], 
                                   data[i]['甲供标志'], data[i]['含量'], data[i]['合价'], data[i]['暂估价标志'], data[i]['主要材料标志'], data[i]['主材标志'], data[i]['设备标志']]);
                              }
     
                              let newData = updateDercj(selectedRowKeysTable.current[0], data2);
                              myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function() {
                              let getRow = myTable.current.getRows(); //get array of currently selected row components.
                              let component = null;
                              for(let i = 0; i < getRow.length; i++) {
                                     let entry = getRow[i]._row.modules.dataTree.children;
                                     for(let j = 0; j < entry.length; j++) {
                                           let child = entry[j];
                                           if(child.data['key'] == selectedRowKeysTable.current[0]) {
                                                //console.log(child);
                                               component = child.component;
                                                break;
                                            }
                         
                                      }

                              }
               
                                handleSelect(component);
                              });
                         });
                         
                         
                    }
          }, [valueTab]
        );




    return (
        <Stack spacing={2}>

                   <Box>
                   <Stack direction='row' spacing={2}>
                   <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeysTable.current.length > 0) {
                         let getRow = myTable.current.getRows(); //get array of currently selected row components.
                         let hit = false;
                         for(let i = 0; i < getRow.length; i++) {
                              if (getRow[i]._row.data['key'] == selectedRowKeysTable.current[0]) {
                                   hit = true;
                              }
                         }
                         if (hit) {
                              suanshiCallback();
                         }
                      }
                 
                      
                      }}
                   >定额（算式）</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeysTable.current.length > 0) {
                         const [success, data] = danxiangdinge(selectedRowKeysTable.current[0]);
                         if(success) {
                              myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                                   selectedRowKeysTable.current = [];
                                   selectedRowKeysTableParent.current = null;
                                        setRcjhl([]);
                                        if (rcjTable.current) {
                                             rcjTable.current.replaceData([]);
                                        }
                                        setFuzhu([]);
                                        setRcjrows([]);
                                        setShowToolbar(false);
                                        setSelectedRowKeys2([]);
                                        setYubanEnable(false);
                                        isQdrcj.current = true;
                                        highlight.current = [];
                                 });
                         }
                      }
                 
                      
                      }}
                   >单项定额</Button>
                      <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeysTable.current.length > 0) {
                         let newData = shanchu(selectedRowKeysTable.current[0]);
                         myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                             if (newData.filter(x=>x['key'] == selectedRowKeysTable.current[0]).length == 0) {
                                  selectedRowKeysTable.current = [];
                                  selectedRowKeysTableParent.current = [];
                                  setRcjhl([]);
                                  if (rcjTable.current) {
                                   rcjTable.current.replaceData([]);
                                  }
                                  setFuzhu([]);
                                  setRcjrows([]);
                                  setShowToolbar(false);
                                  setSelectedRowKeys2([]);
                                  setYubanEnable(false);
                                  isQdrcj.current = true;
                                  highlight.current = [];
                              }
                         });
                         
                         
                         
                     }
                      
                 
                      
                      }}
                   >删除</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                   let newData = undo();
                   myTable.current.updateData(newData).then(function(){
                      
                         selectedRowKeysTable.current = [];
                         selectedRowKeysTableParent.current = null;
                         setRcjhl([]);
                         if (rcjTable.current) {
                              rcjTable.current.replaceData([]);
                         }
                         setFuzhu([]);
                         setRcjrows([]);
                         setShowToolbar(false);
                         setSelectedRowKeys2([]);
                         setYubanEnable(false);
                         isQdrcj.current = true;
                         highlight.current = [];
                         
                     
                   });
                      
                      }}
                   >撤销</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                   let newData = redo();
                   myTable.current.updateData(newData).then(function(){
                      selectedRowKeysTable.current = [];
                      selectedRowKeysTableParent.current = null;

                         setRcjhl([]);
                         if (rcjTable.current) {
                              rcjTable.current.replaceData([]);
                         }
                         setFuzhu([]);
                         setRcjrows([]);
                         setShowToolbar(false);
                         setSelectedRowKeys2([]);
                         setYubanEnable(false);
                         isQdrcj.current = true;
                         highlight.current = [];
                   });
                   
                      
                      }}
                   >重做</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                            console.log("save to cloud");
                            loadingCallback();
                      
                      }}
                   >保存</Button>

                  
                   </Stack>
                   <div style={{width: "70vw"}}>
                   <div ref={myRef}> 
                  </div>
                  </div>
                  </Box>



                   <Box >
                   
                   <TabContext value={valueTab}>
                       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                         <TabList sx={{minHeight: '24px'}} onChange={handleChange} aria-label="lab API tabs example">
                           <Tab sx={{p: 0, minHeight: '24px'}} label="人材机含量" value="1" />
                           <Tab sx={{p: 0, minHeight: '24px'}} label="标准定额人材机含量" value="2" />
                           <Tab sx={{p: 0, minHeight: '24px'}} label="人材机补充" value="3" />
                           <Tab sx={{p: 0, minHeight: '24px'}} label="定额附注" value="4" />
                           <Tab sx={{p: 0, minHeight: '24px'}} label="预拌砂浆" value="5" />
                           <Tab sx={{p: 0, minHeight: '24px'}} label="组价推荐" value="6" />
                         </TabList>
                       </Box>
                       
                       <TabPanel sx={{p: 1}} value="1">
                        <div style={{width:"70vw"}}>
                       <div ref={rcjRef}></div>
                       </div>
                       </TabPanel>
                       <TabPanel sx={{p: 1}} value="2">
                         
                       <div ref={rcj2Ref}></div>
                           

                       </TabPanel>
                       <TabPanel sx={{p: 1}} value="3">
                         
                       <Box
                       sx={{
                         height: 200,
                         width: '100%',
                         '& .actions': {
                           color: 'text.secondary',
                         },
                         '& .textPrimary': {
                           color: 'text.primary',
                         },
                       }}
                     >
                       <DataGrid disableColumnMenu disableColumnSorting
                         hideFooter={true}
                         rows={rcjrows}
                         columns={rcjcolumns}
                         processRowUpdate={processRowUpdate}
                         slotProps={{
                           toolbar: { setRcjrows },
                         }}
                         slots={{
                              toolbar: EditToolbar,
                            }}
                         
                         localeText={zhCN_MUI.components.MuiDataGrid.defaultProps.localeText}

                       />
                     </Box>
                             
  
                         </TabPanel>
                       <TabPanel sx={{p: 1}} value="4">
                       <Box sx={{maxHeight: `190px`}}>
                       <ConfigProvider
                          locale={zhCN}
                          theme={{
                            components: {
                              Table: {
                                 /* here is your component tokens */
                                 cellPaddingBlock : 8
                              },
                            },
                          }}
                        >

                          <Table 
                             scroll={{ x: 'max-content' , y : 190}}
                             pagination={false}
                             rowSelection={rowSelection}
                             columns={
                              [
                                   { title: '序号', dataIndex: '序号', width : 80},
                                   {
                                        title: '编号',
                                        dataIndex: '编号',
                                     
                                   },
                                   {
                                        title: '说明',
                                        dataIndex: '说明',
                                     width: 550
                                    
                                   },
                                  
                                 ]
                             }
                           dataSource={fuzhu} />

                        </ConfigProvider>
                       </Box>
                          

                       </TabPanel>
                       <TabPanel sx={{p: 1}} value="5">
                        <Box sx={{maxHeight: `190px`}}>
                        <ConfigProvider
                          locale={zhCN}
                          theme={{
                            components: {
                              Table: {
                                 /* here is your component tokens */
                                 cellPaddingBlock : 8
                              },
                            },
                          }}
                        >

                          <Table 
                             scroll={{ x: 'max-content' , y : 190}}
                             pagination={false}
                             rowSelection={rowSelection2}
                             columns={
                              [
                                 
                                   {
                                        title: '说明',
                                        dataIndex: '说明',
                                        width: 550
                                    
                                   },
                                  
                                 ]
                             }
                           dataSource={yuban} />


                         </ConfigProvider>
                        </Box>
                       </TabPanel>
                       
                       <TabPanel sx={{p: 1}} value="6">
                       <div ref={tuijianRef}></div>

                       </TabPanel>
                     </TabContext>
                  </Box>
                  </Stack>
                  





    );
}