#

luxiaotao1123

2024-09-23 71b4dd3185bbf141fda4b155b0bb759f669b9d69

#

 zy-acs-flow/src/page/bus/BusList.jsx

@@ -42,6 +42,7 @@
import MyField from "../components/MyField";
import { PAGE_DRAWER_WIDTH, OPERATE_MODE } from '@/config/setting';
import * as Common from '@/utils/common';
import BusListAside from "./BusListAside";

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -51,10 +52,10 @@
        cursor: 'auto'
    },
    '& .column-busNo': {
        minWidth: '18em',
        minWidth: '16em',
    },
    '& .column-tasksNum': {
        maxWidth: '6em',
        maxWidth: '8em',
    },
    '& .column-memo': {
        maxWidth: '12em',
@@ -68,7 +69,7 @@
}));

const filters = [
    <SearchInput source="condition" alwaysOn />,
    // <SearchInput source="condition" alwaysOn />,
    <DateInput label='common.time.after' source="timeStart" alwaysOn />,
    <DateInput label='common.time.before' source="timeEnd" alwaysOn />,

@@ -122,6 +123,7 @@
                    </TopToolbar>
                )}
                perPage={25}
                aside={<BusListAside />}
            >
                <StyledDatagrid
                    preferenceKey='bus'

 zy-acs-flow/src/page/bus/BusListAside.jsx

New file
@@ -0,0 +1,143 @@
import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
import {
    SavedQueriesList,
    FilterLiveSearch,
    FilterList,
    FilterListItem,
    useTheme,
    useStore,
} from 'react-admin';
import { Box, Typography, Card, CardContent } from '@mui/material';
import * as Common from '@/utils/common';
import WcIcon from '@mui/icons-material/Wc';
import BookmarkIcon from '@mui/icons-material/BookmarkBorder';
import StyleIcon from '@mui/icons-material/Style';
import AccessTimeIcon from '@mui/icons-material/AccessTime';
import {
    endOfYesterday,
    startOfWeek,
    subWeeks,
    startOfMonth,
    subMonths,
} from 'date-fns';
import request from '@/utils/request'

const BusListAside = (props) => {
    const theme = useTheme();
    const [roles, setRoles] = React.useState([]);

    React.useEffect(() => {
        request.post('/role/list', {}).then(res => {
            if (res?.data?.code === 200) {
                setRoles(res.data.data);
            }
        })
    }, [])

    const isSelected = (value, filters) => {
        const roleIds = filters.roleIds || [];
        return roleIds.includes(value.roleId);
    };

    const toggleFilter = (value, filters) => {
        const roleIds = filters.roleIds || [];
        return {
            ...filters,
            roleIds: roleIds.includes(value.roleId)
                ? roleIds.filter(v => v !== value.roleId)
                // : [...roleIds, value.roleId],
                : [value.roleId],
        };
    };


    return (
        <Card
            sx={{
                display: { xs: 'none', md: 'block', },
                order: -1,
                mr: 2,
                mt: 8,
                alignSelf: 'flex-start',
                border: theme[0] === 'light' && '1px solid #e0e0e3',
                // width: 200
            }}
        >
            <CardContent>
                <SavedQueriesList icon={<BookmarkIcon />} />
                <FilterLiveSearch source='condition' hiddenLabel />

                <FilterList
                    label="filters.lastCreated"
                    icon={<AccessTimeIcon />}
                >
                    <FilterListItem
                        label="filters.today"
                        value={{
                            timeStart: endOfYesterday().toISOString(),
                            timeEnd: undefined,
                        }}
                    />
                    <FilterListItem
                        label="filters.thisWeek"
                        value={{
                            timeStart: startOfWeek(new Date()).toISOString(),
                            timeEnd: undefined,
                        }}
                    />
                    <FilterListItem
                        label="filters.lastWeek"
                        value={{
                            timeStart: subWeeks(startOfWeek(new Date()), 1).toISOString(),
                            timeEnd: startOfWeek(new Date()).toISOString(),
                        }}
                    />
                    <FilterListItem
                        label="filters.thisMonth"
                        value={{
                            timeStart: startOfMonth(new Date()).toISOString(),
                            timeEnd: undefined,
                        }}
                    />
                    <FilterListItem
                        label="filters.lastMonth"
                        value={{
                            timeStart: subMonths(startOfMonth(new Date()), 1).toISOString(),
                            timeEnd: startOfMonth(new Date()).toISOString(),
                        }}
                    />
                    <FilterListItem
                        label="filters.earlier"
                        value={{
                            timeStart: undefined,
                            timeEnd: subMonths(startOfMonth(new Date()), 1).toISOString(),
                        }}
                    />
                </FilterList>

                <FilterList label="table.field.user.sex" icon={<WcIcon />}>
                    <FilterListItem label="table.field.user.sexes.female" value={{ sex: '2' }} />
                    <FilterListItem label="table.field.user.sexes.male" value={{ sex: '1' }} />
                    <FilterListItem label="table.field.user.sexes.unknown" value={{ sex: '0' }} />
                </FilterList>

                <FilterList label="table.field.user.role" icon={<StyleIcon />}>
                    {roles.map(role => {
                        return (
                            <FilterListItem
                                key={role.id}
                                label={`${role.name}`}
                                value={{ roleId: role.id }}
                                isSelected={isSelected}
                                toggleFilter={toggleFilter}
                            />
                        )
                    })}
                </FilterList>

            </CardContent>
        </Card>
    )
}

export default BusListAside;

 zy-acs-flow/src/page/bus/BusPanel.jsx

@@ -61,7 +61,7 @@
                            </Typography>
                        </Grid>
                    </Grid>
                    <Box height={20}>&nbsp;</Box>
                    <Box height={10}>&nbsp;</Box>
                    <Box>
                        <Table size="small">
                            <TableHead>