Skip to content

C
cs_vsofpm
Commit 3e200d52 authored by wuhao's avatar wuhao 🎯
Browse files
Options

global search

parent ea457240
Hide whitespace changes
Inline Side-by-side
Showing with 373 additions and 366 deletions
src/global.less
View file @ 3e200d52
...@@ -556,6 +556,10 @@ h4 { ...@@ -556,6 +556,10 @@ h4 {
} }
.diysearch{ .diysearch{
.ant-list{
border-radius: 8px;
overflow: hidden;
}
.ant-image-mask{ .ant-image-mask{
border-radius: 6px; border-radius: 6px;
} }
......
src/layouts/dashboard/header/Searchbar.jsx
View file @ 3e200d52
...@@ -53,12 +53,12 @@ const StyledSearchcontent = styled("div")(({ theme }) => ({ ...@@ -53,12 +53,12 @@ const StyledSearchcontent = styled("div")(({ theme }) => ({
display: "flex", display: "flex",
position: "absolute", position: "absolute",
alignItems: "center", alignItems: "center",
height: "calc(100vh - 100px)", height: "calc(100vh - 90px)",
padding: theme.spacing(0, 2), padding: theme.spacing(0, 2),
boxShadow: theme.customShadows.z8, boxShadow: theme.customShadows.z8,
borderRadius: 12, borderRadius: 12,
[theme.breakpoints.up("md")]: { [theme.breakpoints.up("md")]: {
height: "calc(100vh - 100px)", height: "calc(100vh - 90px)",
padding: theme.spacing(0, 2), padding: theme.spacing(0, 2),
}, },
})); }));
...@@ -83,6 +83,10 @@ export default function Searchbar() { ...@@ -83,6 +83,10 @@ export default function Searchbar() {
const handleClose = () => { const handleClose = () => {
setOpen(false); setOpen(false);
setsearch({
name: "",
type: "0",
});
}; };
let { data, loading } = useRequest( let { data, loading } = useRequest(
...@@ -343,371 +347,370 @@ export default function Searchbar() { ...@@ -343,371 +347,370 @@ export default function Searchbar() {
), ),
}, },
] ]
: userType === 2 || userType === 3
? [
{
key: "4",
label: `实训`,
children: (
<div className="diysearch">
<List
className="demo-loadmore-list"
loading={loading}
itemLayout="horizontal"
dataSource={data}
renderItem={(item) => (
<List.Item
actions={[
<Tag
color={
(item.type === 1 && "#f50") ||
(item.type === 2 && "#2db7f5") ||
(item.type === 3 && "#87d068") ||
(item.type === 4 && "#108ee9")
}
>
{item.typeName}
</Tag>,
]}
>
<Skeleton
avatar
title={false}
loading={item.loading}
active
>
<List.Item.Meta
avatar={
<Image
src={item?.picUrl ?? DEFAULT_HEAD_IMG}
width={36}
height={36}
style={{ borderRadius: 6 }}
/>
}
title={<a>{item.name} </a>}
description={
<div>
{item?.type === 4 &&
`${item.sectionNum}课时/${item.experimentNum}实验`}{" "}
{item?.label}
</div>
}
/>
<div>
{item?.type === 4 &&
`${item?.startTime}-${item?.endTime}`}
</div>
</Skeleton>
</List.Item>
)}
/>
</div>
),
},
]
: [ : [
{ {
key: "0", key: "0",
label: `全部`, label: `全部`,
children: ( children: (
<div className="diysearch"> <div className="diysearch">
<List <List
className="demo-loadmore-list" className="demo-loadmore-list"
loading={loading} loading={loading}
itemLayout="horizontal" itemLayout="horizontal"
dataSource={data} dataSource={data??[]}
renderItem={(item) => ( renderItem={(item) => (
<List.Item <List.Item
actions={[ actions={[
<Tag <Tag
color={ color={
(item.type === 1 && "#f50") || (item.type === 1 && "#f50") ||
(item.type === 2 && "#2db7f5") || (item.type === 2 && "#2db7f5") ||
(item.type === 3 && "#87d068") || (item.type === 3 && "#87d068") ||
(item.type === 4 && "#108ee9") (item.type === 4 && "#108ee9")
} }
>
{item.typeName}
</Tag>,
]}
>
<Skeleton
avatar
title={false}
loading={item.loading}
active
> >
<List.Item.Meta {item.typeName}
avatar={ </Tag>,
<Image ]}
src={item?.picUrl ?? DEFAULT_HEAD_IMG} >
width={36} <Skeleton
height={36} avatar
style={{ borderRadius: 6 }} title={false}
/> loading={item.loading}
} active
title={<a>{item.name} </a>}
description={
<div>
{item?.type === 4 &&
`${item.sectionNum}课时/${item.experimentNum}实验`}{" "}
{item?.label}
</div>
}
/>
<div>
{item?.type === 4 &&
`${item?.startTime}-${item?.endTime}`}
</div>
</Skeleton>
</List.Item>
)}
/>
</div>
),
},
{
key: "1",
label: `课程`,
children: (
<div className="diysearch">
<List
className="demo-loadmore-list"
loading={loading}
itemLayout="horizontal"
dataSource={data}
renderItem={(item) => (
<List.Item
actions={[
<Tag
color={
(item.type === 1 && "#f50") ||
(item.type === 2 && "#2db7f5") ||
(item.type === 3 && "#87d068") ||
(item.type === 4 && "#108ee9")
}
>
{item.typeName}
</Tag>,
]}
> >
<Skeleton <List.Item.Meta
avatar avatar={
title={false} <Image
loading={item.loading} src={item?.picUrl ?? DEFAULT_HEAD_IMG}
active width={36}
> height={36}
<List.Item.Meta style={{ borderRadius: 6 }}
avatar={ />
<Image }
src={item?.picUrl ?? DEFAULT_HEAD_IMG} title={<a>{item.name} </a>}
width={36} description={
height={36} <div>
style={{ borderRadius: 6 }} {item?.type === 4 &&
/> `${item.sectionNum}课时/${item.experimentNum}实验`}{" "}
} {item?.label}
title={<a>{item.name} </a>} </div>
description={ }
<div> />
{item?.type === 4 && <div>
`${item.sectionNum}课时/${item.experimentNum}实验`}{" "} {item?.type === 4 &&
{item?.label} `${item?.startTime??"未开始"}-${item?.endTime}`}
</div> </div>
} </Skeleton>
/> </List.Item>
<div> )}
{item?.type === 4 && />
`${item?.startTime}-${item?.endTime}`} </div>
</div> ),
</Skeleton> },
</List.Item> ];
)} // [
/> // {
</div> // key: "0",
), // label: `全部`,
}, // children: (
{ // <div className="diysearch">
key: "2", // <List
label: `教师`, // className="demo-loadmore-list"
children: ( // loading={loading}
<div className="diysearch"> // itemLayout="horizontal"
<List // dataSource={data}
className="demo-loadmore-list" // renderItem={(item) => (
loading={loading} // <List.Item
itemLayout="horizontal" // actions={[
dataSource={data} // <Tag
renderItem={(item) => ( // color={
<List.Item // (item.type === 1 && "#f50") ||
actions={[ // (item.type === 2 && "#2db7f5") ||
<Tag // (item.type === 3 && "#87d068") ||
color={ // (item.type === 4 && "#108ee9")
(item.type === 1 && "#f50") || // }
(item.type === 2 && "#2db7f5") || // >
(item.type === 3 && "#87d068") || // {item.typeName}
(item.type === 4 && "#108ee9") // </Tag>,
} // ]}
> // >
{item.typeName} // <Skeleton
</Tag>, // avatar
]} // title={false}
> // loading={item.loading}
<Skeleton // active
avatar // >
title={false} // <List.Item.Meta
loading={item.loading} // avatar={
active // <Image
> // src={item?.picUrl ?? DEFAULT_HEAD_IMG}
<List.Item.Meta // width={36}
avatar={ // height={36}
<Image // style={{ borderRadius: 6 }}
src={item?.picUrl ?? DEFAULT_HEAD_IMG} // />
width={36} // }
height={36} // title={<a>{item.name} </a>}
style={{ borderRadius: 6 }} // description={
/> // <div>
} // {item?.type === 4 &&
title={<a>{item.name} </a>} // `${item.sectionNum}课时/${item.experimentNum}实验`}{" "}
description={ // {item?.label}
<div> // </div>
{item?.type === 4 && // }
`${item.sectionNum}课时/${item.experimentNum}实验`}{" "} // />
{item?.label} // <div>
</div> // {item?.type === 4 &&
} // `${item?.startTime}-${item?.endTime}`}
/> // </div>
<div> // </Skeleton>
{item?.type === 4 && // </List.Item>
`${item?.startTime}-${item?.endTime}`} // )}
</div> // />
</Skeleton> // </div>
</List.Item> // ),
)} // },
/> // {
</div> // key: "1",
), // label: `课程`,
}, // children: (
{ // <div className="diysearch">
key: "3", // <List
label: `学生`, // className="demo-loadmore-list"
children: ( // loading={loading}
<div className="diysearch"> // itemLayout="horizontal"
<List // dataSource={data}
className="demo-loadmore-list" // renderItem={(item) => (
loading={loading} // <List.Item
itemLayout="horizontal" // actions={[
dataSource={data} // <Tag
renderItem={(item) => ( // color={
<List.Item // (item.type === 1 && "#f50") ||
actions={[ // (item.type === 2 && "#2db7f5") ||
<Tag // (item.type === 3 && "#87d068") ||
color={ // (item.type === 4 && "#108ee9")
(item.type === 1 && "#f50") || // }
(item.type === 2 && "#2db7f5") || // >
(item.type === 3 && "#87d068") || // {item.typeName}
(item.type === 4 && "#108ee9") // </Tag>,
} // ]}
> // >
{item.typeName} // <Skeleton
</Tag>, // avatar
]} // title={false}
> // loading={item.loading}
<Skeleton // active
avatar // >
title={false} // <List.Item.Meta
loading={item.loading} // avatar={
active // <Image
> // src={item?.picUrl ?? DEFAULT_HEAD_IMG}
<List.Item.Meta // width={36}
avatar={ // height={36}
<Image // style={{ borderRadius: 6 }}
src={item?.picUrl ?? DEFAULT_HEAD_IMG} // />
width={36} // }
height={36} // title={<a>{item.name} </a>}
style={{ borderRadius: 6 }} // description={
/> // <div>
} // {item?.type === 4 &&
title={<a>{item.name} </a>} // `${item.sectionNum}课时/${item.experimentNum}实验`}{" "}
description={ // {item?.label}
<div> // </div>
{item?.type === 4 && // }
`${item.sectionNum}课时/${item.experimentNum}实验`}{" "} // />
{item?.label} // <div>
</div> // {item?.type === 4 &&
} // `${item?.startTime}-${item?.endTime}`}
/> // </div>
<div> // </Skeleton>
{item?.type === 4 && // </List.Item>
`${item?.startTime}-${item?.endTime}`} // )}
</div> // />
</Skeleton> // </div>
</List.Item> // ),
)} // },
/> // {
</div> // key: "2",
), // label: `教师`,
}, // children: (
{ // <div className="diysearch">
key: "4", // <List
label: `实训`, // className="demo-loadmore-list"
children: ( // loading={loading}
<div className="diysearch"> // itemLayout="horizontal"
<List // dataSource={data}
className="demo-loadmore-list" // renderItem={(item) => (
loading={loading} // <List.Item
itemLayout="horizontal" // actions={[
dataSource={data} // <Tag
renderItem={(item) => ( // color={
<List.Item // (item.type === 1 && "#f50") ||
actions={[ // (item.type === 2 && "#2db7f5") ||
<Tag // (item.type === 3 && "#87d068") ||
color={ // (item.type === 4 && "#108ee9")
(item.type === 1 && "#f50") || // }
(item.type === 2 && "#2db7f5") || // >
(item.type === 3 && "#87d068") || // {item.typeName}
(item.type === 4 && "#108ee9") // </Tag>,
} // ]}
> // >
{item.typeName} // <Skeleton
</Tag>, // avatar
]} // title={false}
> // loading={item.loading}
<Skeleton // active
avatar // >
title={false} // <List.Item.Meta
loading={item.loading} // avatar={
active // <Image
> // src={item?.picUrl ?? DEFAULT_HEAD_IMG}
<List.Item.Meta // width={36}
avatar={ // height={36}
<Image // style={{ borderRadius: 6 }}
src={item?.picUrl ?? DEFAULT_HEAD_IMG} // />
width={36} // }
height={36} // title={<a>{item.name} </a>}
style={{ borderRadius: 6 }} // description={
/> // <div>
} // {item?.type === 4 &&
title={<a>{item.name} </a>} // `${item.sectionNum}课时/${item.experimentNum}实验`}{" "}
description={ // {item?.label}
<div> // </div>
{item?.type === 4 && // }
`${item.sectionNum}课时/${item.experimentNum}实验`}{" "} // />
{item?.label} // <div>
</div> // {item?.type === 4 &&
} // `${item?.startTime}-${item?.endTime}`}
/> // </div>
<div> // </Skeleton>
{item?.type === 4 && // </List.Item>
`${item?.startTime}-${item?.endTime}`} // )}
</div> // />
</Skeleton> // </div>
</List.Item> // ),
)} // },
/> // {
</div> // key: "3",
), // label: `学生`,
}, // children: (
]; // <div className="diysearch">
// <List
// className="demo-loadmore-list"
// loading={loading}
// itemLayout="horizontal"
// dataSource={data}
// renderItem={(item) => (
// <List.Item
// actions={[
// <Tag
// color={
// (item.type === 1 && "#f50") ||
// (item.type === 2 && "#2db7f5") ||
// (item.type === 3 && "#87d068") ||
// (item.type === 4 && "#108ee9")
// }
// >
// {item.typeName}
// </Tag>,
// ]}
// >
// <Skeleton
// avatar
// title={false}
// loading={item.loading}
// active
// >
// <List.Item.Meta
// avatar={
// <Image
// src={item?.picUrl ?? DEFAULT_HEAD_IMG}
// width={36}
// height={36}
// style={{ borderRadius: 6 }}
// />
// }
// title={<a>{item.name} </a>}
// description={
// <div>
// {item?.type === 4 &&
// `${item.sectionNum}课时/${item.experimentNum}实验`}{" "}
// {item?.label}
// </div>
// }
// />
// <div>
// {item?.type === 4 &&
// `${item?.startTime}-${item?.endTime}`}
// </div>
// </Skeleton>
// </List.Item>
// )}
// />
// </div>
// ),
// },
// {
// key: "4",
// label: `实训`,
// children: (
// <div className="diysearch">
// <List
// className="demo-loadmore-list"
// loading={loading}
// itemLayout="horizontal"
// dataSource={data}
// renderItem={(item) => (
// <List.Item
// actions={[
// <Tag
// color={
// (item.type === 1 && "#f50") ||
// (item.type === 2 && "#2db7f5") ||
// (item.type === 3 && "#87d068") ||
// (item.type === 4 && "#108ee9")
// }
// >
// {item.typeName}
// </Tag>,
// ]}
// >
// <Skeleton
// avatar
// title={false}
// loading={item.loading}
// active
// >
// <List.Item.Meta
// avatar={
// <Image
// src={item?.picUrl ?? DEFAULT_HEAD_IMG}
// width={36}
// height={36}
// style={{ borderRadius: 6 }}
// />
// }
// title={<a>{item.name} </a>}
// description={
// <div>
// {item?.type === 4 &&
// `${item.sectionNum}课时/${item.experimentNum}实验`}{" "}
// {item?.label}
// </div>
// }
// />
// <div>
// {item?.type === 4 &&
// `${item?.startTime}-${item?.endTime}`}
// </div>
// </Skeleton>
// </List.Item>
// )}
// />
// </div>
// ),
// },
// ];
return ( return (
<ClickAwayListener onClickAway={handleClose}> <ClickAwayListener onClickAway={handleClose}>
...@@ -771,8 +774,8 @@ export default function Searchbar() { ...@@ -771,8 +774,8 @@ export default function Searchbar() {
})); }));
}} }}
/> />
<Button variant="contained" onClick={handleClose}> <Button variant="contained" color="inherit" onClick={handleClose}>
搜索 关闭
</Button> </Button>
</StyledSearchbar> </StyledSearchbar>
</Slide> </Slide>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment