From 9b7e184431021fad80214a2fd73a78c6716e13a2 Mon Sep 17 00:00:00 2001 From: davay-popozhe Date: Wed, 26 Jun 2024 19:01:13 +0300 Subject: [PATCH] =?UTF-8?q?=D0=A6=D0=98=D0=A2=D0=9A-823=20=D1=87.1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rrp_conf_editor/custom_form_control.js | 58 ----------- .../{custom_dialog.js => iud_form_dialog.js} | 95 ++++++++++--------- .../rrp_conf_editor/iud_form_text_filed.js | 74 +++++++++++++++ app/panels/rrp_conf_editor/layouts.js | 18 +++- app/panels/rrp_conf_editor/rrp_conf_editor.js | 86 ++++++++++------- ...stom_tab_panel.js => section_tab_panel.js} | 22 +++-- 6 files changed, 197 insertions(+), 156 deletions(-) delete mode 100644 app/panels/rrp_conf_editor/custom_form_control.js rename app/panels/rrp_conf_editor/{custom_dialog.js => iud_form_dialog.js} (63%) create mode 100644 app/panels/rrp_conf_editor/iud_form_text_filed.js rename app/panels/rrp_conf_editor/{custom_tab_panel.js => section_tab_panel.js} (60%) diff --git a/app/panels/rrp_conf_editor/custom_form_control.js b/app/panels/rrp_conf_editor/custom_form_control.js deleted file mode 100644 index 2e9cc01..0000000 --- a/app/panels/rrp_conf_editor/custom_form_control.js +++ /dev/null @@ -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 ( - - - {labelText} - changeFunc(e.target.value) : null} - aria-describedby={`${elementCode}-outlined-helper-text`} - label={labelText} - endAdornment={ - withDictionary ? ( - - - list - - - ) : null - } - /> - - - ); -}; - -CustomFormControl.propTypes = { - elementCode: PropTypes.string.isRequired, - elementValue: PropTypes.string, - labelText: PropTypes.string.isRequired, - changeFunc: PropTypes.func.isRequired, - withDictionary: PropTypes.bool -}; - -//---------------- -//Интерфейс модуля -//---------------- - -export { CustomFormControl }; diff --git a/app/panels/rrp_conf_editor/custom_dialog.js b/app/panels/rrp_conf_editor/iud_form_dialog.js similarity index 63% rename from app/panels/rrp_conf_editor/custom_dialog.js rename to app/panels/rrp_conf_editor/iud_form_dialog.js index ec21389..2f1c050 100644 --- a/app/panels/rrp_conf_editor/custom_dialog.js +++ b/app/panels/rrp_conf_editor/iud_form_dialog.js @@ -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 ( - - ); + return ; }; return ( @@ -90,34 +92,34 @@ const CustomDialog = props => { close - {curStatus == Statuses.DELETE || curStatus == Statuses.COLUMNROW_DELETE ? ( - curStatus == Statuses.DELETE ? ( + {curStatus == STATUSES.DELETE || curStatus == STATUSES.COLUMNROW_DELETE ? ( + curStatus == STATUSES.DELETE ? ( Вы хотите удалить раздел {curName}? ) : ( Вы хотите удалить показатель раздела {curName}? ) ) : (
- {curStatus != Statuses.COLUMNROW_EDIT ? ( - + {curStatus != STATUSES.COLUMNROW_EDIT ? ( + ) : null} - - {curStatus == Statuses.COLUMNROW_CREATE ? ( + + {curStatus == STATUSES.COLUMNROW_CREATE ? (
- - +
) : null}
@@ -125,18 +127,17 @@ const CustomDialog = props => { {renderSwitch()} - + ); }; -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 }; diff --git a/app/panels/rrp_conf_editor/iud_form_text_filed.js b/app/panels/rrp_conf_editor/iud_form_text_filed.js new file mode 100644 index 0000000..b0a381a --- /dev/null +++ b/app/panels/rrp_conf_editor/iud_form_text_filed.js @@ -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 ( + + + {labelText} + changeFunc(e.target.value) : null} + aria-describedby={`${elementCode}-helper-text`} + label={labelText} + endAdornment={ + withDictionary ? ( + + + list + + + ) : null + } + /> + + + ); +}; + +//Контроль свойств - Поле ввода +IUDFormTextField.propTypes = { + elementCode: PropTypes.string.isRequired, + elementValue: PropTypes.string, + labelText: PropTypes.string.isRequired, + changeFunc: PropTypes.func.isRequired, + withDictionary: PropTypes.bool +}; + +//-------------------- +//Интерфейс компонента +//-------------------- + +export { IUDFormTextField }; diff --git a/app/panels/rrp_conf_editor/layouts.js b/app/panels/rrp_conf_editor/layouts.js index 7e968df..9eb5b6e 100644 --- a/app/panels/rrp_conf_editor/layouts.js +++ b/app/panels/rrp_conf_editor/layouts.js @@ -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 = ( - {row[columnDef.name]} + { + showRrpConfSctnMrk(row["NRN_" + columnDef.name.substring(5)]); + }} + > + {row[columnDef.name]} + editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}> edit diff --git a/app/panels/rrp_conf_editor/rrp_conf_editor.js b/app/panels/rrp_conf_editor/rrp_conf_editor.js index 3cdc7db..5937ed5 100644 --- a/app/panels/rrp_conf_editor/rrp_conf_editor.js +++ b/app/panels/rrp_conf_editor/rrp_conf_editor.js @@ -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,40 +199,40 @@ 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; } setRrpDoc(pv => ({ ...pv, reload: true })); } - // eslint-disable-next-line react-hooks/exhaustive-deps + //eslint-disable-next-line react-hooks/exhaustive-deps }, [formData]); //Добавление раздела 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 => ({ @@ -380,9 +381,22 @@ const RrpConfEditor = () => { })); setTabValue(tabFocus); } - // eslint-disable-next-line react-hooks/exhaustive-deps + //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 ( {formOpen ? ( - { {rrpDoc.sections.map((s, i) => { return ( - - + + {s.dataLoaded ? ( { 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} - + ); })} diff --git a/app/panels/rrp_conf_editor/custom_tab_panel.js b/app/panels/rrp_conf_editor/section_tab_panel.js similarity index 60% rename from app/panels/rrp_conf_editor/custom_tab_panel.js rename to app/panels/rrp_conf_editor/section_tab_panel.js index 083db8e..3935d55 100644 --- a/app/panels/rrp_conf_editor/custom_tab_panel.js +++ b/app/panels/rrp_conf_editor/section_tab_panel.js @@ -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 };