|
|
@@ -0,0 +1,113 @@
|
|
|
+import React from 'react';
|
|
|
+import { useFormContext } from 'react-hook-form';
|
|
|
+import {
|
|
|
+ FormField,
|
|
|
+ FormItem,
|
|
|
+ FormLabel,
|
|
|
+ FormControl,
|
|
|
+ FormMessage,
|
|
|
+} from '@/client/components/ui/form';
|
|
|
+import GoodsCategorySelector from './GoodsCategorySelector';
|
|
|
+
|
|
|
+interface GoodsCategoryCascadeSelectorProps {
|
|
|
+ formNamePrefix?: string;
|
|
|
+ required?: boolean;
|
|
|
+}
|
|
|
+
|
|
|
+const GoodsCategoryCascadeSelector: React.FC<GoodsCategoryCascadeSelectorProps> = ({
|
|
|
+ formNamePrefix = '',
|
|
|
+ required = false,
|
|
|
+}) => {
|
|
|
+ const form = useFormContext();
|
|
|
+
|
|
|
+ // 监听一级分类变化,重置二级和三级分类
|
|
|
+ const handleCategoryId1Change = (value: number) => {
|
|
|
+ form.setValue(`${formNamePrefix}categoryId1`, value);
|
|
|
+ form.setValue(`${formNamePrefix}categoryId2`, 0);
|
|
|
+ form.setValue(`${formNamePrefix}categoryId3`, 0);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 监听二级分类变化,重置三级分类
|
|
|
+ const handleCategoryId2Change = (value: number) => {
|
|
|
+ form.setValue(`${formNamePrefix}categoryId2`, value);
|
|
|
+ form.setValue(`${formNamePrefix}categoryId3`, 0);
|
|
|
+ };
|
|
|
+
|
|
|
+ // 监听三级分类变化
|
|
|
+ const handleCategoryId3Change = (value: number) => {
|
|
|
+ form.setValue(`${formNamePrefix}categoryId3`, value);
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="grid grid-cols-3 gap-4">
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name={`${formNamePrefix}categoryId1`}
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>
|
|
|
+ 一级分类
|
|
|
+ {required && <span className="text-red-500"> *</span>}
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <GoodsCategorySelector
|
|
|
+ value={field.value || undefined}
|
|
|
+ onChange={handleCategoryId1Change}
|
|
|
+ level={1}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name={`${formNamePrefix}categoryId2`}
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>
|
|
|
+ 二级分类
|
|
|
+ {required && <span className="text-red-500"> *</span>}
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <GoodsCategorySelector
|
|
|
+ value={field.value || undefined}
|
|
|
+ onChange={handleCategoryId2Change}
|
|
|
+ level={2}
|
|
|
+ parentId={form.watch(`${formNamePrefix}categoryId1`)}
|
|
|
+ disabled={!form.watch(`${formNamePrefix}categoryId1`)}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+
|
|
|
+ <FormField
|
|
|
+ control={form.control}
|
|
|
+ name={`${formNamePrefix}categoryId3`}
|
|
|
+ render={({ field }) => (
|
|
|
+ <FormItem>
|
|
|
+ <FormLabel>
|
|
|
+ 三级分类
|
|
|
+ {required && <span className="text-red-500"> *</span>}
|
|
|
+ </FormLabel>
|
|
|
+ <FormControl>
|
|
|
+ <GoodsCategorySelector
|
|
|
+ value={field.value || undefined}
|
|
|
+ onChange={handleCategoryId3Change}
|
|
|
+ level={3}
|
|
|
+ parentId={form.watch(`${formNamePrefix}categoryId2`)}
|
|
|
+ disabled={!form.watch(`${formNamePrefix}categoryId2`)}
|
|
|
+ />
|
|
|
+ </FormControl>
|
|
|
+ <FormMessage />
|
|
|
+ </FormItem>
|
|
|
+ )}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default GoodsCategoryCascadeSelector;
|