perf: 产品管理: 复制`类型`/`产品`操作

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}
-        options={options}>
+        onChange={onCascaderChange}
-      </Select>
+        showSearch={{ filter }}
+      />
     </>
   );
 };