feat: 产品树: 显示多城市

src/views/products/Detail/ProductsTree.jsx

@@ -53,6 +53,7 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
   const [rawTreeData, setRawTreeData] = useState([]);
   const [flattenTreeData, setFlattenTreeData] = useState([]);
   const [expandedKeys, setExpandedKeys] = useState([]);
+  const [selectedKeys, setSelectedKeys] = useState([]);
   const [autoExpandParent, setAutoExpandParent] = useState(true);
 
   useEffect(() => {
@@ -77,16 +78,18 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
           ...ele,
           title: ele.label,
           key: ele.value,
-        children: (agencyProducts[ele.value] || []).map((product) => {
+          children: (agencyProducts[ele.value] || []).reduce((arr, product) => {
             const lgc_map = product.lgc_details.reduce((rlgc, clgc) => ({ ...rlgc, [clgc.lgc]: clgc }), {});
-          return {
+            const combindCityList = product.info.city_list.indexOf(city => city.id === product.info.city_id) !== -1 ? product.info.city_list : [...product.info.city_list, { id: product.info.city_id, name: product.info.city_name }];
-          // title: product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || '',
+            const flatCityP = combindCityList.map(city => ({
-          title: `【${product.info.city_name}】` + (product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || product.info.product_title || ''),
+              title: `【${city.name}】` + (product.info.title || lgc_map?.['2']?.title || lgc_map?.['1']?.title || product.info.product_title || ''),
               // key: `${ele.value}-${product.info.id}`,
-          key: product.info.id,
+              key: `${product.info.id}-${city.id}`,
               _raw: product,
               isLeaf: true,
-        }}),
+            }));
+            return arr.concat(flatCityP);
+          }, []),
           // 增加`城市`层级
           // _children: Object.keys(copyAgencyProducts[ele.value] || []).map(city => {
           //   return {
@@ -130,6 +133,8 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
   const handleNodeSelect = (selectedKeys, { node }) => {
     if (node._raw) {
       setEditingProduct(node._raw);
+      const allKeysWithCity = [...node._raw.info.city_list, { id: node._raw.info.city_id, name: node._raw.info.city_name }].map((city) => `${node._raw.info.id}-${city.id}`);
+      setSelectedKeys(allKeysWithCity);
     } else {
       // 单击: 折叠/展开
       // const isExpand = expandedKeys.includes(selectedKeys[0]);
@@ -174,7 +179,7 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
       <Tree
         blockNode
         showLine defaultExpandAll expandAction={'doubleClick'}
-        selectedKeys={[editingProduct?.info?.id || editingProduct?.info?.product_type_id]}
+        selectedKeys={selectedKeys} multiple
         switcherIcon={<CaretDownOutlined />}
         onSelect={handleNodeSelect}
         treeData={treeData}