mini-starter/packages/goods-category-management-ui/src/components/GoodsCategoryCascadeSelector.tsx

import React from 'react';
import { useFormContext } from 'react-hook-form';
import {
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
} from '@d8d/shared-ui-components/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;