change fuzhu ui to mui

front/src/Qingdan.js

@@ -19,11 +19,13 @@ 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 {extractFuzhu} from './utils';
 import {shanchu, undo, redo, quanbushanchu, danxiangdinge, updateDercj, changguidinge} 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';
+
 registerAllModules();
 
 
@@ -162,8 +164,12 @@ 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 debmRef = React.useRef(null);
     const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
-
+    const [rowSelectionModel, setRowSelectionModel] = React.useState({
+     type: 'include',
+     ids: new Set(),
+   });
     const [expandedRowKeys, setExpandedRowKeys] = React.useState([]);
     const rowSelection = {
      selectedRowKeys,
@@ -203,14 +209,16 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
     React.useEffect(
         () => {
             //console.log(beizhu);
-            let result = [["序号", "编号", "说明"]];
+            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]]);
+                    result.push({'id': i+1, '序号': i+1, '编号': beizhu["BZBH"][key], '说明': beizhu["SM"][key]});
                 }
                 setFuzhu(result);
+                setRowSelectionModel({type: 'include',
+                ids: new Set(extractFuzhu(debmRef.current))});
             }
         }, [beizhu]
       );
@@ -395,6 +403,7 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
                             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);
@@ -669,20 +678,32 @@ export default function Qingdan({name, bh, bt, rgde, jxde, clde, beizhu, clickCa
 
                        </TabPanel>
                        <TabPanel value="3">
-                          <HotTable 
-                          nestedRows={false}
-                             data={fuzhu
+                          <DataGrid 
+                          getRowHeight={(params) => "auto"}
+                          columns={
+                              [
+                                   { field: '序号', headerName: '序号', },
+                                   {
+                                     field: '编号',
+                                     headerName: '编号',
+                                     
+                                   },
+                                   {
+                                     field: '说明',
+                                     headerName: '说明',
+                                     width: 550
+                                    
+                                   },
+                                  
+                                 ]
                              }
-                             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
+                         rows={fuzhu}
+                         hideFooter={true}
+                         checkboxSelection
+                         rowSelectionModel={rowSelectionModel}
+                         onRowSelectionModelChange={(newRowSelectionModel) => {
+                              setRowSelectionModel(newRowSelectionModel);
+                            }}
                            />
 
                        </TabPanel>

front/src/utils.js

@@ -26,3 +26,31 @@ export const copy = (input) => {
 };
 
 
+export const extractFuzhu = (debm) => {
+    if (debm) {
+        let start = 0;
+        let result = [];
+        while(start < debm.length) {
+            let index = debm.indexOf('附注', start);
+            if (index == -1) break;
+            let i = index + 2;
+            for(i = index+2; i < debm.length; i++) {
+                if (debm[i] >= '0' && debm[i] <= '9') {
+
+                } else {
+                    break;
+                }
+            }
+            let find = debm.substring(index+2, i);
+            result.push(Number(find));
+            start = i;
+
+
+        }
+        return result;
+    } else {
+        return [];
+    }
+};
+
+