forked from CITKParus/P8-Panels
ЦИТК-823 ч.2
This commit is contained in:
parent
fb5c9b5370
commit
faf1c9d6e7
@ -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 <Button onClick={btnOkClick}>{btnText}</Button>;
|
||||
return <Button onClick={handleOK}>{btnText}</Button>;
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={formOpen} onClose={closeForm}>
|
||||
<Dialog open onClose={handleCancel}>
|
||||
<DialogTitle>{formTitle()}</DialogTitle>
|
||||
<IconButton
|
||||
aria-label="close"
|
||||
onClick={closeForm}
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: theme => theme.palette.grey[500]
|
||||
}}
|
||||
>
|
||||
<IconButton aria-label="close" onClick={handleCancel} sx={STYLES.CLOSE_BUTTON}>
|
||||
<Icon>close</Icon>
|
||||
</IconButton>
|
||||
<DialogContent>
|
||||
{curStatus == STATUSES.DELETE || curStatus == STATUSES.COLUMNROW_DELETE ? (
|
||||
curStatus == STATUSES.DELETE ? (
|
||||
<Typography>Вы хотите удалить раздел {curName}?</Typography>
|
||||
{formData.status == STATUSES.DELETE || formData.status == STATUSES.COLUMNROW_DELETE ? (
|
||||
formData.status == STATUSES.DELETE ? (
|
||||
<Typography>Вы хотите удалить раздел {formData.name}?</Typography>
|
||||
) : (
|
||||
<Typography>Вы хотите удалить показатель раздела {curName}?</Typography>
|
||||
<Typography>Вы хотите удалить показатель раздела {formData.name}?</Typography>
|
||||
)
|
||||
) : (
|
||||
<div>
|
||||
{curStatus != STATUSES.COLUMNROW_EDIT ? (
|
||||
<IUDFormTextField elementCode="code" elementValue={curCode} labelText="Мнемокод" changeFunc={codeOnChange} />
|
||||
{formData.status != STATUSES.COLUMNROW_EDIT ? (
|
||||
<IUDFormTextField elementCode="code" elementValue={formData.code} labelText="Мнемокод" onChange={handleOK} />
|
||||
) : null}
|
||||
<IUDFormTextField elementCode="name" elementValue={curName} labelText="Наименование" changeFunc={nameOnChange} />
|
||||
{curStatus == STATUSES.COLUMNROW_CREATE ? (
|
||||
<IUDFormTextField elementCode="name" elementValue={formData.name} labelText="Наименование" onChange={handleOK} />
|
||||
{formData.status == STATUSES.COLUMNROW_CREATE ? (
|
||||
<div>
|
||||
<IUDFormTextField
|
||||
elementCode="row"
|
||||
elementValue={curRowCode}
|
||||
elementValue={formData.rowCode}
|
||||
labelText="Строка"
|
||||
changeFunc={dictRowClick}
|
||||
withDictionary={true}
|
||||
onChange={handleOK}
|
||||
dictionary={callBack => selectRow(pOnlineShowDictionary, callBack)}
|
||||
/>
|
||||
<IUDFormTextField
|
||||
elementCode="column"
|
||||
elementValue={curColCode}
|
||||
elementValue={formData.colCode}
|
||||
labelText="Графа"
|
||||
changeFunc={dictColumnClick}
|
||||
withDictionary={true}
|
||||
onChange={handleOK}
|
||||
dictionary={callBack => selectColumn(pOnlineShowDictionary, callBack)}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
@ -127,7 +201,7 @@ const IUDFormDialog = props => {
|
||||
</DialogContent>
|
||||
<DialogActions sx={STYLES.PADDING_DIALOG_BUTTONS_RIGHT}>
|
||||
{renderSwitch()}
|
||||
<Button onClick={closeForm}>Отмена</Button>
|
||||
<Button onClick={handleCancel}>Отмена</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
@ -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
|
||||
};
|
||||
|
||||
//--------------------
|
||||
|
||||
@ -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 (
|
||||
<Box sx={{ p: 1 }}>
|
||||
<FormControl sx={STYLES.DIALOG_WINDOW_WIDTH} {...other}>
|
||||
<InputLabel htmlFor={elementId}>{labelText}</InputLabel>
|
||||
<InputLabel htmlFor={elementCode}>{labelText}</InputLabel>
|
||||
<Input
|
||||
id={elementId}
|
||||
value={elementValue ? elementValue : ""}
|
||||
onChange={!withDictionary ? e => changeFunc(e.target.value) : null}
|
||||
aria-describedby={`${elementCode}-helper-text`}
|
||||
label={labelText}
|
||||
id={elementCode}
|
||||
name={elementCode}
|
||||
value={value}
|
||||
endAdornment={
|
||||
withDictionary ? (
|
||||
dictionary ? (
|
||||
<InputAdornment position="end">
|
||||
<IconButton aria-label={`${elementCode} select`} onClick={changeFunc} edge="end">
|
||||
<IconButton aria-label={`${elementCode} select`} onClick={handleDictionaryClick} edge="end">
|
||||
<Icon>list</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
) : null
|
||||
}
|
||||
aria-describedby={`${elementCode}-helper-text`}
|
||||
label={labelText}
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</FormControl>
|
||||
</Box>
|
||||
@ -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
|
||||
};
|
||||
|
||||
//--------------------
|
||||
@ -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 = (
|
||||
<Stack direction="row">
|
||||
@ -41,10 +42,10 @@ export const dataCellRender = ({ row, columnDef }, showRrpConfSctnMrk, editCR, d
|
||||
>
|
||||
{row[columnDef.name]}
|
||||
</Link>
|
||||
<IconButton justifyContent="flex-end" onClick={() => editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
|
||||
<IconButton onClick={() => editCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
|
||||
<Icon>edit</Icon>
|
||||
</IconButton>
|
||||
<IconButton justifyContent="flex-end" onClick={() => deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
|
||||
<IconButton onClick={() => deleteCR(row["NRN_" + columnDef.name.substring(5)], row[columnDef.name])}>
|
||||
<Icon>delete</Icon>
|
||||
</IconButton>
|
||||
</Stack>
|
||||
|
||||
@ -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 (
|
||||
<Box sx={{ width: "100%" }}>
|
||||
{formOpen ? (
|
||||
<IUDFormDialog
|
||||
formOpen={formOpen}
|
||||
closeForm={closeForm}
|
||||
curStatus={formData.status}
|
||||
curCode={formData.code}
|
||||
curName={formData.name}
|
||||
curColCode={formData.colCode}
|
||||
curRowCode={formData.rowCode}
|
||||
btnOkClick={formBtnOkClick}
|
||||
codeOnChange={v => setFormData(pv => ({ ...pv, code: v }))}
|
||||
nameOnChange={v => setFormData(pv => ({ ...pv, name: v }))}
|
||||
dictColumnClick={dictColumnClick}
|
||||
dictRowClick={dictRowClick}
|
||||
/>
|
||||
) : null}
|
||||
{formOpen ? <IUDFormDialog initial={formData} onOk={handleFilterOk} onCancel={handleFilterCancel} /> : null}
|
||||
{rrpDoc.docLoaded ? (
|
||||
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
|
||||
<Stack direction="row">
|
||||
@ -445,12 +411,8 @@ const RrpConfEditor = () => {
|
||||
label={
|
||||
<Stack direction="row" textAlign="center">
|
||||
{s.name}
|
||||
<IconButton onClick={() => editSectionClick(s.rn, s.code, s.name)}>
|
||||
<Icon>edit</Icon>
|
||||
</IconButton>
|
||||
<IconButton onClick={() => deleteSectionClick(s.rn, s.code, s.name)}>
|
||||
<Icon>delete</Icon>
|
||||
</IconButton>
|
||||
<Icon onClick={() => editSectionClick(s.rn, s.code, s.name)}>edit</Icon>
|
||||
<Icon onClick={() => deleteSectionClick(s.rn, s.code, s.name)}>delete</Icon>
|
||||
</Stack>
|
||||
}
|
||||
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 =>
|
||||
|
||||
@ -22,7 +22,7 @@ const SectionTabPanel = props => {
|
||||
<div role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
|
||||
{value === index && (
|
||||
<Box sx={{ p: 3 }}>
|
||||
<Typography>{children}</Typography>
|
||||
<Typography component={"span"}>{children}</Typography>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user