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 {HotTable} from "@handsontable/react";
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 {danxiangdinge_index} from './utils';
import {shanchu, undo, redo, quanbushanchu, danxiangdinge, updateDercj} from './editor';
import { HyperFormula } from 'hyperformula';

registerAllModules();


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


function copy(input) {
     return JSON.parse(JSON.stringify(input));
}



export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCallback}) {
     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 coverRenderer(_instance, td, _row, _col, _prop, value, _cellProperties) {
     
          let z = _instance.getDataAtRow(_row);
          if(z[1] == null || z[1].length == 0) {
               const button = document.createElement('button');
               button.innerText="删除";
               //img.src = value;
               /*button.addEventListener('click', (event) => {
                    console.log(hotRef.current?.hotInstance?.getData()[selectedRow.current]);
                    hotRef.current?.hotInstance?.alter('remove_row', selectedRow.current, 1);
                    //console.log(plugin);
                   event.preventDefault();
               });*/
               button.addEventListener('mousedown', (event) => {
                    setDetail(shanchu(hotRef, selectedRow));
                    //console.log(plugin);
                   event.preventDefault();
               });
               td.innerText = '';
               td.appendChild(button);
          } else {
               const button = document.createElement('button');
               button.innerText="全部删除";
               //img.src = value;
               button.addEventListener('mousedown', (event) => {
                    setDetail(quanbushanchu(hotRef, selectedRow));
                    event.preventDefault();
               });
               td.innerText = '';
               td.appendChild(button);
          }
          
      
          return td;
        }



     registerRenderer('customStylesRenderer', (hotInstance, TD, row, column, ...rest) => {
         textRenderer(hotInstance, TD, row, column, ...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';
          }
         }
         
       });
       registerRenderer('highlightRowRenderer', (hotInstance, TD, row, column, ...rest) => {
          if (row == selectedRow.current) {
          if(column > 0 ) {
              textRenderer(hotInstance, TD, row, column, ...rest);
              TD.style.color = 'green';
              TD.style.background = '#d7f1e1';
          }
          if (column == 0) {
               coverRenderer(hotInstance, TD, row, column, ...rest);
          }
          } else {
               textRenderer(hotInstance, TD, row, column, ...rest);
          }
        });


    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 [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 highlight = React.useRef([]);
    const selectedRow = React.useRef(-1);
    const hotRef = 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);
    
    
    React.useEffect(
        () => {
          Service.generateQingdanmingxi(name, bh, bt).then(x=>{
          //console.log(x);
          //let y = x.map(t=>{
           //    t["操作"]=`<div style="text-align:center"> <button>全部删除</button></div>`;
          //     return t;
          //});
          
          setDetail(x);

          setRcjhl([]);
          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([i+1, beizhu["BZBH"][key], beizhu["SM"][key]]);
                }
                setFuzhu(result);
            }
        }, [beizhu]
      );
    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) => {
        setValue(newValue);
      };

      const afterUpdateData = (x, initial, source)=>{
          
              console.log(source);
              let plugin = hotRef.current?.hotInstance.getPlugin("NestedRows");
               let ui = plugin.collapsingUI;
               //ui.collapseRow(1);
              hotRef.current?.hotInstance?.scrollViewportTo({ row: selectedRow.current });
          
     };

      
      const handleSelection = (row, column) => {
          selectedRow.current = row;
                        let selected = hotRef.current?.hotInstance?.getData()[row];
                        if (!selected) return;
                        if (selected[1] != null) {
                             Service.generateQingdanrcj(name, bh,bt,selected[2]).then(x=>{
                              
                              //setRcjhl(x);
                              hotRcjRef.current?.hotInstance?.loadData(x);
                              
                                isQdrcj.current = true;
                                highlight.current = [];
                             });
                             Service.generateQingdanTuijian(name, bh,bt,selected[2]).then(x=>{
                              //setTuijian(x);
                              hotTuijianRef.current?.hotInstance?.loadData(x);
                              //isQdrcj.current = true;
                              //setHighlight([]);
                           });
                        }else{
                            let qdbm = null;
                            for (let i = row - 1;  i > -1; i= i - 1) {
                                let above = hotRef.current?.hotInstance?.getData()[i];
                                if (above[1] != null) {
                                    qdbm = above[2];
                                    break;
                                }
                                 
                            }
                             //console.log(name, bh,bt,qdbm, selected[1]);
                             clickCallback(qdbm, selected[2]);
                             Service.generateDingercj(name, bh,bt,qdbm, selected[2], selected[6]).then(x=>{
                               console.log(x);
                               //setRcjhl(x);
                               hotRcjRef.current?.hotInstance?.loadData(x);
                               isQdrcj.current = false;
                               let toHighlight = [];
                               for(let i = 1; i < x.length; i++) {
                                   let entry = x[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;
                             });

                        }


                        hotRef.current?.hotInstance?.render();
      };


    return (
        <Stack spacing={2}>

                   <Box>
                   <Stack direction='row' spacing={2}>
                   <Button variant="outlined" onClick={() => {
                      const [success, data] = danxiangdinge(selectedRow.current);
                      if(success) {
                         setDetail(data);
                      }
                 
                      
                      }}
                   >单项定额</Button>
                   <Button variant="outlined" onClick={() => {
                      setDetail(undo());
                      
                      }}
                   >撤销</Button>
                   <Button variant="outlined" onClick={() => {
                      setDetail(redo());
                      
                      }}
                   >重做</Button>

                  
                   </Stack>
                 <HotTable 
                 nestedRows={true}
                    data={detail
                    }
                    afterUpdateData={afterUpdateData}
                    beforeUpdateData={(a,b,c)=>{
                         let plugin = hotRef.current?.hotInstance.getPlugin("NestedRows");
                         let ui = plugin.collapsingUI;
                         console.log(ui);


                    }}
                    
                    //afterSelection={handleSelection}
                    afterSelection={handleSelection}
                    ref = {hotRef}
                    cells={(row, col, prop) => {
                         
                           return {
                             // row options, which apply to each cell of the second row
                             // and to each cell of the fifth row
                             renderer: "highlightRowRenderer"
                           };
                         
                       }
                    }
                    colWidths={(index) => {
                         if (index == 4 || index == 5) return 300;
                         else return 100;
                       }}
                    readOnly={true}
                    /*afterUndo={(action) => {
                         console.log(action);
                         console.log(hotRef.current?.hotInstance?.getData());
                     }}*/
                    //trimRows={true}
                    contextMenu={false}
                    bindRowsWithHeaders={true}
                    fixedRowsTop={0}
                    fixedColumnsStart={2}
                    manualColumnResize={true}
                    rowHeaders={true}
                    columns = {[

                         { data: '操作' },
                         { data: '序号' },
                         { data: '清单编码' },
                         { data: '名称' },
                         { data: '项目特征' },
                         { data: '计算规则' },
                         { data: '单位' },
                         { data: '数量' },
                         { data: '综合单价' },
                         { data: '合价' },
                         { data: '人工费' },
                         { data: '主材费' },
                         { data: '设备费' },
                         { data: '辅材费' },
                         { data: '材料费' },
                         { data: '机械费' },
                         { data: '管理费' },
                         { data: '利润' },
                         { data: '暂估价' },
                         { data: '综合人工工日' },
                         { data: '备注' },

                       ]}
                    colHeaders={["操作", "序号", "清单编码", "名称", "项目特征", "计算规则", "单位", "数量", "综合单价", "合价", "人工费", "主材费", 
                            "设备费", "辅材费", "材料费", "机械费", "管理费", "利润" , "暂估价", "综合人工工日", "备注" ]}
                    height="400"
                    selectionMode="single"
                    autoWrapRow={false}
                    autoWrapCol={false}
                    licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                  />
                  </Box>
                   <Box >
                   
                   <TabContext value={value}>
                       <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                         <TabList onChange={handleChange} aria-label="lab API tabs example">
                           <Tab label="人材机含量" value="1" />
                           <Tab label="标准定额人材机含量" value="2" />
                           <Tab label="定额附注" value="3" />
                           <Tab label="组价推荐" value="4" />
                         </TabList>
                       </Box>
                       <TabPanel value="1">
                          <HotTable 
                          nestedRows={false}
                             data={rcjhl
                             }
                             //cell={highlight}
                             manualColumnResize={true}
                             rowHeaders={true}
                             colHeaders={true}
                             height="300"
                             formulas={{
                              engine: hyperformulaInstance,
                              sheetName: 'Rcj',
                            }}
                             
                              cells={(row, col) => {
                                   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={(changes, source) => {
                              //console.log(hotRcjRef.current?.hotInstance?.getData());
                              updateDercj(selectedRow.current, hotRcjRef.current?.hotInstance?.getData());
                            }}
                             licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                           />

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

                       </TabPanel>
                       <TabPanel value="3">
                          <HotTable 
                          nestedRows={false}
                             data={fuzhu
                             }
                             manualColumnResize={true}
                             rowHeaders={true}
                             colHeaders={true}
                             height="300"
                             readOnly={true}
                             fixedRowsTop={1}
                             selectionMode="single"
                             autoWrapRow={false}
                             autoWrapCol={false}
                             licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                           />

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

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



    );
}