deprecate antd

src/Qingdan3.js

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import Box from "@mui/material/Box";
-import { Table, ConfigProvider } from "antd";
+import Table from 'rsuite/Table';
+import 'rsuite/Table/styles/index.css';
+import Checkbox from 'rsuite/Checkbox';
+import 'rsuite/Checkbox/styles/index.css';
+import { CustomProvider } from 'rsuite';
+import zhCN from 'rsuite/locales/zh_CN';
 import { Grid } from '@mui/material';
 import Tooltip from '@mui/material/Tooltip';
 import AddIcon from '@mui/icons-material/Add';
@@ -8,7 +13,11 @@ import SaveIcon from '@mui/icons-material/Save';
 import CancelIcon from '@mui/icons-material/Close';
 import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/DeleteOutlined';
-
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControl from '@mui/material/FormControl';
+import FormLabel from '@mui/material/FormLabel';
 import Tab from "@mui/material/Tab";
 import TabContext from "@mui/lab/TabContext";
 import TabList from "@mui/lab/TabList";
@@ -27,20 +36,16 @@ 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 {
-
-     SettingFilled,
 
-   } from '@ant-design/icons';
 import { v4 as uuidv4 } from 'uuid';
 
-import zhCN from 'antd/locale/zh_CN';
 import {copy} from './utils';
 
 
 import {TabulatorFull as Tabulator} from "tabulator-tables"; //import Tabulator library
 import "tabulator-tables/dist/css/tabulator.min.css"; //import Tabulator stylesheet
 import './Tabulator.css';
+const {Column, HeaderCell, Cell} = Table;
 
 
 /**
@@ -75,11 +80,10 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
      const [tuijian, setTuijian] = React.useState([]);
      const [fuzhuEnable, setFuzhuEnable] = React.useState(false);
      const [yubanEnable, setYubanEnable] = React.useState(false);
-     const hotRcjRef = React.useRef(null);
-     const hotTuijianRef = React.useRef(null);
+
      const highlight = React.useRef([]);
      const debmRef = React.useRef(null);
-     const lastClickRef = React.useRef(null);
+
      const tuijianRef = React.useRef(null);
      const tuijianTable = React.useRef(null);
      const rcj2Ref = React.useRef(null);
@@ -99,11 +103,7 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
      const jxdeRef = React.useRef(null);
      const cldeRef = React.useRef(null);
      const isQdrcj = React.useRef(false);
-     const [selectedRowKeys, setSelectedRowKeys] = React.useState([]);
-     const [selectedRowKeys2, setSelectedRowKeys2] = React.useState([]);
      const onSelectChange = (newSelectedRowKeys) => {
-          console.log('selectedRowKeys changed: ', newSelectedRowKeys);
-          setSelectedRowKeys(newSelectedRowKeys);
           const [newData, newHl] = handleBeizhu(beizhuFKRef.current, selectedRowKeysTable.current[0], newSelectedRowKeys, fuzhu);
                                        if (newData) {
                                           myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current));
@@ -138,10 +138,10 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
         };
 
 
-        const onSelectChange2 = (newSelectedRowKeys) => {
+        const onSelectChange2 = (event) => {
           
-          setSelectedRowKeys2(newSelectedRowKeys);
-          const [newData, newHl]  = handleYuban(selectedRowKeysTable.current[0], newSelectedRowKeys);
+          setValueYuban(event.target.value);
+          const [newData, newHl]  = handleYuban(selectedRowKeysTable.current[0], [event.target.value]);
           if (newData) {
                myTable.current.updateData(newData.filter(x=>x['key'] == selectedRowKeysTableParent.current));
                let y =[];
@@ -177,28 +177,66 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
 
 
      /**fuzhu select */
-     const rowSelection = {
-          selectedRowKeys,
-          onChange: onSelectChange,
-          getCheckboxProps: (record) => {
-               return {
-                    disabled: !fuzhuEnable
-               };
-          }
+    
+     const [checked, setChecked] = React.useState(false);
+     const [indeterminate, setIndeterminate] = React.useState(false);
+     const [checkedKeys, setCheckedKeys] = React.useState([]);
+     const setCheckedKeys_ = (keys) => {
+      setCheckedKeys(keys);
+      if (keys.length == fuzhu.length) {
+           setChecked(true);
+           setIndeterminate(false);
+      } else if (keys.length == 0) {
+           setChecked(false);
+           setIndeterminate(false);
+      } else {
+           setIndeterminate(true);
+           setChecked(false);
+      }
+      onSelectChange(keys);
      };
-
-     const rowSelection2 = {
-          type: 'radio',
-          selectedRowKeys: selectedRowKeys2,
-          selections: [Table.SELECTION_NONE],
-          onChange: onSelectChange2,
-          getCheckboxProps: (record) => {
-               return {
-                    disabled: !yubanEnable
-               };
-          }
+     const setCheckedKeys_2 = (keys) => {
+      setCheckedKeys(keys);
+      if (keys.length == fuzhu.length) {
+           setChecked(true);
+           setIndeterminate(false);
+      } else if (keys.length == 0) {
+           setChecked(false);
+           setIndeterminate(false);
+      } else {
+           setIndeterminate(true);
+           setChecked(false);
+      }
+      //onSelectChange(keys);
+     };
+     const handleCheckAll = (value, checked) => {
+      const keys = checked? fuzhu.map(item => item.id) : [];
+      setCheckedKeys_(keys);
+ 
+     }
+     const handleCheck = (value, checked) => {
+      const keys = checked? [...checkedKeys, value] : checkedKeys.filter(item => item != value);
+      setCheckedKeys_(keys);
+ 
+     }
+ 
+     const CheckCell = ({rowData, onChange, checkedKeys, dataKey, disabled, ...props}) => {
+       return <Cell {...props} style={{ padding: 0}}>
+           <div style={{lineHeight: '40px'}}>
+              <Checkbox value = {rowData[dataKey]}
+              inline
+              disabled={disabled}
+              onChange={onChange}
+              checked={checkedKeys.some(item => item === rowData[dataKey])}
+              ></Checkbox>
+           </div>
+       </Cell>
      };
 
+   
+
+     const [valueYuban, setValueYuban] = React.useState("");
+
 
      var editCheck = function(cell){
           //cell - the cell component for the editable cell
@@ -242,7 +280,7 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
                setFuzhu([]);
                setRcjrows([]);
                setYubanEnable(false);
-               setSelectedRowKeys2([]);
+               setValueYuban("");
                setShowToolbar(false);
                Service.generateQingdanrcj(name, bh,bt,row._row.data['清单编码']).then(x=>{
                 
@@ -334,7 +372,11 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
                  setShowToolbar(true);
                  setFuzhuEnable(x[1]);
                  setYubanEnable(x[1]);
-                 setSelectedRowKeys2(x[2]);
+                 if (x[2]== null || x[2].length == 0) {
+                    setValueYuban("");
+                 } else {
+                    setValueYuban(x[2][0]);
+                 }
                  setRcjrows(x[3]);
                  //hotRcjRef.current?.hotInstance?.loadData(x);
                  isQdrcj.current = false;
@@ -896,7 +938,7 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
                   }
                   setFuzhu(result);
                   let newSelect = extractFuzhu(debmRef.current);
-                  setSelectedRowKeys(newSelect);
+                  setCheckedKeys_2(newSelect);
                   //setSelectedRowKeys([1]);
                   
               }
@@ -1182,7 +1224,7 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
                                         setFuzhu([]);
                                         setRcjrows([]);
                                         setShowToolbar(false);
-                                        setSelectedRowKeys2([]);
+                                        setValueYuban("");
                                         setYubanEnable(false);
                                         isQdrcj.current = true;
                                         highlight.current = [];
@@ -1207,7 +1249,7 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
                                   setFuzhu([]);
                                   setRcjrows([]);
                                   setShowToolbar(false);
-                                  setSelectedRowKeys2([]);
+                                  setValueYuban("");
                                   setYubanEnable(false);
                                   isQdrcj.current = true;
                                   highlight.current = [];
@@ -1235,7 +1277,7 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
                          setFuzhu([]);
                          setRcjrows([]);
                          setShowToolbar(false);
-                         setSelectedRowKeys2([]);
+                         setValueYuban("");
                          setYubanEnable(false);
                          isQdrcj.current = true;
                          highlight.current = [];
@@ -1258,7 +1300,7 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
                          setFuzhu([]);
                          setRcjrows([]);
                          setShowToolbar(false);
-                         setSelectedRowKeys2([]);
+                         setValueYuban("");
                          setYubanEnable(false);
                          isQdrcj.current = true;
                          highlight.current = [];
@@ -1344,80 +1386,55 @@ export default function Qingdan3({name, bh, bt, rgde, jxde, clde, beizhu/*后台
                          </TabPanel>
                        <TabPanel sx={{p: 1}} value="4">
                        <Box sx={{maxHeight: `190px`}}>
-                       <ConfigProvider
-                          locale={zhCN}
-                          theme={{
-                            components: {
-                              Table: {
-                                 /* here is your component tokens */
-                                 cellPaddingBlock : 8
-                              },
-                            },
-                          }}
-                        >
-
-                          <Table 
-                             scroll={{ x: 'max-content' , y : 190}}
-                             pagination={false}
-                             rowSelection={rowSelection}
-                             columns={
-                              [
-                                   { title: '序号', dataIndex: '序号', width : 80},
-                                   {
-                                        title: '编号',
-                                        dataIndex: '编号',
-                                     
-                                   },
-                                   {
-                                        title: '说明',
-                                        dataIndex: '说明',
-                                     width: 550
-                                    
-                                   },
-                                  
-                                 ]
-                             }
-                           dataSource={fuzhu} />
-
-                        </ConfigProvider>
+                       <CustomProvider locale={zhCN}>
+                        <Table rowHeight={rowData=>{
+                         return 40;
+                        }}
+                        height={200} data = {fuzhu} id="fuzhu">
+                         <Column width={80} align="center">
+                              <HeaderCell style={{padding: 0}}>
+                                   <div style={{lineHeight: '40px'}}>
+                                        <Checkbox inline checked={checked} indeterminate={indeterminate} onChange={handleCheckAll} disabled={!fuzhuEnable}
+                                        ></Checkbox>
+                                   </div>
+                              </HeaderCell>
+                              <CheckCell dataKey="id" checkedKeys={checkedKeys} onChange={handleCheck} disabled={!fuzhuEnable}></CheckCell>
+                         </Column>
+                         <Column width={80} align="center">
+                              <HeaderCell>序号</HeaderCell>
+                              <Cell dataKey="序号"></Cell>
+                         </Column>
+                         <Column width={120} align="center">
+                              <HeaderCell>编号</HeaderCell>
+                              <Cell dataKey="编号"></Cell>
+                         </Column>
+                         <Column fullText width={650} align="center">
+                              <HeaderCell>说明</HeaderCell>
+                              <Cell dataKey="说明"></Cell>
+                         </Column>
+                        </Table>
+                        </CustomProvider>
                        </Box>
                           
 
                        </TabPanel>
                        <TabPanel sx={{p: 1}} value="5">
                         <Box sx={{maxHeight: `190px`}}>
-                        <ConfigProvider
-                          locale={zhCN}
-                          theme={{
-                            components: {
-                              Table: {
-                                 /* here is your component tokens */
-                                 cellPaddingBlock : 8
-                              },
-                            },
-                          }}
-                        >
-
-                          <Table 
-                             scroll={{ x: 'max-content' , y : 190}}
-                             pagination={false}
-                             rowSelection={rowSelection2}
-                             columns={
-                              [
-                                 
-                                   {
-                                        title: '说明',
-                                        dataIndex: '说明',
-                                        width: 550
-                                    
-                                   },
-                                  
-                                 ]
-                             }
-                           dataSource={yuban} />
-
-
-                         </ConfigProvider>
+                        <FormControl>
+                         <FormLabel id="demo-controlled-radio-buttons-group">说明</FormLabel>
+                          <RadioGroup
+                           aria-labelledby="demo-controlled-radio-buttons-group"
+                           name="controlled-radio-buttons-group"
+                            value={valueYuban}
+                           onChange={onSelectChange2}
+                         >
+                         <FormControlLabel disabled = {!yubanEnable} value="0" control={<Radio />} label="无" />
+                         <FormControlLabel disabled = {!yubanEnable} value="1" control={<Radio />} label="湿拌砂浆" />
+                         <FormControlLabel disabled = {!yubanEnable} value="2" control={<Radio />} label="散装干拌（混）砂浆" />
+                         <FormControlLabel disabled = {!yubanEnable} value="3" control={<Radio />} label="袋装干拌（混）砂浆" />
+                         </RadioGroup>
+                         </FormControl>
+                       
                         </Box>
                        </TabPanel>