Dollerok/P8-Panels
1
0
Fork 0
forked from CITKParus/P8-Panels
Code Issues Pull Requests Projects Releases Wiki Activity

WEB APP: Панель "Мониторинг сборки изделия" - исправлена ошибка инициализации детальной карточки при навигации между ними

Browse Source
This commit is contained in:
Mikhail Chechnev 2024-05-24 20:28:50 +03:00
parent bd7cc1f451
commit b71db76629
2 changed files with 28 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/panels/mech_rec_assembly_mon/components/plan_detail.js
View File

@ -123,11 +123,11 @@ PlanInfo.propTypes = {
}; };
//Модель выпуска плана //Модель выпуска плана
const PlanProductCompositionModel = ({ model, products, setCostProductComposition }) => { const PlanProductCompositionModel = ({ model, products, onProductSelect }) => {
//При выборе детали на модели //При выборе детали на модели
const handleProductClick = ({ item }) => { const handleProductClick = ({ item }) => {
const product = products.find(p => p.SMODEL_ID == item.id); const product = products.find(p => p.SMODEL_ID == item.id);
if (product) setCostProductComposition(pv => ({ ...pv, selectedProduct: { ...product } })); if (product && onProductSelect) onProductSelect(product);
}; };
//Генерация содержимого //Генерация содержимого
@ -153,7 +153,7 @@ const PlanProductCompositionModel = ({ model, products, setCostProductCompositio
PlanProductCompositionModel.propTypes = { PlanProductCompositionModel.propTypes = {
model: PropTypes.any, model: PropTypes.any,
products: PropTypes.array, products: PropTypes.array,
setCostProductComposition: PropTypes.func onProductSelect: PropTypes.func
}; };
//Генерация представления ячейки заголовка //Генерация представления ячейки заголовка
@ -239,13 +239,24 @@ const PlanDetail = ({ plan, disableNavigatePrev = false, disableNavigateNext = f
//Собственное состояние - данные производственных составов SVG //Собственное состояние - данные производственных составов SVG
const [costProductComposition, setCostProductComposition] = useCostProductComposition(plan.NRN); const [costProductComposition, setCostProductComposition] = useCostProductComposition(plan.NRN);
//Выбор элемента изделия
const setProduct = product => {
setCostProductComposition(pv => ({ ...pv, selectedProduct: product ? { ...product } : null }));
};
//При навигации между карточками
const handleNavigate = direction => {
setProduct(null);
if (onNavigate) onNavigate(direction);
};
//Формируем представление //Формируем представление
return ( return (
<Container maxWidth={false} sx={STYLES.CARD_DETAILS_CONTAINER}> <Container maxWidth={false} sx={STYLES.CARD_DETAILS_CONTAINER}>
<Grid container direction="row" justifyContent="center" alignItems="center" spacing={0}> <Grid container direction="row" justifyContent="center" alignItems="center" spacing={0}>
<Grid item display="flex" justifyContent="center" xs={1}> <Grid item display="flex" justifyContent="center" xs={1}>
<Stack display="flex" direction="row" justifyContent="flex-end" alignItems="center" sx={STYLES.CARD_DETAILS_NAVIGATION_STACK}> <Stack display="flex" direction="row" justifyContent="flex-end" alignItems="center" sx={STYLES.CARD_DETAILS_NAVIGATION_STACK}>
<IconButton disabled={disableNavigatePrev} onClick={() => (onNavigate ? onNavigate(-1) : null)}> <IconButton disabled={disableNavigatePrev} onClick={() => handleNavigate(-1)}>
<Icon>navigate_before</Icon> <Icon>navigate_before</Icon>
</IconButton> </IconButton>
</Stack> </Stack>
@ -289,7 +300,7 @@ const PlanDetail = ({ plan, disableNavigatePrev = false, disableNavigateNext = f
<PlanProductCompositionModel <PlanProductCompositionModel
model={costProductComposition.model} model={costProductComposition.model}
products={costProductComposition.products} products={costProductComposition.products}
setCostProductComposition={setCostProductComposition} onProductSelect={setProduct}
/> />
</Box> </Box>
</Grid> </Grid>
@ -298,7 +309,7 @@ const PlanDetail = ({ plan, disableNavigatePrev = false, disableNavigateNext = f
</Grid> </Grid>
<Grid item display="flex" justifyContent="center" xs={1}> <Grid item display="flex" justifyContent="center" xs={1}>
<Stack display="flex" direction="row" justifyContent="flex-start" alignItems="center" sx={STYLES.CARD_DETAILS_NAVIGATION_STACK}> <Stack display="flex" direction="row" justifyContent="flex-start" alignItems="center" sx={STYLES.CARD_DETAILS_NAVIGATION_STACK}>
<IconButton disabled={disableNavigateNext} onClick={() => (onNavigate ? onNavigate(1) : null)}> <IconButton disabled={disableNavigateNext} onClick={() => handleNavigate(1)}>
<Icon>navigate_next</Icon> <Icon>navigate_next</Icon>
</IconButton> </IconButton>
</Stack> </Stack>

28
app/panels/mech_rec_assembly_mon/hooks.js
View File

@ -123,10 +123,9 @@ const useMechRecAssemblyMon = () => {
}; };
//Хук для информации по производственным составам //Хук для информации по производственным составам
const useCostProductComposition = nProdPlan => { const useCostProductComposition = plan => {
//Собственное состояние //Собственное состояние
let [costProductComposition, setCostProductComposition] = useState({ let [costProductComposition, setCostProductComposition] = useState({
init: false,
showPlanList: false, showPlanList: false,
products: [], products: [],
productsLoaded: false, productsLoaded: false,
@ -137,32 +136,27 @@ const useCostProductComposition = nProdPlan => {
//Подключение к контексту взаимодействия с сервером //Подключение к контексту взаимодействия с сервером
const { executeStored } = useContext(BackEndСtx); const { executeStored } = useContext(BackEndСtx);
//Инициализация производственных составов //При подключении компонента к странице
const initCostProductComposition = useCallback(async () => { useEffect(() => {
if (!costProductComposition.init) { const loadData = async () => {
const data = await executeStored({ const data = await executeStored({
stored: "PKG_P8PANELS_MECHREC.FCPRODCMP_DETAILS_GET", stored: "PKG_P8PANELS_MECHREC.FCPRODCMP_DETAILS_GET",
args: { NFCPRODPLAN: nProdPlan }, args: { NFCPRODPLAN: plan },
respArg: "COUT", respArg: "COUT",
isArray: name => name === "XFCPRODCMP" isArray: name => name === "XFCPRODCMP"
}); });
setCostProductComposition(pv => ({ setCostProductComposition(pv => ({
...pv, ...pv,
init: true,
products: [...(data?.XFCPRODCMP || [])], products: [...(data?.XFCPRODCMP || [])],
productsLoaded: true, productsLoaded: true,
model: data?.BMODEL model: data?.BMODEL,
selectedProduct: null
})); }));
} };
// eslint-disable-next-line react-hooks/exhaustive-deps if (plan) loadData();
}, [costProductComposition.init, executeStored]); }, [plan, executeStored]);
//При подключении компонента к странице
useEffect(() => {
initCostProductComposition();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
//Вернём данные
return [costProductComposition, setCostProductComposition]; return [costProductComposition, setCostProductComposition];
}; };