Skip to content

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

global search

parent ea457240
Show 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,69 +347,6 @@ export default function Searchbar() { ...@@ -343,69 +347,6 @@ 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",
...@@ -416,67 +357,7 @@ export default function Searchbar() { ...@@ -416,67 +357,7 @@ export default function Searchbar() {
className="demo-loadmore-list" className="demo-loadmore-list"
loading={loading} loading={loading}
itemLayout="horizontal" itemLayout="horizontal"
dataSource={data} 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: "1",
label: `课程`,
children: (
<div className="diysearch">
<List
className="demo-loadmore-list"
loading={loading}
itemLayout="horizontal"
dataSource={data}
renderItem={(item) => ( renderItem={(item) => (
<List.Item <List.Item
actions={[ actions={[
...@@ -518,187 +399,7 @@ export default function Searchbar() { ...@@ -518,187 +399,7 @@ export default function Searchbar() {
/> />
<div> <div>
{item?.type === 4 && {item?.type === 4 &&
`${item?.startTime}-${item?.endTime}`} `${item?.startTime??"未开始"}-${item?.endTime}`}
</div>
</Skeleton>
</List.Item>
)}
/>
</div>
),
},
{
key: "2",
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: "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> </div>
</Skeleton> </Skeleton>
</List.Item> </List.Item>
...@@ -708,6 +409,308 @@ export default function Searchbar() { ...@@ -708,6 +409,308 @@ export default function Searchbar() {
), ),
}, },
]; ];
// [
// {
// key: "0",
// 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: "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
// 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: "2",
// 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: "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