244 lines
10 KiB
JavaScript
244 lines
10 KiB
JavaScript
/*
|
||
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
|
||
Компонент панели: Раздел настройки
|
||
*/
|
||
|
||
//---------------------
|
||
//Подключение библиотек
|
||
//---------------------
|
||
|
||
import React, { useState } from "react"; //Классы React
|
||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||
import { Box, IconButton, Icon, Dialog, DialogTitle, DialogContent, Typography, List, ListItem } from "@mui/material"; //Интерфейсные элементы
|
||
import { P8PDataGrid, P8P_DATA_GRID_SIZE } from "../../../components/p8p_data_grid"; //Таблица данных
|
||
import { P8P_DATA_GRID_CONFIG_PROPS } from "../../../config_wrapper"; //Подключение компонентов к настройкам приложения
|
||
import { SectionTabPanel } from "./section_tab_panel"; //Компонент вкладки раздела
|
||
import { confSctnMrkCellRender, confSctnMrkHeadCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||
|
||
//---------
|
||
//Константы
|
||
//---------
|
||
|
||
//Стили
|
||
const STYLES = {
|
||
GRID_SIZES: (height, pxOuterMenuH, pxPanelHeaderH, pxTabsH) => ({
|
||
padding: 0,
|
||
minWidth: "98vw",
|
||
minHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.93,
|
||
maxWidth: "98vw",
|
||
maxHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.93
|
||
}),
|
||
TABLE_CONTAINER: {
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
paddingTop: 1,
|
||
paddingBottom: 1
|
||
},
|
||
SECTION_ACTIONS: { display: "flex", justifyContent: "space-between", padding: "0px 5px" },
|
||
TABLE_SCROLL: {
|
||
"&::-webkit-scrollbar": {
|
||
width: "12px",
|
||
height: "12px"
|
||
},
|
||
"&::-webkit-scrollbar-track": {
|
||
borderRadius: "88px",
|
||
backgroundColor: "#EBEBEB"
|
||
},
|
||
"&::-webkit-scrollbar-thumb": {
|
||
borderRadius: "88px",
|
||
backgroundColor: "#b4b4b4",
|
||
backgroundClip: "padding-box",
|
||
border: "3px solid #EBEBEB"
|
||
},
|
||
"&::-webkit-scrollbar-thumb:hover": {
|
||
backgroundColor: "#808080"
|
||
}
|
||
},
|
||
HELP_LIST_ITEM: {
|
||
padding: "0px 0px 0px 5px",
|
||
whiteSpace: "pre",
|
||
fontSize: "0.95rem"
|
||
},
|
||
HELP_LIST_ITEM_NAME: {
|
||
fontWeight: "bold",
|
||
fontSize: "inherit",
|
||
minWidth: "45px"
|
||
},
|
||
HELP_LIST_ITEM_DESC: {
|
||
fontSize: "inherit"
|
||
}
|
||
};
|
||
|
||
//---------------------------------------------
|
||
//Вспомогательные функции и компоненты
|
||
//---------------------------------------------
|
||
|
||
//Элемент списка расшифровки состава
|
||
const HelpListItem = ({ name, desc }) => {
|
||
return (
|
||
<ListItem sx={STYLES.HELP_LIST_ITEM}>
|
||
<Typography sx={STYLES.HELP_LIST_ITEM_NAME}>{name}</Typography>
|
||
<Typography sx={STYLES.HELP_LIST_ITEM_DESC}>{` - ${desc}`}</Typography>
|
||
</ListItem>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Элемент списка расшифровки состава
|
||
HelpListItem.propTypes = {
|
||
name: PropTypes.string.isRequired,
|
||
desc: PropTypes.string.isRequired
|
||
};
|
||
|
||
//Диалог дополнительной информации
|
||
const HelpDialog = ({ handleOpenHelpChange }) => {
|
||
//Генерация содержимого
|
||
return (
|
||
<Dialog open onClose={handleOpenHelpChange}>
|
||
<DialogTitle>
|
||
<Box display="flex" alignItems="center">
|
||
<Box flexGrow={1} textAlign="center">
|
||
Информация
|
||
</Box>
|
||
<Box>
|
||
<IconButton aria-label="close" onClick={handleOpenHelpChange}>
|
||
<Icon>close</Icon>
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
</DialogTitle>
|
||
<DialogContent>
|
||
<Typography>Карточки показателей содержат сокращенную информацию о типе состава показателя.</Typography>
|
||
<Typography>Список сокращений:</Typography>
|
||
<List disablePadding={true}>
|
||
<HelpListItem name="fx" desc="формула" />
|
||
<HelpListItem name="СЗ" desc="статическое значение" />
|
||
<HelpListItem name="ХП" desc="хранимая процедура" />
|
||
<HelpListItem name="РП" desc="расчетный показатель" />
|
||
<HelpListItem name="ХО" desc="хозяйственные операции" />
|
||
<HelpListItem name="РСДК" desc="расчёты с дебиторами/кредиторами" />
|
||
<HelpListItem name="ОС" desc="остатки средств по счетам" />
|
||
<HelpListItem name="ТМЦ" desc="остатки товарно-материальных ценностей" />
|
||
<HelpListItem name="ДКЗ" desc="дебиторская/кредиторская задолженность" />
|
||
<HelpListItem name="ИК" desc="инвентарная картотека" />
|
||
<HelpListItem name="МБП" desc="картотека МБП" />
|
||
<HelpListItem name="КОБП" desc="картотека операций будущих периодов" />
|
||
<HelpListItem name="ДПНП" desc="декларация по налогу на прибыль" />
|
||
<HelpListItem name="РО" desc="регламентированный отчет" />
|
||
</List>
|
||
</DialogContent>
|
||
</Dialog>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Диалог дополнительной информации
|
||
HelpDialog.propTypes = {
|
||
handleOpenHelpChange: PropTypes.func.isRequired
|
||
};
|
||
|
||
//-----------
|
||
//Тело модуля
|
||
//-----------
|
||
|
||
//Раздел настройки
|
||
const SectionTab = ({
|
||
section,
|
||
tabValue,
|
||
index,
|
||
containerProps,
|
||
handleMarkAdd,
|
||
handleReload,
|
||
handleMarkOpen,
|
||
handleMarkCnOpen,
|
||
handleMarkCnInsert,
|
||
menuItems
|
||
}) => {
|
||
//Состояние - диалог информации
|
||
const [openHelp, setOpenHelp] = useState(false);
|
||
|
||
//Изменение состояния диалога информации
|
||
const handleOpenHelpChange = () => {
|
||
setOpenHelp(!openHelp);
|
||
};
|
||
|
||
//Генерация содержимого
|
||
return (
|
||
<>
|
||
<SectionTabPanel key={section.rn} value={tabValue} index={index}>
|
||
<Box sx={STYLES.SECTION_ACTIONS}>
|
||
<Box>
|
||
<IconButton onClick={() => handleMarkAdd(section.rn)}>
|
||
<Icon>add</Icon>
|
||
</IconButton>
|
||
<IconButton onClick={() => handleReload()}>
|
||
<Icon>refresh</Icon>
|
||
</IconButton>
|
||
</Box>
|
||
<Box>
|
||
<IconButton onClick={() => handleOpenHelpChange()}>
|
||
<Icon>help</Icon>
|
||
</IconButton>
|
||
</Box>
|
||
</Box>
|
||
{section.dataLoaded && section.columnsDef.length > 3 ? (
|
||
<Box sx={STYLES.TABLE_CONTAINER}>
|
||
<P8PDataGrid
|
||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||
containerComponentProps={{
|
||
elevation: 6,
|
||
sx: { ...STYLES.TABLE_SCROLL },
|
||
style: STYLES.GRID_SIZES(
|
||
containerProps.height,
|
||
containerProps.pxOuterMenuH,
|
||
containerProps.pxPanelHeaderH,
|
||
containerProps.pxTabsH
|
||
)
|
||
}}
|
||
columnsDef={section.columnsDef}
|
||
groups={section.groups}
|
||
rows={section.rows}
|
||
fixedHeader={section.fixedHeader}
|
||
fixedColumns={section.fixedColumns}
|
||
size={P8P_DATA_GRID_SIZE.LARGE}
|
||
reloading={section.reload}
|
||
dataCellRender={prms =>
|
||
confSctnMrkCellRender({
|
||
...prms,
|
||
sectionRn: section.rn,
|
||
handleMarkAdd: handleMarkAdd,
|
||
handleMarkOpen: handleMarkOpen,
|
||
handleMarkCnOpen: handleMarkCnOpen,
|
||
handleMarkCnInsert: handleMarkCnInsert,
|
||
menuItems: menuItems
|
||
})
|
||
}
|
||
headCellRender={confSctnMrkHeadCellRender}
|
||
/>
|
||
</Box>
|
||
) : null}
|
||
</SectionTabPanel>
|
||
{openHelp ? <HelpDialog handleOpenHelpChange={handleOpenHelpChange} /> : null}
|
||
</>
|
||
);
|
||
};
|
||
|
||
//Контроль свойств - Раздел настройки
|
||
SectionTab.propTypes = {
|
||
section: PropTypes.object.isRequired,
|
||
tabValue: PropTypes.number,
|
||
index: PropTypes.number,
|
||
containerProps: PropTypes.object,
|
||
handleMarkAdd: PropTypes.func,
|
||
handleReload: PropTypes.func,
|
||
handleMarkOpen: PropTypes.func,
|
||
handleMarkCnOpen: PropTypes.func,
|
||
handleMarkCnInsert: PropTypes.func,
|
||
menuItems: PropTypes.array
|
||
};
|
||
|
||
//----------------
|
||
//Интерфейс модуля
|
||
//----------------
|
||
|
||
export { SectionTab };
|