try danxiangdinge but need to change tree table to antd

front/src/App2.js

@@ -163,6 +163,13 @@ const MUI_X_PRODUCTS = [
         return result;
     };
 
+    const clickCallback_ = (qdbm, debh) => {
+      console.log('####################################zylb#####################'.concat(zylb.toString()));
+      //console.log(debh);
+      setExpandedQd(false);
+      setExpandedDe(true);//1 jianzhu 2 zhuangshi 3 anzhuang 4 shizheng 5 yuanlin 6 guidao 7 xiushantujian 8 xiushananzhuang 9 xiushanjiagu  
+    };
+
     const clickCallback = (qdbm, debh) => {
       console.log('####################################zylb#####################'.concat(zylb.toString()));
        //console.log(debh);

front/src/Qingdan.js

@@ -19,7 +19,7 @@ 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, push_op, quanbushanchu, danxiangdinge} from './editor';
+import {shanchu, undo, redo, quanbushanchu, danxiangdinge, updateDercj} from './editor';
 import { HyperFormula } from 'hyperformula';
 
 registerAllModules();
@@ -48,8 +48,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
           // initialize it with the `'internal-use-in-handsontable'` license key
           licenseKey: 'internal-use-in-handsontable',
         });
-     const memory = React.useRef([]);
-     const mem_pointer = React.useRef(0);
+     
      function coverRenderer(_instance, td, _row, _col, _prop, value, _cellProperties) {
      
           let z = _instance.getDataAtRow(_row);
@@ -64,8 +63,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                    event.preventDefault();
                });*/
                button.addEventListener('mousedown', (event) => {
-                    setDetail(shanchu(hotRef, selectedRow, detailRef));
-                    push_op(memory, mem_pointer, detailRef);
+                    setDetail(shanchu(hotRef, selectedRow));
                     //console.log(plugin);
                    event.preventDefault();
                });
@@ -76,8 +74,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                button.innerText="全部删除";
                //img.src = value;
                button.addEventListener('mousedown', (event) => {
-                    setDetail(quanbushanchu(hotRef, selectedRow, detailRef));
-                    push_op(memory, mem_pointer, detailRef);
+                    setDetail(quanbushanchu(hotRef, selectedRow));
                     event.preventDefault();
                });
                td.innerText = '';
@@ -90,13 +87,20 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
 
 
 
-     registerRenderer('customStylesRenderer', (hotInstance, TD, ...rest) => {
-         textRenderer(hotInstance, TD, ...rest);
-         TD.style.fontWeight = 'bold';
-         TD.style.color = 'green';
-         TD.style.background = '#d7f1e1';
+     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';
@@ -105,6 +109,9 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
           if (column == 0) {
                coverRenderer(hotInstance, TD, row, column, ...rest);
           }
+          } else {
+               textRenderer(hotInstance, TD, row, column, ...rest);
+          }
         });
 
 
@@ -127,16 +134,16 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
         "综合人工工日" : null,
         "备注" : null}]
     );
-    const detailRef = 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 [highlight, setHighlight] = 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);
@@ -153,10 +160,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
           //});
           
           setDetail(x);
-          memory.current = [copy(x)];
-          mem_pointer.current = 0;
 
-          detailRef.current = x;
           setRcjhl([]);
           selectedRow.current = -1;
           });
@@ -184,7 +188,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
           jxdeRef.current = jxde;
           cldeRef.current = clde;
           if (isQdrcj.current) {
-             setHighlight([]);
+             highlight.current = [];
           } else {
           let toHighlight = [];
           for(let i = 1; i < rcjhl.length; i++) {
@@ -252,7 +256,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
               }   
           }
           //console.log(toHighlight);
-          setHighlight(toHighlight);
+          highlight.current = toHighlight;
           }
           let bzrcjhl = [["人材机编码", "名称", "单位", "单价", "合价", "含量"]] 
           if (rgde)
@@ -277,6 +281,17 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
         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];
@@ -284,13 +299,15 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                         if (selected[1] != null) {
                              Service.generateQingdanrcj(name, bh,bt,selected[2]).then(x=>{
                               
-                              setRcjhl(x);
+                              //setRcjhl(x);
+                              hotRcjRef.current?.hotInstance?.loadData(x);
                               
                                 isQdrcj.current = true;
-                                setHighlight([]);
+                                highlight.current = [];
                              });
                              Service.generateQingdanTuijian(name, bh,bt,selected[2]).then(x=>{
-                              setTuijian(x);
+                              //setTuijian(x);
+                              hotTuijianRef.current?.hotInstance?.loadData(x);
                               //isQdrcj.current = true;
                               //setHighlight([]);
                            });
@@ -308,7 +325,8 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                              clickCallback(qdbm, selected[2]);
                              Service.generateDingercj(name, bh,bt,qdbm, selected[2], selected[6]).then(x=>{
                                console.log(x);
-                               setRcjhl(x);
+                               //setRcjhl(x);
+                               hotRcjRef.current?.hotInstance?.loadData(x);
                                isQdrcj.current = false;
                                let toHighlight = [];
                                for(let i = 1; i < x.length; i++) {
@@ -374,10 +392,13 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                                         toHighlight.push({row: i, col: 1, renderer: "customStylesRenderer"});
                                    }   
                                }
-                               setHighlight(toHighlight);
+                               highlight.current = toHighlight;
                              });
 
                         }
+
+
+                        hotRef.current?.hotInstance?.render();
       };
 
 
@@ -387,38 +408,22 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                    <Box>
                    <Stack direction='row' spacing={2}>
                    <Button variant="outlined" onClick={() => {
-                      //console.log(memory.current);
-                      const [success, data] = danxiangdinge(hotRef, selectedRow, detailRef);
+                      const [success, data] = danxiangdinge(selectedRow.current);
                       if(success) {
                          setDetail(data);
-                         push_op(memory, mem_pointer, detailRef);
                       }
                  
                       
                       }}
                    >单项定额</Button>
                    <Button variant="outlined" onClick={() => {
-                      //console.log(memory.current);
-                      if (mem_pointer.current > 0) {
-                      setDetail(memory.current[mem_pointer.current - 1]);
-                      detailRef.current = memory.current[mem_pointer.current - 1];
-                      mem_pointer.current = mem_pointer.current - 1;
-                      console.log("after undo");
-                      console.log(memory.current);
-                      console.log(mem_pointer.current);
-                      }
+                      setDetail(undo());
+                      
                       }}
                    >撤销</Button>
                    <Button variant="outlined" onClick={() => {
-                      //console.log(memory.current);
-                      if (mem_pointer.current + 1 != memory.current.length) {
-                      setDetail(memory.current[mem_pointer.current + 1]);
-                      detailRef.current = memory.current[mem_pointer.current + 1];
-                      mem_pointer.current = mem_pointer.current + 1;
-                      console.log("after redo");
-                      console.log(memory.current);
-                      console.log(mem_pointer.current);
-                      }
+                      setDetail(redo());
+                      
                       }}
                    >重做</Button>
 
@@ -428,23 +433,26 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                  nestedRows={true}
                     data={detail
                     }
-                    afterUpdateData={(x)=>{
-                         //-console.log(x);
-                         hotRef.current?.hotInstance?.scrollViewportTo({ row: selectedRow.current });
-                         //handleSelection(selectedRow.current, 0);
+                    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) => {
-                         if (row == selectedRow.current) {
+                         
                            return {
                              // row options, which apply to each cell of the second row
                              // and to each cell of the fifth row
                              renderer: "highlightRowRenderer"
                            };
-                         }
+                         
                        }
                     }
                     colWidths={(index) => {
@@ -513,7 +521,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                           nestedRows={false}
                              data={rcjhl
                              }
-                             cell={highlight}
+                             //cell={highlight}
                              manualColumnResize={true}
                              rowHeaders={true}
                              colHeaders={true}
@@ -525,19 +533,23 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                              
                               cells={(row, col) => {
                                    if (row === 0) {
-                                     return { readOnly: true };
+                                     return { readOnly: true, renderer: "customStylesRenderer" };
                                    }
                                    if (col <= 1 || col === 11) {
-                                        return { readOnly: true };
+                                        return { readOnly: true, renderer: "customStylesRenderer" };
                                    }
                            
-                                   return {};
+                                   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
                            />
 
@@ -583,6 +595,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                           nestedRows={false}
                              data={tuijian
                              }
+                             ref = {hotTuijianRef}
                              manualColumnResize={true}
                              rowHeaders={true}
                              colHeaders={true}

front/src/Service.js

@@ -1,8 +1,11 @@
-import {copy} from './utils';
+import {copy, danxiangdinge_index} from './utils';
+
 class Service{
     
     constructor() {
         this.cache = [];
+        this.memory = [];
+        this.mem_pointer = -1;
     }
     
     ip() {
@@ -32,6 +35,9 @@ class Service{
                 }
             }
         }
+        this.memory = [];
+        this.memory.push(copy(this.cache));
+        this.mem_pointer = 0;
 
     }
     async generateOutline(name) {
@@ -516,7 +522,7 @@ class Service{
             }
         }
         let qd = this.cache.filter(x=>x["清单编码"] == bm)[0];
-        return qd["rcj"];
+        return copy(qd["rcj"]);
         
     }
     async generateDingercj(name, bh, bt, qdbm, debm, danwei) {
@@ -755,6 +761,135 @@ async generateQingdanTuijian(name, bh, bt, bm) {
             return data;
         }
     }
+
+    push_op(newData) {
+        if(this.memory.length == this.mem_pointer + 1) {
+            this.memory.push(copy(newData));
+            this.mem_pointer = this.mem_pointer + 1;
+       } else{
+            this.memory.splice(this.mem_pointer + 1);
+            this.memory.push(copy(newData));
+            this.mem_pointer = this.mem_pointer + 1; 
+    
+       }
+    }
+
+    undo() {
+        if (this.mem_pointer > 0) {
+            
+            let newData = this.memory[this.mem_pointer - 1];
+            this.mem_pointer = this.mem_pointer - 1;
+            this.cache = copy(newData);
+            return newData;
+           
+        }
+
+        return copy(this.cache);
+    }
+    
+    redo() {
+        if (this.mem_pointer + 1 != this.memory.length) {
+            let newData = this.memory[this.mem_pointer + 1];
+            this.mem_pointer = this.mem_pointer + 1;
+            this.cache = copy(newData);
+            return newData;
+            }
+
+        return copy(this.cache);
+    }
+
+    shanchu(qdbm, debm) {
+        let newData = this.cache.map(x=>{
+            if (x["清单编码"] == qdbm) {
+                let y = copy(x);
+                let origin = y["__children"];
+                let trans = origin.filter(z=>z["清单编码"]!=debm);
+                y["__children"] = trans;
+                return y;
+            } else {
+                return x;
+            }
+        });
+        //////////push op
+        this.push_op(newData);
+        /////////////////
+        this.cache = copy(newData);
+        return newData;
+
+
+    }
+
+    quanbushanchu(qdbm) {
+        let newData = this.cache.map(x=>{
+            if (x["清单编码"] == qdbm) {
+                let y = copy(x);
+                
+                y["__children"] = [];
+                return y;
+            } else {
+                return x;
+            }
+        });
+        //////////push op
+        this.push_op(newData);
+        /////////////////
+        this.cache = copy(newData);
+        return newData;
+
+
+    }
+
+    updateDercj(row, change) {
+        //this.cache[row]
+
+    }
+
+    danxiangdinge(row) {
+        let bh = danxiangdinge_index(this.cache);
+        let selected = this.cache[row];
+        if (selected && selected["序号"] != null && selected["序号"].length > 0) {
+            let danwei = selected["单位"];
+            let children = selected["__children"];
+            children.push({
+                '操作': '',
+                '序号': null,
+                '清单编码': bh,
+                '名称': '',
+                '项目特征': null,
+                '计算规则': null,
+                '单位': danwei,
+                '数量': '1',
+                '综合单价': '',
+                '合价': '',
+                '人工费': '0',
+                '主材费': '0',
+                '设备费': '0',
+                '辅材费': '',
+                '材料费': '',
+                '机械费': '0',
+                '管理费': '0',
+                '利润': '0',
+                '暂估价': null,
+                '综合人工工日': null,
+                '备注': null,
+                "dercj": [["ID", "人材机编码", "名称", "规格型号", "单位", "单价", "产地", 
+                "供应厂商", "人材机类别", "甲供标志", "含量", "合价", "暂估价标志", "主要材料标志", "主材标志", "设备标志" ],
+                   ['', bh, '', '', danwei, '', '', '', '2', '', '1', '=F2*K2', '',  '', '', '' ]
+                      ] 
+
+                
+            });
+
+            this.cache = copy(this.cache);
+            this.push_op(copy(this.cache));
+            return [true, this.cache];
+        } else {
+            return [false,null];
+        }
+
+    }
+
+    
 }
 
 

front/src/editor.js

@@ -7,7 +7,19 @@ function copy(input) {
 }
 
 
-export const shanchu = (hotRef, selectedRow, detailRef) => {
+export const undo = () => {
+    let newData = Service.undo();
+    return newData;
+};
+
+
+
+export const redo = () => {
+    let newData = Service.redo();
+    return newData;
+};
+
+export const shanchu = (hotRef, selectedRow) => {
    
     let deleted = hotRef.current?.hotInstance?.getData()[selectedRow.current][2];
     //hotRef.current?.hotInstance?.alter('remove_row', selectedRow.current, 1);
@@ -21,130 +33,29 @@ export const shanchu = (hotRef, selectedRow, detailRef) => {
                  
             }
     
-    let newData = detailRef.current.map(x=>{
-        if (x["清单编码"] == qdbm) {
-            let y = copy(x);
-            let origin = y["__children"];
-            let trans = origin.filter(z=>z["清单编码"]!=deleted);
-            y["__children"] = trans;
-            return y;
-        } else {
-            return x;
-        }
-    });
-    detailRef.current = newData;
+    let newData = Service.shanchu(qdbm, deleted);
     
     return newData;
   };
 
-export const push_op = (memory, mem_pointer, detailRef) => {
-    if(memory.current.length == mem_pointer.current + 1) {
-        memory.current.push(copy(detailRef.current));
-        mem_pointer.current = mem_pointer.current + 1;
-   } else{
-        memory.current.splice(mem_pointer.current + 1);
-        memory.current.push(copy(detailRef.current));
-        mem_pointer.current = mem_pointer.current + 1; 
-
-   }
-   console.log("after op the memory is");
-   console.log(memory.current);
-   console.log(mem_pointer.current);
 
-  };
 
 
-export const quanbushanchu = (hotRef, selectedRow, detailRef) => {
+export const quanbushanchu = (hotRef, selectedRow) => {
     let qdbm = hotRef.current?.hotInstance?.getData()[selectedRow.current][2];
     
-    let newData = detailRef.current.map(x=>{
-        if (x["清单编码"] == qdbm) {
-            let y = copy(x);
-            y["__children"] = [];
-            return y;
-        } else {
-            return x;
-        }
-    });
-    detailRef.current = newData;
+    let newData = Service.quanbushanchu(qdbm);
     return newData;
   };
 
 
-export const danxiangdinge = (hotRef, selectedRow, detailRef) => {
-    let bh = danxiangdinge_index(detailRef.current);
-    let selected = hotRef.current?.hotInstance?.getData()[selectedRow.current];
-    if (selected && selected[1] != null) {
-        let danwei = selected[6];
-       let newData = detailRef.current.map(
-            x => {
-                 if (x['序号'] == selected[1]) {
-                      let y = copy(x);
-                      if (y.hasOwnProperty("__children")) {
-                        y["__children"].push(
-                            {
-                                '操作': '',
-                                '序号': null,
-                                '清单编码': bh,
-                                '名称': '',
-                                '项目特征': null,
-                                '计算规则': null,
-                                '单位': danwei,
-                                '数量': '1',
-                                '综合单价': '',
-                                '合价': '',
-                                '人工费': '0',
-                                '主材费': '0',
-                                '设备费': '0',
-                                '辅材费': '',
-                                '材料费': '',
-                                '机械费': '0',
-                                '管理费': '0',
-                                '利润': '0',
-                                '暂估价': null,
-                                '综合人工工日': null,
-                                '备注': null,
-                            }
-                        );
-
-                      } else {
-                           y["__children"] = [{
-                               '操作': '',
-                               '序号': null,
-                               '清单编码': bh,
-                               '名称': '',
-                               '项目特征': null,
-                               '计算规则': null,
-                               '单位': danwei,
-                               '数量': '1',
-                               '综合单价': '',
-                               '合价': '',
-                               '人工费': '0',
-                               '主材费': '0',
-                               '设备费': '0',
-                               '辅材费': '',
-                               '材料费': '',
-                               '机械费': '0',
-                               '管理费': '0',
-                               '利润': '0',
-                               '暂估价': null,
-                               '综合人工工日': null,
-                               '备注': null,
-                           }];
-                      }
-                      return y;
-                 } else {
-                      return x;
-                 }
-            }
-       );
-       detailRef.current = newData;
-       //Service.updateCache(newData);
-       return [true, newData];
-
-    } else {
-        return [false, detailRef.current];
-    }
+export const danxiangdinge = (selectedRow) => {
+    return Service.danxiangdinge(selectedRow);
+};
+
+export const updateDercj = (row, change) => {
+    Service.updateDercj(row, change);
+
 };