alex
/
PNSPS-frontend-MaterialUI
1
0
派生 0
代码 工单 0 合并请求 0 版本发布 0 百科 动态
您最多选择25个主题 主题必须以字母或数字开头，可以包含连字符 (-)，并且长度不得超过35个字符
1171 提交
5 分支
19 MiB
 
 
目录树: ef73acfeb3
分支列表 标签列表
${ item.name }
创建分支 ${ searchTerm }
从 'ef73acfeb3'
${ noResults }
PNSPS-frontend-MaterialUI/src/pages/Proof/Create_FromApp/ProofForm.js

530 行
24 KiB
原始文件 Blame 文件历史 

  1. // material-ui

  2. import {

  3.     Dialog, DialogTitle, DialogContent, DialogActions,

  4.     Typography,

  5.     Autocomplete,

  6.     CardContent,

  7.     Grid,

  8.     Stack,

  9.     TextField,

  10.     FormLabel,

  11.     Button

  12. } from '@mui/material';

  13. 

  14. import * as UrlUtils from "utils/ApiPathConst";

  15. import * as HttpUtils from "utils/HttpUtils";

  16. import * as DateUtils from "utils/DateUtils"

  17. 

  18. import MainCard from "components/MainCard";

  19. import * as ComboData from "utils/ComboData";

  20. import * as React from "react";

  21. import { useFormik } from 'formik';

  22. import { useNavigate } from "react-router-dom";

  23. import Loadable from 'components/Loadable';

  24. import { notifySaveSuccess } from 'utils/CommonFunction';

  25. const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));

  26. 

  27. const FormPanel = ({ formData }) => {

  28. 

  29.     const [data, setData] = React.useState({});

  30.     const [columnPrice, setColumnPrice] = React.useState(ComboData.proofPrice[0]);

  31.     const [attachments, setAttachments] = React.useState([]);

  32. 

  33.     const [checkCode, setCheckCode] = React.useState("");

  34.     const [expectedCode, setExpectedCode] = React.useState("");

  35. 

  36.     const [wait, setWait] = React.useState(false);

  37. 

  38.     const [isWarningPopUp, setIsWarningPopUp] = React.useState(false);

  39.     const [warningText, setWarningText] = React.useState("");

  40. 

  41.     const [saving, setSaving] = React.useState(false);

  42. 

  43.     const [proofPaymentDeadlineMin, setProofPaymentDeadlineMin] = React.useState({});

  44.     const [reviseDeadlineMin, setReviseDeadlineMin] = React.useState({});

  45. 

  46.     const navigate = useNavigate()

  47. 

  48.     React.useEffect(() => {

  49.         if (formData) {

  50.             setData(formData);

  51.             if (formData.groupType == "Private Bill") {

  52.                 setColumnPrice(ComboData.proofPrice[1])

  53.                 formData['length'] = 18;

  54.             }

  55.             setProofPaymentDeadlineMin(formData.proofPaymentDeadline);

  56.             setReviseDeadlineMin(formData.reviseDeadline);

  57.             setExpectedCode(formData.groupNo.substr(1,formData.groupNo.length)+"-"+formData.issueNo+"-"+formData.issueYear.toString().substr(2, formData.issueYear.toString().length));

  58.         }

  59.     }, [formData]);

  60. 

  61. 

  62.     React.useEffect(() => {

  63.         if (!attachments || attachments.length <= 0) {

  64.             formik.setFieldValue("length", 0);

  65.             formik.setFieldValue("noOfPages", 0);

  66.             formik.setFieldValue("fee", 0);

  67.             return;

  68.         }

  69. 

  70.         doCalculate();

  71. 

  72.     }, [attachments]);

  73. 

  74.     const doCalculate = () => {

  75.         setWait(true);

  76.         if (!attachments || attachments.length <= 0) {

  77.             setWarningText("Unable to calculate, please upload a valid document.");

  78.             setIsWarningPopUp(true);

  79.             setWait(false);

  80.             return;

  81.         }

  82.         HttpUtils.postWithFiles({

  83.             url: UrlUtils.PROOF_CHECK_PRICE,

  84.             params: {

  85.                 appId: data.id,

  86.             },

  87.             files: attachments,

  88.             onSuccess: function (responseData) {

  89.                 if (responseData.data.detail) {

  90.                     setWarningText("Unable to calculate, please upload a valid document or input manually.");

  91.                     setIsWarningPopUp(true);

  92.                     setWait(false);

  93.                     return;

  94.                 }

  95.                 formik.setFieldValue("length", responseData.data.length);

  96.                 let colValue = 0;

  97.                 setColumnPrice(ComboData.proofPrice.find(obj => {

  98.                     colValue = obj.value;

  99.                     return obj.colCount === responseData.data.column

  100.                 }));

  101.                 formik.setFieldValue("noOfPages", responseData.data.total_no_of_page);

  102.                 formik.setFieldValue("fee", (data.groupType == "Private Bill" ? 6552 * responseData.data.total_no_of_page : responseData.data.length * colValue));

  103.                 if (data.groupType == "Private Bill" && responseData.data.file.length > 0) {

  104.                     let attachmentList = attachments;

  105.                     for (let i = 0; i < responseData.data.file.length; i++) {

  106.                         let file = responseData.data.file[i];

  107.                         attachmentList.find(item => item.name == file.filename)["no_of_page"] = file.no_of_page;

  108.                     }

  109.                     setAttachments(attachmentList);

  110.                 }

  111.                 setCheckCode(responseData.data.check_code);

  112.                 setWait(false);

  113.             },

  114.             onError: function () {

  115.                 // console.log(error)

  116.                 setWarningText("Unable to calculate, please input manually.");

  117.                 setIsWarningPopUp(true);

  118.                 setWait(false);

  119.             }

  120.         });

  121.     }

  122. 

  123.     const formik = useFormik({

  124.         enableReinitialize: true,

  125.         initialValues: data,

  126.         onSubmit: values => {

  127.             setSaving(true);

  128.             if (!attachments || attachments.length <= 0) {

  129.                 setWarningText("Please upload file.");

  130.                 setIsWarningPopUp(true);

  131.                 setSaving(false);

  132.                 return;

  133.             }

  134. 

  135.             if (!values.length|| values.length <= 0) {

  136.                 setWarningText("Column should > 0");

  137.                 setIsWarningPopUp(true);

  138.                 setSaving(false);

  139.                 return;

  140.             }

  141.             if(formik.values.groupType == "Private Bill" ){

  142.                 if (!values.noOfPages || values.noOfPages <= 0) {

  143.                     setWarningText("Page should > 0");

  144.                     setIsWarningPopUp(true);

  145.                     setSaving(false);

  146.                     return;

  147.                 }    

  148.             }

  149.             // console.log(values);

  150.             HttpUtils.postWithFiles({

  151.                 url: UrlUtils.CREATE_PROOF,

  152.                 params: {

  153.                     appId: values.id,

  154.                     fee: values.fee,

  155.                     length: values.length,

  156.                     colCount: columnPrice.colCount,

  157.                     noOfPages: values.noOfPages,

  158.                     reviseDeadline: DateUtils.convertToDate(values.reviseDeadline).getTime(),

  159.                     proofPaymentDeadline: DateUtils.convertToDate(values.proofPaymentDeadline).getTime()

  160.                 },

  161.                 files: attachments,

  162.                 onSuccess: function (responeData) {

  163.                     if (responeData.success == true) {

  164.                         notifySaveSuccess()

  165.                         navigate("/proof/search");

  166.                     } else {

  167.                         let msg = responeData.msg;

  168.                         if (msg === "haveActiveProof") {

  169.                             msg = "Action Failed: There is already a pending payment and proofreading record for client review."

  170.                         } else if (msg === "haveProofed") {

  171.                             msg = "Action Failed: Already proofed."

  172.                         }

  173.                         setWarningText(msg);

  174.                         setIsWarningPopUp(true);

  175.                     }

  176. 

  177.                 }

  178.             });

  179.         }

  180.     });

  181. 

  182.     const readFile = (event) => {

  183.         let file = event.target.files[0];

  184.         if (file) {

  185.             if (!file.name.toLowerCase().substr(file.name.length - 4).includes(".pdf")) {

  186.                 setWarningText("Please upload a valid file (File format: .pdf).");

  187.                 setIsWarningPopUp(true);

  188.                 document.getElementById("uploadFileBtn").value = "";

  189.                 return;

  190.             }

  191.             if (file.size >= (10 * 1024 * 1034)) {

  192.                 setWarningText("The file size for uploading should be less than 10MB");

  193.                 setIsWarningPopUp(true);

  194.                 return;

  195.             }

  196.             file['id'] = attachments.length;

  197.             setAttachments([

  198.                 ...attachments,

  199.                 file

  200.             ]);

  201.             document.getElementById("uploadFileBtn").value = "";

  202.         }

  203.     }

  204. 

  205.     return (

  206.         <MainCard xs={12} md={12} lg={12}

  207.             border={false}

  208.             content={false}>

  209. 

  210.             <form onSubmit={formik.handleSubmit}>

  211.                 {/*row 1*/}

  212.                 <CardContent sx={{ px: 2.5, pt: 3 }}>

  213.                     <Grid item justifyContent="space-between" alignItems="center">

  214.                         <Typography variant="h4" sx={{ mb: 2, borderBottom: "1px solid black" }}>

  215.                             Proof

  216.                         </Typography>

  217.                     </Grid>

  218.                 </CardContent>

  219. 

  220.                 {/*row 2*/}

  221.                 <Grid container direction="column" sx={{ paddingLeft: 4, paddingRight: 4 }} spacing={1}>

  222. 

  223.                     <Grid item xs={12} md={12}>

  224.                         <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>

  225.                             <FormLabel sx={{ paddingRight: 2, textAlign: "center" }}>

  226.                                 <Typography variant="h5">Deadline for online manuscript revision:</Typography>

  227.                             </FormLabel>

  228.                             <TextField

  229.                                 fullWidth

  230.                                 size="small"

  231.                                 type="datetime-local"

  232.                                 onChange={formik.handleChange}

  233.                                 name="reviseDeadline"

  234.                                 value={formik.values["reviseDeadline"]}

  235.                                 InputProps={{ inputProps: { min: DateUtils.datetimeStr(reviseDeadlineMin) } }}

  236.                                 variant="outlined"

  237.                                 sx={

  238.                                     {

  239.                                         "& .MuiInputBase-input.Mui-disabled": {

  240.                                             WebkitTextFillColor: "#000000",

  241.                                             background: "#f8f8f8",

  242.                                         },

  243.                                         width: '30%'

  244.                                     }

  245.                                 }

  246.                             />

  247.                         </Stack>

  248.                     </Grid>

  249. 

  250.                     <Grid item xs={12} md={12}>

  251.                         <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>

  252.                             <FormLabel sx={{ paddingRight: 2, textAlign: "center" }}>

  253.                                 <Typography variant="h5">Deadline for online confirm proof:</Typography>

  254.                             </FormLabel>

  255.                             <TextField

  256.                                 fullWidth

  257.                                 size="small"

  258.                                 type="datetime-local"

  259.                                 onChange={formik.handleChange}

  260.                                 name="proofPaymentDeadline"

  261.                                 value={formik.values["proofPaymentDeadline"]}

  262.                                 InputProps={{ inputProps: { min: DateUtils.datetimeStr(proofPaymentDeadlineMin) } }}

  263.                                 variant="outlined"

  264.                                 sx={

  265.                                     {

  266.                                         "& .MuiInputBase-input.Mui-disabled": {

  267.                                             WebkitTextFillColor: "#000000",

  268.                                             background: "#f8f8f8",

  269.                                         },

  270.                                         width: '30%'

  271.                                     }

  272.                                 }

  273.                             />

  274.                         </Stack>

  275.                     </Grid>

  276. 

  277.                     <Grid item xs={12} md={12}>

  278.                         <input

  279.                             id="uploadFileBtn"

  280.                             name="file"

  281.                             type="file"

  282.                             accept=".pdf"

  283.                             style={{ display: 'none' }}

  284.                             disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}

  285.                             onChange={(event) => {

  286.                                 readFile(event)

  287.                             }}

  288.                         />

  289.                         <label htmlFor="uploadFileBtn">

  290.                             <Button

  291.                                 component="span"

  292.                                 variant="contained"

  293.                                 size="large"

  294.                                 disabled={attachments.length >= (formik.values.groupType == "Private Bill" ? 2 : 1)}

  295.                             >

  296.                                 <Typography variant="h5">Upload Files</Typography>

  297.                             </Button>

  298.                         </label>

  299.                     </Grid>

  300. 

  301. 

  302.                     <Grid item xs={12} md={12}>

  303.                         <UploadFileTable

  304.                             key="uploadTable"

  305.                             recordList={attachments}

  306.                             setRecordList={setAttachments}

  307.                             showPageColumn={formik.values.groupType == "Private Bill"}

  308.                             _checkCode={checkCode}

  309.                             _expectedCode={expectedCode}

  310.                         />

  311.                     </Grid>

  312. 

  313.                     {

  314.                         wait ?

  315.                             <Grid item xs={12} md={12} sx={{ mt: 1.5, mb: 1.5 }}>

  316.                                 <Typography variant="h3" style={{ color: "blue" }}>Calculating, please wait ...</Typography>

  317.                             </Grid>

  318.                             :

  319.                             <Grid item xs={12} md={12}>

  320.                                 <Button

  321.                                     size="large"

  322.                                     variant="contained"

  323.                                     onClick={doCalculate}

  324.                                     sx={{

  325.                                         textTransform: 'capitalize',

  326.                                         alignItems: 'end'

  327.                                     }}>

  328.                                     <Typography variant="h5">Calculate</Typography>

  329.                                 </Button>

  330.                             </Grid>

  331.                     }

  332. 

  333. 

  334. 

  335.                     {

  336.                         formik.values.groupType == "Private Bill" ?

  337.                             <Grid item xs={12} md={12}>

  338.                                 <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>

  339.                                     <TextField

  340.                                         fullWidth

  341.                                         size="small"

  342.                                         type="number"

  343.                                         value={formik.values["noOfPages"]}

  344.                                         onChange={(event) => {

  345.                                             const value = parseInt(event.target.value);

  346.                                             formik.setFieldValue("noOfPages", value);

  347.                                             formik.setFieldValue("fee", 6552 * value);

  348.                                         }}

  349.                                         variant="outlined"

  350.                                         sx={

  351.                                             {

  352.                                                 "& .MuiInputBase-input.Mui-disabled": {

  353.                                                     WebkitTextFillColor: "#000000",

  354.                                                     background: "#f8f8f8",

  355.                                                 },

  356.                                                 width: '15%'

  357.                                             }

  358.                                         }

  359.                                     />

  360.                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>

  361.                                         <Typography variant="h5">pages</Typography>

  362.                                     </FormLabel>

  363.                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>

  364.                                         <Typography variant="h5">x</Typography>

  365.                                     </FormLabel>

  366.                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>

  367.                                         <Typography variant="h5">${formik.values.price ? formik.values.price : "6,552"}</Typography>

  368.                                     </FormLabel>

  369.                                 </Stack>

  370.                             </Grid>

  371.                             :

  372.                             <Grid item xs={12} md={12}>

  373.                                 <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>

  374.                                     <TextField

  375.                                         fullWidth

  376.                                         size="small"

  377.                                         type="number"

  378.                                         onChange={(event) => {

  379.                                             let value = parseInt(event.target.value);

  380.                                             formik.setFieldValue("length", value);

  381.                                             formik.setFieldValue("fee", columnPrice.value * value);

  382.                                         }}

  383.                                         name="length"

  384.                                         value={formik.values["length"]}

  385.                                         variant="outlined"

  386.                                         sx={

  387.                                             {

  388.                                                 "& .MuiInputBase-input.Mui-disabled": {

  389.                                                     WebkitTextFillColor: "#000000",

  390.                                                     background: "#f8f8f8",

  391.                                                 },

  392.                                                 width: '15%'

  393.                                             }

  394.                                         }

  395.                                     />

  396.                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>

  397.                                         <Typography variant="h5">cm</Typography>

  398.                                     </FormLabel>

  399. 

  400.                                     <FormLabel sx={{ paddingLeft: 2, paddingRight: 4, textAlign: "center" }}>

  401.                                         <Typography variant="h5">x</Typography>

  402.                                     </FormLabel>

  403. 

  404.                                     <Autocomplete

  405.                                         sx={{

  406.                                             width: "15%"

  407.                                         }}

  408.                                         disablePortal

  409.                                         id="price"

  410.                                         options={ComboData.proofPrice}

  411.                                         value={columnPrice}

  412.                                         inputValue={(columnPrice?.label) ? columnPrice?.label : ""}

  413.                                         getOptionLabel={(option) => option.label ? option.label : ""}

  414.                                         onChange={(event, newValue) => {

  415.                                             setColumnPrice(newValue)

  416.                                             formik.values["fee"] = newValue.value * formik.values.length;

  417.                                         }}

  418.                                         renderInput={(params) => (

  419.                                             <TextField {...params}

  420.                                                 InputLabelProps={{

  421.                                                     shrink: true

  422.                                                 }}

  423.                                                 sx={{

  424.                                                     width: "100%"

  425.                                                 }}

  426.                                             />

  427.                                         )}

  428.                                     />

  429.                                 </Stack>

  430.                             </Grid>

  431.                     }

  432. 

  433. 

  434. 

  435. 

  436. 

  437.                     <Grid item xs={12} md={12}>

  438.                         <Stack direction="row" sx={{ display: 'flex', alignItems: 'center' }}>

  439.                             <FormLabel sx={{ paddingRight: 2, textAlign: "center" }}>

  440.                                 <Typography variant="h5">Necessary fee:</Typography>

  441.                             </FormLabel>

  442.                             <FormLabel sx={{ paddingLeft: 2, paddingRight: 2, textAlign: "center" }}>

  443.                                 <Typography variant="h5">$</Typography>

  444.                             </FormLabel>

  445.                             <TextField

  446.                                 fullWidth

  447.                                 size="small"

  448.                                 type="text"

  449.                                 onChange={formik.handleChange}

  450.                                 name="fee"

  451.                                 value={formik.values["fee"]}

  452.                                 variant="outlined"

  453.                                 sx={

  454.                                     {

  455.                                         "& .MuiInputBase-input.Mui-disabled": {

  456.                                             WebkitTextFillColor: "#000000",

  457.                                             background: "#f8f8f8",

  458.                                         },

  459.                                         width: '15%'

  460.                                     }

  461.                                 }

  462.                             />

  463. 

  464.                         </Stack>

  465.                     </Grid>

  466. 

  467. 

  468.                     <Grid item xs={12} md={12}>

  469.                         <Button

  470.                             size="large"

  471.                             variant="contained"

  472.                             color="success"

  473.                             type="submit"

  474.                             disabled={saving}

  475.                             sx={{

  476.                                 textTransform: 'capitalize',

  477.                                 alignItems: 'end'

  478.                             }}>

  479.                             <Typography variant="h5">Save</Typography>

  480.                         </Button>

  481.                     </Grid>

  482. 

  483.                 </Grid>

  484. 

  485. 

  486.             </form>

  487.             <div>

  488.                 <Dialog

  489.                     open={isWarningPopUp}

  490.                     onClose={() => setIsWarningPopUp(false)}

  491.                     PaperProps={{

  492.                         sx: {

  493.                             minWidth: '40vw',

  494.                             maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },

  495.                             maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }

  496.                         }

  497.                     }}

  498.                 >

  499.                     <DialogTitle><Typography variant="h3">Warning</Typography></DialogTitle>

  500.                     <DialogContent style={{ display: 'flex', }}>

  501.                         <Typography variant="h4" style={{ padding: '16px' }}>{warningText}</Typography>

  502.                     </DialogContent>

  503.                     <DialogActions>

  504.                         <Button onClick={() => setIsWarningPopUp(false)}><Typography variant="h5">OK</Typography></Button>

  505.                     </DialogActions>

  506.                 </Dialog>

  507.             </div>

  508.             <div>

  509.                 <Dialog

  510.                     open={wait}

  511.                     onClose={() => setWait(false)}

  512.                     PaperProps={{

  513.                         sx: {

  514.                             minWidth: '40vw',

  515.                             maxWidth: { xs: '90vw', s: '90vw', m: '70vw', lg: '70vw' },

  516.                             maxHeight: { xs: '90vh', s: '70vh', m: '70vh', lg: '60vh' }

  517.                         }

  518.                     }}

  519.                 >

  520.                     <DialogContent style={{ display: 'flex', }}>

  521.                         <Typography variant="h4" style={{ padding: '16px' }}>Calculating, please wait ...</Typography>

  522.                     </DialogContent>

  523.                 </Dialog>

  524.             </div>

  525.         </MainCard>

  526.     );

  527. };

  528. 

  529. export default FormPanel;