GHHub/src/views/trainticket/plan.jsx

import { useState, useEffect } from "react";
import { Checkbox, Divider, DatePicker, Modal, Form, Input, Col, Row, Space, Collapse, Table, Button, Select, App, Popconfirm, Switch, Radio, List } from "antd";
import { PhoneOutlined, FrownTwoTone, LikeTwoTone, ArrowUpOutlined, ArrowDownOutlined, PlusOutlined } from "@ant-design/icons";
import { useParams, useHref, useNavigate, NavLink } from "react-router-dom";
import { isEmpty, formatColonTime } from "@/utils/commons";
import { OFFICEWEBVIEWERURL } from "@/config";
import dayjs from "dayjs";
import airTicketStore from "@/stores/Airticket";
import { usingStorage } from "@/hooks/usingStorage";
import BackBtn from "@/components/BackBtn";

const AirticketPlan = props => {
	const { coli_sn, gri_sn } = useParams();
	const { travelAgencyId, loginToken, userId } = usingStorage();
	const [
		getPlanDetail,
		planDetail,
		getGuestList,
		guestList,
		loading,
		postFlightDetail,
		postFlightCost,
		deleteFlightCost,
		getVeiPlanChange,
		veiPlanChangeTxt,
		postVeiFlightPlanConfirm,
		ticketIssuedNotifications,
		delete_flight_info,
		getAirPortList,
		airPortList,
		airLineList,
	] = airTicketStore(state => [
		state.getPlanDetail,
		state.planDetail,
		state.getGuestList,
		state.guestList,
		state.loading,
		state.postFlightDetail,
		state.postFlightCost,
		state.deleteFlightCost,
		state.getVeiPlanChange,
		state.veiPlanChangeTxt,
		state.postVeiFlightPlanConfirm,
		state.ticketIssuedNotifications,
		state.delete_flight_info,
		state.getAirPortList,
		state.airPortList,
		state.airLineList,
	]);
	const reservationUrl = `https://p9axztuwd7x8a7.mycht.cn/Service_BaseInfoWeb/FlightPlanDocx?GRI_SN=${gri_sn}&VEI_SN=${travelAgencyId}&token=${loginToken}`;
	const reservationPreviewUrl = OFFICEWEBVIEWERURL + encodeURIComponent(reservationUrl);
	const [form] = Form.useForm();
	const { notification } = App.useApp();
	//console.log(reservationPreviewUrl);

	//乘客下拉列表
	const guestList_select = () => {
		return (
			guestList &&
			guestList.map(item => {
				return { label: `${item.MEI_Name} , ${item.MEI_PassportNo}`, value: `${item.MEI_Name} , ${item.MEI_PassportNo}  , ${item.MEI_Country} , ${item.MEI_Gender} , ${item.MEI_age} , ${item.MEI_Birthday}` };
			})
		);
	};

	const guestList_OnChange = e => {
		ticket_form.setFieldsValue({ Memo: `${e.target.value}` });
	};
	//机场下拉列表
	const airPortList_select = () => {
		return (
			airPortList &&
			airPortList.map(item => {
				return { label: `${item.AirPort_Code} - ${item.AirPort_Name}`, value: item.AirPort_Name };
			})
		);
	};

	//费用列表
	const costListColumns = [
		{
			title: "客人信息/备注",
			key: "Memo",
			dataIndex: "Memo",
		},
		{
			title: "状态",
			key: "CostType",
			dataIndex: "CostType",
		},
		{
			title: "票号",
			key: "TicketNo",
			dataIndex: "TicketNo",
			render: (text, record) => (record.CostType == "出票" ? text : "-"),
		},
		{
			title: "PNR",
			key: "PNR",
			dataIndex: "PNR",
			render: (text, record) => (record.CostType == "出票" ? text : "-"),
		},

		{
			title: "机票类型",
			key: "FlightType",
			dataIndex: "FlightType",
			render: (text, record) => (record.CostType == "出票" ? text : "-"),
		},
		{
			title: "机票价格",
			key: "Cost",
			dataIndex: "Cost",
			render: (text, record) => (record.CostType == "出票" ? text : "-"),
		},
		{
			title: "服务费",
			key: "ServiceFee",
			dataIndex: "ServiceFee",
		},
		{
			title: "折扣",
			key: "Discount",
			dataIndex: "Discount",
			render: (text, record) => (record.CostType == "出票" ? text : "-"),
		},

		{
			title: "编辑",
			key: "CLC_SN",
			dataIndex: "CLC_SN",
			render: (text, record) =>
				record.CheckStatus <= 2 ? (
					<Space>
						<a onClick={() => showModal(record)}>编辑</a>
						<Popconfirm title="删除" description="请确认是否删除?" onConfirm={() => handleDelete(record.CLC_SN)} okText="是" cancelText="否">
							<Button danger type="link">
								删除
							</Button>
						</Popconfirm>
					</Space>
				) : (
					record.CheckStatusName
				),
		},
	];

	const Airticket_form = props => {
		const airInfo = props.airInfo;
		const [airinfo_form] = Form.useForm();
		return (
			<>
				<Form
					form={airinfo_form}
					name={"ticket_form_" + airInfo.id}
					labelCol={{
						span: 6,
					}}
					wrapperCol={{
						span: 16,
					}}
					initialValues={{ ...airInfo, StartDate: dayjs(airInfo.StartDate) }}
					onFinish={values => {
						postFlightDetail(airInfo.CLF_SN, airInfo.GRI_SN, airInfo.VEI_SN, airInfo, values)
							.then(() => {
								notification.success({
									message: `成功`,
									description: "机票信息保存成功!",
									placement: "top",
									duration: 4,
									icon: <LikeTwoTone />,
								});
							})
							.catch(() => {
								notification.error({
									message: `错误`,
									description: "保存失败",
									placement: "top",
									duration: 4,
									icon: <FrownTwoTone />,
								});
							});
					}}
					autoComplete="off">
					<Divider orientation="left">航班信息</Divider>
					<Row gutter={16}>
						<Col md={24} lg={20} xxl={20}>
							<Form.Item label="出发日期、航班、城市、时间" required>
								<Space>
									<Form.Item name="StartDate" noStyle rules={[{ required: true, message: "请输入出发日期!" }]}>
										<DatePicker
											style={{
												minWidth: 160,
											}}
										/>
									</Form.Item>
									<Form.Item name="FlightNo" noStyle rules={[{ required: true, message: "请输入航班号!" }]}>
										<Input placeholder="航班号" />
									</Form.Item>
									<Form.Item name="FromCity" noStyle rules={[{ required: true, message: "请输入出发城市!" }]}>
										<Input placeholder="出发" />
									</Form.Item>
									<Form.Item name="FlightStart" noStyle rules={[{ required: true, message: "请输入出发时间!" }]}>
										<Input placeholder="出发时间" />
									</Form.Item>
									-
									<Form.Item name="ToCity" noStyle rules={[{ required: true, message: "请输入抵达城市!" }]}>
										<Input placeholder="抵达" />
									</Form.Item>
									<Form.Item name="FlightEnd" noStyle rules={[{ required: true, message: "请输入抵达时间!" }]}>
										<Input placeholder="抵达时间" />
									</Form.Item>
								</Space>
							</Form.Item>
							<Form.Item label="机场、航站楼、仓位、行李重量" required>
								<Space>
									<Form.Item name="FromAirport" noStyle rules={[{ required: true, message: "请输入出发机场!" }]}>
										<Select
											showSearch
											placeholder="出发机场"
											style={{
												minWidth: 160,
											}}
											filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
											options={airPortList_select()}
										/>
									</Form.Item>
									<Form.Item name="FromTerminal" noStyle rules={[{ required: true, message: "请输入出发航站楼!" }]}>
										<Input placeholder="航站楼" />
									</Form.Item>
									-
									<Form.Item name="ToAirport" noStyle rules={[{ required: true, message: "请输入抵达机场!" }]}>
										<Select
											showSearch
											placeholder="抵达机场"
											style={{
												minWidth: 160,
											}}
											filterOption={(input, option) => (option?.label ?? "").toLowerCase().includes(input.toLowerCase())}
											options={airPortList_select()}
										/>
									</Form.Item>
									<Form.Item name="ToTerminal" noStyle rules={[{ required: true, message: "请输入抵达航站楼!" }]}>
										<Input placeholder="航站楼" />
									</Form.Item>
									<Form.Item name="FlightCabin" noStyle rules={[{ required: true, message: "请输入仓位!" }]}>
										<Input placeholder="仓位" />
									</Form.Item>
									<Form.Item name="Baggage" noStyle>
										<Input placeholder="行李说明 20KG" />
									</Form.Item>
								</Space>
							</Form.Item>
						</Col>
						<Col md={24} lg={4} xxl={4}>
							<Space direction="vertical">
								<Form.Item name="TicketIssued">
									<Switch checkedChildren="已处理" unCheckedChildren="未处理" />
								</Form.Item>
								<Button type="primary" htmlType="submit">
									1. 保存机票信息
								</Button>
							</Space>
						</Col>
					</Row>

					<Divider orientation="left">出票信息</Divider>
					<Row gutter={16}>
						<Col md={24} lg={20} xxl={20}>
							<Table bordered={true} rowKey="CLC_SN" columns={costListColumns} dataSource={airInfo.Flightcost_AsJOSN} loading={loading} pagination={false} />
						</Col>
						<Col md={24} lg={4} xxl={4}>
							<Space direction="vertical">
								<Button type="primary" onClick={() => showModal(airInfo)}>
									2. 添加出票信息
								</Button>
							</Space>
						</Col>
					</Row>
					<Divider orientation="left"></Divider>
					<Row gutter={16}>
						<Col md={24} lg={20} xxl={20}>
							<Form.Item label="提醒信息" name="FlightMemo_messages">
								<Input placeholder="没有提醒请留空,信息会抄送给上下站地接" />
							</Form.Item>
							<Form.Item label="已发提醒" name="FlightMemo">
								<Input.TextArea rows={4} readOnly disabled  />
							</Form.Item>
						</Col>
						<Col md={24} lg={4} xxl={4}>
							<Button
								type="primary"
								onClick={() => {
									ticketIssuedNotifications(userId,airInfo.CLF_SN, airInfo.OPI_SN,airinfo_form.getFieldValue('FlightMemo_messages'))
										.then(() => {
											notification.success({
												message: `成功`,
												description: "提醒信息已发出!",
												placement: "top",
												duration: 4,
												icon: <LikeTwoTone />,
											});
											airinfo_form.setFieldValue('FlightMemo_messages','')
										})
										.catch(() => {
											notification.error({
												message: `错误`,
												description: "提醒失败",
												placement: "top",
												duration: 4,
												icon: <FrownTwoTone />,
											});
										});
								}}>
								3. 通知顾问
							</Button>
						</Col>
					</Row>
				</Form>
			</>
		);
	};

	const detail_items = () => {
		return planDetail
			? planDetail.map(item => {
					return {
						key: item.id,
						label: `${item.StartDate} ${item.FlightNo}(${item.FromAirport}${item.FlightStart}-${item.ToAirport}${item.FlightEnd})(${item.FlightCabin})`,
						extra: (
							<Popconfirm
								title="请确认要删除航班记录"
								description=""
								onConfirm={() => {
									delete_flight_info(item.CLF_SN); //删除记录
									getPlanDetail(travelAgencyId, gri_sn); //更新页面计划详情，含费用列表
								}}
								okText="是"
								cancelText="否">
								<Button type="dashed" size="small" disabled={item.Flightcost_AsJOSN.length == 0 ? false : true}>
									删除
								</Button>
							</Popconfirm>
						),
						children: <Airticket_form airInfo={item} />,
					};
			  })
			: [];
	};

	// 机票信息编辑表单 begin

	const [isModalOpen, setIsModalOpen] = useState(false);
	const [isModalOpen_confirmInfo, setisModalOpen_confirmInfo] = useState(false);
	const [isTicketType, setisTicketType] = useState(true);
	const [isAddNew, setisAddNew] = useState(true); //是否是在新增费用信息
	const [ticket_form] = Form.useForm();
	const [confirmInfo_form] = Form.useForm();

	const showModal = ticket => {
		setIsModalOpen(true);
		ticket_form.resetFields();
		if (isEmpty(ticket.CostType)) ticket.CostType = "出票";
		ticket.CostType == "出票" ? setisTicketType(true) : setisTicketType(false); //如果是出票类型，显示票号、折扣等选项
		isEmpty(ticket.CLC_SN) ? setisAddNew(true) : setisAddNew(false); //如果是新增窗口
		ticket_form.setFieldsValue(ticket);
		if (isEmpty(ticket.Memo)) ticket_form.setFieldsValue({ Memo: "" });
	};

	const handleOk = (close_modal = true) => {
		ticket_form
			.validateFields()
			.then(values => {
				// 在这里处理表单提交逻辑，例如发送数据到服务器
				console.log("Received values of form: ", values);
				postFlightCost(values)
					.then(() => {
						notification.success({
							message: `成功`,
							description: "保存成功!",
							placement: "top",
							duration: 4,
							icon: <LikeTwoTone />,
						});
						getPlanDetail(travelAgencyId, gri_sn);
					})
					.catch(() => {
						notification.error({
							message: `错误`,
							description: "保存失败",
							placement: "top",
							duration: 4,
							icon: <FrownTwoTone />,
						});
					});
				if (close_modal) setIsModalOpen(false);
			})
			.catch(info => {
				console.log("Validate Failed:", info);
			});
	};

	const handleCancel = () => {
		ticket_form.resetFields();
		setIsModalOpen(false);
	};

	const handleDelete = CLC_SN => {
		deleteFlightCost(CLC_SN)
			.then(() => {
				notification.success({
					message: `成功`,
					description: "删除成功!",
					placement: "top",
					duration: 4,
					icon: <LikeTwoTone />,
				});
				getPlanDetail(travelAgencyId, gri_sn);
			})
			.catch(() => {
				notification.error({
					message: `错误`,
					description: "删除失败",
					placement: "top",
					duration: 4,
					icon: <FrownTwoTone />,
				});
			});
	};

	const onChangeType = value => {
		if (value == "出票") {
			setisTicketType(true);
		} else {
			setisTicketType(false);
		}
	};

	//变更确认表单
	const showModal_confirmInfo = ConfirmInfo => {
		setisModalOpen_confirmInfo(true);
		confirmInfo_form.setFieldsValue({ ConfirmInfo: ConfirmInfo });
	};
	const handleCancel_confirmInfo = () => {
		setisModalOpen_confirmInfo(false);
		confirmInfo_form.resetFields();
	};

	const handleOk_confirmInfo = () => {
		confirmInfo_form
			.validateFields()
			.then(values => {
				console.log("Received values of form: ", values.ConfirmInfo);
				postVeiFlightPlanConfirm(travelAgencyId, gri_sn, userId, values.ConfirmInfo)
					.then(() => {
						notification.success({
							message: `成功`,
							description: "保存成功!",
							placement: "top",
							duration: 4,
							icon: <LikeTwoTone />,
						});
						getVeiPlanChange(travelAgencyId, gri_sn);
					})
					.catch(() => {
						notification.error({
							message: `错误`,
							description: "保存失败",
							placement: "top",
							duration: 4,
							icon: <FrownTwoTone />,
						});
					});
				confirmInfo_form.resetFields();
				setisModalOpen_confirmInfo(false);
			})
			.catch(info => {
				console.log("Validate Failed:", info);
			});
	};

	// 机票信息编辑表单 end

	useEffect(() => {
		getPlanDetail(travelAgencyId, gri_sn); //计划详情，含费用列表
		getGuestList(coli_sn); //客人列表
		getVeiPlanChange(travelAgencyId, gri_sn); //计划变更信息
		getAirPortList(); //获取机场信息
	}, []);

	return (
		<Space direction="vertical" style={{ width: "100%" }}>
			<Row>
				<Col md={20} lg={20} xxl={20}></Col>
				<Col md={4} lg={4} xxl={4}>
					<BackBtn to={"/airticket"} />
				</Col>
			</Row>

			<Row>
				<Col md={24} lg={24} xxl={24} style={{ height: "100%" }}>
					<iframe id="msdoc-iframe-reservation" title="msdoc-iframe-reservation" src={reservationPreviewUrl + "&v=" + Math.random()} style={{ width: "100%", height: "600px" }}></iframe>
					<Button type="link" target="_blank" href={reservationUrl}>
						下载
					</Button>
				</Col>
			</Row>

			<Row>
				<Divider orientation="center">{planDetail ? `${planDetail[0].GRI_No} - ${planDetail[0].WL}` : ""}</Divider>
				<Col md={24} lg={24} xxl={24}>
					<Collapse items={detail_items()} />
				</Col>

				<Col md={24} lg={24} xxl={24}>
					<br />
					<p style={{ textAlign: "right" }}>
						<Popconfirm
							title="请确认要增加航班记录"
							description=""
							onConfirm={() => {
								postFlightDetail("", gri_sn, travelAgencyId, { FlightNo: "新的记录", FlightStatus: 1 }, []); //新增加一条记录
								getPlanDetail(travelAgencyId, gri_sn); //计划详情，含费用列表
							}}
							okText="是"
							cancelText="否">
							<Button type="dashed" icon={<PlusOutlined />}>
								新增航班记录
							</Button>
						</Popconfirm>
					</p>
				</Col>
			</Row>
			<Row>
				<Divider orientation="left">计划变更</Divider>
				<Col md={24} lg={12} xxl={12}>
					<Space direction="vertical" style={{ width: "90%" }}>
						<Input.TextArea rows={16} readOnly value={veiPlanChangeTxt && veiPlanChangeTxt.ChangeText} />
						<Button
							type="primary"
							onClick={() => {
								showModal_confirmInfo(veiPlanChangeTxt && veiPlanChangeTxt.ChangeText);
							}}
							disabled={isEmpty(veiPlanChangeTxt) || isEmpty(veiPlanChangeTxt.ChangeText)}>
							确认变更
						</Button>
					</Space>
				</Col>
				<Col md={24} lg={12} xxl={12}>
					<Input.TextArea rows={16} readOnly value={veiPlanChangeTxt && veiPlanChangeTxt.ConfirmInfo} />
				</Col>
			</Row>

			<Modal title="变更" open={isModalOpen_confirmInfo} onOk={handleOk_confirmInfo} onCancel={handleCancel_confirmInfo}>
				<Form
					form={confirmInfo_form}
					labelCol={{
						span: 5,
					}}>
					<Form.Item label="确认信息" name="ConfirmInfo" rules={[{ required: true }]}>
						<Input.TextArea rows={4} />
					</Form.Item>
				</Form>
			</Modal>

			<Modal
				title="费用信息"
				open={isModalOpen}
				onOk={handleOk}
				onCancel={handleCancel}
				okText="保存"
				cancelText="关闭"
				footer={(_, { OkBtn, CancelBtn }) => (
					<>
						<CancelBtn />
						{isAddNew ? (
							<>
								<Button type="primary" onClick={() => handleOk(false)}>
									添加并继续新增
								</Button>{" "}
								<Button type="primary" onClick={() => handleOk(true)}>
									添加并关闭
								</Button>
							</>
						) : (
							<OkBtn />
						)}
					</>
				)}>
				<Form
					form={ticket_form}
					labelCol={{
						span: 5,
					}}>
					<Form.Item label="状态" name="CostType">
						<Select
							style={{
								width: 160,
							}}
							onChange={onChangeType}
							options={[
								{
									value: "出票",
									label: "出票",
								},
								{
									value: "改签",
									label: "改签",
								},
								{
									value: "退票",
									label: "退票",
								},
							]}
						/>
					</Form.Item>

					{isTicketType && (
						<>
							<Form.Item label="PNR" name="PNR" rules={[{ required: true }]}>
								<Input />
							</Form.Item>
							<Form.Item label="票号" name="TicketNo" rules={[{ required: true }]}>
								<Input
									style={{
										width: 160,
									}}
								/>
							</Form.Item>
							<Form.Item label="机票类型" name="FlightType" rules={[{ required: true }]}>
								<Select
									style={{
										width: 160,
									}}
									options={[
										{
											value: "成人",
											label: "成人",
										},
										{
											value: "儿童",
											label: "儿童",
										},
										{
											value: "婴儿",
											label: "婴儿",
										},
									]}
								/>
							</Form.Item>
							<Form.Item label="机票价格" name="Cost" rules={[{ required: true }]}>
								<Input
									placeholder="含基建和税"
									prefix="￥"
									style={{
										width: 160,
									}}
								/>
							</Form.Item>
						</>
					)}
					<Form.Item label="服务费" name="ServiceFee" rules={[{ required: true }]}>
						<Input
							prefix="￥"
							style={{
								width: 160,
							}}
						/>
					</Form.Item>
					{isTicketType && (
						<>
							<Form.Item label="折扣" name="Discount" rules={[{ required: true }]}>
								<Input
									style={{
										width: 160,
									}}
									placeholder="如 0.9"
								/>
							</Form.Item>
							<Form.Item label="选择客人" name="MEI_Name66">
								<Radio.Group
									onChange={e => guestList_OnChange(e)}
									style={{
										minWidth: 320,
									}}>
									<List
										bordered
										dataSource={guestList_select()}
										renderItem={item => (
											<List.Item>
												<Radio value={item.value}>{item.label}</Radio>
											</List.Item>
										)}></List>
								</Radio.Group>
								{/* <Select onChange={value => guestList_OnChange(value)} options={guestList_select()} placeholder="如果列表里面没有客人信息，请手动录到备注里" /> */}
							</Form.Item>
						</>
					)}

					<Form.Item label="客人信息/备注" name="Memo">
						<Input.TextArea rows={4} disabled={isTicketType} />
					</Form.Item>

					<Form.Item name="CLF_SN" hidden>
						<input />
					</Form.Item>
					<Form.Item name="GRI_SN" hidden>
						<input />
					</Form.Item>
					<Form.Item name="VEI_SN" hidden>
						<input />
					</Form.Item>
					<Form.Item name="CLC_SN" hidden>
						<input />
					</Form.Item>
				</Form>
			</Modal>
		</Space>
	);
};

export default AirticketPlan;