feat(purchase): 优化采购模块UI与逻辑处理

- 在CostCard组件中添加了对空成本项列表的条件渲染 - 更新EmptyBoxModule和OrderPackage组件中的数组长度判断为可选链形式 - 在MelonFarmer组件中增加supplierVO的日志输出并修正isLast属性比较逻辑 - 重构OrderCost组件的成本初始化逻辑，提升性能和代码可读性 - 移除OrderCostItem组件中不必要的控制台日志 - 优化OrderCostItem组件中selected状态的赋值逻辑 - 升级Weigh组件中关于供应商字段的布尔值判断方式 - 将PurchasePreview组件中空箱使用明细的显示条件改为可选链判断 - 提升create页面中添加瓜农按钮的视觉样式与布局结构 - 更新应用版本号从v0.0.26至v0.0.28
2025-12-04 17:57:10 +08:00 · 2025-12-04 17:57:10 +08:00 · 1676290798
commit 1676290798
parent 47c7bdf357
10 changed files with 86 additions and 95 deletions
--- a/packages/app-client/src/components/purchase/cost/CostCard.tsx
+++ b/packages/app-client/src/components/purchase/cost/CostCard.tsx
@ -94,23 +94,25 @@ export default function CostCard(props: CostCardComponentProps) {
            hint="点击金额可直接编辑"
          />

-          <View className="flex flex-1 flex-col gap-2 pl-4">
-            {orderCostItemList.map((orderCostItem) => {
-              return (
-                <View
-                  key={orderCostItem.orderCostItemId}
-                  className="flex items-center justify-between"
-                >
-                  <Text className="text-sm text-gray-500">
-                    {orderCostItem.name}
-                  </Text>
-                  <Text className="text-sm font-medium">
-                    {orderCostItem.count} {orderCostItem.unit}
-                  </Text>
-                </View>
-              );
-            })}
-          </View>
+          {orderCostItemList.length > 0 && (
+            <View className="flex flex-1 flex-col gap-2 pl-4">
+              {orderCostItemList.map((orderCostItem) => {
+                return (
+                  <View
+                    key={orderCostItem.orderCostItemId}
+                    className="flex items-center justify-between"
+                  >
+                    <Text className="text-sm text-gray-500">
+                      {orderCostItem.name}
+                    </Text>
+                    <Text className="text-sm font-medium">
+                      {orderCostItem.count} {orderCostItem.unit}
+                    </Text>
+                  </View>
+                );
+              })}
+            </View>
+          )}
        </View>
      </View>

--- a/packages/app-client/src/components/purchase/module/EmptyBoxModule.tsx
+++ b/packages/app-client/src/components/purchase/module/EmptyBoxModule.tsx
@ -128,7 +128,7 @@ export default function EmptyBoxModule(props: IEmptyBoxModuleProps) {
    initBoxBrandList().then();
    setEmptyBoxList(orderPackageList);

-    if (orderPackageList.length > 0) {
+    if (orderPackageList?.length > 0) {
      // 根据当前供应商确定需要检查的纸箱类型
      let requiredTypes: string[] = ["EMPTY"];

--- a/packages/app-client/src/components/purchase/module/MelonFarmer.tsx
+++ b/packages/app-client/src/components/purchase/module/MelonFarmer.tsx
@ -549,6 +549,7 @@ export default forwardRef<MelonFarmerRef, IMelonFarmerProps>(
      });
    };

+    console.log("supplierVO", supplierVO);
    if (!supplierVO) {
      return;
    }
@ -588,9 +589,9 @@ export default forwardRef<MelonFarmerRef, IMelonFarmerProps>(
                <Radio.Group
                  direction="horizontal"
                  value={
-                    supplierVO.isLast
+                    supplierVO.isLast === true
                      ? "true"
-                      : !supplierVO.isLast
+                      : supplierVO.isLast === false
                        ? "false"
                        : undefined
                  }
--- a/packages/app-client/src/components/purchase/module/OrderCost.tsx
+++ b/packages/app-client/src/components/purchase/module/OrderCost.tsx
@ -3,7 +3,6 @@ import { Icon } from "@/components";
 import { forwardRef, useEffect, useImperativeHandle, useState } from "react";
 import { Checkbox, Input, Toast } from "@nutui/nutui-react-taro";
 import { generateShortId } from "@/utils";
-import { business } from "@/services";

 // 定义ref暴露的方法接口
 export interface OrderCostRef {
@ -30,54 +29,41 @@ export default forwardRef<OrderCostRef, IOrderCostProps>(

    // 初始化函数
    const init = async (costIds: string[]) => {
-      let newOrderCostList: BusinessAPI.OrderCost[] = [];
+      // 创建一个映射，用于快速查找orderCostItemList中的项目
+      const orderCostMap = new Map<string, BusinessAPI.OrderCost>();

-      // 获取成本列表
-      const {
-        data: { data: costList, success },
-      } = await business.cost.listCost({
-        costListQry: {
-          status: true,
-        },
+      orderCostList?.forEach((item) => {
+        if (item.costId && costIds.includes(item.costId)) {
+          orderCostMap.set(item.costId, item);
+        }
      });

-      if (success) {
-        const newCostList = costList?.filter((item) => {
-          return costIds.includes(item.costId);
-        });
+      // 构建初始列表，基于costTemplate中的项目
+      const newOrderCostList: IOrderCost[] = [];

-        // 遍历costList，将costList中的项目添加到orderCostList中
-        newCostList?.forEach((item) => {
-          const orderCost = orderCostList.find(
-            (cost) => cost.costId === item.costId,
-          );
+      // 遍历costList，将costList中的项目添加到orderCostList中
+      parsedCostTemplate.productionTypeList?.forEach((item) => {
+        const existingItem = orderCostMap.get(item.costItemId);

-          const selected = parsedCostTemplate.productionTypeList?.some(
-            (cost) => {
-              return cost.costId === item.costId;
-            },
-          );
-
-          if (orderCost) {
-            newOrderCostList.push({
-              ...orderCost,
-              selected: selected,
-            });
-          } else {
-            newOrderCostList.push({
-              orderCostId: generateShortId(),
-              costItemIds: item.costItemIds,
-              costId: item.costId,
-              name: item.name,
-              type: item.type,
-              selected: selected,
-              count: 1,
-              price: item.price || 0,
-              unit: item.unit || "元",
-            });
-          }
-        });
-      }
+        if (existingItem) {
+          newOrderCostList.push({
+            ...existingItem,
+            selected: !!existingItem,
+          });
+        } else {
+          newOrderCostList.push({
+            orderCostId: generateShortId(),
+            costItemIds: item.costItemIds,
+            costId: item.costId,
+            name: item.name,
+            type: item.type,
+            selected: false,
+            count: 1,
+            price: item.price || 0,
+            unit: item.unit || "元",
+          });
+        }
+      });

      onChange?.({
        ...value,
--- a/packages/app-client/src/components/purchase/module/OrderCostItem.tsx
+++ b/packages/app-client/src/components/purchase/module/OrderCostItem.tsx
@ -47,8 +47,6 @@ export default forwardRef<OrderCostItemRef, IOrderCostItemProps>(
        }
      });

-      console.log("orderCostItemList,", orderCostItemList);
-
      // 构建初始列表，基于costTemplate中的项目
      const newOrderCostItemList: IOrderCostItem[] = [];

@ -62,7 +60,7 @@ export default forwardRef<OrderCostItemRef, IOrderCostItemProps>(
          name: item.name,
          price: item.price,
          unit: item.unit,
-          selected: true,
+          selected: !!existingItem,
          count: existingItem?.count || 1,
          payerType: existingItem?.payerType,
          type: item.type,
@ -82,7 +80,7 @@ export default forwardRef<OrderCostItemRef, IOrderCostItemProps>(
            name: item.name,
            price: item.price,
            unit: item.unit,
-            selected: true,
+            selected: !!existingItem,
            count: existingItem?.count || 1,
            payerType: existingItem?.payerType,
            type: item.type,
@ -90,7 +88,6 @@ export default forwardRef<OrderCostItemRef, IOrderCostItemProps>(
          });
        });

-      console.log("newOrderCostItemList,", newOrderCostItemList);
      onChange?.({
        ...value,
        orderCostItemList: newOrderCostItemList,
--- a/packages/app-client/src/components/purchase/module/OrderPackage.tsx
+++ b/packages/app-client/src/components/purchase/module/OrderPackage.tsx
@ -41,7 +41,7 @@ export default forwardRef<OrderPackageRef, IOrderPackageProps>(

    useEffect(() => {
      // 初始化数据
-      if (orderPackageList.length > 0) {
+      if (orderPackageList?.length > 0) {
        // 根据当前供应商确定需要检查的纸箱类型
        let requiredTypes: string[] = [];

--- a/packages/app-client/src/components/purchase/module/PurchasePreview.tsx
+++ b/packages/app-client/src/components/purchase/module/PurchasePreview.tsx
@ -245,7 +245,7 @@ export default function PurchasePreview(props: IPurchasePreviewProps) {
        </View>
      </View>

-      {purchaseOrder.orderPackageList.length > 0 && (
+      {purchaseOrder.orderPackageList?.length > 0 && (
        <>
          <View className="text-sm font-bold">空箱使用明细</View>
          <View className="flex flex-col gap-2.5">
--- a/packages/app-client/src/components/purchase/module/Weigh.tsx
+++ b/packages/app-client/src/components/purchase/module/Weigh.tsx
@ -535,9 +535,9 @@ export default forwardRef<WeighRef, IWeightProps>(function Weigh(props, ref) {
                <Radio.Group
                  direction="horizontal"
                  value={
-                    supplierVO.isPaper
+                    supplierVO.isPaper === true
                      ? "true"
-                      : !supplierVO.isPaper
+                      : supplierVO.isPaper === false
                        ? "false"
                        : undefined
                  }
@ -639,7 +639,7 @@ export default forwardRef<WeighRef, IWeightProps>(function Weigh(props, ref) {
            <Radio.Group
              direction="horizontal"
              value={
-                supplierVO.isDepositPaid
+                supplierVO.isDepositPaid === true
                  ? "true"
                  : supplierVO.isDepositPaid === false
                    ? "false"
--- a/packages/app-client/src/constant/app.ts
+++ b/packages/app-client/src/constant/app.ts
@ -1,2 +1,2 @@
 // App 相关常量
-export const APP_VERSION = "v0.0.26";
+export const APP_VERSION = "v0.0.28";
--- a/packages/app-client/src/pages/purchase/enter/create.tsx
+++ b/packages/app-client/src/pages/purchase/enter/create.tsx
@ -1,8 +1,8 @@
 import hocAuth from "@/hocs/auth";
-import { CommonComponent } from "@/types/typings";
-import { View } from "@tarojs/components";
-import { purchase } from "@/constant";
-import { useEffect, useRef, useState } from "react";
+import {CommonComponent} from "@/types/typings";
+import {View} from "@tarojs/components";
+import {purchase} from "@/constant";
+import {useEffect, useRef, useState} from "react";
 import {
  Icon,
  MelonFarmer,
@ -22,10 +22,10 @@ import {
  Weigh,
  WeighRef,
 } from "@/components";
-import { business } from "@/services";
-import { buildUrl, generateShortId, SupplierWeightCalculator } from "@/utils";
+import {business} from "@/services";
+import {buildUrl, generateShortId, SupplierWeightCalculator} from "@/utils";
 import Taro from "@tarojs/taro";
-import { Button } from "@nutui/nutui-react-taro";
+import {Button} from "@nutui/nutui-react-taro";

 const defaultSupplierList: Partial<BusinessAPI.OrderSupplier>[] = [
  {
@ -422,19 +422,24 @@ export default hocAuth(function Page(props: CommonComponent) {
          purchaseOrder?.orderSupplierList[
            purchaseOrder?.orderSupplierList.length - 1
          ]?.isLast && (
-            <Button
-              icon={<Icon name={"plus"} size={20} />}
-              type={"primary"}
-              size={"xlarge"}
-              fill={"outline"}
-              block
-              className="border-primary text-primary flex w-full items-center justify-center !border-4 !bg-white"
-              onClick={() => {
-                orderOptionRef.current?.onAdd();
-              }}
-            >
-              <View>添加另一个瓜农</View>
-            </Button>
+            <View className="flex flex-1 flex-col gap-2.5 bg-[#D1D5DB] p-2.5 pt-2.5">
+              <View className={"flex flex-1 flex-col gap-2.5"}>
+                <View className="text-sm font-bold">快捷操作</View>
+                <Button
+                  icon={<Icon name={"plus"} size={20} />}
+                  type={"primary"}
+                  size={"xlarge"}
+                  fill={"outline"}
+                  block
+                  className="border-primary text-primary flex w-full items-center justify-center !border-4 !bg-white"
+                  onClick={() => {
+                    orderOptionRef.current?.onAdd();
+                  }}
+                >
+                  <View>添加另一个瓜农</View>
+                </Button>
+              </View>
+            </View>
          )}
      </View>