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

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

Browse Source 
- 统一调整多个 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/app-client/src/components/dealer/DealerPaymentAccountPicker.tsx
View File

@ -97,7 +97,7 @@ export default function DealerPaymentAccountPicker(
{dealerPaymentAccountList?.map((dealerPaymentAccountVO) => (
<View
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}
onClick={async () => {

2
packages/app-client/src/components/dealer/DealerPicker.tsx
View File

@ -115,7 +115,7 @@ export default function DealerPicker(props: IDealerPickerProps) {
{dealerList?.map((dealer) => (
<View
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}
onClick={async () => {

2
packages/app-client/src/components/dealer/DealerRebateCustomer.tsx
View File

@ -93,7 +93,7 @@ export default function DealerRebateCustomerPicker(
{dealerRebateCustomerList?.map((dealerRebateCustomer) => (
<View
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}
onClick={async () => {

2
packages/app-client/src/components/dealer/DealerWarehousePicker.tsx
View File

@ -98,7 +98,7 @@ export default function DealerWarehousePicker(
{dealerWarehouseList?.map((dealerWarehouseVO) => (
<View
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}
onClick={async () => {

2
packages/app-client/src/components/purchase/module/OrderCost.tsx
View File

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

4
packages/app-client/src/components/purchase/module/OrderPackage.tsx
View File

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

78
packages/app-client/src/components/purchase/module/TicketUpload.tsx
View File

@ -20,18 +20,20 @@ export default function TicketUpload(props: ITicketUploadProps) {
// 初始化发票和合同图片
if (value.invoiceImg) {
setInvoiceImgList([{
setInvoiceImgList([
{
url: value.invoiceImg[0],
name: 'invoice-image',
status: 'success'
}]);
name: "invoice-image",
status: "success",
},
]);
}
if (value.contractImg && value.contractImg.length > 0) {
const contractImages = value.contractImg.map((url, index) => ({
url: url,
name: `contract-image-${index}`,
status: 'success'
status: "success",
}));
// @ts-ignore
setContractImgList(contractImages);
@ -48,7 +50,9 @@ export default function TicketUpload(props: ITicketUploadProps) {
// 发票照片
const [invoiceImgList, setInvoiceImgList] = useState<UploaderFileItem[]>([]);
// 合同照片
const [contractImgList, setContractImgList] = useState<UploaderFileItem[]>([]);
const [contractImgList, setContractImgList] = useState<UploaderFileItem[]>(
[],
);
// 发票照片变更处理函数
const handleInvoiceImgChange = (files: UploaderFileItem[]) => {
@ -56,14 +60,14 @@ export default function TicketUpload(props: ITicketUploadProps) {
// 如果有文件且上传成功，保存URL到supplierVO
if (files.length > 0 && files[0].url) {
setSupplierVO(prev => ({
setSupplierVO((prev) => ({
...prev!,
invoiceImg: [files[0].url!],
invoiceUpload: true,
}));
} else {
// 如果没有文件，清空URL
setSupplierVO(prev => ({
setSupplierVO((prev) => ({
...prev!,
invoiceImg: undefined,
invoiceUpload: false,
@ -76,8 +80,8 @@ export default function TicketUpload(props: ITicketUploadProps) {
setContractImgList(files);
// 保存所有文件URL到supplierVO
const urls = files.map(file => file.url).filter(url => url) as string[];
setSupplierVO(prev => ({
const urls = files.map((file) => file.url).filter((url) => url) as string[];
setSupplierVO((prev) => ({
...prev!,
contractImg: urls,
contractUpload: urls.length > 0,
@ -108,60 +112,6 @@ export default function TicketUpload(props: ITicketUploadProps) {
/>
</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 className="mb-2.5">

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

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

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

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

2
packages/app-client/src/components/supplier/SupplierPicker.tsx
View File

@ -85,7 +85,7 @@ export default function SupplierPicker(props: ISupplierPickerProps) {
{supplierList?.map((item) => (
<View
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}
onClick={async () => {

3
packages/app-client/src/pages/main/center/index.tsx
View File

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