From faf1c9d6e769f04bf8b5fd6b8cef1e2f34b3233c Mon Sep 17 00:00:00 2001 From: davay-popozhe Date: Fri, 28 Jun 2024 17:53:04 +0300 Subject: [PATCH] =?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 => {