307 lines
10 KiB
TypeScript
307 lines
10 KiB
TypeScript
// EditTrip Component - Edit trip information
|
|
import { apiUpdateTrip } from '@/services/slave/sgw/TripController';
|
|
import {
|
|
ModalForm,
|
|
ProCard,
|
|
ProForm,
|
|
ProFormDatePicker,
|
|
ProFormDependency,
|
|
ProFormList,
|
|
ProFormSelect,
|
|
ProFormText,
|
|
} from '@ant-design/pro-components';
|
|
import { useModel } from '@umijs/max';
|
|
import { Form, message, Typography } from 'antd';
|
|
import dayjs from 'dayjs';
|
|
import timezone from 'dayjs/plugin/timezone';
|
|
import utc from 'dayjs/plugin/utc';
|
|
import { useEffect } from 'react';
|
|
|
|
dayjs.extend(utc);
|
|
dayjs.extend(timezone);
|
|
|
|
interface EditTripProps {
|
|
id: string;
|
|
ship_id?: string;
|
|
record?: SgwModel.Trip;
|
|
open: boolean;
|
|
onOpenChange: (open: boolean) => void;
|
|
onSuccess?: () => void;
|
|
}
|
|
|
|
const EditTrip: React.FC<EditTripProps> = ({
|
|
id,
|
|
ship_id,
|
|
record,
|
|
open,
|
|
onOpenChange,
|
|
onSuccess,
|
|
}) => {
|
|
const [form] = Form.useForm();
|
|
const { homeports, getHomeportsByProvinceCode } = useModel(
|
|
'slave.sgw.useHomePorts',
|
|
);
|
|
|
|
useEffect(() => {
|
|
getHomeportsByProvinceCode();
|
|
}, [getHomeportsByProvinceCode]);
|
|
|
|
console.log('record', record);
|
|
|
|
useEffect(() => {
|
|
if (record && open) {
|
|
form.setFieldsValue({
|
|
...record,
|
|
ship_id,
|
|
departure_port_id: record.departure_port_id,
|
|
arrival_port_id: record.arrival_port_id,
|
|
});
|
|
}
|
|
}, [record, open, ship_id, form]);
|
|
|
|
return (
|
|
<ModalForm
|
|
title="Chỉnh sửa chuyến đi"
|
|
form={form}
|
|
open={open}
|
|
onOpenChange={onOpenChange}
|
|
modalProps={{
|
|
destroyOnClose: true,
|
|
width: 1500,
|
|
}}
|
|
onFinish={async (values) => {
|
|
try {
|
|
if (!values.departure_port_id) {
|
|
message.error('Vui lòng chọn cảng khởi hành!');
|
|
return false;
|
|
}
|
|
if (!values.arrival_port_id) {
|
|
message.error('Vui lòng chọn cảng cập bến!');
|
|
return false;
|
|
}
|
|
console.log('Form values on submit:', values);
|
|
const params = {
|
|
name: values.name,
|
|
departure_time: dayjs(values.departure_time).utc().format(),
|
|
departure_port_id: values.departure_port_id,
|
|
arrival_time: dayjs(values.arrival_time).utc().format(),
|
|
arrival_port_id: values.arrival_port_id,
|
|
fishing_ground_codes: Array.isArray(values.fishing_ground_codes)
|
|
? values.fishing_ground_codes
|
|
.map((code: string | number) => Number(code))
|
|
.filter((n: number) => !isNaN(n))
|
|
: [],
|
|
fishing_gears: values.fishing_gears,
|
|
trip_cost: values.trip_cost,
|
|
};
|
|
await apiUpdateTrip(id, params);
|
|
message.success('Cập nhật chuyến đi thành công');
|
|
onSuccess?.();
|
|
return true;
|
|
} catch (e) {
|
|
console.error(e);
|
|
message.error('Cập nhật thất bại');
|
|
return false;
|
|
}
|
|
}}
|
|
layout="horizontal"
|
|
>
|
|
<ProCard split="vertical">
|
|
{/* Bên trái: Ngư cụ + chi phí */}
|
|
<ProCard colSpan="50%">
|
|
{/* Danh sách ngư cụ */}
|
|
<ProForm.Group title="Danh sách ngư cụ">
|
|
<ProFormList
|
|
name="fishing_gears"
|
|
creatorButtonProps={{ creatorButtonText: 'Thêm ngư cụ' }}
|
|
copyIconProps={{ tooltipText: 'Sao chép' }}
|
|
deleteIconProps={{ tooltipText: 'Xóa' }}
|
|
>
|
|
<ProFormDependency name={['name', 'number']}>
|
|
{() => (
|
|
<div style={{ marginBottom: 16 }}>
|
|
<div style={{ display: 'flex', marginBottom: 4 }}>
|
|
<Typography.Text
|
|
strong
|
|
style={{ width: 200, marginRight: 8 }}
|
|
>
|
|
Tên
|
|
</Typography.Text>
|
|
<Typography.Text strong style={{ width: 200 }}>
|
|
Số lượng
|
|
</Typography.Text>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<ProFormText
|
|
name="name"
|
|
fieldProps={{
|
|
style: { width: 200, marginRight: 8 },
|
|
placeholder: 'Tên',
|
|
}}
|
|
rules={[{ required: true }]}
|
|
/>
|
|
<ProFormText
|
|
name="number"
|
|
fieldProps={{
|
|
style: { width: 200 },
|
|
placeholder: 'Số lượng',
|
|
}}
|
|
rules={[{ required: true }]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</ProFormDependency>
|
|
</ProFormList>
|
|
</ProForm.Group>
|
|
|
|
{/* Danh sách chi phí */}
|
|
<ProForm.Group title="Chi phí nguyên liệu">
|
|
<ProFormList
|
|
name="trip_cost"
|
|
creatorButtonProps={{ creatorButtonText: 'Thêm nguyên liệu' }}
|
|
copyIconProps={{ tooltipText: 'Sao chép' }}
|
|
deleteIconProps={{ tooltipText: 'Xóa' }}
|
|
>
|
|
<ProFormDependency
|
|
name={['type', 'amount', 'unit', 'cost_per_unit', 'total_cost']}
|
|
>
|
|
{() => (
|
|
<div style={{ marginBottom: 16 }}>
|
|
<div style={{ display: 'flex', marginBottom: 4 }}>
|
|
<Typography.Text
|
|
strong
|
|
style={{ width: 120, marginRight: 8 }}
|
|
>
|
|
Loại
|
|
</Typography.Text>
|
|
<Typography.Text
|
|
strong
|
|
style={{ width: 100, marginRight: 8 }}
|
|
>
|
|
Số lượng
|
|
</Typography.Text>
|
|
<Typography.Text
|
|
strong
|
|
style={{ width: 100, marginRight: 8 }}
|
|
>
|
|
Đơn vị
|
|
</Typography.Text>
|
|
<Typography.Text
|
|
strong
|
|
style={{ width: 100, marginRight: 8 }}
|
|
>
|
|
Chi phí
|
|
</Typography.Text>
|
|
<Typography.Text strong style={{ width: 100 }}>
|
|
Tổng chi phí
|
|
</Typography.Text>
|
|
</div>
|
|
<div style={{ display: 'flex' }}>
|
|
<ProFormSelect
|
|
name="type"
|
|
placeholder="Chọn loại"
|
|
fieldProps={{ style: { width: 120, marginRight: 8 } }}
|
|
options={[
|
|
{ label: 'Nhiên liệu', value: 'fuel' },
|
|
{ label: 'Lương thuyền viên', value: 'crew_salary' },
|
|
{ label: 'Lương thực', value: 'food' },
|
|
{ label: 'Muối đá', value: 'salt_ice' },
|
|
]}
|
|
/>
|
|
<ProFormText
|
|
name="amount"
|
|
fieldProps={{ style: { width: 100, marginRight: 8 } }}
|
|
/>
|
|
<ProFormText
|
|
name="unit"
|
|
fieldProps={{ style: { width: 100, marginRight: 8 } }}
|
|
/>
|
|
<ProFormText
|
|
name="cost_per_unit"
|
|
fieldProps={{ style: { width: 100, marginRight: 8 } }}
|
|
/>
|
|
<ProFormText
|
|
name="total_cost"
|
|
fieldProps={{ style: { width: 100 } }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</ProFormDependency>
|
|
</ProFormList>
|
|
</ProForm.Group>
|
|
</ProCard>
|
|
|
|
{/* Bên phải: Thông tin chuyến đi */}
|
|
<ProCard colSpan="50%" bodyStyle={{ padding: '0 24px' }}>
|
|
<ProFormText
|
|
name="name"
|
|
label="Tên chuyến đi"
|
|
rules={[{ required: true }]}
|
|
/>
|
|
|
|
<ProForm.Group title="Thời gian chuyến đi">
|
|
<ProFormDatePicker
|
|
name="departure_time"
|
|
showTime
|
|
label="Bắt đầu"
|
|
rules={[{ required: true }]}
|
|
/>
|
|
<ProFormDatePicker
|
|
name="arrival_time"
|
|
showTime
|
|
label="Kết thúc"
|
|
rules={[{ required: true }]}
|
|
/>
|
|
</ProForm.Group>
|
|
|
|
<ProForm.Group title="Cảng">
|
|
<ProFormSelect
|
|
name="departure_port_id"
|
|
label="Cảng khởi hành"
|
|
width="md"
|
|
placeholder="Chọn cảng khởi hành"
|
|
options={
|
|
Array.isArray(homeports)
|
|
? homeports.map((p) => ({ label: p.name, value: p.id }))
|
|
: []
|
|
}
|
|
rules={[
|
|
{ required: true, message: 'Vui lòng chọn cảng khởi hành' },
|
|
]}
|
|
showSearch
|
|
/>
|
|
|
|
<ProFormSelect
|
|
name="arrival_port_id"
|
|
label="Cảng cập bến"
|
|
width="md"
|
|
placeholder="Chọn cảng cập bến"
|
|
options={
|
|
Array.isArray(homeports)
|
|
? homeports.map((p) => ({ label: p.name, value: p.id }))
|
|
: []
|
|
}
|
|
rules={[
|
|
{ required: true, message: 'Vui lòng chọn cảng cập bến' },
|
|
]}
|
|
showSearch
|
|
/>
|
|
</ProForm.Group>
|
|
|
|
<ProForm.Group title="Thông tin cơ bản">
|
|
<ProFormSelect
|
|
name="fishing_ground_codes"
|
|
label="Ô khai thác"
|
|
fieldProps={{ mode: 'tags', style: { width: '100%' } }}
|
|
/>
|
|
</ProForm.Group>
|
|
</ProCard>
|
|
</ProCard>
|
|
</ModalForm>
|
|
);
|
|
};
|
|
|
|
export default EditTrip;
|