From 048426cae242f190ea1f5df310d68af0d738762e Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期五, 27 九月 2024 13:27:57 +0800 Subject: [PATCH] # --- zy-acs-flow/src/page/mission/MissionColumn.jsx | 24 ++----- zy-acs-flow/src/page/mission/MissionListContent.jsx | 106 +++++++++++++++++------------------ zy-acs-flow/src/page/mission/MissionList.jsx | 5 + zy-acs-flow/src/page/mission/MissionCard.jsx | 32 +++------- 4 files changed, 74 insertions(+), 93 deletions(-) diff --git a/zy-acs-flow/src/page/mission/MissionCard.jsx b/zy-acs-flow/src/page/mission/MissionCard.jsx index 961aac4..4fe4b4e 100644 --- a/zy-acs-flow/src/page/mission/MissionCard.jsx +++ b/zy-acs-flow/src/page/mission/MissionCard.jsx @@ -1,33 +1,31 @@ import { Draggable } from '@hello-pangea/dnd'; import { Box, Card, Typography } from '@mui/material'; import { ReferenceField, useRedirect } from 'react-admin'; -import { CompanyAvatar } from '../companies/CompanyAvatar'; -import { Deal } from '../types'; -export const MissionCard = ({ deal, index }) => { - if (!deal) return null; +export const MissionCard = ({ mission, index }) => { + if (!mission) return null; return ( - <Draggable draggableId={String(deal.id)} index={index}> + <Draggable draggableId={String(mission.id)} index={index}> {(provided, snapshot) => ( - <DealCardContent + <MissionCardContent provided={provided} snapshot={snapshot} - deal={deal} + mission={mission} /> )} </Draggable> ); }; -export const DealCardContent = ({ +export const MissionCardContent = ({ provided, snapshot, - deal, + mission, }) => { const redirect = useRedirect(); const handleClick = () => { - redirect(`/deals/${deal.id}/show`, undefined, undefined, undefined, { + redirect(`/mission/${mission.id}/show`, undefined, undefined, undefined, { _scrollToTop: false, }); }; @@ -50,25 +48,17 @@ <Box padding={1} display="flex"> <ReferenceField source="company_id" - record={deal} + record={mission} reference="companies" link={false} > - <CompanyAvatar width={20} height={20} /> </ReferenceField> <Box sx={{ marginLeft: 1 }}> <Typography variant="body2" gutterBottom> - {deal.name} + {mission.groupNo} </Typography> <Typography variant="caption" color="textSecondary"> - {deal.amount.toLocaleString('en-US', { - notation: 'compact', - style: 'currency', - currency: 'USD', - currencyDisplay: 'narrowSymbol', - minimumSignificantDigits: 3, - })} - {deal.category ? `, ${deal.category}` : ''} + 1 </Typography> </Box> </Box> diff --git a/zy-acs-flow/src/page/mission/MissionColumn.jsx b/zy-acs-flow/src/page/mission/MissionColumn.jsx index bdb5aad..5e9cf38 100644 --- a/zy-acs-flow/src/page/mission/MissionColumn.jsx +++ b/zy-acs-flow/src/page/mission/MissionColumn.jsx @@ -1,15 +1,10 @@ import { Droppable } from '@hello-pangea/dnd'; import { Box, Stack, Typography } from '@mui/material'; -import { Deal } from '../types'; -import { DealCard } from './MissionCard'; -import { useConfigurationContext } from '../root/ConfigurationContext'; -import { findDealLabel } from './deal'; +import { MissionCard } from './MissionCard'; -export const MissionColumn = ({ stage, deals, }) => { - const totalAmount = deals.reduce((sum, deal) => sum + deal.amount, 0); +export const MissionColumn = ({ stage, missions, }) => { - const { dealStages } = useConfigurationContext(); return ( <Box sx={{ @@ -29,20 +24,15 @@ > <Stack alignItems="center"> <Typography variant="subtitle1"> - {findDealLabel(dealStages, stage)} + 1 + {/* {findDealLabel(dealStages, stage)} */} </Typography> <Typography variant="subtitle1" color="text.secondary" fontSize="small" > - {totalAmount.toLocaleString('en-US', { - notation: 'compact', - style: 'currency', - currency: 'USD', - currencyDisplay: 'narrowSymbol', - minimumSignificantDigits: 3, - })} + 2 </Typography> </Stack> <Droppable droppableId={stage}> @@ -63,8 +53,8 @@ }, }} > - {deals.map((deal, index) => ( - <DealCard key={deal.id} deal={deal} index={index} /> + {missions.map((mission, idx) => ( + <MissionCard key={mission.id} mission={mission} index={idx} /> ))} {droppableProvided.placeholder} </Box> diff --git a/zy-acs-flow/src/page/mission/MissionList.jsx b/zy-acs-flow/src/page/mission/MissionList.jsx index 0bb97c4..3135d7c 100644 --- a/zy-acs-flow/src/page/mission/MissionList.jsx +++ b/zy-acs-flow/src/page/mission/MissionList.jsx @@ -41,6 +41,7 @@ import * as Common from '@/utils/common'; // import { MissionEmpty } from "./MissionEmpty"; import MissionShow from "./MissionShow"; +import { MissionListContent } from "./MissionListContent"; const MissionList = () => { @@ -64,6 +65,8 @@ const MissionLayout = () => { const location = useLocation(); const matchShow = matchPath('/mission/:id/show', location.pathname); + console.log(matchShow); + const { data, isPending, filterValues } = useListContext(); if (isPending) return null; @@ -90,7 +93,7 @@ </TopToolbar> )} /> <Card> - {/* <DealListContent /> */} + <MissionListContent /> </Card> {/* <DealArchivedList /> */} diff --git a/zy-acs-flow/src/page/mission/MissionListContent.jsx b/zy-acs-flow/src/page/mission/MissionListContent.jsx index fad9b6c..bb8753f 100644 --- a/zy-acs-flow/src/page/mission/MissionListContent.jsx +++ b/zy-acs-flow/src/page/mission/MissionListContent.jsx @@ -1,83 +1,81 @@ -import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd'; +import { DragDropContext } from '@hello-pangea/dnd'; import { Box } from '@mui/material'; import isEqual from 'lodash/isEqual'; import { useEffect, useState } from 'react'; -import { DataProvider, useDataProvider, useListContext } from 'react-admin'; +import { useDataProvider, useListContext } from 'react-admin'; -import { Deal } from '../types'; -import { DealColumn } from './MissionColumn'; -import { DealsByStage, getDealsByStage } from './stages'; -import { useConfigurationContext } from '../root/ConfigurationContext'; +import { MissionColumn } from './MissionColumn'; export const MissionListContent = () => { - const { dealStages } = useConfigurationContext(); - const { data: unorderedDeals, isPending, refetch } = useListContext(); + const { data, isPending, refetch } = useListContext(); const dataProvider = useDataProvider(); - const [dealsByStage, setDealsByStage] = useState( - getDealsByStage([], dealStages) - ); + // const [dealsByStage, setDealsByStage] = useState( + // getDealsByStage([], dealStages) + // ); useEffect(() => { - if (unorderedDeals) { - const newDealsByStage = getDealsByStage(unorderedDeals, dealStages); - if (!isEqual(newDealsByStage, dealsByStage)) { - setDealsByStage(newDealsByStage); - } - } + // if (data) { + // const newDealsByStage = getDealsByStage(unorderedDeals, dealStages); + // if (!isEqual(newDealsByStage, dealsByStage)) { + // setDealsByStage(newDealsByStage); + // } + // } // eslint-disable-next-line react-hooks/exhaustive-deps - }, [unorderedDeals]); + }, [data]); if (isPending) return null; const onDragEnd = result => { const { destination, source } = result; - if (!destination) { - return; - } + // if (!destination) { + // return; + // } - if ( - destination.droppableId === source.droppableId && - destination.index === source.index - ) { - return; - } + // if ( + // destination.droppableId === source.droppableId && + // destination.index === source.index + // ) { + // return; + // } - const sourceStage = source.droppableId; - const destinationStage = destination.droppableId; - const sourceDeal = dealsByStage[sourceStage][source.index]; - const destinationDeal = dealsByStage[destinationStage][ - destination.index - ] ?? { - stage: destinationStage, - index: undefined, // undefined if dropped after the last item - }; + // const sourceStage = source.droppableId; + // const destinationStage = destination.droppableId; + // const sourceDeal = dealsByStage[sourceStage][source.index]; + // const destinationDeal = dealsByStage[destinationStage][ + // destination.index + // ] ?? { + // stage: destinationStage, + // index: undefined, // undefined if dropped after the last item + // }; - // compute local state change synchronously - setDealsByStage( - updateDealStageLocal( - sourceDeal, - { stage: sourceStage, index: source.index }, - { stage: destinationStage, index: destination.index }, - dealsByStage - ) - ); + // // compute local state change synchronously + // setDealsByStage( + // updateDealStageLocal( + // sourceDeal, + // { stage: sourceStage, index: source.index }, + // { stage: destinationStage, index: destination.index }, + // dealsByStage + // ) + // ); - // persist the changes - updateDealStage(sourceDeal, destinationDeal, dataProvider).then(() => { - refetch(); - }); + // // persist the changes + // updateDealStage(sourceDeal, destinationDeal, dataProvider).then(() => { + // refetch(); + // }); }; + + const columns = ['a', 'b'] return ( <DragDropContext onDragEnd={onDragEnd}> <Box display="flex"> - {dealStages.map(stage => ( - <DealColumn - stage={stage.value} - deals={dealsByStage[stage.value]} - key={stage.value} + {columns.map(column => ( + <MissionColumn + stage={column} + missions={data} + key={column} /> ))} </Box> -- Gitblit v1.9.1