perf: 产品管理: 树组件操作

src/views/products/Detail/ProductsTree.jsx

@@ -4,6 +4,7 @@ import { CaretDownOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import useProductsStore from '@/stores/Products/Index';
 import { useProductsTypes, useProductsAuditStatesMapVal } from '@/hooks/useProductsSets';
+import { groupBy, sortBy } from '@/utils/commons';
 
 const flattenTreeFun = (tree) => {
   let flatList = [];
@@ -52,6 +53,13 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
     // 只显示有产品的类型;
     // const title = text || r.lgc_details?.['2']?.title || r.lgc_details?.['1']?.title || '';
     const hasDataTypes = Object.keys(agencyProducts);
+    // const cityData = groupBy(productsSortByHT, (row) => `${row.info.city_id}-${row.info.city_name}`);
+    const copyAgencyProducts = structuredClone(agencyProducts);
+    Object.keys(copyAgencyProducts).map((key) => {
+      const _cityProductsData = groupBy(copyAgencyProducts[key], (row) => `${row.info.city_name || '(空)'}`);
+      copyAgencyProducts[key] = _cityProductsData;
+    });
+    // console.log(copyAgencyProducts);
     const _show = productsTypes
       .filter((kk) => hasDataTypes.includes(kk.value))
       .map((ele) => ({
@@ -62,10 +70,20 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
           const lgc_map = product.lgc_details.reduce((rlgc, clgc) => ({...rlgc, [clgc.lgc]: clgc}), {});
           return {
           title: product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || '',
+          // title: `【${product.info.city_name}】` + (product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || ''),
           // key: `${ele.value}-${product.info.id}`,
           key: product.info.id,
           _raw: product,
+          isLeaf: true,
         }}),
+        // 增加`城市`层级
+        _children: Object.keys(copyAgencyProducts[ele.value] || []).map(city => {
+          return {
+            title: city,
+            key: `${ele.value}-${city}`,
+            children: copyAgencyProducts[ele.value][city],
+          };
+        }),
       }));
     setTreeData(_show);
     setRawTreeData(_show);
@@ -88,12 +106,17 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
     setSearchValue(value);
     setAutoExpandParent(true);
   };
-  const handleNodeSelect = (_, { node }) => {
+  const handleNodeSelect = (selectedKeys, { node }) => {
     if (node._raw) {
       setEditingProduct(node._raw);
+    } else {
+      // 单击: 折叠/展开
+      // const isExpand = expandedKeys.includes(selectedKeys[0]);
+      // const _keys = isExpand ? expandedKeys.filter(k => k !== node.key) : [].concat(expandedKeys, selectedKeys);
+      // setExpandedKeys(_keys);
     }
     if (typeof onNodeSelect === 'function') {
-      onNodeSelect(_, { node });
+      onNodeSelect(selectedKeys, { node });
     }
   };
   const onExpand = (keys) => {
@@ -123,7 +146,7 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
       <Input.Search placeholder='Search' onChange={onSearch} allowClear className='sticky top-1 z-20 mb-3' />
       <Tree
         blockNode
-        showLine
+        showLine defaultExpandAll expandAction={'doubleClick'}
         selectedKeys={[editingProduct?.info?.id || editingProduct?.info?.product_type_id]}
         switcherIcon={<CaretDownOutlined />}
         onSelect={handleNodeSelect}