1

zhang

2 天以前 9f7d850f985cbd1756798329b9a3669dae51ac48

 zy-acs-flow/src/page/segment/SegmentList.jsx

@@ -30,18 +30,23 @@
    ReferenceArrayInput,
    AutocompleteInput,
    DeleteButton,
    FunctionField,
    Count,
    useNotify,
    useRefresh,
} from 'react-admin';
import { Box, Typography, Card, Stack } from '@mui/material';
import { Box, Typography, Stack, useMediaQuery, Tabs, Tab, Divider } from '@mui/material';
import { styled } from '@mui/material/styles';
import SegmentCreate from "./SegmentCreate";
import SegmentPanel from "./SegmentPanel";
import EmptyData from "../components/EmptyData";
import MyCreateButton from "../components/MyCreateButton";
import MyExportButton from '../components/MyExportButton';
import PageDrawer from "../components/PageDrawer";
import MyField from "../components/MyField";
import { PAGE_DRAWER_WIDTH, OPERATE_MODE } from '@/config/setting';
import { PAGE_DRAWER_WIDTH, OPERATE_MODE, DEFAULT_PAGE_SIZE } from '@/config/setting';
import * as Common from '@/utils/common';
import ConfirmButton from "../components/ConfirmButton";
import ClearIcon from '@mui/icons-material/Clear';
import request from '@/utils/request';

const StyledDatagrid = styled(DatagridConfigurable)(({ theme }) => ({
    '& .css-1vooibu-MuiSvgIcon-root': {
@@ -53,34 +58,30 @@
    '& .column-name': {
    },
    '& .opt': {
        width: 200
        width: 130
    },
}));

const filters = [
    <SearchInput source="condition" alwaysOn />,
    // <SearchInput source="condition" alwaysOn />,
    <TextInput source="groupId" label="table.field.segment.groupId" alwaysOn />,
    <ReferenceInput source="agvId" label="table.field.segment.agvId" reference="agv" alwaysOn>
        <AutocompleteInput label="table.field.segment.agvId" optionText="uuid" filterToQuery={(val) => ({ uuid: val })} />
    </ReferenceInput>,
    <ReferenceInput source="taskId" label="table.field.segment.taskId" reference="task" alwaysOn>
        <AutocompleteInput label="table.field.segment.taskId" optionText="seqNum" filterToQuery={(val) => ({ seqNum: val })} />
    </ReferenceInput>,
    <TextInput source="posType" label="table.field.segment.posType" alwaysOn resettable />,
    <DateInput label='common.time.after' source="timeStart" alwaysOn />,
    <DateInput label='common.time.before' source="timeEnd" alwaysOn />,

    <TextInput source="uuid" label="table.field.segment.uuid" />,
    <TextInput source="groupId" label="table.field.segment.groupId" />,
    <NumberInput source="travelId" label="table.field.segment.travelId" />,
    <ReferenceInput source="taskId" label="table.field.segment.taskId" reference="task">
        <AutocompleteInput label="table.field.segment.taskId" optionText="seqNum" filterToQuery={(val) => ({ seqNum: val })} />
    </ReferenceInput>,
    <ReferenceInput source="agvId" label="table.field.segment.agvId" reference="agv">
        <AutocompleteInput label="table.field.segment.agvId" optionText="uuid" filterToQuery={(val) => ({ uuid: val })} />
    </ReferenceInput>,
    <NumberInput source="serial" label="table.field.segment.serial" />,
    <ReferenceInput source="startNode" label="table.field.segment.startNode" reference="code">
        <AutocompleteInput label="table.field.segment.startNode" optionText="data" filterToQuery={(val) => ({ data: val })} />
    </ReferenceInput>,
    <ReferenceInput source="endNode" label="table.field.segment.endNode" reference="code">
        <AutocompleteInput label="table.field.segment.endNode" optionText="data" filterToQuery={(val) => ({ data: val })} />
    </ReferenceInput>,
    <TextInput source="posType" label="table.field.segment.posType" />,

    <NumberInput source="backpack" label="table.field.segment.backpack" />,
    <TextInput source="state" label="table.field.segment.state" />,

    <TextInput label="common.field.memo" source="memo" />,
    <SelectInput
@@ -96,7 +97,6 @@
const SegmentList = () => {
    const translate = useTranslate();

    const [createDialog, setCreateDialog] = useState(false);
    const [drawerVal, setDrawerVal] = useState(false);

    return (
@@ -111,68 +111,21 @@
                    marginRight: !!drawerVal ? `${PAGE_DRAWER_WIDTH}px` : 0,
                }}
                title={"menu.segment"}
                empty={<EmptyData onClick={() => { setCreateDialog(true) }} />}
                empty={<EmptyData />}
                filters={filters}
                sort={{ field: "create_time", order: "desc" }}
                sort={{ field: "update_time", order: "desc" }}
                actions={(
                    <TopToolbar>
                        <FilterButton />
                        <MyCreateButton onClick={() => { setCreateDialog(true) }} />
                        <SelectColumnsButton preferenceKey='segment' />
                        <MyExportButton />
                    </TopToolbar>
                )}
                perPage={25}
                perPage={DEFAULT_PAGE_SIZE}
                filterDefaultValues={{ state: 'RUNNING' }}
            >
                <StyledDatagrid
                    preferenceKey='segment'
                    bulkActionButtons={() => <BulkDeleteButton mutationMode={OPERATE_MODE} />}
                    rowClick={(id, resource, record) => false}
                    expand={() => <SegmentPanel />}
                    expandSingle={true}
                    omit={['id', 'startNode', 'updateBy', 'createTime', 'createBy', 'memo']}
                >
                    <NumberField source="id" />
                    <TextField source="uuid" label="table.field.segment.uuid" />
                    <TextField source="groupId" label="table.field.segment.groupId" />
                    <NumberField source="travelId" label="table.field.segment.travelId" />
                    <ReferenceField source="taskId" label="table.field.segment.taskId" reference="task" link={false} sortable={false}>
                        <TextField source="seqNum" />
                    </ReferenceField>
                    <ReferenceField source="agvId" label="table.field.segment.agvId" reference="agv" link={false} sortable={false}>
                        <TextField source="uuid" />
                    </ReferenceField>
                    <NumberField source="serial" label="table.field.segment.serial" />
                    <ReferenceField source="startNode" label="table.field.segment.startNode" reference="code" link={false} sortable={false}>
                        <TextField source="data" />
                    </ReferenceField>
                    <ReferenceField source="endNode" label="table.field.segment.endNode" reference="code" link={false} sortable={false}>
                        <TextField source="data" />
                    </ReferenceField>
                    <TextField source="posType" label="table.field.segment.posType" />
                    <NumberField source="backpack" label="table.field.segment.backpack" />
                    <TextField source="state" label="table.field.segment.state" />

                    <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} />
                    <WrapperField cellClassName="opt" label="common.field.opt">
                        <EditButton sx={{ padding: '1px', fontSize: '.75rem' }} />
                        <DeleteButton sx={{ padding: '1px', fontSize: '.75rem' }} mutationMode={OPERATE_MODE} />
                    </WrapperField>
                </StyledDatagrid>
                <TabbedDatagrid />
            </List>
            <SegmentCreate
                open={createDialog}
                setOpen={setCreateDialog}
            />
            <PageDrawer
                title='Segment Detail'
                drawerVal={drawerVal}
@@ -183,4 +136,164 @@
    )
}

const tabs = [
    { id: 'INIT', name: 'page.segment.enums.state.init' },
    { id: 'WAITING', name: 'page.segment.enums.state.waiting' },
    { id: 'RUNNING', name: 'page.segment.enums.state.running' },
    { id: 'FINISH', name: 'page.segment.enums.state.finish' },
];

const TabbedDatagrid = () => {
    const translate = useTranslate();
    const notify = useNotify();
    const refresh = useRefresh();
    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]);

    const handleDeprecate = (segmentId) => {
        request.get("/segment/cancel/" + segmentId).then(res => {
            const { code, msg, data } = res.data;
            if (code === 200) {
                notify(msg || 'common.response.success', { type: 'success', messageArgs: { _: msg } });
                refresh();
            } else {
                notify(msg || 'common.response.fail', { type: 'error', messageArgs: { _: msg } });
            }
        }).catch(error => {
            notify(error.message || 'common.response.fail', { type: 'error', messageArgs: { _: error.message } });
        })
    }

    return (
        <>
            <Tabs
                variant="fullWidth"
                centered
                value={filterValues.state}
                indicatorColor="primary"
                onChange={handleChange}
            >
                {tabs.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 === 'INIT'
                        || filterValues.state === 'WAITING'
                        || filterValues.state === 'RUNNING'
                        || filterValues.state === 'FINISH'
                    )
                        && (
                            <>
                                <StyledDatagrid
                                    preferenceKey='segment'
                                    bulkActionButtons={false}
                                    rowClick={(id, resource, record) => false}
                                    expand={() => <SegmentPanel />}
                                    expandSingle={true}
                                    omit={['id', 'uuid', 'startNode', 'statusBool', 'updateBy', 'createTime', 'createBy', 'memo']}
                                >
                                    <NumberField source="id" />
                                    {/* <TextField source="segDesc" label="table.field.segment.segDesc" /> */}
                                    <TextField source="uuid" label="table.field.segment.uuid" />
                                    <TextField source="groupId" label="table.field.segment.groupId" />
                                    <ReferenceField source="travelId" label="table.field.segment.travelId" reference="travel" link={false} sortable={false}>
                                        <TextField source="uuid" />
                                    </ReferenceField>
                                    <ReferenceField source="agvId" label="table.field.segment.agvId" reference="agv" link={false} sortable={false}>
                                        <TextField source="uuid" />
                                    </ReferenceField>
                                    <ReferenceField source="taskId" label="table.field.segment.taskId" reference="task" link={false} sortable={false}>
                                        <TextField source="seqNum" />
                                    </ReferenceField>
                                    <TextField source="posType" label="table.field.segment.posType" sortable={false} />
                                    <NumberField source="backpack" label="table.field.segment.backpack" sortable={false} />
                                    <NumberField source="algoTime" label="table.field.segment.algoTime" sortable={false} />
                                    <ReferenceField source="endNode" label="table.field.segment.endNode" reference="code" link={false} sortable={false}>
                                        <TextField source="data" />
                                    </ReferenceField>
                                    <FunctionField label="table.field.segment.state" cellClassName="state" render={record => (
                                        <>
                                            {translate(tabs.find(item => item.id === record.state)?.name)}
                                        </>
                                    )} />
                                    <NumberField source="serial" label="table.field.segment.serial" sortable={false} />
                                    <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} />
                                    {(
                                        filterValues.state === 'INIT'
                                        || filterValues.state === 'WAITING'
                                        || filterValues.state === 'RUNNING'
                                    ) && (
                                            <FunctionField label="common.field.opt" cellClassName="opt" render={record => (
                                                <>
                                                    <ConfirmButton
                                                        label="common.action.deprecate"
                                                        size="small"
                                                        color="inherit"
                                                        startIcon={<ClearIcon />}
                                                        sx={{
                                                            padding: '1px',
                                                            fontSize: '.75rem',
                                                            '& .MuiButton-startIcon': {
                                                                marginRight: '2px'
                                                            },
                                                        }}
                                                        data={record.id}
                                                        onConfirm={() => {
                                                            handleDeprecate(record.id);
                                                        }}
                                                    />
                                                </>
                                            )} />
                                        )}
                                </StyledDatagrid>
                            </>
                        )}
                </>
            )}
        </>
    )
}

export default SegmentList;