167 lines
4.5 KiB
TypeScript
167 lines
4.5 KiB
TypeScript
import { ProCard } from '@ant-design/pro-components';
|
|
import { useModel } from '@umijs/max';
|
|
import { Flex, Grid } from 'antd';
|
|
import HaulTable from './HaulTable';
|
|
import TripCostTable from './TripCost';
|
|
import TripCrews from './TripCrews';
|
|
import TripFishingGearTable from './TripFishingGear';
|
|
// Props cho component
|
|
interface MainTripBodyProps {
|
|
trip_id?: string;
|
|
tripInfo: API.Trip | null;
|
|
onReload?: (isTrue: boolean) => void;
|
|
}
|
|
|
|
const MainTripBody: React.FC<MainTripBodyProps> = ({
|
|
trip_id,
|
|
tripInfo,
|
|
onReload,
|
|
}) => {
|
|
// console.log('MainTripBody received:');
|
|
// console.log("trip_id:", trip_id);
|
|
// console.log('tripInfo:', tripInfo);
|
|
const { useBreakpoint } = Grid;
|
|
const screens = useBreakpoint();
|
|
const { data, getApi } = useModel('getTrip');
|
|
const tripCosts = Array.isArray(tripInfo?.trip_cost)
|
|
? tripInfo.trip_cost
|
|
: [];
|
|
const fishingGears = Array.isArray(tripInfo?.fishing_gears)
|
|
? tripInfo.fishing_gears
|
|
: [];
|
|
|
|
const fishing_logs_columns = [
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>Tên</div>,
|
|
dataIndex: 'name',
|
|
valueType: 'select',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>Số lượng</div>,
|
|
dataIndex: 'number',
|
|
align: 'center',
|
|
},
|
|
];
|
|
|
|
const tranship_columns = [
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>Tên</div>,
|
|
dataIndex: 'name',
|
|
valueType: 'select',
|
|
align: 'center',
|
|
},
|
|
{
|
|
title: <div style={{ textAlign: 'center' }}>Chức vụ</div>,
|
|
dataIndex: 'role',
|
|
align: 'center',
|
|
},
|
|
];
|
|
|
|
return (
|
|
<Flex gap={10}>
|
|
<ProCard
|
|
ghost
|
|
gutter={{
|
|
xs: 8,
|
|
sm: 8,
|
|
md: 8,
|
|
lg: 8,
|
|
xl: 8,
|
|
xxl: 8,
|
|
}}
|
|
direction="column"
|
|
bodyStyle={{
|
|
padding: 0,
|
|
paddingInline: 0,
|
|
gap: 10,
|
|
backgroundColor: 'transparent',
|
|
}}
|
|
>
|
|
<ProCard
|
|
gutter={16} // tạo khoảng cách thay vì split (không có border)
|
|
direction={screens.lg ? 'row' : 'column'} // responsive: ngang/dọc
|
|
bodyStyle={{ padding: 0, gap: 10 }}
|
|
style={{ color: 'transparent' }}
|
|
>
|
|
<ProCard
|
|
colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
|
|
layout="center"
|
|
bordered
|
|
headStyle={{
|
|
textAlign: 'center',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
// borderBottom: '1px solid #f0f0f0',
|
|
}}
|
|
title="Chi phí chuyến đi"
|
|
style={{ minHeight: 300 }}
|
|
>
|
|
<TripCostTable tripCosts={tripCosts} />
|
|
</ProCard>
|
|
<ProCard
|
|
colSpan={{ xs: 24, sm: 24, lg: 12, xl: 12 }}
|
|
layout="center"
|
|
bordered
|
|
headStyle={{
|
|
textAlign: 'center',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
borderBottom: '1px solid #f0f0f0',
|
|
}}
|
|
title="Danh sách ngư cụ"
|
|
style={{ minHeight: 300 }}
|
|
>
|
|
<TripFishingGearTable fishingGears={fishingGears} />
|
|
</ProCard>
|
|
</ProCard>
|
|
<ProCard
|
|
style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
|
|
ghost={true}
|
|
colSpan={{ xs: 24, sm: 24 }}
|
|
layout="center"
|
|
bordered
|
|
headStyle={{
|
|
textAlign: 'center',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}
|
|
title="Danh sách thuyền viên"
|
|
>
|
|
<TripCrews crew={tripInfo?.crews} />
|
|
</ProCard>
|
|
<ProCard
|
|
style={{ paddingInlineEnd: 0, paddingBottom: 10 }}
|
|
ghost={true}
|
|
colSpan={{ xs: 24, sm: 24 }}
|
|
layout="center"
|
|
bordered
|
|
headStyle={{
|
|
textAlign: 'center',
|
|
display: 'flex',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
}}
|
|
title="Danh sách mẻ lưới"
|
|
>
|
|
<HaulTable
|
|
trip={tripInfo!}
|
|
hauls={tripInfo?.fishing_logs || []}
|
|
onReload={(isTrue) => {
|
|
if (isTrue) {
|
|
// onReload?.(true);
|
|
getApi();
|
|
}
|
|
}}
|
|
/>
|
|
</ProCard>
|
|
</ProCard>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default MainTripBody;
|