#

vincentlu

2025-02-24 12e640ae44d9be05f7271178f8bb21d8c7d14818

 zy-acs-flow/src/page/jam/JamList.jsx

@@ -33,8 +33,9 @@
    FunctionField,
    useNotify,
    useRefresh,
    Count,
} from 'react-admin';
import { Box, Typography, Card, Stack } from '@mui/material';
import { Box, Typography, Card, Stack, useMediaQuery, Tabs, Tab, Divider } from '@mui/material';
import { styled } from '@mui/material/styles';
import JamCreate from "./JamCreate";
import JamPanel from "./JamPanel";
@@ -48,6 +49,7 @@
import ConfirmButton from "../components/ConfirmButton";
import CloseIcon from '@mui/icons-material/Close';
import request from '@/utils/request';
import { red } from '@mui/material/colors';

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -68,6 +70,9 @@
    <ReferenceInput source="jamAgv" label="table.field.jam.jamAgv" reference="agv" alwaysOn>
        <AutocompleteInput label="table.field.jam.jamAgv" optionText="uuid" filterToQuery={(val) => ({ uuid: val })} />
    </ReferenceInput>,
    <ReferenceInput source="avoAgv" label="table.field.jam.avoAgv" reference="agv" alwaysOn>
        <AutocompleteInput label="table.field.jam.avoAgv" optionText="uuid" filterToQuery={(val) => ({ uuid: val })} />
    </ReferenceInput>,
    <SelectInput source="cycleAvo" label="table.field.jam.cycleAvo"
        choices={[
            { id: 1, name: 'common.enums.true' },
@@ -79,30 +84,27 @@
    <DateInput label='common.time.before' source="timeEnd" alwaysOn />,

    <TextInput source="uuid" label="table.field.jam.uuid" />,
    <TextInput source="name" label="table.field.jam.name" />,
    <ReferenceInput source="jamCode" label="table.field.jam.jamCode" reference="code">
        <AutocompleteInput label="table.field.jam.jamCode" optionText="data" filterToQuery={(val) => ({ data: val })} />
    </ReferenceInput>,
    <ReferenceInput source="jamSeg" label="table.field.jam.jamSeg" reference="segment">
        <AutocompleteInput label="table.field.jam.jamSeg" optionText="id" filterToQuery={(val) => ({ id: val })} />
    </ReferenceInput>,
    <ReferenceInput source="avoAgv" label="table.field.jam.avoAgv" reference="agv">
        <AutocompleteInput label="table.field.jam.avoAgv" optionText="uuid" filterToQuery={(val) => ({ uuid: val })} />
    </ReferenceInput>,
    <ReferenceInput source="avoCode" label="table.field.jam.avoCode" reference="code">
        <AutocompleteInput label="table.field.jam.avoCode" optionText="data" filterToQuery={(val) => ({ data: val })} />
    </ReferenceInput>,
    <ReferenceInput source="avoSeg" label="table.field.jam.avoSeg" reference="segment">
        <AutocompleteInput label="table.field.jam.avoSeg" optionText="id" filterToQuery={(val) => ({ id: val })} />
    </ReferenceInput>,
    <ReferenceInput source="cycleCode" label="table.field.jam.cycleCode" reference="code">
        <AutocompleteInput label="table.field.jam.cycleCode" optionText="data" filterToQuery={(val) => ({ data: val })} />
    </ReferenceInput>,
    <DateInput source="startTime" label="table.field.jam.startTime" />,
    <DateInput source="notifyTime" label="table.field.jam.notifyTime" />,
    <DateInput source="endTime" label="table.field.jam.endTime" />,
    <NumberInput source="duration" label="table.field.jam.duration" />,
    <TextInput source="state" label="table.field.jam.state" />,
    // <TextInput source="name" label="table.field.jam.name" />,
    // <ReferenceInput source="jamCode" label="table.field.jam.jamCode" reference="code">
    //     <AutocompleteInput label="table.field.jam.jamCode" optionText="data" filterToQuery={(val) => ({ data: val })} />
    // </ReferenceInput>,
    // <ReferenceInput source="jamSeg" label="table.field.jam.jamSeg" reference="segment">
    //     <AutocompleteInput label="table.field.jam.jamSeg" optionText="id" filterToQuery={(val) => ({ id: val })} />
    // </ReferenceInput>,
    // <ReferenceInput source="avoCode" label="table.field.jam.avoCode" reference="code">
    //     <AutocompleteInput label="table.field.jam.avoCode" optionText="data" filterToQuery={(val) => ({ data: val })} />
    // </ReferenceInput>,
    // <ReferenceInput source="avoSeg" label="table.field.jam.avoSeg" reference="segment">
    //     <AutocompleteInput label="table.field.jam.avoSeg" optionText="id" filterToQuery={(val) => ({ id: val })} />
    // </ReferenceInput>,
    // <ReferenceInput source="cycleCode" label="table.field.jam.cycleCode" reference="code">
    //     <AutocompleteInput label="table.field.jam.cycleCode" optionText="data" filterToQuery={(val) => ({ data: val })} />
    // </ReferenceInput>,
    // <DateInput source="startTime" label="table.field.jam.startTime" />,
    // <DateInput source="notifyTime" label="table.field.jam.notifyTime" />,
    // <DateInput source="endTime" label="table.field.jam.endTime" />,
    // <NumberInput source="duration" label="table.field.jam.duration" />,
    // <TextInput source="state" label="table.field.jam.state" />,

    <TextInput label="common.field.memo" source="memo" />,
    <SelectInput
@@ -115,13 +117,6 @@
    />,
]

const states = [
    { id: 'RUNNING', name: 'page.jam.enums.state.running' },
    { id: 'FINISH', name: 'page.jam.enums.state.finish' },
    { id: 'FAIL', name: 'page.jam.enums.state.fail' },
    { id: 'DEPRECATED', name: 'page.jam.enums.state.deprecated' },
];

const JamList = () => {
    const translate = useTranslate();
    const notify = useNotify();
@@ -129,8 +124,8 @@
    const [createDialog, setCreateDialog] = useState(false);
    const [drawerVal, setDrawerVal] = useState(false);

    const onDeprecated = (jamId) => {
        request.get("/jam/deprecated/" + jamId).then(res => {
    const onDeprecate = (jamId) => {
        request.get("/jam/deprecate/" + jamId).then(res => {
            const { code, msg, data } = res.data;
            if (code === 200) {
                notify(msg || 'common.response.success', { type: 'success', messageArgs: { _: msg } });
@@ -157,7 +152,7 @@
                title={"menu.jam"}
                empty={<EmptyData onClick={() => { setCreateDialog(true) }} />}
                filters={filters}
                sort={{ field: "create_time", order: "desc" }}
                sort={{ field: "start_time", order: "desc" }}
                actions={(
                    <TopToolbar>
                        <FilterButton />
@@ -167,83 +162,9 @@
                    </TopToolbar>
                )}
                perPage={DEFAULT_PAGE_SIZE}
                filterDefaultValues={{ state: 'RUNNING' }}
            >
                <StyledDatagrid
                    preferenceKey='jam'
                    bulkActionButtons={false}
                    rowClick={(id, resource, record) => false}
                    expand={() => <JamPanel />}
                    expandSingle={true}
                    omit={['id', 'uuid', 'cycleCode', 'updateBy', 'updateTime', 'createTime', 'createBy', 'statusBool', 'memo']}
                >
                    <NumberField source="id" />
                    <TextField source="uuid" label="table.field.jam.uuid" />
                    {/* <TextField source="name" label="table.field.jam.name" /> */}
                    <ReferenceField source="jamAgv" label="table.field.jam.jamAgv" reference="agv" link={false} sortable={false} >
                        <TextField source="uuid" sx={{ fontWeight: 'bold' }} />
                    </ReferenceField>
                    <ReferenceField source="jamCode" label="table.field.jam.jamCode" reference="code" link={false} sortable={false}>
                        <TextField source="data" />
                    </ReferenceField>
                    <ReferenceField source="jamSeg" label="table.field.jam.jamSeg" reference="segment" link={false} sortable={false}>
                        <TextField source="id" />
                    </ReferenceField>
                    <ReferenceField source="avoAgv" label="table.field.jam.avoAgv" reference="agv" link={false} sortable={false}>
                        <TextField source="uuid" sx={{ fontWeight: 'bold' }} />
                    </ReferenceField>
                    <ReferenceField source="avoCode" label="table.field.jam.avoCode" reference="code" link={false} sortable={false}>
                        <TextField source="data" />
                    </ReferenceField>
                    <ReferenceField source="avoSeg" label="table.field.jam.avoSeg" reference="segment" link={false} sortable={false}>
                        <TextField source="id" />
                    </ReferenceField>
                    <BooleanField source="cycleAvoBool" label="table.field.jam.cycleAvo" />
                    <ReferenceField source="cycleCode" label="table.field.jam.cycleCode" reference="code" link={false} sortable={false}>
                        <TextField source="data" />
                    </ReferenceField>
                    <DateField source="startTime" label="table.field.jam.startTime" showTime />
                    <DateField source="notifyTime" label="table.field.jam.notifyTime" showTime />
                    <DateField source="endTime" label="table.field.jam.endTime" showTime />
                    <NumberField source="duration" label="table.field.jam.duration" />
                    <FunctionField label="table.field.segment.state" cellClassName="state" render={record => (
                        <>
                            {translate(states.find(item => item.id === record.state)?.name)}
                        </>
                    )} />
                    <ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}>
                        <TextField source="nickname" />
                    </ReferenceField>
                    <DateField source="updateTime" label="common.field.updateTime" showTime />
                    <ReferenceField source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}>
                        <TextField source="nickname" />
                    </ReferenceField>
                    <DateField source="createTime" label="common.field.createTime" showTime />
                    <BooleanField source="statusBool" label="common.field.status" sortable={false} />
                    <TextField source="memo" label="common.field.memo" sortable={false} />
                    <FunctionField label="common.field.opt" cellClassName="opt" render={record => (
                        (record.state === "RUNNING" || record.state === "FINISH") && (
                            <>
                                <ConfirmButton
                                    label="common.action.deprecated"
                                    size="small"
                                    color="primary"
                                    startIcon={<CloseIcon />}
                                    sx={{
                                        padding: '1px',
                                        fontSize: '.75rem',
                                        '& .MuiButton-startIcon': {
                                            marginRight: '2px'
                                        },
                                    }}
                                    data={record.uuid}
                                    onConfirm={() => {
                                        onDeprecated(record.id);
                                    }}
                                />
                            </>
                        )
                    )} />
                </StyledDatagrid>
                <TabbedDatagrid onDeprecate={onDeprecate} />
            </List>
            <JamCreate
                open={createDialog}
@@ -259,4 +180,164 @@
    )
}

const states = [
    { id: 'RUNNING', name: 'page.jam.enums.state.running' },
    { id: 'FINISH', name: 'page.jam.enums.state.finish' },
    { id: 'FAIL', name: 'page.jam.enums.state.fail' },
    { id: 'DEPRECATED', name: 'page.jam.enums.state.deprecated' },
];

const TabbedDatagrid = ({ onDeprecate }) => {
    const translate = useTranslate();
    const { filterValues, setFilters, displayedFilters } = useListContext();
    const isXSmall = useMediaQuery(theme =>
        theme.breakpoints.down('sm')
    );

    const handleChange = useCallback((event, value) => {
        setFilters && setFilters(
            { ...filterValues, state: value },
            displayedFilters
        );
    }, [filterValues, setFilters, displayedFilters]);

    return (
        <>
            <Tabs
                variant="fullWidth"
                centered
                value={filterValues.state}
                indicatorColor="primary"
                onChange={handleChange}
            >
                {states.map(item => {
                    return <Tab
                        key={item.id}
                        value={item.id}
                        label={
                            <span style={{ fontWeight: 'bold' }}>
                                <span >
                                    {translate(item.name)}
                                </span>
                                &nbsp;
                                (
                                <Count
                                    filter={{
                                        ...filterValues,
                                        state: item.id,
                                    }}
                                    sx={{ lineHeight: 'inherit' }}
                                />
                                )
                            </span>
                        }
                    />
                })}
            </Tabs>
            <Divider />
            {(isXSmall || true) && (
                <>
                    {(
                        filterValues.state === 'RUNNING'
                        || filterValues.state === 'FINISH'
                        || filterValues.state === 'FAIL'
                        || filterValues.state === 'DEPRECATED'
                    )
                        && (
                            <>
                                <StyledDatagrid
                                    preferenceKey='jam'
                                    bulkActionButtons={false}
                                    rowClick={(id, resource, record) => false}
                                    // expand={() => <JamPanel />}
                                    // expandSingle={true}
                                    omit={['id', 'endTime', 'uuid', 'cycleCode', 'updateBy', 'updateTime', 'createTime', 'createBy', 'statusBool', 'memo']}
                                >
                                    <NumberField source="id" />
                                    <TextField source="uuid" label="table.field.jam.uuid" />
                                    {/* <TextField source="name" label="table.field.jam.name" /> */}
                                    <ReferenceField source="jamAgv" label="table.field.jam.jamAgv" reference="agv" link={false} sortable={false} >
                                        <TextField source="uuid" sx={{ fontWeight: 'bold' }} />
                                    </ReferenceField>
                                    <ReferenceField source="jamSeg" label="table.field.jam.jamSeg" reference="segment" link={false} sortable={false}>
                                        <FunctionField render={(record) => {
                                            return <>{record.uuid}&nbsp;({record.serial})</>
                                        }} />
                                    </ReferenceField>
                                    <ReferenceField source="jamCode" label="table.field.jam.jamCode" reference="code" link={false} sortable={false}>
                                        <TextField source="data" />
                                    </ReferenceField>
                                    <ReferenceField source="avoAgv" label="table.field.jam.avoAgv" reference="agv" link={false} sortable={false}>
                                        <TextField source="uuid" sx={{ fontWeight: 'bold' }} />
                                    </ReferenceField>
                                    <ReferenceField source="avoSeg" label="table.field.jam.avoSeg" reference="segment" link={false} sortable={false}>
                                        <FunctionField render={(record) => {
                                            return <>{record.uuid}&nbsp;({record.serial})</>
                                        }} />
                                    </ReferenceField>
                                    <ReferenceField source="avoCode" label="table.field.jam.avoCode" reference="code" link={false} sortable={false}>
                                        <TextField source="data" />
                                    </ReferenceField>
                                    <BooleanField source="cycleAvoBool" label="table.field.jam.cycleAvo" sortable={false} />
                                    <ReferenceField source="cycleCode" label="table.field.jam.cycleCode" reference="code" link={false} sortable={false}>
                                        <TextField source="data" />
                                    </ReferenceField>
                                    <FunctionField label="table.field.jam.duration" cellClassName="duration" render={record => (
                                        <>
                                            {((record.duration > 6000))
                                                ? <span style={{ color: red[700], fontWeight: 'bold' }}>{record.duration}</span>
                                                : <span>{record.duration || "-"}</span>
                                            }
                                            &nbsp;ms
                                        </>
                                    )} />
                                    <DateField source="startTime" label="table.field.jam.startTime" showTime />
                                    <DateField source="notifyTime" label="table.field.jam.notifyTime" showTime />
                                    <DateField source="endTime" label="table.field.jam.endTime" showTime />
                                    <FunctionField label="table.field.segment.state" cellClassName="state" render={record => (
                                        <>
                                            {translate(states.find(item => item.id === record.state)?.name)}
                                        </>
                                    )} />
                                    <ReferenceField source="updateBy" label="common.field.updateBy" reference="user" link={false} sortable={false}>
                                        <TextField source="nickname" />
                                    </ReferenceField>
                                    <DateField source="updateTime" label="common.field.updateTime" showTime />
                                    <ReferenceField source="createBy" label="common.field.createBy" reference="user" link={false} sortable={false}>
                                        <TextField source="nickname" />
                                    </ReferenceField>
                                    <DateField source="createTime" label="common.field.createTime" showTime />
                                    <BooleanField source="statusBool" label="common.field.status" sortable={false} />
                                    <TextField source="memo" label="common.field.memo" sortable={false} />
                                    <FunctionField label="common.field.opt" cellClassName="opt" render={record => (
                                        (record.state === "RUNNING") && (
                                            <>
                                                <ConfirmButton
                                                    label="common.action.deprecate"
                                                    size="small"
                                                    color="primary"
                                                    startIcon={<CloseIcon />}
                                                    sx={{
                                                        padding: '1px',
                                                        fontSize: '.75rem',
                                                        '& .MuiButton-startIcon': {
                                                            marginRight: '2px'
                                                        },
                                                    }}
                                                    data={record.uuid}
                                                    onConfirm={() => {
                                                        onDeprecate(record.id);
                                                    }}
                                                />
                                            </>
                                        )
                                    )} />
                                </StyledDatagrid>
                            </>
                        )}
                </>
            )}
        </>
    )
}
export default JamList;