Javascript 一旦加载下拉列表值（当我单击下拉列表时），整个组件在React JS中折叠，弹出窗口就会关闭 import React，{useContext，useState，useffect}来自“React”； 从“@物料界面/核心/按钮”导入按钮； 从“@mate

一旦加载下拉列表值（当我单击下拉列表时），整个组件在React JS中折叠，弹出窗口就会关闭

import React，{useContext，useState，useffect}来自“React”；
从“@物料界面/核心/按钮”导入按钮；
从“@material ui/core/Dialog”导入对话框；
从“@material ui/core/DialogActions”导入DialogActions；
从“@material ui/core/DialogContent”导入DialogContent；
从“@material ui/core/DialogContentText”导入DialogContentText；
从“@material ui/core/DialogTitle”导入DialogTitle；
从“@material ui/core/useMediaQuery”导入useMediaQuery；
从“@material ui/core/styles”导入{useTheme}”；
从“@material ui/core”导入{分隔符、网格、排版}；
从“Context/LoginContext”导入LoginContext，{LoginConsumer}；
从“/useForm”导入{Form，useForm}；
从“组件/控件/控件”导入控件；
从“服务/请求数据”导入*作为请求服务；
从“../../assets/myimage/Cancel.png”导入取消；
从“../../assets/myimage/Reassign.svg”导入重新分配；
从“@material ui/icons”导入{FormatAlignRight}”；
从“assets/jss/material kit react”导入{successBoxShadow}；
从“日期fns”导入{format}；
导出默认功能弹出窗口（道具）{
const things=useContext（LoginContext）；
const theme=useTheme（）；
const fullScreen=useMediaQuery（theme.breakpoints.down（“lg”）；
常数{
标题
第二个标题，
儿童
openPopup，
setopenPopup，
请求\u Id，
请求信息，
}=道具；
const[scroll，setScroll]=React.useState（“纸张”）；
const[records，setRecords]=useState（[]）；
常量[showreassign，setShowreassign]=useState（false）；
const[showcancel，setShowcancel]=使用状态（false）；
const[loading，setLoading]=useState（false）；
常量初始值={
id:“”，
理由：“，
};
const{fvalue，setFvalue，handleInputChange}=useForm（initialfvalue）；
useffect（（）=>{
const getallMsp=async（）=>{
const Msplist=await requestService.retreiveMSPlist（）；
if（Msplist）{
setRecords（Msplist）；
}
如果（Requestinfo.length>0）{
const uplist=Msplist.filter（函数（Msp）{
返回(
Msp.id！==Requestinfo[0][“请求”].Msp\u id&&
Requestinfo[0][“请求”].msP\U Id
);
});
如果（向上）{
setRecords（uplist）；
}
}
};
getallMsp（）；
}，[Requestinfo，showcancel，showreassign]）；
常量handleClickOpen=（滚动类型）=>（）=>{
setopenPopup（true）；
setScroll（滚动式）；
};
常量handleClose=（）=>{
setopenPopup（假）；
};
常数handlecancel=（e）=>{
e、 预防默认值（）；
//让myuserid=things.userinfo[0].user|id | null；
//让username=things.username；
var tzoffset=new Date（）.getTimezoneOffset（）*60000；//偏移量（毫秒）
var localISOTime=新日期（Date.now（）-tzoffset）
.toISOString（）
.切片（0，-1）；
console.log（localISOTime）；
取回（“https://localhost:44381/api/request/JobOrderCancel", {
方法：“张贴”，
标题：{“内容类型”：“应用程序/json”}，
正文：JSON.stringify({
Id:Request_Id，
地标：“，
地点：“，
创建日期：localISOTime.toString（），
响应日期：LocalSoTime.toString（），
创建人：JSON.parse（localStorage.getItem（“用户id”）| | null），
修改日期：LocalSoTime.toString（），
修改者：JSON.parse（localStorage.getItem（“用户id”）| | null），
损坏详细信息：“，
原因：价值。原因，
rtn_消息：0，
}),
})
.然后（（res）=>res.json（））
。然后（（数据）=>{
控制台日志（数据）；
data.rtn_msg==1？console.log（“成功”）：console.log（“失败”）；
})
.catch（（err）=>console.log（err））；
};
常量handleconfirm=（e）=>{
e、 预防默认值（）；
//让myuserid=things.userinfo[0].user|id | null；
//让username=things.username；
//仅适用于日期时间格式
取回（“https://localhost:44381/api/request/JobOrderConfirmation", {
方法：“张贴”，
标题：{“内容类型”：“应用程序/json”}，
正文：JSON.stringify({
Id:Request_Id，
创建人：JSON.parse（localStorage.getItem（“用户id”）| | null），
修改者：JSON.parse（localStorage.getItem（“用户id”）| | null），
损坏详细信息：“，
rtn_消息：0，
}),
})
.然后（（res）=>res.json（））
.然后（（数据）=>console.log（数据））
.catch（（err）=>console.log（err））；
};
常量handleassignmsp=（e）=>{
e、 预防默认值（）；
var tzoffset=new Date（）.getTimezoneOffset（）*60000；//偏移量（毫秒）
var localISOTime=新日期（Date.now（）-tzoffset）
.toISOString（）
.切片（0，-1）；
console.log（localISOTime）；
console.log（fvalue.id）；
取回（“https://localhost:44381/api/request/JobAssign", {
方法：“张贴”，
标题：{“内容类型”：“应用程序/json”}，
正文：JSON.stringify({
Id:Request_Id，
地点：“，
地标：“，
创建日期：localISOTime.toString（），
分配日期：LocalSoTime.toString（），
创建人：JSON.parse（localStorage.getItem（“用户id”）| | null），
修改日期：LocalSoTime.toString（），
修改者：JSON.parse（localStorage.getItem（“用户id”）| | null），
损坏详细信息：“，
MSP_Id:fvalue.Id，
原因：“已分配”，
rtn_消息：0，
Is_车辆：请求信息[0][“请求”]。Is_车辆，
Is_Vehicle_Job:Requestinfo[0][“requests”]。Is_Vehicle_Job，
Is_拖车：Requestinfo[0][“requests”]。Is_拖车，
Is_Trailer_作业：Requestinfo[0][“requests”]。Is_Trailer_作业，
文件编号：“，
}),
})
.然后（（res）=>res.json（））
.然后（（数据）=>console.log（数据））
.catch（（err）=>console.log（err））；
};
常量Handlereasignmsp=（e）=>{
e、 预防默认值（）；
console.log（fvalue.id）；
取回（“https://localhost:44
import React, { useContext, useState, useEffect } from "react";
import Button from "@material-ui/core/Button";
import Dialog from "@material-ui/core/Dialog";
import DialogActions from "@material-ui/core/DialogActions";
import DialogContent from "@material-ui/core/DialogContent";
import DialogContentText from "@material-ui/core/DialogContentText";
import DialogTitle from "@material-ui/core/DialogTitle";
import useMediaQuery from "@material-ui/core/useMediaQuery";
import { useTheme } from "@material-ui/core/styles";
import { Divider, Grid, Typography } from "@material-ui/core";
import LoginContext, { LoginConsumer } from "Context/LoginContext";
import { Form, useForm } from "./useForm";
import Controls from "Components/Controls/Controls";
import * as requestService from "Services/RequestData";
import Cancel from "../../assets/myimage/Cancel.png";
import Reassign from "../../assets/myimage/Reassign.svg";
import { FormatAlignRight } from "@material-ui/icons";
import { successBoxShadow } from "assets/jss/material-kit-react";
import { format } from "date-fns";
export default function Popup(props) {
  const things = useContext(LoginContext);
  const theme = useTheme();
  const fullScreen = useMediaQuery(theme.breakpoints.down("lg"));

  const {
    title,
    secondHeader,
    children,
    openPopup,
    setopenPopup,
    Request_Id,
    Requestinfo,
  } = props;

  const [scroll, setScroll] = React.useState("paper");
  const [records, setRecords] = useState([]);
  const [showreassign, setShowreassign] = useState(false);
  const [showcancel, setShowcancel] = useState(false);
  const [loading, setLoading] = useState(false);

  const initialFvalues = {
    id: "",
    Reason: "",
  };
  const { fvalue, setFvalue, handleInputChange } = useForm(initialFvalues);

  useEffect(() => {
    const getallMsp = async () => {
      const Msplist = await requestService.retreiveMSPlist();
      if (Msplist) {
        setRecords(Msplist);
      }

      if (Requestinfo.length > 0) {
        const uplist = Msplist.filter(function (Msp) {
          return (
            Msp.id !== Requestinfo[0]["requests"].msP_Id &&
            Requestinfo[0]["requests"].msP_Id
          );
        });

        if (uplist) {
          setRecords(uplist);
        }
      }
    };
    getallMsp();
  }, [Requestinfo,showcancel, showreassign]);

  const handleClickOpen = (scrollType) => () => {
    setopenPopup(true);
    setScroll(scrollType);
  };

  const handleClose = () => {
    setopenPopup(false);
  };
  const handlecancel = (e) => {
    e.preventDefault();
    // let myuserid = things.userinfo[0].user_id || null;
    // let username = things.username;
    var tzoffset = new Date().getTimezoneOffset() * 60000; //offset in milliseconds
    var localISOTime = new Date(Date.now() - tzoffset)
      .toISOString()
      .slice(0, -1);
    console.log(localISOTime);

    fetch("https://localhost:44381/api/request/JobOrderCancel", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        Id: Request_Id,
        Landmark: "",
        Location: "",
        Date_Created: localISOTime.toString(),
        Date_Respond: localISOTime.toString(),
        Created_By: JSON.parse(localStorage.getItem("user_id") || null),
        Date_Modified: localISOTime.toString(),
        Modified_By: JSON.parse(localStorage.getItem("user_id") || null),
        Damage_Detail: "",
        Reason: fvalue.Reason,
        rtn_msg: 0,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        console.log(data);
        data.rtn_msg === 1 ? console.log("success") : console.log("fail");
      })
      .catch((err) => console.log(err));
  };

  const handleconfirm = (e) => {
    e.preventDefault();
    // let myuserid = things.userinfo[0].user_id || null;
    // let username = things.username;

    //only for Datetime format

    fetch("https://localhost:44381/api/request/JobOrderConfirmation", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        Id: Request_Id,
        Created_By: JSON.parse(localStorage.getItem("user_id") || null),
        Modified_By: JSON.parse(localStorage.getItem("user_id") || null),
        Damage_Detail: "",
        rtn_msg: 0,
      }),
    })
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  };

  const handleassignmsp = (e) => {
    e.preventDefault();
    var tzoffset = new Date().getTimezoneOffset() * 60000; //offset in milliseconds
    var localISOTime = new Date(Date.now() - tzoffset)
      .toISOString()
      .slice(0, -1);
    console.log(localISOTime);

    console.log(fvalue.id);
    fetch("https://localhost:44381/api/request/JobAssign", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        Id: Request_Id,
        Location: "",
        Landmark: "",
        Date_Created: localISOTime.toString(),
        Date_Assign: localISOTime.toString(),
        Created_By: JSON.parse(localStorage.getItem("user_id") || null),
        Date_Modified: localISOTime.toString(),
        Modified_By: JSON.parse(localStorage.getItem("user_id") || null),
        Damage_Detail: "",
        MSP_Id: fvalue.id,
        Reason: "Assigned",
        rtn_msg: 0,
        Is_Vehicle: Requestinfo[0]["requests"].is_Vehicle,
        Is_Vehicle_Job: Requestinfo[0]["requests"].is_Vehicle_Job,
        Is_Trailer: Requestinfo[0]["requests"].is_Trailer,
        Is_Trailer_Job: Requestinfo[0]["requests"].is_Trailer_Job,
        Document_No: "",
      }),
    })
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  };

  const handlereassignmsp = (e) => {
    e.preventDefault();

    console.log(fvalue.id);
    fetch("https://localhost:44381/api/request/Reassign", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        Id: Request_Id,
        Location: "",
        Landmark: "",
        Date_Created: new Date().toISOString(),
        Date_Assign: new Date().toISOString(),
        Created_By: JSON.parse(localStorage.getItem("user_id") || null),
        Date_Modified: new Date().toISOString(),
        Modified_By: JSON.parse(localStorage.getItem("user_id") || null),
        Damage_Detail: "",
        MSP_Id: fvalue.id,
        Reason: fvalue.Reason,
        rtn_msg: 0,
       
      }),
    })
      .then((res) => res.json())
      .then((data) => console.log(data))
      .catch((err) => console.log(err));
  };

  const handlereassigncontrols = () => {
    setShowreassign(true);
  };

  const handlecancelcontrols = () => {
    if (showcancel) {
      setShowcancel(false);
    } else {
      setShowcancel(true);
    }
  };

  return (
    <LoginConsumer>
      {() => (
        <div>
          <Dialog
            open={openPopup}
            onClose={handleClose}
            scroll={scroll}
            aria-labelledby="scroll-dialog-title"
            aria-describedby="scroll-dialog-description"
            maxWidth="lg"
            fullWidth="lg"
          >
            <DialogTitle id="scroll-dialog-title">
              <div style={{ display: "flex" }}>
                <Typography
                  variant="h6"
                  component="div"
                  style={{ flexGrow: 1, color: "blue" }}
                >
                  <Grid container>
                    <Grid item xs={12}>
                      {title === "PENDING JOB ACKNOWLEDGEMENT" ? null : (
                        <Button>
                          <img
                            src={Cancel}
                            alt="cancel image"
                            width="35"
                            height="30"
                            onClick={handlecancelcontrols}
                          />
                        </Button>
                      )}

                      {title === "PENDING MSP ARRIVAL" ||
                      title === "WORK IN PROGRESS" ? (
                        <Button>
                          <img
                            src={Reassign}
                            alt="cancel image"
                            width="35"
                            height="30"
                            onClick={handlereassigncontrols}
                          />
                        </Button>
                      ) : null}
                      {title}
                    </Grid>
                  </Grid>
                </Typography>
                <Button onClick={handleClose} color="secondary">
                  X
                </Button>
              </div>
              <Divider></Divider>
              <div>{secondHeader}</div>
            </DialogTitle>
            <DialogContent dividers={scroll === "paper"}>
              <DialogContentText
                id="scroll-dialog-description"
                //ref={descriptionElementRef}
                tabIndex={-1}
              >
                <div className="paper">{children}</div>
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <>
                <Grid container>
                  <Grid item md={11}>
                    {showcancel ? null : showreassign ||
                      title === "PENDING ASSIGN MSP" ? (
                      <Controls.Select
                        name="id"
                        value={fvalue.id}
                        label="Available MSPS"
                        onChange={handleInputChange}
                        options={records}
                      ></Controls.Select>
                    ) : null}

                    {showreassign || showcancel ? (
                      <Controls.Input
                        name="Reason"
                        value={fvalue.Reason}
                        label="Reason"
                        onChange={handleInputChange}
                      ></Controls.Input>
                    ) : null}
                  </Grid>

                  <Grid item md={1} style={{ align: "right" }}>
                    {showcancel ? (
                      <Button onClick={handlecancel} color="primary">
                        CANCEL
                      </Button>
                    ) : showreassign ? (
                      <Button onClick={handlereassignmsp} color="primary">
                        RE-ASSIGN
                      </Button>
                    ) : title === "PENDING JOB ORDER" ? (
                      <Button onClick={handleconfirm} color="primary">
                        CONFIRM
                      </Button>
                    ) : title === "PENDING ASSIGN MSP" ? (
                      <Button onClick={handleassignmsp} color="primary">
                        ASSIGN
                      </Button>
                    ) : null}
                  </Grid>
                </Grid>
              </>
            </DialogActions>
          </Dialog>
        </div>
      )}
    </LoginConsumer>
  );
}