forked from CITKParus/P8-Panels
ЦИТК-839
This commit is contained in:
parent
581279f0af
commit
ffc2c1632d
@ -8,26 +8,7 @@
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
|
||||
import {
|
||||
Grid,
|
||||
Paper,
|
||||
Box,
|
||||
Link,
|
||||
Button,
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogTitle,
|
||||
InputLabel,
|
||||
FormControl,
|
||||
OutlinedInput,
|
||||
InputAdornment,
|
||||
IconButton,
|
||||
Icon,
|
||||
Select,
|
||||
MenuItem,
|
||||
FormHelperText
|
||||
} from "@mui/material";
|
||||
import { Grid, Paper, Box, Link } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../components/p8p_data_grid"; //Таблица данных
|
||||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||
@ -35,6 +16,7 @@ import { ApplicationСtx } from "../../context/application"; //Контекст
|
||||
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
|
||||
import { headCellRender, dataCellRender, groupCellRender, DIGITS_REG_EXP, MONTH_NAME_REG_EXP, DAY_NAME_REG_EXP } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||||
import { TEXTS } from "../../../app.text"; //Тектовые ресурсы и константы
|
||||
import { FilterDialog } from "./filter_dialog"; //Компонент диалогового окна фильтра отбора
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
@ -63,18 +45,15 @@ const EqsPrfrm = () => {
|
||||
toYear: 1990
|
||||
});
|
||||
|
||||
//Состояние хранения копии фильтра
|
||||
const [filterCopy, setFilterCopy] = useState({ ...filter });
|
||||
|
||||
//Состояние открытия фильтра
|
||||
const [filterOpen, setFilterOpen] = useState(true);
|
||||
|
||||
//Состояние данных по умолчанию для фильтра
|
||||
const [defaultLoaded, setDefaultLoaded] = useState(false);
|
||||
|
||||
// Состояние хранения копии фильтра
|
||||
const [filterCopy, setFilterCopy] = useState({ ...filter });
|
||||
|
||||
// Состояние ограничения редактирования фильтра
|
||||
const [filterLock, setFilterLock] = useState(false);
|
||||
|
||||
//Состояние ячейки заголовка даты (по раскрытию/скрытию)
|
||||
const [activeRef, setActiveRef] = useState();
|
||||
|
||||
@ -82,7 +61,7 @@ const EqsPrfrm = () => {
|
||||
const [refIsDeprecated, setRidFlag] = useState(true);
|
||||
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowDictionary, pOnlineShowUnit } = useContext(ApplicationСtx);
|
||||
const { pOnlineShowUnit } = useContext(ApplicationСtx);
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
@ -202,30 +181,9 @@ const EqsPrfrm = () => {
|
||||
setFilterOpen(true);
|
||||
};
|
||||
|
||||
// Закрыть фильтр
|
||||
const closeFilter = e => {
|
||||
if (filterLock && e != undefined) setFilter(filterCopy);
|
||||
setFilterOpen(false);
|
||||
};
|
||||
|
||||
// Очистить фильтр
|
||||
const clearFilter = () => {
|
||||
setFilter({
|
||||
belong: "",
|
||||
prodObj: "",
|
||||
techServ: "",
|
||||
respDep: "",
|
||||
fromMonth: "",
|
||||
fromYear: "",
|
||||
toMonth: "",
|
||||
toYear: ""
|
||||
});
|
||||
};
|
||||
|
||||
//Отработка события скрытия/раскрытия ячейки даты
|
||||
const handleClick = (e, ref) => {
|
||||
const curCell = ref.current;
|
||||
|
||||
if (e.target.type == "button" || e.target.offsetParent.type == "button") {
|
||||
setActiveRef(curCell);
|
||||
setRidFlag(false);
|
||||
@ -260,306 +218,17 @@ const EqsPrfrm = () => {
|
||||
//eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [refIsDeprecated]);
|
||||
|
||||
let yearArray = [];
|
||||
const monthArray = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];
|
||||
let today = new Date();
|
||||
|
||||
// Получение списка лет
|
||||
const getYearArray = () => {
|
||||
for (let i = 1990; i <= today.getFullYear(); i++) {
|
||||
yearArray.push(i);
|
||||
}
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
{getYearArray()}
|
||||
<Dialog open={filterOpen} onClose={closeFilter}>
|
||||
<DialogTitle>Фильтр отбора</DialogTitle>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={closeFilter}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: theme => theme.palette.grey[500]
|
||||
}}
|
||||
>
|
||||
<Icon>close</Icon>
|
||||
</IconButton>
|
||||
<DialogContent>
|
||||
<Paper>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<FormControl readOnly fullWidth variant="outlined">
|
||||
<InputLabel htmlFor="belong-outlined">Принадлежность</InputLabel>
|
||||
<OutlinedInput
|
||||
error={filter.belong ? false : true}
|
||||
id="belong-outlined"
|
||||
value={filter.belong}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="belong select"
|
||||
onClick={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "JuridicalPersons",
|
||||
callBack: res =>
|
||||
res.success === true
|
||||
? setFilter(pv => ({ ...pv, belong: res.outParameters.out_CODE }))
|
||||
: null
|
||||
});
|
||||
}}
|
||||
edge="end"
|
||||
>
|
||||
<Icon>list</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
aria-describedby="belong-outlined-helper-text"
|
||||
label="Принадлежность"
|
||||
<FilterDialog
|
||||
filter={filter}
|
||||
filterCopy={filterCopy}
|
||||
filterOpen={filterOpen}
|
||||
setFilter={setFilter}
|
||||
setFilterOpen={setFilterOpen}
|
||||
setDataGrid={setDataGrid}
|
||||
/>
|
||||
{filter.belong ? null : (
|
||||
<FormHelperText id="belong-outlined-helper-text" sx={{ color: "red" }}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<FormControl readOnly fullWidth>
|
||||
<InputLabel htmlFor="prodObj-outlined">Производственный объект</InputLabel>
|
||||
<OutlinedInput
|
||||
error={filter.prodObj ? false : true}
|
||||
id="prodObj-outlined"
|
||||
value={filter.prodObj}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="prodObj select"
|
||||
onClick={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "EquipConfiguration",
|
||||
callBack: res =>
|
||||
res.success === true
|
||||
? setFilter(pv => ({ ...pv, prodObj: res.outParameters.out_CODE }))
|
||||
: null
|
||||
});
|
||||
}}
|
||||
edge="end"
|
||||
>
|
||||
<Icon>list</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
aria-describedby="prodObj-outlined-helper-text"
|
||||
label="Производственный объект"
|
||||
/>
|
||||
{filter.prodObj ? null : (
|
||||
<FormHelperText id="prodObj-outlined-helper-text" sx={{ color: "red" }}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<FormControl readOnly fullWidth>
|
||||
<InputLabel htmlFor="techServ-outlined">Техническая служба</InputLabel>
|
||||
<OutlinedInput
|
||||
id="techServ-outlined"
|
||||
value={filter.techServ}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="techServ select"
|
||||
onClick={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "INS_DEPARTMENT",
|
||||
callBack: res =>
|
||||
res.success === true
|
||||
? setFilter(pv => ({ ...pv, techServ: res.outParameters.out_CODE }))
|
||||
: null
|
||||
});
|
||||
}}
|
||||
edge="end"
|
||||
>
|
||||
<Icon>list</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
label="Техническая служба"
|
||||
/>
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<FormControl readOnly fullWidth>
|
||||
<InputLabel htmlFor="respDep-outlined">Ответственное подразделение</InputLabel>
|
||||
<OutlinedInput
|
||||
id="respDep-outlined"
|
||||
value={filter.respDep}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton
|
||||
aria-label="respDep select"
|
||||
onClick={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "INS_DEPARTMENT",
|
||||
callBack: res =>
|
||||
res.success === true
|
||||
? setFilter(pv => ({ ...pv, respDep: res.outParameters.out_CODE }))
|
||||
: null
|
||||
});
|
||||
}}
|
||||
edge="end"
|
||||
>
|
||||
<Icon>list</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
label="Ответственное подразделение"
|
||||
/>
|
||||
</FormControl>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid textAlign={"center"} item xs={4}>
|
||||
Начало периода:
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="from-month-select-label">Месяц</InputLabel>
|
||||
<Select
|
||||
error={filter.fromMonth ? false : true}
|
||||
labelId="from-month-select-label"
|
||||
id="from-month-select"
|
||||
value={filter.fromMonth}
|
||||
aria-describedby="from-month-select-helper-text"
|
||||
label="Месяц"
|
||||
onChange={e => setFilter(pv => ({ ...pv, fromMonth: e.target.value }))}
|
||||
>
|
||||
{monthArray.map((item, i) => (
|
||||
<MenuItem key={i + 1} value={i + 1}>
|
||||
{item}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
{filter.fromMonth ? null : (
|
||||
<FormHelperText id="from-month-select-helper-text" sx={{ color: "red" }}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="from-year-select-label">Год</InputLabel>
|
||||
<Select
|
||||
error={filter.fromYear ? false : true}
|
||||
labelId="from-year-select-label"
|
||||
id="from-year-select"
|
||||
value={filter.fromYear}
|
||||
aria-describedby="from-year-select-helper-text"
|
||||
label="Год"
|
||||
onChange={e => setFilter(pv => ({ ...pv, fromYear: e.target.value }))}
|
||||
>
|
||||
{yearArray.map((item, i) => (
|
||||
<MenuItem key={i} value={item}>
|
||||
{item}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
{filter.fromYear ? null : (
|
||||
<FormHelperText id="from-year-select-helper-text" sx={{ color: "red" }}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid textAlign={"center"} item xs={4}>
|
||||
Конец периода:
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="to-month-select-label">Месяц</InputLabel>
|
||||
<Select
|
||||
error={filter.toMonth ? false : true}
|
||||
labelId="to-month-select-label"
|
||||
id="to-month-select"
|
||||
value={filter.toMonth}
|
||||
aria-describedby="to-month-select-helper-text"
|
||||
label="Месяц"
|
||||
onChange={e => setFilter(pv => ({ ...pv, toMonth: e.target.value }))}
|
||||
>
|
||||
{monthArray.map((item, i) => (
|
||||
<MenuItem key={i + 1} value={i + 1}>
|
||||
{item}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
{filter.toMonth ? null : (
|
||||
<FormHelperText id="to-month-select-helper-text" sx={{ color: "red" }}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FormControl fullWidth>
|
||||
<InputLabel id="to-year-select-label">Год</InputLabel>
|
||||
<Select
|
||||
error={filter.toYear ? false : true}
|
||||
labelId="to-year-select-label"
|
||||
id="to-year-select"
|
||||
value={filter.toYear}
|
||||
aria-describedby="to-year-select-helper-text"
|
||||
label="Год"
|
||||
onChange={e => setFilter(pv => ({ ...pv, toYear: e.target.value }))}
|
||||
>
|
||||
{yearArray.map((item, i) => (
|
||||
<MenuItem key={i} value={item}>
|
||||
{item}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
{filter.toYear ? null : (
|
||||
<FormHelperText id="to-year-select-helper-text" sx={{ color: "red" }}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Paper>
|
||||
</DialogContent>
|
||||
<DialogActions>
|
||||
<Button
|
||||
disabled={
|
||||
filter.belong && filter.prodObj && filter.fromMonth && filter.fromYear && filter.toMonth && filter.toYear ? false : true
|
||||
}
|
||||
onClick={() => {
|
||||
setFilterLock(true);
|
||||
setDataGrid({ reload: true });
|
||||
closeFilter();
|
||||
}}
|
||||
>
|
||||
Сформировать
|
||||
</Button>
|
||||
<Button onClick={clearFilter}>Очистить</Button>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setFilter(filterCopy);
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
<Link component="button" variant="body2" textAlign={"left"} onClick={openFilter}>
|
||||
Фильтр отбора: {filter.belong ? `Принадлежность: ${filter.belong}` : ""}{" "}
|
||||
{filter.prodObj ? `Производственный объект: ${filter.prodObj}` : ""} {filter.techServ ? `Техническая служба: ${filter.techServ}` : ""}{" "}
|
||||
|
||||
257
app/panels/eqs_prfrm/filter_dialog.js
Normal file
257
app/panels/eqs_prfrm/filter_dialog.js
Normal file
@ -0,0 +1,257 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - ТОиР - Выполнение работ
|
||||
Панель мониторинга: Диалоговое окно фильтра отбора
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext, useEffect, useCallback } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, Paper, Box, Grid } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { FilterInputField } from "./filter_input_field"; //Компонент поля ввода
|
||||
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
|
||||
import { STYLES } from "./layouts"; //Стили
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Массив месяцев
|
||||
export const MONTH_ARRAY = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Диалоговое окно фильтра отбора
|
||||
const FilterDialog = props => {
|
||||
//Свойства
|
||||
const { filter, filterCopy, filterOpen, setFilter, setFilterOpen, setDataGrid } = props;
|
||||
|
||||
//Состояние ограничения редактирования фильтра
|
||||
const [filterLock, setFilterLock] = useState(false);
|
||||
|
||||
//Состояние массива лет
|
||||
const [years, setYears] = useState({ array: [1990], filled: false });
|
||||
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowDictionary } = useContext(ApplicationСtx);
|
||||
|
||||
//Закрыть фильтр
|
||||
const closeFilter = e => {
|
||||
if (filterLock && e != undefined) setFilter(filterCopy);
|
||||
setFilterOpen(false);
|
||||
};
|
||||
|
||||
//Очистить фильтр
|
||||
const clearFilter = () => {
|
||||
setFilter({
|
||||
belong: "",
|
||||
prodObj: "",
|
||||
techServ: "",
|
||||
respDep: "",
|
||||
fromMonth: "",
|
||||
fromYear: "",
|
||||
toMonth: "",
|
||||
toYear: ""
|
||||
});
|
||||
};
|
||||
|
||||
//Заполнение состояния массива лет
|
||||
const getYearArray = useCallback(async () => {
|
||||
const today = new Date();
|
||||
for (let i = years.array[0] + 1; i <= today.getFullYear(); i++) {
|
||||
setYears(pv => ({ ...pv, array: [...pv.array, i] }));
|
||||
}
|
||||
setYears(pv => ({ ...pv, filled: true }));
|
||||
//eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
//Только при первичном рендере
|
||||
useEffect(() => {
|
||||
if (filterOpen && !years.filled) getYearArray();
|
||||
}, [filterOpen, getYearArray, years.filled]);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<Dialog open={filterOpen} onClose={closeFilter}>
|
||||
<DialogTitle>Фильтр отбора</DialogTitle>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={closeFilter}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: theme => theme.palette.grey[500]
|
||||
}}
|
||||
>
|
||||
<Icon>close</Icon>
|
||||
</IconButton>
|
||||
<DialogContent>
|
||||
<Paper>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<FilterInputField
|
||||
elementCode="belong"
|
||||
elementValue={filter.belong}
|
||||
labelText="Принадлежность"
|
||||
changeFunc={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "JuridicalPersons",
|
||||
callBack: res =>
|
||||
res.success === true ? setFilter(pv => ({ ...pv, belong: res.outParameters.out_CODE })) : null
|
||||
});
|
||||
}}
|
||||
required={true}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<FilterInputField
|
||||
elementCode="prodObj"
|
||||
elementValue={filter.prodObj}
|
||||
labelText="Производственный объект"
|
||||
changeFunc={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "EquipConfiguration",
|
||||
callBack: res =>
|
||||
res.success === true ? setFilter(pv => ({ ...pv, prodObj: res.outParameters.out_CODE })) : null
|
||||
});
|
||||
}}
|
||||
required={true}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<FilterInputField
|
||||
elementCode="techServ"
|
||||
elementValue={filter.techServ}
|
||||
labelText="Техническая служба"
|
||||
changeFunc={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "INS_DEPARTMENT",
|
||||
callBack: res =>
|
||||
res.success === true ? setFilter(pv => ({ ...pv, techServ: res.outParameters.out_CODE })) : null
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<FilterInputField
|
||||
elementCode="respDep"
|
||||
elementValue={filter.respDep}
|
||||
labelText="Ответственное подразделение"
|
||||
changeFunc={() => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "INS_DEPARTMENT",
|
||||
callBack: res =>
|
||||
res.success === true ? setFilter(pv => ({ ...pv, respDep: res.outParameters.out_CODE })) : null
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid textAlign={"center"} item xs={4}>
|
||||
Начало периода:
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FilterInputField
|
||||
elementCode="from-month"
|
||||
elementValue={filter.fromMonth}
|
||||
labelText="Месяц"
|
||||
changeFunc={e => setFilter(pv => ({ ...pv, fromMonth: e.target.value }))}
|
||||
required={true}
|
||||
isDateField={true}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FilterInputField
|
||||
elementCode="from-year"
|
||||
elementValue={filter.fromYear}
|
||||
labelText="Год"
|
||||
changeFunc={e => setFilter(pv => ({ ...pv, fromYear: e.target.value }))}
|
||||
required={true}
|
||||
isDateField={true}
|
||||
yearArray={years.array}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box component="section" sx={{ p: 1 }}>
|
||||
<Grid container spacing={2}>
|
||||
<Grid textAlign={"center"} item xs={4}>
|
||||
Конец периода:
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FilterInputField
|
||||
elementCode="to-month"
|
||||
elementValue={filter.toMonth}
|
||||
labelText="Месяц"
|
||||
changeFunc={e => setFilter(pv => ({ ...pv, toMonth: e.target.value }))}
|
||||
required={true}
|
||||
isDateField={true}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FilterInputField
|
||||
elementCode="to-year"
|
||||
elementValue={filter.toYear}
|
||||
labelText="Год"
|
||||
changeFunc={e => setFilter(pv => ({ ...pv, toYear: e.target.value }))}
|
||||
required={true}
|
||||
isDateField={true}
|
||||
yearArray={years.array}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Paper>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ ...STYLES.FILTER_DIALOG_ACTIONS }}>
|
||||
<Button
|
||||
variant="text"
|
||||
disabled={
|
||||
filter.belong && filter.prodObj && filter.fromMonth && filter.fromYear && filter.toMonth && filter.toYear ? false : true
|
||||
}
|
||||
onClick={() => {
|
||||
setFilterLock(true);
|
||||
setDataGrid({ reload: true });
|
||||
closeFilter();
|
||||
}}
|
||||
>
|
||||
Сформировать
|
||||
</Button>
|
||||
<Button variant="text" onClick={clearFilter}>
|
||||
Очистить
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => {
|
||||
setFilter(filterCopy);
|
||||
}}
|
||||
>
|
||||
Отмена
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Диалоговое окно фильтра отбора
|
||||
FilterDialog.propTypes = {
|
||||
filter: PropTypes.object.isRequired,
|
||||
filterCopy: PropTypes.object.isRequired,
|
||||
filterOpen: PropTypes.bool.isRequired,
|
||||
setFilter: PropTypes.func.isRequired,
|
||||
setFilterOpen: PropTypes.func.isRequired,
|
||||
setDataGrid: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { FilterDialog };
|
||||
121
app/panels/eqs_prfrm/filter_input_field.js
Normal file
121
app/panels/eqs_prfrm/filter_input_field.js
Normal file
@ -0,0 +1,121 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - ТОиР - Выполнение работ
|
||||
Панель мониторинга: Компонент поля ввода
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { FormControl, InputLabel, Input, InputAdornment, IconButton, Icon, FormHelperText, Select, MenuItem } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { MONTH_ARRAY } from "./filter_dialog"; //Название месяцев
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Поле ввода
|
||||
const FilterInputField = props => {
|
||||
//Свойства
|
||||
const { elementCode, elementValue, labelText, changeFunc, required, isDateField, yearArray } = props;
|
||||
|
||||
//Состояние идентификатора элемента
|
||||
const [elementId, setElementId] = useState("");
|
||||
|
||||
//Формирование идентификатора элемента
|
||||
const generateId = useCallback(async () => {
|
||||
setElementId(!isDateField ? `${elementCode}-input` : `${elementCode}-select`);
|
||||
}, [elementCode, isDateField]);
|
||||
|
||||
//При рендере поля ввода
|
||||
useEffect(() => {
|
||||
generateId();
|
||||
}, [generateId]);
|
||||
|
||||
//Генерация поля с выбором из словаря Парус
|
||||
const renderInput = () => {
|
||||
return (
|
||||
<Input
|
||||
error={!elementValue && required ? true : false}
|
||||
id={elementId}
|
||||
value={elementValue}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-label={`${elementCode} select`} onClick={changeFunc} edge="end">
|
||||
<Icon>list</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
}
|
||||
aria-describedby={`${elementId}-helper-text`}
|
||||
label={labelText}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
//Генерация поля с выпадающим списком
|
||||
const renderSelect = () => {
|
||||
return (
|
||||
<Select
|
||||
error={elementValue ? false : true}
|
||||
id={elementId}
|
||||
value={elementValue}
|
||||
aria-describedby={`${elementId}-helper-text`}
|
||||
label={labelText}
|
||||
onChange={changeFunc}
|
||||
>
|
||||
{labelText === "Месяц"
|
||||
? MONTH_ARRAY.map((item, i) => (
|
||||
<MenuItem key={i + 1} value={i + 1}>
|
||||
{item}
|
||||
</MenuItem>
|
||||
))
|
||||
: null}
|
||||
{labelText === "Год"
|
||||
? yearArray.map(item => (
|
||||
<MenuItem key={item} value={item}>
|
||||
{item}
|
||||
</MenuItem>
|
||||
))
|
||||
: null}
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<FormControl readOnly={isDateField ? false : true} fullWidth variant="standard">
|
||||
<InputLabel htmlFor={elementId}>{labelText}</InputLabel>
|
||||
{isDateField ? renderSelect() : renderInput()}
|
||||
{required && !elementValue ? (
|
||||
<FormHelperText id={`${elementId}-helper-text`} sx={{ color: "red" }}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
) : null}
|
||||
</FormControl>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Поле ввода
|
||||
FilterInputField.propTypes = {
|
||||
elementCode: PropTypes.string.isRequired,
|
||||
elementValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
labelText: PropTypes.string.isRequired,
|
||||
changeFunc: PropTypes.func.isRequired,
|
||||
required: PropTypes.bool,
|
||||
isDateField: PropTypes.bool,
|
||||
yearArray: PropTypes.arrayOf(PropTypes.number)
|
||||
};
|
||||
|
||||
//Значения по умолчанию - Поле ввода
|
||||
FilterInputField.defaultProps = {
|
||||
required: false,
|
||||
isDateField: false
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { FilterInputField };
|
||||
@ -8,7 +8,7 @@
|
||||
//---------------------
|
||||
|
||||
import React, { createRef } from "react"; //Классы React
|
||||
import { Grid, Stack } from "@mui/material";
|
||||
import { Grid, Stack } from "@mui/material"; //Интерфейсные компоненты
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
@ -19,6 +19,7 @@ export const DIGITS_REG_EXP = /\d+,?\d*/g;
|
||||
export const MONTH_NAME_REG_EXP = /_\d{4}_\d{1,2}/;
|
||||
export const DAY_NAME_REG_EXP = /_\d{4}_\d{1,2}_\d{1,2}/;
|
||||
|
||||
//Стили
|
||||
export const STYLES = {
|
||||
HIDE_CELL_STYLE: { display: "none" },
|
||||
HCR_MAIN_STYLE: { border: "1px solid rgba(0, 0, 0)", textAlign: "center" },
|
||||
@ -27,29 +28,30 @@ export const STYLES = {
|
||||
DCR_OBJECT_INFO_STYLE: { textAlign: "right", fontWeight: "bold" },
|
||||
DCR_PLAN_CELL_STYLE: { cursor: "pointer", backgroundColor: "lightblue", border: "1px solid rgba(0, 0, 0) !important" },
|
||||
DCR_FACT_RELATED_CELL_STYLE: { cursor: "pointer", backgroundColor: "green", border: "1px solid rgba(0, 0, 0) !important" },
|
||||
DCR_FACT_NOT_REALATED_CELL_STYLE: { cursor: "pointer", backgroundColor: "crimson", border: "1px solid rgba(0, 0, 0) !important" }
|
||||
DCR_FACT_NOT_RELATED_CELL_STYLE: { cursor: "pointer", backgroundColor: "crimson", border: "1px solid rgba(0, 0, 0) !important" },
|
||||
FILTER_DIALOG_ACTIONS: { justifyContent: "center" }
|
||||
};
|
||||
|
||||
let curParent = "";
|
||||
let x = 0;
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
const formatDate = date => {
|
||||
const [year, month, day] = date.substring(1).split("_");
|
||||
let nd;
|
||||
if (day == null) nd = `${month < 10 ? "0" + month : month}.${year}`;
|
||||
else nd = `${day < 10 ? "0" + day : day}.${month < 10 ? "0" + month : month}.${year}`;
|
||||
return nd;
|
||||
//Формирование даты полной и даты без дней из наименования ячейки
|
||||
const formatDate = dateCellName => {
|
||||
const [year, month, day] = dateCellName.substring(1).split("_");
|
||||
let date;
|
||||
if (day == null) date = `${month < 10 ? "0" + month : month}.${year}`;
|
||||
else date = `${day < 10 ? "0" + day : day}.${month < 10 ? "0" + month : month}.${year}`;
|
||||
return date;
|
||||
};
|
||||
|
||||
//Генерация представления заголовка колонки
|
||||
export const headCellRender = ({ columnDef }, hClick) => {
|
||||
let cellStyle = STYLES.HCR_MAIN_STYLE; //{ border: "1px solid rgba(0, 0, 0)", textAlign: "center" };
|
||||
let cellStyle = STYLES.HCR_MAIN_STYLE;
|
||||
let cellProps = {};
|
||||
let stackStyle = {};
|
||||
let data = columnDef.caption;
|
||||
//Для разворачивающихся колонок
|
||||
if (columnDef.expandable) {
|
||||
const ref = createRef();
|
||||
cellStyle = { ...cellStyle, padding: "5px" };
|
||||
@ -62,42 +64,49 @@ export const headCellRender = ({ columnDef }, hClick) => {
|
||||
};
|
||||
stackStyle = { flexDirection: "column" };
|
||||
}
|
||||
if (columnDef.name == "SOBJINFO" || columnDef.name == "SWRKTYPE") cellStyle = STYLES.HIDE_CELL_STYLE; //{ display: "none" };
|
||||
//Скрываем ненужные колонки
|
||||
if (columnDef.name == "SOBJINFO" || columnDef.name == "SWRKTYPE") cellStyle = STYLES.HIDE_CELL_STYLE;
|
||||
//Объединение нужных колонок и строк
|
||||
if (columnDef.name == "SINFO" || columnDef.name == "SWRKTYPE") {
|
||||
cellProps = { colSpan: 2 };
|
||||
if (columnDef.name == "SINFO") cellProps = { ...cellProps, rowSpan: 2 };
|
||||
}
|
||||
//if (columnDef.name == "SWRKTYPE") cellStyle = STYLES.HIDE_CELL_STYLE; //{ display: "none" };
|
||||
//Изменения в заголовках с датами
|
||||
if (columnDef.visible && DAY_NAME_REG_EXP.test(columnDef.name)) {
|
||||
cellStyle = { ...cellStyle, ...STYLES.HCR_DATE_STYLE }; //{ ...cellStyle, padding: "5px", minWidth: "25px", maxWidth: "25px" };
|
||||
cellStyle = { ...cellStyle, ...STYLES.HCR_DATE_STYLE };
|
||||
stackStyle = { justifyContent: "center" };
|
||||
}
|
||||
return { cellStyle, cellProps, stackStyle, data };
|
||||
};
|
||||
|
||||
//Генерация представления ячейки
|
||||
export const dataCellRender = ({ row, columnDef }, showEquipSrv) => {
|
||||
let cellStyle = STYLES.DCR_MAIN_STYLE; /*{
|
||||
padding: "2px",
|
||||
border: "1px solid rgba(0, 0, 0) !important",
|
||||
textAlign: "center"
|
||||
};*/
|
||||
let curParent = "";
|
||||
let cellDate;
|
||||
let cellStyle = STYLES.DCR_MAIN_STYLE;
|
||||
let cellProps = {};
|
||||
let data = " ";
|
||||
//Если строка с трудоёмкостью по объекту ремонта
|
||||
if (row["SWRKTYPE"] == undefined) {
|
||||
//Ячейка "Информация по объекту ремонта"
|
||||
if (columnDef.name == "SOBJINFO") {
|
||||
cellProps = { colSpan: 2 };
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_OBJECT_INFO_STYLE }; //{ ...cellStyle, textAlign: "right", fontWeight: "bold" };
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_OBJECT_INFO_STYLE };
|
||||
}
|
||||
if (columnDef.name == "SWRKTYPE") cellStyle = STYLES.HIDE_CELL_STYLE; //{ display: "none" };
|
||||
//Ячейка "Тип работ"
|
||||
if (columnDef.name == "SWRKTYPE") cellStyle = STYLES.HIDE_CELL_STYLE;
|
||||
//Ячейки колонок месяцев
|
||||
if (columnDef.parent == "" && columnDef.expandable == true && columnDef.expanded == false) {
|
||||
curParent = columnDef.name;
|
||||
return { cellStyle: { ...cellStyle, height: "25px" }, data };
|
||||
} else if (columnDef.name != "SWRKTYPE" && columnDef.parent != "" && columnDef.expandable == false && columnDef.expanded == true) {
|
||||
}
|
||||
//Поиск развёрнутых месяцев
|
||||
else if (columnDef.name != "SWRKTYPE" && columnDef.parent != "" && columnDef.expandable == false && columnDef.expanded == true) {
|
||||
if (columnDef.name.endsWith("_1")) {
|
||||
curParent = columnDef.parent;
|
||||
const [year, month] = curParent.substring(1).split("_");
|
||||
x = new Date(year, month, 0).getDate();
|
||||
cellProps = { colSpan: x };
|
||||
cellDate = new Date(year, month, 0).getDate();
|
||||
cellProps = { colSpan: cellDate };
|
||||
data = row[curParent];
|
||||
return { cellStyle, cellProps, data };
|
||||
} else {
|
||||
@ -105,16 +114,19 @@ export const dataCellRender = ({ row, columnDef }, showEquipSrv) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
//Строка плана по объекту ремонта
|
||||
if (columnDef.name == "SOBJINFO" && row["SWRKTYPE"] == "План") {
|
||||
cellStyle = { ...cellStyle };
|
||||
cellProps = { rowSpan: 2 };
|
||||
}
|
||||
//Строка факта по объекту ремонта
|
||||
if (columnDef.name == "SOBJINFO" && row["SWRKTYPE"] == "Факт") {
|
||||
cellStyle = { display: "none" };
|
||||
}
|
||||
//Закрашивание ячеек
|
||||
switch (row[columnDef.name]) {
|
||||
case "blue":
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_PLAN_CELL_STYLE }; //{ ...cellStyle, cursor: "pointer", backgroundColor: "lightblue", border: "1px solid rgba(0, 0, 0) !important" };
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_PLAN_CELL_STYLE };
|
||||
cellProps = {
|
||||
title: formatDate(columnDef.name),
|
||||
onClick: () => {
|
||||
@ -123,7 +135,7 @@ export const dataCellRender = ({ row, columnDef }, showEquipSrv) => {
|
||||
};
|
||||
return { cellStyle, cellProps, data };
|
||||
case "green":
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_FACT_RELATED_CELL_STYLE }; //{ ...cellStyle, cursor: "pointer", backgroundColor: "green", border: "1px solid rgba(0, 0, 0) !important" };
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_FACT_RELATED_CELL_STYLE };
|
||||
cellProps = {
|
||||
title: formatDate(columnDef.name),
|
||||
onClick: () => {
|
||||
@ -132,7 +144,7 @@ export const dataCellRender = ({ row, columnDef }, showEquipSrv) => {
|
||||
};
|
||||
return { cellStyle, cellProps, data };
|
||||
case "red":
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_FACT_NOT_RELATED_CELL_STYLE }; //{ ...cellStyle, cursor: "pointer", backgroundColor: "crimson", border: "1px solid rgba(0, 0, 0) !important" };
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_FACT_NOT_RELATED_CELL_STYLE };
|
||||
cellProps = {
|
||||
title: formatDate(columnDef.name),
|
||||
onClick: () => {
|
||||
@ -140,6 +152,7 @@ export const dataCellRender = ({ row, columnDef }, showEquipSrv) => {
|
||||
}
|
||||
};
|
||||
return { cellStyle, cellProps, data };
|
||||
//Случай двойного закрашивания месяца
|
||||
case "green red":
|
||||
case "red green":
|
||||
cellStyle = { ...cellStyle, padding: "unset" };
|
||||
@ -170,7 +183,9 @@ export const dataCellRender = ({ row, columnDef }, showEquipSrv) => {
|
||||
return { cellStyle, cellProps };
|
||||
};
|
||||
|
||||
//Генерация представления заголовка группы
|
||||
export const groupCellRender = () => {
|
||||
let cellStyle = STYLES.HIDE_CELL_STYLE; //{ display: "none" };
|
||||
//Скрываем все группы
|
||||
let cellStyle = STYLES.HIDE_CELL_STYLE;
|
||||
return { cellStyle };
|
||||
};
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user