From 9b7e184431021fad80214a2fd73a78c6716e13a2 Mon Sep 17 00:00:00 2001 From: davay-popozhe Date: Wed, 26 Jun 2024 19:01:13 +0300 Subject: [PATCH 1/4] =?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 }; From faf1c9d6e769f04bf8b5fd6b8cef1e2f34b3233c Mon Sep 17 00:00:00 2001 From: davay-popozhe Date: Fri, 28 Jun 2024 17:53:04 +0300 Subject: [PATCH 2/4] =?UTF-8?q?=D0=A6=D0=98=D0=A2=D0=9A-823=20=D1=87.2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/panels/rrp_conf_editor/iud_form_dialog.js | 183 ++++++++++++------ ...m_text_filed.js => iud_form_text_field.js} | 55 ++++-- app/panels/rrp_conf_editor/layouts.js | 5 +- app/panels/rrp_conf_editor/rrp_conf_editor.js | 72 ++----- .../rrp_conf_editor/section_tab_panel.js | 2 +- 5 files changed, 180 insertions(+), 137 deletions(-) rename app/panels/rrp_conf_editor/{iud_form_text_filed.js => iud_form_text_field.js} (59%) diff --git a/app/panels/rrp_conf_editor/iud_form_dialog.js b/app/panels/rrp_conf_editor/iud_form_dialog.js index 2f1c050..6c8d3bd 100644 --- a/app/panels/rrp_conf_editor/iud_form_dialog.js +++ b/app/panels/rrp_conf_editor/iud_form_dialog.js @@ -7,40 +7,123 @@ //Подключение библиотек //--------------------- -import React from "react"; //Классы React +import React, { useState, useContext } from "react"; //Классы React import PropTypes from "prop-types"; //Контроль свойств компонента import { Dialog, DialogTitle, IconButton, Icon, DialogContent, Typography, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты //import { MessagingСtx } from "../../context/messaging"; -import { IUDFormTextField } from "./iud_form_text_filed"; //Кастомные строки ввода -import { STATUSES, STYLES } from "./layouts"; //Статусы и стили диалогового окна +import { ApplicationСtx } from "../../context/application"; //Контекст приложения +import { IUDFormTextField } from "./iud_form_text_field"; //Кастомные строки ввода +import { STATUSES } from "./layouts"; //Статусы и стили диалогового окна + +//--------- +//Константы +//--------- + +//Стили +const STYLES = { + DIALOG_ACTIONS: { justifyContent: "center" }, + CLOSE_BUTTON: { + position: "absolute", + right: 8, + top: 8, + color: theme => theme.palette.grey[500] + } +}; + +//Выбор подразделения +// const selectInsDepartment = (showDictionary, callBack) => { +// showDictionary({ +// unitCode: "INS_DEPARTMENT", +// callBack: res => (res.success === true ? callBack(res.outParameters.out_CODE) : callBack(null)) +// }); +// }; + +//Выбор строки +const selectRow = (showDictionary, callBack) => { + showDictionary({ + unitCode: "RRPRow", + callBack: res => + res.success === true + ? callBack(res.outParameters.out_CODE, res.outParameters.out_RRPVERSION_CODE, res.outParameters.out_RRPVERSION) + : callBack(null) + }); + // pOnlineShowDictionary({ + // unitCode: "RRPRow", + // callBack: res => + // res.success === true + // ? setFormData(pv => ({ + // ...pv, + // rowCode: res.outParameters.out_CODE, + // rowVCode: res.outParameters.out_RRPVERSION_CODE, + // rowVRn: res.outParameters.out_RRPVERSION + // })) + // : null + // }); +}; + +//Выбор графы +const selectColumn = (showDictionary, callBack) => { + showDictionary({ + unitCode: "RRPColumn", + callBack: res => + res.success === true + ? callBack(res.outParameters.out_CODE, res.outParameters.out_RRPVERSION_CODE, res.outParameters.out_RRPVERSION) + : callBack(null) + }); + // pOnlineShowDictionary({ + // unitCode: "RRPColumn", + // callBack: res => + // res.success === true + // ? setFormData(pv => ({ + // ...pv, + // colCode: res.outParameters.out_CODE, + // colVCode: res.outParameters.out_RRPVERSION_CODE, + // colVRn: res.outParameters.out_RRPVERSION + // })) + // : null + // }); +}; //--------------- //Тело компонента //--------------- -const IUDFormDialog = props => { +const IUDFormDialog = ({ initial, onOk, onCancel }) => { //Свойства компонента - const { - formOpen, - closeForm, - curStatus, - curCode, - curName, - curColCode, - curRowCode, - btnOkClick, - codeOnChange, - nameOnChange, - dictColumnClick, - dictRowClick - } = props; + // const { + // formOpen, + // closeForm, + // curStatus, + // curCode, + // curName, + // curColCode, + // curRowCode, + // btnOkClick, + // codeOnChange, + // nameOnChange, + // dictColumnClick, + // dictRowClick + + // } = props; + + //Собственное состояние + const [formData, setFormData] = useState({ ...initial }); //Подключение к контексту сообщений //const { showMsgWarn } = useContext(MessagingСtx); + //Подключение к контексту приложения + const { pOnlineShowDictionary } = useContext(ApplicationСtx); + + //При закрытии диалога без изменений + const handleCancel = () => (onCancel ? onCancel() : null); + + //При закрытии диалога с изменениями + const handleOK = () => (onOk ? onOk(formData) : null); + //Формирование заголовка диалогового окна const formTitle = () => { - switch (curStatus) { + switch (formData.status) { case STATUSES.CREATE: return "Добавление раздела"; case STATUSES.EDIT: @@ -59,7 +142,7 @@ const IUDFormDialog = props => { //Отрисовка диалогового окна const renderSwitch = () => { var btnText = ""; - switch (curStatus) { + switch (formData.status) { case STATUSES.CREATE: case STATUSES.COLUMNROW_CREATE: btnText = "Добавить"; @@ -73,52 +156,43 @@ const IUDFormDialog = props => { btnText = "Удалить"; break; } - return ; + return ; }; return ( - + {formTitle()} - theme.palette.grey[500] - }} - > + close - {curStatus == STATUSES.DELETE || curStatus == STATUSES.COLUMNROW_DELETE ? ( - curStatus == STATUSES.DELETE ? ( - Вы хотите удалить раздел {curName}? + {formData.status == STATUSES.DELETE || formData.status == STATUSES.COLUMNROW_DELETE ? ( + formData.status == STATUSES.DELETE ? ( + Вы хотите удалить раздел {formData.name}? ) : ( - Вы хотите удалить показатель раздела {curName}? + Вы хотите удалить показатель раздела {formData.name}? ) ) : (
- {curStatus != STATUSES.COLUMNROW_EDIT ? ( - + {formData.status != STATUSES.COLUMNROW_EDIT ? ( + ) : null} - - {curStatus == STATUSES.COLUMNROW_CREATE ? ( + + {formData.status == STATUSES.COLUMNROW_CREATE ? (
selectRow(pOnlineShowDictionary, callBack)} /> selectColumn(pOnlineShowDictionary, callBack)} />
) : null} @@ -127,7 +201,7 @@ const IUDFormDialog = props => { {renderSwitch()} - +
); @@ -135,18 +209,9 @@ const IUDFormDialog = props => { //Контроль свойств - Диалог IUDFormDialog.propTypes = { - formOpen: PropTypes.bool.isRequired, - closeForm: PropTypes.func.isRequired, - curStatus: PropTypes.oneOf(Object.values(STATUSES).filter(x => typeof x === "number")), - curCode: PropTypes.string, - curName: PropTypes.string, - curColCode: PropTypes.string, - curRowCode: PropTypes.string, - btnOkClick: PropTypes.func.isRequired, - codeOnChange: PropTypes.func.isRequired, - nameOnChange: PropTypes.func.isRequired, - dictColumnClick: PropTypes.func.isRequired, - dictRowClick: PropTypes.func.isRequired + initial: PropTypes.object.isRequired, + onOk: PropTypes.func, + onCancel: PropTypes.func }; //-------------------- diff --git a/app/panels/rrp_conf_editor/iud_form_text_filed.js b/app/panels/rrp_conf_editor/iud_form_text_field.js similarity index 59% rename from app/panels/rrp_conf_editor/iud_form_text_filed.js rename to app/panels/rrp_conf_editor/iud_form_text_field.js index b0a381a..2dda6f8 100644 --- a/app/panels/rrp_conf_editor/iud_form_text_filed.js +++ b/app/panels/rrp_conf_editor/iud_form_text_field.js @@ -16,42 +16,55 @@ import { STYLES } from "./layouts"; //Стили диалогового окна //Тело компонента //--------------- -const IUDFormTextField = props => { - //Свойства - const { elementCode, elementValue, labelText, changeFunc, withDictionary, ...other } = props; - - //Состояние идентификатора элемента - const [elementId, setElementId] = useState(""); +const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dictionary, ...other }) => { + //Значение элемента + const [value, setValue] = useState(elementValue); //Формирование идентификатора элемента - const generateId = useCallback(async () => { - setElementId(`${elementCode}-input`); - }, [elementCode]); + // const generateId = useCallback(async () => { + // setElementId(`${elementCode}-input`); + // }, [elementCode]); //При рендере поля ввода + // useEffect(() => { + // generateId(); + // }, [generateId]); + + //При получении нового значения из вне 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); + }; return ( - {labelText} + {labelText} changeFunc(e.target.value) : null} - aria-describedby={`${elementCode}-helper-text`} - label={labelText} + id={elementCode} + name={elementCode} + value={value} endAdornment={ - withDictionary ? ( + dictionary ? ( - + list ) : null } + aria-describedby={`${elementCode}-helper-text`} + label={labelText} + onChange={handleChange} /> @@ -63,8 +76,8 @@ IUDFormTextField.propTypes = { elementCode: PropTypes.string.isRequired, elementValue: PropTypes.string, labelText: PropTypes.string.isRequired, - changeFunc: PropTypes.func.isRequired, - withDictionary: PropTypes.bool + onChange: PropTypes.func, + dictionary: PropTypes.func }; //-------------------- diff --git a/app/panels/rrp_conf_editor/layouts.js b/app/panels/rrp_conf_editor/layouts.js index 9eb5b6e..928aae4 100644 --- a/app/panels/rrp_conf_editor/layouts.js +++ b/app/panels/rrp_conf_editor/layouts.js @@ -29,6 +29,7 @@ export const STATUSES = { CREATE: 0, EDIT: 1, DELETE: 2, COLUMNROW_CREATE: 3, CO //Генерация представления ячейки c данными export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, deleteCR) => { let data = row[columnDef.name]; + let cellStyle = { display: "flex" }; columnDef.name != "SROW_NAME" && data != undefined && columnDef.visible == true ? (data = ( @@ -41,10 +42,10 @@ export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, d > {row[columnDef.name]} - editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}> + editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}> edit - deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}> + deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}> delete diff --git a/app/panels/rrp_conf_editor/rrp_conf_editor.js b/app/panels/rrp_conf_editor/rrp_conf_editor.js index 5937ed5..dc796ac 100644 --- a/app/panels/rrp_conf_editor/rrp_conf_editor.js +++ b/app/panels/rrp_conf_editor/rrp_conf_editor.js @@ -32,6 +32,8 @@ const RrpConfEditor = () => { columnsDef: [], groups: [], rows: [], + fixedHeader: false, + fixedColumns: 0, reload: false }; @@ -140,38 +142,6 @@ const RrpConfEditor = () => { openForm(); }; - //Отработка нажатия на словарь граф - const dictColumnClick = () => { - pOnlineShowDictionary({ - unitCode: "RRPColumn", - callBack: res => - res.success === true - ? setFormData(pv => ({ - ...pv, - colCode: res.outParameters.out_CODE, - colVCode: res.outParameters.out_RRPVERSION_CODE, - colVRn: res.outParameters.out_RRPVERSION - })) - : null - }); - }; - - //Отработка нажатия на словарь строк - const dictRowClick = () => { - pOnlineShowDictionary({ - unitCode: "RRPRow", - callBack: res => - res.success === true - ? setFormData(pv => ({ - ...pv, - rowCode: res.outParameters.out_CODE, - rowVCode: res.outParameters.out_RRPVERSION_CODE, - rowVRn: res.outParameters.out_RRPVERSION - })) - : null - }); - }; - //Нажатие на кнопку подтверждения создания/исправления/удаления на форме const formBtnOkClick = () => { let formStateProps = {}; @@ -338,6 +308,8 @@ const RrpConfEditor = () => { columnsDef: [...(s.XDATA.XCOLUMNS_DEF || [])], groups: [...(s.XDATA.XGROUPS || [])], rows: [...(s.XDATA.XROWS || [])], + fixedHeader: s.XDATA.XDATA_GRID.fixedHeader, + fixedColumns: s.XDATA.XDATA_GRID.fixedColumns, reload: false }); //Ищем загружен ли уже раздел с таким же ид. @@ -414,25 +386,19 @@ const RrpConfEditor = () => { : null; }, [formData.colCode, formData.rowCode, formData.sctnCode, formData.sctnName, formData.status, getSctnMrkCodeName]); + //При изменении фильтра в диалоге + const handleFilterOk = filter => { + setFormData(filter); + setForm(false); + }; + + //При закрытии диалога фильтра + const handleFilterCancel = () => setForm(false); + //Генерация содержимого return ( - {formOpen ? ( - setFormData(pv => ({ ...pv, code: v }))} - nameOnChange={v => setFormData(pv => ({ ...pv, name: v }))} - dictColumnClick={dictColumnClick} - dictRowClick={dictRowClick} - /> - ) : null} + {formOpen ? : null} {rrpDoc.docLoaded ? ( @@ -445,12 +411,8 @@ const RrpConfEditor = () => { label={ {s.name} - editSectionClick(s.rn, s.code, s.name)}> - edit - - deleteSectionClick(s.rn, s.code, s.name)}> - delete - + editSectionClick(s.rn, s.code, s.name)}>edit + deleteSectionClick(s.rn, s.code, s.name)}>delete } wrapped @@ -472,6 +434,8 @@ const RrpConfEditor = () => { columnsDef={s.columnsDef} groups={s.groups} rows={s.rows} + fixedHeader={s.fixedHeader} + fixedColumns={s.fixedColumns} size={P8P_DATA_GRID_SIZE.LARGE} reloading={s.reload} dataCellRender={prms => diff --git a/app/panels/rrp_conf_editor/section_tab_panel.js b/app/panels/rrp_conf_editor/section_tab_panel.js index 3935d55..afb2332 100644 --- a/app/panels/rrp_conf_editor/section_tab_panel.js +++ b/app/panels/rrp_conf_editor/section_tab_panel.js @@ -22,7 +22,7 @@ const SectionTabPanel = props => { From 95a2578d1119c01879390f1c9b2220a8f0ea85f8 Mon Sep 17 00:00:00 2001 From: davay-popozhe Date: Mon, 8 Jul 2024 16:55:32 +0300 Subject: [PATCH 3/4] =?UTF-8?q?=D0=A6=D0=98=D0=A2=D0=9A-823=20=D0=BF=D1=80?= =?UTF-8?q?=D0=B0=D0=B2=D0=BA=D0=B8=20=D0=BF=D0=BE=20=D0=BF=D1=80=D0=B8?= =?UTF-8?q?=D0=BC=D0=B5=D1=87=D0=B0=D0=BD=D0=B8=D1=8E=20=D0=BE=D1=82=2010.?= =?UTF-8?q?06.24?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/panels/rrp_conf_editor/iud_form_dialog.js | 303 ++++++++++++------ .../rrp_conf_editor/iud_form_text_field.js | 30 +- app/panels/rrp_conf_editor/layouts.js | 17 +- app/panels/rrp_conf_editor/rrp_conf_editor.js | 269 +++++----------- .../rrp_conf_editor/section_tab_panel.js | 4 +- db/PKG_P8PANELS_RRPCONFED.pck | 83 +++-- 6 files changed, 374 insertions(+), 332 deletions(-) diff --git a/app/panels/rrp_conf_editor/iud_form_dialog.js b/app/panels/rrp_conf_editor/iud_form_dialog.js index 6c8d3bd..3bae06d 100644 --- a/app/panels/rrp_conf_editor/iud_form_dialog.js +++ b/app/panels/rrp_conf_editor/iud_form_dialog.js @@ -7,11 +7,12 @@ //Подключение библиотек //--------------------- -import React, { useState, useContext } from "react"; //Классы React +import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React import PropTypes from "prop-types"; //Контроль свойств компонента import { Dialog, DialogTitle, IconButton, Icon, DialogContent, Typography, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты -//import { MessagingСtx } from "../../context/messaging"; +//import { MessagingСtx } from "../../context/messaging"; //Контекст сообщений import { ApplicationСtx } from "../../context/application"; //Контекст приложения +import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером import { IUDFormTextField } from "./iud_form_text_field"; //Кастомные строки ввода import { STATUSES } from "./layouts"; //Статусы и стили диалогового окна @@ -21,91 +22,20 @@ import { STATUSES } from "./layouts"; //Статусы и стили диало //Стили const STYLES = { - DIALOG_ACTIONS: { justifyContent: "center" }, CLOSE_BUTTON: { position: "absolute", right: 8, top: 8, color: theme => theme.palette.grey[500] - } -}; - -//Выбор подразделения -// const selectInsDepartment = (showDictionary, callBack) => { -// showDictionary({ -// unitCode: "INS_DEPARTMENT", -// callBack: res => (res.success === true ? callBack(res.outParameters.out_CODE) : callBack(null)) -// }); -// }; - -//Выбор строки -const selectRow = (showDictionary, callBack) => { - showDictionary({ - unitCode: "RRPRow", - callBack: res => - res.success === true - ? callBack(res.outParameters.out_CODE, res.outParameters.out_RRPVERSION_CODE, res.outParameters.out_RRPVERSION) - : callBack(null) - }); - // pOnlineShowDictionary({ - // unitCode: "RRPRow", - // callBack: res => - // res.success === true - // ? setFormData(pv => ({ - // ...pv, - // rowCode: res.outParameters.out_CODE, - // rowVCode: res.outParameters.out_RRPVERSION_CODE, - // rowVRn: res.outParameters.out_RRPVERSION - // })) - // : null - // }); -}; - -//Выбор графы -const selectColumn = (showDictionary, callBack) => { - showDictionary({ - unitCode: "RRPColumn", - callBack: res => - res.success === true - ? callBack(res.outParameters.out_CODE, res.outParameters.out_RRPVERSION_CODE, res.outParameters.out_RRPVERSION) - : callBack(null) - }); - // pOnlineShowDictionary({ - // unitCode: "RRPColumn", - // callBack: res => - // res.success === true - // ? setFormData(pv => ({ - // ...pv, - // colCode: res.outParameters.out_CODE, - // colVCode: res.outParameters.out_RRPVERSION_CODE, - // colVRn: res.outParameters.out_RRPVERSION - // })) - // : null - // }); + }, + PADDING_DIALOG_BUTTONS_RIGHT: { paddingRight: "32px" } }; //--------------- //Тело компонента //--------------- -const IUDFormDialog = ({ initial, onOk, onCancel }) => { - //Свойства компонента - // const { - // formOpen, - // closeForm, - // curStatus, - // curCode, - // curName, - // curColCode, - // curRowCode, - // btnOkClick, - // codeOnChange, - // nameOnChange, - // dictColumnClick, - // dictRowClick - - // } = props; - +const IUDFormDialog = ({ initial, onClose, onReload }) => { //Собственное состояние const [formData, setFormData] = useState({ ...initial }); @@ -115,11 +45,122 @@ const IUDFormDialog = ({ initial, onOk, onCancel }) => { //Подключение к контексту приложения const { pOnlineShowDictionary } = useContext(ApplicationСtx); + //Подключение к контексту взаимодействия с сервером + const { executeStored } = useContext(BackEndСtx); + //При закрытии диалога без изменений - const handleCancel = () => (onCancel ? onCancel() : null); + const handleCancel = () => (onClose ? onClose() : null); //При закрытии диалога с изменениями - const handleOK = () => (onOk ? onOk(formData) : null); + const handleOK = () => { + if (onClose) { + changeSections(); + onClose(); + } else null; + }; + + //Отработка добавления/изсправления/удаления элемента + const handleReload = () => { + if (onReload) { + onReload(formData); + } else null; + }; + + //При изменении значения элемента + const handleDialogItemChange = (item, value) => setFormData(pv => ({ ...pv, [item]: value })); + + //Отработка изменений в разделе или показателе раздела + const changeSections = useCallback(async () => { + switch (formData.status) { + case STATUSES.CREATE: + await insertSections(); + break; + case STATUSES.EDIT: + await updateSections(); + break; + case STATUSES.DELETE: + await deleteSections(); + break; + case STATUSES.RRPCONFSCTNMRK_CREATE: + await addRRPCONFSCTNMRK(); + break; + case STATUSES.RRPCONFSCTNMRK_EDIT: + await editRRPCONFSCTNMRK(); + break; + case STATUSES.RRPCONFSCTNMRK_DELETE: + await deleteRRPCONFSCTNMRK(); + break; + } + handleReload(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [formData]); + + //Добавление раздела + const insertSections = useCallback(async () => { + const data = await executeStored({ + stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_INSERT", + args: { + NPRN: formData.prn, + SCODE: formData.code, + SNAME: formData.name + } + }); + setFormData(pv => ({ + ...pv, + rn: Number(data.NRN) + })); + }, [formData.prn, formData.code, formData.name, executeStored]); + + //Исправление раздела + const updateSections = useCallback(async () => { + await executeStored({ + stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_UPDATE", + args: { + NRN: formData.rn, + SCODE: formData.code, + SNAME: formData.name + } + }); + }, [formData.name, formData.code, formData.rn, executeStored]); + + //Удаление раздела + const deleteSections = useCallback(async () => { + await executeStored({ + stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_DELETE", + args: { + NRN: formData.rn + } + }); + }, [formData.rn, executeStored]); + + //Добавление показателя раздела + const addRRPCONFSCTNMRK = useCallback(async () => { + await executeStored({ + stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_INSERT", + args: { + NPRN: formData.prn, + SCODE: formData.code, + SNAME: formData.name, + SCOLCODE: formData.colCode, + SCOLVER: formData.colVCode, + SROWCODE: formData.rowCode, + SROWVER: formData.rowVCode + } + }); + }, [executeStored, formData.code, formData.colVCode, formData.colCode, formData.name, formData.prn, formData.rowCode, formData.rowVCode]); + + //Исправление показателя раздела + const editRRPCONFSCTNMRK = useCallback(async () => { + await executeStored({ + stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_UPDATE", + args: { NRN: formData.rn, SNAME: formData.name } + }); + }, [executeStored, formData.name, formData.rn]); + + //Удаление показателя раздела + const deleteRRPCONFSCTNMRK = useCallback(async () => { + await executeStored({ stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_DELETE", args: { NRN: formData.rn } }); + }, [executeStored, formData.rn]); //Формирование заголовка диалогового окна const formTitle = () => { @@ -130,11 +171,11 @@ const IUDFormDialog = ({ initial, onOk, onCancel }) => { return "Исправление раздела"; case STATUSES.DELETE: return "Удаление раздела"; - case STATUSES.COLUMNROW_CREATE: + case STATUSES.RRPCONFSCTNMRK_CREATE: return "Добавление показателя раздела"; - case STATUSES.COLUMNROW_EDIT: + case STATUSES.RRPCONFSCTNMRK_EDIT: return "Исправление показателя раздела"; - case STATUSES.COLUMNROW_DELETE: + case STATUSES.RRPCONFSCTNMRK_DELETE: return "Удаление показателя раздела"; } }; @@ -144,21 +185,85 @@ const IUDFormDialog = ({ initial, onOk, onCancel }) => { var btnText = ""; switch (formData.status) { case STATUSES.CREATE: - case STATUSES.COLUMNROW_CREATE: + case STATUSES.RRPCONFSCTNMRK_CREATE: btnText = "Добавить"; break; case STATUSES.EDIT: - case STATUSES.COLUMNROW_EDIT: + case STATUSES.RRPCONFSCTNMRK_EDIT: btnText = "Исправить"; break; case STATUSES.DELETE: - case STATUSES.COLUMNROW_DELETE: + case STATUSES.RRPCONFSCTNMRK_DELETE: btnText = "Удалить"; break; } - return ; + return ( + + ); }; + //Выбор строки + const selectRow = (showDictionary, callBack) => { + showDictionary({ + unitCode: "RRPRow", + callBack: res => { + if (res.success === true) { + callBack(res.outParameters.out_CODE, res.outParameters.out_RRPVERSION_CODE, res.outParameters.out_RRPVERSION); + setFormData(pv => ({ + ...pv, + rowCode: res.outParameters.out_CODE, + rowVCode: res.outParameters.out_RRPVERSION_CODE, + rowVRn: res.outParameters.out_RRPVERSION + })); + } else callBack(null); + } + }); + }; + + //Выбор графы + const selectColumn = (showDictionary, callBack) => { + showDictionary({ + unitCode: "RRPColumn", + callBack: res => { + if (res.success === true) { + callBack(res.outParameters.out_CODE, res.outParameters.out_RRPVERSION_CODE, res.outParameters.out_RRPVERSION); + setFormData(pv => ({ + ...pv, + colCode: res.outParameters.out_CODE, + colVCode: res.outParameters.out_RRPVERSION_CODE, + colVRn: res.outParameters.out_RRPVERSION + })); + } else callBack(null); + } + }); + }; + + //Получение мнемокода и наименования показателя раздела + const getSctnMrkCodeName = useCallback(async () => { + const data = await executeStored({ + stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_GET_CODE_NAME", + args: { SSCTNCODE: formData.sctnCode, SROWCODE: formData.rowCode, SCOLUMNCODE: formData.colCode } + }); + setFormData(pv => ({ + ...pv, + code: data.SCODE, + name: data.SNAME + })); + }, [executeStored, formData.colCode, formData.rowCode, formData.sctnCode]); + + //Получение наименования и мнемокода показателя раздела при заполнении необходимых полей + useEffect(() => { + formData.status == STATUSES.RRPCONFSCTNMRK_CREATE && formData.sctnName && formData.sctnCode && formData.colCode && formData.rowCode + ? getSctnMrkCodeName() + : null; + }, [formData.colCode, formData.rowCode, formData.sctnCode, formData.sctnName, formData.status, getSctnMrkCodeName]); + return ( {formTitle()} @@ -166,7 +271,7 @@ const IUDFormDialog = ({ initial, onOk, onCancel }) => { close - {formData.status == STATUSES.DELETE || formData.status == STATUSES.COLUMNROW_DELETE ? ( + {formData.status == STATUSES.DELETE || formData.status == STATUSES.RRPCONFSCTNMRK_DELETE ? ( formData.status == STATUSES.DELETE ? ( Вы хотите удалить раздел {formData.name}? ) : ( @@ -174,24 +279,34 @@ const IUDFormDialog = ({ initial, onOk, onCancel }) => { ) ) : (
- {formData.status != STATUSES.COLUMNROW_EDIT ? ( - + {formData.status != STATUSES.RRPCONFSCTNMRK_EDIT ? ( + ) : null} - - {formData.status == STATUSES.COLUMNROW_CREATE ? ( + + {formData.status == STATUSES.RRPCONFSCTNMRK_CREATE ? (
selectRow(pOnlineShowDictionary, callBack)} /> selectColumn(pOnlineShowDictionary, callBack)} />
@@ -210,8 +325,8 @@ const IUDFormDialog = ({ initial, onOk, onCancel }) => { //Контроль свойств - Диалог IUDFormDialog.propTypes = { initial: PropTypes.object.isRequired, - onOk: PropTypes.func, - onCancel: PropTypes.func + onClose: PropTypes.func, + onReload: PropTypes.func }; //-------------------- diff --git a/app/panels/rrp_conf_editor/iud_form_text_field.js b/app/panels/rrp_conf_editor/iud_form_text_field.js index 2dda6f8..ae04ec9 100644 --- a/app/panels/rrp_conf_editor/iud_form_text_field.js +++ b/app/panels/rrp_conf_editor/iud_form_text_field.js @@ -7,10 +7,18 @@ //Подключение библиотек //--------------------- -import React, { useState, useCallback, useEffect } from "react"; //Классы React +import React, { useState, useEffect } from "react"; //Классы React import PropTypes from "prop-types"; //Контроль свойств компонента import { Box, FormControl, InputLabel, Input, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты -import { STYLES } from "./layouts"; //Стили диалогового окна + +//--------- +//Константы +//--------- + +//Стили +export const STYLES = { + DIALOG_WINDOW_WIDTH: { width: 400 } +}; //--------------- //Тело компонента @@ -20,16 +28,6 @@ const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dict //Значение элемента const [value, setValue] = useState(elementValue); - //Формирование идентификатора элемента - // const generateId = useCallback(async () => { - // setElementId(`${elementCode}-input`); - // }, [elementCode]); - - //При рендере поля ввода - // useEffect(() => { - // generateId(); - // }, [generateId]); - //При получении нового значения из вне useEffect(() => { setValue(elementValue); @@ -47,12 +45,12 @@ const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dict return ( - + {labelText} @@ -62,9 +60,9 @@ const IUDFormTextField = ({ elementCode, elementValue, labelText, onChange, dict ) : null } - aria-describedby={`${elementCode}-helper-text`} - label={labelText} onChange={handleChange} + multiline + maxRows={4} /> diff --git a/app/panels/rrp_conf_editor/layouts.js b/app/panels/rrp_conf_editor/layouts.js index 928aae4..4b25d30 100644 --- a/app/panels/rrp_conf_editor/layouts.js +++ b/app/panels/rrp_conf_editor/layouts.js @@ -8,19 +8,20 @@ //--------------------- import React from "react"; //Классы React -import { Stack, IconButton, Icon, Link } from "@mui/material"; //Интерфейсные компоненты +import { Box, IconButton, Icon, Link } from "@mui/material"; //Интерфейсные компоненты //--------- //Константы //--------- +//Стили export const STYLES = { - DIALOG_WINDOW_WIDTH: { width: 400 }, - PADDING_DIALOG_BUTTONS_RIGHT: { paddingRight: "32px" } + BOX_ROW: { display: "flex", justifyContent: "center", alignItems: "center" }, + LINK_STYLE: { component: "button", width: "-webkit-fill-available" } }; //Статусы диалогового окна -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, RRPCONFSCTNMRK_CREATE: 3, RRPCONFSCTNMRK_EDIT: 4, RRPCONFSCTNMRK_DELETE: 5 }; //----------- //Тело модуля @@ -29,13 +30,11 @@ export const STATUSES = { CREATE: 0, EDIT: 1, DELETE: 2, COLUMNROW_CREATE: 3, CO //Генерация представления ячейки c данными export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, deleteCR) => { let data = row[columnDef.name]; - let cellStyle = { display: "flex" }; columnDef.name != "SROW_NAME" && data != undefined && columnDef.visible == true ? (data = ( - + { showRrpConfSctnMrk(row["NRN_" + columnDef.name.substring(5)]); }} @@ -48,7 +47,7 @@ export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, d deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}> delete - + )) : null; return { data }; diff --git a/app/panels/rrp_conf_editor/rrp_conf_editor.js b/app/panels/rrp_conf_editor/rrp_conf_editor.js index dc796ac..b14dc38 100644 --- a/app/panels/rrp_conf_editor/rrp_conf_editor.js +++ b/app/panels/rrp_conf_editor/rrp_conf_editor.js @@ -13,10 +13,23 @@ 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 { MessagingСtx } from "../../context/messaging"; //Контекст сообщений +import { TEXTS } from "../../../app.text"; //Текстовые константы import { SectionTabPanel } from "./section_tab_panel"; //Кастомный Tab import { ApplicationСtx } from "../../context/application"; //Контекст приложения import { STATUSES, dataCellRender } from "./layouts"; //Дополнительная разметка и вёрстка клиентских элементов import { IUDFormDialog } from "./iud_form_dialog"; //Кастомное диалоговое окно +import { STYLES as COMMON_STYLES } from "./layouts"; + +//--------- +//Константы +//--------- + +//Стили +export const STYLES = { + TABS_BOTTOM_LINE: { borderBottom: 1, borderColor: "divider" }, + TABS_PADDING: { paddingTop: 1, paddingBottom: 1 } +}; //----------- //Тело модуля @@ -55,7 +68,6 @@ const RrpConfEditor = () => { //Состояние диалогового окна const [formData, setFormData] = useState({ - filled: false, rn: "", prn: "", sctnName: "", @@ -78,17 +90,24 @@ const RrpConfEditor = () => { setForm(true); }; - //Закрытие диалогового окна - const closeForm = () => { - setForm(false); - }; - //Очистка диалогового окна const clearFormData = () => { setFormData({ rn: "", + prn: "", + sctnName: "", + sctnCode: "", + status: "", code: "", - name: "" + name: "", + colName: "", + colCode: "", + colVCode: "", + colVRn: 0, + rowName: "", + rowCode: "", + rowVCode: "", + rowVRn: 0 }); }; @@ -96,11 +115,14 @@ const RrpConfEditor = () => { const { executeStored } = useContext(BackEndСtx); //Подключение к контексту приложения - const { pOnlineShowDictionary, pOnlineShowUnit } = useContext(ApplicationСtx); + const { pOnlineShowUnit } = useContext(ApplicationСtx); //Подключение к контексту навигации const { getNavigationSearch } = useContext(NavigationCtx); + //Подключение к контексту сообщений + const { showMsgErr } = useContext(MessagingСtx); + //Переключение раздела const handleChange = (event, newValue) => { setTabValue(newValue); @@ -125,38 +147,23 @@ const RrpConfEditor = () => { }; //Отработка нажатия на кнопку добавления показателя раздела - const addColumnRowClick = (prn, sctnCode, sctnName) => { - setFormData({ status: STATUSES.COLUMNROW_CREATE, prn: prn, sctnCode: sctnCode, sctnName: sctnName }); + const addRRPCONFSCTNMRKClick = (prn, sctnCode, sctnName) => { + setFormData({ status: STATUSES.RRPCONFSCTNMRK_CREATE, prn: prn, sctnCode: sctnCode, sctnName: sctnName }); openForm(); }; //Отработка нажатия на кнопку исправления показателя раздела - const editColumnRowClick = (rn, name) => { - setFormData({ status: STATUSES.COLUMNROW_EDIT, rn: rn, name: name }); + const editRRPCONFSCTNMRKClick = (rn, name) => { + setFormData({ status: STATUSES.RRPCONFSCTNMRK_EDIT, rn: rn, name: name }); openForm(); }; //Отработка нажатия на кнопку удаления показателя раздела - const deleteColumnRowClick = (rn, name) => { - setFormData({ status: STATUSES.COLUMNROW_DELETE, rn: rn, name: name }); + const deleteRRPCONFSCTNMRKClick = (rn, name) => { + setFormData({ status: STATUSES.RRPCONFSCTNMRK_DELETE, rn: rn, name: name }); openForm(); }; - //Нажатие на кнопку подтверждения создания/исправления/удаления на форме - const formBtnOkClick = () => { - let formStateProps = {}; - 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)) - formStateProps = { ...formStateProps, name: document.querySelector("#name-outlined").value }; - setFormData(pv => ({ - ...pv, - ...formStateProps, - filled: true - })); - closeForm(); - }; - //Формирование разделов const a11yProps = index => { return { @@ -165,120 +172,6 @@ const RrpConfEditor = () => { }; }; - //Отработка изменений в разделе или показателе раздела - const changeSections = useCallback(async () => { - if (formData.filled) { - switch (formData.status) { - case STATUSES.CREATE: - insertSections(); - clearFormData(); - break; - case STATUSES.EDIT: - updateSections(); - clearFormData(); - break; - case STATUSES.DELETE: - deleteSections(); - clearFormData(); - break; - case STATUSES.COLUMNROW_CREATE: - addColumnRow(); - clearFormData(); - break; - case STATUSES.COLUMNROW_EDIT: - editColumnRow(); - clearFormData(); - break; - case STATUSES.COLUMNROW_DELETE: - deleteColumnRow(); - clearFormData(); - break; - } - setRrpDoc(pv => ({ ...pv, reload: true })); - } - //eslint-disable-next-line react-hooks/exhaustive-deps - }, [formData]); - - //Добавление раздела - const insertSections = useCallback(async () => { - const data = await executeStored({ - stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_INSERT", - args: { - NPRN: formData.prn, - SCODE: formData.code, - SNAME: formData.name - } - }); - setFormData(pv => ({ - ...pv, - rn: Number(data.NRN) - })); - }, [formData.prn, formData.code, formData.name, executeStored]); - - //Исправление раздела - const updateSections = useCallback(async () => { - await executeStored({ - stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_UPDATE", - args: { - NRN: formData.rn, - SCODE: formData.code, - SNAME: formData.name - } - }); - }, [formData.name, formData.code, formData.rn, executeStored]); - - //Удаление раздела - const deleteSections = useCallback(async () => { - await executeStored({ - stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTN_DELETE", - args: { - NRN: formData.rn - } - }); - }, [formData.rn, executeStored]); - - //Добавление показателя раздела - const addColumnRow = useCallback(async () => { - await executeStored({ - stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_INSERT", - args: { - NPRN: formData.prn, - SCODE: formData.code, - SNAME: formData.name, - SCOLCODE: formData.colCode, - SCOLVER: formData.colVCode, - SROWCODE: formData.rowCode, - SROWVER: formData.rowVCode - } - }); - }, [executeStored, formData.code, formData.colVCode, formData.colCode, formData.name, formData.prn, formData.rowCode, formData.rowVCode]); - - //Исправление показателя раздела - const editColumnRow = useCallback(async () => { - await executeStored({ - 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.RRPCONFSCTNMRK_DELETE", args: { NRN: formData.rn } }); - }, [executeStored, formData.rn]); - - //Получение мнемокода и наименования показателя раздела - const getSctnMrkCodeName = useCallback(async () => { - const data = await executeStored({ - stored: "PKG_P8PANELS_RRPCONFED.RRPCONFSCTNMRK_GET_CODE_NAME", - args: { SSCTNCODE: formData.sctnCode, SROWCODE: formData.rowCode, SCOLUMNCODE: formData.colCode } - }); - setFormData(pv => ({ - ...pv, - code: data.SCODE, - name: data.SNAME - })); - }, [executeStored, formData.colCode, formData.rowCode, formData.sctnCode]); - //Загрузка данных разделов регламентированного отчёта const loadData = useCallback(async () => { if (rrpDoc.reload) { @@ -296,7 +189,7 @@ const RrpConfEditor = () => { //Копирование массива уже загруженных разделов let cloneDGs = dataGrids.slice(); //Массив из нескольких разделов и из одного - const sections = data.SECTIONS.length ? data.SECTIONS : [data.SECTIONS]; + const sections = data.SECTIONS ? (data.SECTIONS.length ? data.SECTIONS : [data.SECTIONS]) : []; //Заполнение очередного раздела по шаблону sections.map(s => { let dg = {}; @@ -343,7 +236,9 @@ const RrpConfEditor = () => { //Устаревший раздел удаляем из массива данных dataGrids.splice(curIndex, 1); //Фокус на предшествующий раздел - tabFocus = curIndex - 1; + if (curIndex > 0) tabFocus = curIndex - 1; + //Иначе фокус на следующий, если был удалён первый раздел + else tabFocus = curIndex; }); setRrpDoc(pv => ({ ...pv, @@ -374,74 +269,74 @@ const RrpConfEditor = () => { loadData(); }, [rrpDoc.reload, dataGrid.reload, loadData]); - //Обновление при изменении разделов - useEffect(() => { - changeSections(); - }, [changeSections]); - - //Получение наименования и мнемокода показателя раздела при заполнении необходимых полей - useEffect(() => { - 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]); - - //При изменении фильтра в диалоге - const handleFilterOk = filter => { - setFormData(filter); - setForm(false); + const handleDialogReload = data => { + console.log(JSON.stringify(data)); + setRrpDoc(pv => ({ ...pv, reload: true })); }; - //При закрытии диалога фильтра - const handleFilterCancel = () => setForm(false); + //При закрытии диалога + const handleDialogClose = () => { + setForm(false); + clearFormData(); + }; //Генерация содержимого return ( - {formOpen ? : null} + {formOpen ? : null} {rrpDoc.docLoaded ? ( - - + + {rrpDoc.sections.map((s, i) => { return ( + {s.name} - editSectionClick(s.rn, s.code, s.name)}>edit - deleteSectionClick(s.rn, s.code, s.name)}>delete - + editSectionClick(s.rn, s.code, s.name)}> + edit + + deleteSectionClick(s.rn, s.code, s.name)}> + delete + + } wrapped /> ); })} - - add - + + + add + + {rrpDoc.sections.map((s, i) => { return ( - + {s.dataLoaded ? ( - - dataCellRender({ ...prms }, showRrpConfSctnMrk, editColumnRowClick, deleteColumnRowClick) - } - /> + + + dataCellRender({ ...prms }, showRrpConfSctnMrk, editRRPCONFSCTNMRKClick, deleteRRPCONFSCTNMRKClick) + } + /> + ) : null} ); diff --git a/app/panels/rrp_conf_editor/section_tab_panel.js b/app/panels/rrp_conf_editor/section_tab_panel.js index afb2332..4afb35d 100644 --- a/app/panels/rrp_conf_editor/section_tab_panel.js +++ b/app/panels/rrp_conf_editor/section_tab_panel.js @@ -19,10 +19,10 @@ const SectionTabPanel = props => { const { children, value, index, ...other } = props; return ( -