Untitled
unknown
plain_text
a year ago
14 kB
3
Indexable
Never
import { useState, useEffect, useContext, useRef } from 'react'; import { Link } from 'react-router-dom'; import circle from '../pictures/circle.png'; import line from '../pictures/line.png'; import axios from '../config/axios'; import StatusButton from '../components/StatusButton'; import { ReRenderContext } from '../context/ReRenderContext'; import { FiPrinter } from 'react-icons/fi'; import { useReactToPrint } from 'react-to-print'; function OrderPage() { const componentRef = useRef(null); const { reRender } = useContext(ReRenderContext); const [saleOrders, setSaleOrders] = useState([]); const [transactionSelectedOrderObj, setTransactionSelectedOrderObj] = useState({ bankAccountName: '', bankName: '', paymentDate: '', amount: '', }); const [transactions, setTransactions] = useState([]); const getCartProductByUserId = async () => { try { const res = await axios.get(`/sale_orders/getSaleOrderByUserId`); setSaleOrders(res.data.saleOrders); } catch (error) { console.log(error); } }; useEffect(() => { getCartProductByUserId(); }, [reRender]); let i = 1; console.log(saleOrders); // const componentRefs = saleOrders.map(() => useRef(null)); //----------------------------------------------- const printComponent = useReactToPrint({ content: () => componentRef.current, }); // // const handlePrint = (componentRefsIndex) => { // // console.log('componentRef', componentRef); // // printComponent(); // // }; const handlePrint = () => { // if (componentRef.current) { // Add your printing logic here using the ref // For example: componentRef.current.print(); // console.log('Printing:', componentRef.current.print()); // } printComponent(); }; //----------------------------------------------- //----------------------------------------------- //----------------------------------------------- console.log('sale orders', saleOrders); const handleGetTransactionBySaleOrderId = async (saleOrderId) => { try { const res = await axios.get(`/transactions/get/saleOrder/${saleOrderId}`); console.log(res.data?.transactions); setTransactions(res.data?.transactions); // setTransactionSelectedOrderObj(res.data?.transactions[0]); } catch (error) { console.log(error); } }; // useEffect(() => { // try { // handleGetTransactionBySaleOrderId(); // } catch (error) { // console.log(error); // } // }, []); return ( <div> {saleOrders.map((el, index) => { i = 0; return ( <div className='border-2'> <br /> <div className='border-2 rounded-lg m-2 p-2' key={el?.id} ref={componentRef} > <div className='flex flex-col'> <div className=''> <h1 className='text-orange-400 text-[35px] text-bold'> ใบส่งของชั่วคราว </h1> <br /> <div className='flex justify-end text-gray-600 text-[23px]'> <p>{`เลขที่: ${el.id}`}</p> </div> <div className='flex justify-end text-gray-600 text-[23px]'> <h2>{`วันที่: ${el.createdAt.slice( 8, 10 )}${el.createdAt.slice(4, 7)}-${el.createdAt.slice( 0, 4 )}`}</h2> </div> <div className='flex justify-center text-gray-600 text-[23px]'> <h2>{`นามลูกค้า: ${el.User?.name || '-'}`}</h2> </div> <div className='flex justify-between'> <div> <div className=' text-gray-600 text-[23px] gap-4 flex flex-col justify-between'> <h2>{`นามผู้รับของ: ${el.recipientName}`}</h2> </div> <p className='text-[23px] text-gray-600'>{`เบอร์โทรหน้างาน: ${el.recipientPhoneNumber}`}</p> <p className='text-[23px] text-gray-600'>{`ที่อยู่จัดส่ง: ${el.deliveryAddress}`}</p> </div> <div> <p className='text-[23px] text-gray-600'>{`ประเภทการชำระเงิน: ${ el?.paymentType === 'cash_on_delivery' ? 'เงินสดปลายทาง' : el?.paymentType === 'in_store_cash' ? 'เงินสดหน้าร้าน' : el?.paymentType === 'transfer' ? 'โอน' : el?.paymentType === 'cheque' ? 'เช็ค' : '-' }`}</p> <p className='text-[23px] text-gray-600'>{`น้ำหนักรวม: ${ el?.netWeight || '-' } kg`}</p> </div> </div> </div> </div> <br /> <div> {transactions.length > 0 ? ( transactions.map((el, index) => { return ( <> <div className='flex justify-between gap-1' key={el}> <div className='w-[280px] h-[67px] items-center flex gap-2 p-2 border-2 rounded-lg border-orange-400 bg-orange-100'> <div className='flex justify-center '> <p htmlFor='bankName' className=' text-xl text-gray-600 ' > ชื่อธนาคาร : </p> </div> <p className='text-xl text-gray-600'> {el?.bankName} </p> </div> <br /> <div className='items-center w-[261px] h-[67px] flex gap-2 p-2 border-2 rounded-lg border-orange-400 bg-orange-100'> <div className='flex justify-center '> <p htmlFor='bankAccountName' className=' text-xl text-gray-600 ' > ชื่อบัญชี : </p> </div> <p className='text-xl text-gray-600'> {el?.bankAccountName} </p> </div> <div className='items-center w-[302px] h-[67px] flex gap-2 p-2 border-2 rounded-lg border-orange-400 bg-orange-100'> <div className='text-xl text-gray-600'> วันที่ชำระเงิน : </div> <p className='text-xl text-gray-600'> {el?.paymentDate} </p> </div> <div className='items-center w-[268px] h-[67px] flex gap-2 p-2 border-2 rounded-lg border-orange-400 bg-orange-100'> <div className='flex justify-center '> <div className=' text-xl text-gray-600'> ยอดชำระ : </div> </div> <p className='text-xl text-gray-600'> {el?.amount} </p> </div> </div> <div className='border-t-2 border-white'></div> </> ); }) ) : ( <></> )} </div> <div> <div className='text-[23px] flex flex-col items-center'> <div className='flex gap-8 '> <div className='flex gap-2'> <h1 className='text-gray-600'>สถานะการชำระเงิน : </h1> <h1 className='text-orange-400'>{el.paymentStatus}</h1> </div> <div className='flex gap-2'> <h1 className='text-gray-600'>สถานะการจัดส่งสินค้า : </h1> <h1 className='text-orange-400'>{el.deliveryStatus}</h1> </div> </div> </div> <br /> <div className='flex justify-center '> <StatusButton status={el.deliveryStatus} option={'กำลังดำเนินการ'} /> {/* <img src={line} alt='line' className='w-[180px] h-[70px]' /> */} <div className=''>{'--->'}</div> <StatusButton status={el.deliveryStatus} option={'พร้อมส่ง'} /> <div className=''>{'--->'}</div> <StatusButton status={el.deliveryStatus} option={'กำลังส่ง'} /> <div className=''>{'--->'}</div> <StatusButton status={el.deliveryStatus} option={'ส่งเสร็จสิ้น'} /> </div> </div> <br /> <div className=' rounded-lg border-2'> <div className=''> <table className='w-full bg-gradient-to-t from-yellow-500 to-yellow-300 text-gray-600'> <tr className='text-[23px] h-[10px]'> <th className='p-3'>ลำดับ</th> <th className='p-3'>รายการ</th> <th className='p-3'>จำนวน</th> <th className='p-3'>ราคา/หน่วย</th> <th className='p-3 flex justify-end'>รวม/บาท</th> </tr> {el?.SaleOrderProducts.map((elIn, index) => { console.log(elIn); i++; return ( <tr className='text-[23px] text-gray-600 text-center bg-white border-b-2' key={elIn.id} > <td className=''>{i}</td> <td className='text-left w-[430px]'> {elIn?.Product?.name} </td> <td className=''>{elIn?.amount}</td> <td className=''> <div className='flex justify-end '> {elIn?.unitPrice} </div> </td> <td className='flex justify-end'> {(elIn?.amount * elIn?.unitPrice).toFixed(2)} </td> </tr> ); })} </table> </div> <br /> <div className='container text-[23px] flex flex-col items-end h-[112px] text-gray-600'> <div className='flex gap-20'> <p>ยอดรวมสุทธิ</p> <div className='flex justify-end w-[102px] '> {(+el?.netPrice - +el?.deliveryFee).toFixed(2)} </div> </div> <div className='flex gap-20'> <p>ค่าขนส่ง</p> <div className='flex justify-end w-[102px] '> {el?.deliveryFee} </div> </div> <div className='flex gap-20'> <p>รวม</p> <div className='flex justify-end w-[102px] '> {el?.netPrice} </div> </div> </div> </div> <br /> <div className='flex justify-between text-[23px] text-gray-600 border-2 rounded-lg '> <p className=''>{`ผู้รับของ: `}</p> <div className='w-[300px] flex justify-start'> <p className=''>{`ผู้ส่งของ:`}</p> </div> </div> <br /> </div> <br /> <div className='flex justify-center'> <button className='w-[200px] h-[60px] btn btn-secondary text-white text-lg gap-2 font-bold hover:scale-105' onClick={() => { handlePrint(); // printComponent(componentRefs[index]); // handlePrint(componentRefs[index]); }} > <FiPrinter size={28} /> <p>พิมพ์ใบส่งของ</p> </button> </div> <br /> </div> ); })} </div> ); } export default OrderPage;