ЦИТК-878 - Добавление панели "Доски задач" #37
316
app/panels/clnt_task_board/clnt_task_board.js
Normal file
316
app/panels/clnt_task_board/clnt_task_board.js
Normal file
@ -0,0 +1,316 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Панель мониторинга: Корневая панель доски задач
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react"; //Классы React
|
||||
import { DragDropContext, Droppable } from "react-beautiful-dnd"; //Работа с drag&drop
|
||||
import { Stack, Box, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { StatusCard } from "./components/status_card.js";
|
||||
import { TaskDialog } from "./task_dialog.js"; //Компонент формы события
|
||||
import { Filter } from "./filter.js"; //Компонент фильтров
|
||||
import { useExtraData, useColorRules, useStatuses } from "./hooks/hooks.js"; //Вспомогательные хуки
|
||||
import { useTasks } from "./hooks/tasks_hooks.js"; //Хук событий
|
||||
import { useFilters } from "./hooks/filter_hooks.js"; //Вспомогательные хуки фильтра
|
||||
import { NoteDialog } from "./components/note_dialog.js"; //Диалог примечания
|
||||
import { SettingsDialog } from "./components/settings_dialog.js"; //Диалог дополнительных настроек
|
||||
import { deepCopyObject } from "../../core/utils.js"; //Вспомогательные функции
|
||||
import { COMMON_STYLES } from "./styles"; //Общие стили
|
||||
import { APP_BAR_HEIGHT } from "../../components/p8p_app_workspace"; //Заголовок страницы
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Высота фильтра
|
||||
const FILTER_HEIGHT = "56px";
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { width: "100%", padding: 0 },
|
||||
BOX_FILTER: { display: "flex", alignItems: "center" },
|
||||
ICON_BUTTON_SETTINGS: { marginLeft: "auto" },
|
||||
STACK_STATUSES: { maxWidth: "99vw", paddingBottom: "5px", overflowX: "auto", ...COMMON_STYLES.SCROLL },
|
||||
BOX_STATUSES: { position: "fixed", left: "8px", top: `calc(${APP_BAR_HEIGHT} + ${FILTER_HEIGHT})` }
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Корневая панель доски задач
|
||||
const ClntTaskBoard = () => {
|
||||
//Состояние фильтров
|
||||
const [filters, handleFiltersChange] = useFilters();
|
||||
|
||||
//Состояние текущего загруженного фильтра
|
||||
const [filterTypeLoaded, setFilterTypeLoaded] = useState(filters.values.sType);
|
||||
|
||||
//Состояние вспомогательных диалогов
|
||||
const [dialogsState, setDialogsState] = useState({
|
||||
filterDialogIsOpen: filters.isSetByUser,
|
||||
settingsDialogIsOpen: false,
|
||||
noteDialog: { isOpen: false, callback: null },
|
||||
taskDialogIsOpen: false
|
||||
});
|
||||
|
||||
//Состояние сортировок
|
||||
const [orders, setOrders] = useState([]);
|
||||
|
||||
//Состояние дополнительных данных
|
||||
const [extraData, setExtraData, handleDocLinksLoad] = useExtraData(filters.values.sType);
|
||||
|
||||
//Состояние статусов событий
|
||||
const [statuses, statusesState, setStatuses, setStatusesState] = useStatuses(filters.values.sType);
|
||||
|
||||
//Состояние пользовательских настроек заливки событий
|
||||
const [colorRules, setColorRules] = useColorRules();
|
||||
|
||||
//Состояние событий
|
||||
const [tasks, setTasks, onDragEnd] = useTasks(filters.values, orders);
|
||||
|
||||
//Состояние доступных маршрутов события
|
||||
const [availableRoutes, setAvailableRoutes] = useState({ source: "", routes: [] });
|
||||
|
||||
//Состояние перетаскиваемого события
|
||||
const [dragItem, setDragItem] = useState({ type: "", status: "" });
|
||||
|
||||
//При открытии/закрытии диалога фильтра
|
||||
const handleFilterOpen = isOpen => {
|
||||
setDialogsState(pv => ({ ...pv, filterDialogIsOpen: isOpen }));
|
||||
};
|
||||
|
||||
//При открытии/закрытии диалога дополнительных настроек
|
||||
const handleSettingsOpen = () => setDialogsState(pv => ({ ...pv, settingsDialogIsOpen: !pv.settingsDialogIsOpen }));
|
||||
|
||||
//При открытии/закрытии диалога примечания
|
||||
const handleNoteOpen = (cb = null) => {
|
||||
setDialogsState(pv => ({ ...pv, noteDialog: { isOpen: !dialogsState.noteDialog.isOpen, callback: cb ? v => cb(v) : null } }));
|
||||
};
|
||||
|
||||
//При открытии/закрытии диалога события
|
||||
const handleTaskDialogOpen = () => setDialogsState(pv => ({ ...pv, taskDialogIsOpen: !dialogsState.taskDialogIsOpen }));
|
||||
|
||||
//При необходимости обновить дополнительные данные
|
||||
const handleExtraDataReload = useCallback(() => {
|
||||
setExtraData(pv => ({ ...pv, reload: true }));
|
||||
}, [setExtraData]);
|
||||
|
||||
//При необходимости обновить информацию о событиях
|
||||
const handleTasksReload = useCallback(
|
||||
(bAccountsReload = true) => {
|
||||
setTasks(pv => ({ ...pv, reload: true, accountsReload: bAccountsReload }));
|
||||
},
|
||||
[setTasks]
|
||||
);
|
||||
|
||||
//При необходимости обновить состояние статусов
|
||||
const handleStatusesStateReload = useCallback(() => {
|
||||
setStatusesState(pv => ({ ...pv, reload: true, sorted: false }));
|
||||
}, [setStatusesState]);
|
||||
|
||||
//При изменении дополнительных настроек
|
||||
const handleSettingsChange = (newSettings, statusesState) => {
|
||||
setColorRules(pv => ({ ...pv, selectedColorRule: newSettings.selectedColorRule }));
|
||||
setStatusesState({ ...statusesState, sorted: false });
|
||||
};
|
||||
|
||||
//При изменении цвета карточки статуса
|
||||
const handleSettingStatusColorChange = (changedStatus, newColor) => {
|
||||
//Считываем массив статусов
|
||||
let newStatuses = [...statuses];
|
||||
//Изменяем цвет нужного статуса
|
||||
newStatuses.find(status => status.ID === changedStatus.ID).color = newColor;
|
||||
//Обновляем состояние
|
||||
setStatuses([...newStatuses]);
|
||||
};
|
||||
|
||||
//При изменении сортировки
|
||||
const handleOrderChanged = columnName => {
|
||||
//Копируем состояние сортировки
|
||||
let newOrders = deepCopyObject(orders);
|
||||
//Находим сортируемую колонку
|
||||
const orderedColumn = newOrders.find(o => o.name == columnName);
|
||||
//Определяем направление сортировки
|
||||
const newDirection = orderedColumn?.direction == "ASC" ? "DESC" : orderedColumn?.direction == "DESC" ? null : "ASC";
|
||||
//Если сортировка отключается - очищаем информацию о сортировке
|
||||
if (newDirection == null && orderedColumn) newOrders.splice(newOrders.indexOf(orderedColumn), 1);
|
||||
//Если сортировки не было - устанавливаем
|
||||
if (newDirection != null && !orderedColumn) newOrders.push({ name: columnName, direction: newDirection });
|
||||
//Если сортировка была и не отключается - изменяем
|
||||
if (newDirection != null && orderedColumn) orderedColumn.direction = newDirection;
|
||||
//Устанавливаем новую сортировку
|
||||
setOrders(newOrders);
|
||||
};
|
||||
|
||||
//При необходимости очистки доступных маршрутов события
|
||||
const handleAvailableRoutesStateClear = () => {
|
||||
setAvailableRoutes({ source: "", routes: [] });
|
||||
};
|
||||
|
||||
//Обработка захвата перетаскиваемого объекта
|
||||
const handleDragItemChange = (filtersType, statusCode) =>
|
||||
setDragItem({
|
||||
type: filtersType,
|
||||
status: statusCode
|
||||
});
|
||||
|
||||
//Обработка очистки перетаскиваемого объекта
|
||||
const handleDragItemClear = () => {
|
||||
setDragItem({ type: "", status: "" });
|
||||
};
|
||||
|
||||
//Проверка доступности карточки события
|
||||
const isCardAvailable = code => {
|
||||
return availableRoutes.source === code || availableRoutes.routes.find(r => r.SDESTINATION === code) || !availableRoutes.source ? true : false;
|
||||
};
|
||||
|
||||
//При изменении фильтра
|
||||
useEffect(() => {
|
||||
//Если изменился тип
|
||||
if (filters.loaded && filters.values.sType) {
|
||||
//Если тип события изменился
|
||||
if (filterTypeLoaded !== filters.values.sType) {
|
||||
//Обновляем информацию о дополнительных данных
|
||||
handleExtraDataReload();
|
||||
//Обновляем информацию о статусах
|
||||
handleStatusesStateReload();
|
||||
//Обновляем текущий загруженный тип события
|
||||
setFilterTypeLoaded(filters.values.sType);
|
||||
}
|
||||
//Обновляем информацию о событиях
|
||||
handleTasksReload();
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [filters.loaded, filters.values]);
|
||||
|
||||
//При изменении сортировки
|
||||
useEffect(() => {
|
||||
//Если есть все данные для загрузки событий
|
||||
if (filters.loaded && filters.values.sType) {
|
||||
//Обновляем информацию о событиях без обновления контрагентов
|
||||
handleTasksReload(false);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [orders]);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box sx={STYLES.CONTAINER}>
|
||||
{dialogsState.settingsDialogIsOpen ? (
|
||||
<SettingsDialog
|
||||
initial={{ colorRules: colorRules, statusesState: statusesState }}
|
||||
onSettingsChange={handleSettingsChange}
|
||||
onClose={handleSettingsOpen}
|
||||
/>
|
||||
) : null}
|
||||
{dialogsState.taskDialogIsOpen ? (
|
||||
<TaskDialog
|
||||
taskType={dragItem.type}
|
||||
taskStatus={dragItem.status}
|
||||
onTasksReload={() => handleTasksReload(true)}
|
||||
onClose={() => {
|
||||
handleTaskDialogOpen();
|
||||
handleDragItemClear();
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<Box sx={STYLES.BOX_FILTER}>
|
||||
<Stack direction="row">
|
||||
<Filter
|
||||
isFilterDialogOpen={dialogsState.filterDialogIsOpen}
|
||||
filter={filters.values}
|
||||
docLinks={extraData.docLinks}
|
||||
selectedDocLink={filters.values.sDocLink ? extraData.docLinks.find(d => d.NRN === filters.values.sDocLink) : null}
|
||||
onFilterChange={handleFiltersChange}
|
||||
onDocLinksLoad={handleDocLinksLoad}
|
||||
onFilterOpen={() => handleFilterOpen(true)}
|
||||
onFilterClose={() => handleFilterOpen(false)}
|
||||
onTasksReload={handleTasksReload}
|
||||
orders={orders}
|
||||
onOrderChanged={handleOrderChanged}
|
||||
/>
|
||||
</Stack>
|
||||
<IconButton title="Настройки" onClick={handleSettingsOpen} sx={STYLES.ICON_BUTTON_SETTINGS}>
|
||||
<Icon>settings</Icon>
|
||||
</IconButton>
|
||||
</Box>
|
||||
{dialogsState.noteDialog.isOpen ? (
|
||||
<NoteDialog noteTypes={extraData.noteTypes} onCallback={note => dialogsState.noteDialog.callback(note)} onClose={handleNoteOpen} />
|
||||
) : null}
|
||||
{filters.loaded && filters.values.sType && extraData.dataLoaded && tasks.loaded ? (
|
||||
<DragDropContext
|
||||
onDragStart={path => {
|
||||
//Поиск кода текущего статуса задачи
|
||||
let sourceCode = statuses.find(status => status.ID == path.source.droppableId).SEVNSTAT_CODE;
|
||||
//Устанавливаем доступные маршруты события
|
||||
setAvailableRoutes({ source: sourceCode, routes: [...extraData.evRoutes.filter(route => route.SSOURCE === sourceCode)] });
|
||||
}}
|
||||
onDragEnd={path => {
|
||||
//Если есть статус назначения
|
||||
if (path.destination) {
|
||||
//Определяем мнемокод статуса назначения
|
||||
let destCode = statuses.find(status => status.ID == path.destination.droppableId).SEVNSTAT_CODE;
|
||||
//Переносим событие
|
||||
onDragEnd({ path: path, eventPoints: extraData.evPoints, openNoteDialog: handleNoteOpen, destCode: destCode });
|
||||
}
|
||||
//Очищаем информацию о доступных маршрутах события
|
||||
handleAvailableRoutesStateClear();
|
||||
}}
|
||||
>
|
||||
<Box sx={STYLES.BOX_STATUSES}>
|
||||
<Droppable droppableId="Statuses" type="droppableTask">
|
||||
{provided => (
|
||||
<div ref={provided.innerRef}>
|
||||
<Stack direction="row" spacing={2} sx={STYLES.STACK_STATUSES}>
|
||||
{statusesState.sorted
|
||||
? statuses.map((status, index) => (
|
||||
<div key={index}>
|
||||
<Droppable
|
||||
isDropDisabled={!isCardAvailable(status.SEVNSTAT_CODE)}
|
||||
droppableId={status.ID.toString()}
|
||||
>
|
||||
{provided => (
|
||||
<div ref={provided.innerRef}>
|
||||
<StatusCard
|
||||
tasks={tasks}
|
||||
status={status}
|
||||
statusTitle={status[statusesState.attr] || status.SEVNSTAT_NAME}
|
||||
colorRules={colorRules}
|
||||
extraData={extraData}
|
||||
filtersType={filters.values.sType}
|
||||
isCardAvailable={isCardAvailable}
|
||||
onTasksReload={handleTasksReload}
|
||||
onDragItemChange={handleDragItemChange}
|
||||
onTaskDialogOpen={handleTaskDialogOpen}
|
||||
onNoteDialogOpen={handleNoteOpen}
|
||||
onStatusColorChange={handleSettingStatusColorChange}
|
||||
placeholder={provided.placeholder}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</div>
|
||||
))
|
||||
: null}
|
||||
</Stack>
|
||||
{provided.placeholder}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</Box>
|
||||
</DragDropContext>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { ClntTaskBoard };
|
||||
174
app/panels/clnt_task_board/components/custom_input_field.js
Normal file
174
app/panels/clnt_task_board/components/custom_input_field.js
Normal file
@ -0,0 +1,174 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Кастомное поле ввода
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useEffect, useState } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { FormControl, InputLabel, Input, InputAdornment, IconButton, Icon, FormHelperText, Select, MenuItem, Typography } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
HELPER_TEXT: { color: "red" },
|
||||
SELECT_MENU: width => {
|
||||
return { ...COMMON_STYLES.SCROLL, width: width ? width + 24 : null };
|
||||
}
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Кастомное поле ввода
|
||||
const CustomInputField = ({
|
||||
elementCode,
|
||||
elementValue,
|
||||
labelText,
|
||||
onChange,
|
||||
required = false,
|
||||
items = null,
|
||||
emptyItem = null,
|
||||
dictionary,
|
||||
menuItemRender,
|
||||
...other
|
||||
}) => {
|
||||
//Значение элемента
|
||||
const [value, setValue] = useState(elementValue);
|
||||
|
||||
//Состояние элемента HTML (для оптимизации ширины MenuItems)
|
||||
const [anchorEl, setAnchorEl] = useState();
|
||||
|
||||
//При открытии меню заливки событий
|
||||
const handleMenuOpen = e => {
|
||||
//Устанавливаем элемент меню
|
||||
setAnchorEl(e.target);
|
||||
};
|
||||
|
||||
//При получении нового значения из вне
|
||||
useEffect(() => {
|
||||
setValue(elementValue);
|
||||
}, [elementValue]);
|
||||
|
||||
//Изменение значения элемента
|
||||
const handleChange = e => {
|
||||
setValue(e.target.value);
|
||||
if (onChange) onChange(e.target.name, e.target.value);
|
||||
};
|
||||
|
||||
//Выбор значения из словаря
|
||||
const handleDictionaryClick = () => {
|
||||
dictionary ? dictionary(res => (res ? handleChange({ target: { name: elementCode, value: res } }) : null)) : null;
|
||||
};
|
||||
|
||||
//Генерация поля с выбором из словаря Парус
|
||||
const renderInput = validationError => {
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Input
|
||||
error={validationError}
|
||||
id={elementCode}
|
||||
name={elementCode}
|
||||
value={value}
|
||||
endAdornment={
|
||||
dictionary ? (
|
||||
<InputAdornment position="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}
|
||||
{...other}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
//Генерация поля с выпадающим списком
|
||||
const renderSelect = (items, anchorEl, handleMenuOpen, validationError) => {
|
||||
//Формируем общий список элементов меню
|
||||
const menuItems = emptyItem ? [emptyItem, ...items] : [...items];
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Select
|
||||
error={validationError}
|
||||
id={elementCode}
|
||||
name={elementCode}
|
||||
//!!!Пересмотреть момент. При изменении типа происходит ререндер со старым значением учетного документа:
|
||||
//1. Изменяется тип
|
||||
//2. Очищается items (список учетных документов)
|
||||
//3. Рисуется компонент со старым value и пустым items, из-за чего ошибка "You have provided an out-of-range value"
|
||||
//4. Вызывается useEffect, меняется значение value на новое (пустое значение)
|
||||
value={value}
|
||||
aria-describedby={`${elementCode}-helper-text`}
|
||||
label={labelText}
|
||||
MenuProps={{ slotProps: { paper: { sx: STYLES.SELECT_MENU(anchorEl?.offsetWidth) } } }}
|
||||
onChange={handleChange}
|
||||
onOpen={handleMenuOpen}
|
||||
{...other}
|
||||
>
|
||||
{menuItems
|
||||
? menuItems.map((item, index) => {
|
||||
let customRender = null;
|
||||
if (menuItemRender) customRender = menuItemRender({ item: item, key: item?.key ?? index }) || null;
|
||||
return customRender ? (
|
||||
customRender
|
||||
) : (
|
||||
<MenuItem key={item?.key ?? index} value={item.id}>
|
||||
<Typography variant="inherit" noWrap title={item.caption} component="div">
|
||||
{item.caption}
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
);
|
||||
})
|
||||
: null}
|
||||
</Select>
|
||||
);
|
||||
};
|
||||
|
||||
//Признак ошибки валидации
|
||||
const validationError = !value && required ? true : false;
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<FormControl fullWidth variant="standard">
|
||||
<InputLabel htmlFor={elementCode}>{labelText}</InputLabel>
|
||||
{items ? renderSelect(items, anchorEl, handleMenuOpen, validationError) : renderInput(validationError)}
|
||||
{validationError ? (
|
||||
<FormHelperText id={`${elementCode}-helper-text`} sx={STYLES.HELPER_TEXT}>
|
||||
*Обязательное поле
|
||||
</FormHelperText>
|
||||
) : null}
|
||||
</FormControl>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Кастомное поле ввода
|
||||
CustomInputField.propTypes = {
|
||||
elementCode: PropTypes.string.isRequired,
|
||||
elementValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||||
labelText: PropTypes.string.isRequired,
|
||||
required: PropTypes.bool,
|
||||
items: PropTypes.arrayOf(PropTypes.object),
|
||||
emptyItem: PropTypes.object,
|
||||
dictionary: PropTypes.func,
|
||||
onChange: PropTypes.func,
|
||||
menuItemRender: PropTypes.func
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { CustomInputField };
|
||||
336
app/panels/clnt_task_board/components/filter_dialog.js
Normal file
336
app/panels/clnt_task_board/components/filter_dialog.js
Normal file
@ -0,0 +1,336 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Диалог фильтра отбора
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext, useEffect, useCallback } from "react"; //Классы React
|
||||
import { BackEndСtx } from "../../../context/backend"; //Контекст взаимодействия с сервером
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import {
|
||||
Dialog,
|
||||
DialogTitle,
|
||||
IconButton,
|
||||
Icon,
|
||||
DialogContent,
|
||||
DialogActions,
|
||||
Button,
|
||||
Box,
|
||||
Stack,
|
||||
Checkbox,
|
||||
FormControlLabel,
|
||||
Radio,
|
||||
RadioGroup
|
||||
} from "@mui/material"; //Интерфейсные компоненты
|
||||
import { CustomInputField } from "./custom_input_field"; //Кастомное поле ввода
|
||||
import { hasValue } from "../../../core/utils"; //Вспомогательные функции
|
||||
import { EVENT_STATES } from "../layouts"; //Перечисление состояний события
|
||||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||||
import { useDictionary } from "../hooks/dict_hooks"; //Состояние открытия разделов
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
SELECT: { width: "450px" }
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Диалог фильтра отбора
|
||||
const FilterDialog = ({ initial, onFilterChange, onFilterClose, onDocLinksLoad }) => {
|
||||
//Собственное состояние
|
||||
const [filter, setFilter] = useState(initial.filter);
|
||||
|
||||
//Состояние текущих учётных документов
|
||||
const [curDocLinks, setCurDocLinks] = useState({ loaded: true, docLinks: initial.docLinks });
|
||||
|
||||
//Вспомогательные функции открытия раздела
|
||||
const { handleCatalogTreeOpen, handleEventTypesOpen, handleAgnlistOpen, handleInsDepartmentOpen, handleCostStaffGroupsOpen } = useDictionary();
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//При изменении типа события фильтра
|
||||
const handleTypeChange = callBack =>
|
||||
handleEventTypesOpen({
|
||||
sCode: filter.sType,
|
||||
callBack: res => {
|
||||
callBack(res.outParameters.eventtypecode);
|
||||
}
|
||||
});
|
||||
|
||||
//При изменении каталога фильтра
|
||||
const handleCrnChange = callBack =>
|
||||
handleCatalogTreeOpen({
|
||||
sUnitName: "ClientEvents",
|
||||
sName: filter.sCrnName,
|
||||
callBack: res => {
|
||||
callBack(res.outParameters.out_NAME);
|
||||
}
|
||||
});
|
||||
|
||||
//При изменении исполнителя фильтра
|
||||
const handleSendPersonChange = callBack =>
|
||||
handleAgnlistOpen({
|
||||
sMnemo: filter.sSendPerson,
|
||||
callBack: res => {
|
||||
callBack(res.outParameters.agnmnemo);
|
||||
}
|
||||
});
|
||||
|
||||
//При изменении подразделения фильтра
|
||||
const handleSendDivisionChange = callBack =>
|
||||
handleInsDepartmentOpen({
|
||||
sCode: filter.sSendDivision,
|
||||
callBack: res => {
|
||||
callBack(res.outParameters.out_CODE);
|
||||
}
|
||||
});
|
||||
|
||||
//При изменении группы пользователей фильтра
|
||||
const handleSendUsrGrpChange = callBack =>
|
||||
handleCostStaffGroupsOpen({
|
||||
sCode: filter.sSendUsrGrp,
|
||||
callBack: res => {
|
||||
callBack(res.outParameters.out_CODE);
|
||||
}
|
||||
});
|
||||
|
||||
//Считывание подкаталогов
|
||||
const getSubCatalogs = useCallback(async () => {
|
||||
//Считываем каталоги
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_SUBCATALOGS_GET",
|
||||
args: {
|
||||
SCRN_NAME: filter.sCrnName,
|
||||
NSUBCAT: filter.bSubcatalogs ? 1 : 0
|
||||
}
|
||||
});
|
||||
//Возвращаем список каталогов
|
||||
return data.SRESULT;
|
||||
}, [executeStored, filter.sCrnName, filter.bSubcatalogs]);
|
||||
|
||||
//При закрытии диалога с изменением фильтра
|
||||
const handleDialogOk = async () => {
|
||||
//Если указано имя каталога, но не загружен список рег. номеров
|
||||
if (filter.sCrnName && !filter.sCrnRnList) {
|
||||
//Загружаем список рег. номеров каталогов
|
||||
const crns = await getSubCatalogs();
|
||||
//Устанавливаем новый фильтр
|
||||
onFilterChange({ ...filter, ...(crns ? { sCrnRnList: crns } : {}) });
|
||||
//Закрываем диалог фильтра
|
||||
onFilterClose();
|
||||
} else {
|
||||
//Устанавливаем новый фильтр
|
||||
onFilterChange(filter);
|
||||
//Закрываем диалог фильтра
|
||||
onFilterClose();
|
||||
}
|
||||
};
|
||||
|
||||
//При очистке фильтра
|
||||
const handleFilterClear = () => {
|
||||
setFilter({
|
||||
sState: EVENT_STATES[1],
|
||||
sType: "",
|
||||
sCrnName: "",
|
||||
sCrnRnList: "",
|
||||
bSubcatalogs: false,
|
||||
sSendPerson: "",
|
||||
sSendDivision: "",
|
||||
sSendUsrGrp: "",
|
||||
sDocLink: ""
|
||||
});
|
||||
};
|
||||
|
||||
//При изменении значения элемента
|
||||
const handleFilterItemChange = (item, value) => {
|
||||
//Если это изменение типа
|
||||
if (item === "sType") {
|
||||
//Указываем тип с очисткой информации об учетных документах
|
||||
setFilter(pv => ({ ...pv, [item]: value, sDocLink: "" }));
|
||||
setCurDocLinks(pv => ({ ...pv, loaded: false, docLinks: [] }));
|
||||
} else {
|
||||
//Обновляем значение поля
|
||||
setFilter(pv => ({ ...pv, [item]: value }));
|
||||
}
|
||||
};
|
||||
|
||||
//При очистке учётного документа
|
||||
const handleDocLinkClear = () => setFilter(pv => ({ ...pv, sDocLink: "" }));
|
||||
|
||||
//Обработка изменений с каталогами
|
||||
useEffect(() => {
|
||||
//Если каталог не указан, но галка подкаталогов установлена - снимаем её
|
||||
if (!filter.sCrnName && filter.bSubcatalogs) setFilter(pv => ({ ...pv, bSubcatalogs: false }));
|
||||
//Если изменился каталог и остался список рег. номеров каталогов - очищаем его
|
||||
if (filter.sCrnName !== initial.sCrnName && filter.sCrnRnList) setFilter(pv => ({ ...pv, sCrnRnList: "" }));
|
||||
//Если каталог равен изначальному
|
||||
if (filter.sCrnName === initial.sCrnName) {
|
||||
//Если признак подкаталогов равен изначальному, но список рег. номеров каталогов не соответствует - загружаем изначальный
|
||||
if (filter.bSubcatalogs === initial.bSubcatalogs && filter.sCrnRnList !== initial.sCrnRnList) {
|
||||
setFilter(pv => ({ ...pv, sCrnRnList: initial.sCrnRnList }));
|
||||
}
|
||||
//Если признак подкаталогов не равен изначальному
|
||||
if (filter.bSubcatalogs !== initial.bSubcatalogs) {
|
||||
//Если не установлен - считываем первый из списка рег. номеров изначальных каталогов
|
||||
if (!filter.bSubcatalogs) {
|
||||
setFilter(pv => ({
|
||||
...pv,
|
||||
sCrnRnList: initial.sCrnRnList.split(";")[0]
|
||||
}));
|
||||
} else {
|
||||
//Если установлен - очищаем список рег. номеров каталогов для последующей загрузки
|
||||
setFilter(pv => ({ ...pv, sCrnRnList: "" }));
|
||||
}
|
||||
}
|
||||
}
|
||||
}, [filter.sCrnName, filter.sCrnRnList, filter.bSubcatalogs, initial.sCrnName, initial.sCrnRnList, initial.bSubcatalogs]);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<Dialog open onClose={onFilterClose} fullWidth maxWidth="sm">
|
||||
<DialogTitle>Фильтр отбора</DialogTitle>
|
||||
<IconButton aria-label="close" onClick={onFilterClose} sx={COMMON_STYLES.DIALOG_CLOSE_BUTTON}>
|
||||
<Icon>close</Icon>
|
||||
</IconButton>
|
||||
<DialogContent sx={COMMON_STYLES.SCROLL}>
|
||||
<Box sx={COMMON_STYLES.BOX_WITH_LEGEND} component="fieldset">
|
||||
<legend style={COMMON_STYLES.LEGEND}>Состояние</legend>
|
||||
<RadioGroup
|
||||
row
|
||||
aria-labelledby="sState-label"
|
||||
id="sState"
|
||||
name="sState"
|
||||
value={filter.sState}
|
||||
onChange={e => handleFilterItemChange(e.target.name, e.target.value)}
|
||||
>
|
||||
{Object.keys(EVENT_STATES).map(function (k) {
|
||||
return <FormControlLabel key={k} value={EVENT_STATES[k]} control={<Radio />} label={EVENT_STATES[k]} />;
|
||||
})}
|
||||
</RadioGroup>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<CustomInputField
|
||||
elementCode="sType"
|
||||
elementValue={filter.sType}
|
||||
labelText="Тип"
|
||||
dictionary={callBack => handleTypeChange(callBack)}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<CustomInputField
|
||||
elementCode="sCrnName"
|
||||
elementValue={filter.sCrnName}
|
||||
labelText="Каталог"
|
||||
dictionary={callBack => handleCrnChange(callBack)}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
<FormControlLabel
|
||||
control={
|
||||
<Checkbox
|
||||
id="bSubcatalogs"
|
||||
name="bSubcatalogs"
|
||||
checked={filter.bSubcatalogs}
|
||||
disabled={filter.sCrnName ? false : true}
|
||||
onChange={e => handleFilterItemChange(e.target.name, e.target.checked)}
|
||||
/>
|
||||
}
|
||||
label="Включая подкаталоги"
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<CustomInputField
|
||||
elementCode="sSendPerson"
|
||||
elementValue={filter.sSendPerson}
|
||||
labelText="Исполнитель"
|
||||
dictionary={callBack => handleSendPersonChange(callBack)}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<CustomInputField
|
||||
elementCode="sSendDivision"
|
||||
elementValue={filter.sSendDivision}
|
||||
labelText="Подразделение"
|
||||
dictionary={callBack => handleSendDivisionChange(callBack)}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<CustomInputField
|
||||
elementCode="sSendUsrGrp"
|
||||
elementValue={filter.sSendUsrGrp}
|
||||
labelText="Группа пользователей"
|
||||
dictionary={callBack => handleSendUsrGrpChange(callBack)}
|
||||
onChange={handleFilterItemChange}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<Stack direction="row" sx={COMMON_STYLES.STACK_DOCLINKS}>
|
||||
<CustomInputField
|
||||
elementCode="sDocLink"
|
||||
elementValue={filter.sDocLink}
|
||||
labelText="Учётный документ"
|
||||
items={[...(curDocLinks.docLinks || [])].reduce((prev, cur) => [...prev, { id: cur.NRN, caption: cur.SDESCR }], [])}
|
||||
disabled={!curDocLinks.docLinks.length ? true : false}
|
||||
onChange={handleFilterItemChange}
|
||||
sx={STYLES.SELECT}
|
||||
/>
|
||||
<IconButton title="Очистить" disabled={!filter.sDocLink} onClick={handleDocLinkClear}>
|
||||
<Icon>clear</Icon>
|
||||
</IconButton>
|
||||
<IconButton
|
||||
title="Обновить"
|
||||
disabled={curDocLinks.loaded}
|
||||
onClick={() => {
|
||||
//Очищаем учетный документ
|
||||
handleDocLinkClear();
|
||||
//Загружаем учетные документы типа
|
||||
onDocLinksLoad(filter.sType).then(dl => setCurDocLinks(pv => ({ ...pv, loaded: true, docLinks: dl })));
|
||||
}}
|
||||
>
|
||||
<Icon>refresh</Icon>
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
|
||||
<Button disabled={!hasValue(filter.sType)} variant="text" onClick={handleDialogOk}>
|
||||
ОК
|
||||
</Button>
|
||||
<Button variant="text" onClick={handleFilterClear}>
|
||||
Очистить
|
||||
</Button>
|
||||
<Button variant="text" onClick={onFilterClose}>
|
||||
Отмена
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Диалог фильтра отбора
|
||||
FilterDialog.propTypes = {
|
||||
initial: PropTypes.object.isRequired,
|
||||
onFilterChange: PropTypes.func.isRequired,
|
||||
onFilterClose: PropTypes.func.isRequired,
|
||||
onDocLinksLoad: PropTypes.func
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { FilterDialog };
|
||||
99
app/panels/clnt_task_board/components/note_dialog.js
Normal file
99
app/panels/clnt_task_board/components/note_dialog.js
Normal file
@ -0,0 +1,99 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Диалог примечания
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, TextField } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { CustomInputField } from "./custom_input_field.js"; //Кастомное поле ввода
|
||||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
DIALOG_CONTENT: { paddingTop: 0, paddingBottom: 0 }
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Диалог примечания
|
||||
const NoteDialog = ({ noteTypes, onCallback, onClose }) => {
|
||||
//Собственное состояние
|
||||
const [note, setNote] = useState({ noteTypeIndex: 0, text: "" });
|
||||
|
||||
//При изменении примечания
|
||||
const handleNoteChange = value => setNote(pv => ({ ...pv, text: value }));
|
||||
|
||||
//При изменении заголовка примечания
|
||||
const handleNoteHeaderChange = (name, value) => {
|
||||
setNote(pv => ({ ...pv, noteTypeIndex: value }));
|
||||
};
|
||||
|
||||
//При закрытии диалога с изменением примечания
|
||||
const handleDialogOk = () => {
|
||||
//Передаем информацию о примечание в callback
|
||||
onCallback({ header: noteTypes[note.noteTypeIndex], text: note.text });
|
||||
onClose();
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Dialog open onClose={onClose} fullWidth maxWidth="sm">
|
||||
<DialogTitle>Примечание</DialogTitle>
|
||||
<IconButton aria-label="close" onClick={onClose} sx={COMMON_STYLES.DIALOG_CLOSE_BUTTON}>
|
||||
<Icon>close</Icon>
|
||||
</IconButton>
|
||||
<DialogContent sx={STYLES.DIALOG_CONTENT}>
|
||||
<CustomInputField
|
||||
elementCode="noteHeader"
|
||||
elementValue={note.noteTypeIndex}
|
||||
labelText="Заголовок примечания"
|
||||
items={noteTypes.reduce((prev, cur) => [...prev, { id: prev.length, caption: cur }], [])}
|
||||
onChange={handleNoteHeaderChange}
|
||||
margin="dense"
|
||||
/>
|
||||
<TextField
|
||||
id="note"
|
||||
label="Описание"
|
||||
variant="standard"
|
||||
fullWidth
|
||||
required
|
||||
multiline
|
||||
minRows={7}
|
||||
maxRows={7}
|
||||
value={note.text}
|
||||
margin="normal"
|
||||
inputProps={{ sx: COMMON_STYLES.SCROLL }}
|
||||
onChange={e => handleNoteChange(e.target.value)}
|
||||
/>
|
||||
</DialogContent>
|
||||
<DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
|
||||
<Button disabled={!note.text} variant="text" onClick={handleDialogOk}>
|
||||
ОК
|
||||
</Button>
|
||||
<Button variant="text" onClick={onClose}>
|
||||
Отмена
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Диалог примечания
|
||||
NoteDialog.propTypes = {
|
||||
noteTypes: PropTypes.array,
|
||||
onCallback: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { NoteDialog };
|
||||
131
app/panels/clnt_task_board/components/settings_dialog.js
Normal file
131
app/panels/clnt_task_board/components/settings_dialog.js
Normal file
@ -0,0 +1,131 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Диалог дополнительных настроек
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Dialog, DialogTitle, DialogContent, DialogActions, IconButton, Icon, Button, Box, Stack } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { CustomInputField } from "./custom_input_field.js"; //Кастомное поле ввода
|
||||
import { sortAttrs, sortDest } from "../layouts.js"; //Допустимые значение поля и направления сортировки
|
||||
import { hasValue } from "../../../core/utils.js"; //Проверка наличия значения
|
||||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
SELECT: { width: "100%" }
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Диалог дополнительных настроек
|
||||
const SettingsDialog = ({ initial, onSettingsChange, onClose, ...other }) => {
|
||||
//Состояние дополнительных настроек
|
||||
const [colorRules, seColorRules] = useState(initial.colorRules);
|
||||
|
||||
//Состояние статусов
|
||||
const [statusesState, setStatusesState] = useState(initial.statusesState);
|
||||
|
||||
//Изменение поля сортировки
|
||||
const handleSortAttrChange = (item, value) => setStatusesState(pv => ({ ...pv, [item]: value }));
|
||||
|
||||
//Изменение направления сортировки
|
||||
const handleSortDestChange = newDirection => setStatusesState(pv => ({ ...pv, direction: newDirection }));
|
||||
|
||||
//При изменении правила заливки событий
|
||||
const handleColorRuleChange = (item, value) => {
|
||||
//Определяем новое правило заливки
|
||||
let newColorRule = colorRules.rules[value];
|
||||
//Обновляем в основных настройках
|
||||
seColorRules(pv => ({ ...pv, selectedColorRule: newColorRule ? newColorRule : {} }));
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div {...other}>
|
||||
<Dialog open onClose={onClose} fullWidth maxWidth="sm">
|
||||
<DialogTitle>Настройки</DialogTitle>
|
||||
<IconButton aria-label="close" onClick={onClose} sx={COMMON_STYLES.DIALOG_CLOSE_BUTTON}>
|
||||
<Icon>close</Icon>
|
||||
</IconButton>
|
||||
<DialogContent sx={COMMON_STYLES.SCROLL}>
|
||||
<Box component="section" p={1}>
|
||||
<CustomInputField
|
||||
elementCode="clrRules"
|
||||
elementValue={hasValue(colorRules.selectedColorRule.id) && colorRules.length !== 0 ? colorRules.selectedColorRule.id : -1}
|
||||
labelText="Заливка событий"
|
||||
items={colorRules.rules.reduce((prev, cur) => [...prev, { id: cur.id, caption: cur.SDP_NAME }], [])}
|
||||
emptyItem={{ key: -1, id: -1, caption: "-" }}
|
||||
onChange={handleColorRuleChange}
|
||||
sx={STYLES.SELECT}
|
||||
/>
|
||||
</Box>
|
||||
<Box component="section" p={1}>
|
||||
<Stack direction="row" sx={COMMON_STYLES.STACK_DOCLINKS}>
|
||||
<CustomInputField
|
||||
elementCode="attr"
|
||||
elementValue={statusesState.attr}
|
||||
labelText="Поле сортировки"
|
||||
items={sortAttrs.reduce((prev, cur) => [...prev, { id: cur.id, caption: cur.descr }], [])}
|
||||
onChange={handleSortAttrChange}
|
||||
sx={STYLES.SELECT}
|
||||
/>
|
||||
<IconButton
|
||||
title={statusesState.direction === "asc" ? "По возрастанию" : "По убыванию"}
|
||||
onClick={() => handleSortDestChange(sortDest[sortDest.indexOf(statusesState.direction) * -1])}
|
||||
>
|
||||
<Icon>{statusesState.direction === "asc" ? "arrow_upward" : "arrow_downward"}</Icon>
|
||||
</IconButton>
|
||||
</Stack>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => {
|
||||
onSettingsChange(colorRules, statusesState);
|
||||
onClose();
|
||||
}}
|
||||
>
|
||||
ОК
|
||||
</Button>
|
||||
<Button
|
||||
variant="text"
|
||||
onClick={() => {
|
||||
seColorRules(pv => ({ ...pv, selectedColorRule: {} }));
|
||||
setStatusesState(pv => ({ ...pv, attr: "SEVNSTAT_NAME", direction: "asc" }));
|
||||
}}
|
||||
>
|
||||
Очистить
|
||||
</Button>
|
||||
<Button variant="text" onClick={onClose}>
|
||||
Отмена
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Диалог дополнительных настроек
|
||||
SettingsDialog.propTypes = {
|
||||
initial: PropTypes.object.isRequired,
|
||||
onSettingsChange: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { SettingsDialog };
|
||||
182
app/panels/clnt_task_board/components/status_card.js
Normal file
182
app/panels/clnt_task_board/components/status_card.js
Normal file
@ -0,0 +1,182 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Карточка статуса событий
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Card, CardHeader, CardContent, Button, IconButton, Icon, Typography, Stack } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { TaskCard } from "./task_card.js"; //Компонент Карточка события
|
||||
import { StatusCardSettings } from "./status_card_settings.js"; //Компонент Диалог настройки карточки событий
|
||||
import { APP_STYLES } from "../../../../app.styles"; //Типовые стили
|
||||
import { COLORS } from "../layouts.js"; //Цвета статусов
|
||||
import { APP_BAR_HEIGHT } from "../../../components/p8p_app_workspace"; //Заголовок страницы
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Нижний отступ заголовка
|
||||
const TITLE_PADDING_BOTTOM = "16px";
|
||||
|
||||
//Высота фильтра
|
||||
const FILTER_HEIGHT = "56px";
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
STATUS_BLOCK: statusColor => {
|
||||
return {
|
||||
width: "350px",
|
||||
height: `calc(100vh - ${APP_BAR_HEIGHT} - ${TITLE_PADDING_BOTTOM} - ${FILTER_HEIGHT} - 8px)`,
|
||||
backgroundColor: statusColor,
|
||||
padding: "8px"
|
||||
};
|
||||
},
|
||||
BLOCK_OPACITY: isAvailable => {
|
||||
return isAvailable ? { opacity: 1 } : { opacity: 0.5 };
|
||||
},
|
||||
CARD_HEADER_TITLE: {
|
||||
textAlign: "left",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
display: "-webkit-box",
|
||||
hyphens: "auto",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: 1,
|
||||
maxWidth: "calc(300px)",
|
||||
width: "-webkit-fill-available",
|
||||
fontSize: "1.2rem",
|
||||
cursor: "default"
|
||||
},
|
||||
CARD_HEADER: { padding: 0 },
|
||||
CARD_CONTENT: {
|
||||
padding: 0,
|
||||
paddingRight: "5px",
|
||||
paddingBottom: "5px !important",
|
||||
overflowY: "auto",
|
||||
maxHeight: `calc(100vh - ${APP_BAR_HEIGHT} - ${TITLE_PADDING_BOTTOM} - ${FILTER_HEIGHT} - 85px)`,
|
||||
...APP_STYLES.SCROLL
|
||||
}
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Карточка статуса события
|
||||
const StatusCard = ({
|
||||
tasks,
|
||||
status,
|
||||
statusTitle,
|
||||
colorRules,
|
||||
extraData,
|
||||
filtersType,
|
||||
isCardAvailable,
|
||||
onTasksReload,
|
||||
onDragItemChange,
|
||||
onTaskDialogOpen,
|
||||
onNoteDialogOpen,
|
||||
onStatusColorChange,
|
||||
placeholder
|
||||
}) => {
|
||||
//Состояние диалога настройки
|
||||
const [statusCardSettingsOpen, setStatusCardSettingsOpen] = useState(false);
|
||||
|
||||
//Открыть/закрыть диалог настройки
|
||||
const handleStatusCardSettingsOpen = () => setStatusCardSettingsOpen(!statusCardSettingsOpen);
|
||||
|
||||
//При изменении цвета статуса
|
||||
const handleStatusColorChange = newColor => {
|
||||
onStatusColorChange(status, newColor);
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
{statusCardSettingsOpen ? (
|
||||
<StatusCardSettings
|
||||
statusColor={status.color}
|
||||
availableColors={COLORS.includes(status.color) ? COLORS : [status.color, ...COLORS]}
|
||||
onClose={handleStatusCardSettingsOpen}
|
||||
onColorChange={handleStatusColorChange}
|
||||
/>
|
||||
) : null}
|
||||
<Card
|
||||
className="statusId-card"
|
||||
sx={{
|
||||
...STYLES.STATUS_BLOCK(status.color),
|
||||
...STYLES.BLOCK_OPACITY(isCardAvailable(status.SEVNSTAT_CODE))
|
||||
}}
|
||||
>
|
||||
<CardHeader
|
||||
action={
|
||||
<IconButton aria-label="settings" onClick={handleStatusCardSettingsOpen}>
|
||||
<Icon>more_vert</Icon>
|
||||
</IconButton>
|
||||
}
|
||||
title={
|
||||
<Typography sx={STYLES.CARD_HEADER_TITLE} title={statusTitle} variant="h5">
|
||||
{statusTitle}
|
||||
</Typography>
|
||||
}
|
||||
subheader={
|
||||
<Button
|
||||
onClick={() => {
|
||||
onDragItemChange(filtersType, status.SEVNSTAT_CODE);
|
||||
onTaskDialogOpen();
|
||||
}}
|
||||
>
|
||||
+ Добавить
|
||||
</Button>
|
||||
}
|
||||
sx={STYLES.CARD_HEADER}
|
||||
/>
|
||||
<CardContent sx={STYLES.CARD_CONTENT}>
|
||||
<Stack spacing={1}>
|
||||
{tasks.rows
|
||||
.filter(item => item.sStatus === status.SEVNSTAT_NAME)
|
||||
.map((item, index) => (
|
||||
<TaskCard
|
||||
task={item}
|
||||
index={index}
|
||||
onTasksReload={onTasksReload}
|
||||
key={item.id}
|
||||
colorRule={colorRules.selectedColorRule}
|
||||
pointSettings={extraData.evPoints.find(p => p.SEVPOINT === status.SEVNSTAT_CODE)}
|
||||
onOpenNoteDialog={onNoteDialogOpen}
|
||||
/>
|
||||
))}
|
||||
{placeholder}
|
||||
</Stack>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Карточка статуса события
|
||||
StatusCard.propTypes = {
|
||||
tasks: PropTypes.object.isRequired,
|
||||
status: PropTypes.object.isRequired,
|
||||
statusTitle: PropTypes.string.isRequired,
|
||||
colorRules: PropTypes.object.isRequired,
|
||||
extraData: PropTypes.object.isRequired,
|
||||
filtersType: PropTypes.string.isRequired,
|
||||
isCardAvailable: PropTypes.func.isRequired,
|
||||
onTasksReload: PropTypes.func.isRequired,
|
||||
onDragItemChange: PropTypes.func.isRequired,
|
||||
onTaskDialogOpen: PropTypes.func.isRequired,
|
||||
onNoteDialogOpen: PropTypes.func.isRequired,
|
||||
onStatusColorChange: PropTypes.func.isRequired,
|
||||
placeholder: PropTypes.object.isRequired
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { StatusCard };
|
||||
109
app/panels/clnt_task_board/components/status_card_settings.js
Normal file
109
app/panels/clnt_task_board/components/status_card_settings.js
Normal file
@ -0,0 +1,109 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Диалог настройки карточки статуса
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Dialog, DialogTitle, IconButton, Icon, DialogContent, DialogActions, Button, Box, MenuItem, Typography } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { CustomInputField } from "./custom_input_field.js"; //Кастомное поле ввода
|
||||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
BCKG_COLOR: backgroundColor => ({ backgroundColor: backgroundColor })
|
||||
};
|
||||
|
||||
//--------------------------------
|
||||
//Вспомогательные классы и функции
|
||||
//--------------------------------
|
||||
|
||||
//Генерация элемента меню
|
||||
const menuItemRender = ({ item, key }) => {
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<MenuItem key={key} value={item.id} sx={STYLES.BCKG_COLOR(item.caption)}>
|
||||
<Typography variant="inherit" noWrap title={item.caption} component="div">
|
||||
{item.caption}
|
||||
</Typography>
|
||||
</MenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Диалог настройки карточки статуса
|
||||
const StatusCardSettings = ({ statusColor, availableColors, onClose, onColorChange }) => {
|
||||
//Состояние индекса текущего цвета
|
||||
const [colorIndex, setColorIndex] = useState(availableColors.indexOf(statusColor));
|
||||
|
||||
//При закрытии диалога с применением настройки статуса
|
||||
const handleDialogOk = () => {
|
||||
//Изменяем цвет статуса
|
||||
onColorChange(availableColors[colorIndex]);
|
||||
//Закрываем диалог
|
||||
onClose();
|
||||
};
|
||||
|
||||
//При изменении значения элемента
|
||||
const handleSettingsItemChange = (item, value) => {
|
||||
setColorIndex(value);
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
<Dialog open onClose={onClose} fullWidth maxWidth="sm">
|
||||
<DialogTitle>Настройки</DialogTitle>
|
||||
<IconButton aria-label="close" onClick={onClose} sx={COMMON_STYLES.DIALOG_CLOSE_BUTTON}>
|
||||
<Icon>close</Icon>
|
||||
</IconButton>
|
||||
<DialogContent>
|
||||
<Box component="section" p={1}>
|
||||
<CustomInputField
|
||||
elementCode="color"
|
||||
elementValue={colorIndex}
|
||||
labelText="Цвет"
|
||||
items={availableColors.reduce((prev, cur) => [...prev, { id: prev.length, caption: cur }], [])}
|
||||
onChange={handleSettingsItemChange}
|
||||
sx={STYLES.BCKG_COLOR(availableColors[colorIndex])}
|
||||
menuItemRender={menuItemRender}
|
||||
/>
|
||||
</Box>
|
||||
</DialogContent>
|
||||
<DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
|
||||
<Button variant="text" onClick={handleDialogOk}>
|
||||
Применить
|
||||
</Button>
|
||||
<Button variant="text" onClick={onClose}>
|
||||
Отмена
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Диалог настройки карточки статуса
|
||||
StatusCardSettings.propTypes = {
|
||||
statusColor: PropTypes.string.isRequired,
|
||||
availableColors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
onColorChange: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { StatusCardSettings };
|
||||
376
app/panels/clnt_task_board/components/task_card.js
Normal file
376
app/panels/clnt_task_board/components/task_card.js
Normal file
@ -0,0 +1,376 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Карточка события
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useContext, useCallback, useEffect } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Draggable } from "react-beautiful-dnd"; //Работа с drag&drop
|
||||
import { Card, CardHeader, Typography, IconButton, Icon, Box, Menu, MenuItem, CardContent, Avatar, Stack } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { TaskDialog } from "../task_dialog"; //Форма события
|
||||
import { ApplicationСtx } from "../../../context/application"; //Контекст приложения
|
||||
import { BackEndСtx } from "../../../context/backend"; //Контекст взаимодействия с сервером
|
||||
import { MessagingСtx } from "../../../context/messaging"; //Контекст сообщений
|
||||
import { TASK_COLORS, getTaskExpiredColor, getTaskBgColorByRule, makeCardActionsArray } from "../layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||||
import { useDictionary } from "../hooks/dict_hooks"; //Состояние открытия разделов
|
||||
import { useTasksFunctions } from "../hooks/tasks_hooks"; //Состояние вспомогательных функций событий
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
MENU_ITEM_DELIMITER: { borderBottom: "1px solid lightgrey" },
|
||||
CARD: (indicatorClr, bgClr) => {
|
||||
const i = indicatorClr ? { borderLeft: `solid ${indicatorClr}` } : null;
|
||||
const bc = bgClr ? { backgroundColor: bgClr } : null;
|
||||
return { ...i, ...bc };
|
||||
},
|
||||
CARD_HEADER_TITLE: {
|
||||
padding: "4px",
|
||||
width: "292px",
|
||||
display: "-webkit-box",
|
||||
hyphens: "auto",
|
||||
WebkitBoxOrient: "vertical",
|
||||
WebkitLineClamp: 2,
|
||||
overflow: "hidden"
|
||||
},
|
||||
CARD_HEADER: { padding: 0, cursor: "pointer" },
|
||||
CARD_CONTENT: { padding: "4px !important" },
|
||||
CARD_CONTENT_BOX: { display: "flex", alignItems: "center" },
|
||||
STACK_SENDER: { alignItems: "center", marginLeft: "auto" },
|
||||
TYPOGRAPHY_SECONDARY: {
|
||||
color: "text.secondary",
|
||||
fontSize: 14
|
||||
},
|
||||
ICON_COLOR: linked => {
|
||||
return { color: theme => (linked ? TASK_COLORS.LINKED : theme.palette.grey[500]) };
|
||||
}
|
||||
};
|
||||
|
||||
//------------------------------------
|
||||
//Вспомогательные функции и компоненты
|
||||
//------------------------------------
|
||||
|
||||
//Действия карточки события
|
||||
const CardActions = ({
|
||||
taskRn,
|
||||
menuItems,
|
||||
cardActions,
|
||||
onMethodsMenuButtonClick,
|
||||
onMethodsMenuClose,
|
||||
onTasksReload,
|
||||
pointSettings,
|
||||
onOpenNoteDialog
|
||||
}) => {
|
||||
//При нажатии на действие меню
|
||||
const handleActionClick = action => {
|
||||
//Выполняем действие
|
||||
action.func({
|
||||
nEvent: taskRn,
|
||||
onReload: action.tasksReload ? () => onTasksReload(action.needAccountsReload) : null,
|
||||
onNoteOpen: pointSettings.ADDNOTE_ONSEND ? onOpenNoteDialog : null
|
||||
});
|
||||
//Закрываем меню действий
|
||||
onMethodsMenuClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box sx={STYLES.BOX_ROW}>
|
||||
<IconButton id={`${taskRn}_menu_button`} aria-haspopup="true" onClick={onMethodsMenuButtonClick}>
|
||||
<Icon>more_vert</Icon>
|
||||
</IconButton>
|
||||
<Menu id={`${taskRn}_menu`} anchorEl={cardActions.anchorMenuMethods} open={cardActions.openMethods} onClose={onMethodsMenuClose}>
|
||||
{menuItems.map(action => {
|
||||
if (action.visible)
|
||||
return (
|
||||
<MenuItem
|
||||
sx={action.delimiter ? STYLES.MENU_ITEM_DELIMITER : {}}
|
||||
key={`${taskRn}_${action.method}`}
|
||||
onClick={() => handleActionClick(action)}
|
||||
>
|
||||
<Icon>{action.icon}</Icon>
|
||||
<Typography pl={1}>{action.name}</Typography>
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</Menu>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Действия карточки события
|
||||
CardActions.propTypes = {
|
||||
taskRn: PropTypes.number.isRequired,
|
||||
menuItems: PropTypes.array.isRequired,
|
||||
cardActions: PropTypes.object.isRequired,
|
||||
onMethodsMenuButtonClick: PropTypes.func.isRequired,
|
||||
onMethodsMenuClose: PropTypes.func.isRequired,
|
||||
onTasksReload: PropTypes.func,
|
||||
pointSettings: PropTypes.object,
|
||||
onOpenNoteDialog: PropTypes.func
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Карточка события
|
||||
const TaskCard = ({ task, index, onTasksReload, colorRule, pointSettings, onOpenNoteDialog }) => {
|
||||
//Состояние диалога события
|
||||
const [taskDialogOpen, setTaskDialogOpen] = useState(false);
|
||||
|
||||
//Состояние действий события
|
||||
const [cardActions, setCardActions] = useState({ anchorMenuMethods: null, openMethods: false });
|
||||
|
||||
//Состояние списка действий меню
|
||||
const [menuItems, setMenuItems] = useState([]);
|
||||
|
||||
//Вспомогательные функции открытия раздела
|
||||
const { handleClientEventsOpen, handleClientEventsNotesOpen, handleFileLinksOpen } = useDictionary();
|
||||
|
||||
//Состояние вспомогательных функций событий
|
||||
const { handleTaskStateChange, handleTaskSend } = useTasksFunctions();
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//Подключение к контексту сообщений
|
||||
const { showMsgWarn } = useContext(MessagingСtx);
|
||||
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowDocument } = useContext(ApplicationСtx);
|
||||
|
||||
//По нажатию на открытие меню действий
|
||||
const handleMethodsMenuButtonClick = useCallback(event => {
|
||||
setCardActions(pv => ({ ...pv, anchorMenuMethods: event.currentTarget, openMethods: true }));
|
||||
}, []);
|
||||
|
||||
//При закрытии меню
|
||||
const handleMethodsMenuClose = useCallback(() => {
|
||||
setCardActions(pv => ({ ...pv, anchorMenuMethods: null, openMethods: false }));
|
||||
}, []);
|
||||
|
||||
//При удалении контрагента
|
||||
const handleTaskDelete = useCallback(
|
||||
async ({ nEvent, onReload }) => {
|
||||
await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_DELETE",
|
||||
args: { NCLNEVENTS: nEvent }
|
||||
});
|
||||
//Если требуется перезагрузить данные
|
||||
onReload ? onReload() : null;
|
||||
},
|
||||
[executeStored]
|
||||
);
|
||||
|
||||
//При возврате в предыдущую точку события
|
||||
const handleTaskReturn = useCallback(
|
||||
async ({ nEvent, onReload }) => {
|
||||
await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_RETURN",
|
||||
args: { NCLNEVENTS: nEvent }
|
||||
});
|
||||
//Если требуется перезагрузить данные
|
||||
onReload ? onReload() : null;
|
||||
},
|
||||
[executeStored]
|
||||
);
|
||||
|
||||
//По нажатию действия "Направить"
|
||||
const handleSendAction = useCallback(
|
||||
async ({ nEvent, onReload, onNoteOpen }) => {
|
||||
//Выполняем направление события
|
||||
handleTaskSend({ nEvent, onReload, onNoteOpen });
|
||||
},
|
||||
[handleTaskSend]
|
||||
);
|
||||
|
||||
//По нажатия действия "Редактировать"
|
||||
const handleTaskEditAction = useCallback(() => {
|
||||
setTaskDialogOpen(true);
|
||||
}, []);
|
||||
|
||||
//По нажатия действия "Редактировать в разделе"
|
||||
const handleTaskEditClientAction = useCallback(
|
||||
async ({ nEvent }) => {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_SELECT",
|
||||
args: {
|
||||
NCLNEVENTS: nEvent
|
||||
}
|
||||
});
|
||||
if (data.NIDENT) {
|
||||
//Открываем раздел "События" с фильтром по записи
|
||||
handleClientEventsOpen({ nIdent: data.NIDENT });
|
||||
}
|
||||
},
|
||||
[executeStored, handleClientEventsOpen]
|
||||
);
|
||||
|
||||
//По нажатию действия "Удалить"
|
||||
const handleTaskDeleteAction = useCallback(
|
||||
({ nEvent, onReload }) => {
|
||||
showMsgWarn("Удалить событие?", () => handleTaskDelete({ nEvent, onReload }));
|
||||
},
|
||||
[handleTaskDelete, showMsgWarn]
|
||||
);
|
||||
|
||||
//По нажатию действия "Выполнить возврат"
|
||||
const handleTaskReturnAction = useCallback(
|
||||
({ nEvent, onReload }) => {
|
||||
showMsgWarn("Выполнить возврат события в предыдущую точку?", () => handleTaskReturn({ nEvent, onReload }));
|
||||
},
|
||||
[handleTaskReturn, showMsgWarn]
|
||||
);
|
||||
|
||||
//По нажатию действия "Примечания"
|
||||
const handleEventNotesOpenAction = useCallback(
|
||||
({ nEvent }) => {
|
||||
handleClientEventsNotesOpen({ nPrn: nEvent });
|
||||
},
|
||||
[handleClientEventsNotesOpen]
|
||||
);
|
||||
|
||||
//По нажатию действия "Присоединенные документы"
|
||||
const handleTaskFileLinksOpenAction = useCallback(
|
||||
({ nEvent }) => {
|
||||
handleFileLinksOpen({ nPrn: nEvent, sUnitCode: "ClientEvents" });
|
||||
},
|
||||
[handleFileLinksOpen]
|
||||
);
|
||||
|
||||
//По нажатию действия "Перейти"
|
||||
const handleStateChangeAction = useCallback(
|
||||
async ({ nEvent, onReload, onNoteOpen }) => {
|
||||
//Выполняем изменения статуса события
|
||||
handleTaskStateChange({ nEvent, onReload, onNoteOpen });
|
||||
},
|
||||
[handleTaskStateChange]
|
||||
);
|
||||
|
||||
//При изменении ссылок в меню действий (для того, чтобы ссылка на объект менялась при реальной необходимости)
|
||||
useEffect(() => {
|
||||
//Устанавливаем список меню
|
||||
setMenuItems(
|
||||
makeCardActionsArray(
|
||||
handleTaskEditAction,
|
||||
handleTaskEditClientAction,
|
||||
handleTaskDeleteAction,
|
||||
handleStateChangeAction,
|
||||
handleTaskReturnAction,
|
||||
handleSendAction,
|
||||
handleEventNotesOpenAction,
|
||||
handleTaskFileLinksOpenAction
|
||||
)
|
||||
);
|
||||
}, [
|
||||
handleEventNotesOpenAction,
|
||||
handleTaskFileLinksOpenAction,
|
||||
handleSendAction,
|
||||
handleStateChangeAction,
|
||||
handleTaskDeleteAction,
|
||||
handleTaskEditAction,
|
||||
handleTaskEditClientAction,
|
||||
handleTaskReturnAction
|
||||
]);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box>
|
||||
{taskDialogOpen ? (
|
||||
<TaskDialog
|
||||
taskRn={task.nRn}
|
||||
taskType={task.sType}
|
||||
editable={pointSettings.BAN_UPDATE ? false : true}
|
||||
onTasksReload={onTasksReload}
|
||||
onClose={() => {
|
||||
setTaskDialogOpen(false);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
<Draggable draggableId={task.id.toString()} key={task.id} index={index}>
|
||||
{provided => (
|
||||
<Card
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
{...provided.dragHandleProps}
|
||||
sx={STYLES.CARD(getTaskExpiredColor(task), colorRule.SCOLOR ? getTaskBgColorByRule(task, colorRule) : null)}
|
||||
>
|
||||
<CardHeader
|
||||
title={
|
||||
<Typography
|
||||
className="task-info"
|
||||
sx={STYLES.CARD_HEADER_TITLE}
|
||||
lang="ru"
|
||||
onClick={() => {
|
||||
menuItems.find(action =>
|
||||
action.method === "EDIT" ? action.func(task.nRn, action.tasksReload ? onTasksReload : null) : null
|
||||
);
|
||||
}}
|
||||
>
|
||||
{task.sDescription}
|
||||
</Typography>
|
||||
}
|
||||
sx={STYLES.CARD_HEADER}
|
||||
action={
|
||||
<CardActions
|
||||
taskRn={task.nRn}
|
||||
menuItems={menuItems}
|
||||
cardActions={cardActions}
|
||||
onMethodsMenuButtonClick={handleMethodsMenuButtonClick}
|
||||
onMethodsMenuClose={handleMethodsMenuClose}
|
||||
onTasksReload={onTasksReload}
|
||||
pointSettings={pointSettings}
|
||||
onOpenNoteDialog={onOpenNoteDialog}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<CardContent sx={STYLES.CARD_CONTENT}>
|
||||
<Box sx={STYLES.CARD_CONTENT_BOX}>
|
||||
<IconButton
|
||||
title={task.nLinkedRn ? "Событие получено по статусной модели" : null}
|
||||
onClick={
|
||||
task.nLinkedRn ? () => pOnlineShowDocument({ unitCode: task.sLinkedUnit, document: task.nLinkedRn }) : null
|
||||
}
|
||||
sx={STYLES.ICON_COLOR(task.nLinkedRn)}
|
||||
disabled={!task.nLinkedRn}
|
||||
>
|
||||
<Icon>assignment</Icon>
|
||||
</IconButton>
|
||||
<Typography sx={STYLES.TYPOGRAPHY_SECONDARY}>{task.name}</Typography>
|
||||
{task.sSender ? (
|
||||
<Stack direction="row" spacing={0.5} sx={STYLES.STACK_SENDER}>
|
||||
<Typography sx={STYLES.TYPOGRAPHY_SECONDARY}>{task.sSender}</Typography>
|
||||
<Avatar src={task.avatar ? `data:image/png;base64,${task.avatar}` : null} />
|
||||
</Stack>
|
||||
) : null}
|
||||
</Box>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
</Draggable>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Карточка события
|
||||
TaskCard.propTypes = {
|
||||
task: PropTypes.object.isRequired,
|
||||
index: PropTypes.number.isRequired,
|
||||
onTasksReload: PropTypes.func,
|
||||
colorRule: PropTypes.object,
|
||||
pointSettings: PropTypes.object,
|
||||
onOpenNoteDialog: PropTypes.func
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { TaskCard };
|
||||
158
app/panels/clnt_task_board/components/task_form.js
Normal file
158
app/panels/clnt_task_board/components/task_form.js
Normal file
@ -0,0 +1,158 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент панели: Форма события
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useEffect, useCallback } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Box, Typography, Tabs, Tab, InputAdornment, IconButton, Icon } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { TaskFormTabInfo } from "./task_form_tab_info"; //Вкладка основной информации
|
||||
import { TaskFormTabExecutor } from "./task_form_tab_executor"; //Вкладка информации об исполнителе
|
||||
import { TaskFormTabProps } from "./task_form_tab_props"; //Вкладка информации со свойствами
|
||||
import { useDocsProps } from "../hooks/task_dialog_hooks"; //Хук для получения свойств раздела "События"
|
||||
import { hasValue } from "../../../core/utils";
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
CONTAINER: { margin: "5px 0px", textAlign: "center" }
|
||||
};
|
||||
|
||||
//------------------------------------
|
||||
//Вспомогательные функции и компоненты
|
||||
//------------------------------------
|
||||
|
||||
//Свойства вкладки
|
||||
function a11yProps(index) {
|
||||
return {
|
||||
id: `simple-tab-${index}`,
|
||||
"aria-controls": `simple-tabpanel-${index}`
|
||||
};
|
||||
}
|
||||
|
||||
//Вкладка информации
|
||||
function CustomTabPanel(props) {
|
||||
const { children, value, index, ...other } = props;
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box role="tabpanel" hidden={value !== index} id={`simple-tabpanel-${index}`} aria-labelledby={`simple-tab-${index}`} {...other}>
|
||||
{value === index && <Box pt={1}>{children}</Box>}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
//Контроль свойств - Вкладка информации
|
||||
CustomTabPanel.propTypes = {
|
||||
children: PropTypes.node,
|
||||
index: PropTypes.number.isRequired,
|
||||
value: PropTypes.number.isRequired
|
||||
};
|
||||
|
||||
//Формирование кнопки для открытия раздела
|
||||
export const getInputProps = (onClick, disabled = false, icon = "list") => {
|
||||
//Генерация содержимого
|
||||
return {
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">
|
||||
<IconButton disabled={disabled} aria-label={`select`} onClick={onClick} edge="end">
|
||||
<Icon>{icon}</Icon>
|
||||
</IconButton>
|
||||
</InputAdornment>
|
||||
)
|
||||
};
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Форма события
|
||||
const TaskForm = ({ task, taskType, onTaskChange, editable, onEventNextNumbGet, onDPReady }) => {
|
||||
//Состояние вкладки
|
||||
const [tab, setTab] = useState(0);
|
||||
|
||||
//Состояние допустимых дополнительных свойств
|
||||
const [docProps] = useDocsProps(taskType);
|
||||
|
||||
//При изменении вкладки
|
||||
const handleTabChange = (e, newValue) => {
|
||||
setTab(newValue);
|
||||
};
|
||||
|
||||
//При изменении поля
|
||||
const handleFieldEdit = useCallback(
|
||||
e => {
|
||||
onTaskChange({
|
||||
[e.target.id]: e.target.value,
|
||||
//Связанные значения, если меняется одно, то необходимо обнулить другое
|
||||
...(e.target.id === "sClntClnperson" ? { sClntClients: "" } : {}),
|
||||
...(e.target.id === "sClntClients" ? { sClntClnperson: "" } : {})
|
||||
});
|
||||
},
|
||||
[onTaskChange]
|
||||
);
|
||||
|
||||
//При изменении доп. свойства
|
||||
const handlePropEdit = useCallback(
|
||||
(docProp, value) => {
|
||||
onTaskChange({ docProps: { ...task.docProps, [docProp]: value } });
|
||||
},
|
||||
[onTaskChange, task.docProps]
|
||||
);
|
||||
|
||||
//Проверка заполненности всех обязательных доп. свойств
|
||||
useEffect(() => {
|
||||
//Считываем количество незаполненных обязательных свойств
|
||||
let notFilled = docProps.props.filter(docProp => docProp.BREQUIRE === true && !hasValue(task.docProps[docProp.SFORMATTED_ID])).length;
|
||||
//Если доп. свойства загрузились и количество незаполненных = 0 - доп. свойства готовы, иначе не готовы
|
||||
docProps.loaded && notFilled === 0 ? onDPReady(true) : onDPReady(false);
|
||||
}, [docProps, onDPReady, task.docProps]);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box sx={STYLES.CONTAINER}>
|
||||
<Typography pb={1} variant="h6">
|
||||
{task.nRn ? "Исправление события" : "Добавление события"}
|
||||
</Typography>
|
||||
<Tabs value={tab} onChange={handleTabChange} aria-label="tabs of values">
|
||||
<Tab label="Событие" {...a11yProps(0)} />
|
||||
<Tab label="Исполнитель" {...a11yProps(1)} />
|
||||
{docProps.props.length > 0 ? <Tab label="Свойства" {...a11yProps(2)} /> : null}
|
||||
</Tabs>
|
||||
<CustomTabPanel value={tab} index={0}>
|
||||
<TaskFormTabInfo task={task} editable={editable} onFieldEdit={handleFieldEdit} onEventNextNumbGet={onEventNextNumbGet} />
|
||||
</CustomTabPanel>
|
||||
<CustomTabPanel value={tab} index={1}>
|
||||
<TaskFormTabExecutor task={task} onFieldEdit={handleFieldEdit} />
|
||||
</CustomTabPanel>
|
||||
{docProps.props.length > 0 ? (
|
||||
<CustomTabPanel value={tab} index={2}>
|
||||
<TaskFormTabProps task={task} taskType={taskType} docProps={docProps} onPropEdit={handlePropEdit} />
|
||||
</CustomTabPanel>
|
||||
) : null}
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Форма события
|
||||
TaskForm.propTypes = {
|
||||
task: PropTypes.object.isRequired,
|
||||
taskType: PropTypes.string.isRequired,
|
||||
onTaskChange: PropTypes.func.isRequired,
|
||||
editable: PropTypes.bool.isRequired,
|
||||
onEventNextNumbGet: PropTypes.func.isRequired,
|
||||
onDPReady: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { TaskForm };
|
||||
155
app/panels/clnt_task_board/components/task_form_tab_executor.js
Normal file
155
app/panels/clnt_task_board/components/task_form_tab_executor.js
Normal file
@ -0,0 +1,155 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Вкладка информации об исполнителе
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Box, TextField } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { getInputProps } from "./task_form"; //Формирование кнопки доступа к разделу
|
||||
import dayjs from "dayjs"; //Работа с датами
|
||||
import customParseFormat from "dayjs/plugin/customParseFormat"; //Настройка пользовательского формата даты
|
||||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||||
import { useDictionary } from "../hooks/dict_hooks"; //Состояние открытия разделов
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
BOX_LEFT_ALIGN: { display: "flex", justifyContent: "flex-start" }
|
||||
};
|
||||
|
||||
//------------------------------------
|
||||
//Вспомогательные функции и компоненты
|
||||
//------------------------------------
|
||||
|
||||
//Подключение настройки пользовательского формата даты
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Вкладка информации об исполнителе
|
||||
const TaskFormTabExecutor = ({ task, onFieldEdit }) => {
|
||||
//Вспомогательные функции открытия раздела
|
||||
const { handleClientPersonOpen } = useDictionary();
|
||||
|
||||
//При изменении сотрудника-инициатора
|
||||
const handleInitClnpersonChange = () =>
|
||||
handleClientPersonOpen({
|
||||
sCode: task.sInitClnperson,
|
||||
callBack: res => {
|
||||
onFieldEdit({
|
||||
target: {
|
||||
id: "sInitClnperson",
|
||||
value: res.outParameters.out_CODE
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={{ ...COMMON_STYLES.BOX_WITH_LEGEND, ...STYLES.BOX_LEFT_ALIGN }} component="fieldset">
|
||||
<legend style={COMMON_STYLES.LEGEND}>Планирование</legend>
|
||||
<TextField
|
||||
id="dPlanDate"
|
||||
label="Начало работ"
|
||||
InputLabelProps={{ shrink: true }}
|
||||
type="datetime-local"
|
||||
variant="standard"
|
||||
value={task.dPlanDate ? dayjs(task.dPlanDate, "DD.MM.YYYY HH:mm").format("YYYY-MM-DD HH:mm") : ""}
|
||||
onChange={onFieldEdit}
|
||||
disabled={task.isUpdate}
|
||||
></TextField>
|
||||
</Box>
|
||||
<Box sx={{ ...COMMON_STYLES.BOX_WITH_LEGEND, ...COMMON_STYLES.BOX_SINGLE_COLUMN }} component="fieldset">
|
||||
<legend style={COMMON_STYLES.LEGEND}>Инициатор</legend>
|
||||
<TextField
|
||||
id="sInitClnperson"
|
||||
label="Сотрудник"
|
||||
value={task.sInitClnperson}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled={task.isUpdate}
|
||||
InputProps={getInputProps(() => handleInitClnpersonChange(), task.isUpdate)}
|
||||
></TextField>
|
||||
<TextField id="sInitUser" label="Пользователь" value={task.sInitUser} variant="standard" onChange={onFieldEdit} disabled></TextField>
|
||||
<TextField
|
||||
id="sInitReason"
|
||||
label="Основание"
|
||||
value={task.sInitReason}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled={task.isUpdate}
|
||||
></TextField>
|
||||
</Box>
|
||||
<Box sx={{ ...COMMON_STYLES.BOX_WITH_LEGEND, ...COMMON_STYLES.BOX_SINGLE_COLUMN }} component="fieldset">
|
||||
<legend style={COMMON_STYLES.LEGEND}>Направить</legend>
|
||||
<TextField id="sToCompany" label="Организация" value={task.sToCompany} variant="standard" onChange={onFieldEdit} disabled></TextField>
|
||||
<TextField
|
||||
id="sToDepartment"
|
||||
label="Подразделение"
|
||||
value={task.sToDepartment}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled
|
||||
></TextField>
|
||||
<TextField id="sToClnpost" label="Должность" value={task.sToClnpost} variant="standard" onChange={onFieldEdit} disabled></TextField>
|
||||
<TextField
|
||||
id="sToClnpsdep"
|
||||
label="Штатная должность"
|
||||
value={task.sToClnpsdep}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled
|
||||
></TextField>
|
||||
<TextField
|
||||
id="sToClnperson"
|
||||
label="Сотрудник"
|
||||
value={task.sToClnperson}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled
|
||||
></TextField>
|
||||
<TextField
|
||||
id="sToFcstaffgrp"
|
||||
label="Нештатная должность"
|
||||
value={task.sToFcstaffgrp}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled
|
||||
></TextField>
|
||||
<TextField id="sToUser" label="Пользователь" value={task.sToUser} variant="standard" onChange={onFieldEdit} disabled></TextField>
|
||||
<TextField
|
||||
id="sToUsergrp"
|
||||
label="Группа пользователей"
|
||||
value={task.sToUsergrp}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled
|
||||
></TextField>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Вкладка информации об исполнителе
|
||||
TaskFormTabExecutor.propTypes = {
|
||||
task: PropTypes.object.isRequired,
|
||||
onFieldEdit: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { TaskFormTabExecutor };
|
||||
192
app/panels/clnt_task_board/components/task_form_tab_info.js
Normal file
192
app/panels/clnt_task_board/components/task_form_tab_info.js
Normal file
@ -0,0 +1,192 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Вкладка основной информации
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Box, TextField } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { getInputProps } from "./task_form"; //Формирование кнопки доступа к разделу
|
||||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||||
import { useDictionary } from "../hooks/dict_hooks"; //Состояние открытия разделов
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
BOX_FEW_COLUMNS: { display: "flex", flexWrap: "wrap", justifyContent: "space-between" }
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Вкладка основной информации
|
||||
const TaskFormTabInfo = ({ task, editable, onFieldEdit, onEventNextNumbGet }) => {
|
||||
//Вспомогательные функции открытия раздела
|
||||
const { handleClientPersonOpen, handleCatalogTreeOpen, handleClientClientsOpen } = useDictionary();
|
||||
|
||||
//При изменении каталога
|
||||
const handleCrnChange = () =>
|
||||
handleCatalogTreeOpen({
|
||||
sUnitName: "ClientEvents",
|
||||
sName: task.sCrn,
|
||||
callBack: res => {
|
||||
onFieldEdit({
|
||||
target: {
|
||||
id: "sCrn",
|
||||
value: res.outParameters.out_NAME
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//При изменении клиента-сотрудника
|
||||
const handleClntClnpersonChange = () =>
|
||||
handleClientPersonOpen({
|
||||
sCode: task.sClntClnperson,
|
||||
callBack: res => {
|
||||
onFieldEdit({
|
||||
target: {
|
||||
id: "sClntClnperson",
|
||||
value: res.outParameters.out_CODE
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//При изменении клиента-организации
|
||||
const handleClntClientsChange = () =>
|
||||
handleClientClientsOpen({
|
||||
sCode: task.sClntClients,
|
||||
callBack: res => {
|
||||
onFieldEdit({
|
||||
target: {
|
||||
id: "sClntClients",
|
||||
value: res.outParameters.out_CLIENT_CODE
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={COMMON_STYLES.BOX_WITH_LEGEND} component="fieldset">
|
||||
<legend style={COMMON_STYLES.LEGEND}>Событие</legend>
|
||||
<Box sx={STYLES.BOX_FEW_COLUMNS}>
|
||||
<TextField
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()}
|
||||
id="sCrn"
|
||||
label="Каталог"
|
||||
fullWidth
|
||||
value={task.sCrn}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
InputProps={getInputProps(handleCrnChange)}
|
||||
required
|
||||
disabled={task.isUpdate}
|
||||
/>
|
||||
<TextField
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD("225px")}
|
||||
id="sPrefix"
|
||||
label="Префикс"
|
||||
value={task.sPrefix}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
required
|
||||
disabled={task.isUpdate}
|
||||
></TextField>
|
||||
<TextField
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD("225px")}
|
||||
id="sNumber"
|
||||
label="Номер"
|
||||
value={task.sNumber}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
required
|
||||
disabled={task.isUpdate}
|
||||
InputProps={getInputProps(onEventNextNumbGet, !task.sPrefix || task.isUpdate, "refresh")}
|
||||
></TextField>
|
||||
<TextField
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD("225px", !task.isUpdate)}
|
||||
id="sType"
|
||||
label="Тип"
|
||||
value={task.sType}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled
|
||||
required
|
||||
></TextField>
|
||||
<TextField
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD("225px", !task.isUpdate)}
|
||||
id="sStatus"
|
||||
label="Статус"
|
||||
value={task.sStatus}
|
||||
variant="standard"
|
||||
disabled
|
||||
required
|
||||
onChange={onFieldEdit}
|
||||
></TextField>
|
||||
<TextField
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()}
|
||||
fullWidth
|
||||
id="sDescription"
|
||||
label="Описание"
|
||||
value={task.sDescription}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled={!task.sType || !editable}
|
||||
required
|
||||
multiline
|
||||
minRows={7}
|
||||
maxRows={7}
|
||||
></TextField>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box sx={{ ...COMMON_STYLES.BOX_WITH_LEGEND, ...COMMON_STYLES.BOX_SINGLE_COLUMN }} component="fieldset">
|
||||
<legend style={COMMON_STYLES.LEGEND}>Клиент</legend>
|
||||
<TextField
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()}
|
||||
id="sClntClients"
|
||||
label="Организация"
|
||||
value={task.sClntClients}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled={!task.sType}
|
||||
InputProps={getInputProps(() => handleClntClientsChange(), !task.sType)}
|
||||
></TextField>
|
||||
<TextField
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()}
|
||||
id="sClntClnperson"
|
||||
label="Сотрудник"
|
||||
value={task.sClntClnperson}
|
||||
variant="standard"
|
||||
onChange={onFieldEdit}
|
||||
disabled={!task.sType}
|
||||
InputProps={getInputProps(() => handleClntClnpersonChange(), !task.sType)}
|
||||
></TextField>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Вкладка основной информации
|
||||
TaskFormTabInfo.propTypes = {
|
||||
task: PropTypes.object.isRequired,
|
||||
editable: PropTypes.bool.isRequired,
|
||||
onFieldEdit: PropTypes.func.isRequired,
|
||||
onEventNextNumbGet: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { TaskFormTabInfo };
|
||||
169
app/panels/clnt_task_board/components/task_form_tab_props.js
Normal file
169
app/panels/clnt_task_board/components/task_form_tab_props.js
Normal file
@ -0,0 +1,169 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Вкладка информации со свойствами
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Box, TextField } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { getInputProps } from "./task_form"; //Формирование кнопки доступа к разделу
|
||||
import dayjs from "dayjs"; //Работа с датами
|
||||
import customParseFormat from "dayjs/plugin/customParseFormat"; //Настройка пользовательского формата даты
|
||||
import { DP_DEFAULT_VALUE, DP_IN_VALUE, DP_RETURN_VALUE, validationError, formatSqlDate } from "../layouts"; //Дополнительная разметка и вёрстка клиентских элементов
|
||||
import { COMMON_STYLES } from "../styles"; //Общие стили
|
||||
import { useDictionary } from "../hooks/dict_hooks"; //Состояние открытия разделов
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//------------------------------------
|
||||
//Вспомогательные функции и компоненты
|
||||
//------------------------------------
|
||||
|
||||
//Подключение настройки пользовательского формата даты
|
||||
dayjs.extend(customParseFormat);
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Вкладка информации со свойствами
|
||||
const TaskFormTabProps = ({ task, docProps, onPropEdit }) => {
|
||||
//Вспомогательные функции открытия раздела
|
||||
const { handleExtraDictionariesOpen, handleUnitOpen } = useDictionary();
|
||||
|
||||
//Выбор из словаря или дополнительного словаря
|
||||
const handleDictOpen = async (docProp, curValue = null) => {
|
||||
//Если способ выбора - словарь
|
||||
docProp.NENTRY_TYPE === 1
|
||||
? handleUnitOpen({
|
||||
sUnitCode: docProp.SUNITCODE,
|
||||
sShowMethod: docProp.SMETHOD_CODE,
|
||||
inputParameters: docProp.NPARAM_RN ? [{ name: docProp.SPARAM_IN_CODE, value: curValue }] : null,
|
||||
callBack: res => {
|
||||
onPropEdit(docProp.SFORMATTED_ID, res.outParameters[docProp.SPARAM_OUT_CODE]);
|
||||
}
|
||||
})
|
||||
: //Если способ выбора - доп. словарь
|
||||
handleExtraDictionariesOpen({
|
||||
nRn: docProp.NEXTRA_DICT_RN,
|
||||
sParamName: DP_IN_VALUE[docProp.NFORMAT],
|
||||
paramValue: curValue,
|
||||
callBack: res => {
|
||||
onPropEdit(docProp.SFORMATTED_ID, res.outParameters[DP_RETURN_VALUE[docProp.NFORMAT]]);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
//Инициализация дополнительного свойства
|
||||
const initPropValue = prop => {
|
||||
//Считываем значение свойства из события
|
||||
const value = task.docProps[prop.SFORMATTED_ID];
|
||||
//Если есть значение свойства
|
||||
if (value) {
|
||||
//Строка или число
|
||||
if (prop.NFORMAT < 2) {
|
||||
return prop.NNUM_PRECISION ? String(value).replace(".", ",") : value;
|
||||
}
|
||||
//Дата
|
||||
if (prop.NFORMAT === 2) {
|
||||
//Возвращаем значение исходя из подтипа даты
|
||||
switch (prop.NDATA_SUBTYPE) {
|
||||
//Дата без времени
|
||||
case 0:
|
||||
return dayjs(value).format("YYYY-MM-DD");
|
||||
//Дата и время без секунд
|
||||
case 1:
|
||||
return dayjs(value).format("YYYY-MM-DD HH:mm");
|
||||
//Дата и время с секундами
|
||||
default:
|
||||
return dayjs(value).format("YYYY-MM-DD HH:mm:ss");
|
||||
}
|
||||
}
|
||||
//Если это ничего из вышестоящего - время
|
||||
return formatSqlDate(value);
|
||||
}
|
||||
//Если нет значения, но это изменение события
|
||||
if (task.nRn) {
|
||||
//Возвращаем пустоту
|
||||
return "";
|
||||
}
|
||||
//Если нет значения и это добавление события - возвращаем значение по умолчанию
|
||||
return prop[DP_DEFAULT_VALUE[prop.NFORMAT]];
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Box>
|
||||
<Box sx={COMMON_STYLES.BOX_WITH_LEGEND} component="fieldset">
|
||||
{docProps.props.map((docProp, index) => {
|
||||
return docProp.BSHOW_IN_GRID ? (
|
||||
<TextField
|
||||
error={
|
||||
!validationError(
|
||||
task.docProps[docProp.SFORMATTED_ID],
|
||||
docProp.NFORMAT,
|
||||
docProp.NNUM_WIDTH,
|
||||
docProp.NNUM_PRECISION,
|
||||
docProp.NSTR_WIDTH
|
||||
)
|
||||
}
|
||||
key={index}
|
||||
sx={COMMON_STYLES.TASK_FORM_TEXT_FIELD()}
|
||||
id={docProp.SFORMATTED_ID}
|
||||
type={
|
||||
docProp.NFORMAT < 2
|
||||
? "string"
|
||||
: docProp.NFORMAT === 2
|
||||
? docProp.NDATA_SUBTYPE === 0
|
||||
? "date"
|
||||
: "datetime-local"
|
||||
: "time"
|
||||
}
|
||||
label={docProp.SNAME}
|
||||
fullWidth
|
||||
value={initPropValue(docProp)}
|
||||
variant="standard"
|
||||
onChange={e => onPropEdit(e.target.id, e.target.value)}
|
||||
inputProps={
|
||||
(docProp.NFORMAT === 2 && docProp.NDATA_SUBTYPE === 2) || (docProp.NFORMAT === 3 && docProp.NDATA_SUBTYPE === 1)
|
||||
? { step: 1 }
|
||||
: {}
|
||||
}
|
||||
InputProps={
|
||||
docProp.NENTRY_TYPE > 0 ? getInputProps(() => handleDictOpen(docProp, task.docProps[docProp.SFORMATTED_ID])) : null
|
||||
}
|
||||
InputLabelProps={
|
||||
docProp.NFORMAT < 2
|
||||
? {}
|
||||
: {
|
||||
shrink: true
|
||||
}
|
||||
}
|
||||
required={docProp.BREQUIRE}
|
||||
disabled={docProp.BREADONLY}
|
||||
/>
|
||||
) : null;
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Вкладка информации со свойствами
|
||||
TaskFormTabProps.propTypes = {
|
||||
task: PropTypes.object.isRequired,
|
||||
docProps: PropTypes.object.isRequired,
|
||||
onPropEdit: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { TaskFormTabProps };
|
||||
212
app/panels/clnt_task_board/filter.js
Normal file
212
app/panels/clnt_task_board/filter.js
Normal file
@ -0,0 +1,212 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Фильтр отбора
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Chip, Stack, Icon, IconButton, Box, Menu, MenuItem, Typography } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { FilterDialog } from "./components/filter_dialog.js"; //Диалог фильтра
|
||||
import { COMMON_STYLES } from "./styles"; //Общие стили
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
ICON_ORDERS: orders => {
|
||||
return orders.length > 0 ? { color: "#1976d2" } : {};
|
||||
},
|
||||
MENU_ORDER: {
|
||||
width: "260px"
|
||||
},
|
||||
MENU_ITEM_ORDER: {
|
||||
display: "flex",
|
||||
justifyContent: "space-between"
|
||||
},
|
||||
FILTERS_STACK: {
|
||||
paddingBottom: "5px",
|
||||
...COMMON_STYLES.SCROLL
|
||||
},
|
||||
STACK_FILTER: { maxWidth: "99vw" }
|
||||
};
|
||||
|
||||
//--------------------------
|
||||
//Вспомогательные компоненты
|
||||
//--------------------------
|
||||
|
||||
//Элемент меню сортировок
|
||||
const SortMenuItem = ({ item, caption, orders, onOrderChanged }) => {
|
||||
//Кнопка сортировки
|
||||
const order = orders.find(order => order.name == item);
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<MenuItem sx={STYLES.MENU_ITEM_ORDER} key={item} onClick={() => onOrderChanged(item)}>
|
||||
<Typography>{caption}</Typography>
|
||||
{order ? order.direction === "ASC" ? <Icon>arrow_upward</Icon> : <Icon>arrow_downward</Icon> : null}
|
||||
</MenuItem>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Элемент меню сортировок
|
||||
SortMenuItem.propTypes = {
|
||||
item: PropTypes.string.isRequired,
|
||||
caption: PropTypes.string.isRequired,
|
||||
orders: PropTypes.array,
|
||||
onOrderChanged: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//Меню сортировок
|
||||
const SortMenu = ({ menuOrders, onOrdersMenuClose, orders, onOrderChanged }) => {
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Menu
|
||||
id={`sort_menu`}
|
||||
anchorEl={menuOrders.anchorMenuOrders}
|
||||
open={menuOrders.openOrders}
|
||||
onClose={onOrdersMenuClose}
|
||||
MenuListProps={{ sx: STYLES.MENU_ORDER }}
|
||||
>
|
||||
<SortMenuItem item={"DCHANGE_DATE"} caption={"Дата последнего изменения"} orders={orders} onOrderChanged={onOrderChanged} />
|
||||
<SortMenuItem item={"DPLAN_DATE"} caption={"Дата начала работ"} orders={orders} onOrderChanged={onOrderChanged} />
|
||||
<SortMenuItem item={"SPREF_NUMB"} caption={"Номер"} orders={orders} onOrderChanged={onOrderChanged} />
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Меню сортировок
|
||||
SortMenu.propTypes = {
|
||||
menuOrders: PropTypes.object.isRequired,
|
||||
onOrdersMenuClose: PropTypes.func.isRequired,
|
||||
orders: PropTypes.array,
|
||||
onOrderChanged: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//Элемент фильтра
|
||||
const FilterItem = ({ caption, value, onClick }) => {
|
||||
//При нажатии на элемент
|
||||
const handleClick = () => (onClick ? onClick() : null);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Chip
|
||||
label={
|
||||
<Stack direction={"row"} alignItems={"center"}>
|
||||
<strong>{caption}</strong>
|
||||
{value ? `:\u00A0${value}` : null}
|
||||
</Stack>
|
||||
}
|
||||
variant="outlined"
|
||||
onClick={handleClick}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Элемент фильтра
|
||||
FilterItem.propTypes = {
|
||||
caption: PropTypes.string.isRequired,
|
||||
value: PropTypes.any,
|
||||
onClick: PropTypes.func
|
||||
};
|
||||
|
||||
//---------------
|
||||
//Тело компонента
|
||||
//---------------
|
||||
|
||||
//Фильтр отбора
|
||||
const Filter = ({
|
||||
isFilterDialogOpen,
|
||||
filter,
|
||||
docLinks,
|
||||
selectedDocLink,
|
||||
onFilterChange,
|
||||
onDocLinksLoad,
|
||||
onFilterOpen,
|
||||
onFilterClose,
|
||||
onTasksReload,
|
||||
orders,
|
||||
onOrderChanged,
|
||||
...other
|
||||
}) => {
|
||||
//Состояние меню сортировки
|
||||
const [menuOrders, setMenuOrders] = useState({ anchorMenuOrders: null, openOrders: false });
|
||||
|
||||
//При нажатии на открытие меню сортировки
|
||||
const handleOrdersMenuButtonClick = event => {
|
||||
setMenuOrders(pv => ({ ...pv, anchorMenuOrders: event.currentTarget, openOrders: true }));
|
||||
};
|
||||
|
||||
//При закрытии меню
|
||||
const handleOrdersMenuClose = () => {
|
||||
setMenuOrders(pv => ({ ...pv, anchorMenuOrders: null, openOrders: false }));
|
||||
};
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<div>
|
||||
{isFilterDialogOpen ? (
|
||||
<FilterDialog
|
||||
initial={{ filter, docLinks }}
|
||||
// docLinks={docLinks}
|
||||
onFilterChange={onFilterChange}
|
||||
onFilterClose={onFilterClose}
|
||||
onDocLinksLoad={onDocLinksLoad}
|
||||
/>
|
||||
) : null}
|
||||
<Box {...other}>
|
||||
<Stack direction="row" spacing={1} p={1} alignItems={"center"} sx={STYLES.STACK_FILTER}>
|
||||
<IconButton title="Обновить" onClick={onTasksReload}>
|
||||
<Icon>refresh</Icon>
|
||||
</IconButton>
|
||||
<IconButton title="Сортировать" sx={STYLES.ICON_ORDERS(orders)} onClick={handleOrdersMenuButtonClick}>
|
||||
<Icon>sort</Icon>
|
||||
</IconButton>
|
||||
<IconButton title="Фильтр" onClick={onFilterOpen}>
|
||||
<Icon>filter_alt</Icon>
|
||||
</IconButton>
|
||||
<Stack direction="row" spacing={1} alignItems={"center"} sx={STYLES.FILTERS_STACK}>
|
||||
{filter.sState ? <FilterItem caption={"Состояние"} value={filter.sState} onClick={onFilterOpen} /> : null}
|
||||
{filter.sType ? <FilterItem caption={"Тип"} value={filter.sType} onClick={onFilterOpen} /> : null}
|
||||
{filter.sCrnName ? <FilterItem caption={"Каталог"} value={filter.sCrnName} onClick={onFilterOpen} /> : null}
|
||||
{filter.bSubcatalogs ? <FilterItem caption={"Включая подкаталоги"} onClick={onFilterOpen} /> : null}
|
||||
{filter.sSendPerson ? <FilterItem caption={"Исполнитель"} value={filter.sSendPerson} onClick={onFilterOpen} /> : null}
|
||||
{filter.sSendDivision ? <FilterItem caption={"Подразделение"} value={filter.sSendDivision} onClick={onFilterOpen} /> : null}
|
||||
{filter.sSendUsrGrp ? (
|
||||
<FilterItem caption={"Группа пользователей"} value={filter.sSendUsrGrp} onClick={onFilterOpen} />
|
||||
) : null}
|
||||
{filter.sDocLink && selectedDocLink ? (
|
||||
<FilterItem caption={"Учётный документ"} value={selectedDocLink.descr} onClick={onFilterOpen} />
|
||||
) : null}
|
||||
</Stack>
|
||||
</Stack>
|
||||
<SortMenu menuOrders={menuOrders} onOrdersMenuClose={handleOrdersMenuClose} orders={orders} onOrderChanged={onOrderChanged} />
|
||||
</Box>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств компонента - Фильтр отбора
|
||||
Filter.propTypes = {
|
||||
isFilterDialogOpen: PropTypes.bool.isRequired,
|
||||
filter: PropTypes.object.isRequired,
|
||||
docLinks: PropTypes.arrayOf(PropTypes.object),
|
||||
selectedDocLink: PropTypes.object,
|
||||
onFilterChange: PropTypes.func.isRequired,
|
||||
onDocLinksLoad: PropTypes.func,
|
||||
onFilterOpen: PropTypes.func.isRequired,
|
||||
onFilterClose: PropTypes.func.isRequired,
|
||||
onTasksReload: PropTypes.func.isRequired,
|
||||
orders: PropTypes.array,
|
||||
onOrderChanged: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//--------------------
|
||||
//Интерфейс компонента
|
||||
//--------------------
|
||||
|
||||
export { Filter };
|
||||
255
app/panels/clnt_task_board/hooks/dict_hooks.js
Normal file
255
app/panels/clnt_task_board/hooks/dict_hooks.js
Normal file
@ -0,0 +1,255 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Пользовательские хуки: Хуки открытия разделов
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import { useContext, useCallback } from "react"; //Классы React
|
||||
import { ApplicationСtx } from "../../../context/application"; //Контекст приложения
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Состояние открытия разделов
|
||||
const useDictionary = () => {
|
||||
//Подключение к контексту приложения
|
||||
const { pOnlineShowDictionary } = useContext(ApplicationСtx);
|
||||
|
||||
//Отображение раздела "Сотрудники"
|
||||
const handleClientPersonOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "ClientPersons",
|
||||
showMethod: "main",
|
||||
inputParameters: [{ name: "in_CODE", value: prms.sCode }],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Клиенты"
|
||||
const handleClientClientsOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "ClientClients",
|
||||
showMethod: "main",
|
||||
inputParameters: [{ name: "in_CLIENT_CODE", value: prms.sCode }],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Каталоги"
|
||||
const handleCatalogTreeOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "CatalogTree",
|
||||
showMethod: "main",
|
||||
inputParameters: [
|
||||
{ name: "in_DOCNAME", value: prms.sUnitName },
|
||||
{ name: "in_NAME", value: prms.sName }
|
||||
],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Типы событий"
|
||||
const handleEventTypesOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "ClientEventTypes",
|
||||
showMethod: "dictionary",
|
||||
inputParameters: [{ name: "pos_eventtypecode", value: prms.sCode }],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Контрагенты"
|
||||
const handleAgnlistOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "AGNLIST",
|
||||
showMethod: "agents",
|
||||
inputParameters: [{ name: "pos_agnmnemo", value: prms.sMnemo }],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Штатные подразделения"
|
||||
const handleInsDepartmentOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "INS_DEPARTMENT",
|
||||
inputParameters: [{ name: "in_CODE", value: prms.sCode }],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Нештатные структуры"
|
||||
const handleCostStaffGroupsOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "CostStaffGroups",
|
||||
inputParameters: [{ name: "in_CODE", value: prms.sCode }],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Дополнительные словари"
|
||||
const handleExtraDictionariesOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "ExtraDictionaries",
|
||||
showMethod: "values",
|
||||
inputParameters: [
|
||||
{ name: "pos_rn", value: prms.nRn },
|
||||
{ name: prms.sParamName, value: prms.paramValue }
|
||||
],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Маршруты событий (исполнители в точках)"
|
||||
const handleEventRoutesPointExecutersOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "EventRoutesPointExecuters",
|
||||
showMethod: "executers",
|
||||
inputParameters: prms.inputParameters,
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "События"
|
||||
const handleClientEventsOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "ClientEvents",
|
||||
inputParameters: [{ name: "in_Ident", value: prms.nIdent }]
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "События (примечания)"
|
||||
const handleClientEventsNotesOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "ClientEventsNotes",
|
||||
showMethod: "main",
|
||||
inputParameters: [{ name: "in_PRN", value: prms.nPrn }]
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Присоединенные документы"
|
||||
const handleFileLinksOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "FileLinks",
|
||||
showMethod: "main_link",
|
||||
inputParameters: [
|
||||
{ name: "in_PRN", value: prms.nPrn },
|
||||
{ name: "in_UNITCODE", value: prms.sUnitCode }
|
||||
]
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Отображение раздела "Маршруты событий (точки перехода)"
|
||||
const handleEventRoutesPointsPassessOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: "EventRoutesPointsPasses",
|
||||
showMethod: "main_passes",
|
||||
inputParameters: [
|
||||
{ name: "in_ENVTYPE_CODE", value: prms.sEventType },
|
||||
{ name: "in_ENVSTAT_CODE", value: prms.sEventStatus },
|
||||
{ name: "in_POINT", value: prms.nPoint }
|
||||
],
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
//Универсальное отображение раздела
|
||||
const handleUnitOpen = useCallback(
|
||||
async prms => {
|
||||
pOnlineShowDictionary({
|
||||
unitCode: prms.sUnitCode,
|
||||
showMethod: prms.sShowMethod,
|
||||
inputParameters: prms.inputParameters,
|
||||
callBack: res => {
|
||||
res.success ? prms.callBack(res) : null;
|
||||
}
|
||||
});
|
||||
},
|
||||
[pOnlineShowDictionary]
|
||||
);
|
||||
|
||||
return {
|
||||
handleClientPersonOpen,
|
||||
handleClientClientsOpen,
|
||||
handleCatalogTreeOpen,
|
||||
handleEventTypesOpen,
|
||||
handleAgnlistOpen,
|
||||
handleInsDepartmentOpen,
|
||||
handleCostStaffGroupsOpen,
|
||||
handleExtraDictionariesOpen,
|
||||
handleEventRoutesPointExecutersOpen,
|
||||
handleClientEventsOpen,
|
||||
handleClientEventsNotesOpen,
|
||||
handleFileLinksOpen,
|
||||
handleEventRoutesPointsPassessOpen,
|
||||
handleUnitOpen
|
||||
};
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { useDictionary };
|
||||
122
app/panels/clnt_task_board/hooks/filter_hooks.js
Normal file
122
app/panels/clnt_task_board/hooks/filter_hooks.js
Normal file
@ -0,0 +1,122 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Пользовательские хуки: Хуки фильтра
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import { useState, useEffect, useCallback } from "react"; //Классы React
|
||||
import { EVENT_STATES } from "../layouts"; //Перечисление состояний события
|
||||
import { getLocalStorageValue } from "../layouts"; //Вспомогательные функции
|
||||
|
||||
//--------------------------
|
||||
//Вспомогательные компоненты
|
||||
//--------------------------
|
||||
|
||||
//Проверка возможности загрузки данных фильтра из локального хранилища
|
||||
const isLocalStorageExists = () => {
|
||||
return getLocalStorageValue("sType");
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Хук фильтра
|
||||
//const useFilters = filterOpen => {
|
||||
const useFilters = () => {
|
||||
//Состояние фильтра
|
||||
const [filters, setFilters] = useState({
|
||||
loaded: false,
|
||||
isSetByUser: !isLocalStorageExists(),
|
||||
values: {
|
||||
sState: EVENT_STATES[1],
|
||||
sType: "",
|
||||
sCrnName: "",
|
||||
sCrnRnList: "",
|
||||
bSubcatalogs: false,
|
||||
sSendPerson: "",
|
||||
sSendDivision: "",
|
||||
sSendUsrGrp: "",
|
||||
sDocLink: ""
|
||||
}
|
||||
});
|
||||
|
||||
//Установить значение фильтра
|
||||
const setFilterValues = useCallback((values, isSetByUser = true) => {
|
||||
setFilters({ loaded: true, isSetByUser: isSetByUser, values: values });
|
||||
}, []);
|
||||
|
||||
//Загрузка значений фильтра из локального хранилища браузера
|
||||
const loadLocalStorageValues = useCallback(async () => {
|
||||
//Загружаем значения по умолчанию
|
||||
let values = { ...filters.values };
|
||||
//Обходим ключи объекта значений
|
||||
for (let key in values) {
|
||||
//Заполняем значениями из хранилища
|
||||
switch (key) {
|
||||
//Локальное хранилище не хранит булево, форматируем строку в булево
|
||||
case "bSubcatalogs":
|
||||
values[key] = getLocalStorageValue(key) === "true";
|
||||
break;
|
||||
//Не переносим информацию о связанных записях
|
||||
case "sDocLink":
|
||||
break;
|
||||
//Переносим все остальные значения
|
||||
default:
|
||||
values[key] = getLocalStorageValue(key, "");
|
||||
break;
|
||||
}
|
||||
}
|
||||
//Устанавливаем значения фильтра
|
||||
setFilterValues(values, false);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
//При изменении значений фильтра
|
||||
const handleFiltersChange = useCallback(
|
||||
filters => {
|
||||
setFilterValues(filters);
|
||||
},
|
||||
[setFilterValues]
|
||||
);
|
||||
|
||||
//Сохранение при закрытии панели
|
||||
useEffect(() => {
|
||||
//Обработка события закрытия
|
||||
const onBeforeUnload = () => {
|
||||
//Обходим ключи фильтра
|
||||
for (let key in filters.values) {
|
||||
//Если это не связи - сохраняем значение в хранилище
|
||||
key !== "sDocLink" ? localStorage.setItem(key, filters.values[key] ? filters.values[key] : "") : null;
|
||||
}
|
||||
};
|
||||
//Если данные были загружены и произошли изменения
|
||||
if (filters.loaded && filters.isSetByUser) {
|
||||
//Вешаем обработчик события закрытия
|
||||
window.addEventListener("beforeunload", onBeforeUnload);
|
||||
}
|
||||
//Очищаем при размонтировании
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", onBeforeUnload);
|
||||
};
|
||||
}, [filters.loaded, filters.isSetByUser, filters.values]);
|
||||
|
||||
//При подключении к странице
|
||||
useEffect(() => {
|
||||
//Если требуется загрузить фильтр из локального хранилища
|
||||
if (!filters.loaded && !filters.isSetByUser) {
|
||||
loadLocalStorageValues();
|
||||
}
|
||||
}, [filters.isSetByUser, filters.loaded, loadLocalStorageValues]);
|
||||
|
||||
return [filters, handleFiltersChange];
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { useFilters };
|
||||
243
app/panels/clnt_task_board/hooks/hooks.js
Normal file
243
app/panels/clnt_task_board/hooks/hooks.js
Normal file
@ -0,0 +1,243 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Пользовательские хуки: Хуки основных данных
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import { useState, useContext, useEffect, useCallback } from "react"; //Классы React
|
||||
import { BackEndСtx } from "../../../context/backend"; //Контекст взаимодействия с сервером
|
||||
import { getRandomColor, getLocalStorageValue } from "../layouts"; //Вспомогательные функции
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Хук дополнительных данных
|
||||
const useExtraData = filtersType => {
|
||||
//Состояние дополнительных данных
|
||||
const [extraData, setExtraData] = useState({
|
||||
dataLoaded: false,
|
||||
reload: false,
|
||||
typeLoaded: "",
|
||||
evRoutes: [],
|
||||
evPoints: [],
|
||||
noteTypes: [],
|
||||
docLinks: []
|
||||
});
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//Считывание учётных документов
|
||||
const handleDocLinksLoad = useCallback(
|
||||
async (type = filtersType) => {
|
||||
//Считываем данные
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_DOCLINKS_GET",
|
||||
args: {
|
||||
SEVNTYPE_CODE: type
|
||||
},
|
||||
isArray: name => name === "XDOCLINKS",
|
||||
respArg: "COUT"
|
||||
});
|
||||
//Возвращаем учётные документы
|
||||
return [...(data?.XDOCLINKS || [])];
|
||||
},
|
||||
[executeStored, filtersType]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
//Загрузка дополнительных данных
|
||||
const loadExtraData = async () => {
|
||||
//Считываем данные
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_GET_INFO_BY_CODE",
|
||||
args: {
|
||||
SEVNTYPE_CODE: filtersType
|
||||
},
|
||||
isArray: name => ["XEVROUTES", "XEVPOINTS", "XNOTETYPES"].includes(name),
|
||||
respArg: "COUT"
|
||||
});
|
||||
//Форматируем типы примечаний под нужный формат
|
||||
let noteTypes = [...(data?.XNOTETYPES || [])].reduce((prev, cur) => [...prev, cur.SNAME], []);
|
||||
//Считываем учётные документы
|
||||
let docLinks = await handleDocLinksLoad(filtersType);
|
||||
//Обновляем дополнительные данные
|
||||
setExtraData({
|
||||
dataLoaded: true,
|
||||
reload: false,
|
||||
typeLoaded: filtersType,
|
||||
evRoutes: [...(data?.XEVROUTES || [])],
|
||||
evPoints: [...(data?.XEVPOINTS || [])],
|
||||
noteTypes: [...noteTypes],
|
||||
docLinks: [...docLinks]
|
||||
});
|
||||
};
|
||||
|
||||
//Если указан тип событий и необходимо обновить
|
||||
if (extraData.reload && filtersType) {
|
||||
//Загружаем дополнительные данные
|
||||
if (!extraData.typeLoaded || filtersType !== extraData.typeLoaded) {
|
||||
loadExtraData();
|
||||
}
|
||||
}
|
||||
}, [executeStored, extraData.reload, extraData.typeLoaded, filtersType, handleDocLinksLoad]);
|
||||
|
||||
return [extraData, setExtraData, handleDocLinksLoad];
|
||||
};
|
||||
|
||||
//Хук заливок пользовательских настроек
|
||||
const useColorRules = () => {
|
||||
//Собственное состояние
|
||||
const [colorRules, setColorRules] = useState({
|
||||
loaded: false,
|
||||
rules: [],
|
||||
selectedColorRule: JSON.parse(getLocalStorageValue("settingsColorRule") || {})
|
||||
});
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//При необходимости загрузки заливок
|
||||
useEffect(() => {
|
||||
//Считывание пользовательских настроек
|
||||
let getColorRules = async () => {
|
||||
//Считываем данные
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_DP_RULES_GET",
|
||||
isArray: name => name === "XRULES",
|
||||
respArg: "COUT"
|
||||
});
|
||||
//Формируем массив правил заливки пользовательских настроек
|
||||
let newColorRules = [...(data.XRULES || [])].reduce(
|
||||
(prev, cur) => [
|
||||
...prev,
|
||||
{
|
||||
id: prev.length,
|
||||
SFIELD: cur.SFIELD,
|
||||
SDP_NAME: cur.SDP_NAME,
|
||||
SCOLOR: cur.SCOLOR,
|
||||
STYPE: cur.STYPE,
|
||||
fromValue: cur.NFROM ?? cur.SFROM ?? cur.DFROM,
|
||||
toValue: cur.NTO ?? cur.STO ?? cur.DTO
|
||||
}
|
||||
],
|
||||
[]
|
||||
);
|
||||
//Устанавливаем заливки пользовательских настроек
|
||||
setColorRules(pv => ({ ...pv, loaded: true, rules: [...newColorRules] }));
|
||||
};
|
||||
|
||||
if (!colorRules.loaded) getColorRules();
|
||||
}, [colorRules.loaded, executeStored]);
|
||||
|
||||
//Сохранение при закрытии панели
|
||||
useEffect(() => {
|
||||
//Обработка события закрытия
|
||||
const onBeforeUnload = () => {
|
||||
localStorage.setItem("settingsColorRule", JSON.stringify(colorRules.selectedColorRule));
|
||||
};
|
||||
//Вешаем обработчик события закрытия
|
||||
window.addEventListener("beforeunload", onBeforeUnload);
|
||||
//Очищаем при размонтировании
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", onBeforeUnload);
|
||||
};
|
||||
}, [colorRules.selectedColorRule]);
|
||||
|
||||
return [colorRules, setColorRules];
|
||||
};
|
||||
|
||||
//Хук статусов событий
|
||||
const useStatuses = filterType => {
|
||||
//Собственное состояние статусов
|
||||
const [statuses, setStatuses] = useState([]);
|
||||
|
||||
//Состояние статусов
|
||||
const [statusesState, setStatusesState] = useState({
|
||||
sorted: false,
|
||||
reload: true,
|
||||
attr: getLocalStorageValue("statusesSortAttr", "SEVNSTAT_NAME"),
|
||||
direction: getLocalStorageValue("statusesSortDirection", "asc")
|
||||
});
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//При необходимости сортировки статусов
|
||||
useEffect(() => {
|
||||
//Сортируем статусы
|
||||
const sortStatuses = unsortedStatuses => {
|
||||
//Инициализируем поле сортировки и порядок сортировки
|
||||
const attr = statusesState.attr;
|
||||
const direction = statusesState.direction;
|
||||
//Сортируем
|
||||
let sortedStatuses = unsortedStatuses.sort((a, b) =>
|
||||
direction === "asc" ? a[attr].localeCompare(b[attr]) : b[attr].localeCompare(a[attr])
|
||||
);
|
||||
//Возвращаем
|
||||
return sortedStatuses;
|
||||
};
|
||||
//Загружаем и сортируем статусы
|
||||
const loadAndSortStatuses = async filterType => {
|
||||
//Инициализируем статусы
|
||||
let newStatuses = [];
|
||||
//Если требуется перезагрузка
|
||||
if (statusesState.reload) {
|
||||
const loadedStatuses = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVNSTATS_LOAD",
|
||||
args: {
|
||||
SCLNEVNTYPES: filterType
|
||||
},
|
||||
isArray: name => name === "XSTATUS",
|
||||
respArg: "COUT"
|
||||
});
|
||||
//Загружаем статусы и инициализируем цвета
|
||||
newStatuses = [...(loadedStatuses?.XSTATUS || [])].reduce(
|
||||
(prev, cur) => [...prev, { ...cur, color: getRandomColor(prev.length + 1) }],
|
||||
[]
|
||||
);
|
||||
} else {
|
||||
//Загружаем из состояния
|
||||
newStatuses = [...statuses];
|
||||
}
|
||||
//Сортируем, если требуется
|
||||
newStatuses = !statusesState.sorted ? sortStatuses(newStatuses) : newStatuses;
|
||||
//Обновляем состояние статусов
|
||||
setStatuses([...newStatuses]);
|
||||
//Обновляем информацию о состоянии статусов
|
||||
setStatusesState(pv => ({ ...pv, sorted: true, reload: false }));
|
||||
};
|
||||
//При необходимости изменения сортировки
|
||||
if (filterType && (statusesState.reload || !statusesState.sorted)) {
|
||||
//Считываем старые статусы или загружаем новые
|
||||
loadAndSortStatuses(filterType);
|
||||
}
|
||||
}, [executeStored, filterType, statuses, statusesState.attr, statusesState.direction, statusesState.reload, statusesState.sorted]);
|
||||
|
||||
//Сохранение при закрытии панели
|
||||
useEffect(() => {
|
||||
//Обработка события закрытия
|
||||
const onBeforeUnload = () => {
|
||||
localStorage.setItem("statusesSortAttr", statusesState.attr);
|
||||
localStorage.setItem("statusesSortDirection", statusesState.direction);
|
||||
};
|
||||
//Вешаем обработчик события закрытия
|
||||
window.addEventListener("beforeunload", onBeforeUnload);
|
||||
//Очищаем при размонтировании
|
||||
return () => {
|
||||
window.removeEventListener("beforeunload", onBeforeUnload);
|
||||
};
|
||||
}, [statusesState.attr, statusesState.direction]);
|
||||
|
||||
return [statuses, statusesState, setStatuses, setStatusesState];
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { useExtraData, useColorRules, useStatuses };
|
||||
191
app/panels/clnt_task_board/hooks/task_dialog_hooks.js
Normal file
191
app/panels/clnt_task_board/hooks/task_dialog_hooks.js
Normal file
@ -0,0 +1,191 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Пользовательские хуки: Хуки диалога события
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import { useState, useContext, useEffect } from "react"; //Классы React
|
||||
import { BackEndСtx } from "../../../context/backend"; //Контекст взаимодействия с сервером
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Хук для события
|
||||
const useClientEvent = (taskRn, taskType = "", taskStatus = "") => {
|
||||
//Собственное состояние
|
||||
const [task, setTask] = useState({
|
||||
init: true,
|
||||
nRn: taskRn,
|
||||
sCrn: "",
|
||||
sPrefix: "",
|
||||
sNumber: "",
|
||||
sType: taskType,
|
||||
sStatus: taskStatus,
|
||||
sDescription: "",
|
||||
sClntClients: "",
|
||||
sClntClnperson: "",
|
||||
dStartDate: "",
|
||||
sInitClnperson: "",
|
||||
sInitUser: "",
|
||||
sInitReason: "",
|
||||
sToCompany: "",
|
||||
sToDepartment: "",
|
||||
sToClnpost: "",
|
||||
sToClnpsdep: "",
|
||||
sToClnperson: "",
|
||||
sToFcstaffgrp: "",
|
||||
sToUser: "",
|
||||
sToUsergrp: "",
|
||||
sCurrentUser: "",
|
||||
isUpdate: false,
|
||||
insertDisabled: true,
|
||||
updateDisabled: true,
|
||||
docProps: {}
|
||||
});
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//При инициализации события
|
||||
useEffect(() => {
|
||||
//Если это инициализация
|
||||
if (task.init) {
|
||||
//Если указан рег. номер события
|
||||
if (taskRn) {
|
||||
//Считывание параметров события
|
||||
const readEvent = async () => {
|
||||
//Считываем информацию о событии по рег. номеру
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_GET",
|
||||
args: {
|
||||
NCLNEVENTS: task.nRn
|
||||
},
|
||||
respArg: "COUT"
|
||||
});
|
||||
//Фильтруем доп. свойства
|
||||
let docProps = Object.keys(data.XEVENT)
|
||||
.filter(key => key.includes("DP_"))
|
||||
.reduce((prev, key) => ({ ...prev, [key]: data.XEVENT[key] }), {});
|
||||
//Устанавливаем информацию о событии
|
||||
setTask(pv => ({
|
||||
...pv,
|
||||
sCrn: data.XEVENT.SCRN,
|
||||
sPrefix: data.XEVENT.SPREF,
|
||||
sNumber: data.XEVENT.SNUMB,
|
||||
sType: data.XEVENT.STYPE,
|
||||
sStatus: data.XEVENT.SSTATUS,
|
||||
sDescription: data.XEVENT.SDESCRIPTION,
|
||||
sClntClients: data.XEVENT.SCLIENT_CLIENT,
|
||||
sClntClnperson: data.XEVENT.SCLIENT_PERSON,
|
||||
dPlanDate: data.XEVENT.SPLAN_DATE,
|
||||
sInitClnperson: data.XEVENT.SINIT_PERSON,
|
||||
sInitUser: data.XEVENT.SINIT_AUTHID,
|
||||
sInitReason: data.XEVENT.SREASON,
|
||||
sToCompany: data.XEVENT.SSEND_CLIENT,
|
||||
sToDepartment: data.XEVENT.SSEND_DIVISION,
|
||||
sToClnpost: data.XEVENT.SSEND_POST,
|
||||
sToClnpsdep: data.XEVENT.SSEND_PERFORM,
|
||||
sToClnperson: data.XEVENT.SSEND_PERSON,
|
||||
sToFcstaffgrp: data.XEVENT.SSEND_STAFFGRP,
|
||||
sToUser: data.XEVENT.SSEND_USER_NAME,
|
||||
sToUsergrp: data.XEVENT.SSEND_USER_GROUP,
|
||||
sCurrentUser: data.XEVENT.SINIT_AUTHID,
|
||||
isUpdate: true,
|
||||
init: false,
|
||||
docProps: docProps
|
||||
}));
|
||||
};
|
||||
//Инициализация параметров события
|
||||
readEvent();
|
||||
} else {
|
||||
//Считывание изначальных параметров события
|
||||
const initEvent = async () => {
|
||||
//Инициализируем параметры события
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_INIT",
|
||||
args: {
|
||||
SEVENT_TYPE: task.sType
|
||||
}
|
||||
});
|
||||
//Если есть данные
|
||||
if (data) {
|
||||
//Устанавливаем данные по событию
|
||||
setTask(pv => ({
|
||||
...pv,
|
||||
sPrefix: data.SPREF,
|
||||
sNumber: data.SNUMB,
|
||||
sCurrentUser: data.SINIT_AUTHNAME,
|
||||
sInitClnperson: data.SINIT_PERSON,
|
||||
sInitUser: !data.SINIT_PERSON ? data.SINIT_AUTHNAME : "",
|
||||
init: false
|
||||
}));
|
||||
}
|
||||
};
|
||||
//Инициализация изначальных параметров события
|
||||
initEvent();
|
||||
}
|
||||
}
|
||||
if (!task.init) {
|
||||
setTask(pv => ({ ...pv, sInitUser: !task.sInitClnperson ? task.sCurrentUser : "" }));
|
||||
}
|
||||
}, [executeStored, task.init, task.nRn, task.sType, task.sCurrentUser, task.sInitClnperson, taskRn]);
|
||||
|
||||
//Проверка доступности действия
|
||||
useEffect(() => {
|
||||
setTask(pv => ({
|
||||
...pv,
|
||||
insertDisabled:
|
||||
!task.sCrn ||
|
||||
!task.sPrefix ||
|
||||
!task.sNumber ||
|
||||
!task.sType ||
|
||||
!task.sStatus ||
|
||||
!task.sDescription ||
|
||||
(!task.sInitClnperson && !task.sInitUser),
|
||||
updateDisabled: !task.sDescription
|
||||
}));
|
||||
}, [task.sCrn, task.sDescription, task.sInitClnperson, task.sInitUser, task.sNumber, task.sPrefix, task.sStatus, task.sType]);
|
||||
|
||||
return [task, setTask];
|
||||
};
|
||||
|
||||
//Хук для получения свойств раздела "События"
|
||||
const useDocsProps = taskType => {
|
||||
//Собственное состояние
|
||||
const [docProps, setDocsProps] = useState({ loaded: false, props: [] });
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
useEffect(() => {
|
||||
//Загрузка доп. свойств
|
||||
let getDocsProps = async () => {
|
||||
//Считываема доп. свойства по типу события
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_PROPS_GET",
|
||||
args: { SEVNTYPE_CODE: taskType },
|
||||
isArray: name => name === "XPROPS",
|
||||
respArg: "COUT"
|
||||
});
|
||||
//Устанавливаем доп. свойства
|
||||
setDocsProps({ loaded: true, props: [...(data?.XPROPS || [])] });
|
||||
};
|
||||
//Если доп. свойства не загружены
|
||||
if (!docProps.loaded) {
|
||||
//Загружаем доп. свойства
|
||||
getDocsProps();
|
||||
}
|
||||
}, [docProps.loaded, executeStored, taskType]);
|
||||
|
||||
return [docProps];
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { useClientEvent, useDocsProps };
|
||||
431
app/panels/clnt_task_board/hooks/tasks_hooks.js
Normal file
431
app/panels/clnt_task_board/hooks/tasks_hooks.js
Normal file
@ -0,0 +1,431 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Пользовательские хуки: Хуки событий
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import { useState, useContext, useEffect, useCallback } from "react"; //Классы React
|
||||
import { BackEndСtx } from "../../../context/backend"; //Контекст взаимодействия с сервером
|
||||
import { object2Base64XML } from "../../../core/utils"; //Вспомогательные функции
|
||||
import { convertFilterValuesToArray } from "../layouts"; //Вспомогательные функции
|
||||
import { useDictionary } from "./dict_hooks"; //Состояние открытия разделов
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Хук обработки перехода события
|
||||
const useTasksFunctions = () => {
|
||||
//Состояние открытия раздела
|
||||
const { handleEventRoutesPointExecutersOpen, handleEventRoutesPointsPassessOpen } = useDictionary();
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored } = useContext(BackEndСtx);
|
||||
|
||||
//Выполнение направления события
|
||||
const handleSendExec = useCallback(
|
||||
//Выполняем финальное перенаправление события
|
||||
async ({ mainArgs, onReload = null }) => {
|
||||
await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_SEND",
|
||||
args: { ...mainArgs }
|
||||
});
|
||||
//Если требуется перезагрузить данные
|
||||
onReload ? onReload() : null;
|
||||
},
|
||||
[executeStored]
|
||||
);
|
||||
|
||||
//При направлении события
|
||||
const handleSend = useCallback(
|
||||
async ({ mainArgs, onReload = null, onNoteOpen = null }) => {
|
||||
//Если требуется добавить примечание
|
||||
if (onNoteOpen) {
|
||||
//Открываем примечание с коллбэком на направление события
|
||||
onNoteOpen(async note => {
|
||||
//Выполняем изменение статуса
|
||||
handleSendExec({ mainArgs: { ...mainArgs, SNOTE_HEADER: note.header, SNOTE: note.text }, onReload });
|
||||
});
|
||||
} else {
|
||||
//Выполняем изменение статуса
|
||||
handleSendExec({ mainArgs, onReload });
|
||||
}
|
||||
},
|
||||
[handleSendExec]
|
||||
);
|
||||
|
||||
//По нажатию действия "Направить"
|
||||
const handleTaskSend = useCallback(
|
||||
async ({ nEvent, onReload = null, onNoteOpen = null }) => {
|
||||
//Выполняем инициализацию параметров
|
||||
const firstStep = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_SEND",
|
||||
args: {
|
||||
NSTEP: 1,
|
||||
NEVENT: nEvent
|
||||
}
|
||||
});
|
||||
if (firstStep) {
|
||||
//Открываем раздел "Маршруты событий (исполнители в точках)" для выбора исполнителя
|
||||
handleEventRoutesPointExecutersOpen({
|
||||
inputParameters: [
|
||||
{ name: "in_IDENT", value: firstStep.NIDENT },
|
||||
{ name: "in_EVENT", value: nEvent },
|
||||
{ name: "in_PERSON_CODE", value: firstStep.SSEND_PERSON },
|
||||
{ name: "in_USER_NAME", value: firstStep.SSEND_USER_NAME },
|
||||
{ name: "in_EVENT_TYPE", value: firstStep.SEVENT_TYPE },
|
||||
{ name: "in_EVENT_STAT", value: firstStep.SEVENT_STAT },
|
||||
{ name: "in_INIT_PERSON", value: firstStep.SINIT_PERSON },
|
||||
{ name: "in_INIT_AUTHNAME", value: firstStep.SINIT_AUTHNAME },
|
||||
{ name: "in_CLIENT_CLIENT", value: firstStep.SCLIENT_CLIENT },
|
||||
{ name: "in_CLIENT_PERSON", value: firstStep.SCLIENT_PERSON }
|
||||
],
|
||||
callBack: sendPrms => {
|
||||
//Собираем основные параметры направления события
|
||||
const mainArgs = {
|
||||
NIDENT: firstStep.NIDENT,
|
||||
NSTEP: 2,
|
||||
NEVENT: nEvent,
|
||||
SSEND_CLIENT: sendPrms.outParameters.out_CLIENT_CODE,
|
||||
SSEND_DIVISION: sendPrms.outParameters.out_DIVISION_CODE,
|
||||
SSEND_POST: sendPrms.outParameters.out_POST_CODE,
|
||||
SSEND_PERFORM: sendPrms.outParameters.out_POST_IN_DIV_CODE,
|
||||
SSEND_PERSON: sendPrms.outParameters.out_PERSON_CODE,
|
||||
SSEND_STAFFGRP: sendPrms.outParameters.out_STAFFGRP_CODE,
|
||||
SSEND_USER_GROUP: sendPrms.outParameters.out_USER_GROUP_CODE,
|
||||
SSEND_USER_NAME: sendPrms.outParameters.out_USER_NAME,
|
||||
NSEND_PREDEFINED_EXEC: sendPrms.outParameters.out_PREDEFINED_EXEC,
|
||||
NSEND_PREDEFINED_PROC: sendPrms.outParameters.out_PREDEFINED_PROC
|
||||
};
|
||||
//Перенаправляем событие
|
||||
handleSend({ nEvent, mainArgs, onReload, onNoteOpen });
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
[executeStored, handleEventRoutesPointExecutersOpen, handleSend]
|
||||
);
|
||||
|
||||
//Выполнение изменения статуса события
|
||||
const handleStateChangeExec = useCallback(
|
||||
async ({ mainArgs, onReload = null }) => {
|
||||
await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_STATE_CHANGE",
|
||||
args: { ...mainArgs }
|
||||
});
|
||||
//Если требуется перезагрузить данные
|
||||
onReload ? onReload() : null;
|
||||
},
|
||||
[executeStored]
|
||||
);
|
||||
|
||||
//При изменении статуса события
|
||||
const handleStateChange = useCallback(
|
||||
async ({ mainArgs, onReload = null, onNoteOpen = null }) => {
|
||||
//Если необходимо добавить примечание
|
||||
if (onNoteOpen) {
|
||||
//Открываем примечание с коллбэком на изменение статуса
|
||||
onNoteOpen(async note => {
|
||||
//Выполняем изменение статуса
|
||||
handleStateChangeExec({ mainArgs: { ...mainArgs, SNOTE_HEADER: note.header, SNOTE: note.text }, onReload });
|
||||
});
|
||||
} else {
|
||||
//Выполняем изменение статуса
|
||||
handleStateChangeExec({ mainArgs, onReload });
|
||||
}
|
||||
},
|
||||
[handleStateChangeExec]
|
||||
);
|
||||
|
||||
//При выборе исполнителя
|
||||
const handleExecuterSelect = useCallback(
|
||||
async ({ nEvent, pointInfo, onReload = null, onNoteOpen = null }) => {
|
||||
//Если требуется выбрать получателя
|
||||
if (pointInfo.NSELECT_EXEC === 1) {
|
||||
//Открываем раздел "Маршруты событий (исполнители в точках)" для выбора исполнителя
|
||||
handleEventRoutesPointExecutersOpen({
|
||||
inputParameters: [
|
||||
{ name: "in_IDENT", value: pointInfo.NIDENT },
|
||||
{ name: "in_EVENT", value: nEvent },
|
||||
{ name: "in_EVENT_TYPE", value: pointInfo.SEVENT_TYPE },
|
||||
{ name: "in_EVENT_STAT", value: pointInfo.SEVENT_STAT },
|
||||
{ name: "in_INIT_PERSON", value: pointInfo.SINIT_PERSON },
|
||||
{ name: "in_INIT_AUTHNAME", value: pointInfo.SINIT_AUTHNAME },
|
||||
{ name: "in_CLIENT_CLIENT", value: pointInfo.SCLIENT_CLIENT },
|
||||
{ name: "in_CLIENT_PERSON", value: pointInfo.SCLIENT_PERSON }
|
||||
],
|
||||
callBack: sendPrms => {
|
||||
const mainArgs = {
|
||||
NIDENT: pointInfo.NIDENT,
|
||||
NSTEP: 3,
|
||||
NEVENT: nEvent,
|
||||
SEVENT_STAT: pointInfo.SEVENT_STAT,
|
||||
SSEND_CLIENT: sendPrms.outParameters.out_CLIENT_CODE,
|
||||
SSEND_DIVISION: sendPrms.outParameters.out_DIVISION_CODE,
|
||||
SSEND_POST: sendPrms.outParameters.out_POST_CODE,
|
||||
SSEND_PERFORM: sendPrms.outParameters.out_POST_IN_DIV_CODE,
|
||||
SSEND_PERSON: sendPrms.outParameters.out_PERSON_CODE,
|
||||
SSEND_STAFFGRP: sendPrms.outParameters.out_STAFFGRP_CODE,
|
||||
SSEND_USER_GROUP: sendPrms.outParameters.out_USER_GROUP_CODE,
|
||||
SSEND_USER_NAME: sendPrms.outParameters.out_USER_NAME,
|
||||
NSEND_PREDEFINED_EXEC: sendPrms.outParameters.out_PREDEFINED_EXEC,
|
||||
NSEND_PREDEFINED_PROC: sendPrms.outParameters.out_PREDEFINED_PROC
|
||||
};
|
||||
//Выполняем изменение статуса
|
||||
handleStateChange({ mainArgs, onReload, onNoteOpen });
|
||||
}
|
||||
});
|
||||
} else {
|
||||
//Общие аргументы
|
||||
const mainArgs = {
|
||||
NIDENT: pointInfo.NIDENT,
|
||||
NSTEP: 3,
|
||||
NEVENT: nEvent,
|
||||
SEVENT_STAT: pointInfo.SEVENT_STAT
|
||||
};
|
||||
//Выполняем изменение статуса
|
||||
handleStateChange({ mainArgs, onReload, onNoteOpen });
|
||||
}
|
||||
},
|
||||
[handleEventRoutesPointExecutersOpen, handleStateChange]
|
||||
);
|
||||
|
||||
//При выполнении второго шага
|
||||
const handleMakeSecondStep = useCallback(
|
||||
async ({ nIdent, nPass }) => {
|
||||
//Выполняем переход на следующий шаг
|
||||
const secondStep = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_STATE_CHANGE",
|
||||
args: {
|
||||
NIDENT: nIdent,
|
||||
NSTEP: 2,
|
||||
NPASS: nPass
|
||||
}
|
||||
});
|
||||
//Возвращаем параметры выполнения
|
||||
return secondStep;
|
||||
},
|
||||
[executeStored]
|
||||
);
|
||||
|
||||
//При выборе следующей точки события
|
||||
const handleNextPointSelect = useCallback(
|
||||
({ nEvent, pointInfo, onReload = null, onNoteOpen = null }) => {
|
||||
//Открываем раздел "Маршруты событий (точки перехода)" для выбора следующей точки
|
||||
handleEventRoutesPointsPassessOpen({
|
||||
sEventType: pointInfo.SEVENT_TYPE,
|
||||
sEventStatus: pointInfo.SEVENT_STAT,
|
||||
nPoint: pointInfo.NPOINT,
|
||||
callBack: async point => {
|
||||
//Выполняем второй шаг
|
||||
let secondStep = await handleMakeSecondStep({ nIdent: pointInfo.NIDENT, nPass: point.outParameters.out_RN });
|
||||
//Выполняем выбор исполнителя
|
||||
handleExecuterSelect({
|
||||
nEvent,
|
||||
pointInfo: { ...pointInfo, SEVENT_STAT: point.outParameters.out_NEXT_POINT, NSELECT_EXEC: secondStep.NSELECT_EXEC },
|
||||
onReload,
|
||||
onNoteOpen
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
[handleEventRoutesPointsPassessOpen, handleMakeSecondStep, handleExecuterSelect]
|
||||
);
|
||||
|
||||
//По нажатию действия "Перейти"
|
||||
const handleTaskStateChange = useCallback(
|
||||
async ({ nEvent, sNextStat = null, onReload = null, onNoteOpen = null }) => {
|
||||
//Выполняем инициализацию параметров
|
||||
const eventInfo = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_STATE_CHANGE",
|
||||
args: {
|
||||
NSTEP: 1,
|
||||
NEVENT: nEvent,
|
||||
SNEXT_STAT: sNextStat
|
||||
}
|
||||
});
|
||||
//Если информация о события проинициализирована
|
||||
if (eventInfo) {
|
||||
//Если следующий статус неопределен
|
||||
if (!sNextStat) {
|
||||
//Выполнение перехода с выбором точки
|
||||
handleNextPointSelect({
|
||||
nEvent,
|
||||
pointInfo: eventInfo,
|
||||
onReload,
|
||||
onNoteOpen
|
||||
});
|
||||
} else {
|
||||
//Выполняем перехода без выбора точки
|
||||
handleExecuterSelect({
|
||||
nEvent,
|
||||
pointInfo: eventInfo,
|
||||
onReload,
|
||||
onNoteOpen
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
[executeStored, handleExecuterSelect, handleNextPointSelect]
|
||||
);
|
||||
|
||||
return { handleTaskStateChange, handleTaskSend };
|
||||
};
|
||||
|
||||
//Хук получения событий
|
||||
const useTasks = (filterValues, ordersValues) => {
|
||||
//Состояние событий
|
||||
const [tasks, setTasks] = useState({
|
||||
loaded: false,
|
||||
rows: [],
|
||||
reload: false,
|
||||
accountsReload: false,
|
||||
loadedAccounts: []
|
||||
});
|
||||
|
||||
//Состояние вспомогательных функций событий
|
||||
const { handleTaskStateChange } = useTasksFunctions();
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx);
|
||||
|
||||
//Инициализация параметров события
|
||||
const initTask = (id, task, avatar = null) => {
|
||||
//Фильтруем доп. свойства
|
||||
let newDocProps = Object.keys(task)
|
||||
.filter(key => key.includes("DP_"))
|
||||
.reduce((prev, key) => ({ ...prev, [key]: task[key] }), {});
|
||||
//Возвращаем структуру события
|
||||
return {
|
||||
id: id,
|
||||
avatar: avatar,
|
||||
name: task.SPREF_NUMB,
|
||||
nRn: task.NRN,
|
||||
sCrn: "",
|
||||
sPrefix: task.SEVPREF,
|
||||
sNumber: task.SEVNUMB,
|
||||
sType: task.SEVTYPE_CODE,
|
||||
sStatus: task.SEVSTAT_NAME,
|
||||
sDescription: task.SEVDESCR,
|
||||
sClntClients: "",
|
||||
sClntClnperson: "",
|
||||
dchange_date: task.DCHANGE_DATE,
|
||||
dStartDate: task.DREG_DATE,
|
||||
dExpireDate: task.DEXPIRE_DATE,
|
||||
dPlanDate: task.DPLAN_DATE,
|
||||
sInitClnperson: task.SINIT_PERSON,
|
||||
sInitUser: "",
|
||||
sInitReason: "",
|
||||
sToCompany: "",
|
||||
sToDepartment: task.SSEND_DIVISION,
|
||||
sToClnpost: "",
|
||||
sToClnpsdep: "",
|
||||
sToClnperson: task.SSEND_PERSON,
|
||||
sToFcstaffgrp: "",
|
||||
sToUser: "",
|
||||
sToUsergrp: task.SSEND_USRGRP,
|
||||
sSender: task.SSENDER,
|
||||
sCurrentUser: "",
|
||||
sLinkedUnit: task.SLINKED_UNIT,
|
||||
nLinkedRn: task.NLINKED_RN,
|
||||
docProps: newDocProps
|
||||
};
|
||||
};
|
||||
|
||||
//Взаимодействие с событием (через перенос)
|
||||
const onDragEnd = useCallback(
|
||||
({ path, eventPoints, openNoteDialog, destCode }) => {
|
||||
//Определяем нужные параметры
|
||||
const { source, destination } = path;
|
||||
//Если путь не указан
|
||||
if (!destination) {
|
||||
return;
|
||||
}
|
||||
//Если происходит изменение статуса
|
||||
if (destination.droppableId !== source.droppableId) {
|
||||
//Конвертим ID переносимого события
|
||||
let nDraggableTaskId = parseInt(path.draggableId);
|
||||
//Считываем строку, у которой изменяется статус
|
||||
let task = tasks.rows.find(r => r.id === nDraggableTaskId);
|
||||
//Изменяем статус у события
|
||||
task.statusId = parseInt(path.destination.droppableId);
|
||||
//Получение настройки точки назначения
|
||||
const pointSettings = eventPoints.find(eventPoint => eventPoint.SEVPOINT === destCode);
|
||||
//Изменяем статус события с добавлением примечания
|
||||
handleTaskStateChange({
|
||||
nEvent: task.nRn,
|
||||
sNextStat: destCode,
|
||||
onReload: () => setTasks(pv => ({ ...pv, reload: true, accountsReload: true })),
|
||||
onNoteOpen: pointSettings.ADDNOTE_ONCHST ? openNoteDialog : null
|
||||
});
|
||||
}
|
||||
},
|
||||
[handleTaskStateChange, tasks.rows]
|
||||
);
|
||||
|
||||
//При необходимости перезагрузки данных
|
||||
useEffect(() => {
|
||||
//Считывание данных с учетом фильтрации
|
||||
let getTasks = async () => {
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_LOAD",
|
||||
args: {
|
||||
CFILTERS: {
|
||||
VALUE: object2Base64XML(convertFilterValuesToArray(filterValues), { arrayNodeName: "filters" }),
|
||||
SDATA_TYPE: SERV_DATA_TYPE_CLOB
|
||||
},
|
||||
CORDERS: { VALUE: object2Base64XML(ordersValues, { arrayNodeName: "orders" }), SDATA_TYPE: SERV_DATA_TYPE_CLOB },
|
||||
NINCLUDE_ACCOUNTS: tasks.accountsReload ? 1 : 0
|
||||
},
|
||||
isArray: name => name === "XAGENTS",
|
||||
respArg: "COUT"
|
||||
});
|
||||
//Считываем информацию о событиях
|
||||
let events = data.XCLNEVENTS.XDATA.XDATA_GRID;
|
||||
//Считываем иноформацию о контрагентах
|
||||
let accounts = tasks.accountsReload ? [...(data.XAGENTS_WITH_IMG.XAGENTS || [])] : tasks.loadedAccounts;
|
||||
//Инициализируем события
|
||||
let newRows = [];
|
||||
//Если есть события
|
||||
if (events.rows) {
|
||||
//Формируем структуру событий
|
||||
newRows = [...(events.rows || [])].reduce(
|
||||
(prev, cur) => [...prev, initTask(prev.length, cur, accounts.find(agent => agent.SAGNABBR === cur.SSENDER)?.BIMAGE)],
|
||||
[]
|
||||
);
|
||||
}
|
||||
//Возвращаем информацию
|
||||
return { rows: [...newRows], loadedAccounts: accounts };
|
||||
};
|
||||
//Считывание данных
|
||||
let getData = async () => {
|
||||
//Считываем информацию о задачах
|
||||
let eventTasks = await getTasks();
|
||||
//Загружаем данные
|
||||
setTasks(pv => ({
|
||||
...pv,
|
||||
loaded: true,
|
||||
rows: eventTasks.rows,
|
||||
loadedAccounts: eventTasks.loadedAccounts,
|
||||
reload: false,
|
||||
accountsReload: false
|
||||
}));
|
||||
};
|
||||
//Если необходимо загрузить данные и указан тип событий и загружены все необходимые вспомогательные данные
|
||||
if (tasks.reload) {
|
||||
//Загружаем данные
|
||||
getData();
|
||||
}
|
||||
}, [SERV_DATA_TYPE_CLOB, executeStored, filterValues, ordersValues, tasks.accountsReload, tasks.loadedAccounts, tasks.reload]);
|
||||
|
||||
return [tasks, setTasks, onDragEnd];
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { useTasksFunctions, useTasks };
|
||||
16
app/panels/clnt_task_board/index.js
Normal file
16
app/panels/clnt_task_board/index.js
Normal file
@ -0,0 +1,16 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Панель мониторинга: Точка входа
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import { ClntTaskBoard } from "./clnt_task_board"; //Корневая панель выполнения работ
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export const RootClass = ClntTaskBoard;
|
||||
294
app/panels/clnt_task_board/layouts.js
Normal file
294
app/panels/clnt_task_board/layouts.js
Normal file
@ -0,0 +1,294 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Дополнительная разметка и вёрстка клиентских элементов
|
||||
*/
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Перечисление "Состояние события"
|
||||
export const EVENT_STATES = Object.freeze({ 0: "Все", 1: "Не аннулированные", 2: "Аннулированные" });
|
||||
|
||||
//Допустимые значение поля сортировки
|
||||
export const sortAttrs = [
|
||||
{ id: "SEVNSTAT_CODE", descr: "Мнемокод" },
|
||||
{ id: "SEVNSTAT_NAME", descr: "Наименование" },
|
||||
{ id: "SEVPOINT_DESCR", descr: "Описание точки маршрута" }
|
||||
];
|
||||
|
||||
//Допустимые значения направления сортировки
|
||||
export const sortDest = [];
|
||||
sortDest[-1] = "desc";
|
||||
sortDest[1] = "asc";
|
||||
|
||||
//Цвета статусов
|
||||
export const COLORS = [
|
||||
"mediumSlateBlue",
|
||||
"lightSalmon",
|
||||
"fireBrick",
|
||||
"orange",
|
||||
"gold",
|
||||
"limeGreen",
|
||||
"yellowGreen",
|
||||
"mediumAquaMarine",
|
||||
"paleTurquoise",
|
||||
"steelBlue",
|
||||
"skyBlue",
|
||||
"tan"
|
||||
];
|
||||
|
||||
//Перечисление "Цвет задачи"
|
||||
export const TASK_COLORS = Object.freeze({ EXPIRED: "#ff0000", EXPIRES_SOON: "#ffdf00", LINKED: "#1e90ff" });
|
||||
|
||||
//Перечисление Доп. свойства "Значение по умолчанию"
|
||||
export const DP_DEFAULT_VALUE = Object.freeze({ 0: "SDEFAULT_STR", 1: "NDEFAULT_NUM", 2: "DDEFAULT_DATE", 3: "NDEFAULT_NUM" });
|
||||
//Перечисление Доп. свойства "Префикс формата данных"
|
||||
export const DP_TYPE_PREFIX = Object.freeze({ 0: "S", 1: "N", 2: "D", 3: "N" });
|
||||
//Перечисление Доп. свойства "Входящее значение дополнительного словаря"
|
||||
export const DP_IN_VALUE = Object.freeze({ 0: "pos_str_value", 1: "pos_num_value", 2: "pos_date_value", 3: "pos_num_value" });
|
||||
//Перечисление Доп. свойства "Исходящее значение дополнительного словаря"
|
||||
export const DP_RETURN_VALUE = Object.freeze({ 0: "str_value", 1: "num_value", 2: "date_value", 3: "num_value" });
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Формирование массива из 0, 1 и более элементов
|
||||
export const makeArray = arr => {
|
||||
return arr ? (arr.length ? arr : [arr]) : [];
|
||||
};
|
||||
|
||||
//Конвертация формата HEX в формат RGB
|
||||
const convertHexToRGB = hex => {
|
||||
let r = parseInt(hex.slice(1, 3), 16);
|
||||
let g = parseInt(hex.slice(3, 5), 16);
|
||||
let b = parseInt(hex.slice(5, 7), 16);
|
||||
let a = 0.5;
|
||||
r = Math.round((a * (r / 255) + a * (255 / 255)) * 255);
|
||||
g = Math.round((a * (g / 255) + a * (255 / 255)) * 255);
|
||||
b = Math.round((a * (b / 255) + a * (255 / 255)) * 255);
|
||||
return "rgb(" + r + ", " + g + ", " + b + ")";
|
||||
};
|
||||
|
||||
//Считывание заливки события по условию
|
||||
export const getTaskBgColorByRule = (task, colorRule) => {
|
||||
//Инициализируем значения
|
||||
let ruleCode = "";
|
||||
//Исходя из типа определяем наименование
|
||||
switch (colorRule.STYPE) {
|
||||
case "number":
|
||||
ruleCode = `N${colorRule.SFIELD}`;
|
||||
break;
|
||||
case "date":
|
||||
ruleCode = `D${colorRule.SFIELD}`;
|
||||
break;
|
||||
default:
|
||||
ruleCode = `S${colorRule.SFIELD}`;
|
||||
break;
|
||||
}
|
||||
//Определяем цвет заливки
|
||||
let bgColor = ruleCode && task.docProps[ruleCode] == colorRule.fromValue ? convertHexToRGB(colorRule.SCOLOR) : null;
|
||||
//Возвращаем цвет заливки
|
||||
return bgColor;
|
||||
};
|
||||
|
||||
//Индикация истечения срока отработки события
|
||||
export const getTaskExpiredColor = task => {
|
||||
//Определяем текущую дату
|
||||
let sysDate = new Date();
|
||||
//Определяем дату истечения срока события
|
||||
let expireDate = task.dExpireDate ? new Date(task.dExpireDate) : null;
|
||||
//Если дата истечения срока определена
|
||||
if (expireDate) {
|
||||
//Определяем разницу между датами
|
||||
let daysDiff = ((expireDate.getTime() - sysDate.getTime()) / (1000 * 60 * 60 * 24)).toFixed(2);
|
||||
//Если разница меньше 0 - срок истечен
|
||||
if (daysDiff < 0) return TASK_COLORS.EXPIRED;
|
||||
//Если разница меньше 4 - скоро истечет
|
||||
if (daysDiff < 4) return TASK_COLORS.EXPIRES_SOON;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
//Цвет из hsl формата в rgba формат
|
||||
const convertHslToRgba = (h, s, l) => {
|
||||
s /= 100;
|
||||
l /= 100;
|
||||
const k = n => (n + h / 30) % 12;
|
||||
const a = s * Math.min(l, 1 - l);
|
||||
const f = n => l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1)));
|
||||
return `rgba(${Math.floor(255 * f(0))},${Math.floor(255 * f(8))},${Math.floor(255 * f(4))},0.3)`;
|
||||
};
|
||||
|
||||
//Формирование случайного цвета
|
||||
export const getRandomColor = index => {
|
||||
const hue = index * 137.508;
|
||||
return convertHslToRgba(hue, 50, 70);
|
||||
};
|
||||
|
||||
//Формат дополнительного свойства типа число (длина, точность)
|
||||
const formatRegExpNum = (width, precision) =>
|
||||
new RegExp("^(\\d{1," + (width - precision) + "}" + (precision > 0 ? "((\\.|,)\\d{1," + precision + "})?" : "") + ")?$");
|
||||
|
||||
//Формат дополнительного свойства типа строка (длина)
|
||||
const formatRegExpStr = length => new RegExp("^.{0," + length + "}$");
|
||||
|
||||
//Проверка валидности числа
|
||||
const isValidNum = (width, precision, value) => {
|
||||
return formatRegExpNum(width, precision).test(value);
|
||||
};
|
||||
|
||||
//Проверка валидности строки
|
||||
const isValidStr = (length, value) => {
|
||||
return formatRegExpStr(length).test(value);
|
||||
};
|
||||
|
||||
//Признак ошибки валидации
|
||||
export const validationError = (value = "", format, numWidth, numPrecision, strLength) => {
|
||||
//Исходим от формата
|
||||
switch (format) {
|
||||
//Проверка строки
|
||||
case 0:
|
||||
return isValidStr(strLength, value);
|
||||
//Проверка числа
|
||||
case 1:
|
||||
return isValidNum(numWidth, numPrecision, value);
|
||||
//Остальное не проверяем
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
};
|
||||
|
||||
//Конвертация времени в привычный формат
|
||||
export const formatSqlDate = timeStamp => {
|
||||
//Если есть разделитель
|
||||
if (timeStamp.indexOf(".") !== -1) {
|
||||
//Определяем секунды
|
||||
let seconds = 24 * 60 * 60 * timeStamp;
|
||||
//Определяем часы
|
||||
const hours = Math.trunc(seconds / (60 * 60));
|
||||
//Переопределяем секунды
|
||||
seconds = seconds % (60 * 60);
|
||||
//Определяем минуты
|
||||
const minutes = Math.trunc(seconds / 60);
|
||||
//Определяем остаток секунд
|
||||
seconds = Math.round(seconds % 60);
|
||||
//Форматируем
|
||||
const formattedTime = ("0" + hours).slice(-2) + ":" + ("0" + minutes).slice(-2) + ":" + ("0" + seconds).slice(-2);
|
||||
//Возвращаем результат
|
||||
return formattedTime;
|
||||
}
|
||||
return timeStamp;
|
||||
};
|
||||
|
||||
//Считывание значений из локального хранилища
|
||||
export const getLocalStorageValue = (sName, defaultValue = null) => {
|
||||
return localStorage.getItem(sName) ? localStorage.getItem(sName) : defaultValue;
|
||||
};
|
||||
|
||||
//Форматирование фильтра в массив для отбора
|
||||
export const convertFilterValuesToArray = filterValues => {
|
||||
//Инициализируем значение "с" состояния ("Все", "Не аннулированные" - 0, "Аннулированые" - 1)
|
||||
let nClosedFrom = filterValues.sState ? ([EVENT_STATES[0], EVENT_STATES[1]].includes(filterValues.sState) ? 0 : 1) : 0;
|
||||
//Инициализируем значение "по" состояния ("Все", "Аннулированные" - 1, "Не аннулированные" - 0)
|
||||
let nClosedTo = filterValues.sState ? ([EVENT_STATES[0], EVENT_STATES[2]].includes(filterValues.sState) ? 1 : 0) : 0;
|
||||
//Формируем массив значений фильтра
|
||||
let filterValuesArray = [
|
||||
{ name: "NCLOSED", from: nClosedFrom, to: nClosedTo },
|
||||
{ name: "SEVTYPE_CODE", from: filterValues.sType, to: null },
|
||||
{ name: "NCRN", from: filterValues.sCrnRnList, to: null },
|
||||
{ name: "SSEND_PERSON", from: filterValues.sSendPerson, to: null },
|
||||
{ name: "SSEND_DIVISION", from: filterValues.sSendDivision, to: null },
|
||||
{ name: "SSEND_USRGRP", from: filterValues.sSendUsrGrp, to: null },
|
||||
{ name: "NLINKED_RN", from: filterValues.sDocLink, to: null }
|
||||
];
|
||||
return filterValuesArray;
|
||||
};
|
||||
|
||||
//Формирование массива действий карточки события
|
||||
export const makeCardActionsArray = (onEdit, onEditClient, onDelete, onStateChange, onReturn, onSend, onNotesOpen, onFileLinksOpen) => {
|
||||
//Формируем список действий карточки
|
||||
return [
|
||||
{
|
||||
method: "EDIT",
|
||||
name: "Исправить",
|
||||
icon: "edit",
|
||||
visible: false,
|
||||
delimiter: false,
|
||||
tasksReload: false,
|
||||
needAccountsReload: false,
|
||||
func: onEdit
|
||||
},
|
||||
{
|
||||
method: "EDIT_CLIENT",
|
||||
name: "Исправить в разделе",
|
||||
icon: "edit_note",
|
||||
visible: true,
|
||||
delimiter: false,
|
||||
tasksReload: false,
|
||||
needAccountsReload: false,
|
||||
func: onEditClient
|
||||
},
|
||||
{
|
||||
method: "DELETE",
|
||||
name: "Удалить",
|
||||
icon: "delete",
|
||||
visible: true,
|
||||
delimiter: true,
|
||||
tasksReload: true,
|
||||
needAccountsReload: false,
|
||||
func: onDelete
|
||||
},
|
||||
{
|
||||
method: "TASK_STATE_CHANGE",
|
||||
name: "Перейти",
|
||||
icon: "turn_right",
|
||||
visible: true,
|
||||
delimiter: false,
|
||||
tasksReload: true,
|
||||
needAccountsReload: true,
|
||||
func: onStateChange
|
||||
},
|
||||
{
|
||||
method: "TASK_RETURN",
|
||||
name: "Выполнить возврат",
|
||||
icon: "turn_left",
|
||||
visible: true,
|
||||
delimiter: false,
|
||||
tasksReload: true,
|
||||
needAccountsReload: true,
|
||||
func: onReturn
|
||||
},
|
||||
{
|
||||
method: "TASK_SEND",
|
||||
name: "Направить",
|
||||
icon: "send",
|
||||
visible: true,
|
||||
delimiter: true,
|
||||
tasksReload: true,
|
||||
needAccountsReload: true,
|
||||
func: onSend
|
||||
},
|
||||
{
|
||||
method: "NOTES",
|
||||
name: "Примечания",
|
||||
icon: "event_note",
|
||||
visible: true,
|
||||
delimiter: true,
|
||||
tasksReload: false,
|
||||
needAccountsReload: false,
|
||||
func: onNotesOpen
|
||||
},
|
||||
{
|
||||
method: "FILE_LINKS",
|
||||
name: "Присоединенные документы",
|
||||
icon: "attach_file",
|
||||
visible: true,
|
||||
delimiter: false,
|
||||
tasksReload: false,
|
||||
needAccountsReload: false,
|
||||
func: onFileLinksOpen
|
||||
}
|
||||
];
|
||||
};
|
||||
48
app/panels/clnt_task_board/styles.js
Normal file
48
app/panels/clnt_task_board/styles.js
Normal file
@ -0,0 +1,48 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент: Общие стили
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import { APP_STYLES } from "../../../app.styles"; //Типовые стили
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Общие стили
|
||||
export const COMMON_STYLES = {
|
||||
TASK_FORM_TEXT_FIELD: (widthVal, greyDisabled = false) => ({
|
||||
margin: "4px",
|
||||
...(widthVal ? { width: widthVal } : {}),
|
||||
...(greyDisabled
|
||||
? {
|
||||
"& .MuiInputBase-input.Mui-disabled": {
|
||||
WebkitTextFillColor: "rgba(0, 0, 0, 0.87)"
|
||||
},
|
||||
"& .MuiInputLabel-root.Mui-disabled": {
|
||||
WebkitTextFillColor: "rgba(0, 0, 0, 0.6)"
|
||||
}
|
||||
}
|
||||
: {})
|
||||
}),
|
||||
BOX_WITH_LEGEND: { border: "1px solid #939393" },
|
||||
BOX_SINGLE_COLUMN: { display: "flex", flexDirection: "column", gap: "10px" },
|
||||
LEGEND: { textAlign: "left" },
|
||||
SELECT_MENU: width => {
|
||||
return { overflowY: "auto", ...APP_STYLES.SCROLL, width: width ? width : null };
|
||||
},
|
||||
STACK_DOCLINKS: { alignItems: "baseline" },
|
||||
SCROLL: { ...APP_STYLES.SCROLL, overflowY: "auto" },
|
||||
DIALOG_ACTIONS: { justifyContent: "end", paddingRight: "24px", paddingLeft: "24px" },
|
||||
DIALOG_CLOSE_BUTTON: {
|
||||
position: "absolute",
|
||||
right: 8,
|
||||
top: 8,
|
||||
color: theme => theme.palette.grey[500]
|
||||
},
|
||||
ZERO_PADDING: { padding: 0 }
|
||||
};
|
||||
180
app/panels/clnt_task_board/task_dialog.js
Normal file
180
app/panels/clnt_task_board/task_dialog.js
Normal file
@ -0,0 +1,180 @@
|
||||
/*
|
||||
Парус 8 - Панели мониторинга - УДП - Доски задач
|
||||
Компонент панели: Диалог формы события
|
||||
*/
|
||||
|
||||
//---------------------
|
||||
//Подключение библиотек
|
||||
//---------------------
|
||||
|
||||
import React, { useState, useCallback, useContext } from "react"; //Классы React
|
||||
import PropTypes from "prop-types"; //Контроль свойств компонента
|
||||
import { Dialog, DialogContent, DialogActions, Button } from "@mui/material"; //Интерфейсные компоненты
|
||||
import { useClientEvent } from "./hooks/task_dialog_hooks"; //Хук для события
|
||||
import { TaskForm } from "./components/task_form"; //Форма события
|
||||
import { BackEndСtx } from "../../context/backend"; //Контекст взаимодействия с сервером
|
||||
import { object2Base64XML } from "../../core/utils"; //Вспомогательные функции
|
||||
import { COMMON_STYLES } from "./styles"; //Общие стили
|
||||
|
||||
//---------
|
||||
//Константы
|
||||
//---------
|
||||
|
||||
//Стили
|
||||
const STYLES = {
|
||||
DIALOG_CONTENT: {
|
||||
paddingBottom: "0px",
|
||||
maxHeight: "740px",
|
||||
minHeight: "740px",
|
||||
...COMMON_STYLES.SCROLL
|
||||
}
|
||||
};
|
||||
|
||||
//-----------
|
||||
//Тело модуля
|
||||
//-----------
|
||||
|
||||
//Диалог формы события
|
||||
const TaskDialog = ({ taskRn, taskType, taskStatus, editable, onTasksReload, onClose }) => {
|
||||
//Собственное состояние
|
||||
const [task, setTask] = useClientEvent(taskRn, taskType, taskStatus);
|
||||
|
||||
//Состояние заполненности всех обязательных свойств
|
||||
const [dpReady, setDPReady] = useState(false);
|
||||
|
||||
//Подключение к контексту взаимодействия с сервером
|
||||
const { executeStored, SERV_DATA_TYPE_CLOB } = useContext(BackEndСtx);
|
||||
|
||||
//При изменении заполненности всех обязательных свойств
|
||||
const handleDPReady = useCallback(v => setDPReady(v), []);
|
||||
|
||||
//При изменении информации о задаче
|
||||
const handleTaskChange = useCallback(
|
||||
newTaskValues => {
|
||||
setTask(pv => ({ ...pv, ...newTaskValues }));
|
||||
},
|
||||
[setTask]
|
||||
);
|
||||
|
||||
//При добавлении события
|
||||
const handleInsertTask = async callBack => {
|
||||
await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_INSERT",
|
||||
args: {
|
||||
SCRN: task.sCrn,
|
||||
SPREF: task.sPrefix,
|
||||
SNUMB: task.sNumber,
|
||||
STYPE: task.sType,
|
||||
SSTATUS: task.sStatus,
|
||||
SPLAN_DATE: task.dPlanDate,
|
||||
SINIT_PERSON: task.sInitClnperson,
|
||||
SCLIENT_CLIENT: task.sClntClients,
|
||||
SCLIENT_PERSON: task.sClntClnperson,
|
||||
SDESCRIPTION: task.sDescription,
|
||||
SREASON: task.sInitReason,
|
||||
CPROPS: {
|
||||
VALUE: object2Base64XML(
|
||||
[
|
||||
Object.fromEntries(
|
||||
Object.entries(task.docProps)
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
.filter(([_, v]) => v != (null || ""))
|
||||
)
|
||||
],
|
||||
{
|
||||
arrayNodeName: "props"
|
||||
}
|
||||
),
|
||||
SDATA_TYPE: SERV_DATA_TYPE_CLOB
|
||||
}
|
||||
}
|
||||
});
|
||||
callBack();
|
||||
};
|
||||
|
||||
//При исправлении события
|
||||
const handleUpdateEvent = async callBack => {
|
||||
await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_UPDATE",
|
||||
args: {
|
||||
NCLNEVENTS: task.nRn,
|
||||
SCLIENT_CLIENT: task.sClntClients,
|
||||
SCLIENT_PERSON: task.sClntClnperson,
|
||||
SDESCRIPTION: task.sDescription,
|
||||
CPROPS: {
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
VALUE: object2Base64XML([Object.fromEntries(Object.entries(task.docProps).filter(([_, v]) => v != (null || "")))], {
|
||||
arrayNodeName: "props"
|
||||
}),
|
||||
SDATA_TYPE: SERV_DATA_TYPE_CLOB
|
||||
}
|
||||
}
|
||||
});
|
||||
callBack();
|
||||
};
|
||||
|
||||
//При считывании следующего номера события
|
||||
const handleEventNextNumbGet = useCallback(async () => {
|
||||
//Считываем данные
|
||||
const data = await executeStored({
|
||||
stored: "PKG_P8PANELS_CLNTTSKBRD.CLNEVENTS_NEXTNUMB_GET",
|
||||
args: {
|
||||
SPREFIX: task.sPrefix
|
||||
}
|
||||
});
|
||||
//Если данные есть
|
||||
if (data) {
|
||||
//Устанавливаем номер
|
||||
setTask(pv => ({ ...pv, sNumber: data.SEVENT_NUMB }));
|
||||
}
|
||||
}, [executeStored, setTask, task.sPrefix]);
|
||||
|
||||
//Генерация содержимого
|
||||
return (
|
||||
<Dialog open onClose={onClose ? onClose : null} fullWidth>
|
||||
<DialogContent sx={STYLES.DIALOG_CONTENT}>
|
||||
<TaskForm
|
||||
task={task}
|
||||
taskType={taskType}
|
||||
onTaskChange={handleTaskChange}
|
||||
editable={!taskRn || editable ? true : false}
|
||||
onEventNextNumbGet={handleEventNextNumbGet}
|
||||
onDPReady={handleDPReady}
|
||||
/>
|
||||
</DialogContent>
|
||||
{onClose ? (
|
||||
<DialogActions sx={COMMON_STYLES.DIALOG_ACTIONS}>
|
||||
{taskRn ? (
|
||||
<Button
|
||||
onClick={() => handleUpdateEvent(onClose).then(onTasksReload)}
|
||||
disabled={task.updateDisabled || !editable || !dpReady}
|
||||
>
|
||||
Исправить
|
||||
</Button>
|
||||
) : (
|
||||
<Button onClick={() => handleInsertTask(onClose).then(onTasksReload)} disabled={task.insertDisabled || !dpReady}>
|
||||
Добавить
|
||||
</Button>
|
||||
)}
|
||||
<Button onClick={onClose}>Закрыть</Button>
|
||||
</DialogActions>
|
||||
) : null}
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
//Контроль свойств - Диалог формы события
|
||||
TaskDialog.propTypes = {
|
||||
taskRn: PropTypes.number,
|
||||
taskType: PropTypes.string.isRequired,
|
||||
taskStatus: PropTypes.string,
|
||||
editable: PropTypes.bool,
|
||||
onTasksReload: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
//----------------
|
||||
//Интерфейс модуля
|
||||
//----------------
|
||||
|
||||
export { TaskDialog };
|
||||
2705
db/PKG_P8PANELS_CLNTTSKBRD.pck
Normal file
2705
db/PKG_P8PANELS_CLNTTSKBRD.pck
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
x
Reference in New Issue
Block a user