forked from CITKParus/P8-Panels
WEB APP: Панель "Выполнение работ" - рефакторинг React-компонентов
This commit is contained in:
Mikhail Chechnev
parent
a96738013c
commit
30bbce8804
@ -8,7 +8,7 @@
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
|
||||
import { Grid, Paper, Box, Link } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { Grid, Paper, Box } 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"; //Контекст взаимодействия с сервером
|
||||
@ -16,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 { Filter } from "./filter"; //Компонент фильтра
|
||||
import { FilterDialog } from "./filter_dialog"; //Компонент диалогового окна фильтра отбора
|
||||
|
||||
//-----------
|
||||
@ -35,25 +36,21 @@ const EqsPrfrm = () => {
|
||||
|
||||
//Состояние фильтра
|
||||
const [filter, setFilter] = useState({
|
||||
belong: "",
|
||||
prodObj: "",
|
||||
techServ: "",
|
||||
respDep: "",
|
||||
fromMonth: 1,
|
||||
fromYear: 1990,
|
||||
toMonth: 1,
|
||||
toYear: 1990
|
||||
isOpen: false,
|
||||
isDefault: false,
|
||||
isSetByUser: false,
|
||||
values: {
|
||||
belong: "",
|
||||
prodObj: "",
|
||||
techServ: "",
|
||||
respDep: "",
|
||||
fromMonth: 1,
|
||||
fromYear: 1990,
|
||||
toMonth: 1,
|
||||
toYear: 1990
|
||||
}
|
||||
});
|
||||
|
||||
//Состояние хранения копии фильтра
|
||||
const [filterCopy, setFilterCopy] = useState({ ...filter });
|
||||
|
||||
//Состояние открытия фильтра
|
||||
const [filterOpen, setFilterOpen] = useState(true);
|
||||
|
||||
//Состояние данных по умолчанию для фильтра
|
||||
const [defaultLoaded, setDefaultLoaded] = useState(false);
|
||||
|
||||
//Состояние ячейки заголовка даты (по раскрытию/скрытию)
|
||||
const [activeRef, setActiveRef] = useState();
|
||||
|
||||
@ -75,14 +72,14 @@ const EqsPrfrm = () => {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_EQUIPSRV.EQUIPSRV_GRID",
|
||||
args: {
|
||||
SBELONG: filter.belong,
|
||||
SPRODOBJ: filter.prodObj,
|
||||
STECHSERV: filter.techServ,
|
||||
SRESPDEP: filter.respDep,
|
||||
NFROMMONTH: filter.fromMonth,
|
||||
NFROMYEAR: filter.fromYear,
|
||||
NTOMONTH: filter.toMonth,
|
||||
NTOYEAR: filter.toYear
|
||||
SBELONG: filter.values.belong,
|
||||
SPRODOBJ: filter.values.prodObj,
|
||||
STECHSERV: filter.values.techServ,
|
||||
SRESPDEP: filter.values.respDep,
|
||||
NFROMMONTH: filter.values.fromMonth,
|
||||
NFROMYEAR: filter.values.fromYear,
|
||||
NTOMONTH: filter.values.toMonth,
|
||||
NTOYEAR: filter.values.toYear
|
||||
},
|
||||
respArg: "COUT",
|
||||
attributeValueProcessor: (name, val) => (["caption", "name", "parent"].includes(name) ? undefined : val)
|
||||
@ -144,8 +141,11 @@ const EqsPrfrm = () => {
|
||||
stored: "PKG_P8PANELS_EQUIPSRV.GET_DEFAULT_FP",
|
||||
respArg: "COUT"
|
||||
});
|
||||
setFilter(pv => ({ ...pv, belong: data.JURPERS, fromMonth: 1, fromYear: data.YEAR, toMonth: 12, toYear: data.YEAR }));
|
||||
setDefaultLoaded(true);
|
||||
setFilter(pv => ({
|
||||
...pv,
|
||||
values: { ...pv.values, belong: data.JURPERS, fromMonth: 1, fromYear: data.YEAR, toMonth: 12, toYear: data.YEAR },
|
||||
isDefault: true
|
||||
}));
|
||||
}, [executeStored]);
|
||||
|
||||
//Отбор документа (ТОиР или Ремонтных ведомостей) по ячейке даты
|
||||
@ -158,10 +158,10 @@ const EqsPrfrm = () => {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_EQUIPSRV.SELECT_EQUIPSRV",
|
||||
args: {
|
||||
SBELONG: filter.belong,
|
||||
SPRODOBJ: filter.prodObj,
|
||||
STECHSERV: filter.techServ ? filter.techServ : null,
|
||||
SRESPDEP: filter.respDep ? filter.respDep : null,
|
||||
SBELONG: filter.values.belong,
|
||||
SPRODOBJ: filter.values.prodObj,
|
||||
STECHSERV: filter.values.techServ ? filter.values.techServ : null,
|
||||
SRESPDEP: filter.values.respDep ? filter.values.respDep : null,
|
||||
STECHNAME: techName,
|
||||
SSRVKIND: servKind,
|
||||
NYEAR: Number(year),
|
||||
@ -176,10 +176,11 @@ const EqsPrfrm = () => {
|
||||
} else showMsgErr(TEXTS.NO_DATA_FOUND);
|
||||
};
|
||||
|
||||
//Открыть фильтр
|
||||
const openFilter = () => {
|
||||
setFilterOpen(true);
|
||||
};
|
||||
//Показать/скрыть фильтр
|
||||
const setFilterOpen = isOpen => setFilter(pv => ({ ...pv, isOpen }));
|
||||
|
||||
//Установить значение фильтра
|
||||
const setFilterValues = values => setFilter(pv => ({ ...pv, isSetByUser: true, values: { ...values } }));
|
||||
|
||||
//Отработка события скрытия/раскрытия ячейки даты
|
||||
const handleClick = (e, ref) => {
|
||||
@ -195,16 +196,20 @@ const EqsPrfrm = () => {
|
||||
loadData();
|
||||
}, [loadData, dataGrid.reload]);
|
||||
|
||||
//При открытом фильтре
|
||||
//При изменении фильтра
|
||||
useEffect(() => {
|
||||
if (filterOpen) {
|
||||
{
|
||||
setFilterCopy({ ...filter });
|
||||
if (!defaultLoaded) loadDefaultFilter();
|
||||
}
|
||||
}
|
||||
//eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [filterOpen]);
|
||||
if (filter.isSetByUser) setDataGrid({ reload: true });
|
||||
}, [
|
||||
filter.isSetByUser,
|
||||
filter.values.belong,
|
||||
filter.values.prodObj,
|
||||
filter.values.techServ,
|
||||
filter.values.respDep,
|
||||
filter.values.fromMonth,
|
||||
filter.values.fromYear,
|
||||
filter.values.toMonth,
|
||||
filter.values.toYear
|
||||
]);
|
||||
|
||||
//При нажатии скрытии/раскрытии ячейки даты, фокус на неё
|
||||
useEffect(() => {
|
||||
@ -218,28 +223,34 @@ const EqsPrfrm = () => {
|
||||
//eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [refIsDeprecated]);
|
||||
|
||||
//При загрузке фильтра по умолчанию
|
||||
useEffect(() => {
|
||||
if (filter.isDefault) setFilterOpen(true);
|
||||
}, [filter.isDefault]);
|
||||
|
||||
//При подключении к страницк
|
||||
useEffect(() => {
|
||||
loadDefaultFilter();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
//При открытии диалога фильтра
|
||||
const handleFilterClick = () => setFilterOpen(true);
|
||||
|
||||
//При изменении фильтра в диалоге
|
||||
const handleFilterOk = filter => {
|
||||
setFilterValues(filter);
|
||||
setFilterOpen(false);
|
||||
};
|
||||
|
||||
//При закрытии диалога фильтра
|
||||
const handleFilterCancel = () => setFilterOpen(false);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<FilterDialog
|
||||
filter={filter}
|
||||
filterCopy={filterCopy}
|
||||
filterOpen={filterOpen}
|
||||
setFilter={setFilter}
|
||||
setFilterOpen={setFilterOpen}
|
||||
setDataGrid={setDataGrid}
|
||||
/>
|
||||
<Link component="button" variant="body2" textAlign={"left"} onClick={openFilter}>
|
||||
Фильтр отбора: {filter.belong ? `Принадлежность: ${filter.belong}` : ""}{" "}
|
||||
{filter.prodObj ? `Производственный объект: ${filter.prodObj}` : ""} {filter.techServ ? `Техническая служба: ${filter.techServ}` : ""}{" "}
|
||||
{filter.respDep ? `Ответственное подразделение: ${filter.respDep}` : ""}{" "}
|
||||
{filter.fromMonth && filter.fromYear
|
||||
? `Начало периода: ${filter.fromMonth < 10 ? "0" + filter.fromMonth : filter.fromMonth}.${filter.fromYear}`
|
||||
: ""}{" "}
|
||||
{filter.toMonth && filter.toYear
|
||||
? `Конец периода: ${filter.toMonth < 10 ? "0" + filter.toMonth : filter.toMonth}.${filter.toYear}`
|
||||
: ""}
|
||||
</Link>
|
||||
{filter.isOpen ? <FilterDialog initial={filter.values} onOk={handleFilterOk} onCancel={handleFilterCancel} /> : null}
|
||||
<Filter filter={filter.values} onClick={handleFilterClick} />
|
||||
{dataGrid.dataLoaded ? (
|
||||
<Paper variant="outlined">
|
||||
<Grid container spacing={1}>
|
||||
|
||||
91
app/panels/eqs_prfrm/filter.js
Normal file
91
app/panels/eqs_prfrm/filter.js
Normal file
@ -0,0 +1,91 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - ТОиР - Выполнение работ
|
||||
Компонент: Фильтр отбора
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Chip, Stack, Icon, IconButton } from "@mui/material"; //Интерфейсные компоненты
|
||||
|
||||
//--------------------------
|
||||
//Вспомогательные компоненты
|
||||
//--------------------------
|
||||
|
||||
//Элемент фильтра
|
||||
const FilterItem = ({ caption, value, onClick }) => {
|
||||
//При нажатии на элемент
|
||||
const handleClick = () => (onClick ? onClick() : null);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Chip
|
||||
label={
|
||||
<Stack direction={"row"} alignItems={"center"}>
|
||||
<strong>{caption}</strong>: {value}
|
||||
</Stack>
|
||||
}
|
||||
variant="outlined"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Элемент фильтра
|
||||
FilterItem.propTypes = {
|
||||
caption: PropTypes.string.isRequired,
|
||||
value: PropTypes.any.isRequired,
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Фильтр отбора
|
||||
const Filter = ({ filter, onClick }) => {
|
||||
//При нажатии на фильтр
|
||||
const handleClick = () => (onClick ? onClick() : null);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Stack direction="row" spacing={1} p={1} alignItems={"center"}>
|
||||
<IconButton onClick={handleClick}>
|
||||
<Icon>filter_alt</Icon>
|
||||
</IconButton>
|
||||
{filter.belong ? <FilterItem caption={"Принадлежность"} value={filter.belong} onClick={handleClick} /> : null}
|
||||
{filter.prodObj ? <FilterItem caption={"Производственный объект"} value={filter.prodObj} onClick={handleClick} /> : null}
|
||||
{filter.techServ ? <FilterItem caption={"Техническая служба"} value={filter.techServ} onClick={handleClick} /> : null}
|
||||
{filter.respDep ? <FilterItem caption={"Ответственное подразделение"} value={filter.respDep} onClick={handleClick} /> : null}
|
||||
{filter.fromMonth && filter.fromYear ? (
|
||||
<FilterItem
|
||||
caption={"Начало периода"}
|
||||
value={`${filter.fromMonth < 10 ? "0" + filter.fromMonth : filter.fromMonth}.${filter.fromYear}`}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
) : null}
|
||||
{filter.toMonth && filter.toYear ? (
|
||||
<FilterItem
|
||||
caption={"Конец периода"}
|
||||
value={`${filter.toMonth < 10 ? "0" + filter.toMonth : filter.toMonth}.${filter.toYear}`}
|
||||
onClick={handleClick}
|
||||
/>
|
||||
) : null}
|
||||
</Stack>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Фильтр отбора
|
||||
Filter.propTypes = {
|
||||
filter: PropTypes.object.isRequired,
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { Filter };
|
||||
@ -1,52 +1,89 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - ТОиР - Выполнение работ
|
||||
Панель мониторинга: Диалоговое окно фильтра отбора
|
||||
Компонент: Диалоговое окно фильтра отбора
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext, useEffect, useCallback } from "react"; //Классы React
|
||||
import React, { useState, useContext } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, Paper, Box, Grid } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, 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 MONTH_ARRAY = ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"];
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
DIALOG_ACTIONS: { justifyContent: "center" },
|
||||
CLOSE_BUTTON: {
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: theme => theme.palette.grey[500]
|
||||
}
|
||||
};
|
||||
|
||||
//-----------------------
|
||||
//Вспомогательные функции
|
||||
//-----------------------
|
||||
|
||||
//Формирование списка лет
|
||||
const buildYears = () => {
|
||||
const res = [1990];
|
||||
const today = new Date();
|
||||
for (let i = res[0] + 1; i <= today.getFullYear(); i++) res.push(i);
|
||||
return res;
|
||||
};
|
||||
|
||||
//Выбор принадлежности
|
||||
const selectJuridicalPersons = (showDictionary, callBack) => {
|
||||
showDictionary({
|
||||
unitCode: "JuridicalPersons",
|
||||
callBack: res => (res.success === true ? callBack(res.outParameters.out_CODE) : callBack(null))
|
||||
});
|
||||
};
|
||||
|
||||
//Выбор производственного объекта
|
||||
const selectEquipConfiguration = (showDictionary, callBack) => {
|
||||
showDictionary({
|
||||
unitCode: "EquipConfiguration",
|
||||
callBack: res => (res.success === true ? callBack(res.outParameters.out_CODE) : callBack(null))
|
||||
});
|
||||
};
|
||||
|
||||
//Выбор подразделения
|
||||
const selectInsDepartment = (showDictionary, callBack) => {
|
||||
showDictionary({
|
||||
unitCode: "INS_DEPARTMENT",
|
||||
callBack: res => (res.success === true ? callBack(res.outParameters.out_CODE) : callBack(null))
|
||||
});
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Диалоговое окно фильтра отбора
|
||||
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 FilterDialog = ({ initial, onCancel, onOk }) => {
|
||||
//Собственное состояние
|
||||
const [filter, setFilter] = useState({ ...initial });
|
||||
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowDictionary } = useContext(ApplicationСtx);
|
||||
|
||||
//Закрыть фильтр
|
||||
const closeFilter = e => {
|
||||
if (filterLock && e != undefined) setFilter(filterCopy);
|
||||
setFilterOpen(false);
|
||||
};
|
||||
//При закрытии диалога без изменения фильтра
|
||||
const handleCancel = () => (onCancel ? onCancel() : null);
|
||||
|
||||
//Очистить фильтр
|
||||
const clearFilter = () => {
|
||||
//При очистке фильтра
|
||||
const handleClear = () => {
|
||||
setFilter({
|
||||
belong: "",
|
||||
prodObj: "",
|
||||
@ -59,179 +96,128 @@ const FilterDialog = props => {
|
||||
});
|
||||
};
|
||||
|
||||
//Заполнение состояния массива лет
|
||||
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
|
||||
}, []);
|
||||
//При закрытии диалога с изменением фильтра
|
||||
const handleOK = () => (onOk ? onOk(filter) : null);
|
||||
|
||||
//Только при первичном рендере
|
||||
useEffect(() => {
|
||||
if (filterOpen && !years.filled) getYearArray();
|
||||
}, [filterOpen, getYearArray, years.filled]);
|
||||
//При изменении значения элемента
|
||||
const handleFilterItemChange = (item, value) => setFilter(pv => ({ ...pv, [item]: value }));
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<Dialog open={filterOpen} onClose={closeFilter}>
|
||||
<Dialog open onClose={handleCancel} fullWidth maxWidth="sm">
|
||||
<DialogTitle>Фильтр отбора</DialogTitle>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={closeFilter}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: theme => theme.palette.grey[500]
|
||||
}}
|
||||
>
|
||||
<IconButton aria-label="close" onClick={handleCancel} sx={STYLES.CLOSE_BUTTON}>
|
||||
<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>
|
||||
<Box component="section" p={1}>
|
||||
<FilterInputField
|
||||
elementCode="belong"
|
||||
elementValue={filter.belong}
|
||||
labelText="Принадлежность"
|
||||
dictionary={callBack => selectJuridicalPersons(pOnlineShowDictionary, callBack)}
|
||||
required={true}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<FilterInputField
|
||||
elementCode="prodObj"
|
||||
elementValue={filter.prodObj}
|
||||
labelText="Производственный объект"
|
||||
dictionary={callBack => selectEquipConfiguration(pOnlineShowDictionary, callBack)}
|
||||
required={true}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<FilterInputField
|
||||
elementCode="techServ"
|
||||
elementValue={filter.techServ}
|
||||
labelText="Техническая служба"
|
||||
dictionary={callBack => selectInsDepartment(pOnlineShowDictionary, callBack)}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<FilterInputField
|
||||
elementCode="respDep"
|
||||
elementValue={filter.respDep}
|
||||
labelText="Ответственное подразделение"
|
||||
dictionary={callBack => selectInsDepartment(pOnlineShowDictionary, callBack)}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<Grid container spacing={2} alignItems={"center"}>
|
||||
<Grid textAlign={"left"} item xs={4}>
|
||||
Начало периода:
|
||||
</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 item xs={4}>
|
||||
<FilterInputField
|
||||
elementCode="fromMonth"
|
||||
elementValue={filter.fromMonth}
|
||||
labelText="Месяц"
|
||||
required={true}
|
||||
items={MONTH_ARRAY.map((item, i) => ({ value: i + 1, caption: item }))}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Grid>
|
||||
</Box>
|
||||
</Paper>
|
||||
<Grid item xs={4}>
|
||||
<FilterInputField
|
||||
elementCode="fromYear"
|
||||
elementValue={filter.fromYear}
|
||||
labelText="Год"
|
||||
required={true}
|
||||
items={buildYears().map(item => ({ value: item, caption: item }))}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<Grid container spacing={2} alignItems={"center"}>
|
||||
<Grid textAlign={"left"} item xs={4}>
|
||||
Конец периода:
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FilterInputField
|
||||
elementCode="toMonth"
|
||||
elementValue={filter.toMonth}
|
||||
labelText="Месяц"
|
||||
required={true}
|
||||
items={MONTH_ARRAY.map((item, i) => ({ value: i + 1, caption: item }))}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Grid>
|
||||
<Grid item xs={4}>
|
||||
<FilterInputField
|
||||
elementCode="toYear"
|
||||
elementValue={filter.toYear}
|
||||
labelText="Год"
|
||||
required={true}
|
||||
items={buildYears().map(item => ({ value: item, caption: item }))}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ ...STYLES.FILTER_DIALOG_ACTIONS }}>
|
||||
<DialogActions sx={STYLES.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();
|
||||
}}
|
||||
onClick={handleOK}
|
||||
>
|
||||
Сформировать
|
||||
</Button>
|
||||
<Button variant="text" onClick={clearFilter}>
|
||||
<Button variant="text" onClick={handleClear}>
|
||||
Очистить
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => {
|
||||
setFilter(filterCopy);
|
||||
}}
|
||||
>
|
||||
<Button variant="text" onClick={handleCancel}>
|
||||
Отмена
|
||||
</Button>
|
||||
</DialogActions>
|
||||
@ -242,12 +228,9 @@ const FilterDialog = props => {
|
||||
|
||||
//Контроль свойств компонента - Диалоговое окно фильтра отбора
|
||||
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
|
||||
initial: PropTypes.object.isRequired,
|
||||
onOk: PropTypes.func,
|
||||
onCancel: PropTypes.func
|
||||
};
|
||||
|
||||
//--------------------
|
||||
|
||||
@ -1,81 +1,89 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - ТОиР - Выполнение работ
|
||||
Панель мониторинга: Компонент поля ввода
|
||||
Компонент: Поле ввода диалога фильтра
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react"; //Классы React
|
||||
import React, { useEffect, useState } 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 STYLES = {
|
||||
HELPER_TEXT: { color: "red" }
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Поле ввода
|
||||
const FilterInputField = props => {
|
||||
//Свойства
|
||||
const { elementCode, elementValue, labelText, changeFunc, required, isDateField, yearArray } = props;
|
||||
const FilterInputField = ({ elementCode, elementValue, labelText, onChange, required = false, items = null, dictionary }) => {
|
||||
//Значение элемента
|
||||
const [value, setValue] = useState(elementValue);
|
||||
|
||||
//Состояние идентификатора элемента
|
||||
const [elementId, setElementId] = useState("");
|
||||
|
||||
//Формирование идентификатора элемента
|
||||
const generateId = useCallback(async () => {
|
||||
setElementId(!isDateField ? `${elementCode}-input` : `${elementCode}-select`);
|
||||
}, [elementCode, isDateField]);
|
||||
|
||||
//При рендере поля ввода
|
||||
//При получении нового значения из вне
|
||||
useEffect(() => {
|
||||
generateId();
|
||||
}, [generateId]);
|
||||
setValue(elementValue);
|
||||
}, [elementValue]);
|
||||
|
||||
//Выбор значения из словаря
|
||||
const handleDictionaryClick = () =>
|
||||
dictionary ? dictionary(res => (res ? handleChange({ target: { name: elementCode, value: res } }) : null)) : null;
|
||||
|
||||
//Изменение значения элемента
|
||||
const handleChange = e => {
|
||||
setValue(e.target.value);
|
||||
if (onChange) onChange(e.target.name, e.target.value);
|
||||
};
|
||||
|
||||
//Генерация поля с выбором из словаря Парус
|
||||
const renderInput = () => {
|
||||
const renderInput = validationError => {
|
||||
return (
|
||||
<Input
|
||||
error={!elementValue && required ? true : false}
|
||||
id={elementId}
|
||||
value={elementValue}
|
||||
error={validationError}
|
||||
id={elementCode}
|
||||
name={elementCode}
|
||||
value={value}
|
||||
endAdornment={
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-label={`${elementCode} select`} onClick={changeFunc} edge="end">
|
||||
<Icon>list</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
dictionary ? (
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-label={`${elementCode} select`} onClick={handleDictionaryClick} edge="end">
|
||||
<Icon>list</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
) : null
|
||||
}
|
||||
aria-describedby={`${elementId}-helper-text`}
|
||||
aria-describedby={`${elementCode}-helper-text`}
|
||||
label={labelText}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
//Генерация поля с выпадающим списком
|
||||
const renderSelect = () => {
|
||||
const renderSelect = (items, validationError) => {
|
||||
return (
|
||||
<Select
|
||||
error={elementValue ? false : true}
|
||||
id={elementId}
|
||||
value={elementValue}
|
||||
aria-describedby={`${elementId}-helper-text`}
|
||||
error={validationError}
|
||||
id={elementCode}
|
||||
name={elementCode}
|
||||
value={value}
|
||||
aria-describedby={`${elementCode}-helper-text`}
|
||||
label={labelText}
|
||||
onChange={changeFunc}
|
||||
onChange={handleChange}
|
||||
>
|
||||
{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}
|
||||
{items
|
||||
? items.map((item, i) => (
|
||||
<MenuItem key={i} value={item.value}>
|
||||
{item.caption}
|
||||
</MenuItem>
|
||||
))
|
||||
: null}
|
||||
@ -83,13 +91,16 @@ const FilterInputField = props => {
|
||||
);
|
||||
};
|
||||
|
||||
//Признак ошибки валидации
|
||||
const validationError = !value && required ? true : false;
|
||||
|
||||
//Генерация содержимого
|
||||
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" }}>
|
||||
<FormControl fullWidth variant="standard">
|
||||
<InputLabel htmlFor={elementCode}>{labelText}</InputLabel>
|
||||
{items ? renderSelect(items, validationError) : renderInput(validationError)}
|
||||
{validationError ? (
|
||||
<FormHelperText id={`${elementCode}-helper-text`} sx={STYLES.HELPER_TEXT}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
) : null}
|
||||
@ -102,16 +113,10 @@ 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
|
||||
items: PropTypes.arrayOf(PropTypes.object),
|
||||
dictionary: PropTypes.func,
|
||||
onChange: PropTypes.func
|
||||
};
|
||||
|
||||
//--------------------
|
||||
|
||||
@ -29,7 +29,9 @@ export const STYLES = {
|
||||
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_RELATED_CELL_STYLE: { cursor: "pointer", backgroundColor: "crimson", border: "1px solid rgba(0, 0, 0) !important" },
|
||||
FILTER_DIALOG_ACTIONS: { justifyContent: "center" }
|
||||
DCR_DOUBLE_CELL: { padding: "unset" },
|
||||
DCR_DOUBLE_CELL_GRID_ITEM: backgroundColor => ({ cursor: "pointer", backgroundColor }),
|
||||
HIDDEN_PARAGRAPH: { display: "none" }
|
||||
};
|
||||
|
||||
//-----------
|
||||
@ -155,26 +157,26 @@ export const dataCellRender = ({ row, columnDef }, showEquipSrv) => {
|
||||
//Случай двойного закрашивания месяца
|
||||
case "green red":
|
||||
case "red green":
|
||||
cellStyle = { ...cellStyle, padding: "unset" };
|
||||
cellStyle = { ...cellStyle, ...STYLES.DCR_DOUBLE_CELL };
|
||||
cellProps = { title: formatDate(columnDef.name) };
|
||||
data = (
|
||||
<Stack sx={{ justifyContent: "center" }} direction="row">
|
||||
<Stack justifyContent={"center"} direction="row">
|
||||
<Grid container maxHeight="100%">
|
||||
<Grid
|
||||
item
|
||||
xs={6}
|
||||
sx={{ cursor: "pointer", backgroundColor: "green" }}
|
||||
sx={STYLES.DCR_DOUBLE_CELL_GRID_ITEM("green")}
|
||||
onClick={() => showEquipSrv({ date: columnDef.name, workType: row["SWRKTYPE"], info: row["groupName"] })}
|
||||
>
|
||||
<p style={{ display: "none" }}>g</p>
|
||||
<p style={STYLES.HIDDEN_PARAGRAPH}>g</p>
|
||||
</Grid>
|
||||
<Grid
|
||||
item
|
||||
xs={6}
|
||||
sx={{ cursor: "pointer", backgroundColor: "crimson" }}
|
||||
sx={STYLES.DCR_DOUBLE_CELL_GRID_ITEM("crimson")}
|
||||
onClick={() => showEquipSrv({ date: columnDef.name, workType: row["SWRKTYPE"], info: row["groupName"] })}
|
||||
>
|
||||
<p style={{ display: "none" }}>r</p>
|
||||
<p style={STYLES.HIDDEN_PARAGRAPH}>r</p>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Stack>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user