ЦИТК-823 ч.1

This commit is contained in:
Vladislav 2024-06-26 19:01:13 +03:00
parent 548acf33d9
commit 9b7e184431
6 changed files with 197 additions and 156 deletions

View File

@ -1,58 +0,0 @@
/*
Кастомный FormControl
*/
//---------------------
//Подключение библиотек
//---------------------
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, FormControl, InputLabel, OutlinedInput, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
import { STYLES } from "./layouts"; //Стили диалогового окна
//-----------
//Тело модуля
//-----------
const CustomFormControl = props => {
const { elementCode, elementValue, labelText, changeFunc, withDictionary, ...other } = props;
return (
<Box sx={{ p: 1 }}>
<FormControl sx={STYLES.DIALOG_WINDOW_WIDTH} {...other}>
<InputLabel htmlFor={`${elementCode}-outlined`}>{labelText}</InputLabel>
<OutlinedInput
id={`${elementCode}-outlined`}
value={elementValue ? elementValue : ""}
onChange={!withDictionary ? e => changeFunc(e.target.value) : null}
aria-describedby={`${elementCode}-outlined-helper-text`}
label={labelText}
endAdornment={
withDictionary ? (
<InputAdornment position="end">
<IconButton aria-label={`${elementCode} select`} onClick={changeFunc} edge="end">
<Icon>list</Icon>
</IconButton>
</InputAdornment>
) : null
}
/>
</FormControl>
</Box>
);
};
CustomFormControl.propTypes = {
elementCode: PropTypes.string.isRequired,
elementValue: PropTypes.string,
labelText: PropTypes.string.isRequired,
changeFunc: PropTypes.func.isRequired,
withDictionary: PropTypes.bool
};
//----------------
//Интерфейс модуля
//----------------
export { CustomFormControl };

View File

@ -1,5 +1,6 @@
/*
Кастомный Dialog
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
Панель мониторинга: Диалог добавления/исправления/удаления компонентов настройки регламентированного отчёта
*/
//---------------------
@ -9,14 +10,16 @@
import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, Typography, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
import { CustomFormControl } from "./custom_form_control"; //Кастомные строки ввода
import { Statuses, STYLES } from "./layouts"; //Статусы и стили диалогового окна
//import { MessagingСtx } from "../../context/messaging";
import { IUDFormTextField } from "./iud_form_text_filed"; //Кастомные строки ввода
import { STATUSES, STYLES } from "./layouts"; //Статусы и стили диалогового окна
//-----------
//Тело модуля
//-----------
//---------------
//Тело компонента
//---------------
const CustomDialog = props => {
const IUDFormDialog = props => {
//Свойства компонента
const {
formOpen,
closeForm,
@ -32,20 +35,23 @@ const CustomDialog = props => {
dictRowClick
} = props;
//Подключение к контексту сообщений
//const { showMsgWarn } = useContext(MessagingСtx);
//Формирование заголовка диалогового окна
const formTitle = () => {
switch (curStatus) {
case Statuses.CREATE:
case STATUSES.CREATE:
return "Добавление раздела";
case Statuses.EDIT:
case STATUSES.EDIT:
return "Исправление раздела";
case Statuses.DELETE:
case STATUSES.DELETE:
return "Удаление раздела";
case Statuses.COLUMNROW_CREATE:
case STATUSES.COLUMNROW_CREATE:
return "Добавление показателя раздела";
case Statuses.COLUMNROW_EDIT:
case STATUSES.COLUMNROW_EDIT:
return "Исправление показателя раздела";
case Statuses.COLUMNROW_DELETE:
case STATUSES.COLUMNROW_DELETE:
return "Удаление показателя раздела";
}
};
@ -54,24 +60,20 @@ const CustomDialog = props => {
const renderSwitch = () => {
var btnText = "";
switch (curStatus) {
case Statuses.CREATE:
case Statuses.COLUMNROW_CREATE:
case STATUSES.CREATE:
case STATUSES.COLUMNROW_CREATE:
btnText = "Добавить";
break;
case Statuses.EDIT:
case Statuses.COLUMNROW_EDIT:
case STATUSES.EDIT:
case STATUSES.COLUMNROW_EDIT:
btnText = "Исправить";
break;
case Statuses.DELETE:
case Statuses.COLUMNROW_DELETE:
case STATUSES.DELETE:
case STATUSES.COLUMNROW_DELETE:
btnText = "Удалить";
break;
}
return (
<Button variant="contained" onClick={btnOkClick}>
{btnText}
</Button>
);
return <Button onClick={btnOkClick}>{btnText}</Button>;
};
return (
@ -90,34 +92,34 @@ const CustomDialog = props => {
<Icon>close</Icon>
</IconButton>
<DialogContent>
{curStatus == Statuses.DELETE || curStatus == Statuses.COLUMNROW_DELETE ? (
curStatus == Statuses.DELETE ? (
{curStatus == STATUSES.DELETE || curStatus == STATUSES.COLUMNROW_DELETE ? (
curStatus == STATUSES.DELETE ? (
<Typography>Вы хотите удалить раздел {curName}?</Typography>
) : (
<Typography>Вы хотите удалить показатель раздела {curName}?</Typography>
)
) : (
<div>
{curStatus != Statuses.COLUMNROW_EDIT ? (
<CustomFormControl elementCode="code" elementValue={curCode} labelText="Мнемокод" changeFunc={codeOnChange} />
{curStatus != STATUSES.COLUMNROW_EDIT ? (
<IUDFormTextField elementCode="code" elementValue={curCode} labelText="Мнемокод" changeFunc={codeOnChange} />
) : null}
<CustomFormControl elementCode="name" elementValue={curName} labelText="Наименование" changeFunc={nameOnChange} />
{curStatus == Statuses.COLUMNROW_CREATE ? (
<IUDFormTextField elementCode="name" elementValue={curName} labelText="Наименование" changeFunc={nameOnChange} />
{curStatus == STATUSES.COLUMNROW_CREATE ? (
<div>
<CustomFormControl
elementCode="column"
elementValue={curColCode}
labelText="Графа"
changeFunc={dictColumnClick}
withDictionary={true}
/>
<CustomFormControl
<IUDFormTextField
elementCode="row"
elementValue={curRowCode}
labelText="Строка"
changeFunc={dictRowClick}
withDictionary={true}
/>
<IUDFormTextField
elementCode="column"
elementValue={curColCode}
labelText="Графа"
changeFunc={dictColumnClick}
withDictionary={true}
/>
</div>
) : null}
</div>
@ -125,18 +127,17 @@ const CustomDialog = props => {
</DialogContent>
<DialogActions sx={STYLES.PADDING_DIALOG_BUTTONS_RIGHT}>
{renderSwitch()}
<Button variant="contained" onClick={closeForm}>
Отмена
</Button>
<Button onClick={closeForm}>Отмена</Button>
</DialogActions>
</Dialog>
);
};
CustomDialog.propTypes = {
//Контроль свойств - Диалог
IUDFormDialog.propTypes = {
formOpen: PropTypes.bool.isRequired,
closeForm: PropTypes.func.isRequired,
curStatus: PropTypes.oneOf(Object.values(Statuses).filter(x => typeof x === "number")),
curStatus: PropTypes.oneOf(Object.values(STATUSES).filter(x => typeof x === "number")),
curCode: PropTypes.string,
curName: PropTypes.string,
curColCode: PropTypes.string,
@ -148,8 +149,8 @@ CustomDialog.propTypes = {
dictRowClick: PropTypes.func.isRequired
};
//----------------
//Интерфейс модуля
//----------------
//--------------------
//Интерфейс компонента
//--------------------
export { CustomDialog };
export { IUDFormDialog };

View File

@ -0,0 +1,74 @@
/*
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
Панель мониторинга: Компонент поля ввода
*/
//---------------------
//Подключение библиотек
//---------------------
import React, { useState, useCallback, useEffect } from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, FormControl, InputLabel, Input, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
import { STYLES } from "./layouts"; //Стили диалогового окна
//---------------
//Тело компонента
//---------------
const IUDFormTextField = props => {
//Свойства
const { elementCode, elementValue, labelText, changeFunc, withDictionary, ...other } = props;
//Состояние идентификатора элемента
const [elementId, setElementId] = useState("");
//Формирование идентификатора элемента
const generateId = useCallback(async () => {
setElementId(`${elementCode}-input`);
}, [elementCode]);
//При рендере поля ввода
useEffect(() => {
generateId();
}, [generateId]);
return (
<Box sx={{ p: 1 }}>
<FormControl sx={STYLES.DIALOG_WINDOW_WIDTH} {...other}>
<InputLabel htmlFor={elementId}>{labelText}</InputLabel>
<Input
id={elementId}
value={elementValue ? elementValue : ""}
onChange={!withDictionary ? e => changeFunc(e.target.value) : null}
aria-describedby={`${elementCode}-helper-text`}
label={labelText}
endAdornment={
withDictionary ? (
<InputAdornment position="end">
<IconButton aria-label={`${elementCode} select`} onClick={changeFunc} edge="end">
<Icon>list</Icon>
</IconButton>
</InputAdornment>
) : null
}
/>
</FormControl>
</Box>
);
};
//Контроль свойств - Поле ввода
IUDFormTextField.propTypes = {
elementCode: PropTypes.string.isRequired,
elementValue: PropTypes.string,
labelText: PropTypes.string.isRequired,
changeFunc: PropTypes.func.isRequired,
withDictionary: PropTypes.bool
};
//--------------------
//Интерфейс компонента
//--------------------
export { IUDFormTextField };

View File

@ -1,5 +1,5 @@
/*
Парус 8 -
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
Дополнительная разметка и вёрстка клиентских элементов
*/
@ -8,7 +8,7 @@
//---------------------
import React from "react"; //Классы React
import { Stack, IconButton, Icon, Typography } from "@mui/material"; //Интерфейсные компоненты
import { Stack, IconButton, Icon, Link } from "@mui/material"; //Интерфейсные компоненты
//---------
//Константы
@ -20,19 +20,27 @@ export const STYLES = {
};
//Статусы диалогового окна
export const Statuses = { CREATE: 0, EDIT: 1, DELETE: 2, COLUMNROW_CREATE: 3, COLUMNROW_EDIT: 4, COLUMNROW_DELETE: 5 };
export const STATUSES = { CREATE: 0, EDIT: 1, DELETE: 2, COLUMNROW_CREATE: 3, COLUMNROW_EDIT: 4, COLUMNROW_DELETE: 5 };
//-----------
//Тело модуля
//-----------
//Генерация представления ячейки c данными
export const dataCellRender = ({ row, columnDef }, editCR, deleteCR) => {
export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, deleteCR) => {
let data = row[columnDef.name];
columnDef.name != "SROW_NAME" && data != undefined && columnDef.visible == true
? (data = (
<Stack direction="row">
<Typography width="-webkit-fill-available">{row[columnDef.name]}</Typography>
<Link
component="button"
width="-webkit-fill-available"
onClick={() => {
showRrpConfSctnMrk(row["NRN_" + columnDef.name.substring(5)]);
}}
>
{row[columnDef.name]}
</Link>
<IconButton justifyContent="flex-end" onClick={() => editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
<Icon>edit</Icon>
</IconButton>

View File

@ -1,5 +1,6 @@
/*
Парус 8 - Редактор настройки регламентированного отчёта
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
Панель мониторинга: Корневая панель редактора
*/
//---------------------
@ -12,10 +13,10 @@ 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"; //Контекст взаимодействия с сервером
import { NavigationCtx } from "../../context/navigation"; //Контекст навигации
import { CustomTabPanel } from "./custom_tab_panel"; //Кастомный Tab
import { SectionTabPanel } from "./section_tab_panel"; //Кастомный Tab
import { ApplicationСtx } from "../../context/application"; //Контекст приложения
import { Statuses, dataCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
import { CustomDialog } from "./custom_dialog"; //Кастомное диалоговое окно
import { STATUSES, dataCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов
import { IUDFormDialog } from "./iud_form_dialog"; //Кастомное диалоговое окно
//-----------
//Тело модуля
@ -93,7 +94,7 @@ const RrpConfEditor = () => {
const { executeStored } = useContext(BackEndСtx);
//Подключение к контексту приложения
const { pOnlineShowDictionary } = useContext(ApplicationСtx);
const { pOnlineShowDictionary, pOnlineShowUnit } = useContext(ApplicationСtx);
//Подключение к контексту навигации
const { getNavigationSearch } = useContext(NavigationCtx);
@ -105,37 +106,37 @@ const RrpConfEditor = () => {
//Отработка нажатия на кнопку добавления секции
const addSectionClick = () => {
setFormData({ status: Statuses.CREATE, prn: Number(getNavigationSearch().NRN) });
setFormData({ status: STATUSES.CREATE, prn: Number(getNavigationSearch().NRN) });
openForm();
};
//Отработка нажатия на кнопку исправления секции
const editSectionClick = (rn, code, name) => {
setFormData({ rn: rn, code: code, name: name, status: Statuses.EDIT });
setFormData({ rn: rn, code: code, name: name, status: STATUSES.EDIT });
openForm();
};
//Отработка нажатия на кнопку удаления секции
const deleteSectionClick = (rn, code, name) => {
setFormData({ rn: rn, code: code, name: name, status: Statuses.DELETE });
setFormData({ rn: rn, code: code, name: name, status: STATUSES.DELETE });
openForm();
};
//Отработка нажатия на кнопку добавления показателя раздела
const addColumnRowClick = (prn, sctnCode, sctnName) => {
setFormData({ status: Statuses.COLUMNROW_CREATE, prn: prn, sctnCode: sctnCode, sctnName: sctnName });
setFormData({ status: STATUSES.COLUMNROW_CREATE, prn: prn, sctnCode: sctnCode, sctnName: sctnName });
openForm();
};
//Отработка нажатия на кнопку исправления показателя раздела
const editColumnRowClick = (rn, name) => {
setFormData({ status: Statuses.COLUMNROW_EDIT, rn: rn, name: name });
setFormData({ status: STATUSES.COLUMNROW_EDIT, rn: rn, name: name });
openForm();
};
//Отработка нажатия на кнопку удаления показателя раздела
const deleteColumnRowClick = (rn, name) => {
setFormData({ status: Statuses.COLUMNROW_DELETE, rn: rn, name: name });
setFormData({ status: STATUSES.COLUMNROW_DELETE, rn: rn, name: name });
openForm();
};
@ -174,9 +175,9 @@ const RrpConfEditor = () => {
//Нажатие на кнопку подтверждения создания/исправления/удаления на форме
const formBtnOkClick = () => {
let formStateProps = {};
if (formData.status === (Statuses.CREATE || Statuses.EDIT || Statuses.COLUMNROW_CREATE))
if (formData.status === (STATUSES.CREATE || STATUSES.EDIT || STATUSES.COLUMNROW_CREATE))
formStateProps = { ...formStateProps, code: document.querySelector("#code-outlined").value };
if (formData.status === (Statuses.CREATE || Statuses.EDIT || Statuses.COLUMNROW_CREATE || Statuses.COLUMNROW_EDIT))
if (formData.status === (STATUSES.CREATE || STATUSES.EDIT || STATUSES.COLUMNROW_CREATE || STATUSES.COLUMNROW_EDIT))
formStateProps = { ...formStateProps, name: document.querySelector("#name-outlined").value };
setFormData(pv => ({
...pv,
@ -198,27 +199,27 @@ const RrpConfEditor = () => {
const changeSections = useCallback(async () => {
if (formData.filled) {
switch (formData.status) {
case Statuses.CREATE:
case STATUSES.CREATE:
insertSections();
clearFormData();
break;
case Statuses.EDIT:
case STATUSES.EDIT:
updateSections();
clearFormData();
break;
case Statuses.DELETE:
case STATUSES.DELETE:
deleteSections();
clearFormData();
break;
case Statuses.COLUMNROW_CREATE:
case STATUSES.COLUMNROW_CREATE:
addColumnRow();
clearFormData();
break;
case Statuses.COLUMNROW_EDIT:
case STATUSES.COLUMNROW_EDIT:
editColumnRow();
clearFormData();
break;
case Statuses.COLUMNROW_DELETE:
case STATUSES.COLUMNROW_DELETE:
deleteColumnRow();
clearFormData();
break;
@ -231,7 +232,7 @@ const RrpConfEditor = () => {
//Добавление раздела
const insertSections = useCallback(async () => {
const data = await executeStored({
stored: "PKG_P8PANELS_RRPCONFED.INSERT_RRPCONF_SECTIONS",
stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_INSERT",
args: {
NPRN: formData.prn,
SCODE: formData.code,
@ -247,7 +248,7 @@ const RrpConfEditor = () => {
//Исправление раздела
const updateSections = useCallback(async () => {
await executeStored({
stored: "PKG_P8PANELS_RRPCONFED.UPDATE_RRPCONF_SECTIONS",
stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_UPDATE",
args: {
NRN: formData.rn,
SCODE: formData.code,
@ -259,7 +260,7 @@ const RrpConfEditor = () => {
//Удаление раздела
const deleteSections = useCallback(async () => {
await executeStored({
stored: "PKG_P8PANELS_RRPCONFED.DELETE_RRPCONF_SECTIONS",
stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_DELETE",
args: {
NRN: formData.rn
}
@ -269,7 +270,7 @@ const RrpConfEditor = () => {
//Добавление показателя раздела
const addColumnRow = useCallback(async () => {
await executeStored({
stored: "PKG_P8PANELS_RRPCONFED.INSERT_RRPCONF_COLUMNROW",
stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_INSERT",
args: {
NPRN: formData.prn,
SCODE: formData.code,
@ -285,20 +286,20 @@ const RrpConfEditor = () => {
//Исправление показателя раздела
const editColumnRow = useCallback(async () => {
await executeStored({
stored: "PKG_P8PANELS_RRPCONFED.UPDATE_RRPCONF_COLUMNROW",
stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_UPDATE",
args: { NRN: formData.rn, SNAME: formData.name }
});
}, [executeStored, formData.name, formData.rn]);
//Удаление показателя раздела
const deleteColumnRow = useCallback(async () => {
await executeStored({ stored: "PKG_P8PANELS_RRPCONFED.DELETE_RRPCONF_COLUMNROW", args: { NRN: formData.rn } });
await executeStored({ stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_DELETE", args: { NRN: formData.rn } });
}, [executeStored, formData.rn]);
//Получение мнемокода и наименования показателя раздела
const getSctnMrkCodeName = useCallback(async () => {
const data = await executeStored({
stored: "PKG_P8PANELS_RRPCONFED.GET_RRPCONFSCTNMRK_CODE_NAME",
stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_GET_CODE_NAME",
args: { SSCTNCODE: formData.sctnCode, SROWCODE: formData.rowCode, SCOLUMNCODE: formData.colCode }
});
setFormData(pv => ({
@ -383,6 +384,19 @@ 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.SELECT_RRPCONFSCTNMRK",
args: {
NRN: rn
}
});
if (data.NIDENT) {
pOnlineShowUnit({ unitCode: "RRPConfigSectionMark", inputParameters: [{ name: "in_SelectList_Ident", value: data.NIDENT }] });
} else showMsgErr(TEXTS.NO_DATA_FOUND);
};
//При необходимости обновить данные таблицы
useEffect(() => {
loadData();
@ -395,7 +409,7 @@ const RrpConfEditor = () => {
//Получение наименования и мнемокода показателя раздела при заполнении необходимых полей
useEffect(() => {
formData.status == Statuses.COLUMNROW_CREATE && formData.sctnName && formData.sctnCode && formData.colCode && formData.rowCode
formData.status == STATUSES.COLUMNROW_CREATE && formData.sctnName && formData.sctnCode && formData.colCode && formData.rowCode
? getSctnMrkCodeName()
: null;
}, [formData.colCode, formData.rowCode, formData.sctnCode, formData.sctnName, formData.status, getSctnMrkCodeName]);
@ -404,7 +418,7 @@ const RrpConfEditor = () => {
return (
<Box sx={{ width: "100%" }}>
{formOpen ? (
<CustomDialog
<IUDFormDialog
formOpen={formOpen}
closeForm={closeForm}
curStatus={formData.status}
@ -450,10 +464,8 @@ const RrpConfEditor = () => {
</Stack>
{rrpDoc.sections.map((s, i) => {
return (
<CustomTabPanel key={s.rn} value={tabValue} index={i}>
<Button variant="contained" onClick={() => addColumnRowClick(s.rn, s.code, s.name)}>
+ Добавить
</Button>
<SectionTabPanel key={s.rn} value={tabValue} index={i}>
<Button onClick={() => addColumnRowClick(s.rn, s.code, s.name)}>+ Добавить</Button>
{s.dataLoaded ? (
<P8PDataGrid
{...P8P_DATA_GRID_CONFIG_PROPS}
@ -462,10 +474,12 @@ const RrpConfEditor = () => {
rows={s.rows}
size={P8P_DATA_GRID_SIZE.LARGE}
reloading={s.reload}
dataCellRender={prms => dataCellRender({ ...prms }, editColumnRowClick, deleteColumnRowClick)}
dataCellRender={prms =>
dataCellRender({ ...prms }, showRrpConfSctnMrk, editColumnRowClick, deleteColumnRowClick)
}
/>
) : null}
</CustomTabPanel>
</SectionTabPanel>
);
})}
</Box>

View File

@ -1,5 +1,6 @@
/*
Кастомный Tab
Парус 8 - Панели мониторинга - РО - Редактор настройки регламентированного отчёта
Панель мониторинга: Компонент вкладки раздела
*/
//---------------------
@ -10,11 +11,11 @@ import React from "react"; //Классы React
import PropTypes from "prop-types"; //Контроль свойств компонента
import { Box, Typography } from "@mui/material"; //Интерфейсные компоненты
//-----------
//Тело модуля
//-----------
//---------------
//Тело компонента
//---------------
const CustomTabPanel = props => {
const SectionTabPanel = props => {
const { children, value, index, ...other } = props;
return (
@ -28,14 +29,15 @@ const CustomTabPanel = props => {
);
};
CustomTabPanel.propTypes = {
//Контроль свойств - Вкладка раздела
SectionTabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.number.isRequired,
value: PropTypes.number.isRequired
};
//----------------
//Интерфейс модуля
//----------------
//--------------------
//Интерфейс компонента
//--------------------
export { CustomTabPanel };
export { SectionTabPanel };