514 lines
18 KiB
TypeScript
514 lines
18 KiB
TypeScript
import { ScrollView, Text, View } from "@tarojs/components";
|
||
import { Button, Input, Popup, SafeArea } from "@nutui/nutui-react-taro";
|
||
import dayjs from "dayjs";
|
||
import { formatCurrency } from "@/utils/format";
|
||
import { useState } from "react";
|
||
|
||
export default function BasicInfoSection(props: {
|
||
purchaseOrderVO: BusinessAPI.PurchaseOrderVO;
|
||
onChange?: (purchaseOrderVO: BusinessAPI.PurchaseOrderVO) => void;
|
||
readOnly?: boolean;
|
||
}) {
|
||
const { purchaseOrderVO, onChange, readOnly } = props;
|
||
|
||
const { orderVehicle } = purchaseOrderVO;
|
||
|
||
// 弹窗可见状态
|
||
const [visiblePopup, setVisiblePopup] = useState({
|
||
basicInfo: false, // 基础信息弹窗
|
||
});
|
||
|
||
// 编辑值的状态（用于弹窗中的临时编辑）
|
||
const [editValues, setEditValues] = useState({
|
||
vehicleNo: orderVehicle?.vehicleNo || "",
|
||
origin: orderVehicle?.origin || "",
|
||
destination: orderVehicle?.destination || "",
|
||
deliveryTime: orderVehicle?.deliveryTime || "",
|
||
plate: orderVehicle?.plate || "",
|
||
phone: orderVehicle?.phone || "",
|
||
priceType: orderVehicle?.priceType || "MAIN_FREIGHT",
|
||
price: orderVehicle?.price || 0,
|
||
openStrawCurtain: orderVehicle?.openStrawCurtain || false,
|
||
strawCurtainPrice: orderVehicle?.strawCurtainPrice || 0,
|
||
});
|
||
|
||
// 打开基础信息弹窗
|
||
const openBasicInfoPopup = () => {
|
||
if (readOnly) return;
|
||
setEditValues({
|
||
vehicleNo: orderVehicle?.vehicleNo || "",
|
||
origin: orderVehicle?.origin || "",
|
||
destination: orderVehicle?.destination || "",
|
||
deliveryTime: orderVehicle?.deliveryTime || "",
|
||
plate: orderVehicle?.plate || "",
|
||
phone: orderVehicle?.phone || "",
|
||
priceType: orderVehicle?.priceType || "MAIN_FREIGHT",
|
||
price: orderVehicle?.price || 0,
|
||
openStrawCurtain: orderVehicle?.openStrawCurtain || false,
|
||
strawCurtainPrice: orderVehicle?.strawCurtainPrice || 0,
|
||
});
|
||
setVisiblePopup((prev) => ({ ...prev, basicInfo: true }));
|
||
};
|
||
|
||
// 保存基础信息
|
||
const saveBasicInfo = () => {
|
||
if (onChange) {
|
||
const updatedOrder = {
|
||
...purchaseOrderVO,
|
||
orderVehicle: {
|
||
...orderVehicle,
|
||
...editValues,
|
||
deliveryTime: editValues.deliveryTime,
|
||
price: Number(editValues.price),
|
||
strawCurtainPrice: Number(editValues.strawCurtainPrice),
|
||
},
|
||
};
|
||
onChange(updatedOrder);
|
||
}
|
||
setVisiblePopup((prev) => ({ ...prev, basicInfo: false }));
|
||
};
|
||
|
||
return (
|
||
<>
|
||
{/* 基础信息编辑弹窗 */}
|
||
<Popup
|
||
duration={150}
|
||
style={{
|
||
minHeight: "auto",
|
||
}}
|
||
visible={visiblePopup.basicInfo}
|
||
className={"flex flex-col"}
|
||
position="bottom"
|
||
title={"编辑基础信息"}
|
||
onClose={() =>
|
||
setVisiblePopup((prev) => ({ ...prev, basicInfo: false }))
|
||
}
|
||
onOverlayClick={() => {
|
||
setVisiblePopup((prev) => ({ ...prev, basicInfo: false }));
|
||
}}
|
||
lockScroll
|
||
>
|
||
<ScrollView scrollY className="h-96">
|
||
<View className={"flex flex-col gap-3 p-2.5"}>
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
本车次号
|
||
</View>
|
||
<View
|
||
className={
|
||
"border-neutral-base flex flex-row items-center rounded-md border border-solid"
|
||
}
|
||
>
|
||
<Input
|
||
className={"placeholder:text-neutral-dark"}
|
||
placeholder={"请输入本车次号"}
|
||
type={"text"}
|
||
value={editValues.vehicleNo}
|
||
onChange={(value) => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
vehicleNo: value,
|
||
}));
|
||
}}
|
||
/>
|
||
</View>
|
||
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
发货地
|
||
</View>
|
||
<View
|
||
className={
|
||
"border-neutral-base flex flex-row items-center rounded-md border border-solid"
|
||
}
|
||
>
|
||
<Input
|
||
className={"placeholder:text-neutral-dark"}
|
||
placeholder={"请输入发货地"}
|
||
type={"text"}
|
||
value={editValues.origin}
|
||
onChange={(value) => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
origin: value,
|
||
}));
|
||
}}
|
||
/>
|
||
</View>
|
||
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
收货地
|
||
</View>
|
||
<View
|
||
className={
|
||
"border-neutral-base flex flex-row items-center rounded-md border border-solid"
|
||
}
|
||
>
|
||
<Input
|
||
className={"placeholder:text-neutral-dark"}
|
||
placeholder={"请输入收货地"}
|
||
type={"text"}
|
||
value={editValues.destination}
|
||
onChange={(value) => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
destination: value,
|
||
}));
|
||
}}
|
||
/>
|
||
</View>
|
||
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
发货日期
|
||
</View>
|
||
<View
|
||
className={
|
||
"border-neutral-base flex flex-row items-center rounded-md border border-solid"
|
||
}
|
||
>
|
||
<Input
|
||
className={"placeholder:text-neutral-dark"}
|
||
placeholder={"请输入发货日期"}
|
||
type={"text"}
|
||
value={editValues.deliveryTime}
|
||
onChange={(value) => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
deliveryTime: value,
|
||
}));
|
||
}}
|
||
/>
|
||
</View>
|
||
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
车牌号
|
||
</View>
|
||
<View
|
||
className={
|
||
"border-neutral-base flex flex-row items-center rounded-md border border-solid"
|
||
}
|
||
>
|
||
<Input
|
||
className={"placeholder:text-neutral-dark"}
|
||
placeholder={"请输入车牌号"}
|
||
type={"text"}
|
||
value={editValues.plate}
|
||
onChange={(value) => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
plate: value,
|
||
}));
|
||
}}
|
||
/>
|
||
</View>
|
||
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
联系电话
|
||
</View>
|
||
<View
|
||
className={
|
||
"border-neutral-base flex flex-row items-center rounded-md border border-solid"
|
||
}
|
||
>
|
||
<Input
|
||
className={"placeholder:text-neutral-dark"}
|
||
placeholder={"请输入联系电话"}
|
||
type={"text"}
|
||
value={editValues.phone}
|
||
onChange={(value) => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
phone: value,
|
||
}));
|
||
}}
|
||
/>
|
||
</View>
|
||
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
运费类型
|
||
</View>
|
||
<View className="flex flex-row gap-4">
|
||
<View
|
||
className={`flex flex-1 flex-row items-center justify-center rounded-md py-2 ${
|
||
editValues.priceType === "MAIN_FREIGHT"
|
||
? "bg-blue-100 text-blue-600"
|
||
: "border border-gray-300"
|
||
}`}
|
||
onClick={() => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
priceType: "MAIN_FREIGHT",
|
||
}));
|
||
}}
|
||
>
|
||
主运费
|
||
</View>
|
||
<View
|
||
className={`flex flex-1 flex-row items-center justify-center rounded-md py-2 ${
|
||
editValues.priceType === "SHORT_TRANSPORT"
|
||
? "bg-blue-100 text-blue-600"
|
||
: "border border-gray-300"
|
||
}`}
|
||
onClick={() => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
priceType: "SHORT_TRANSPORT",
|
||
}));
|
||
}}
|
||
>
|
||
短驳费
|
||
</View>
|
||
</View>
|
||
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
运费（元）
|
||
</View>
|
||
<View
|
||
className={
|
||
"border-neutral-base flex flex-row items-center rounded-md border border-solid"
|
||
}
|
||
>
|
||
<Input
|
||
className={"placeholder:text-neutral-dark"}
|
||
placeholder={"请输入运费"}
|
||
type={"digit"}
|
||
value={editValues.price.toString()}
|
||
onChange={(value) => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
price: parseFloat(value) || 0,
|
||
}));
|
||
}}
|
||
/>
|
||
<View className="mr-2">元</View>
|
||
</View>
|
||
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
草帘费
|
||
</View>
|
||
<View className="flex flex-row gap-4">
|
||
<View
|
||
className={`flex flex-1 flex-row items-center justify-center rounded-md py-2 ${
|
||
editValues.openStrawCurtain
|
||
? "bg-blue-100 text-blue-600"
|
||
: "border border-gray-300"
|
||
}`}
|
||
onClick={() => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
openStrawCurtain: true,
|
||
}));
|
||
}}
|
||
>
|
||
开启
|
||
</View>
|
||
<View
|
||
className={`flex flex-1 flex-row items-center justify-center rounded-md py-2 ${
|
||
!editValues.openStrawCurtain
|
||
? "bg-blue-100 text-blue-600"
|
||
: "border border-gray-300"
|
||
}`}
|
||
onClick={() => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
openStrawCurtain: false,
|
||
}));
|
||
}}
|
||
>
|
||
关闭
|
||
</View>
|
||
</View>
|
||
|
||
{editValues.openStrawCurtain && (
|
||
<>
|
||
<View className={"text-neutral-darkest text-sm font-medium"}>
|
||
草帘费金额（元）
|
||
</View>
|
||
<View
|
||
className={
|
||
"border-neutral-base flex flex-row items-center rounded-md border border-solid"
|
||
}
|
||
>
|
||
<Input
|
||
className={"placeholder:text-neutral-dark"}
|
||
placeholder={"请输入草帘费金额"}
|
||
type={"digit"}
|
||
value={editValues.strawCurtainPrice.toString()}
|
||
onChange={(value) => {
|
||
setEditValues((prev) => ({
|
||
...prev,
|
||
strawCurtainPrice: parseFloat(value) || 0,
|
||
}));
|
||
}}
|
||
/>
|
||
<View className="mr-2">元</View>
|
||
</View>
|
||
</>
|
||
)}
|
||
</View>
|
||
</ScrollView>
|
||
<View className={"flex w-full flex-col bg-white"}>
|
||
<View className={"flex flex-row gap-2 p-3"}>
|
||
<View className={"flex-1"}>
|
||
<Button
|
||
size={"large"}
|
||
block
|
||
type="default"
|
||
onClick={() => {
|
||
setVisiblePopup((prev) => ({ ...prev, basicInfo: false }));
|
||
}}
|
||
>
|
||
取消
|
||
</Button>
|
||
</View>
|
||
<View className={"flex-1"}>
|
||
<Button
|
||
size={"large"}
|
||
block
|
||
type="primary"
|
||
onClick={saveBasicInfo}
|
||
>
|
||
保存
|
||
</Button>
|
||
</View>
|
||
</View>
|
||
<SafeArea position={"bottom"} />
|
||
</View>
|
||
</Popup>
|
||
|
||
<View className="rounded-lg border border-solid border-gray-200 bg-white">
|
||
<View className="grid grid-cols-1 p-3">
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
本车次号
|
||
</View>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{orderVehicle?.vehicleNo || "请填写"}
|
||
</View>
|
||
</View>
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
发货地
|
||
</View>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{orderVehicle?.origin || "请填写"}
|
||
</View>
|
||
</View>
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
收货地
|
||
</View>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{orderVehicle?.destination || "请填写"}
|
||
</View>
|
||
</View>
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
发货日期
|
||
</View>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{orderVehicle?.deliveryTime
|
||
? dayjs(orderVehicle.deliveryTime).format("YYYY年MM月DD日")
|
||
: "请填写"}
|
||
</View>
|
||
</View>
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
车牌号
|
||
</View>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{orderVehicle?.plate || "请填写"}
|
||
</View>
|
||
</View>
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
联系电话
|
||
</View>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{orderVehicle?.phone || "请填写"}
|
||
</View>
|
||
</View>
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
运费类型
|
||
</View>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{orderVehicle?.priceType === "MAIN_FREIGHT"
|
||
? "主运费"
|
||
: orderVehicle?.priceType === "SHORT_TRANSPORT"
|
||
? "短驳费"
|
||
: "请选择"}
|
||
</View>
|
||
</View>
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="flex items-center">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
运费（元）
|
||
</View>
|
||
</View>
|
||
<View className={"flex flex-1 items-center justify-end gap-2.5"}>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{formatCurrency(orderVehicle?.price || 0)}
|
||
</View>
|
||
{purchaseOrderVO.orderDealer && (
|
||
<View className="ml-1 rounded-full bg-blue-100 px-2 py-0.5">
|
||
<Text className="text-xs text-blue-600">
|
||
{purchaseOrderVO.orderDealer.freightCostFlag
|
||
? "计入成本"
|
||
: "不计入成本"}
|
||
</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="flex items-center">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
草帘费
|
||
</View>
|
||
</View>
|
||
<View className={"flex flex-1 items-center justify-end gap-2.5"}>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{orderVehicle?.openStrawCurtain ? "开启" : "关闭"}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
{orderVehicle?.openStrawCurtain && (
|
||
<View className="flex !h-8 flex-row items-center justify-between">
|
||
<View className="flex items-center">
|
||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||
草帘费金额（元）
|
||
</View>
|
||
</View>
|
||
<View className={"flex flex-1 items-center justify-end gap-2.5"}>
|
||
<View className="text-neutral-darkest text-sm font-medium">
|
||
{formatCurrency(orderVehicle?.strawCurtainPrice || 0)}
|
||
</View>
|
||
{purchaseOrderVO.orderDealer && (
|
||
<View className="ml-1 rounded-full bg-blue-100 px-2 py-0.5">
|
||
<Text className="text-xs text-blue-600">
|
||
{purchaseOrderVO.orderDealer.strawMatCostFlag
|
||
? "计入成本"
|
||
: "不计入成本"}
|
||
</Text>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</View>
|
||
)}
|
||
</View>
|
||
{!readOnly && (
|
||
<View className="flex justify-center border-t border-gray-200 p-2">
|
||
<Button
|
||
size="small"
|
||
type="primary"
|
||
fill="outline"
|
||
onClick={openBasicInfoPopup}
|
||
>
|
||
修改基础信息
|
||
</Button>
|
||
</View>
|
||
)}
|
||
</View>
|
||
</>
|
||
);
|
||
}
|