You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
78 lines
2.6 KiB
JavaScript
78 lines
2.6 KiB
JavaScript
import { useEffect, useState } from 'react';
|
|
import { Spin, Cascader } from 'antd';
|
|
import { fetchJSON } from '@/utils/request';
|
|
import { HT_HOST } from '@/config';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { groupBy } from '@/utils/commons';
|
|
|
|
// 产品列表
|
|
export const fetchAgencyProductsList = async (params) => {
|
|
const map = { title: 'label', id: 'value' };
|
|
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) => ({
|
|
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, value, ...props }) => {
|
|
const { t } = useTranslation();
|
|
const [fetching, setFetching] = useState(false);
|
|
const [options, setOptions] = useState([]);
|
|
|
|
const fetchAction = async () => {
|
|
setOptions([]);
|
|
setFetching(true);
|
|
const data = await fetchAgencyProductsList(params);
|
|
// console.log(data)
|
|
setOptions(data);
|
|
setFetching(false);
|
|
return data;
|
|
};
|
|
useEffect(() => {
|
|
fetchAction();
|
|
|
|
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 (
|
|
<>
|
|
<Cascader
|
|
placeholder={t('products:ProductName')}
|
|
allowClear
|
|
expandTrigger="hover"
|
|
multiple
|
|
showCheckedStrategy={Cascader.SHOW_CHILD}
|
|
maxTagCount={0}
|
|
classNames={{ popup: { root: 'h-96 overflow-y-auto [&_.ant-cascader-menu]:h-full [&_.ant-cascader-checkbox-disabled]:hidden'}}}
|
|
{...props}
|
|
notFoundContent={fetching ? <Spin size='small' /> : null}
|
|
options={options}
|
|
onChange={onCascaderChange}
|
|
showSearch={{ filter }}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
export default ProductsSelector;
|