From 9f7d850f985cbd1756798329b9a3669dae51ac48 Mon Sep 17 00:00:00 2001 From: zhang <zc857179121@qq.com> Date: 星期一, 18 八月 2025 17:23:55 +0800 Subject: [PATCH] 1 --- zy-acs-flow/src/page/segment/SegmentList.jsx | 255 ++++++++++++++++++++++++++++++++++++-------------- 1 files changed, 182 insertions(+), 73 deletions(-) diff --git a/zy-acs-flow/src/page/segment/SegmentList.jsx b/zy-acs-flow/src/page/segment/SegmentList.jsx index 310feb0..43b51fd 100644 --- a/zy-acs-flow/src/page/segment/SegmentList.jsx +++ b/zy-acs-flow/src/page/segment/SegmentList.jsx @@ -31,18 +31,22 @@ 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, 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': { @@ -54,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 @@ -97,7 +97,6 @@ const SegmentList = () => { const translate = useTranslate(); - const [createDialog, setCreateDialog] = useState(false); const [drawerVal, setDrawerVal] = useState(false); return ( @@ -112,71 +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={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', '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="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} /> - {/* <FunctionField label="common.field.opt" cellClassName="opt" render={record => ( - <> - </> - )} /> */} - </StyledDatagrid> + <TabbedDatagrid /> </List> - <SegmentCreate - open={createDialog} - setOpen={setCreateDialog} - /> <PageDrawer title='Segment Detail' drawerVal={drawerVal} @@ -187,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> + + ( + <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; -- Gitblit v1.9.1