提交 42e6bff7 作者: 翁进城

删除旧版本filter文件

上级 b736363e
import { Space, Button, Select, Collapse } from "antd";
import styles from "../../index.module.scss";
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from "react";
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.appType().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
appName: "应用:" + item.appName,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>应用:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.appName}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.appName}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
import { Space, Button, Select, Collapse } from "antd";
import styles from "../../index.module.scss";
import api, { FilterOptionResp } from "../../api";
import { useEffect, useState } from "react";
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function BrandItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.brand().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "品牌:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>品牌:</div>
<div className={`${styles.filterItemMain} ${data.length <= 10 && styles.disabled}`}>
<Collapse
ghost
collapsible="icon"
expandIconPosition="end"
>
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function Category(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.categoryId().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "类目:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>类目:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.category().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "类目:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>类目:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.deviceBrand().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "品牌:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>品牌:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.deviceModel().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "型号:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>型号:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function CategoryItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.industry().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "行业:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>行业:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useEffect, useState } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function ModelItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.model().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "型号:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>型号:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function PartItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.part().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "部件:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>部件:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
import { Space, Button, Select, Collapse } from 'antd';
import styles from '../../index.module.scss';
import api, { FilterOptionResp } from "../../api";
import { useState, useEffect } from 'react';
type Props = {
onChange: (id: FilterOptionResp) => void;
};
export default function QualityItem(props: Props) {
const [data, setData] = useState<FilterOptionResp[]>([]);
useEffect(() => {
api.quality().then((res) => {
setData(res?.result || []);
});
}, []);
const onClick = (item: FilterOptionResp) => {
props.onChange({
id: item.id,
name: "成色:" + item.name,
});
};
return (
<div className={styles.filterItem}>
<div className={styles.filterItemTitle}>成色:</div>
<div
className={`${styles.filterItemMain} ${
data.length <= 10 && styles.disabled
}`}
>
<Collapse ghost collapsible="icon" expandIconPosition="end">
<Collapse.Panel
header={
<Space size={40}>
{data.slice(0, 10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
}
key="1"
>
<Space size={40}>
{data.slice(10).map((item) => {
return (
<Button
type="link"
key={item.id}
onClick={(e) => onClick(item)}
>
{item.name}
</Button>
);
})}
</Space>
</Collapse.Panel>
</Collapse>
</div>
</div>
);
}
\ No newline at end of file
import CategoryItem from './compoents/categoryItem'
import Category from './compoents/category'
import { FilterOptionResp, RegionResp } from './api' import { FilterOptionResp, RegionResp } from './api'
import ResultItem from './compoents/resultItem' import ResultItem from './compoents/resultItem'
import RegionItem from './compoents/regionItem' import RegionItem from './compoents/regionItem'
...@@ -12,55 +11,20 @@ import React, { ...@@ -12,55 +11,20 @@ import React, {
Ref, Ref,
} from 'react' } from 'react'
import { useRouter } from 'next/router' import { useRouter } from 'next/router'
import BrandItem from './compoents/brandItem'
import ModelItem from './compoents/modelItem'
import PartItem from './compoents/partItem'
import QualityItem from './compoents/qualityItem'
import Industry from './compoents/industry'
import AppType from './compoents/appType'
import DeviceBrand from './compoents/deviceBrand'
import DeviceModel from './compoents/deviceModel'
import TypeInfo from './compoents/typeInfo' import TypeInfo from './compoents/typeInfo'
import api, { TypesResp, InfoList } from './api' import api, { TypesResp, InfoList } from './api'
export type AdapterResult = { export type AdapterResult = {
// brandId?: number
// districtId?: number
// modelId?: number
// partsId?: number
// productCategoryId?: number
// qualityId?: number
// industryId?: number
// appTypeId?: number
categoryId?: any[] categoryId?: any[]
provinceId?: number provinceId?: number
} }
export type FilterResult = { export type FilterResult = {
// region?: RegionResp
// brand?: FilterOptionResp
// category?: FilterOptionResp
// part?: FilterOptionResp
// model?: FilterOptionResp
// quality?: FilterOptionResp
// industryId?: FilterOptionResp
// appTypeId?: FilterOptionResp
categoryId?: InfoList[] categoryId?: InfoList[]
provinceId?: FilterOptionResp provinceId?: FilterOptionResp
} }
type itemType = type itemType = "地域";
| '类目'
| '地域'
| '品牌'
| '部件'
| '型号'
| '成色'
| '行业'
| '应用'
| '设备品牌'
| '设备型号'
| '设备类目'
type Props = { type Props = {
types: itemType[] //需要包含的筛选条件项 types: itemType[] //需要包含的筛选条件项
...@@ -71,64 +35,6 @@ type Props = { ...@@ -71,64 +35,6 @@ type Props = {
) => void //筛选条件更改事件 ) => void //筛选条件更改事件
} }
// const idArr = [
// 'brandId',
// 'categoryId',
// 'modelId',
// 'partsId',
// 'productCategoryId',
// 'qualityId',
// 'industryId',
// 'appTypeId',
// ]
// const nameArr: any = {
// brandId: {
// type: 'brandId',
// typeObj: 'brand',
// typeName: '品牌:',
// },
// // districtId: {
// // type:"districtId",
// // typeObj:"region",
// // typeName:"地域:",
// // },
// modelId: {
// type: 'modelId',
// typeObj: 'model',
// typeName: '型号:',
// },
// partsId: {
// type: 'partsId',
// typeObj: 'part',
// typeName: '部件:',
// },
// productCategoryId: {
// type: 'productCategoryId',
// typeObj: 'category',
// typeName: '类目:',
// },
// qualityId: {
// type: 'qualityId',
// typeObj: 'quality',
// typeName: '成色:',
// },
// industryId: {
// type: 'industryId',
// typeObj: 'industryId',
// typeName: '行业:',
// },
// appTypeId: {
// type: 'appTypeId',
// typeObj: 'appTypeId',
// typeName: '应用:',
// },
// categoryId: {
// type: 'categoryId',
// typeObj: 'categoryId',
// typeName: '类目:',
// },
// }
const Filter = (props: Props, ref: Ref<any>) => { const Filter = (props: Props, ref: Ref<any>) => {
const router = useRouter() const router = useRouter()
useImperativeHandle(ref, () => ({ useImperativeHandle(ref, () => ({
...@@ -158,14 +64,6 @@ const Filter = (props: Props, ref: Ref<any>) => { ...@@ -158,14 +64,6 @@ const Filter = (props: Props, ref: Ref<any>) => {
useEffect(() => { useEffect(() => {
props.onChange(result, { props.onChange(result, {
// brandId: result.brand?.id,
// districtId: result.region?.id,
// modelId: result.model?.id,
// partsId: result.part?.id,
// productCategoryId: result.category?.id,
// qualityId: result.quality?.id,
// industryId: result.industryId?.id,
// appTypeId: result.appTypeId?.id,
categoryId: result.categoryId, categoryId: result.categoryId,
provinceId: result.provinceId?.id, provinceId: result.provinceId?.id,
}) })
...@@ -257,57 +155,6 @@ const Filter = (props: Props, ref: Ref<any>) => { ...@@ -257,57 +155,6 @@ const Filter = (props: Props, ref: Ref<any>) => {
</div> </div>
)} )}
<div className={styles.filterWrap}> <div className={styles.filterWrap}>
{/* {props.types.includes('品牌') && (
<BrandItem
onChange={(item: FilterOptionResp) => onChange(item, 'brand')}
></BrandItem>
)}
{props.types.includes('设备品牌') && (
<DeviceBrand
onChange={(item: FilterOptionResp) => onChange(item, 'brand')}
></DeviceBrand>
)}
{props.types.includes('类目') && (
<CategoryItem
onChange={(item: FilterOptionResp) => onChange(item, 'category')}
></CategoryItem>
)}
{props.types.includes('设备类目') && (
<Category
onChange={(item: FilterOptionResp) => onChange(item, 'categoryId')}
></Category>
)}
{props.types.includes('部件') && (
<PartItem
onChange={(item: FilterOptionResp) => onChange(item, 'part')}
></PartItem>
)}
{props.types.includes('型号') && (
<ModelItem
onChange={(item: FilterOptionResp) => onChange(item, 'model')}
></ModelItem>
)}
{props.types.includes('设备型号') && (
<DeviceModel
onChange={(item: FilterOptionResp) => onChange(item, 'model')}
></DeviceModel>
)}
{props.types.includes('成色') && (
<QualityItem
onChange={(item: FilterOptionResp) => onChange(item, 'quality')}
></QualityItem>
)}
{props.types.includes('行业') && (
<Industry
onChange={(item: FilterOptionResp) => onChange(item, 'industryId')}
></Industry>
)}
{props.types.includes('应用') && (
<AppType
onChange={(item: FilterOptionResp) => onChange(item, 'appTypeId')}
></AppType>
)} */}
{typeInfo?.length && {typeInfo?.length &&
typeInfo?.map((item) => ( typeInfo?.map((item) => (
<TypeInfo <TypeInfo
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论