#

luxiaotao1123

2024-09-27 3b010a80cfec8da203dfca3d0c5f0f11ef5957b3

 zy-acs-flow/src/page/mission/MissionListContent.jsx

@@ -1,83 +1,106 @@
import { DragDropContext, OnDragEndResponder } from '@hello-pangea/dnd';
import { useEffect, useState } from 'react';
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 { Deal } from '../types';
import { DealColumn } from './MissionColumn';
import { DealsByStage, getDealsByStage } from './stages';
import { useConfigurationContext } from '../root/ConfigurationContext';
import {
    useDataProvider,
    useListContext,
    useNotify,
    useRefresh,
    useTranslate,
} from 'react-admin';
import { MissionColumn } from './MissionColumn';
import request from '@/utils/request';

export const MissionListContent = () => {
    const { dealStages } = useConfigurationContext();
    const { data: unorderedDeals, isPending, refetch } = useListContext();
    const translate = useTranslate();
    const notify = useNotify();
    const refresh = useRefresh();
    const { data, isPending, refetch } = useListContext();
    const dataProvider = useDataProvider();

    const [dealsByStage, setDealsByStage] = useState(
        getDealsByStage([], dealStages)
    );
    const [stages, setStages] = useState([]);

    // const [dealsByStage, setDealsByStage] = useState(
    //     getDealsByStage([], dealStages)
    // );

    useEffect(() => {
        if (unorderedDeals) {
            const newDealsByStage = getDealsByStage(unorderedDeals, dealStages);
            if (!isEqual(newDealsByStage, dealsByStage)) {
                setDealsByStage(newDealsByStage);
            }
        const httpStages = async () => {
            request.post('/mission/posType/list').then(res => {
                const { code, msg, data } = res.data;
                if (code === 200) {
                    setStages(data);
                } else {
                    notify(msg || 'common.response.fail', { type: 'error', messageArgs: { _: msg } });
                }
            }).catch(error => {
                notify(error.message || 'common.response.fail', { type: 'error', messageArgs: { _: error.message } });
            })
        }
        httpStages();
    }, []);

    useEffect(() => {
        // 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();
        // });
    };

    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Box display="flex">
                {dealStages.map(stage => (
                    <DealColumn
                        stage={stage.value}
                        deals={dealsByStage[stage.value]}
                        key={stage.value}
                {stages.map(stage => (
                    <MissionColumn
                        key={stage}
                        stage={stage}
                        missions={data.filter(item => item.posType === stage)}
                    />
                ))}
            </Box>