ЦИТК-784 - Добавление панели "Производственная программа" #1
@ -1,318 +0,0 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - ПУП - Производственная программа
|
||||
Панель мониторинга: Корневая панель производственной программы
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useContext, useState, useCallback, useEffect } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Drawer, Fab, Box, List, ListItemButton, ListItemText, Typography, Grid, TextField, Select, MenuItem, InputLabel } from "@mui/material"; //Интерфейсные элементы
|
||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
import { P8P_GANTT_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||
import { P8PGantt } from "../../components/p8p_gantt"; //Диаграмма Ганта
|
||||
import { formatDateJSONDateOnly } from "../../core/utils"; //Вспомогательные функции
|
||||
import { useFilteredPlans } from "./hooks"; //Вспомогательные хуки
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Высота диаграммы Ганта
|
||||
const GANTT_HEIGHT = "650px";
|
||||
|
||||
//Ширина диаграммы Ганта
|
||||
const GANTT_WIDTH = "98vw";
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
PROJECTS_FINDER: { marginTop: "10px", marginLeft: "10px", width: "93%" },
|
||||
PROJECTS_LIST_ITEM_PRIMARY: { wordWrap: "break-word" },
|
||||
PROJECTS_LIST_ITEM_SECONDARY: { wordWrap: "break-word", fontSize: "0.5rem", textTransform: "uppercase" },
|
||||
PROJECTS_LIST_ITEM_SECONDARY_NOJOBS: { color: "red" },
|
||||
PROJECTS_LIST_ITEM_SECONDARY_NOEDIT: { color: "gray" },
|
||||
PROJECTS_LIST_ITEM_SECONDARY_CHANGED: { color: "green" },
|
||||
PROJECTS_BUTTON: { position: "absolute" },
|
||||
PROJECTS_DRAWER: {
|
||||
minWidth: "250px",
|
||||
display: "inline-block",
|
||||
flexShrink: 0,
|
||||
[`& .MuiDrawer-paper`]: { minWidth: "250px", display: "inline-block", boxSizing: "border-box" }
|
||||
},
|
||||
GANTT_CONTAINER: { height: GANTT_HEIGHT, width: GANTT_WIDTH },
|
||||
GANTT_TITLE: { paddingLeft: "100px", paddingRight: "120px" },
|
||||
PERIODS_BUTTON: { position: "absolute", right: "20px" },
|
||||
PERIODS_DRAWER: { width: "1000px", flexShrink: 0, [`& .MuiDrawer-paper`]: { width: "1000px", boxSizing: "border-box" } }
|
||||
};
|
||||
|
||||
//Список проектов
|
||||
const ProjectsList = ({ plans = [], selectedPlan, filter, setFilter, onClick } = {}) => {
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<TextField
|
||||
sx={STYLES.PROJECTS_FINDER}
|
||||
name="planFilter"
|
||||
label="План"
|
||||
value={filter}
|
||||
variant="standard"
|
||||
fullWidth
|
||||
onChange={event => {
|
||||
setFilter(event.target.value);
|
||||
}}
|
||||
></TextField>
|
||||
<List>
|
||||
{plans.map(p => (
|
||||
<ListItemButton key={p.NRN} selected={p.NRN === selectedPlan} onClick={() => (onClick ? onClick(p) : null)}>
|
||||
<ListItemText
|
||||
primary={<Typography sx={STYLES.PROJECTS_LIST_ITEM_PRIMARY}>{p.SDOC_INFO}</Typography>}
|
||||
secondary={
|
||||
<Typography
|
||||
sx={{
|
||||
...STYLES.PROJECTS_LIST_ITEM_SECONDARY,
|
||||
...(p.NJOBS == 0
|
||||
? STYLES.PROJECTS_LIST_ITEM_SECONDARY_NOJOBS
|
||||
: p.NCHANGED == 1
|
||||
? STYLES.PROJECTS_LIST_ITEM_SECONDARY_CHANGED
|
||||
: STYLES.PROJECTS_LIST_ITEM_SECONDARY_NOEDIT)
|
||||
}}
|
||||
></Typography>
|
||||
}
|
||||
/>
|
||||
</ListItemButton>
|
||||
))}
|
||||
</List>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Список проектов
|
||||
ProjectsList.propTypes = {
|
||||
plans: PropTypes.array,
|
||||
selectedPlan: PropTypes.number,
|
||||
onClick: PropTypes.func,
|
||||
filter: PropTypes.string,
|
||||
setFilter: PropTypes.func
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Корневая панель производственной программы
|
||||
const MechRecCostProdPlans = () => {
|
||||
//Собственное состояние
|
||||
let [state, setState] = useState({
|
||||
init: false,
|
||||
showPlanList: false,
|
||||
plans: [],
|
||||
plansLoaded: false,
|
||||
selectedPlanSpecsLoaded: false,
|
||||
selectedPlan: null,
|
||||
selectedPlanMaxLevel: null,
|
||||
selectedPlanCurLevel: null,
|
||||
selectedPlanGanttDef: {},
|
||||
selectedPlanSpecs: []
|
||||
});
|
||||
|
||||
const [filter, setFilter] = useState("");
|
||||
|
||||
const filteredPlans = useFilteredPlans(state.plans, filter);
|
||||
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowDocument } = useContext(ApplicationСtx);
|
||||
|
||||
//Подключение к контексту сообщений
|
||||
const { InlineMsgInfo } = useContext(MessagingСtx);
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
// Инициализация планов
|
||||
const initPlans = useCallback(async () => {
|
||||
if (!state.init) {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_MECHREC.PRODPLAN_INIT",
|
||||
args: {},
|
||||
respArg: "COUT"
|
||||
});
|
||||
setState(pv => ({
|
||||
...pv,
|
||||
init: true,
|
||||
plans: [...(data?.XFCPRODPLANS || [])],
|
||||
plansLoaded: true
|
||||
}));
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [state.init, executeStored]);
|
||||
|
||||
//Выбор плана
|
||||
const selectPlan = project => {
|
||||
setState(pv => ({
|
||||
...pv,
|
||||
selectedPlan: project,
|
||||
selectedPlanSpecsLoaded: false,
|
||||
selectedPlanMaxLevel: null,
|
||||
selectedPlanCurLevel: null,
|
||||
selectedPlanSpecs: [],
|
||||
selectedPlanGanttDef: {},
|
||||
showPlanList: false
|
||||
}));
|
||||
};
|
||||
|
||||
//Сброс выбора плана
|
||||
const unselectPlan = () =>
|
||||
setState(pv => ({
|
||||
...pv,
|
||||
selectedPlanSpecsLoaded: false,
|
||||
selectedPlan: null,
|
||||
selectedPlanMaxLevel: null,
|
||||
selectedPlanCurLevel: null,
|
||||
selectedPlanSpecs: [],
|
||||
selectedPlanGanttDef: {},
|
||||
showPlanList: false
|
||||
}));
|
||||
|
||||
//Загрузка списка спецификаций плана
|
||||
const loadPlanSpecs = useCallback(
|
||||
async (curMaxLevel = null, level = null) => {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_MECHREC.FCPRODPLANSP_GET",
|
||||
args: { NFCPRODPLAN: state.selectedPlan, NLEVEL: level },
|
||||
attributeValueProcessor: (name, val) =>
|
||||
name == "numb" ? undefined : ["start", "end"].includes(name) ? formatDateJSONDateOnly(val) : val,
|
||||
respArg: "COUT"
|
||||
});
|
||||
let maxLevel = curMaxLevel ? curMaxLevel : 0;
|
||||
//Если есть данные
|
||||
if (data.XGANTT_TASKS) {
|
||||
//Обходим данные
|
||||
data.XGANTT_TASKS.forEach(el => {
|
||||
// Если есть зависимости
|
||||
if (el.dependencies) {
|
||||
//Разбиваем их в array
|
||||
el.dependencies = el.dependencies[0].split(",");
|
||||
}
|
||||
//Если уровень больше рассчитанного максимального
|
||||
maxLevel = maxLevel < el.level ? el.level : maxLevel;
|
||||
});
|
||||
}
|
||||
setState(pv => ({
|
||||
...pv,
|
||||
selectedPlanMaxLevel: maxLevel,
|
||||
selectedPlanCurLevel: level || level === 0 ? level : maxLevel,
|
||||
selectedPlanSpecsLoaded: true,
|
||||
selectedPlanGanttDef: data.XGANTT_DEF ? { ...data.XGANTT_DEF } : {},
|
||||
selectedPlanSpecs: [...(data?.XGANTT_TASKS || [])]
|
||||
}));
|
||||
},
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
[executeStored, state.ident, state.selectedPlan]
|
||||
);
|
||||
|
||||
//Обработка нажатия на элемент в списке планов
|
||||
const handleProjectClick = project => {
|
||||
if (state.selectedPlan != project.NRN) selectPlan(project.NRN);
|
||||
else unselectPlan();
|
||||
};
|
||||
|
||||
//Отработка нажатия на заголовок плана
|
||||
const handleTitleClick = () => {
|
||||
state.selectedPlan ? pOnlineShowDocument({ unitCode: "CostProductPlans", document: state.selectedPlan }) : null;
|
||||
};
|
||||
|
||||
//При подключении компонента к странице
|
||||
useEffect(() => {
|
||||
initPlans();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
//При смене выбранного плана
|
||||
useEffect(() => {
|
||||
if (state.selectedPlan) loadPlanSpecs();
|
||||
}, [state.selectedPlan, loadPlanSpecs]);
|
||||
|
||||
//Выбор уровня
|
||||
const handleChangeSelectList = selectedLevel => {
|
||||
loadPlanSpecs(state.selectedPlanMaxLevel, selectedLevel);
|
||||
setState(pv => ({ ...pv, selectedPlanCurLevel: selectedLevel }));
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box p={2}>
|
||||
<Fab variant="extended" sx={STYLES.PROJECTS_BUTTON} onClick={() => setState(pv => ({ ...pv, showPlanList: !pv.showPlanList }))}>
|
||||
Планы
|
||||
</Fab>
|
||||
<Drawer
|
||||
anchor={"left"}
|
||||
open={state.showPlanList}
|
||||
onClose={() => setState(pv => ({ ...pv, showPlanList: false }))}
|
||||
sx={STYLES.PROJECTS_DRAWER}
|
||||
>
|
||||
<ProjectsList
|
||||
plans={filteredPlans}
|
||||
selectedPlan={state.selectedPlan}
|
||||
filter={filter}
|
||||
setFilter={setFilter}
|
||||
onClick={handleProjectClick}
|
||||
/>
|
||||
</Drawer>
|
||||
{state.init == true ? (
|
||||
<Grid container spacing={1}>
|
||||
<Grid item xs={12}>
|
||||
{state.selectedPlanSpecsLoaded ? (
|
||||
state.selectedPlanSpecs.length === 0 ? (
|
||||
<InlineMsgInfo okBtn={false} text={"В плане отсутствуют записи спецификации"} />
|
||||
) : (
|
||||
<Box sx={STYLES.GANTT_CONTAINER} p={1}>
|
||||
{state.selectedPlanMaxLevel ? (
|
||||
<Box sx={{ float: "right" }}>
|
||||
<InputLabel id="demo-simple-select-label">Уровень</InputLabel>
|
||||
<Select
|
||||
labelId="demo-simple-select-label"
|
||||
id="demo-simple-select"
|
||||
value={state.selectedPlanCurLevel}
|
||||
label="Уровень"
|
||||
onChange={event => {
|
||||
handleChangeSelectList(event.target.value);
|
||||
}}
|
||||
defaultValue={state.selectedPlanCurLevel}
|
||||
>
|
||||
{[...Array(state.selectedPlanMaxLevel + 1).keys()].map(el => (
|
||||
<MenuItem value={el} key={el}>
|
||||
{el}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</Box>
|
||||
) : null}
|
||||
<P8PGantt
|
||||
{...P8P_GANTT_CONFIG_PROPS}
|
||||
{...state.selectedPlanGanttDef}
|
||||
height={GANTT_HEIGHT}
|
||||
onTitleClick={handleTitleClick}
|
||||
titleStyle={STYLES.GANTT_TITLE}
|
||||
tasks={state.selectedPlanSpecs}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
) : !state.selectedPlan ? (
|
||||
<InlineMsgInfo okBtn={false} text={"Укажите план для отображения его спецификации"} />
|
||||
) : null}
|
||||
</Grid>
|
||||
</Grid>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { MechRecCostProdPlans };
|
||||
Loading…
x
Reference in New Issue
Block a user