|
|
@@ -1,13 +1,14 @@
|
|
|
import React, { useState, useEffect } from 'react';
|
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
import { Check, ChevronsUpDown, X } from 'lucide-react';
|
|
|
+import type { InferResponseType } from 'hono/client';
|
|
|
|
|
|
import { Button } from '@d8d/shared-ui-components/components/ui/button';
|
|
|
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@d8d/shared-ui-components/components/ui/command';
|
|
|
import { Popover, PopoverContent, PopoverTrigger } from '@d8d/shared-ui-components/components/ui/popover';
|
|
|
import { Badge } from '@d8d/shared-ui-components/components/ui/badge';
|
|
|
import { cn } from '@d8d/shared-ui-components/utils';
|
|
|
-import { goodsClientManager } from '../api/goodsClient';
|
|
|
+import { goodsClient, goodsClientManager } from '../api/goodsClient';
|
|
|
|
|
|
interface GoodsChildSelectorProps {
|
|
|
value?: number[];
|
|
|
@@ -18,14 +19,7 @@ interface GoodsChildSelectorProps {
|
|
|
placeholder?: string;
|
|
|
}
|
|
|
|
|
|
-interface GoodsOption {
|
|
|
- id: number;
|
|
|
- name: string;
|
|
|
- price: number;
|
|
|
- stock: number;
|
|
|
- spuId: number;
|
|
|
- spuName: string | null;
|
|
|
-}
|
|
|
+type GoodsResponse = InferResponseType<typeof goodsClient.index.$get, 200>['data'][0];
|
|
|
|
|
|
export const GoodsChildSelector: React.FC<GoodsChildSelectorProps> = ({
|
|
|
value = [],
|
|
|
@@ -36,7 +30,7 @@ export const GoodsChildSelector: React.FC<GoodsChildSelectorProps> = ({
|
|
|
placeholder = '选择子商品...'
|
|
|
}) => {
|
|
|
const [open, setOpen] = useState(false);
|
|
|
- const [selectedGoods, setSelectedGoods] = useState<GoodsOption[]>([]);
|
|
|
+ const [selectedGoods, setSelectedGoods] = useState<GoodsResponse[]>([]);
|
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
|
|
|
|
// 获取商品列表
|
|
|
@@ -47,8 +41,7 @@ export const GoodsChildSelector: React.FC<GoodsChildSelectorProps> = ({
|
|
|
query: {
|
|
|
page: 1,
|
|
|
pageSize: 50,
|
|
|
- keyword: searchQuery,
|
|
|
- tenantId: tenantId
|
|
|
+ keyword: searchQuery
|
|
|
}
|
|
|
});
|
|
|
if (res.status !== 200) throw new Error('获取商品列表失败');
|
|
|
@@ -62,7 +55,7 @@ export const GoodsChildSelector: React.FC<GoodsChildSelectorProps> = ({
|
|
|
const availableGoods = React.useMemo(() => {
|
|
|
if (!goodsData) return [];
|
|
|
|
|
|
- return goodsData.filter((goods: GoodsOption) => {
|
|
|
+ return goodsData.filter((goods: GoodsResponse) => {
|
|
|
// 排除自己
|
|
|
if (parentGoodsId && goods.id === parentGoodsId) return false;
|
|
|
|
|
|
@@ -80,7 +73,7 @@ export const GoodsChildSelector: React.FC<GoodsChildSelectorProps> = ({
|
|
|
// 初始化选中的商品
|
|
|
useEffect(() => {
|
|
|
if (value && value.length > 0 && goodsData) {
|
|
|
- const selected = goodsData.filter((goods: GoodsOption) =>
|
|
|
+ const selected = goodsData.filter((goods: GoodsResponse) =>
|
|
|
value.includes(goods.id)
|
|
|
);
|
|
|
setSelectedGoods(selected);
|
|
|
@@ -89,7 +82,7 @@ export const GoodsChildSelector: React.FC<GoodsChildSelectorProps> = ({
|
|
|
}
|
|
|
}, [value, goodsData]);
|
|
|
|
|
|
- const handleSelect = (goods: GoodsOption) => {
|
|
|
+ const handleSelect = (goods: GoodsResponse) => {
|
|
|
const newSelected = [...selectedGoods, goods];
|
|
|
setSelectedGoods(newSelected);
|
|
|
if (onChange) {
|
|
|
@@ -159,7 +152,7 @@ export const GoodsChildSelector: React.FC<GoodsChildSelectorProps> = ({
|
|
|
{isLoading ? '加载中...' : '未找到商品'}
|
|
|
</CommandEmpty>
|
|
|
<CommandGroup>
|
|
|
- {availableGoods.map((goods: GoodsOption) => {
|
|
|
+ {availableGoods.map((goods: GoodsResponse) => {
|
|
|
const isSelected = selectedGoods.some(g => g.id === goods.id);
|
|
|
return (
|
|
|
<CommandItem
|