feat: 产品树: 显示多城市

src/views/products/Detail/ProductQuotationLogPopover.jsx

@@ -180,6 +180,9 @@ const ProductQuotationLogPopover = ({ method, triggerProps = {}, ...props }) =>
   const columns = [...columnsSets(t, false), { title: '时间', dataIndex: 'updatetime', key: 'updatetime' }];
   return (
     <Popover
+      placement='bottom'
+      className=''
+      rootClassName='w-5/6'
       {...props}
       title={
         <div className='flex justify-between mt-0 gap-4 items-center'>
@@ -195,9 +198,6 @@ const ProductQuotationLogPopover = ({ method, triggerProps = {}, ...props }) =>
         </>
       }
       trigger={['click']}
-      placement='bottom'
-      className=''
-      rootClassName='w-5/6'
       open={open}
       onOpenChange={(v) => {
         setOpen(v);

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(() => {
@@ -74,28 +75,30 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
     const _show = productsTypes
       .filter((kk) => hasDataTypes.includes(kk.value))
       .map((ele) => ({
-        ...ele,
+          ...ele,
-        title: ele.label,
+          title: ele.label,
-        key: ele.value,
+          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}), {});
+            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: `${ele.value}-${product.info.id}`,
-          key: product.info.id,
+              key: `${product.info.id}-${city.id}`,
-          _raw: product,
+              _raw: product,
-          isLeaf: true,
+              isLeaf: true,
-        }}),
+            }));
-        // 增加`城市`层级
+            return arr.concat(flatCityP);
-        // _children: Object.keys(copyAgencyProducts[ele.value] || []).map(city => {
+          }, []),
-        //   return {
+          // 增加`城市`层级
-        //     title: city,
+          // _children: Object.keys(copyAgencyProducts[ele.value] || []).map(city => {
-        //     key: `${ele.value}-${city}`,
+          //   return {
-        //     children: copyAgencyProducts[ele.value][city],
+          //     title: city,
-        //   };
+          //     key: `${ele.value}-${city}`,
-        // }),
+          //     children: copyAgencyProducts[ele.value][city],
-      }));
+          //   };
+          // }),
+        }));
     setTreeData(_show);
     setRawTreeData(_show);
     setFlattenTreeData(flattenTreeFun(_show));
@@ -106,6 +109,16 @@ const ProductsTree = ({ onNodeSelect, ...props }) => {
     return () => {};
   }, [productsTypes, agencyProducts]);
 
+  useEffect(() => {
+    const allKeysWithCity = [...editingProduct.info.city_list, { id: editingProduct.info.city_id, name: editingProduct.info.city_name }].map(
+      (city) => `${editingProduct.info.id}-${city.id}`
+    );
+    setSelectedKeys(allKeysWithCity);
+
+    return () => {};
+  }, [editingProduct?.info?.id]);
+
+
   const [searchValue, setSearchValue] = useState('');
   const onSearch = ({ target: { value } }) => {
     // const { value } = e.target;
@@ -130,6 +143,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 +189,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}