From 8d761bb98eed24b3dd6f7542567e5b5b249a36a4 Mon Sep 17 00:00:00 2001
From: Lei OT <lyt@hainatravel.com>
Date: Thu, 28 Aug 2025 15:01:43 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E4=BA=A7=E5=93=81=E7=AE=A1=E7=90=86:?=
 =?UTF-8?q?=20=E5=A4=8D=E5=88=B6`=E7=B1=BB=E5=9E=8B`/`=E4=BA=A7=E5=93=81`?=
 =?UTF-8?q?=E6=93=8D=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/ProductsSelector.jsx | 45 +++++++++++++++++++++--------
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/src/components/ProductsSelector.jsx b/src/components/ProductsSelector.jsx
index a3d79cf..09b4852 100644
--- a/src/components/ProductsSelector.jsx
+++ b/src/components/ProductsSelector.jsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { Select, Spin } from 'antd';
+import { Spin, Cascader } from 'antd';
 import { fetchJSON } from '@/utils/request';
 import { HT_HOST } from '@/config';
 import { useTranslation } from 'react-i18next';
@@ -11,10 +11,19 @@ export const fetchAgencyProductsList = async (params) => {
   const { errcode, result } = await fetchJSON(`${HT_HOST}/Service_BaseInfoWeb/travel_agency_products`, params);
   const byTypes = errcode !== 0 ? {} : (groupBy(result.products, (row) => row.info.product_type_name));
   // console.log(byTypes)
-  return Object.keys(byTypes).map((type_name) => ({ lable: type_name, title: type_name, key: type_name, options: byTypes[type_name].map(row => ({...row, label: `${row.info.code} : ${row.info.title}`, value: row.info.id})) }));
+  return Object.keys(byTypes).map((type_name) => ({
+    label: type_name,
+    title: type_name,
+    key: type_name,
+    value: type_name,
+    // disableCheckbox: true,
+    level: 1,
+    options: byTypes[type_name].map((row) => ({ ...row, label: `${row.info.code} : ${row.info.title}`, value: row.info.id })),
+    children: byTypes[type_name].map((row) => ({ ...row, label: `${row.info.code} : ${row.info.title}`, value: row.info.id, key: row.info.id, level:2 })),
+  }));
 };
 
-const ProductsSelector = ({ params, ...props }) => {
+const ProductsSelector = ({ params, value, ...props }) => {
   const { t } = useTranslation();
   const [fetching, setFetching] = useState(false);
   const [options, setOptions] = useState([]);
@@ -34,22 +43,34 @@ const ProductsSelector = ({ params, ...props }) => {
     return () => {};
   }, []);
 
+  const filter = (inputValue, path) => path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1);
+
+  const onCascaderChange = (value, selectedOptions) => {
+    // console.log(value, selectedOptions)
+    const selectedP = selectedOptions.map(([parent, item]) => item);
+    // console.log(selectedP);
+    if (typeof props.onChange === 'function') {
+      props.onChange(selectedP);
+    }
+  }
+
+
   return (
     <>
-      <Select
+      <Cascader
         placeholder={t('products:ProductName')}
-        labelInValue
-        // filterOption={false}
-        showSearch
         allowClear
+        expandTrigger="hover"
+        multiple
+        showCheckedStrategy={Cascader.SHOW_CHILD}
         maxTagCount={0}
-        dropdownStyle={{ width: '20rem' }}
+        classNames={{ popup: { root: 'h-96 overflow-y-auto [&_.ant-cascader-menu]:h-full [&_.ant-cascader-checkbox-disabled]:hidden'}}}
         {...props}
-        // onSearch={debounceFetcher}
         notFoundContent={fetching ? <Spin size='small' /> : null}
-        optionFilterProp='label'
-        options={options}>
-      </Select>
+        options={options}
+        onChange={onCascaderChange}
+        showSearch={{ filter }}
+      />
     </>
   );
 };