preview pdf before save

1 年之前 · e60b489fd6
--- a/src/pages/Proof/Create_FromApp/ProofForm.js
+++ b/src/pages/Proof/Create_FromApp/ProofForm.js
@@ -97,10 +97,6 @@ const FormPanel = ({ formData }) => {
        });
    }

    const getReturnBeforeDate=(date)=>{
        return DateUtils.convertToDate(date).getTime();
    }

    const formik = useFormik({
        enableReinitialize: true,
        initialValues: data,
@@ -119,7 +115,7 @@ const FormPanel = ({ formData }) => {
                    length: values.length,
                    colCount: columnPrice.colCount,
                    noOfPages: values.noOfPages,
                    returnBeforeDate: getReturnBeforeDate(values.beforeDate)
                    returnBeforeDate: DateUtils.convertToDate(values.beforeDate).getTime()
                },
                files: attachments,
                onSuccess: function (responeData) {
@@ -156,7 +152,6 @@ const FormPanel = ({ formData }) => {
                setIsWarningPopUp(true);
                return;
            }

            file['id'] = attachments.length;
            setAttachments([
                ...attachments,
--- a/src/pages/Proof/Create_FromApp/UploadFileTable.js
+++ b/src/pages/Proof/Create_FromApp/UploadFileTable.js
@@ -6,19 +6,20 @@ import {
    GridRowModes
 } from "@mui/x-data-grid";
 import RemoveCircleOutlineIcon from '@mui/icons-material/RemoveCircleOutline';
 import {useEffect} from "react";
 import { useEffect } from "react";
 // import {useNavigate} from "react-router-dom";
 // import { useTheme } from '@mui/material/styles';
 import {
    Box,
    Stack
    Stack,
    Button
 } from '@mui/material';
 // ==============================|| EVENT TABLE ||============================== //

 export default function UploadFileTable({recordList, setRecordList,}) {
    
 export default function UploadFileTable({ recordList, setRecordList, }) {

    const [rows, setRows] = React.useState(recordList);
    const [rowModesModel,setRowModesModel] = React.useState({});
    const [rowModesModel, setRowModesModel] = React.useState({});
    // const theme = useTheme();

    // const navigate = useNavigate()
@@ -31,8 +32,8 @@ export default function UploadFileTable({recordList, setRecordList,}) {
    function NoRowsOverlay() {
        return (
            <Stack height="100%" alignItems="center" justifyContent="center">
            No File Record
            {/* <pre>(rows=&#123;[]&#125;)</pre> */}
                No File Record
                {/* <pre>(rows=&#123;[]&#125;)</pre> */}
            </Stack>
        );
    }
@@ -50,6 +51,25 @@ export default function UploadFileTable({recordList, setRecordList,}) {
        setRows(rows.filter((row) => row.id !== id));
    }

    const handlePreviewClick = (param) => () => {
        var reader = new FileReader();
        reader.onload = function(){
            let path = reader.result;
            var pdf_newTab = window.open("");
            pdf_newTab.document.write(
                "<html>"
                    +"<head><title>"+param.row.name+"</title></head>"
                    +"<body>"
                        +"<iframe title='"+param.row.name+"' width='100%' height='100%' src='"+path+"" + "'></iframe>"
                    +"</body>"
                +"</html>"
            );
        };
        reader.readAsDataURL(param.row);
    }



    const columns = [
        {
            field: 'actions',
@@ -58,11 +78,11 @@ export default function UploadFileTable({recordList, setRecordList,}) {
            width: 30,
            cellClassName: 'actions',
            // hide:true,
            getActions: ({id}) => {
            getActions: ({ id }) => {
                return [
                    <GridActionsCellItem
                        key="OutSave"
                        icon={<RemoveCircleOutlineIcon/>}
                        icon={<RemoveCircleOutlineIcon />}
                        label="delete"
                        className="textPrimary"
                        onClick={handleCancelClick(id)}
@@ -71,10 +91,12 @@ export default function UploadFileTable({recordList, setRecordList,}) {
            },
        },
        {
            id: 'name',
            field: 'name',
            headerName: 'File Name',
            flex: 1,
            renderCell: (params) => {
                return <Button onClick={handlePreviewClick(params)}><u>{params.row.name}</u></Button>;
            },
        },
        {
            id: 'size',
@@ -82,8 +104,8 @@ export default function UploadFileTable({recordList, setRecordList,}) {
            headerName: 'File Size',
            valueGetter: (params) => {
                // console.log(params)
                return Math.ceil(params.value/1024)+" KB";
              },
                return Math.ceil(params.value / 1024) + " KB";
            },
            flex: 1,
        },
    ];
@@ -94,7 +116,7 @@ export default function UploadFileTable({recordList, setRecordList,}) {
                rows={rows}
                columns={columns}
                editMode="row"
                sx={{border:1}}
                sx={{ border: 1 }}
                rowModesModel={rowModesModel}
                disablePagination
                components={{ NoRowsOverlay, }}
--- a/src/utils/statusUtils/ProofStatus.js
+++ b/src/utils/statusUtils/ProofStatus.js
@@ -1,9 +1,10 @@
 import {getStatusTag} from "utils/statusUtils/Base";
 import * as DateUtils from "utils/DateUtils";

 const confirm = {color:"#22a13f", eng:"Confirmed", cht:"可以付印"}
 const unable = {color:"#d9372b", eng:"Re-proofing", cht:"未能付印"}
 const timeOut = {color:"#8a8784", eng:"No Reply", cht:"回覆逾時"}
 const noReply = {color:"#f5a83d", eng:"Pending Reply", cht:"未回覆"}
 const pendingReply = {color:"#f5a83d", eng:"Pending Reply", cht:"未回覆"}

 export function getStatus_Cht(params) {
    let status = getStatus(params);
@@ -23,14 +24,14 @@ function getStatus(params) {
    if(replyDate){
        return action?confirm:unable;
    }else{
        return isOverTime(returnBeforeDate)? timeOut: noReply;
        return isOverTime(returnBeforeDate)? timeOut: pendingReply;
    }
 }

 const isOverTime = (returnBeforeDate) => {
    if (!returnBeforeDate) return true;
    returnBeforeDate = new Date(returnBeforeDate).setHours(14, 0, 0, 0);
    returnBeforeDate = DateUtils.convertToDate(returnBeforeDate);
    let current = new Date();
    return current.getTime() > returnBeforeDate;
    return current.getTime() > returnBeforeDate.getTime();
 }