55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
|
import { api } from "@nice/client/";
|
||
|
|
import { Checkbox, Form } from "antd";
|
||
|
|
import { TermDto } from "@nice/common";
|
||
|
|
import { useCallback, useEffect, useState } from "react";
|
||
|
|
|
||
|
|
export default function TermParentSelector({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
className,
|
||
|
|
placeholder = "选择分类",
|
||
|
|
multiple = true,
|
||
|
|
taxonomyId,
|
||
|
|
domainId,
|
||
|
|
style,
|
||
|
|
}: any) {
|
||
|
|
const utils = api.useUtils();
|
||
|
|
const [selectedValues, setSelectedValues] = useState<string[]>([]); // 用于存储选中的值
|
||
|
|
const [termsData, setTermsData] = useState<any[]>([]);
|
||
|
|
|
||
|
|
|
||
|
|
const {
|
||
|
|
data,
|
||
|
|
isLoading,
|
||
|
|
}: { data: TermDto[]; isLoading: boolean } = api.term.findMany.useQuery({
|
||
|
|
where: {
|
||
|
|
taxonomy: {
|
||
|
|
id: taxonomyId,
|
||
|
|
},
|
||
|
|
parentId: null
|
||
|
|
},
|
||
|
|
});
|
||
|
|
const handleCheckboxChange = (checkedValues: string[]) => {
|
||
|
|
setSelectedValues(checkedValues); // 更新选中的值
|
||
|
|
if (onChange) {
|
||
|
|
onChange(checkedValues); // 调用外部传入的 onChange 回调
|
||
|
|
}
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<div className={className} style={style}>
|
||
|
|
<Form onFinish={null}>
|
||
|
|
<Form.Item name="categories">
|
||
|
|
<Checkbox.Group onChange={handleCheckboxChange}>
|
||
|
|
{data?.map((category) => (
|
||
|
|
<div className="w-full h-9 p-2 my-1">
|
||
|
|
<Checkbox className="text-base text-slate-700" key={category.id} value={category.id}>
|
||
|
|
{category.name}
|
||
|
|
</Checkbox>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</Checkbox.Group>
|
||
|
|
</Form.Item>
|
||
|
|
</Form>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|