qingdan/front/src/App2.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 { styled, alpha } from '@mui/material/styles';
import Paper from '@mui/material/Paper';
import TextField from '@mui/material/TextField';
import InputAdornment from '@mui/material/InputAdornment';
import CancelIcon from '@mui/icons-material/Cancel';

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 { registerPlugin, NestedRows } from 'handsontable/plugins';
//registerPlugin(NestedRows);
import Qingdan from './Qingdan';
import Zjcs from './Zjcs';
import Djcs2 from './Djcs2';
import Service from './Service';
import Qufei from './Qufei';
import {useLocation, useParams} from "react-router";
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Typography from '@mui/material/Typography';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select from '@mui/material/Select';
import Accordion from '@mui/material/Accordion';
import AccordionActions from '@mui/material/AccordionActions';
import AccordionSummary from '@mui/material/AccordionSummary';
import AccordionDetails from '@mui/material/AccordionDetails';
import Stack from '@mui/material/Stack';
import { DataGrid } from '@mui/x-data-grid';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
import { TreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
import Dialog from '@mui/material/Dialog';
import DialogTitle from '@mui/material/DialogTitle';
import DialogContent from '@mui/material/DialogContent';
import DialogActions from '@mui/material/DialogActions';
import IconButton from '@mui/material/IconButton';
import CloseIcon from '@mui/icons-material/Close';
import SearchIcon from '@mui/icons-material/Search';
import Button from '@mui/material/Button';

import {
  Toolbar,
  ToolbarButton,
  QuickFilter,
  QuickFilterControl,
  QuickFilterClear,
  QuickFilterTrigger,
} from '@mui/x-data-grid';
import Tooltip from '@mui/material/Tooltip';

registerAllModules();
const MUI_X_PRODUCTS = [
    {
      id: 'grid',
      label: 'Data Grid',
      children: [
        { id: 'grid-community', label: '@mui/x-data-grid' },
        { id: 'grid-pro', label: '@mui/x-data-grid-pro' },
        { id: 'grid-premium', label: '@mui/x-data-grid-premium' },
      ],
    },
    {
      id: 'pickers',
      label: 'Date and Time Pickers',
      children: [
        { id: 'pickers-community', label: '@mui/x-date-pickers' },
        { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' },
      ],
    },
    {
      id: 'charts',
      label: 'Charts',
      children: [
        { id: 'charts-community', label: '@mui/x-charts' },
        { id: 'charts-pro', label: '@mui/charts-pro' },
      ],
    },
    {
      id: 'tree-view',
      label: 'Tree View',
      children: [
        { id: 'tree-view-community', label: '@mui/x-tree-view' },
        { id: 'tree-view-pro', label: '@mui/x-tree-view-pro' },
      ],
    },
  ];

  const INFO = [

                      ['名称', '金额', '暂估价', '安全文明施工费', '规费'],
                     
  ];


  const CustomTreeItem = styled(TreeItem)(({ theme }) => ({
    
    [`& .${treeItemClasses.content}`]: {
      
      padding: theme.spacing(0.5, 1),
      margin: theme.spacing(0.2, 0),
      [`& .${treeItemClasses.label}`]: {
        fontSize: '0.8rem',
        fontWeight: 500,
      },
    }
    
    
   
  }));

  const StyledToolbarButton = styled(ToolbarButton)(({ theme, ownerState }) => ({
    gridArea: '1 / 1',
    width: 'min-content',
    height: 'min-content',
    zIndex: 1,
    opacity: ownerState.expanded ? 0 : 1,
    pointerEvents: ownerState.expanded ? 'none' : 'auto',
    transition: theme.transitions.create(['opacity']),
  }));

  const StyledQuickFilter = styled(QuickFilter)({
    display: 'grid',
    alignItems: 'center',
    marginLeft: 'auto',
  });

  const StyledTextField = styled(TextField)(({ theme, ownerState }) => ({
    gridArea: '1 / 1',
    overflowX: 'clip',
    width: ownerState.expanded ? 260 : 'var(--trigger-width)',
    opacity: ownerState.expanded ? 1 : 0,
    transition: theme.transitions.create(['width', 'opacity']),
  }));
  

  function CustomToolbar() {
    return (
      <Toolbar>
        <StyledQuickFilter defaultExpanded>
          <QuickFilterTrigger
            render={(triggerProps, state) => (
              <Tooltip title="搜索" enterDelay={0}>
                <StyledToolbarButton
                  {...triggerProps}
                  ownerState={{ expanded: state.expanded }}
                  color="default"
                  aria-disabled={state.expanded}
                >
                  <SearchIcon fontSize="small" />
                </StyledToolbarButton>
              </Tooltip>
            )}
          />
          <QuickFilterControl
            render={({ ref, ...controlProps }, state) => (
              <StyledTextField
                {...controlProps}
                ownerState={{ expanded: state.expanded }}
                inputRef={ref}
                aria-label="搜索"
                placeholder="搜索"
                size="small"
                slotProps={{
                  input: {
                    startAdornment: (
                      <InputAdornment position="start">
                        <SearchIcon fontSize="small" />
                      </InputAdornment>
                    ),
                    endAdornment: state.value ? (
                      <InputAdornment position="end">
                        <QuickFilterClear
                          edge="end"
                          size="small"
                          aria-label="清除"
                          material={{ sx: { marginRight: -0.75 } }}
                        >
                          <CancelIcon fontSize="small" />
                        </QuickFilterClear>
                      </InputAdornment>
                    ) : null,
                    ...controlProps.slotProps?.input,
                  },
                  ...controlProps.slotProps,
                }}
              />
            )}
          />
        </StyledQuickFilter>
      </Toolbar>
    );
  }


  export default function App2() {


    const [outline, setOutline] = React.useState([]);
    const [peibishu, setPeibishu] = React.useState([]);
    const [outlineDes, setOutlineDes] = React.useState([]);
    const [columnHeaders, setColumnHeaders] = React.useState([]);
    const [detail, setDetail] = React.useState(INFO);
    const [deXilie, setDeXilie] = React.useState([]);
    const [pbXilie, setPbXilie] = React.useState([]);
    const [nestDetail, setNestDetail] = React.useState(INFO);
    const [nest, setNest] = React.useState(false);
    const [qingdan, setQingdan] = React.useState(false);
    const [cuoshi, setCuoshi] = React.useState(false);
    const [qufei, setQufei] = React.useState(false);
    const [qdbt, setQdbt] = React.useState([]);
    const [qdbh, setQdbh] = React.useState(null);
    const [value, setValue] = React.useState('1');
    const [dwgc, setDwgc] = React.useState(null);
    const [zhuanye, setZhuanye] = React.useState(10);
    const [expandedQd, setExpandedQd] = React.useState(true);
    const [expandedPb, setExpandedPb] = React.useState(false);
    const [expandedDe, setExpandedDe] = React.useState(false);
    const [zylb, setZylb] = React.useState('');
    const [selectedItems, setSelectedItems] = React.useState(null);
    const [expandedItems, setExpandedItems] = React.useState([]);
    const [rgde, setRgde] = React.useState(null);
    const [beizhu, setBeizhu] = React.useState(null);
    const [beizhuFK, setBeizhuFK] = React.useState(null);
    const [clde, setClde] = React.useState(null);
    const [jxde, setJxde] = React.useState(null);
    const [open, setOpen] = React.useState(false);
    const [dopen, setDopen] = React.useState(false);
    
    const [dingeclick, setDingeclick] = React.useState(null);
    const [tihuanClick, setTihuanClick] = React.useState(null);
    const tihuanRowRef = React.useRef(null);

    const relation = React.useRef({});
    const columns =[
    
      {field: '定额编号', headerName: '定额编号'},
      {field: '名称', headerName: '名称'}, 
      {field: '单位', headerName: '单位'},
      {field: '单价', headerName: '单价'}
    ];
    const columns2 =[
    
      {field: '编号', headerName: '定额编号'},
      {field: '名称', headerName: '名称', width: 200}, 
      {field: '单位', headerName: '单位'},
      {field: '单价', headerName: '单价'}
    ];
    let location = useParams();


    const traverse = (shu) => {
       for(let i = 0; i < shu.length; i++) {
          let id = shu[i]["id"];
          let children = shu[i]["children"];
          for (let j = 0; j < children.length; j++) {
             let id2 = children[j]["id"];
             relation.current[id2]=id;
          }
          traverse(children);
       }
    };
    const setOutlineDes_ = (x) => {
       setOutlineDes(x);
       relation.current = {};
       traverse(x);
      
    };
       const handleChangeZhuanye = (event) => {
           //console.log(event.target.value);
           Service.generateDingeshu(event.target.value).then(x=>{
               setOutlineDes_(x);
           });
           setZhuanye(event.target.value);
        };

    const handleChange = (event, newValue) => {
      setValue(newValue);
    };



    const findparent = (id) => {
        let result = [];
        while(id) {
           result.push(id);
           id = relation.current[id];
        }
        return result;
    };

    const loadingCallback = () => {
      setOpen(true); 
      Service.save().then(x=>{
        setOpen(false);
      });
    };

    const qufeiCallback = (id, data) => {
      setOpen(true); 
      Service.applyFL(id, data).then(x=>{
        Service.clearCache();
        Service.setQufei(data);
        setOpen(false);
      });
    };

    const tihuanCallback = (row, col) => {
        setDopen(true);
        tihuanRowRef.current = row;
    };

    const handleClose = () => {
      setDopen(false);
    };
  

    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  
       if (qdbm.startsWith("01")) {
        let suggestion = 10;
        if (zylb == "7") {
          suggestion = 50;
        }  
        setZhuanye(suggestion);
          Service.generateSingleDingeXilie(suggestion, debh).then(x=>{
              //console.log(x);
              let res = JSON.parse(x);
              console.log(res);
              setZhuanye(res["actual_zhuanye"]);
              let id = res['reverse'];
              if (id && id != "None") {
                    setRgde(res["rgde"]);
                    setJxde(res["jxde"]);
                    setClde(res["clde"]);
                    console.log(res["rgde"]);
                    console.log(res["jxde"]);
                    console.log(res["clde"]);
                    setBeizhu(res["bz_selected"]);
                    setBeizhuFK(res["bz_selected2"]);
                    Service.generateDingeshu(res["actual_zhuanye"]).then(x=>{
                        setOutlineDes_(x);
                        setSelectedItems(id);
                        setExpandedItems(findparent(id));
                           Service.generateDingeXilie(res["actual_zhuanye"], id).then(x=>{
                                let y = JSON.parse(x);
                                //console.log(y);
                                let result = [];
                                let keys = Object.keys(y["DW"])
                                for(let i = 0; i < keys.length; i++) {
                                    let key = keys[i];
                                    let entry = {
                                      "id": y["DEBH"][key],
                                      "定额编号":  y["DEBH"][key], 
                                      "名称":  y["GCLMC"][key],
                                      "单位":  y["DW"][key],
                                      "单价":  y["GCLSJDJ"][key]
                                    };
                                    result.push(entry);
                                }
                                setDeXilie(result);
                           });
                    });
              } else {
              
                    setRgde(null);
                    setJxde(null);
                    setClde(null);
                    setBeizhu(res["bz_selected"]);
              }
           });
       
       } else if (qdbm.startsWith("03")) {//安装
        let suggestion = 30;
        if (zylb == "8") {
          suggestion = 60;
        }   
        setZhuanye(suggestion);
         Service.generateSingleDingeXilie(suggestion, debh).then(x=>{
          //console.log(x);
          let res = JSON.parse(x);
          console.log(res);
          setZhuanye(res["actual_zhuanye"]);
          let id = res['reverse'];
          if (id && id != "None") {
                setRgde(res["rgde"]);
                setJxde(res["jxde"]);
                setClde(res["clde"]);
                console.log(res["rgde"]);
                console.log(res["jxde"]);
                console.log(res["clde"]);
                setBeizhu(res["bz_selected"]);
                Service.generateDingeshu(res["actual_zhuanye"]).then(x=>{
                    setOutlineDes_(x);
                    setSelectedItems(id);
                    setExpandedItems(findparent(id));
                       Service.generateDingeXilie(res["actual_zhuanye"], id).then(x=>{
                            let y = JSON.parse(x);
                            //console.log(y);
                            let result = [];
                            let keys = Object.keys(y["DW"])
                            for(let i = 0; i < keys.length; i++) {
                                let key = keys[i];
                                let entry = {
                                  "id": y["DEBH"][key],
                                  "定额编号":  y["DEBH"][key], 
                                  "名称":  y["GCLMC"][key],
                                  "单位":  y["DW"][key],
                                  "单价":  y["GCLSJDJ"][key]
                                };
                                result.push(entry);
                            }
                            setDeXilie(result);
                       });
                });
          } else {
          
                setRgde(null);
                setJxde(null);
                setClde(null);
                setBeizhu(res["bz_selected"]);
          }
       });
       } else if (qdbm.startsWith("04")) {////市政
         setZhuanye(20);
         Service.generateSingleDingeXilie(20, debh).then(x=>{
          //console.log(x);
          let res = JSON.parse(x);
          console.log(res);
          setZhuanye(res["actual_zhuanye"]);
          let id = res['reverse'];
          if (id && id != "None") {
                setRgde(res["rgde"]);
                setJxde(res["jxde"]);
                setClde(res["clde"]);
                console.log(res["rgde"]);
                console.log(res["jxde"]);
                console.log(res["clde"]);
                setBeizhu(res["bz_selected"]);
                Service.generateDingeshu(res["actual_zhuanye"]).then(x=>{
                    setOutlineDes_(x);
                    setSelectedItems(id);
                    setExpandedItems(findparent(id));
                       Service.generateDingeXilie(res["actual_zhuanye"], id).then(x=>{
                            let y = JSON.parse(x);
                            //console.log(y);
                            let result = [];
                            let keys = Object.keys(y["DW"])
                            for(let i = 0; i < keys.length; i++) {
                                let key = keys[i];
                                let entry = {
                                  "id": y["DEBH"][key],
                                  "定额编号":  y["DEBH"][key], 
                                  "名称":  y["GCLMC"][key],
                                  "单位":  y["DW"][key],
                                  "单价":  y["GCLSJDJ"][key]
                                };
                                result.push(entry);
                            }
                            setDeXilie(result);
                       });
                });
          } else {
          
                setRgde(null);
                setJxde(null);
                setClde(null);
                setBeizhu(res["bz_selected"]);
          }
       });
       }
       else if (qdbm.startsWith("05")) {//园林
        setZhuanye(40);
        Service.generateSingleDingeXilie(40, debh).then(x=>{
         //console.log(x);
         let res = JSON.parse(x);
         console.log(res);
         setZhuanye(res["actual_zhuanye"]);
         let id = res['reverse'];
         if (id && id != "None") {
               setRgde(res["rgde"]);
               setJxde(res["jxde"]);
               setClde(res["clde"]);
               console.log(res["rgde"]);
               console.log(res["jxde"]);
               console.log(res["clde"]);
               setBeizhu(res["bz_selected"]);
               Service.generateDingeshu(res["actual_zhuanye"]).then(x=>{
                   setOutlineDes_(x);
                   setSelectedItems(id);
                   setExpandedItems(findparent(id));
                      Service.generateDingeXilie(res["actual_zhuanye"], id).then(x=>{
                           let y = JSON.parse(x);
                           //console.log(y);
                           let result = [];
                           let keys = Object.keys(y["DW"])
                           for(let i = 0; i < keys.length; i++) {
                               let key = keys[i];
                               let entry = {
                                 "id": y["DEBH"][key],
                                 "定额编号":  y["DEBH"][key], 
                                 "名称":  y["GCLMC"][key],
                                 "单位":  y["DW"][key],
                                 "单价":  y["GCLSJDJ"][key]
                               };
                               result.push(entry);
                           }
                           setDeXilie(result);
                      });
               });
         } else {
         
               setRgde(null);
               setJxde(null);
               setClde(null);
               setBeizhu(res["bz_selected"]);
         }
      });
       } else {
        console.log('####################################zylb#####################'.concat(zylb.toString()));
       }
    };


    const handleEvent = (A) => {
      let state = {
        'time': Date.now(),
        'newBianhao': A.row['编号'],
        'newName': A.row['名称'],
        'newJia': A.row['单价'],
        'old' : tihuanRowRef.current
      };
      setTihuanClick(JSON.stringify(state));
      setDopen(false);
      
    };


     const handleChangeAccord = (panel) => (event, newExpanded) => {
          if (panel == 'qingdan') {
             setExpandedQd(newExpanded);
          }
          else if (panel == 'peibi'){
             setExpandedPb(newExpanded);
          } else {
             setExpandedDe(newExpanded);
          }
       };
    const handleItemSelectionTogglePbs = (event, itemId, isSelected) => {
      if (isSelected) {
        console.log(itemId);
        if (["0", "3", "4", "6", "7", "8", "9", "11", "12", "13", "15", "16", "18", "19", "20", "21"].includes(itemId)) {
            Service.generatePeibiXilie(itemId).then(x=>{
                let y = JSON.parse(x);
                console.log(y);
               
                let result = [];
                let keys = Object.keys(y["PBBH"])
                for(let i = 0; i < keys.length; i++) {
                    let key = keys[i];
                    let entry = {
                      "id": y["id"][key],
                      "编号":  y["PBBH"][key], 
                      "名称":  y["PBMC"][key],
                      "单位":  y["DW"][key],
                      "单价":  y["PBDJ"][key]
                    };
                    result.push(entry);
                    setPbXilie(result);
                }
            });
        }
      }
    }

    const handleDingEEvent = (row) => {
      
      Service.generateSingleDingeXilie(zhuanye, row.id).then(x=>{
       
        let res = JSON.parse(x);
        console.log(res);
        res["date"] = Date.now().toString();
        setDingeclick(JSON.stringify(res));
      });
      //
    };

    const handleItemSelectionToggleDes = (event, itemId, isSelected) => {
      if (isSelected) {
        //console.log(itemId);
        setSelectedItems(itemId);
        setExpandedItems(findparent(itemId));
           Service.generateDingeXilie(zhuanye, itemId).then(x=>{
                let y = JSON.parse(x);
                //console.log(y);
                let result = [];
                let keys = Object.keys(y["DW"])
                for(let i = 0; i < keys.length; i++) {
                    let key = keys[i];
                    let entry = {
                      "id": y["DEBH"][key],
                      "定额编号":  y["DEBH"][key], 
                      "名称":  y["GCLMC"][key],
                      "单位":  y["DW"][key],
                      "单价":  y["GCLSJDJ"][key]
                    };
                    result.push(entry);
                }
                setDeXilie(result);
           });
      }
    }

    const handleItemSelectionToggle = (event, itemId, isSelected) => {
      if (isSelected) {
        //console.log(itemId);
        let pos = itemId.indexOf("Zylb");
        let Zylb = itemId.substring(pos+4, pos+5);
        setZylb(Zylb);
        //console.log("Zylb=".concat(Zylb));
        if (itemId.includes("bao jia hui zong")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          Service.generateBaojiahuizong2(location["id"], id).then(x=>{
                  setNestDetail(x);
                  setNest(true);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setColumnHeaders(["序号", "名称", "金额", "暂估价", "类别"]);
                });
        }
        else if (itemId.includes("gui fei shui jin")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          Service.generateGuifeishuijin2(location["id"], id).then(x=>{
                  setNestDetail(x);
                  setNest(true);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
                });

        }
        else if (itemId.includes("qing dan xiang mu")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          Service.generateQingdanxiangmu2(location["id"], id).then(x=>{
                  setValue("1");
                  setNest(false);
                  setQingdan(true);
                  setCuoshi(false);
                  setQdbt(x);
                  setQdbh(id);
                  setQufei(false);
                  //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
                });

        }
        else if (itemId.includes("cuo shi xiang mu")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          setValue("1");
          setNest(false);
          setQingdan(false);
          setCuoshi(true);
          setDwgc(id);
          setQufei(false);
          //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);

        }
        else if (itemId.includes("qi ta xiang mu")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          setValue("1");
          //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
          Service.generateQitaxiangmu2(location["id"], id).then(x=>{
                  setNestDetail(x);
                  setNest(true);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setColumnHeaders(["序号", "名称", "金额", "项目类别", "备注"]);
                });

        }
        else if (itemId.includes("zan lie jin e")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          setValue("1");
          //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
          Service.generateZanliejine2(location["id"], id).then(x=>{
                  setDetail(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                });

        }
        else if (itemId.includes("ji ri gong")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          setValue("1");
          //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
          Service.generateJirigong2(location["id"], id).then(x=>{
                  setDetail(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                });

        }
        else if (itemId.includes("zong cheng bao fu wu fei")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          setValue("1");
          //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
          Service.generateZongchengbaofuwufei2(location["id"], id).then(x=>{
                  setDetail(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                });

        }
        else if (itemId.includes("fa bao ren gong ying cai liao")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          setValue("1");
          //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
          Service.generateFabaorengongyingcailiao2(location["id"], id).then(x=>{
                  setDetail(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                });

        }
        else if (itemId.includes("ren cai ji hui zong")) {
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          setValue("1");
          //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
          Service.generateRencaijihuizong2(location["id"], id).then(x=>{
                  setDetail(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                });

        }
        else if (itemId.includes("TouBiaoXx")) {
            Service.generateDetail2(location["id"]).then(x=>{
            setQingdan(false);
            setCuoshi(false);
            setDetail(x);
            setNest(false);
            setQufei(false);
        });

        }
      }
    };
    React.useEffect(
      () => {
        console.log(location);
        Service.generateQufei(location["id"]).then(x=>{

          Service.setQufei(x);
          });
        Service.generateOutline2(location["id"]).then(x=>{

        setOutline(x);
        });
        Service.generateDetail2(location['id']).then(x=>{

        setDetail(x);
        });
           Service.generateDingeshu(10).then(x=>{
               setOutlineDes_(x);
           });
      }, [location]
    );
    React.useEffect(
      () => {
        Service.generatePeibishu(zhuanye).then(x=>{
            setPeibishu(x);
        });
      }, [zhuanye]
    );

    return (

        <Box sx={{ flexGrow: 1  }}>
          <Grid container spacing={2}>
            <Grid size={3}>



                <Accordion expanded={expandedQd} disableGutters
                     onChange={handleChangeAccord('qingdan')}>
                   <AccordionSummary 
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel1-content"
                     id="panel1-header"
                   >
                     <Typography  component="span">清单</Typography>
                   </AccordionSummary>
                   <AccordionDetails>
                     <RichTreeView sx={{overflow: "scroll", maxHeight: "90vh"}}
                     onItemSelectionToggle={handleItemSelectionToggle}
                     slots={{ item: CustomTreeItem }}

                     items={outline}/>
                   </AccordionDetails>
                 </Accordion>
                <Accordion expanded={expandedDe} disableGutters
                      onChange={handleChangeAccord('dinge')}>
                   <AccordionSummary
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel1-content"
                     id="panel1-header"
                   >
                     <Typography component="span">定额</Typography>
                   </AccordionSummary>
                   <AccordionDetails>
                     <FormControl  size="small">
                     <InputLabel id="demo-multiple-name-label">专业</InputLabel>
                     <Select
                       labelId="demo-multiple-name-label"
                       id="demo-multiple-name"
                       value={zhuanye}
                       onChange={handleChangeZhuanye}
                       label="专业" 
                     >
                     <MenuItem value={10}>土建</MenuItem>
                     <MenuItem value={20}>市政</MenuItem>
                     <MenuItem value={30}>安装</MenuItem>
                     <MenuItem value={40}>园林</MenuItem>
                     <MenuItem value={50}>修缮（土建）</MenuItem>
                     <MenuItem value={60}>修缮（安装）</MenuItem>
                     </Select>
                   </FormControl> 
                   <Stack spacing={1}>
                    <RichTreeView sx={{overflow: "scroll", maxHeight: `calc(100vh - 540px)`}}
                     onItemSelectionToggle={handleItemSelectionToggleDes}
                     slots={{ item: CustomTreeItem }}

                     selectedItems={selectedItems}
                     expandedItems={expandedItems}
                     items={outlineDes}/>
                  <div style={{ height: 350 }}>

                    <DataGrid
                    sx={{
                      '& .MuiDataGrid-cell': {
                        fontSize: '0.8rem', // Adjust font size for cells
                      },
                    /*  '& .MuiDataGrid-columnHeaders': {
                        fontSize: '1rem', // Adjust font size for column headers
                      },*/
                    }}
                       getRowHeight={() => 'auto'}
                      rows={deXilie}
                      columns={columns}
                      hideFooter={true}
                      onRowDoubleClick={handleDingEEvent}
                    />
                   </div>
                   </Stack>
                   </AccordionDetails>
                 </Accordion>

                 <Button variant="outlined" fullWidth onClick={()=> {
                  setQufei(true);
                  setQingdan(false);
                  setCuoshi(false);
                 }}>费率</Button>

            



            </Grid>
            <Grid size={9}>
             
            {!nest && !qingdan && !cuoshi && !qufei && <HotTable nestedRows={false}
                    data={detail
                    }
                    rowHeaders={true}
                    colHeaders={true}
                    fixedRowsTop={1}

                    height="800"
                    readOnly={true}
                    autoWrapRow={false}
                    autoWrapCol={false}
                    licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                  />}
            {nest && !qingdan && !cuoshi && !qufei && <HotTable nestedRows={true}
                    data={nestDetail
                    }
                    readOnly={true}
                    fixedRowsTop={1}

                    rowHeaders={true}
                    colHeaders={columnHeaders}
                    height="auto"
                    contextMenu={true}
                    bindRowsWithHeaders={true}
                    autoWrapRow={false}
                    autoWrapCol={false}
                    licenseKey="non-commercial-and-evaluation" // for non-commercial use only
                  />}
            {!qingdan && !cuoshi && qufei && <Qufei id={location['id']} qufeiCallback={qufeiCallback}
                  />}

            {!nest && qingdan && !cuoshi && !qufei &&  <TabContext value={value}>
                   <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                      <TabList scrollButtons='auto' 
                              variant="scrollable"
                              sx={{minHeight: '24px'}}
                      onChange={handleChange} aria-label="lab API tabs example">
                        {qdbt.map((x, index)=> <Tab sx={{p: 0, minHeight: '24px'}} label={x} value={(index+1).toString()} />)}
                      </TabList>
                   </Box>
                   {qdbt.map((x, index)=><TabPanel sx={{p: 1}} value={(index+1).toString()}>
                             <Qingdan
                                name={location["id"]}
                                bh={qdbh}
                                bt={x}
                                rgde={rgde}
                                jxde={jxde}
                                clde={clde}
                                beizhu={beizhu}
                                beizhuFK={beizhuFK}
                                clickCallback={clickCallback}
                                loadingCallback={loadingCallback}
                                dingeclick={dingeclick}
                                tihuanCallback={tihuanCallback}
                                tihuanClick={tihuanClick}
                             />                     
                     </TabPanel>
                      )}
                </TabContext>}
            {!nest && !qingdan && cuoshi && !qufei &&  <TabContext value={value}>
                   <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
                      <TabList scrollButtons='auto' 
                              variant="scrollable"
                              sx={{minHeight: '24px'}}
                      onChange={handleChange} aria-label="lab API tabs example">
                        <Tab sx={{p: 0, minHeight: '24px'}} label="总价措施" value="1" />
                        <Tab sx={{p: 0, minHeight: '24px'}} label="单价措施" value="2" />
                      </TabList>
                   </Box>
                   <TabPanel sx={{p: 1}} value="1">
                     <Zjcs name={location["id"]} bh={dwgc}/>
                   </TabPanel>
                   <TabPanel sx={{p: 1}} value="2">
                     <Djcs2 
                         name={location["id"]} 
                         bh={dwgc}
                         rgde={rgde}
                         jxde={jxde}
                         clde={clde}
                         beizhu={beizhu}
                         clickCallback={clickCallback}
                     />
                   </TabPanel>
                      
                </TabContext>}


            </Grid>

          </Grid>

          <Backdrop
              sx={(theme) => ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })}
              open={open}
          >
                <CircularProgress color="inherit" />
         </Backdrop>
         <Dialog
           onClose={handleClose}
           aria-labelledby="customized-dialog-title"
           open={dopen}
           fullWidth={true}
           maxWidth="md"
          >
            <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
             替换
            </DialogTitle>
            <IconButton
             aria-label="close"
             onClick={handleClose}
             sx={(theme) => ({
               position: 'absolute',
               right: 8,
               top: 8,
               color: theme.palette.grey[500],
             })}
            >
             <CloseIcon />
            </IconButton>
            <DialogContent dividers>
            <Stack  direction="row" spacing={2}>
               
               <RichTreeView sx={{
                      overflow: "scroll", 
                      maxHeight: "350px",
                      minWidth: "250px"
                  }}
                             slots={{ item: CustomTreeItem }}

                     onItemSelectionToggle={handleItemSelectionTogglePbs}
                     items={peibishu}/>
               
              
               <div style={{ height: 350 }}>

                    <DataGrid disableColumnMenu
                      sx={{
                        '& .MuiDataGrid-cell': {
                          fontSize: '0.8rem', // Adjust font size for cells
                        }}}
                       getRowHeight={() => 'auto'}
                      rows={pbXilie}
                      onRowDoubleClick={handleEvent}
                      columns={columns2}
                      hideFooter={false}
                      disableColumnFilter
                      disableColumnSelector
                      disableDensitySelector
                      showToolbar
                      slots={{ toolbar: CustomToolbar }}
                      localeText={{
                        noRowsLabel: '无数据',
                        paginationRowsPerPage: '每页行数',
                        footerRowSelected: (count) => `共选中了${count.toLocaleString()}行`,
                       
                        
                      }}
                     />
                    </div>
              
             
              
            </Stack>
          
          
           </DialogContent>
         </Dialog>
            
        </Box>
    );
  }