import { useEffect, useState } from 'react' import { Button, Select, // Collapse, Tree } from 'antd' import { CloseOutlined, DeleteOutlined } from '@ant-design/icons'; // import { // DownOutlined, // } from '@ant-design/icons'; import TreeMenu from './components/TreeMenu/TreeMenu' // import type { TreeDataNode } from 'antd'; import './edit-tow.css' export default function EditTwo(props: any) { const height = window.innerHeight - 350; const handleSubmit = () => { // console.log(form); props.setEditProcess(3); // 调用表单实例的 submit 方法 // form.submit(); }; // 初始化展开状态，默认所有大类的小类都隐藏 const [expandedIds, setExpandedIds] = useState([]); // 初始化勾选状态，默认所有小类都未勾选 const [checkedIds, setCheckedIds] = useState([]); // 存储选中的大类和小类信息 // const [selectedCategories, setSelectedCategories] = useState<{ // id: any; // name: string; // children: { id: any; name: string }[]; // }[]>([]); // 存储选中的大类、中类和小类信息 // 自定义函数，有小数保留两位，没小数不保留 const formatNumber = (num: number) => { return Number.isInteger(num) ? num : num.toFixed(2); }; const [selectedCategories, setSelectedCategories] = useState<{ id: any; name: string; children: { id: any; name: string; children: { id: any; name: string }[]; }[]; }[]>([]); // 模拟商标分类数据 const trademarkCategories = [ { id: 1, name: '大类1', children: [ { id: 11, name: '中类1-1', children: [ { id: 111, name: '小类1-1-1' }, { id: 112, name: '小类1-1-2' }, { id: 113, name: '小类1-1-3' }, { id: 114, name: '小类1-1-4' }, { id: 115, name: '小类1-1-5' }, { id: 116, name: '小类1-1-6' }, { id: 117, name: '小类1-1-7' }, { id: 118, name: '小类1-1-8' }, { id: 119, name: '小类1-1-9' }, ] }, { id: 12, name: '中类1-2', children: [ { id: 121, name: '小类1-2-1' }, { id: 122, name: '小类1-2-2' }, { id: 123, name: '小类1-2-3' }, { id: 124, name: '小类1-2-4' }, { id: 125, name: '小类1-2-5' }, { id: 126, name: '小类1-2-6' }, { id: 127, name: '小类1-2-7' }, ] } ] }, { id: 2, name: '大类2', children: [ { id: 21, name: '中类2-1', children: [ { id: 211, name: '小类2-1-1' }, { id: 212, name: '小类2-1-2' }, ] }, { id: 22, name: '中类2-2', children: [ { id: 221, name: '小类2-2-1' }, { id: 222, name: '小类2-2-2' }, ] }, { id: 23, name: '中类2-3', children: [ { id: 231, name: '小类2-3-1' }, { id: 232, name: '小类2-3-2' }, ] } ] }, { id: 3, name: '大类3', children: [ { id: 31, name: '中类3-1', children: [ { id: 311, name: '小类3-1-1' }, { id: 312, name: '小类3-1-2' }, ] }, { id: 32, name: '中类3-2', children: [ { id: 321, name: '小类3-2-1' }, { id: 322, name: '小类3-2-2' }, ] } ] } ]; // 处理大类或中类点击事件，切换展开状态 const handleExpandClick = (id: any) => { setExpandedIds(prevIds => { if (prevIds.includes(id)) { return prevIds.filter(prevId => prevId !== id); } else { return [...prevIds, id]; } }); }; // 处理小类点击事件，切换勾选状态 const handleSmallMenuClick = (id: any) => { let targetCategory: any; let targetMiddleCategory: any; // 找到小类所属的大类和中类 outerLoop: for (const category of trademarkCategories) { for (const middleCategory of category.children) { // 检查 middleCategory.children 是否存在 if (middleCategory.children && middleCategory.children.some((child: any) => child.id === id)) { targetCategory = category; targetMiddleCategory = middleCategory; break outerLoop; } } } if (!targetCategory || !targetMiddleCategory) return; const isChecked = checkedIds.includes(id); setCheckedIds(prevIds => { if (isChecked) { return prevIds.filter(prevId => prevId !== id); } else { return [...prevIds, id]; } }); setSelectedCategories(prevSelectedCategories => { const categoryIndex = prevSelectedCategories.findIndex( category => category.id === targetCategory.id ); if (isChecked) { // 取消勾选 if (categoryIndex > -1) { const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex( middleCategory => middleCategory.id === targetMiddleCategory.id ); if (middleCategoryIndex > -1) { const updatedChildren = prevSelectedCategories[categoryIndex].children[middleCategoryIndex].children.filter( child => child.id !== id ); if (updatedChildren.length === 0) { // 若该中类下没有选中的小类，移除该中类 const updatedMiddleCategories = prevSelectedCategories[categoryIndex].children.filter( (_, index) => index !== middleCategoryIndex ); if (updatedMiddleCategories.length === 0) { // 若该大类下没有选中的中类，移除该大类 return prevSelectedCategories.filter( (_, index) => index !== categoryIndex ); } else { return prevSelectedCategories.map((category, index) => index === categoryIndex ? { ...category, children: updatedMiddleCategories } : category ); } } else { return prevSelectedCategories.map((category, catIndex) => catIndex === categoryIndex ? { ...category, children: category.children.map((middleCategory, midIndex) => midIndex === middleCategoryIndex ? { ...middleCategory, children: updatedChildren } : middleCategory ) } : category ); } } } } else { // 勾选 const newChild = targetMiddleCategory.children.find((child: any) => child.id === id); if (categoryIndex > -1) { const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex( middleCategory => middleCategory.id === targetMiddleCategory.id ); if (middleCategoryIndex > -1) { // 若该中类已存在，添加小类到 children 中 return prevSelectedCategories.map((category, catIndex) => catIndex === categoryIndex ? { ...category, children: category.children.map((middleCategory, midIndex) => midIndex === middleCategoryIndex ? { ...middleCategory, children: [...middleCategory.children, { id: newChild.id, name: newChild.name }] } : middleCategory ) } : category ); } else { // 若该中类不存在，新增一个中类项 return prevSelectedCategories.map((category, catIndex) => catIndex === categoryIndex ? { ...category, children: [ ...category.children, { id: targetMiddleCategory.id, name: targetMiddleCategory.name, children: [{ id: newChild.id, name: newChild.name }] } ] } : category ); } } else { // 若该大类不存在，新增一个大类项 return [ ...prevSelectedCategories, { id: targetCategory.id, name: targetCategory.name, children: [ { id: targetMiddleCategory.id, name: targetMiddleCategory.name, children: [{ id: newChild.id, name: newChild.name }] } ] } ]; } } return prevSelectedCategories; }); }; // 处理删除小类的点击事件 const handleDeleteSmallCategory = (categoryId: any, middleCategoryId: any, smallCategoryId: any) => { setSelectedCategories(prevSelectedCategories => { return prevSelectedCategories.map(category => { if (category.id === categoryId) { return { ...category, children: category.children.map(middleCategory => { if (middleCategory.id === middleCategoryId) { return { ...middleCategory, children: middleCategory.children.filter(child => child.id !== smallCategoryId) }; } return middleCategory; }).filter(middleCategory => middleCategory.children.length > 0) }; } return category; }).filter(category => category.children.length > 0); }); // 更新 checkedIds 状态 setCheckedIds(prevCheckedIds => prevCheckedIds.filter(id => id !== smallCategoryId)); }; // 处理删除大类的点击事件 const handleDeleteCategory = (categoryId: any) => { // 找到要删除的大类下所有小类的 id const targetCategory = selectedCategories.find(category => category.id === categoryId); const smallCategoryIdsToRemove = targetCategory?.children.flatMap(middleCategory => middleCategory.children.map(child => child.id) ) || []; // 更新 selectedCategories 状态，移除对应的大类 setSelectedCategories(prevSelectedCategories => prevSelectedCategories.filter(category => category.id !== categoryId) ); // 更新 checkedIds 状态，移除该大类下所有小类的 id setCheckedIds(prevCheckedIds => prevCheckedIds.filter(id => !smallCategoryIdsToRemove.includes(id)) ); }; useEffect(() => { console.log('selectedCategories', selectedCategories); }, [selectedCategories]) useEffect(() => { // 模拟有值的 selectedCategories // const youzhi = [ // { // id: 1, // name: '大类1', // children: [ // { // id: 11, // name: '中类1-1', // children: [ // { id: 111, name: '小类1-1-1' }, // { id: 112, name: '小类1-1-4' }, // { id: 113, name: '小类1-1-3' }, // ] // } // ] // } // ] // setSelectedCategories(youzhi) // const initialCheckedIds = youzhi.flatMap(category => // category.children.flatMap(middleCategory => // middleCategory.children.map(child => child.id) // ) // ); // setCheckedIds(initialCheckedIds); }, []) return (
选择推荐方案