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 {
}
.diysearch{
.ant-list{
border-radius: 8px;
overflow: hidden;
}
.ant-image-mask{
border-radius: 6px;
}
......
src/layouts/dashboard/header/Searchbar.jsx
View file @ 3e200d52
......@@ -53,12 +53,12 @@ const StyledSearchcontent = styled("div")(({ theme }) => ({
display: "flex",
position: "absolute",
alignItems: "center",
height: "calc(100vh - 100px)",
height: "calc(100vh - 90px)",
padding: theme.spacing(0, 2),
boxShadow: theme.customShadows.z8,
borderRadius: 12,
[theme.breakpoints.up("md")]: {
height: "calc(100vh - 100px)",
height: "calc(100vh - 90px)",
padding: theme.spacing(0, 2),
},
}));
......@@ -83,6 +83,10 @@ export default function Searchbar() {
const handleClose = () => {
setOpen(false);
setsearch({
name: "",
type: "0",
});
};
let { data, loading } = useRequest(
......@@ -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",
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
{
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")
}
>
<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>,
]}
{item.typeName}
</Tag>,
]}
>
<Skeleton
avatar
title={false}
loading={item.loading}
active
>
<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>
),
},
];
<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",
// 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 (
<ClickAwayListener onClickAway={handleClose}>
......@@ -771,8 +774,8 @@ export default function Searchbar() {
}));
}}
/>
<Button variant="contained" onClick={handleClose}>
搜索
<Button variant="contained" color="inherit" onClick={handleClose}>
关闭
</Button>
</StyledSearchbar>
</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