Skip to content

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

asder

parent 6b170a4e
Hide whitespace changes
Inline Side-by-side
Showing with 730 additions and 18 deletions
src/global.less
View file @ ea457240
......@@ -550,10 +550,17 @@ h4 {
.ant-tabs-tab-btn {
font-weight: bolder !important;
}
.ant-image-mask {
border-radius: 50%;
}
.diysearch{
.ant-image-mask{
border-radius: 6px;
}
}
.hovered {
.actionhover {
position: absolute;
......
src/layouts/dashboard/header/Searchbar.jsx
View file @ ea457240
import { useState } from 'react';
import { useState } from "react";
// @mui
import { styled } from '@mui/material/styles';
import { Input, Slide, Button, IconButton, InputAdornment, ClickAwayListener } from '@mui/material';
import {
Button,
ClickAwayListener,
IconButton,
Input,
InputAdornment,
Slide,
} from "@mui/material";
import { styled } from "@mui/material/styles";
// utils
import { bgBlur } from '../../../utils/cssStyles';
import { bgBlur } from "@/utils/cssStyles";
// component
import Iconify from '../../../components/iconify';
import Iconify from "@/components/iconify";
import { doFetch } from "@/utils/doFetch";
import { useModel } from "@umijs/max";
import { useRequest } from "ahooks";
import { Image, List, Skeleton, Tabs, Tag } from "antd";
import { Scrollbars } from "react-custom-scrollbars";
// ----------------------------------------------------------------------
const HEADER_MOBILE = 64;
const HEADER_DESKTOP = 64;
const StyledSearchbar = styled('div')(({ theme }) => ({
const StyledSearchbar = styled("div")(({ theme }) => ({
...bgBlur({ color: theme.palette.background.default }),
top: 0,
left: 0,
zIndex: 99,
width: '100%',
display: 'flex',
position: 'absolute',
alignItems: 'center',
width: "100%",
display: "flex",
position: "absolute",
alignItems: "center",
height: HEADER_MOBILE,
padding: theme.spacing(0, 2),
boxShadow: theme.customShadows.z8,
[theme.breakpoints.up('md')]: {
[theme.breakpoints.up("md")]: {
height: HEADER_DESKTOP,
padding: theme.spacing(0, 2),
},
}));
// ----------------------------------------------------------------------
const StyledSearchcontent = styled("div")(({ theme }) => ({
background: "rgba(255,255,255,1)",
top: HEADER_MOBILE + 12,
left: 0,
right: 0,
zIndex: 99,
margin: "auto",
width: "calc(100% - 24px)",
display: "flex",
position: "absolute",
alignItems: "center",
height: "calc(100vh - 100px)",
padding: theme.spacing(0, 2),
boxShadow: theme.customShadows.z8,
borderRadius: 12,
[theme.breakpoints.up("md")]: {
height: "calc(100vh - 100px)",
padding: theme.spacing(0, 2),
},
}));
export default function Searchbar() {
const [open, setOpen] = useState(false);
const [search, setsearch] = useState({
name: "",
type: "0",
});
const {
initialState: { currentUser, curitem },
setInitialState,
} = useModel("@@initialState");
const userType = currentUser?.type ?? 1;
const handleOpen = () => {
setOpen(!open);
......@@ -43,6 +85,630 @@ export default function Searchbar() {
setOpen(false);
};
let { data, loading } = useRequest(
async () => {
let res = await doFetch({
url: "/system/searchAll",
params: { ...search },
});
return res?.data?.dataList ?? [];
},
{
debounceWait: 400,
refreshDeps: [search],
}
);
const items =
userType === 1
? [
{
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>
),
},
]
: 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
>
<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}>
<div>
......@@ -51,23 +717,62 @@ export default function Searchbar() {
<Iconify icon="eva:search-fill" />
</IconButton>
)}
<Slide
direction="down"
in={search?.name && open}
mountOnEnter
unmountOnExit
>
<StyledSearchcontent>
<Scrollbars
thumbMinSize={10}
autoHide
style={{
width: "100%",
height: "100%",
}}
hideTracksWhenNotNeeded
>
<Tabs
activeKey={search?.type}
items={items}
centered
onChange={(e) => {
setsearch((s) => ({
...s,
type: e,
}));
}}
/>
</Scrollbars>
</StyledSearchcontent>
</Slide>
<Slide direction="down" in={open} mountOnEnter unmountOnExit>
<StyledSearchbar>
<Input
autoFocus
fullWidth
disableUnderline
placeholder="Search…"
placeholder="全局搜索"
startAdornment={
<InputAdornment position="start">
<Iconify icon="eva:search-fill" sx={{ color: 'text.disabled', width: 20, height: 20 }} />
<Iconify
icon="eva:search-fill"
sx={{ color: "text.disabled", width: 20, height: 20 }}
/>
</InputAdornment>
}
sx={{ mr: 1, fontWeight: 'fontWeightBold' }}
sx={{ mr: 1, fontWeight: "fontWeightBold" }}
value={search?.name}
onChange={(e) => {
setsearch((s) => ({
...s,
name: e.target.value,
}));
}}
/>
<Button variant="contained" onClick={handleClose}>
Search
搜索
</Button>
</StyledSearchbar>
</Slide>
......
src/pages/mybustrain/index.jsx
View file @ ea457240
......@@ -262,7 +262,7 @@ function Lessons() {
sx={{ mb: 2.5 }}
mt={0}
>
<Typography variant="h5">实训管理</Typography>
<Typography variant="h5">我的实训</Typography>
<Stack spacing={2} direction="row">
<FormControlLabel
control={
......
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