WEB APP: Панель "Редактор настроек РО" - ЦИТК-823 - правки пул-реквеста по примечанию от 10.07.2024
This commit is contained in:
Mikhail Chechnev
parent
51fd2eeec0
commit
fcd913c8ba
@ -17,15 +17,18 @@ import { useState, useLayoutEffect } from "react"; //Классы React
|
||||
const useWindowResize = () => {
|
||||
//Состояние размера рабочей области
|
||||
const [size, setSize] = useState([0, 0]);
|
||||
|
||||
//При изменении размера
|
||||
useLayoutEffect(() => {
|
||||
function updateSize() {
|
||||
const updateSize = () => {
|
||||
setSize([document.documentElement.clientWidth, document.documentElement.clientHeight]);
|
||||
}
|
||||
};
|
||||
window.addEventListener("resize", updateSize);
|
||||
updateSize();
|
||||
return () => window.removeEventListener("resize", updateSize);
|
||||
}, []);
|
||||
|
||||
//Вернём размеры
|
||||
return size;
|
||||
};
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@ import { Box, FormControl, InputLabel, Input, InputAdornment, IconButton, Icon }
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
export const STYLES = {
|
||||
const STYLES = {
|
||||
DIALOG_WINDOW_WIDTH: { width: 400 }
|
||||
};
|
||||
|
||||
@ -24,6 +24,7 @@ export const STYLES = {
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Поле ввода
|
||||
const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dictionary, ...other }) => {
|
||||
//Значение элемента
|
||||
const [value, setValue] = useState(elementValue);
|
||||
@ -45,7 +46,7 @@ const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dict
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box sx={{ p: 1 }}>
|
||||
<Box p={1}>
|
||||
<FormControl variant="standard" sx={STYLES.DIALOG_WINDOW_WIDTH} {...other}>
|
||||
<InputLabel htmlFor={elementCode}>{labelText}</InputLabel>
|
||||
<Input
|
||||
|
||||
@ -24,24 +24,19 @@ export const STYLES = {
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Генерация представления ячейки c данными
|
||||
export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, deleteCR) => {
|
||||
//Генерация представления ячейки c данными показателя раздела регламентированного отчета
|
||||
export const confSctnMrkCellRender = ({ row, columnDef, onLinkClick, onEditClick, onDeleteClick }) => {
|
||||
let data = row[columnDef.name];
|
||||
columnDef.name != "SROW_NAME" && data != undefined && columnDef.visible == true
|
||||
? (data = (
|
||||
<Box sx={STYLES.BOX_ROW}>
|
||||
<Link
|
||||
sx={STYLES.LINK_STYLE}
|
||||
onClick={() => {
|
||||
showRrpConfSctnMrk(row["NRN_" + columnDef.name.substring(5)]);
|
||||
}}
|
||||
>
|
||||
<Link sx={STYLES.LINK_STYLE} onClick={() => (onLinkClick ? onLinkClick(row["NRN_" + columnDef.name.substring(5)]) : null)}>
|
||||
{row[columnDef.name]}
|
||||
</Link>
|
||||
<IconButton onClick={() => editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
|
||||
<IconButton onClick={() => (onEditClick ? onEditClick(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name]) : null)}>
|
||||
<Icon>edit</Icon>
|
||||
</IconButton>
|
||||
<IconButton onClick={() => deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
|
||||
<IconButton onClick={() => (onDeleteClick ? onDeleteClick(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name]) : null)}>
|
||||
<Icon>delete</Icon>
|
||||
</IconButton>
|
||||
</Box>
|
||||
|
||||
@ -17,11 +17,11 @@ import { NavigationCtx } from "../../context/navigation"; //Контекст н
|
||||
import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений
|
||||
import { SectionTabPanel } from "./section_tab_panel"; //Компонент вкладки раздела
|
||||
import { IUDFormDialog } from "./iud_form_dialog"; //Диалог добавления/исправления/удаления компонентов настройки регламентированного отчёта
|
||||
import { dataCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||||
import { confSctnMrkCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||||
import { STATUSES } from "./iud_form_dialog"; //Статусы диалогового окна
|
||||
import { TEXTS } from "../../../app.text"; //Текстовые константы
|
||||
import { STYLES as COMMON_STYLES } from "./layouts"; //Общие стили
|
||||
import { useWindowResize } from "./hooks";
|
||||
import { useWindowResize } from "./hooks"; //Пользовательские хуки
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
@ -35,18 +35,21 @@ const pxPanelHeaderH = 64;
|
||||
const pxSectionAddButtonW = 40;
|
||||
|
||||
//Стили
|
||||
export const STYLES = {
|
||||
const STYLES = {
|
||||
CONTAINER: { width: "100%" },
|
||||
PANELS_MAIN_COLOR: { backgroundColor: "#1976d2" },
|
||||
ICON_WHITE: { color: "white" },
|
||||
TABS_BOTTOM_LINE: { borderBottom: 1, borderColor: "divider" },
|
||||
TABS_PADDING: { padding: "5px" },
|
||||
TABS_SIZES: { maxHeight: 150 },
|
||||
TABS_SIZES: (width, pxSectionAddButtonW) => ({ maxHeight: 150, maxWidth: width - pxSectionAddButtonW }),
|
||||
GRID_PADDING: { paddingTop: 1, paddingBottom: 1 },
|
||||
GRID_SIZES: {
|
||||
GRID_SIZES: (width, height, pxOuterMenuH, pxPanelHeaderH, pxTabsH) => ({
|
||||
padding: 0,
|
||||
minWidth: 400,
|
||||
minHeight: 300
|
||||
}
|
||||
minWidth: width * 0.95,
|
||||
minHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.88,
|
||||
maxWidth: width * 0.95,
|
||||
maxHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.88
|
||||
})
|
||||
};
|
||||
|
||||
//-----------
|
||||
@ -165,23 +168,45 @@ const RrpConfEditor = () => {
|
||||
};
|
||||
|
||||
//Отработка нажатия на кнопку добавления показателя раздела
|
||||
const addRRPCONFSCTNMRKClick = (prn, sctnCode, sctnName) => {
|
||||
const addSectionMarkClick = (prn, sctnCode, sctnName) => {
|
||||
setFormData({ status: STATUSES.RRPCONFSCTNMRK_CREATE, prn: prn, sctnCode: sctnCode, sctnName: sctnName });
|
||||
openForm();
|
||||
};
|
||||
|
||||
//Отработка нажатия на кнопку исправления показателя раздела
|
||||
const editRRPCONFSCTNMRKClick = (rn, name) => {
|
||||
const editSectionMarkClick = (rn, name) => {
|
||||
setFormData({ status: STATUSES.RRPCONFSCTNMRK_EDIT, rn: rn, name: name });
|
||||
openForm();
|
||||
};
|
||||
|
||||
//Отработка нажатия на кнопку удаления показателя раздела
|
||||
const deleteRRPCONFSCTNMRKClick = (rn, name) => {
|
||||
const deleteSectionMarkClick = (rn, name) => {
|
||||
setFormData({ status: STATUSES.RRPCONFSCTNMRK_DELETE, rn: rn, name: name });
|
||||
openForm();
|
||||
};
|
||||
|
||||
//Отображение показателя раздела
|
||||
const showSectionMark = async rn => {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_GET_CODES",
|
||||
args: {
|
||||
NRN: rn
|
||||
},
|
||||
tagValueProcessor: () => undefined
|
||||
});
|
||||
if (data) {
|
||||
pOnlineShowUnit({
|
||||
unitCode: "RRPConfig",
|
||||
showMethod: "main_mrk_settings",
|
||||
inputParameters: [
|
||||
{ name: "in_CODE", value: data.SRRPCONF },
|
||||
{ name: "in_SCTN_CODE", value: data.SRRPCONFSCTN },
|
||||
{ name: "in_MRK_CODE", value: data.SRRPCONFSCTNMRK }
|
||||
]
|
||||
});
|
||||
} else showMsgErr(TEXTS.NO_DATA_FOUND);
|
||||
};
|
||||
|
||||
//Формирование разделов
|
||||
const a11yProps = index => {
|
||||
return {
|
||||
@ -269,27 +294,6 @@ const RrpConfEditor = () => {
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [rrpDoc.reload, rrpDoc.docLoaded, dataGrid.reload, dataGrid.docLoaded, executeStored]);
|
||||
|
||||
//Отбор показателя раздела по ид.
|
||||
const showRrpConfSctnMrk = async rn => {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_GET_CODES",
|
||||
args: {
|
||||
NRN: rn
|
||||
}
|
||||
});
|
||||
if (data) {
|
||||
pOnlineShowUnit({
|
||||
unitCode: "RRPConfig",
|
||||
showMethod: "main_mrk_settings",
|
||||
inputParameters: [
|
||||
{ name: "in_CODE", value: data.SRRPCONF },
|
||||
{ name: "in_SCTN_CODE", value: data.SRRPCONFSCTN },
|
||||
{ name: "in_MRK_CODE", value: data.SRRPCONFSCTNMRK }
|
||||
]
|
||||
});
|
||||
} else showMsgErr(TEXTS.NO_DATA_FOUND);
|
||||
};
|
||||
|
||||
//При необходимости обновить данные таблицы
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
@ -319,7 +323,7 @@ const RrpConfEditor = () => {
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box sx={{ width: "100%" }}>
|
||||
<Box sx={STYLES.CONTAINER}>
|
||||
{formOpen ? <IUDFormDialog initial={formData} onClose={handleDialogClose} onReload={handleDialogReload} /> : null}
|
||||
{rrpDoc.docLoaded ? (
|
||||
<Box>
|
||||
@ -332,7 +336,7 @@ const RrpConfEditor = () => {
|
||||
scrollButtons={false}
|
||||
visibleScrollbar
|
||||
aria-label="section tab"
|
||||
sx={{ ...STYLES.TABS_SIZES, maxWidth: width - pxSectionAddButtonW }}
|
||||
sx={STYLES.TABS_SIZES(width, pxSectionAddButtonW)}
|
||||
>
|
||||
{rrpDoc.sections.map((s, i) => {
|
||||
return (
|
||||
@ -365,18 +369,14 @@ const RrpConfEditor = () => {
|
||||
{rrpDoc.sections.map((s, i) => {
|
||||
return (
|
||||
<SectionTabPanel key={s.rn} value={tabValue} index={i}>
|
||||
<Button onClick={() => addRRPCONFSCTNMRKClick(s.rn, s.code, s.name)}>Добавить</Button>
|
||||
<Button onClick={() => addSectionMarkClick(s.rn, s.code, s.name)}>Добавить</Button>
|
||||
{s.dataLoaded && s.columnsDef.length > 1 ? (
|
||||
<Box sx={{ ...STYLES.GRID_PADDING, ...COMMON_STYLES.BOX_ROW }}>
|
||||
<P8PDataGrid
|
||||
{...P8P_DATA_GRID_CONFIG_PROPS}
|
||||
containerComponentProps={{
|
||||
elevation: 6,
|
||||
style: {
|
||||
...STYLES.GRID_SIZES,
|
||||
maxWidth: width * 0.95,
|
||||
maxHeight: (height - pxOuterMenuH - pxPanelHeaderH - pxTabsH) * 0.88
|
||||
}
|
||||
style: STYLES.GRID_SIZES(width, height, pxOuterMenuH, pxPanelHeaderH, pxTabsH)
|
||||
}}
|
||||
columnsDef={s.columnsDef}
|
||||
groups={s.groups}
|
||||
@ -386,7 +386,12 @@ const RrpConfEditor = () => {
|
||||
size={P8P_DATA_GRID_SIZE.LARGE}
|
||||
reloading={s.reload}
|
||||
dataCellRender={prms =>
|
||||
dataCellRender({ ...prms }, showRrpConfSctnMrk, editRRPCONFSCTNMRKClick, deleteRRPCONFSCTNMRKClick)
|
||||
confSctnMrkCellRender({
|
||||
...prms,
|
||||
onLinkClick: showSectionMark,
|
||||
onEditClick: editSectionMarkClick,
|
||||
onDeleteClick: deleteSectionMarkClick
|
||||
})
|
||||
}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
@ -22,7 +22,7 @@ const SectionTabPanel = props => {
|
||||
return (
|
||||
<div role="tabpanel" hidden={value !== index} id={`tabpanel-${index}`} aria-labelledby={`tab-${index}`} {...other}>
|
||||
{value === index && (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Box p={3}>
|
||||
<Typography component="span">{children}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user