style(components): 调整组件样式和布局

- 统一调整多个 Picker 组件的内边距类名从 p-4 到 p-2.5
- 修改 OrderCost 和 OrderPackage 中图片容器的尺寸类名以适应全屏显示
- 移除 TicketUpload 中冗余的查看计算公式相关 UI 元素
- 更新 DealerInfoSection 中 DealerPicker 的手动输入属性为 false
- 优化 PackagingCostSection 中固定成本选择器的可见性控制逻辑
- 调整 SupplierPicker 内部列表项的内边距类名
- 移除 center 页面中角色选中状态的勾选图标显示逻辑
- 格式化 invoice 页面中的导入语句以提高可读性
This commit is contained in:
shenyifei 2025-11-19 22:43:11 +08:00
parent ea3cfca7d6
commit 19cf99863f
11 changed files with 35 additions and 78 deletions

View File

@ -97,7 +97,7 @@ export default function DealerPaymentAccountPicker(
{dealerPaymentAccountList?.map((dealerPaymentAccountVO) => ( {dealerPaymentAccountList?.map((dealerPaymentAccountVO) => (
<View <View
className={ className={
"flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-4" "flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-2.5"
} }
key={dealerPaymentAccountVO.accountId} key={dealerPaymentAccountVO.accountId}
onClick={async () => { onClick={async () => {

View File

@ -115,7 +115,7 @@ export default function DealerPicker(props: IDealerPickerProps) {
{dealerList?.map((dealer) => ( {dealerList?.map((dealer) => (
<View <View
className={ className={
"flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-4" "flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-2.5"
} }
key={dealer.dealerId} key={dealer.dealerId}
onClick={async () => { onClick={async () => {

View File

@ -93,7 +93,7 @@ export default function DealerRebateCustomerPicker(
{dealerRebateCustomerList?.map((dealerRebateCustomer) => ( {dealerRebateCustomerList?.map((dealerRebateCustomer) => (
<View <View
className={ className={
"flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-4" "flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-2.5"
} }
key={dealerRebateCustomer.customerId} key={dealerRebateCustomer.customerId}
onClick={async () => { onClick={async () => {

View File

@ -98,7 +98,7 @@ export default function DealerWarehousePicker(
{dealerWarehouseList?.map((dealerWarehouseVO) => ( {dealerWarehouseList?.map((dealerWarehouseVO) => (
<View <View
className={ className={
"flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-4" "flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-2.5"
} }
key={dealerWarehouseVO.warehouseId} key={dealerWarehouseVO.warehouseId}
onClick={async () => { onClick={async () => {

View File

@ -974,7 +974,7 @@ export default forwardRef<OrderCostRef, IOrderCostProps>(
<View className="absolute top-2 right-2 opacity-10"> <View className="absolute top-2 right-2 opacity-10">
<Image <Image
src={brandInfo.boxBrandImage} src={brandInfo.boxBrandImage}
className="h-16 w-16" className="h-full w-full"
mode="aspectFit" mode="aspectFit"
/> />
</View> </View>

View File

@ -628,10 +628,10 @@ export default forwardRef<OrderPackageRef, IOrderPackageProps>(
> >
{/* 品牌背景水印 */} {/* 品牌背景水印 */}
{brandInfo?.boxBrandImage && ( {brandInfo?.boxBrandImage && (
<View className="absolute top-2 right-2 opacity-10"> <View className="top-2 right-2 opacity-10">
<Image <Image
src={brandInfo.boxBrandImage} src={brandInfo.boxBrandImage}
className="h-16 w-16" className="h-full w-full"
mode="aspectFit" mode="aspectFit"
/> />
</View> </View>

View File

@ -20,18 +20,20 @@ export default function TicketUpload(props: ITicketUploadProps) {
// 初始化发票和合同图片 // 初始化发票和合同图片
if (value.invoiceImg) { if (value.invoiceImg) {
setInvoiceImgList([{ setInvoiceImgList([
url: value.invoiceImg[0], {
name: 'invoice-image', url: value.invoiceImg[0],
status: 'success' name: "invoice-image",
}]); status: "success",
},
]);
} }
if (value.contractImg && value.contractImg.length > 0) { if (value.contractImg && value.contractImg.length > 0) {
const contractImages = value.contractImg.map((url, index) => ({ const contractImages = value.contractImg.map((url, index) => ({
url: url, url: url,
name: `contract-image-${index}`, name: `contract-image-${index}`,
status: 'success' status: "success",
})); }));
// @ts-ignore // @ts-ignore
setContractImgList(contractImages); setContractImgList(contractImages);
@ -48,7 +50,9 @@ export default function TicketUpload(props: ITicketUploadProps) {
// 发票照片 // 发票照片
const [invoiceImgList, setInvoiceImgList] = useState<UploaderFileItem[]>([]); const [invoiceImgList, setInvoiceImgList] = useState<UploaderFileItem[]>([]);
// 合同照片 // 合同照片
const [contractImgList, setContractImgList] = useState<UploaderFileItem[]>([]); const [contractImgList, setContractImgList] = useState<UploaderFileItem[]>(
[],
);
// 发票照片变更处理函数 // 发票照片变更处理函数
const handleInvoiceImgChange = (files: UploaderFileItem[]) => { const handleInvoiceImgChange = (files: UploaderFileItem[]) => {
@ -56,14 +60,14 @@ export default function TicketUpload(props: ITicketUploadProps) {
// 如果有文件且上传成功保存URL到supplierVO // 如果有文件且上传成功保存URL到supplierVO
if (files.length > 0 && files[0].url) { if (files.length > 0 && files[0].url) {
setSupplierVO(prev => ({ setSupplierVO((prev) => ({
...prev!, ...prev!,
invoiceImg: [files[0].url!], invoiceImg: [files[0].url!],
invoiceUpload: true, invoiceUpload: true,
})); }));
} else { } else {
// 如果没有文件清空URL // 如果没有文件清空URL
setSupplierVO(prev => ({ setSupplierVO((prev) => ({
...prev!, ...prev!,
invoiceImg: undefined, invoiceImg: undefined,
invoiceUpload: false, invoiceUpload: false,
@ -76,8 +80,8 @@ export default function TicketUpload(props: ITicketUploadProps) {
setContractImgList(files); setContractImgList(files);
// 保存所有文件URL到supplierVO // 保存所有文件URL到supplierVO
const urls = files.map(file => file.url).filter(url => url) as string[]; const urls = files.map((file) => file.url).filter((url) => url) as string[];
setSupplierVO(prev => ({ setSupplierVO((prev) => ({
...prev!, ...prev!,
contractImg: urls, contractImg: urls,
contractUpload: urls.length > 0, contractUpload: urls.length > 0,
@ -108,60 +112,6 @@ export default function TicketUpload(props: ITicketUploadProps) {
/> />
</View> </View>
</View> </View>
<View className="text-primary flex items-center">
<View className="mr-1 text-xs"></View>
<Icon name="chevron-right" size={14} />
</View>
</View>
<View className="inset-0 z-50 flex hidden items-center justify-center bg-black/60">
<View className="max-h-[80vh] w-[340px] overflow-y-auto rounded-lg bg-white">
<View className="border-b border-gray-100 p-4">
<View className="flex items-center justify-between">
<View className="text-xl font-medium"></View>
<View className="text-gray-400 hover:text-gray-600">
<Icon name="circle-xmark" />
</View>
</View>
</View>
<View className="space-y-4 p-4">
<View className="space-y-2">
<View className="font-medium"></View>
<View className="rounded-lg bg-gray-50 p-3">
<View className="text-gray-600">
1250kg × ¥1.8/kg = ¥2,250.00
</View>
</View>
</View>
<View className="space-y-2">
<View className="font-medium"></View>
<View className="rounded-lg bg-gray-50 p-3">
<View className="text-gray-600">
50 × ¥5/ = ¥250.00
</View>
</View>
</View>
<View className="space-y-2">
<View className="font-medium"></View>
<View className="rounded-lg bg-gray-50 p-3">
<View className="text-gray-600">
网套: 20个 × ¥3/ = ¥60.00
</View>
<View className="text-gray-600">
商标: 20个 × ¥1/ = ¥20.00
</View>
</View>
</View>
<View className="border-t border-gray-100 pt-4">
<View className="flex items-center justify-between text-lg">
<View className="font-medium"></View>
<View className="text-primary font-semibold">
¥2,580.00
</View>
</View>
</View>
</View>
</View>
</View> </View>
<View className="mb-2.5"> <View className="mb-2.5">

View File

@ -69,6 +69,7 @@ export default function (props: {
{!readOnly && ( {!readOnly && (
<DealerPicker <DealerPicker
enableManualInput={false}
onFinish={(dealer) => { onFinish={(dealer) => {
handleDealerSelect(dealer); handleDealerSelect(dealer);
}} }}

View File

@ -369,7 +369,10 @@ export default function PackagingCostSection(props: {
color: "var(--nutui-color-title, #1a1a1a)", color: "var(--nutui-color-title, #1a1a1a)",
}} }}
onClick={(event) => { onClick={(event) => {
setPickerVisible((prev) => ({ ...prev, costItem: true })); setPickerVisible((prev) => ({
...prev,
fixedCost: true,
}));
event.stopPropagation(); event.stopPropagation();
}} }}
> >
@ -385,7 +388,13 @@ export default function PackagingCostSection(props: {
visible={pickerVisible.fixedCost} visible={pickerVisible.fixedCost}
options={[ options={[
costItemVOList costItemVOList
.filter((item) => item.costType === newCostData.costType) .filter((item) => {
return (
item.costType === newCostData.costType &&
item.name !== "空箱费" &&
item.name !== "纸箱费"
);
})
.filter((item) => { .filter((item) => {
// 检查该项目是否已经被选择 // 检查该项目是否已经被选择
return !fixedCosts.some( return !fixedCosts.some(

View File

@ -85,7 +85,7 @@ export default function SupplierPicker(props: ISupplierPickerProps) {
{supplierList?.map((item) => ( {supplierList?.map((item) => (
<View <View
className={ className={
"flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-4" "flex flex-row items-center justify-between gap-2 border-b border-gray-100 p-2.5"
} }
key={item.supplierId} key={item.supplierId}
onClick={async () => { onClick={async () => {

View File

@ -360,9 +360,6 @@ export default hocAuth(function Page(props: CommonComponent) {
{role.description || "暂无描述"} {role.description || "暂无描述"}
</View> </View>
</View> </View>
{userRoleVO?.roleId === role.roleId && (
<Icon name="check" className="text-primary" size={16} />
)}
</View> </View>
</View> </View>
))} ))}