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

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

View File

@ -123,11 +123,11 @@ PlanInfo.propTypes = {
};
//Модель выпуска плана
const PlanProductCompositionModel = ({ model, products, setCostProductComposition }) => {
const PlanProductCompositionModel = ({ model, products, onProductSelect }) => {
//При выборе детали на модели
const handleProductClick = ({ item }) => {
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 = {
model: PropTypes.any,
products: PropTypes.array,
setCostProductComposition: PropTypes.func
onProductSelect: PropTypes.func
};
//Генерация представления ячейки заголовка
@ -239,13 +239,24 @@ const PlanDetail = ({ plan, disableNavigatePrev = false, disableNavigateNext = f
//Собственное состояние - данные производственных составов SVG
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 (
<Container maxWidth={false} sx={STYLES.CARD_DETAILS_CONTAINER}>
<Grid container direction="row" justifyContent="center" alignItems="center" spacing={0}>
<Grid item display="flex" justifyContent="center" xs={1}>
<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>
</IconButton>
</Stack>
@ -289,7 +300,7 @@ const PlanDetail = ({ plan, disableNavigatePrev = false, disableNavigateNext = f
<PlanProductCompositionModel
model={costProductComposition.model}
products={costProductComposition.products}
setCostProductComposition={setCostProductComposition}
onProductSelect={setProduct}
/>
</Box>
</Grid>
@ -298,7 +309,7 @@ const PlanDetail = ({ plan, disableNavigatePrev = false, disableNavigateNext = f
</Grid>
<Grid item display="flex" justifyContent="center" xs={1}>
<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>
</IconButton>
</Stack>

View File

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