update proof

src/pages/ProofCreate_FromApp/ProofForm.js

@@ -16,7 +16,7 @@ import MainCard from "components/MainCard";
 import * as ComboData from "utils/ComboData";
 import * as React from "react";
 import { useFormik } from 'formik';
-import {useNavigate} from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 import Loadable from 'components/Loadable';
 const UploadFileTable = Loadable(React.lazy(() => import('./UploadFileTable')));
 // ==============================|| DASHBOARD - DEFAULT ||============================== //
@@ -34,20 +34,61 @@ const FormPanel = ({ formData }) => {
     const navigate = useNavigate()
 
     React.useEffect(() => {
-        if (formData){
+        if (formData) {
             setData(formData);
-            if(formData.groupType == "A"){
+            if (formData.groupType == "A") {
                 setColumnPrice(ComboData.proofPrice[1])
                 formData['length'] = 18;
             }
         }
     }, [formData]);
 
+
+    React.useEffect(() => {
+        if (!attachments || attachments.length <= 0){
+            formik.setFieldValue("length",0);
+            formik.setFieldValue("noOfPages",0);
+            formik.setFieldValue("fee",0);
+            return;
+        }
+
+        doCalculate();
+
+    }, [attachments]);
+
+    const doCalculate=()=>{
+        if (!attachments || attachments.length <= 0){
+            setWarningText("無法計算，請上傳有效文件。");
+            setIsWarningPopUp(true);
+            return;
+        }
+        HttpUtils.postWithFiles({
+            url: UrlUtils.PROOF_CHECK_PRICE,
+            params: {
+                appId: data.id,
+            },
+            files: attachments,
+            onSuccess: function (responseData) {
+                if(responseData.data.detail){
+                    setWarningText("無法計算，請上傳有效文件或手動輸入。");
+                    setIsWarningPopUp(true);
+                    return;
+                }
+                formik.setFieldValue("length",responseData.data.length);
+                setColumnPrice(ComboData.proofPrice.find(obj=>{
+                    return obj.colCount === responseData.data.column
+                }));
+                formik.setFieldValue("noOfPages",responseData.data.no_of_page);
+                formik.setFieldValue("fee",columnPrice.value * (data.groupType == "A"?responseData.data.no_of_page*responseData.data.length:responseData.data.length));
+            }
+        });
+    }
+
     const formik = useFormik({
         enableReinitialize: true,
         initialValues: data,
         onSubmit: values => {
-            if (!attachments || attachments.length<=0) {
+            if (!attachments || attachments.length <= 0) {
                 setWarningText("請選擇上傳檔案");
                 setIsWarningPopUp(true);
                 return;
@@ -79,12 +120,12 @@ const FormPanel = ({ formData }) => {
                 document.getElementById("uploadFileBtn").value = "";
                 return;
             }
-            if(file.size >= (10 * 1024 * 1034)){
+            if (file.size >= (10 * 1024 * 1034)) {
                 setWarningText("上傳檔案大小應<10MB");
                 setIsWarningPopUp(true);
                 return;
             }
-            
+
             file['id'] = attachments.length;
             setAttachments([
                 ...attachments,
@@ -96,6 +137,7 @@ const FormPanel = ({ formData }) => {
 
 
 
+
     return (
         <MainCard xs={12} md={12} lg={12}
             border={false}
@@ -158,10 +200,10 @@ const FormPanel = ({ formData }) => {
                                         fullWidth
                                         size="small"
                                         type="text"
-                                        onChange={(event)=>{
+                                        onChange={(event) => {
                                             const value = event.target.value;
                                             formik.setFieldValue("length", value);
-                                            formik.setFieldValue("fee", columnPrice.value*value);
+                                            formik.setFieldValue("fee", columnPrice.value* 18 * value);
                                         }}
                                         name="noOfPages"
                                         value={formik.values["noOfPages"]}
@@ -194,10 +236,10 @@ const FormPanel = ({ formData }) => {
                                         fullWidth
                                         size="small"
                                         type="text"
-                                        onChange={(event)=>{
+                                        onChange={(event) => {
                                             const value = event.target.value;
                                             formik.setFieldValue("length", value);
-                                            formik.setFieldValue("fee", columnPrice.value*value);
+                                            formik.setFieldValue("fee", columnPrice.value * value);
                                         }}
                                         name="length"
                                         value={formik.values["length"]}
@@ -232,7 +274,7 @@ const FormPanel = ({ formData }) => {
                                         getOptionLabel={(option) => option.label ? option.label : ""}
                                         onChange={(event, newValue) => {
                                             setColumnPrice(newValue)
-                                            formik.values["fee"] = newValue.value*formik.values.length;
+                                            formik.values["fee"] = newValue.value * formik.values.length;
                                         }}
                                         renderInput={(params) => (
                                             <TextField {...params}

src/utils/ApiPathConst.js

@@ -74,6 +74,7 @@ export const GET_PROOF_APP = apiPath+'/proof/create-from-app';//GLD
 export const CREATE_PROOF = apiPath+'/proof/create';//POST
 export const GET_PROOF = apiPath+'/proof/details';//GET
 export const REPLY_PROOF = apiPath+'/proof/reply';//GET
+export const PROOF_CHECK_PRICE = apiPath+'/proof/check-price';//GET
 
 //User Group
 export const POST_AND_UPDATE_USER_GROUP = apiPath+'/group/save';