47c7bdf357
- 添加 PriceEditor 组件用于直接编辑费用金额 - 实现 CostCard 和 CostCreate 组件以支持费用的增删改查 - 在 PurchaseOrderSubmitReview 中修正参数名 supplierId 为 orderSupplierId - 重构 MelonFarmer 组件，改进瓜农信息处理逻辑 - 引入 generateShortId 工具函数生成唯一标识符 - 新增 OrderCostItem 模块用于处理订单费用项初始化与校验 - 优化费用模板解析和默认值填充逻辑 - 增强费用承担方及数量的验证机制 - 调整工头姓名输入时的实时更新与失焦校验功能
134 lines
3.8 KiB
TypeScript
134 lines
3.8 KiB
TypeScript
import { Text, View } from "@tarojs/components";
|
|
import { useState } from "react";
|
|
import { Dialog } from "@nutui/nutui-react-taro";
|
|
import { Icon, PriceEditor } from "@/components";
|
|
import CostCreate from "./CostCreate";
|
|
|
|
interface CostCardComponentProps {
|
|
item: BusinessAPI.OrderCost;
|
|
purchaseOrderVO: BusinessAPI.PurchaseOrderVO;
|
|
readOnly?: boolean;
|
|
onEdit: (
|
|
editedItem: BusinessAPI.OrderCost,
|
|
editedItemList: BusinessAPI.OrderCostItem[],
|
|
) => void;
|
|
onDelete: (orderCostId: string) => void;
|
|
costList: BusinessAPI.CostVO[];
|
|
}
|
|
|
|
export default function CostCard(props: CostCardComponentProps) {
|
|
const {
|
|
item: orderCost,
|
|
purchaseOrderVO,
|
|
readOnly,
|
|
onEdit,
|
|
onDelete,
|
|
costList,
|
|
} = props;
|
|
|
|
// 控制 CostCreate 组件的显示状态
|
|
const [showEditModal, setShowEditModal] = useState(false);
|
|
|
|
const amount = orderCost.count * orderCost.price;
|
|
|
|
const orderCostItemList = purchaseOrderVO.orderCostItemList?.filter(
|
|
(orderCostItem) =>
|
|
orderCost.costItemIds?.includes(orderCostItem.costItemId),
|
|
);
|
|
|
|
const handleDelete = () => {
|
|
Dialog.open("dialog", {
|
|
title: "确认删除",
|
|
content: `确定要删除费用"${orderCost.name}"吗？`,
|
|
confirmText: "确认",
|
|
cancelText: "取消",
|
|
onConfirm: () => {
|
|
onDelete(orderCost.orderCostId);
|
|
Dialog.close("dialog");
|
|
},
|
|
onCancel: () => {
|
|
Dialog.close("dialog");
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<View className="bg-primary/3 rounded-lg border-b border-gray-100 p-2.5">
|
|
<View className="mb-2 flex items-center justify-between">
|
|
<Text className="text-sm font-medium">{orderCost.name}</Text>
|
|
{!readOnly && (
|
|
<View className="flex flex-row gap-2.5">
|
|
<Icon
|
|
name="pen-to-square"
|
|
size={16}
|
|
onClick={() => setShowEditModal(true)}
|
|
/>
|
|
<Icon
|
|
name="circle-xmark"
|
|
size={16}
|
|
color={"var(--color-red-500)"}
|
|
onClick={handleDelete}
|
|
/>
|
|
</View>
|
|
)}
|
|
</View>
|
|
|
|
<View className="flex flex-1">
|
|
<PriceEditor
|
|
value={amount}
|
|
onSave={(newAmount) => {
|
|
const newPrice = newAmount / orderCost.count;
|
|
const editedItem = {
|
|
...orderCost,
|
|
price: newPrice,
|
|
};
|
|
|
|
// 调用 onEdit 回调更新数据
|
|
onEdit(editedItem, orderCostItemList || []);
|
|
}}
|
|
readOnly={readOnly}
|
|
label="金额"
|
|
unit="元"
|
|
icon="money-bill"
|
|
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>
|
|
</View>
|
|
</View>
|
|
|
|
{/* 使用 CostCreate 组件进行编辑 */}
|
|
<CostCreate
|
|
type={orderCost.type}
|
|
costList={costList}
|
|
visible={showEditModal}
|
|
editMode
|
|
orderCost={orderCost}
|
|
orderCostItemList={orderCostItemList}
|
|
onClose={() => setShowEditModal(false)}
|
|
onSave={(editedItem, editedItemList) => {
|
|
onEdit(editedItem, editedItemList);
|
|
setShowEditModal(false);
|
|
}}
|
|
/>
|
|
</>
|
|
);
|
|
}
|