qilincloud168/ERPTurbo_Client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(purchase): 调整采购模块UI样式和结构

Browse Source
This commit is contained in:
shenyifei 2025-11-19 22:08:52 +08:00
parent 221e3434a0
commit 1e75aadbf9
6 changed files with 203 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
packages/app-client/src/components/purchase/section/BasicInfoSection.tsx
View File

@ -464,7 +464,7 @@ export default function BasicInfoSection(props: {
</View> </View>
</Popup> </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-col gap-2.5">
<View className={"flex flex-row items-center justify-between"}> <View className={"flex flex-row items-center justify-between"}>
@ -475,7 +475,10 @@ export default function BasicInfoSection(props: {
参考上一车：{displayReferenceVehicleNo()} 参考上一车：{displayReferenceVehicleNo()}
</View> </View>
</View> </View>
{readOnly ? ( </View>
{readOnly ? (
<View className="flex flex-col gap-2.5">
<View <View
className="flex flex-row items-center justify-between rounded-md p-2.5" className="flex flex-row items-center justify-between rounded-md p-2.5"
style={{ style={{
@ -488,7 +491,9 @@ export default function BasicInfoSection(props: {
: "暂未生成车次"} : "暂未生成车次"}
</View> </View>
</View> </View>
) : ( </View>
) : (
<View className="flex flex-col gap-2.5">
<View <View
className={`flex h-10 flex-1 items-center rounded-md border-4 border-gray-300`} 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)} onChange={(value) => updateVehicleNo(value)}
/> />
</View> </View>
)} </View>
</View> )}
{/* 运费信息 */} {/* 运费信息 */}
<View className="flex flex-col gap-2.5"> <View className="flex flex-col gap-2.5">
@ -587,18 +592,16 @@ export default function BasicInfoSection(props: {
</View> </View>
{!readOnly && ( {!readOnly && (
<View className="flex-1 border-t border-gray-200 pt-2.5"> <Button
<Button icon={<Icon name="pen-to-square" size={18} />}
icon={<Icon name="pen-to-square" size={18} />} size="large"
size="large" type="primary"
type="primary" fill="outline"
fill="outline" block
block onClick={openBasicInfoPopup}
onClick={openBasicInfoPopup} >
> 修改基础信息
修改基础信息 </Button>
</Button>
</View>
)} )}
</View> </View>
</> </>

37
packages/app-client/src/components/purchase/section/CompanyInfoSection.tsx
View File

@ -49,35 +49,16 @@ export default function CompanyInfoSection(props: {
onChange?.(newPurchaseOrderVO); onChange?.(newPurchaseOrderVO);
}; };
const handleRemoveCompany = () => {
if (readOnly) return;
setOrderCompany(undefined);
// 构造新的 purchaseOrderVO 对象，其中 orderCompany 为 null
const newPurchaseOrderVO = {
...purchaseOrderVO,
orderCompany: undefined,
};
// 通知父组件 purchaseOrderVO 已更改
// @ts-ignore
onChange?.(newPurchaseOrderVO);
};
return ( return (
<View className="relative flex flex-col gap-2.5 rounded-lg border border-solid border-gray-200 p-2.5"> <View className={"flex flex-col gap-2.5"}>
{!readOnly && orderCompany && ( <View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
<View <View className="flex flex-row items-center justify-between">
className="absolute -top-2 -right-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-gray-100" <View className="text-neutral-dark text-sm font-medium">
onClick={handleRemoveCompany} 公司名称
> </View>
<Icon name="circle-xmark" size={24} color="#999" /> <View className="text-neutral-darkest text-sm">
</View> {orderCompany?.fullName || "请先选择销售方"}
)} </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> </View>
</View> </View>

59
packages/app-client/src/components/purchase/section/DealerInfoSection.tsx
View File

@ -46,54 +46,27 @@ export default function (props: {
setDealerNameOnly(undefined); setDealerNameOnly(undefined);
}; };
// 清除经销商选择
const clearDealerSelection = () => {
if (readOnly) return;
setOrderDealer(undefined);
onChange?.({
...purchaseOrderVO,
orderVehicle: {
...purchaseOrderVO.orderVehicle,
//@ts-ignore
dealerName: undefined,
},
//@ts-ignore
orderDealer: undefined,
});
};
return ( return (
<View className="relative flex flex-col gap-2.5 rounded-lg border border-solid border-gray-200 p-2.5"> <View className={"flex flex-col gap-2.5"}>
{!readOnly && orderDealer && ( <View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
<View <View className="flex flex-row items-center justify-between">
className="absolute -top-2 -right-2 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-gray-100" <View className="text-neutral-dark flex-shrink-0 text-sm">
onClick={(e) => { 经销商名称
e.stopPropagation(); </View>
clearDealerSelection(); <View className="text-neutral-darkest text-sm font-medium">
}} {orderDealer?.shortName || "请先选择经销商"}
> </View>
<Icon name="circle-xmark" size={24} color="#999" />
</View> </View>
)}
<View className="flex flex-row items-center justify-between"> {dealerNameOnly && (
<View className="text-neutral-dark flex-shrink-0 text-sm"> <View className="text-xs text-orange-500">
经销商名称 <View>检测到当前经销商“{dealerNameOnly}”信息未创建</View>
</View> <View className="mt-1">• 请前往电脑端创建经销商信息后再选择</View>
<View className="text-neutral-darkest text-sm font-medium"> <View>• 或选择系统中已存在的其他经销商</View>
{orderDealer?.shortName || "请先选择经销商"} </View>
</View> )}
</View> </View>
{dealerNameOnly && (
<View className="text-xs text-orange-500">
<View>检测到当前经销商“{dealerNameOnly}”信息未创建</View>
<View className="mt-1">• 请前往电脑端创建经销商信息后再选择</View>
<View>• 或选择系统中已存在的其他经销商</View>
</View>
)}
{!readOnly && ( {!readOnly && (
<DealerPicker <DealerPicker
onFinish={(dealer) => { onFinish={(dealer) => {

305
packages/app-client/src/components/purchase/section/MarketPriceSection.tsx
View File

@ -138,160 +138,163 @@ export default function MarketPriceSection(props: {
const averagePurchasePrice = calculator.getAverageSalesPrice(); const averagePurchasePrice = calculator.getAverageSalesPrice();
return ( return (
<View className={"flex flex-col gap-2.5"}> <>
<View className="flex !h-8 flex-row items-center justify-between"> <View className="flex flex-col gap-2.5">
<View className="text-neutral-dark flex-shrink-0 text-sm"> <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> </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>
<View className="text-neutral-darkest text-sm font-medium"> <View className="flex !h-8 flex-row items-center justify-between">
{pricingMethod ? `${saleAmount} 元` : "-"} <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> <View className="flex !h-8 flex-row items-center justify-between bg-yellow-200">
<View className="flex !h-8 flex-row items-center justify-between"> <View className="text-neutral-dark flex-shrink-0 text-sm">
<View className="text-neutral-dark flex-shrink-0 text-sm"> 市场报价（
平均单价 {purchaseOrderVO.orderDealer?.includePackingFlag
</View> ? "销售金额 + 包装费"
<View className="text-neutral-darkest text-sm font-medium"> : "销售金额"}
{pricingMethod ? `${averagePurchasePrice} 元/斤` : "-"} ）
</View> </View>
</View> <View className="text-neutral-darkest text-sm font-medium">
<View className="flex !h-8 flex-row items-center justify-between bg-yellow-200"> {pricingMethod ? `${totalAmount} 元` : "-"}
<View className="text-neutral-dark flex-shrink-0 text-sm"> </View>
市场报价（
{purchaseOrderVO.orderDealer?.includePackingFlag
? "销售金额 + 包装费"
: "销售金额"}
）
</View>
<View className="text-neutral-darkest text-sm font-medium">
{pricingMethod ? `${totalAmount} 元` : "-"}
</View> </View>
</View> </View>
@ -392,6 +395,6 @@ export default function MarketPriceSection(props: {
<SafeArea position="bottom" /> <SafeArea position="bottom" />
</Popup> </Popup>
))} ))}
</View> </>
); );
} }

2
packages/app-client/src/components/purchase/section/PackagingCostSection.tsx
View File

@ -204,7 +204,7 @@ export default function PackagingCostSection(props: {
return ( return (
<> <>
<View className="flex flex-col gap-2.5"> <View className="flex flex-col gap-2.5 divide-y divide-[#eaeaea]">
{/* 固定费用 */} {/* 固定费用 */}
{fixedCosts {fixedCosts
.filter((item) => item.name !== "纸箱费" && item.name !== "空箱费") .filter((item) => item.name !== "纸箱费" && item.name !== "空箱费")

15
packages/app-client/src/pages/purchase/reviewer/audit.tsx
View File

@ -5,16 +5,7 @@ import { business } from "@/services";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { View } from "@tarojs/components"; import { View } from "@tarojs/components";
import purchaseOrder from "@/constant/purchaseOrder"; import purchaseOrder from "@/constant/purchaseOrder";
import { import { ActionSheet, Button, Dialog, Input, Popup, SafeArea, TextArea, Toast } from "@nutui/nutui-react-taro";
ActionSheet,
Button,
Dialog,
Input,
Popup,
SafeArea,
TextArea,
Toast,
} from "@nutui/nutui-react-taro";
import { import {
BasicInfoSection, BasicInfoSection,
CompanyInfoSection, CompanyInfoSection,
@ -31,7 +22,7 @@ import {
State, State,
TaxProvisionSection, TaxProvisionSection,
TaxSubsidySection, TaxSubsidySection,
WorkerAdvanceSection, WorkerAdvanceSection
} from "@/components"; } from "@/components";
import buildUrl from "@/utils/buildUrl"; import buildUrl from "@/utils/buildUrl";
import { PurchaseOrderCalculator } from "@/utils/PurchaseOrderCalculator"; 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="text-sm font-bold">{section.title}</View>
<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 <section.component
readOnly={purchaseOrderVO.state !== "WAITING_AUDIT"} readOnly={purchaseOrderVO.state !== "WAITING_AUDIT"}