my-app/src/Djcs3.js

import * as React from 'react';
import Box from "@mui/material/Box";
import Table from 'rsuite/Table';
import 'rsuite/Table/styles/index.css';
import Checkbox from 'rsuite/Checkbox';
import 'rsuite/Checkbox/styles/index.css';
import { CustomProvider, Input, InputNumber } from 'rsuite';
import 'rsuite/InputNumber/styles/index.css';
import zhCN from 'rsuite/locales/zh_CN';
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 {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
import './Tabulator.css';
import {extractFuzhu, match_target} from './utils';
import Button from '@mui/material/Button';
import {shanchu_djcs, undo_djcs, redo_djcs, danxiangdinge_djcs, updateDercj_djcs, changguidinge_djcs, handleBeizhu_djcs, huan, updateShuliang_djcs, azfy_djcs_eligible, azfy_djcs} from './editor';
import {copy} from './utils';

const {Column, HeaderCell, Cell} = Table;


function number_equal(a, b) {
     if (Number(a) - Number(b) < 0.0001 && Number(a) - Number(b) > -0.0001) {
          return true;
     }
     return false;
}
export default function Djcs3({name, bh, rgde, jxde, clde, beizhu, beizhuFK, clickCallback, loadingCallback, dingeclick, azfycallback, azfySelect, azfyConfirm}) {

    
     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()['人材机编码'] == '00EXP001') {//回程费
               return false;
          }
          if (cell._cell.row.getData()['人材机编码'] == '99EXP007') {//
               return false;
          }
          if (cell._cell.row.getData()['人材机编码'] == '99EXP022') {//
               return false;
          }
          if (cell._cell.row.getData()['人材机编码'] == '31130104') {//
               return false;
          }
          if (cell._cell.row.getData()['人材机编码'].includes('000FE')) {//安装费用
               return false;
          }
          return true;
      }


     var editCheckJg = 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()['人材机编码'] == '00EXP001') {//回程费
               return false;
          }
          if (cell._cell.row.getData()['人材机编码'] == '99EXP007') {//
               return false;
          }
          if (cell._cell.row.getData()['人材机编码'] == '99EXP022') {//
               return false;
          }
          if (cell._cell.row.getData()['人材机编码'] == '31130104') {//
               return false;
          }
          if (cell._cell.row.getData()['甲供标志'] == 'true') {//
               return false;
          }
          if (cell._cell.row.getData()['人材机编码'].includes('000FE')) {//安装费用
               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(); 
          };

     var sparklineFormatter2 = 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 cell.getValue(); 
               };


     function handleSelect(row){
          //e - the click event object
          //cell - cell component
          console.log('rowSelected');
          selectedRowKeysTable.current = [row._row['data']['key']];
          let bt = "Djcs" ;
          
          if (row._row.data['序号'] != null && row._row.data['序号'].length >0) {
               selectedRowKeysTableParent.current = row._row['data']['key'];

               setFuzhu([]);
               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] ,
                              'key' : '',
                              'bc': ''

                         });
                    }
                    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;
               }
               debmRef.current = row._row['data']['清单编码'];
               selectedRowKeysTableParent.current = row_parent['data']['key'];


               clickCallback('Djcs', row_parent['data']['清单编码'], row._row['data']['清单编码'], row._row['data']['名称']);
               Service.generateDingercj(name, bh,bt,row_parent['data']['清单编码'], row._row['data']['清单编码'], row._row['data']['单位'], row._row['data']['key']).then(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] ,
                                        'key' : x[0][i][16],
                                        'bc': x[0][i][17]
          
                                   });
                              }
                              setRcjhl(y);
                              if (rcjTable.current) {
                                   rcjTable.current.replaceData(y);
                              }
                               isQdrcj.current = false;
                               setFuzhuEnable(x[1]);
                               let toHighlight = [];
                               for(let i = 0; i < y.length; i++) {
                                   let entry = y[i];
                                   let bianhao = entry['人材机编码'];
                                   let rcjlb = entry['人材机类别'];
                                   if (Number(rcjlb) == 1 &&  rgdeRef.current  ) {
                                      for (let j = 0;j < rgdeRef.current.length; j++) {
                                         if (rgdeRef.current[j]["CLBH"] == bianhao) {
                                              let danjia = Number(entry['单价']);
                                              if (!number_equal(danjia , rgdeRef.current[j]["YSJG"])) {
                                                   console.log(`[${i},5]danjia bu yizhi`);
                                                   toHighlight.push({row: i, col: 5, });
                                              }
                                              let hanliang = Number(entry['含量']);
                                              if (!number_equal(hanliang , rgdeRef.current[j]["gr"])) {
                                                   console.log(`[${i}, 10]hanliang bu yizhi`);
                                                   toHighlight.push({row: i, col: 10, });
                                              }
                                         }
                                      }

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

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

                                   }   
                               }
                               highlight.current = toHighlight;
                             });
          }
     }
     
  

       
    const [detail, setDetail] = React.useState([
                    
    ]);
    const myRef = React.useRef(null);
    const myTable = 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 [value, setValue] = React.useState("1");
    const [rcjhl, setRcjhl] = React.useState([]);
    const [rcjhl2, setRcjhl2] = React.useState([]);
    const [fuzhu, setFuzhu] = React.useState([]);
    const [tuijian, setTuijian] = React.useState([]);
    const beizhuFKRef = React.useRef(null);

    const [fuzhuEnable, setFuzhuEnable] = React.useState(false);

    const onSelectChange = (newSelectedRowKeys) => {
     
    const [newData, newHl] = handleBeizhu_djcs(beizhuFKRef.current, selectedRowKeysTable.current[0], newSelectedRowKeys, fuzhu);
                                  if (newData) {
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                                          myTable.current.deselectRow();
                                          myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){

                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                                              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]) {
                                                             component = child.component;
                                                             break;
                                                        }
                                                        
                                                   }

                                              }
                                              component.select();
                                     });
                                     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],
                                          'key': newHl[i][16],
                                          'bc': newHl[i][17]

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

                                  }
    };
   
    const highlight = React.useRef([]);
    //const [azfyDe, setAzfyDe] = React.useState(null);
    
    const rgdeRef = React.useRef(null);
    const jxdeRef = React.useRef(null);
    const cldeRef = React.useRef(null);
    const isQdrcj = React.useRef(false);
    const debmRef = React.useRef(null);
    const selectedRowKeysTable = React.useRef([]);
    const selectedRowKeysTableParent = React.useRef(null);
    ////beizhu table
    const [checked, setChecked] = React.useState(false);
    const [indeterminate, setIndeterminate] = React.useState(false);
    const [checkedKeys, setCheckedKeys] = React.useState([]);
    const setCheckedKeys_ = (keys) => {
     setCheckedKeys(keys);
     if (keys.length == fuzhu.length) {
          setChecked(true);
          setIndeterminate(false);
     } else if (keys.length == 0) {
          setChecked(false);
          setIndeterminate(false);
     } else {
          setIndeterminate(true);
          setChecked(false);
     }
     onSelectChange(keys);
    };
    /*initialization*/
    const setCheckedKeys_2 = (keys) => {
     setCheckedKeys(keys);
     if (keys.length == fuzhu.length) {
          setChecked(true);
          setIndeterminate(false);
     } else if (keys.length == 0) {
          setChecked(false);
          setIndeterminate(false);
     } else {
          setIndeterminate(true);
          setChecked(false);
     }
     
    };
    const handleCheckAll = (value, checked) => {
     const keys = checked? fuzhu.map(item => item.id) : [];
     setCheckedKeys_(keys);

    }
    const handleCheck = (value, checked) => {
     const keys = checked? [...checkedKeys, value] : checkedKeys.filter(item => item != value);
     setCheckedKeys_(keys);

    }

    const CheckCell = ({rowData, onChange, checkedKeys, dataKey, disabled, ...props}) => {
      return <Cell {...props} style={{ padding: 0}}>
          <div style={{lineHeight: '40px'}}>
             <Checkbox value = {rowData[dataKey]}
             inline
             disabled={disabled}
             onChange={onChange}
             checked={checkedKeys.some(item => item === rowData[dataKey])}
             ></Checkbox>
          </div>
      </Cell>
    };

    const resetUI = () => {
     selectedRowKeysTable.current = [];
     selectedRowKeysTableParent.current = null;
     setRcjhl([]);
     if (rcjTable.current) {
          rcjTable.current.replaceData([]);
     }
     setFuzhu([]);
     isQdrcj.current = true;
     highlight.current = [];
     setTuijian([]);
     if (tuijianTable.current) tuijianTable.current.replaceData([]);
    };

    React.useEffect(() => {
     myTable.current = new Tabulator(myRef.current, {
          index: "key",
          height: 380,
          renderVertical: "basic",
        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){
            return 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:"textarea"},
                     {title:"计算规则", field:"计算规则", width:250, 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();
          let [success, data] = updateShuliang_djcs(cell._cell.row.data['数量'], selectedRowKeysTable.current[0]);
          if (success) {
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                           myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function() {
                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                              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);
                           });                            
                                                       
          }
      });


      myTable.current.on("tableBuilt", () => {
          Service.generateDjcs(name, bh).then(x=>{
               myTable.current.replaceData(x);
               });
        });

        
    
   }, [bh]);


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

   React.useEffect(
     () => {
          //console.log(dingeclick);
          //console.log(azfySelect);
          if (dingeclick != null && selectedRowKeysTable.current != null && azfy_djcs_eligible(selectedRowKeysTable.current[0])) {
               const [success, data, key] = azfy_djcs(selectedRowKeysTable.current[0], dingeclick, azfySelect);
               myTable.current.deselectRow();
                   
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                         myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                              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);

                                   
                               
                          });
                    
                   
          }
     }, [azfyConfirm]
   );
 
    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({'id': i+1, 'key': i+1,  '序号': i+1, '编号': beizhu["BZBH"][key], '说明': beizhu["SM"][key], '数量': 1});//序号很重要
                }
                
                let newSelect = extractFuzhu(debmRef.current);
                setCheckedKeys_2(newSelect.map(x=>x.split("*")[0]).map(x=>Number(x)));
                for(let i = 0; i < newSelect.length; i++) {
                    if (newSelect[i].includes('*')) {
                         let xuhao = Number(newSelect[i].split('*')[0]);
                         let coef = Number(newSelect[i].split('*')[1]);
                         for(let j = 0; j < result.length; j++) {
                              if (result[j]['id'] == xuhao) {
                                   result[j]['数量'] = coef;
                              }
                         }
                    }
                  }
                  setFuzhu(result);
                
                
            }
        }, [beizhu]
      );

      React.useEffect(
          () => {
               if (tuijianRef.current != null ) {
               tuijianTable.current = new Tabulator(tuijianRef.current, {
                    index: "key",
                    height: 180,
                  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: 180,
                       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:120, 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: 180,
                            data: rcjhl, //link data to table
                            reactiveData: false, //enable data reactivity
                            dataTreeStartExpanded:false,
                            dataTree: false,
                            selectableRows:1, //make rows selectable
                            editTriggerEvent:"dblclick",
                            renderVertical: "basic",
                            
                            columns: [ //Define Table Columns
                                         {title:"ID", field:"ID", width:80, headerSort:false, },
                                         {title:"人材机编码", field:"人材机编码", width:120, headerSort:false, formatter: sparklineFormatter2}, //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: editCheckJg },
                                         {title:"产地", field:"产地", width:80, headerSort:false, },
                                         {title:"供应厂商", field:"供应厂商", width:80, headerSort:false, },
                                         {title:"人材机类别", field:"人材机类别", width:120, headerSort:false, },
                                         {title:"甲供标志", field:"甲供标志", width:80 , headerSort:false, formatter:"textarea"},
                                         {title:"含量", field:"含量", width:120 , headerSort:false, formatter:"money", formatterParams:{precision:4}, editor: "input", editable: editCheckRcj },
                                         {title:"合价", field:"合价", width:80 , headerSort:false, formatter:"money"},
                                         {title:"暂估价标志", field:"暂估价标志", width:100 , 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("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', '人材机编码', '名称', '规格型号', '单位', '单价', '产地', '供应厂商', '人材机类别', '甲供标志', '含量', '合价', '暂估价标志', '主要材料标志', '主材标志', '设备标志', "key", "bc"]]
                              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]['设备标志'], data[i]['key'], data[i]['bc']]);
                              }
     
                              let newData = updateDercj_djcs(selectedRowKeysTable.current[0], data2);
                                          myTable.current.deselectRow();
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                              myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function() {
                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                              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;
                                            }
                         
                                      }

                              }
                                component.select();
                                //handleSelect(component);
                              });
                         });
                         }
          }, [value]
        );



      React.useEffect(
          () => {
               let input = JSON.parse(dingeclick);
               if (input == null) {
                    return;
               }
               if (!input.hasOwnProperty("DEBH")) {
                    return;
               }
               let bh_ = Object.values(input['DEBH'])[0];
               if (bh_.includes('-F') || bh_.includes('19-19') || bh_.includes('19-20') || bh_.includes('19-21') || bh_.includes('19-22') || bh_.includes('19-23') || bh_.includes('19-24') || bh_.includes('19-25') || bh_.includes('19-26') || bh_.includes('19-27') || bh_.includes('19-28') || bh_.includes('19-29') || bh_.includes('19-30') || bh_.includes('19-31') || bh_.includes('19-32') || bh_.includes('19-33') || bh_.includes('19-34') || bh_.includes('19-35') || bh_.includes('19-36')) {
                    if (selectedRowKeysTable.current.length > 0 ) {
                         if (azfy_djcs_eligible(selectedRowKeysTable.current[0])) {
                              //setAzfyDe(input);
                              azfycallback(bh, input);
                         }
                         
                    }
                    
               } else {
                    myTable.current.deselectRow();
                   //console.log(dingeclick);
                   if (selectedRowKeysTable.current.length > 0 ) {
                    const [success, data, key] = changguidinge_djcs(input, selectedRowKeysTable.current[0]);
                    if (success) {
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                         myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                              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("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['人材机类别'];
              if (Number(rcjlb) == Number(1) && rgde) {
                  for (let j = 0; j < rgde.length; j++) {
                      if (rgde[j]["CLBH"] == bianhao) {
                          let danjia = Number(entry['单价']);
                          if (!number_equal(danjia , rgde[j]["YSJG"])) {
                               console.log(`[${i},5]danjia bu yizhi`);
                               toHighlight.push({row: i, col: 5});
                          }
                          let hanliang = Number(entry['含量']);
                          if (!number_equal(hanliang , rgde[j]["gr"])) {
                               console.log(`[${i}, 10]hanliang bu yizhi`);
                               toHighlight.push({row: i, col: 10});
                          }

                      }              
                  }

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

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

              }   
          }
          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);
          if (rcj2Table.current) {
               rcj2Table.current.replaceData(bzrcjhl);
          }
        }, [rgde, jxde, clde]
      );

      const handleChange = (event, newValue) => {
        setValue(newValue);
      };


      const EditableContext = React.createContext({ editingId: null, editingKey: null });
      const [editingId, setEditingId] = React.useState(null);
      const [editingKey, setEditingKey] = React.useState(null);
      const onEdit = (id, dataKey) => {
           setEditingId(id);
           setEditingKey(dataKey);
         };
 
      const onEditFinished = () => {
           //console.log("edit finidhed");
           setEditingId(null);
           setEditingKey(null);
           onSelectChange(checkedKeys);
         };
      const styles = `
 .table-cell-editing .rs-table-cell-content {
   padding: 4px;
 }
 .table-cell-editing .rs-input {
   width: 100%;
 }
 .table-cell:focus {
   outline: none;
   box-shadow: inset 0 0 0 1px #007bff;
 }
 `;
 
 const fieldMap = {
      string: Input,
      number: InputNumber,
    };
 
    function focus(ref) {
      setTimeout(() => {
        if (ref.current?.tagName === 'INPUT' || ref.current?.getAttribute('tabindex') === '0') {
          ref.current.focus();
        } else if (ref.current instanceof HTMLElement) {
          ref.current.querySelector('input').focus();
        }
      }, 10);
    }
 
    const handleChangeFuzhuSL = (id, key, value) => {
      const nextData = Object.assign([], fuzhu);
      nextData.find(item => item.id === id)[key] = value;
  
      setFuzhu(nextData);
    };




      const EditableCell = ({ rowData, dataType, dataKey, onChange, ...props }) => {
          const { editingId, editingKey, onEdit, onEditFinished } = React.useContext(EditableContext);
          const editing = rowData.id === editingId && dataKey === editingKey;
          const Field = fieldMap[dataType];
          const value = rowData[dataKey];
          const text = value;
          const inputRef = React.useRef();
          const cellRef = React.useRef();
        
          const handleEdit = () => {
               if (fuzhuEnable) {
                  onEdit?.(rowData.id, dataKey);
                  focus(inputRef);
               }
          };
        
          const handleFinished = () => {
            onEditFinished();
            focus(cellRef);
          };

          return (
               <Cell
                 {...props}
                 ref={cellRef}
                 tabIndex={0}
                 className={editing ? 'table-cell-editing' : 'table-cell'}
                 onDoubleClick={handleEdit}
                 
               >
                 {editing ? (
                   <Field
                     ref={inputRef}
                     defaultValue={value}
                     onBlur={handleFinished}
                     onKeyPress={e => {
                       if (e.key === 'Enter') {
                         handleFinished();
                       }
                     }}
                     onChange={value => {
                       onChange?.(rowData.id, dataKey, value);
                     }}
                   />
                 ) : (
                   text
                 )}
               </Cell>
             );
     };



    return (

               <Stack spacing={1}>
                         <Stack direction='row' spacing={2}>
                   <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeysTable.current.length > 0) {
                         const [success, data] = danxiangdinge_djcs(selectedRowKeysTable.current[0]);
                         if(success) {
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                            myTable.current.updateData(data.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                              resetUI();
                            });
                            
                         }
                      }
                 
                      
                      }}
                   >单项定额</Button>
                      <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeysTable.current.length > 0) {
                          let newData = shanchu_djcs(selectedRowKeysTable.current[0]);
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                          myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current)).then(function(){
                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                             // if (newData.filter(x=>x['key'] == selectedRowKeysTable.current[0]).length == 0) {
                                   resetUI();
                              // }
                          });
                          
                          
                          
                      }
                      
                 
                      
                      }}
                   >删除</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                      let newData = undo_djcs();
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                      myTable.current.updateData(newData).then(function(){
                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                         
                            resetUI();
                            
                        
                      });
                     
                      
                      }}
                   >撤销</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                      let newData = redo_djcs();
                                          let former = myTable.current.element.children[1].scrollTop;
                                          let former2 = myTable.current.element.children[1].scrollLeft;
                      myTable.current.updateData(newData).then(function(){
                                            myTable.current.element.children[1].scrollTop = former;
                                            myTable.current.element.children[1].scrollLeft = former2;
                         resetUI();
                      });
                      
                      
                      
                      }}
                   >重做</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                            console.log("save to cloud");
                            loadingCallback();
                      
                      }}
                   >保存</Button>

                  
                   </Stack>
                 <div ref={myRef}> 
                  </div>
                   <Box >
                   
                   <TabContext value={value}>
                       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                         <TabList onChange={handleChange} aria-label="lab API tabs example"  sx={{minHeight: '24px'}}   >
                           <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" />
                         </TabList>
                       </Box>
                       <TabPanel value="1">
                       <div ref={rcjRef}></div>
                       </TabPanel>
                       <TabPanel value="2">
                       <div ref={rcj2Ref}></div>

                       </TabPanel>
                       <TabPanel value="3">
                       <Box sx={{maxHeight: `180px`, minHeight: `180px`, height: `180px`}}>
                         <CustomProvider locale={zhCN}>
                         <EditableContext.Provider value={{ editingId, editingKey, onEdit, onEditFinished }}>
                         <style>{styles}</style>

                        <Table rowHeight={rowData=>{
                         return 40;
                        }}
                        height={180} data = {fuzhu} id="fuzhu">
                         <Column width={80} align="center">
                              <HeaderCell style={{padding: 0}}>
                                   <div style={{lineHeight: '40px'}}>
                                        <Checkbox inline checked={checked} indeterminate={indeterminate} onChange={handleCheckAll} disabled={!fuzhuEnable}
                                        ></Checkbox>
                                   </div>
                              </HeaderCell>
                              <CheckCell dataKey="id" checkedKeys={checkedKeys} onChange={handleCheck} disabled={!fuzhuEnable}></CheckCell>
                         </Column>
                         <Column width={80} align="center">
                              <HeaderCell style={{ "fontSize": "0.875rem" }}>序号</HeaderCell>
                              <Cell dataKey="序号" style={{ "fontSize": "0.875rem" }}></Cell>
                         </Column>
                         <Column width={120} align="center">
                              <HeaderCell style={{ "fontSize": "0.875rem" }}>编号</HeaderCell>
                              <Cell dataKey="编号" style={{ "fontSize": "0.875rem" }}></Cell>
                         </Column>
                         <Column width={120} align="center">
                              <HeaderCell style={{ "fontSize": "0.875rem" }}>数量</HeaderCell>
                              <EditableCell dataKey="数量" dataType="number" style={{ "fontSize": "0.875rem" }} onChange={handleChangeFuzhuSL} />
                         </Column>
                         <Column fullText width={650} align="center">
                              <HeaderCell style={{ "fontSize": "0.875rem" }}>说明</HeaderCell>
                              <Cell dataKey="说明" style={{ "fontSize": "0.875rem" }}></Cell>
                         </Column>
                        </Table>
                        </EditableContext.Provider>
                        </CustomProvider>
                       </Box>
                      

                       </TabPanel>

                       <TabPanel value="4">
                          <div ref={tuijianRef}></div>

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

                  </Stack>



    );
}