my-app/src/App2.js

import * as React from 'react';
import Box from "@mui/material/Box";
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 Autocomplete from '@mui/material/Autocomplete';
import { debounce } from '@mui/material/utils';
import throttle from 'lodash/throttle';
import {Tree as Tree_2} from 'rsuite';
import './Tree.css';
import Grid from '@mui/material/Grid';
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 Qingdan3 from './Qingdan3';
import Gfsj from './Gfsj';
import Tbxx from './Tbxx';
import Bjhz from './Bjhz';
import Zjcs2 from './Zjcs2';
import Djcs3 from './Djcs3';
import Service from './Service';
import Qufei from './Qufei';
import Rcjhz from './Rcjhz';
import Qtxm from './Qtxm';
import Zlje from './Zlje';
import Zygczgj from './Zygczgj';
import Jrg from './Jrg';
import Zcbfwf from './Zcbfwf';
import Fbrgycl from './Fbrgycl';
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, zhCN , GridToolbarQuickFilter} from '@mui/x-data-grid';
import Backdrop from '@mui/material/Backdrop';
import CircularProgress from '@mui/material/CircularProgress';
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 Tooltip from '@mui/material/Tooltip';
















  export default function App2() {


    const [outline, setOutline] = React.useState([]);
    const [peibishu, setPeibishu] = React.useState([]);
    const [outlineDes, setOutlineDes] = React.useState([]);
    const [deXilie, setDeXilie] = React.useState([]);
    const [pbXilie, setPbXilie] = React.useState([]);
    const [nest, setNest] = React.useState(false);
    const [qingdan, setQingdan] = React.useState(false);
    const [cuoshi, setCuoshi] = React.useState(false);
    const [tbxx, setTbxx] = React.useState(false);
    const [qufei, setQufei] = React.useState(false);
    const [rcjhz, setRcjhz] = React.useState(false);
    const [gfsj, setGfsj] = React.useState(false);
    const [bjhz, setBjhz] = React.useState(false);
    const [qtxm, setQtxm] = React.useState(false);
    const [zlje, setZlje] = React.useState(false);
    const [zygczgj, setZygczgj] = React.useState(false);
    const [jrg, setJrg] = React.useState(false);
    const [zcbfwf, setZcbfwf] = React.useState(false);
    const [fbrgycl, setFbrgycl] = React.useState(false);
    const [jrgData, setJrgData] = React.useState([]);
    const [fbrgyclData, setFbrgyclData] = React.useState([]);
    const [zcbfwfData, setZcbfwfData] = React.useState([]);
    const [zygczgjData, setZygczgjData] = React.useState([]);
    const [zljeData, setZljeData] = React.useState([]);
    const [gfsjData, setGfsjData] = React.useState([]);
    const [qtxmData, setQtxmData] = React.useState([]);
    const [bjhzData, setBjhzData] = React.useState([]);
    const [tbxxData, setTbxxData] = React.useState([]);
    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 [zhuanye2, setZhuanye2] = 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 [dopen2, setDopen2] = 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: '定额编号', sortable: false},
      {field: '名称', headerName: '名称', sortable: false}, 
      {field: '单位', headerName: '单位', sortable: false},
      {field: '单价', headerName: '单价', sortable: false}
    ];
    const columns2 =[
    
      {field: '编号', headerName: '定额编号', sortable: false},
      {field: '名称', headerName: '名称', width: 200, sortable: false}, 
      {field: '单位', headerName: '单位', sortable: false},
      {field: '单价', headerName: '单价', sortable: false}
    ];
    let location = useParams();


    const [acvalue, setAcvalue] = React.useState('');
    const [acinputvalue, setAcinputvalue] = React.useState('');
    const [options, setOptions] = React.useState([]);
    const [suanshiError, setSuanshiError] = React.useState(false);
    const [helperText, setHelperText] = React.useState('');

    
    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 handleChangeZhuanye2 = (event) => {
      //console.log(event.target.value);
      
      setZhuanye2(event.target.value);
};

    const handleChange = (event, newValue) => {
      setValue(newValue);
      setRgde(null);
      setJxde(null);
      setClde(null);
    };



    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 suanshiCallback = () => {
      setDopen2(true);
    };

    const loadingCallback_djcs = () => {
      setOpen(true); 
      Service.save_djcs().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 tiaojiaCallback = (bh, bm, mingcheng, danwei, jiage) => {
      setOpen(true); 
      Service.tiaojia(location['id'], bh, bm, mingcheng, danwei, jiage).then(x=>{
        
        setOpen(false);
      });
    };

    const zjcsCallback = (biao_id,bh, row) => {
      setOpen(true); 
      Service.updateZjcs(biao_id, bh, row).then(x=>{
        
        setOpen(false);
      });
    };


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


    const handleSuanshi = () => {
      //console.log(acinputvalue);
      if (/^[A-Z0-9\.\-\[\]\+\*\(\)盐常镇泰补扬南通苏新市附录]+$/.test(acinputvalue)) {
        //console.log();
        
        Service.generateSingleDingeXilie(zhuanye2, acinputvalue).then(x=>{
          let res = JSON.parse(x);
          let id = res['reverse'];
          if (id && id != "None") {
            setSuanshiError(false);
            setHelperText('');
            setDopen2(false);
            res["date"] = Date.now().toString();
            setDingeclick(JSON.stringify(res));
          } else {
            setSuanshiError(true);
            setHelperText('无效输入');
            console.log("error");
          }

        });
      } else {
        setSuanshiError(true);
        setHelperText('无效输入');
        console.log("error");
      }
    };

    const handleClose2 = () => {
      setDopen2(false);
    };


    const handleGenerateSingleDingeXilie = (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"]);
              }
    };
  

    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=>{
            handleGenerateSingleDingeXilie(x);
           });
       
       } else if (qdbm.startsWith("03")) {//安装
        let suggestion = 30;
        if (zylb == "8") {
          suggestion = 60;
        }   
        setZhuanye(suggestion);
         Service.generateSingleDingeXilie(suggestion, debh).then(x=>{
          handleGenerateSingleDingeXilie(x);
       });
       } else if (qdbm.startsWith("04")) {////市政
         setZhuanye(20);
         Service.generateSingleDingeXilie(20, debh).then(x=>{
          handleGenerateSingleDingeXilie(x);
       });
       }
       else if (qdbm.startsWith("05")) {//园林
        setZhuanye(40);
        Service.generateSingleDingeXilie(40, debh).then(x=>{
          handleGenerateSingleDingeXilie(x);
      });
       } 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 = (itemId, event) => {
      
        console.log(itemId);
        if (["0", "3", "4", "6", "7", "8", "9", "11", "12", "13", "15", "16", "18", "19", "20", "21"].includes(itemId['id'])) {
            Service.generatePeibiXilie(itemId['id']).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);
                }
                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=>{
                  setBjhzData(x);
                  setNest(true);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(true);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(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=>{
                  setGfsjData(x);
                  setNest(true);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setRcjhz(false);
                  setGfsj(true);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(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);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(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);
          setRcjhz(false);
          setGfsj(false);
          setBjhz(false);
          setTbxx(false);
          setQtxm(false);
          setZlje(false);
          setZygczgj(false);
          setJrg(false);
          setZcbfwf(false);
          setFbrgycl(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);
                  setQtxmData(x);
                  setNest(true);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(true);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(false);
                 //setColumnHeaders(["序号", "名称", "金额", "项目类别", "备注"]);
                });

        } else if (itemId.includes("zhuan ye gong cheng zan gu jia")){
          let regex = /[0-9]*/; 
          let id = itemId.match(regex)[0];     
          setValue("1");
          //setColumnHeaders(["序号", "名称", "取费基数", "计算基础", "金额", "类别"]);
          Service.generateZygczgj(location["id"], id).then(x=>{
                  setZygczgjData(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(true);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(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);
                  setZljeData(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(true);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(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=>{
                  setJrgData(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(true);
                  setZcbfwf(false);
                  setFbrgycl(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=>{
                  setZcbfwfData(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(true);
                  setFbrgycl(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=>{
                  setFbrgyclData(x);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(true);
                });

        }
        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);
                  setRcjhz(true);
                  setNest(false);
                  setQingdan(false);
                  setCuoshi(false);
                  setQufei(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(false);
                  setQdbh(id);
                //}
                //)
                ;

        }
        else if (itemId.includes("TouBiaoXx")) {
            Service.generateDetail2(location["id"]).then(x=>{
            setQingdan(false);
            setCuoshi(false);
            setTbxxData(x);
            setNest(false);
            setQufei(false);
            setRcjhz(false);
            setGfsj(false);
            setBjhz(false);
            setTbxx(true);
            setQtxm(false);
            setZlje(false);
            setZygczgj(false);
            setJrg(false);
            setZcbfwf(false);
            setFbrgycl(false);
        });

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

          Service.setQufei(x);
          });
        Service.generateOutline2(location["id"]).then(x=>{
          let y = x.map(z=>{
            z['key'] = z['id'];
            z['title'] = z['label'];
            z['value'] = z['id'];
            return z;
          });
          let y1 = y.map(
            z=> {
              if (z.hasOwnProperty('children')) {
                z['children'] = z['children'].map(a=>{
                  a['key'] = a['id'];
                  a['title'] = a['label'];
                  a['value'] = a['id'];
                  return a;
                });
              }
              return z;
            }
          );
          let y2 = y1.map(z=>{
            if (z.hasOwnProperty('children')) {
              let child = z['children'];
              for (let i = 0; i < child.length; i++) {
                let children = child[i];
                if (children.hasOwnProperty('children')) {
                  children['children'] = children['children'].map(a=>{
                    a['key'] = a['id'];
                    a['title'] = a['label'];
                    a['value'] = a['id'];
                    return a;
                  })
                }
              }

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

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

    /**  <MenuItem value={10}>土建</MenuItem>
                     <MenuItem value={20}>市政</MenuItem>
                     <MenuItem value={30}>安装</MenuItem>
                     <MenuItem value={40}>园林</MenuItem>
                     <MenuItem value={50}>修缮（土建）</MenuItem>
                     <MenuItem value={60}>修缮（安装）</MenuItem> */

    const throttled = React.useRef(throttle((zhuanye2, newValue) => {
      if (zhuanye2 == 10) {
        Service.searchDe('土建', newValue).then(x=>{setOptions(x)});
      }
      if (zhuanye2 == 20) {
        Service.searchDe('市政', newValue).then(x=>{setOptions(x)});
      }
      if (zhuanye2 == 30) {
        Service.searchDe('安装', newValue).then(x=>{setOptions(x)});
      }
      if (zhuanye2 == 40) {
        Service.searchDe('园林', newValue).then(x=>{setOptions(x)});
      }
      if (zhuanye2 == 50) {
        Service.searchDe('修缮（土建）', newValue).then(x=>{setOptions(x)});
      }
      if (zhuanye2 == 60) {
        Service.searchDe('修缮（安装）', newValue).then(x=>{setOptions(x)});
      }

      
    }, 1000));
    React.useEffect(
      () => {
        throttled.current(zhuanye2, acinputvalue);
      }, [acinputvalue]
    );


    const onSelect = (selectedKeys, info) => {
      if (!selectedKeys.hasOwnProperty("children")) {
      console.log(selectedKeys);
      if (selectedKeys['id'].includes('Zylb')) {
      handleItemSelectionToggle(null, selectedKeys['id'], true);
      } else if (selectedKeys['id'].includes('TouBiaoXx')){
        console.log(selectedKeys);
        handleItemSelectionToggle(null, "Zylb1TouBiaoXx", true);
      }
    }
    };
    const onSelectDes = (selectedKeys, info) => {
      
      console.log(selectedKeys);
      
      handleItemSelectionToggleDes(null, selectedKeys['id'], true);
      
    };


    function CustomToolbar() {
      return (
        <Box
          sx={{
            p: 0.5,
            pb: 0,
          }}
        >
          <GridToolbarQuickFilter />
        </Box>
      );
    }


    return (

        <Box sx={{ flexGrow: 1  }}>
          <Grid container spacing={2}>
            <Grid item size={3}>
            <Box sx={{ width: '25vw'}}>



                <Accordion expanded={expandedQd} disableGutters
                     onChange={handleChangeAccord('qingdan')}>
                   <AccordionSummary 
                     expandIcon={<ExpandMoreIcon />}
                     aria-controls="panel1-content"
                     id="panel1-header"
                   >
                     <Typography  component="span">清单</Typography>
                   </AccordionSummary>
                   <AccordionDetails>
                     <Tree_2 height="90vh" 
                     onSelect={onSelect}
                     
                     

                     data={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}>
                    <Tree_2 height="calc(100vh - 560px)" 
                     onSelect={onSelectDes}
                     value={selectedItems}
                     expandItemValues={expandedItems}
                     data={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}
                      disableColumnMenu
                      onRowDoubleClick={handleDingEEvent}
                      localeText={zhCN.components.MuiDataGrid.defaultProps.localeText}
                    />
                   </div>
                   </Stack>
                   </AccordionDetails>
                 </Accordion>

                 <Button variant="outlined" fullWidth onClick={()=> {
                  setQufei(true);
                  setQingdan(false);
                  setCuoshi(false);
                  setRcjhz(false);
                  setGfsj(false);
                  setBjhz(false);
                  setTbxx(false);
                  setQtxm(false);
                  setZlje(false);
                  setZygczgj(false);
                  setJrg(false);
                  setZcbfwf(false);
                  setFbrgycl(false);
                 }}>费率</Button>

            

            </Box>

            </Grid>
            <Grid item size={9}>
              {!nest && !qingdan && !cuoshi && !qufei && rcjhz && !gfsj && !bjhz && !tbxx && !qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl && <Box sx={{ width: '70vw'}}><Rcjhz 
              id={location['id']} 
              bh={qdbh}
              tiaojiaCallback={tiaojiaCallback}
              /></Box>}

               {!nest && !qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && !bjhz && !tbxx && !qtxm && zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl && <Zlje 
              data={zljeData} 
              />}

            {!nest && !qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && !bjhz && !tbxx && !qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && fbrgycl && <Fbrgycl
              data={fbrgyclData} 
              />}

              {!nest && !qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && !bjhz && !tbxx && !qtxm && !zlje && !zygczgj && !jrg && zcbfwf && !fbrgycl && <Zcbfwf
              data={zcbfwfData} 
              />}

              {!nest && !qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && !bjhz && !tbxx && !qtxm && !zlje && !zygczgj && jrg && !zcbfwf && !fbrgycl && <Jrg 
              data={jrgData} 
              />}
              
              {!nest && !qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && !bjhz && !tbxx && !qtxm && !zlje && zygczgj && !jrg && !zcbfwf && !fbrgycl && <Zygczgj
              data={zygczgjData} 
              />}

              {!nest && !qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && !bjhz && tbxx && !qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl && <Tbxx 
              data={tbxxData} 
              
              />}

              {nest && !qingdan && !cuoshi && !qufei && !rcjhz && gfsj && !bjhz && !tbxx && !qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl && <Gfsj 
                   data={gfsjData}
              
              />}

              {nest && !qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && !bjhz && !tbxx && qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl && <Qtxm 
                   data={qtxmData}
              
              />}


               {nest && !qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && bjhz && !tbxx && !qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl && <Bjhz 
                   data={bjhzData}
              
               />}
             
            
            
            {!qingdan && !cuoshi && qufei && !rcjhz && !gfsj && !bjhz && !tbxx && !qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl && <Qufei id={location['id']} qufeiCallback={qufeiCallback}
                  />}

            {!nest && qingdan && !cuoshi && !qufei && !rcjhz && !gfsj && !bjhz  && !tbxx && !qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl &&  <Box sx={{ width: '70vw'}}><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()}>
                             <Qingdan3
                                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}
                                suanshiCallback={suanshiCallback}
                             />                     
                     </TabPanel>
                      )}
                </TabContext></Box>}
            {!nest && !qingdan && cuoshi && !qufei && !rcjhz && !gfsj && !bjhz && !tbxx && !qtxm && !zlje && !zygczgj && !jrg && !zcbfwf && !fbrgycl &&  <Box sx={{ width: '70vw'}}><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">
                     <Zjcs2 name={location["id"]} bh={dwgc} zjcsCallback={zjcsCallback}/>
                   </TabPanel>
                   <TabPanel sx={{p: 1}} value="2">
                     <Djcs3
                         name={location["id"]} 
                         bh={dwgc}
                         rgde={rgde}
                         jxde={jxde}
                         clde={clde}
                         beizhu={beizhu}
                         clickCallback={clickCallback}
                         loadingCallback={loadingCallback_djcs}
                         dingeclick={dingeclick}
                         beizhuFK={beizhuFK}


                     />
                   </TabPanel>
                      
                </TabContext>
                </Box>
                }


            </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}>
               <Box sx={{ maxHeight: "350px", minWidth: "300px", maxWidth: "300px"}}>
               <Tree_2  
                      onSelect={handleItemSelectionTogglePbs}
                      defaultValue={null}

                     
                     data={peibishu}/>
                     </Box>
                     
               
              
               <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
                      slots={{ toolbar: CustomToolbar}}
                      
                      localeText={zhCN.components.MuiDataGrid.defaultProps.localeText}
                     />
                    </div>
              
             
              
            </Stack>
          
          
           </DialogContent>
         </Dialog>
         <Dialog
           onClose={handleClose2}
           aria-labelledby="customized-dialog-title"
           open={dopen2}
           fullWidth={true}
           maxWidth="md"
          >
            <DialogTitle sx={{ m: 0, p: 2 }} id="customized-dialog-title">
             定额（算式）
            </DialogTitle>
            <IconButton
             aria-label="close"
             onClick={handleClose2}
             sx={(theme) => ({
               position: 'absolute',
               right: 8,
               top: 8,
               color: theme.palette.grey[500],
             })}
            >
             <CloseIcon />
            </IconButton>
            <DialogContent dividers>
            <Stack direction='row' spacing={2}>
            <FormControl  size="small">
                     <InputLabel id="demo-multiple-name-label">专业</InputLabel>
                     <Select
                       labelId="demo-multiple-name-label"
                       id="demo-multiple-name"
                       value={zhuanye2}
                       onChange={handleChangeZhuanye2}
                       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> 
              <Autocomplete sx={{ width: 300 }} size="small" disableClearable
                id="free-solo-demo"
                freeSolo
                filterOptions={(x) => x}
                options={options}
                value={acvalue}
                inputValue={acinputvalue}
                onChange={(event, newValue) => {
                  //setOptions(newValue ? [newValue, ...options] : options);
                  setAcvalue(newValue);
                }}
                getOptionDisabled={()=>true}
                onInputChange={(event, newInputValue) => {
                  setAcinputvalue(newInputValue);
                }}
                renderInput={(params) => <TextField {...params} error={suanshiError}  helperText={helperText}/>}
               />

                <Button variant="outlined" size="small" onClick={handleSuanshi}>确定</Button>   
              </Stack>
          
           </DialogContent>
         </Dialog>
            
        </Box>
    );
  }