fastlion-amis/lib/components/Schedule/calendar.js

一种MIS页面生成工具

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var datePicker_1 = (0, tslib_1.__importDefault)(require("./datePicker"));
var lodash_1 = require("lodash");
var dayjs_1 = (0, tslib_1.__importDefault)(require("dayjs"));
require("./calendar.scss");
var tpl_builtin_1 = require("../../utils/tpl-builtin");
var helper_1 = require("../../utils/helper");
var CalendarComp = function (props) {
    var render = props.render, env = props.env, api = props.api, alert = props.alert, receiveData = props.receiveData, isMobile = props.isMobile, primaryField = props.primaryField, schedules = props.schedules, lazyLoad = props.lazyLoad, itemAction = props.itemAction, context = props.context, calendarType = props.calendarType, noEdit = props.noEdit;
    var initTypeMap = {
        'schedule': isMobile ? 'timeGridDay' : 'timeGridWeek',
        // 'meeting': isMobile ? 'timeGridDay' : 'timeGridWeek',
        'calendar': 'dayGridMonth'
    };
    var currentViewType = (0, react_1.useRef)(initTypeMap[calendarType]);
    // const [allEventsRef.current, setAllEvents] = useState<EventsFromApi>([]);
    var _a = (0, react_1.useState)(), initDate = _a[0], setInitDate = _a[1];
    var allEventsRef = (0, react_1.useRef)([]);
    var _b = (0, react_1.useState)([]), allEvents = _b[0], setAllEvents = _b[1];
    var _c = (0, react_1.useState)(false), fetchLoading = _c[0], setFetchLoading = _c[1];
    var reqDateConfig = (0, react_1.useRef)({});
    var weekTogglerRef = (0, react_1.useRef)({});
    var scheduleMap = new Map();
    var _d = (0, react_1.useState)({}), scheduleKeyMap = _d[0], setScheduleKeyMap = _d[1];
    var eventBgColorMap = {
        warning: { backgroundColor: '#FE9201' },
        'background-warning': { backgroundColor: '#FEF3E6', color: '#FE9201' },
        success: { backgroundColor: '#15B37B' },
        'background-success': { backgroundColor: '#E8F8F2', color: '#15B37B' },
        primary: { backgroundColor: '#3574EE' },
        'background-primary': { backgroundColor: '#E9F6FE', color: '#3574EE' },
        danger: { backgroundColor: '#F5222D' },
        'background-danger': { backgroundColor: '#FAEDEE', color: '#F5222D' },
    };
    (0, react_1.useEffect)(function () {
        handleGenNewMap();
        handleInit();
    }, []);
    (0, react_1.useEffect)(function () {
        var _a, _b;
        if (Object.keys(receiveData).length) {
            var date = (0, dayjs_1.default)().format('YYYY-MM-DD');
            (_b = (_a = weekTogglerRef.current) === null || _a === void 0 ? void 0 : _a.handleYearMonthChange) === null || _b === void 0 ? void 0 : _b.call(_a, '', date, true);
            handleInit(date);
        }
    }, [receiveData]);
    var currentMonth = (0, react_1.useRef)((0, dayjs_1.default)(initDate).get('M'));
    var getMapKey = function (key) {
        var _a;
        return schedules[key] ? (_a = schedules[key].match(/\$\{([^}]+)\}/)) === null || _a === void 0 ? void 0 : _a[1] : key;
    };
    var handleGenNewMap = function () { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
        var keys, keysMap;
        return (0, tslib_1.__generator)(this, function (_a) {
            schedules['id'] = '${' + primaryField + '}';
            schedules['start'] = schedules['startTime'];
            schedules['end'] = schedules['endTime'];
            keys = Object.keys(schedules);
            keys.forEach(function (key) {
                scheduleMap.set(key, getMapKey(key));
                scheduleMap.set(getMapKey(key), key);
                if (key === 'content') {
                    scheduleMap.set('title', getMapKey(key));
                    scheduleMap.set(getMapKey(key), 'title');
                }
            });
            keysMap = Object.fromEntries(scheduleMap.entries());
            setScheduleKeyMap(function () { return keysMap; });
            return [2 /*return*/];
        });
    }); };
    /** 获取某个时间段的事件 */
    var handleInitEvents = function (dates) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
        var startTimeKey, endTimeKey, advancedFilterConfig, startTime, endTime, params, advancedFilter_1, baseConfig_1, normalLazyParam, res, transEvents;
        var _a, _b, _c, _d;
        return (0, tslib_1.__generator)(this, function (_e) {
            switch (_e.label) {
                case 0:
                    startTimeKey = scheduleMap.get('startTime') || scheduleKeyMap['startTime'];
                    endTimeKey = scheduleMap.get('endTime') || scheduleKeyMap['endTime'];
                    advancedFilterConfig = ((_a = api === null || api === void 0 ? void 0 : api.data) !== null && _a !== void 0 ? _a : {}).advancedFilter;
                    startTime = (0, dayjs_1.default)(dates[startTimeKey]).format('YYYY-MM-DD');
                    endTime = (0, dayjs_1.default)(dates[endTimeKey]).format('YYYY-MM-DD');
                    if (!(!lazyLoad && allEvents.length)) return [3 /*break*/, 1];
                    return [2 /*return*/, allEvents];
                case 1:
                    params = {};
                    // lazyLoad: 是否懒加载 是：只请求区间信息，否：请求所有数据
                    // advancedFilterConfig： 是否有高级查询  是：走高级查询 否：按开始时间结束时间
                    if (lazyLoad) {
                        if (advancedFilterConfig) {
                            advancedFilter_1 = [];
                            baseConfig_1 = {
                                condition: 1,
                                not: false,
                                dateLine: true,
                                caseSensitive: 1,
                            };
                            if (startTimeKey === endTimeKey) {
                                advancedFilter_1.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseConfig_1), { field: startTimeKey, op: 7, values: (_b = dates['timeRange']) === null || _b === void 0 ? void 0 : _b.join(',') }));
                            }
                            else {
                                [0, 1].forEach(function (item) {
                                    advancedFilter_1.push((0, tslib_1.__assign)((0, tslib_1.__assign)({}, baseConfig_1), { 
                                        // 4: 从  6： 到
                                        op: !item ? 4 : 6, field: !item ? startTimeKey : endTimeKey, values: !item ? startTime : endTime }));
                                });
                            }
                            params = { advancedFilter: advancedFilter_1 };
                        }
                        else {
                            normalLazyParam = {};
                            if (startTimeKey === endTimeKey) {
                                normalLazyParam[startTimeKey] = (_c = dates['timeRange']) === null || _c === void 0 ? void 0 : _c.join(',');
                            }
                            else {
                                normalLazyParam[startTimeKey] = startTime;
                                normalLazyParam[endTimeKey] = endTime;
                            }
                            params = normalLazyParam;
                        }
                    }
                    _e.label = 2;
                case 2:
                    _e.trys.push([2, , 4, 5]);
                    return [4 /*yield*/, env.fetcher(api, (0, tslib_1.__assign)((0, tslib_1.__assign)({}, params), receiveData))];
                case 3:
                    res = _e.sent();
                    if (res.ok) {
                        transEvents = transEventFitCalendar((_d = res.data) !== null && _d !== void 0 ? _d : []);
                        return [2 /*return*/, transEvents];
                    }
                    return [3 /*break*/, 5];
                case 4:
                    setFetchLoading(false);
                    return [7 /*endfinally*/];
                case 5: return [2 /*return*/, []];
            }
        });
    }); };
    // 获取日历时间区间, 从当月周一的日期往后数41天，共42天数据, 不传则按当月计算
    var handleGenInitDate = function (initDate) {
        var firstDayOfWeek = (0, dayjs_1.default)(initDate).startOf('M').startOf('w').format('YYYY-MM-DD HH:mm:ss');
        var endDate = (0, dayjs_1.default)(firstDayOfWeek).add(41, 'day').endOf('d').format('YYYY-MM-DD HH:mm:ss');
        var dates = {};
        var startKey = getMapKey('startTime');
        var endKey = getMapKey('endTime');
        dates['timeRange'] = [firstDayOfWeek, endDate];
        dates[startKey] = firstDayOfWeek;
        dates[endKey] = endDate;
        return dates;
    };
    // 获取所有事件
    var handleGetAllEvents = function (initDate) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
        var dates, events;
        return (0, tslib_1.__generator)(this, function (_a) {
            switch (_a.label) {
                case 0:
                    dates = handleGenInitDate(initDate);
                    return [4 /*yield*/, handleInitEvents(dates)];
                case 1:
                    events = _a.sent();
                    reqDateConfig.current = dates;
                    if (!initDate) {
                        setInitDate((0, dayjs_1.default)().format('YYYY-MM-DD'));
                    }
                    else {
                        // debug
                        setInitDate((0, dayjs_1.default)(initDate).format('YYYY-MM-DD'));
                    }
                    setAllEvents(function () { return events; });
                    allEventsRef.current = events;
                    return [2 /*return*/];
            }
        });
    }); };
    // 判断是否可以手动初始化
    var handleJudgeShouldInit = function (initDate) {
        var _a;
        if (initDate) {
            var _b = (_a = Object.values(reqDateConfig.current)) !== null && _a !== void 0 ? _a : [], startTime = _b[0], endTime = _b[1];
            if (startTime && endTime) {
                var dateMonth = (0, dayjs_1.default)(initDate).get('M');
                if (dateMonth !== currentMonth.current) {
                    // handleInit(dayjs(initDate).format('YYYY-MM-DD HH:mm:ss'));
                    currentMonth.current = (0, dayjs_1.default)(initDate).get('M');
                    return true;
                }
            }
        }
        return false;
    };
    /** 初始化  传入日期，将获取当月第一周的周一往后41天的数据 */
    var handleInit = function (initDate) { return (0, tslib_1.__awaiter)(void 0, void 0, void 0, function () {
        return (0, tslib_1.__generator)(this, function (_a) {
            switch (_a.label) {
                case 0:
                    if (fetchLoading)
                        return [2 /*return*/];
                    setFetchLoading(true);
                    return [4 /*yield*/, handleGetAllEvents(initDate)];
                case 1:
                    _a.sent();
                    return [2 /*return*/];
            }
        });
    }); };
    var transEventFitCalendar = function (events) {
        var eventsForCalendar = events.map(function (item) {
            var data = (0, tpl_builtin_1.dataMapping)(schedules, item);
            return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, item), data);
        });
        return eventsForCalendar;
    };
    var handleClickItemAction = function (date) {
        var target = itemAction.target;
        // const matchEvents = allEvents.filter((item) => dayjs(item.start).format('YYYY-MM-DD') === dayjs(date).format('YYYY-MM-DD')).filter(Boolean);
        var params = {};
        var startTimeKey = scheduleKeyMap['startTime'];
        var endTimeKey = scheduleKeyMap['endTime'];
        var startTime = (0, dayjs_1.default)(date).startOf('d').format('YYYY-MM-DD HH:mm:ss');
        var endTime = (0, dayjs_1.default)(date).endOf('d').format('YYYY-MM-DD HH:mm:ss');
        params[startTimeKey] = startTime;
        params[endTimeKey] = endTime;
        reloadTarget(target, (0, helper_1.createObject)(props.data, params));
    };
    var reloadTarget = function (target, data) {
        var scoped = context;
        scoped.reload(target, data);
    };
    // 日期切换回调，添加防抖
    var handleDateToggle = (0, lodash_1.debounce)(function (date, isInit) {
        if (date) {
            var formattedDate = (0, dayjs_1.default)(date).format('YYYY-MM-DD');
            var shouldInit = handleJudgeShouldInit(formattedDate);
            if (shouldInit) {
                handleInit(formattedDate);
            }
            else {
                setInitDate(formattedDate);
            }
            // calendarInsRef.current?.gotoDate(date);
            (isInit && itemAction) && handleClickItemAction(date);
        }
    }, 450);
    // 当日历手动切换，calendar组件做出响应
    var handleToggleCalendar = function (dateType, toggleType, date) {
        var targetDate = (0, dayjs_1.default)(date).valueOf();
        setTimeout(function () {
            requestAnimationFrame(function () {
                currentMonth.current = (0, dayjs_1.default)(targetDate).get('M');
                handleJudgeShouldInit(targetDate) && handleInit(targetDate);
            });
        }, 500);
    };
    var handleTogglePanel = function (val, mode) {
        var initDate = (0, dayjs_1.default)(val).format('YYYY-MM-DD HH:mm:ss');
        var shouldUpdate = handleJudgeShouldInit(initDate);
        if (shouldUpdate) {
            handleInit(initDate);
        }
    };
    // 移动端获取当天的数据
    var handleGetAttendance = (0, react_1.useMemo)(function () {
        var parsedDay = (0, dayjs_1.default)(initDate).format('YYYY-MM-DD').valueOf();
        var matchEvents = allEvents.filter(function (item) {
            var _a, _b;
            var isMatch = false;
            var startTime = (0, dayjs_1.default)((_a = item.startTime) === null || _a === void 0 ? void 0 : _a.replaceAll('.', '-')).format('YYYY-MM-DD').valueOf();
            var endTime = (0, dayjs_1.default)((_b = item.endTime) === null || _b === void 0 ? void 0 : _b.replaceAll('.', '-')).format('YYYY-MM-DD').valueOf();
            isMatch = parsedDay >= startTime && parsedDay <= endTime;
            return isMatch ? item : undefined;
        }).filter(Boolean);
        if (matchEvents === null || matchEvents === void 0 ? void 0 : matchEvents.length) {
            var renderDom = matchEvents.map(function (item) {
                var title = item.title, content = item.content;
                return (react_1.default.createElement("div", { className: "info-box" },
                    react_1.default.createElement("div", { className: "title" }, render('tpl', { type: 'tpl', tpl: title })),
                    render('tpl', { type: 'tpl', tpl: content })));
            });
            return (react_1.default.createElement("div", { className: "attendance-box" }, renderDom));
        }
        return null;
    }, [allEvents, initDate]);
    var weekViewMap = {
        'schedule': true,
        'calendar': false,
        // 'meeting': true,
        // 'attendance': false
    };
    return (react_1.default.createElement("div", { className: "calendar-container " + calendarType + " " + (isMobile ? 'mobile' : '') },
        react_1.default.createElement("div", { className: "week-toggler-box " + calendarType },
            react_1.default.createElement(datePicker_1.default, { ref: weekTogglerRef, events: allEvents, initDate: initDate, onDateSelected: handleDateToggle, onToggleCalendar: handleToggleCalendar, onPanelToggle: handleTogglePanel, viewType: currentViewType.current, isWeekView: weekViewMap[calendarType], isMobile: isMobile, alertText: alert, render: render })),
        calendarType === 'calendar' && !itemAction ? react_1.default.createElement(react_1.default.Fragment, null, handleGetAttendance) : null));
};
exports.default = CalendarComp;
//# sourceMappingURL=./components/Schedule/calendar.js.map