style(purchase): 调整采购模块UI样式和结构
This commit is contained in:
shenyifei
parent
221e3434a0
commit
1e75aadbf9
@ -464,7 +464,7 @@ export default function BasicInfoSection(props: {
|
||||
</View>
|
||||
</Popup>
|
||||
|
||||
<View className="flex flex-col gap-2.5 rounded-lg border border-solid border-gray-200 bg-white p-2.5">
|
||||
<View className={"flex flex-col gap-2.5"}>
|
||||
{/* 本车次号 */}
|
||||
<View className="flex flex-col gap-2.5">
|
||||
<View className={"flex flex-row items-center justify-between"}>
|
||||
@ -475,7 +475,10 @@ export default function BasicInfoSection(props: {
|
||||
参考上一车：{displayReferenceVehicleNo()}
|
||||
</View>
|
||||
</View>
|
||||
{readOnly ? (
|
||||
</View>
|
||||
|
||||
{readOnly ? (
|
||||
<View className="flex flex-col gap-2.5">
|
||||
<View
|
||||
className="flex flex-row items-center justify-between rounded-md p-2.5"
|
||||
style={{
|
||||
@ -488,7 +491,9 @@ export default function BasicInfoSection(props: {
|
||||
: "暂未生成车次"}
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
</View>
|
||||
) : (
|
||||
<View className="flex flex-col gap-2.5">
|
||||
<View
|
||||
className={`flex h-10 flex-1 items-center rounded-md border-4 border-gray-300`}
|
||||
>
|
||||
@ -499,8 +504,8 @@ export default function BasicInfoSection(props: {
|
||||
onChange={(value) => updateVehicleNo(value)}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 运费信息 */}
|
||||
<View className="flex flex-col gap-2.5">
|
||||
@ -587,18 +592,16 @@ export default function BasicInfoSection(props: {
|
||||
</View>
|
||||
|
||||
{!readOnly && (
|
||||
<View className="flex-1 border-t border-gray-200 pt-2.5">
|
||||
<Button
|
||||
icon={<Icon name="pen-to-square" size={18} />}
|
||||
size="large"
|
||||
type="primary"
|
||||
fill="outline"
|
||||
block
|
||||
onClick={openBasicInfoPopup}
|
||||
>
|
||||
修改基础信息
|
||||
</Button>
|
||||
</View>
|
||||
<Button
|
||||
icon={<Icon name="pen-to-square" size={18} />}
|
||||
size="large"
|
||||
type="primary"
|
||||
fill="outline"
|
||||
block
|
||||
onClick={openBasicInfoPopup}
|
||||
>
|
||||
修改基础信息
|
||||
</Button>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
|
||||
@ -49,35 +49,16 @@ export default function CompanyInfoSection(props: {
|
||||
onChange?.(newPurchaseOrderVO);
|
||||
};
|
||||
|
||||
const handleRemoveCompany = () => {
|
||||
if (readOnly) return;
|
||||
|
||||
setOrderCompany(undefined);
|
||||
// 构造新的 purchaseOrderVO 对象，其中 orderCompany 为 null
|
||||
const newPurchaseOrderVO = {
|
||||
...purchaseOrderVO,
|
||||
orderCompany: undefined,
|
||||
};
|
||||
// 通知父组件 purchaseOrderVO 已更改
|
||||
// @ts-ignore
|
||||
onChange?.(newPurchaseOrderVO);
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="relative flex flex-col gap-2.5 rounded-lg border border-solid border-gray-200 p-2.5">
|
||||
{!readOnly && orderCompany && (
|
||||
<View
|
||||
className="absolute -top-2 -right-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-gray-100"
|
||||
onClick={handleRemoveCompany}
|
||||
>
|
||||
<Icon name="circle-xmark" size={24} color="#999" />
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex flex-row items-center justify-between">
|
||||
<View className="text-neutral-dark text-sm font-medium">公司名称</View>
|
||||
<View className="text-neutral-darkest text-sm">
|
||||
{orderCompany?.fullName || "请先选择销售方"}
|
||||
<View className={"flex flex-col gap-2.5"}>
|
||||
<View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
|
||||
<View className="flex flex-row items-center justify-between">
|
||||
<View className="text-neutral-dark text-sm font-medium">
|
||||
公司名称
|
||||
</View>
|
||||
<View className="text-neutral-darkest text-sm">
|
||||
{orderCompany?.fullName || "请先选择销售方"}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
|
||||
@ -46,54 +46,27 @@ export default function (props: {
|
||||
setDealerNameOnly(undefined);
|
||||
};
|
||||
|
||||
// 清除经销商选择
|
||||
const clearDealerSelection = () => {
|
||||
if (readOnly) return;
|
||||
|
||||
setOrderDealer(undefined);
|
||||
onChange?.({
|
||||
...purchaseOrderVO,
|
||||
orderVehicle: {
|
||||
...purchaseOrderVO.orderVehicle,
|
||||
//@ts-ignore
|
||||
dealerName: undefined,
|
||||
},
|
||||
//@ts-ignore
|
||||
orderDealer: undefined,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<View className="relative flex flex-col gap-2.5 rounded-lg border border-solid border-gray-200 p-2.5">
|
||||
{!readOnly && orderDealer && (
|
||||
<View
|
||||
className="absolute -top-2 -right-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-gray-100"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
clearDealerSelection();
|
||||
}}
|
||||
>
|
||||
<Icon name="circle-xmark" size={24} color="#999" />
|
||||
<View className={"flex flex-col gap-2.5"}>
|
||||
<View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
|
||||
<View className="flex 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">
|
||||
{orderDealer?.shortName || "请先选择经销商"}
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
<View className="flex 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">
|
||||
{orderDealer?.shortName || "请先选择经销商"}
|
||||
</View>
|
||||
{dealerNameOnly && (
|
||||
<View className="text-xs text-orange-500">
|
||||
<View>检测到当前经销商“{dealerNameOnly}”信息未创建</View>
|
||||
<View className="mt-1">• 请前往电脑端创建经销商信息后再选择</View>
|
||||
<View>• 或选择系统中已存在的其他经销商</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{dealerNameOnly && (
|
||||
<View className="text-xs text-orange-500">
|
||||
<View>检测到当前经销商“{dealerNameOnly}”信息未创建</View>
|
||||
<View className="mt-1">• 请前往电脑端创建经销商信息后再选择</View>
|
||||
<View>• 或选择系统中已存在的其他经销商</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{!readOnly && (
|
||||
<DealerPicker
|
||||
onFinish={(dealer) => {
|
||||
|
||||
@ -138,160 +138,163 @@ export default function MarketPriceSection(props: {
|
||||
const averagePurchasePrice = calculator.getAverageSalesPrice();
|
||||
|
||||
return (
|
||||
<View className={"flex flex-col gap-2.5"}>
|
||||
<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">
|
||||
{readOnly ? (
|
||||
<View>
|
||||
{pricingMethod === "BY_GROSS_WEIGHT"
|
||||
? "按毛重报价"
|
||||
: pricingMethod === "BY_NET_WEIGHT"
|
||||
? "按净重报价"
|
||||
: "未选择"}
|
||||
</View>
|
||||
) : (
|
||||
<Radio.Group
|
||||
direction={"horizontal"}
|
||||
//@ts-ignore
|
||||
value={pricingMethod}
|
||||
onChange={(value) =>
|
||||
setPricingMethod(
|
||||
value as BusinessAPI.PurchaseOrderVO["pricingMethod"],
|
||||
)
|
||||
}
|
||||
>
|
||||
<Radio value="BY_GROSS_WEIGHT">按毛重报价</Radio>
|
||||
<Radio value="BY_NET_WEIGHT">按净重报价</Radio>
|
||||
</Radio.Group>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 卡片形式展示供应商报价信息 */}
|
||||
{purchaseOrderVO.orderSupplierList?.map((supplier) => {
|
||||
// 获取编辑后的价格，如果没有则使用原始价格
|
||||
return (
|
||||
<View
|
||||
key={supplier.orderSupplierId}
|
||||
className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5"
|
||||
>
|
||||
<View className="mb-2">
|
||||
<Text className="text-sm font-medium">
|
||||
瓜农1 （{supplier.name}）
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex">
|
||||
<View className="flex-1">
|
||||
{!readOnly ? (
|
||||
<View
|
||||
onClick={() => {
|
||||
// 设置临时编辑值为当前值
|
||||
setTempEditValues((prev) => ({
|
||||
...prev,
|
||||
[supplier.orderSupplierId || ""]: {
|
||||
salePrice: supplier.salePrice || 0,
|
||||
},
|
||||
}));
|
||||
setVisiblePopup((prev) => ({
|
||||
...prev,
|
||||
[supplier.orderSupplierId || ""]: true,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<View className="mb-2 flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">销售单价</Text>
|
||||
<Text className="text-sm text-gray-500">元/斤</Text>
|
||||
</View>
|
||||
<View className="relative flex">
|
||||
<Text className="w-full border-b-2 border-red-500 pb-2 text-3xl font-bold text-red-500 focus:outline-none">
|
||||
{supplier.salePrice?.toFixed(2) || "0.00"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View>
|
||||
<View className="mb-2 flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">销售单价</Text>
|
||||
<Text className="text-sm text-gray-500">元/斤</Text>
|
||||
</View>
|
||||
<View className="relative">
|
||||
<Text className="w-full py-2 text-3xl font-bold text-red-500">
|
||||
{supplier.salePrice?.toFixed(2) || "0.00"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="flex flex-1 flex-col gap-2 pl-4">
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">毛重</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{(supplier.grossWeight || 0).toFixed(2)} 斤
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">净重</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{(supplier.netWeight || 0).toFixed(2)} 斤
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">箱重</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{(supplier.grossWeight - supplier.netWeight).toFixed(2)} 斤
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">采购单价</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{supplier.purchasePrice.toFixed(2)} 元/斤
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">销售金额</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{pricingMethod
|
||||
? `${calculator.calculateSupplierAmount(supplier)} 元`
|
||||
: "-"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
<>
|
||||
<View className="flex flex-col gap-2.5">
|
||||
<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">
|
||||
{readOnly ? (
|
||||
<View>
|
||||
{pricingMethod === "BY_GROSS_WEIGHT"
|
||||
? "按毛重报价"
|
||||
: pricingMethod === "BY_NET_WEIGHT"
|
||||
? "按净重报价"
|
||||
: "未选择"}
|
||||
</View>
|
||||
) : (
|
||||
<Radio.Group
|
||||
direction={"horizontal"}
|
||||
//@ts-ignore
|
||||
value={pricingMethod}
|
||||
onChange={(value) =>
|
||||
setPricingMethod(
|
||||
value as BusinessAPI.PurchaseOrderVO["pricingMethod"],
|
||||
)
|
||||
}
|
||||
>
|
||||
<Radio value="BY_GROSS_WEIGHT">按毛重报价</Radio>
|
||||
<Radio value="BY_NET_WEIGHT">按净重报价</Radio>
|
||||
</Radio.Group>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className="flex !h-8 flex-row items-center justify-between">
|
||||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||||
销售金额
|
||||
{/* 卡片形式展示供应商报价信息 */}
|
||||
{purchaseOrderVO.orderSupplierList?.map((supplier) => {
|
||||
// 获取编辑后的价格，如果没有则使用原始价格
|
||||
return (
|
||||
<View
|
||||
key={supplier.orderSupplierId}
|
||||
className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5"
|
||||
>
|
||||
<View className="mb-2">
|
||||
<Text className="text-sm font-medium">
|
||||
瓜农1 （{supplier.name}）
|
||||
</Text>
|
||||
</View>
|
||||
|
||||
<View className="flex">
|
||||
<View className="flex-1">
|
||||
{!readOnly ? (
|
||||
<View
|
||||
onClick={() => {
|
||||
// 设置临时编辑值为当前值
|
||||
setTempEditValues((prev) => ({
|
||||
...prev,
|
||||
[supplier.orderSupplierId || ""]: {
|
||||
salePrice: supplier.salePrice || 0,
|
||||
},
|
||||
}));
|
||||
setVisiblePopup((prev) => ({
|
||||
...prev,
|
||||
[supplier.orderSupplierId || ""]: true,
|
||||
}));
|
||||
}}
|
||||
>
|
||||
<View className="mb-2 flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">销售单价</Text>
|
||||
<Text className="text-sm text-gray-500">元/斤</Text>
|
||||
</View>
|
||||
<View className="relative flex">
|
||||
<Text className="w-full border-b-2 border-red-500 pb-2 text-3xl font-bold text-red-500 focus:outline-none">
|
||||
{supplier.salePrice?.toFixed(2) || "0.00"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
) : (
|
||||
<View>
|
||||
<View className="mb-2 flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">销售单价</Text>
|
||||
<Text className="text-sm text-gray-500">元/斤</Text>
|
||||
</View>
|
||||
<View className="relative">
|
||||
<Text className="w-full py-2 text-3xl font-bold text-red-500">
|
||||
{supplier.salePrice?.toFixed(2) || "0.00"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View className="flex flex-1 flex-col gap-2 pl-4">
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">毛重</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{(supplier.grossWeight || 0).toFixed(2)} 斤
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">净重</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{(supplier.netWeight || 0).toFixed(2)} 斤
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">箱重</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{(supplier.grossWeight - supplier.netWeight).toFixed(2)}{" "}
|
||||
斤
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">采购单价</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{supplier.purchasePrice.toFixed(2)} 元/斤
|
||||
</Text>
|
||||
</View>
|
||||
<View className="flex items-center justify-between">
|
||||
<Text className="text-sm text-gray-500">销售金额</Text>
|
||||
<Text className="text-sm font-medium">
|
||||
{pricingMethod
|
||||
? `${calculator.calculateSupplierAmount(supplier)} 元`
|
||||
: "-"}
|
||||
</Text>
|
||||
</View>
|
||||
</View>
|
||||
</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">
|
||||
{pricingMethod ? `${saleAmount} 元` : "-"}
|
||||
</View>
|
||||
</View>
|
||||
<View className="text-neutral-darkest text-sm font-medium">
|
||||
{pricingMethod ? `${saleAmount} 元` : "-"}
|
||||
<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">
|
||||
{pricingMethod ? `${averagePurchasePrice} 元/斤` : "-"}
|
||||
</View>
|
||||
</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">
|
||||
{pricingMethod ? `${averagePurchasePrice} 元/斤` : "-"}
|
||||
</View>
|
||||
</View>
|
||||
<View className="flex !h-8 flex-row items-center justify-between bg-yellow-200">
|
||||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||||
市场报价（
|
||||
{purchaseOrderVO.orderDealer?.includePackingFlag
|
||||
? "销售金额 + 包装费"
|
||||
: "销售金额"}
|
||||
）
|
||||
</View>
|
||||
<View className="text-neutral-darkest text-sm font-medium">
|
||||
{pricingMethod ? `${totalAmount} 元` : "-"}
|
||||
<View className="flex !h-8 flex-row items-center justify-between bg-yellow-200">
|
||||
<View className="text-neutral-dark flex-shrink-0 text-sm">
|
||||
市场报价（
|
||||
{purchaseOrderVO.orderDealer?.includePackingFlag
|
||||
? "销售金额 + 包装费"
|
||||
: "销售金额"}
|
||||
）
|
||||
</View>
|
||||
<View className="text-neutral-darkest text-sm font-medium">
|
||||
{pricingMethod ? `${totalAmount} 元` : "-"}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
@ -392,6 +395,6 @@ export default function MarketPriceSection(props: {
|
||||
<SafeArea position="bottom" />
|
||||
</Popup>
|
||||
))}
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -204,7 +204,7 @@ export default function PackagingCostSection(props: {
|
||||
|
||||
return (
|
||||
<>
|
||||
<View className="flex flex-col gap-2.5">
|
||||
<View className="flex flex-col gap-2.5 divide-y divide-[#eaeaea]">
|
||||
{/* 固定费用 */}
|
||||
{fixedCosts
|
||||
.filter((item) => item.name !== "纸箱费" && item.name !== "空箱费")
|
||||
|
||||
@ -5,16 +5,7 @@ import { business } from "@/services";
|
||||
import { useEffect, useState } from "react";
|
||||
import { View } from "@tarojs/components";
|
||||
import purchaseOrder from "@/constant/purchaseOrder";
|
||||
import {
|
||||
ActionSheet,
|
||||
Button,
|
||||
Dialog,
|
||||
Input,
|
||||
Popup,
|
||||
SafeArea,
|
||||
TextArea,
|
||||
Toast,
|
||||
} from "@nutui/nutui-react-taro";
|
||||
import { ActionSheet, Button, Dialog, Input, Popup, SafeArea, TextArea, Toast } from "@nutui/nutui-react-taro";
|
||||
import {
|
||||
BasicInfoSection,
|
||||
CompanyInfoSection,
|
||||
@ -31,7 +22,7 @@ import {
|
||||
State,
|
||||
TaxProvisionSection,
|
||||
TaxSubsidySection,
|
||||
WorkerAdvanceSection,
|
||||
WorkerAdvanceSection
|
||||
} from "@/components";
|
||||
import buildUrl from "@/utils/buildUrl";
|
||||
import { PurchaseOrderCalculator } from "@/utils/PurchaseOrderCalculator";
|
||||
@ -491,7 +482,7 @@ export default hocAuth(function Page(props: CommonComponent) {
|
||||
<>
|
||||
<View className="text-sm font-bold">{section.title}</View>
|
||||
<View
|
||||
className={`overflow-x-auto rounded-md rounded-b-lg bg-white p-2.5 shadow-sm`}
|
||||
className={`overflow-x-auto rounded-md rounded-b-lg bg-white p-2.5 shadow-sm `}
|
||||
>
|
||||
<section.component
|
||||
readOnly={purchaseOrderVO.state !== "WAITING_AUDIT"}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user