Untitled
unknown
plain_text
a year ago
14 kB
3
Indexable
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;