switch antd table

front/package.json

@@ -20,6 +20,7 @@
     "@mui/material": "latest",
     "@mui/x-data-grid": "^8.5.1",
     "@mui/x-tree-view": "latest",
+    "antd": "^5.26.1",
     "handsontable": "^15.3.0",
     "html-webpack-plugin": "^5.6.3",
     "hyperformula": "^3.0.0",

front/src/Qingdan.js

@@ -3,6 +3,7 @@ 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 } from "antd";
 import {HotTable} from "@handsontable/react";
 import { registerAllModules } from 'handsontable/registry';
 import {RichTreeView } from "@mui/x-tree-view/RichTreeView";
@@ -20,7 +21,7 @@ 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';
+import { ConfigValueTooSmallError, HyperFormula } from 'hyperformula';
 
 registerAllModules();
 
@@ -48,6 +49,18 @@ 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',
         });
+
+
+     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]);
+     }
      
      function coverRenderer(_instance, td, _row, _col, _prop, value, _cellProperties) {
      
@@ -148,8 +161,16 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
     const jxdeRef = React.useRef(null);
     const cldeRef = React.useRef(null);
     const isQdrcj = React.useRef(false);
-    
-    
+    const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
+    const rowSelection = {
+     selectedRowKeys,
+     onChange: (selectedRowKeys) => {
+          setSelectedRowKeys(selectedRowKeys);
+          //handleSelection(selectedRowKeys);
+        }
+     
+      
+     };
     React.useEffect(
         () => {
           Service.generateQingdanmingxi(name, bh, bt).then(x=>{
@@ -158,7 +179,12 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
            //    t["操作"]=`<div style="text-align:center"> <button>全部删除</button></div>`;
           //     return t;
           //});
-          
+          /*
+          let y = [{'操作' : '', '序号' : '', '清单编码' : '', '名称' : '', '项目特征' : '', '计算规则' : '', '单位' : '',
+           '数量' : '', '综合单价' : '', '合价' : '', '人工费' : '', '主材费' : '', '设备费' : '',
+            '辅材费' : '', '材料费' : '', '机械费' : '', '管理费' : '', '利润' : '',
+             '暂估价' : '', '综合人工工日' : '', '备注' : '',  'key' : '1'}]; */
+            
           setDetail(x);
 
           setRcjhl([]);
@@ -180,6 +206,13 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
             }
         }, [beizhu]
       );
+
+
+      React.useEffect(
+          () => {
+               handleSelection(selectedRowKeys);
+          }, [selectedRowKeys]
+      );
     React.useEffect(
         () => {
           //console.log("rgde changed");
@@ -292,41 +325,39 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
      };
 
       
-      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=>{
+      const handleSelection = (row) => {
+          if (row == null || row.length == 0) return;
+                        let qd = detail.filter(x=>x['key'] == row[0]);
+                        if (qd.length > 0) {
+                             Service.generateQingdanrcj(name, bh,bt,qd[0]['清单编码']).then(x=>{
                               
-                              //setRcjhl(x);
-                              hotRcjRef.current?.hotInstance?.loadData(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);
+                             Service.generateQingdanTuijian(name, bh,bt,qd[0]['清单编码']).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;
-                                }
-                                 
-                            }
+                            let qd = detail.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]);
-                             clickCallback(qdbm, selected[2]);
-                             Service.generateDingercj(name, bh,bt,qdbm, selected[2], selected[6]).then(x=>{
+                             clickCallback(qdbm, debm);
+                             Service.generateDingercj(name, bh,bt,qdbm, debm, danwei).then(x=>{
                                console.log(x);
-                               //setRcjhl(x);
-                               hotRcjRef.current?.hotInstance?.loadData(x);
+                               setRcjhl(x);
+                               //hotRcjRef.current?.hotInstance?.loadData(x);
                                isQdrcj.current = false;
                                let toHighlight = [];
                                for(let i = 1; i < x.length; i++) {
@@ -398,7 +429,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                         }
 
 
-                        hotRef.current?.hotInstance?.render();
+                        
       };
 
 
@@ -429,80 +460,57 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
 
                   
                    </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);
-
-
-                    }}
+                 <Table 
+                    dataSource={detail}
+                   
                     
                     //afterSelection={handleSelection}
-                    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"
-                           };
-                         
-                       }
+                    expandable = {
+                         {
+                              expandRowByClick: true
+                         }
                     }
-                    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: '备注' },
+                    rowSelection= {rowSelection}
+                    onRow={(record)=>({
+                         onClick: () => {
+                              selectRow(record);
+                            }
+                    })}
+                    scroll={{ x: 'max-content' , y : 500}}
+                    pagination={{ position: ['none', 'none'] }}
+                    columns = {[
+                         
+                         { dataIndex: '操作',        title : '操作',        key : '操作'          , width : 100 , fixed: 'left'   },
+                         { dataIndex: '序号'  ,       title : '序号'   ,      key : '序号'        , width : 100   , fixed: 'left'      },
+                         { dataIndex: '清单编码'  ,   title : '清单编码' ,    key : '清单编码'    , width : 100     , fixed: 'left'    },
+                         { dataIndex: '名称'   ,      title : '名称'  ,       key : '名称'        , width : 100         },
+                         { dataIndex: '项目特征' ,    title : '项目特征' ,    key : '项目特征'    , width : 300         },
+                         { dataIndex: '计算规则' ,    title : '计算规则' ,    key : '计算规则'    , width : 300         },
+                         { dataIndex: '单位'    ,     title : '单位'  ,       key : '单位'        , width : 100         },
+                         { dataIndex: '数量'    ,     title : '数量'  ,       key : '数量'        , width : 100         },
+                         { dataIndex: '综合单价' ,   title : '综合单价'  ,   key : '综合单价'     , width : 100        },
+                         { dataIndex: '合价'   ,      title : '合价'   ,      key : '合价'        , width : 100         },
+                         { dataIndex: '人工费'  ,     title : '人工费'  ,     key : '人工费'      , width : 100         },
+                         { dataIndex: '主材费'  ,     title : '主材费'  ,     key : '主材费'      , width : 100         },
+                         { dataIndex: '设备费'  ,     title : '设备费'  ,     key : '设备费'      , width : 100         },
+                         { dataIndex: '辅材费'  ,     title : '辅材费'  ,     key : '辅材费'      , width : 100         },
+                         { dataIndex: '材料费'   ,    title : '材料费'  ,     key : '材料费'      , width : 100         },
+                         { dataIndex: '机械费'   ,    title : '机械费'  ,     key : '机械费'      , width : 100         },
+                         { dataIndex: '管理费'  ,     title : '管理费'  ,     key : '管理费'      , width : 100         },
+                         { dataIndex: '利润'   ,      title : '利润'   ,      key : '利润'        , width : 100         },
+                         { dataIndex: '暂估价'  ,     title : '暂估价'  ,     key : '暂估价'      , width : 100         },
+                         { dataIndex: '综合人工工日', title : '综合人工工日', key : '综合人工工日', width : 100         },
+                         { dataIndex: '备注'     ,    title : '备注'   ,      key : '备注'        , width : 100         },
+                        
 
+                         
+                             
+                            
                        ]}
-                    colHeaders={["操作", "序号", "清单编码", "名称", "项目特征", "计算规则", "单位", "数量", "综合单价", "合价", "人工费", "主材费", 
-                            "设备费", "辅材费", "材料费", "机械费", "管理费", "利润" , "暂估价", "综合人工工日", "备注" ]}
-                    height="400"
-                    selectionMode="single"
-                    autoWrapRow={false}
-                    autoWrapCol={false}
-                    licenseKey="non-commercial-and-evaluation" // for non-commercial use only
+                   
                   />
                   </Box>
                    <Box >

front/src/Service.js

@@ -1,5 +1,5 @@
 import {copy, danxiangdinge_index} from './utils';
-
+import { v4 as uuidv4 } from 'uuid';
 class Service{
     
     constructor() {
@@ -35,6 +35,16 @@ class Service{
                 }
             }
         }
+        this.cache = this.cache.map(x=>{
+            x["children"] = x["__children"];
+
+            x["key"] = x["序号"];
+            x["children"] = x["children"].map(y=>{
+                y['key'] = uuidv4();
+                return y;
+            })
+            return x;
+        });
         this.memory = [];
         this.memory.push(copy(this.cache));
         this.mem_pointer = 0;
@@ -489,7 +499,7 @@ class Service{
         } else {
             const data = await response.json();
             this.processQingdanmingxi(data);
-            return data;
+            return copy(this.cache);
         }
         } else {
             return copy(this.cache);