qingdan/front/src/Qingdan.js

import * as React from 'react';
import Box from "@mui/material/Box";
import 'handsontable/dist/handsontable.full.min.css';
//import 'handsontable/styles/ht-theme-main.min.css';
import { HandsonTable } from 'handsontable/base';
import { Table, ConfigProvider, Button as AButton } from "antd";
import {HotTable} from "@handsontable/react-wrapper";
import { registerAllModules } from 'handsontable/registry';
import {RichTreeView } from "@mui/x-tree-view/RichTreeView";
import { Grid } from '@mui/material';
import Tab from "@mui/material/Tab";
import TabContext from "@mui/lab/TabContext";
import TabList from "@mui/lab/TabList";
import TabPanel from "@mui/lab/TabPanel";
import Stack from "@mui/material/Stack";
//import { registerPlugin, NestedRows } from 'handsontable/plugins';
//registerPlugin(NestedRows);
import Service from './Service';
import { textRenderer, registerRenderer } from 'handsontable/renderers';
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} from './editor';
import { ConfigValueTooSmallError, HyperFormula } from 'hyperformula';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import { DataGrid } from '@mui/x-data-grid';
import { useHotEditor } from "@handsontable/react-wrapper";
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 Editable from './Editable';
import {

     SettingFilled,

   } from '@ant-design/icons';
registerAllModules();


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








export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu/*后台传回来的附注信息，要整理后才能成为展示用的行*/ , beizhuFK, clickCallback, loadingCallback, dingeclick, tihuanCallback, tihuanClick}) {


     

     const hyperformulaInstance = HyperFormula.buildEmpty({
          // to use an external HyperFormula instance,
          // initialize it with the `'internal-use-in-handsontable'` license key
          licenseKey: 'internal-use-in-handsontable',
        });


     function selectRow(record) {
          /*
          const selectedRowKeys_ = [...selectedRowKeys];
          if (selectedRowKeys_.indexOf(record.key) >= 0) {
               selectedRowKeys_.splice(selectedRowKeys_.indexOf(record.key), 1);
          } else {
               selectedRowKeys_.push(record.key);
          }*/
           setSelectedRowKeys([record.key]);
     }
     




     registerRenderer('customStylesRenderer', (hotInstance, TD, row, column, prop, value, ...rest) => {
          let newValue = value; 
          if ((column == 10 || column == 11 || column == 5) && row > 0) {
            newValue = Number(value).toFixed(2).toString();
         }
          textRenderer(hotInstance, TD, row, column, prop, newValue, ...rest);
         for (let i = 0; i < highlight.current.length; i++) {
          let entry = highlight.current[i];
          if (entry.row == row && entry.col == column) {
               TD.style.fontWeight = 'bold';
               TD.style.color = 'green';
               TD.style.background = '#d7f1e1';
          }
         }
         
       });


    const lastClickRef = React.useRef(null);
 


    const [detail, setDetail] = React.useState([
        {"序号": null, "清单编码" : null, "名称" : null,"项目特征" : null,
        "计算规则" : null,
        "单位" : null,
        "数量": null,
        "综合单价" : null,
        "合价" : null,
        "人工费": null,
        "主材费" : null,
        "设备费": null,
        "辅材费": null,
        "材料费" : null,
        "机械费" : null,
        "管理费": null,
        "利润": null,
        "暂估价" : null,
        "综合人工工日" : null,
        "备注" : null}]
    );
    const [valueTab, setValueTab] = React.useState("1");
    const [rcjhl, setRcjhl] = React.useState([]);
    const [rcjhl2, setRcjhl2] = React.useState([]);
    const [fuzhu, setFuzhu] = React.useState([]);//展示用的附注行
    const [tuijian, setTuijian] = React.useState([]);
    const [fuzhuEnable, setFuzhuEnable] = React.useState(false);
    const highlight = React.useRef([]);
    const selectedRow = React.useRef(-1);
    const hotRef = React.useRef(null);
    const detailRef = React.useRef(null);
    const hotRcjRef = React.useRef(null);
    const hotTuijianRef = React.useRef(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 beizhuFKRef = React.useRef(null);
    const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
    const [rowSelectionModel, setRowSelectionModel] = React.useState({
     type: 'include',
     belong: '',
     ids: new Set(),
   });
    const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
    const rowSelection = {
     selectedRowKeys,
     onChange: (selectedRowKeys) => {
          //console.log(selectedRowKeys);
          if (selectedRowKeys.length > 0) {
               setExpandedRowKeys([selectedRowKeys.at(-1)]);
          } else {
          setSelectedRowKeys(selectedRowKeys);
          //handleSelection(selectedRowKeys);
          }
     }
     
      
     };
    React.useEffect(
        () => {
          Service.generateQingdanmingxi(name, bh, bt).then(x=>{
          //切换清单将重置缓存和操作栈
            
          setDetail(x);
          detailRef.current = x;

          setRcjhl([]);
          setFuzhu([]);
          selectedRow.current = -1;
          });
        }, [bh, bt]
      );
    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, '序号': i+1, '编号': beizhu["BZBH"][key], '说明': beizhu["SM"][key]});//序号很重要
                }
                setFuzhu(result);
                setRowSelectionModel({type: 'include', belong: debmRef.current, 
                ids: new Set(extractFuzhu(debmRef.current))});
            }
        }, [beizhu]//后台传回来的附注信息有更新，要把他展示出来
      );


      React.useEffect(
          () => {
               handleSelection(selectedRowKeys);
          }, [selectedRowKeys]
      );

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

      React.useEffect(
          () => {
               //console.log(dingeclick);
               if (selectedRowKeys.length > 0 ) {
                    const [success, data] = changguidinge(JSON.parse(dingeclick), selectedRowKeys[0]);
                    if (success) {
                         setDetail(data);
                         detailRef.current = data;
                         setExpandedRowKeys([...expandedRowKeys, selectedRowKeys[0]]);
                    }
               }
               
          }, [dingeclick]//常规添加定额
      );

      React.useEffect(
          () => {
               //console.log(dingeclick);
               if (selectedRowKeys.length > 0 ) {
                    const data = huan(JSON.parse(tihuanClick), selectedRowKeys[0]);
                    
                    setDetail(data);
                    detailRef.current = data;
                         
                    handleSelection(selectedRowKeys);
                         

                         //setExpandedRowKeys([...expandedRowKeys, selectedRowKeys[0]]);
                    
               }
               
          }, [tihuanClick]//替换定额人材机
      );
    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 = 1; i < rcjhl.length; i++) {
              let entry = rcjhl[i];
              let bianhao = entry[1];
              let rcjlb = entry[8];
              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[2])hit = true;
                          let danjia = Number(entry[5]);
                          if (danjia != rgde[j]["YSJG"]) {
                               //console.log(`[${i},5]danjia bu yizhi`);
                               toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                          }
                          let hanliang = Number(entry[10]);
                          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[2])hit = true;
                         let danjia = Number(entry[5]);
                         if (danjia != jxde[j]["tbdj"]) {
                              //console.log(`[${i},5]danjia bu yizhi`);
                              toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                         }
                         let hanliang = Number(entry[10]);
                         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[2])hit = true;
                         let danjia = Number(entry[5]);
                         if (danjia != clde[j]["YSJG"]) {
                              //console.log(`[${i},5]danjia bu yizhi`);
                              toHighlight.push({row: i, col: 5, renderer: "customStylesRenderer"});
                         }
                         let hanliang = Number(entry[10]);
                         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]
      );


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

      const afterChange = (changes, source) => {
          if (changes == null || changes.every(x=>x[2] == x[3])) {

          } else {
               let data =  hotRcjRef.current?.hotInstance?.getData();
               for(let i = 1; i < data.length; i++) {
                    data[i][11] = Number(data[i][10]) * Number(data[i][5]);
                }
                setRcjhl(data);
          
          let newData = updateDercj(selectedRowKeys[0], data);
          setDetail(newData);
          detailRef.current = newData;
          handleSelection(selectedRowKeys);
          }
        };

        const afterOnCellMouseDown = (event, coord, TD) => {
          
          if (lastClickRef.current == null) {
               lastClickRef.current = Date.now();
          } else {
               let origin = lastClickRef.current;
               lastClickRef.current = Date.now();
               let delta = lastClickRef.current - origin;
               if (delta < 300 && coord.col == 1 && coord.row > 0 && !isQdrcj.current){//300 ms -> 换
                   tihuanCallback(coord.row, coord.col);
               }
          }
        };

  

      
      const handleSelection = (row) => {
          if (row == null || row.length == 0) {
               setRcjhl([]);
               setFuzhu([]);
               isQdrcj.current = true;
               highlight.current = [];
               return;
          }
                        let qd = detail.filter(x=>x['key'] == row[0]);
                        if (qd.length > 0) {
                             setFuzhu([]);
                             Service.generateQingdanrcj(name, bh,bt,qd[0]['清单编码']).then(x=>{
                              
                              setRcjhl(x);
                              //hotRcjRef.current?.hotInstance?.loadData(x);
                              
                                isQdrcj.current = true;
                                highlight.current = [];
                             });
                             Service.generateQingdanTuijian(name, bh,bt,qd[0]['清单编码']).then(x=>{
                              setTuijian(x);
                              //hotTuijianRef.current?.hotInstance?.loadData(x);
                              //isQdrcj.current = true;
                              //setHighlight([]);
                           });
                        }else{
                            let qdbm = null;
                            let qd = detailRef.current.filter(x=>
                              x["children"].filter(y=>y['key'] == row[0]).length > 0
                            )[0];
                            qdbm = qd['清单编码'];
                            let debm = qd['children'].filter(x=>x['key'] == row[0])[0]['清单编码'];
                            let danwei = qd['children'].filter(x=>x['key'] == row[0])[0]['单位'];

                             //console.log(name, bh,bt,qdbm, selected[1]);
                             debmRef.current = debm;
                             clickCallback(qdbm, debm);
                             Service.generateDingercj(name, bh,bt,qdbm, debm, danwei).then(x=>{
                               console.log(x);
                               setRcjhl(x[0]);
                               setFuzhuEnable(x[1]);
                               //hotRcjRef.current?.hotInstance?.loadData(x);
                               isQdrcj.current = false;
                               let toHighlight = [];
                               for(let i = 1; i < x[0].length; i++) {
                                   let entry = x[0][i];
                                   let bianhao = entry[1];
                                   let rcjlb = entry[8];
                                   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[2])hit = true;
                                              let danjia = Number(entry[5]);
                                              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[10]);
                                              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[2])hit = true;
                                               let danjia = Number(entry[5]);
                                               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[10]);
                                               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[2])hit = true;
                                               let danjia = Number(entry[5]);
                                               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[10]);
                                               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;
                             });

                        }


                        
      };


    return (
        <Stack spacing={2}>

                   <Box>
                   <Stack direction='row' spacing={2}>
                   <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeys.length > 0) {
                         const [success, data] = danxiangdinge(selectedRowKeys[0]);
                         if(success) {
                            setDetail(data);
                            detailRef.current = data;
                            setExpandedRowKeys([...expandedRowKeys, selectedRowKeys[0]]);
                         }
                      }
                 
                      
                      }}
                   >单项定额</Button>
                      <Button variant="outlined" size="small" onClick={() => {
                      if (selectedRowKeys.length > 0) {
                          let newData = shanchu(selectedRowKeys[0]);
                          setDetail(newData);
                          detailRef.current = newData;
                          if (newData.filter(x=>x['key'] == selectedRowKeys[0]).length == 0) {
                              setSelectedRowKeys([]);
                              handleSelection([]);
                          }
                          
                          
                      }
                      
                 
                      
                      }}
                   >删除</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                      let newData = undo();
                      setDetail(newData);
                      detailRef.current = newData;
                      if (newData.filter(x=>x['key'] == selectedRowKeys[0]).length == 0
                      && newData.filter(x=>x["children"].filter(y=>y['key']==selectedRowKeys[0]).length > 0).length == 0) {
                         setSelectedRowKeys([]);
                         handleSelection([]);
                     } else {
                         handleSelection(selectedRowKeys);
                     }
                      
                      }}
                   >撤销</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                      let newData = redo();
                      setDetail(newData);
                      detailRef.current = newData;
                      if (newData.filter(x=>x['key'] == selectedRowKeys[0]).length == 0
                      && newData.filter(x=>x["children"].filter(y=>y['key']==selectedRowKeys[0]).length > 0).length == 0) {
                         setSelectedRowKeys([]);
                         handleSelection([]);
                     } else {
                         handleSelection(selectedRowKeys);
                     }
                      
                      }}
                   >重做</Button>
                   <Button variant="outlined" size="small" onClick={() => {
                            console.log("save to cloud");
                            loadingCallback();
                      
                      }}
                   >保存</Button>

                  
                   </Stack>
                   <Box sx={{minHeight: `calc(100vh - 340px)`}}>
                   <ConfigProvider
                   theme={{
                    components: {
                      Table: {
                        /* here is your component tokens */
                        cellPaddingBlock : 8
                      },
                    },
                  }}
                   >
                 <Table 
                    dataSource={detail}
                    
                    
                    //afterSelection={handleSelection}
                    //afterSelection={handleSelection}
                    ref = {hotRef}
                    expandable = {
                         {
                              expandedRowKeys,
                              onExpand: (expandable, record) => {
                                   if (expandable) {
                                     setExpandedRowKeys([...expandedRowKeys, record.key]);
                                   } else {
                                     setExpandedRowKeys(expandedRowKeys.filter((id) => record.key !== id));
                                   }
                                 },
                              expandRowByClick: true
                         }
                    }

                    rowSelection= {rowSelection}
                    onRow={(record)=>({
                         onClick: () => {
                              selectRow(record);
                            }
                    })}
                    scroll={{ x: 'max-content' , y : 'calc(100vh - 400px)'}}
                    //pagination={{ position: ['none', 'none'] }}
                    pagination={false}
                    columns = {[
                         
                         { dataIndex: '操作',        title : '操作',        key : '操作'          , width : 30 , fixed: 'left'   },
                         { dataIndex: '序号'  ,       title : '序号'   ,      key : '序号'        , width : 30   , fixed: 'left'      },
                         { dataIndex: '清单编码'  ,   title : '清单编码' ,    key : '清单编码'    , width : 100     , fixed: 'left'    },
                         { dataIndex: '名称'   ,      title : '名称'  ,       key : '名称'        , width : 200         },
                         { dataIndex: '项目特征' ,    title : '项目特征' ,    key : '项目特征'    , width : 300         },
                         { dataIndex: '计算规则' ,    title : '计算规则' ,    key : '计算规则'    , width : 300         },
                         { dataIndex: '单位'    ,     title : '单位'  ,       key : '单位'        , width : 100         },
                         { dataIndex: '数量'    ,     title : '数量'  ,       key : '数量'        , width : 100    ,
                         
                         render: (text, record) => {
                              //console.log("column render");
                              //console.log("text".concat(text));
                              //console.log(record);
                                      if(record['序号']) {
                                        return ( <plaintext>{text}</plaintext> );
                                      } else {
                                        return ( 
                                             <Editable initialText={text}  onChange={(value)=>{
                                                  let [success, data] = updateShuliang(value, selectedRowKeys[0]);
                                                  if (success) {
                                                       setDetail(data);
                                                       detailRef.current = data;
                                                       handleSelection(selectedRowKeys);
                                                  }
                                             }}
                                             >
                                            </Editable>
                                         );
                                      }
                                      //console.log(text);
                                      
                              }
                         },
                         { dataIndex: '综合单价' ,   title : '综合单价'  ,   key : '综合单价'     , width : 100  ,
                             render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '合价'   ,      title : '合价'   ,      key : '合价'        , width : 100  ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '人工费'  ,     title : '人工费'  ,     key : '人工费'      , width : 100     ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '主材费'  ,     title : '主材费'  ,     key : '主材费'      , width : 100    ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '设备费'  ,     title : '设备费'  ,     key : '设备费'      , width : 100   ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '辅材费'  ,     title : '辅材费'  ,     key : '辅材费'      , width : 100   ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '材料费'   ,    title : '材料费'  ,     key : '材料费'      , width : 100  ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '机械费'   ,    title : '机械费'  ,     key : '机械费'      , width : 100     ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '管理费'  ,     title : '管理费'  ,     key : '管理费'      , width : 100    ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '利润'   ,      title : '利润'   ,      key : '利润'        , width : 100  ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '暂估价'  ,     title : '暂估价'  ,     key : '暂估价'      , width : 100 ,
                         render: (text, record) => {
                              let temp = Number(text);
                              let temp2 = temp.toFixed(2);
                              let temp3 = temp2.toString();
                              return ( <plaintext>{temp3}</plaintext> );

                             }
                         },
                         { dataIndex: '综合人工工日', title : '综合人工工日', key : '综合人工工日', width : 100         },
                         { dataIndex: '备注'     ,    title : '备注'   ,      key : '备注'        , width : 100         },
                         
                        

                         
                             
                            
                       ]}
                   
                  />
                  </ConfigProvider>
                  </Box>
                  </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" />
                         </TabList>
                       </Box>
                       
                       <TabPanel sx={{p: 1}} value="1">
                          <HotTable 
                          nestedRows={false}
                             data={rcjhl
                             }
                             //cell={highlight}
                             manualColumnResize={true}
                             rowHeaders={true}
                             colHeaders={true}
                             height="190"
                             formulas={{
                              engine: hyperformulaInstance,
                              sheetName: 'Rcj',
                            }}
                             
                              cells={(row, col) => {
                                   if (isQdrcj.current) return {readOnly: true, renderer: "customStylesRenderer"};
                                   if (col == 8) {
                                        return { readOnly: true, renderer: "customStylesRenderer" };
                                   }
                                   if (row === 0) {
                                     return { readOnly: true, renderer: "customStylesRenderer" };
                                   }
                                   if (col <= 1 || col === 11) {
                                        return { readOnly: true, renderer: "customStylesRenderer" };
                                   }
                           
                                   return {renderer: "customStylesRenderer" };
                                 }}
                             fixedRowsTop={1}
                             selectionMode="single"
                             autoWrapRow={false}
                             autoWrapCol={false}
                             ref = {hotRcjRef}
                             afterChange={afterChange}
                             afterOnCellMouseDown={afterOnCellMouseDown}
                             licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                           >
                              
                         </HotTable>

                       </TabPanel>
                       <TabPanel sx={{p: 1}} value="2">
                          <HotTable 
                          nestedRows={false}
                             data={rcjhl2
                             }
                             manualColumnResize={true}
                             rowHeaders={true}
                             colHeaders={true}
                             height="190"
                             readOnly={true}
                             fixedRowsTop={1}
                             selectionMode="single"
                             autoWrapRow={false}
                             autoWrapCol={false}
                             licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                           />

                           

                       </TabPanel>
                       <TabPanel sx={{p: 1}} value="3">
                       <div style={{ height: 190}}>
                          <DataGrid  disableColumnMenu
                          getRowHeight={(params) => "auto"}
                          localeText={{
                              noRowsLabel: '无数据',
                              paginationRowsPerPage: '每页行数',
                              footerRowSelected: (count) => `共选中了${count.toLocaleString()}行`,
                             
                              
                            }}
                          columns={
                              [
                                   { field: '序号', headerName: '序号', },
                                   {
                                     field: '编号',
                                     headerName: '编号',
                                     
                                   },
                                   {
                                     field: '说明',
                                     headerName: '说明',
                                     width: 550
                                    
                                   },
                                  
                                 ]
                             }
                         scroll={{ x: 'max-content' , y : 200}}
                         rows={fuzhu}
                         hideFooter={true}
                         checkboxSelection={fuzhuEnable}
                         rowSelectionModel={rowSelectionModel}
                         onRowSelectionModelChange={(newRowSelectionModel) => {
                              console.log(newRowSelectionModel);
                              if (newRowSelectionModel.hasOwnProperty('belong')) {
                                   setRowSelectionModel(newRowSelectionModel);
                              } else {
                                  console.log(rowSelectionModel);
                                  setRowSelectionModel(newRowSelectionModel);
                                  const [newData, newHl] = handleBeizhu(beizhuFKRef.current, selectedRowKeys[0], newRowSelectionModel.ids, fuzhu);
                                  if (newData) {
                                      setDetail(newData);
                                      detailRef.current = newData;
                                      setRcjhl(newHl);
                                  }
                              }
                              
                            }}
                           />
                           </div>
                          

                       </TabPanel>
                       <TabPanel sx={{p: 1}} value="4">
                          <HotTable 
                          nestedRows={false}
                             data={tuijian
                             }
                             ref = {hotTuijianRef}
                             manualColumnResize={true}
                             rowHeaders={true}
                             colHeaders={true}
                             height="190"
                             readOnly={true}
                             fixedRowsTop={1}
                             selectionMode="single"
                             autoWrapRow={false}
                             autoWrapCol={false}
                             licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                           />

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





    );
}