wargerm 0.5.31 → 0.5.32

package/dist/components/Calendar/const.d.ts

@@ -0,0 +1,6 @@
+export declare const YEAER_MONTH_FORMAT_ZH = "YYYY\u5E74MM\u6708";
+export declare const YEAER_MONTH_FORMAT_EN = "YYYY-MM";
+export declare const YEAER_MONTH_FORMAT_FULL = "YYYY-MM-DD";
+export declare const WEEk_HEADER: string[];
+export declare const TOTAL_LENGTH: number;
+export declare const INIT_DAYS: number[];

package/dist/components/Calendar/example/demo1.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function Tab4(): JSX.Element;

package/dist/components/Calendar/index.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import './index-light.less';
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<unknown>>>;
+export default _default;

package/dist/components/Calendar/utils.d.ts

@@ -0,0 +1,42 @@
+import { Moment } from 'moment';
+export declare function getMonthDays(date?: string | Moment): number;
+/**
+ * 获取当前月第一天是星期几
+ */
+export declare function getWeekDays(date?: Moment): number;
+/**
+ * 获取当前星期第一天到星期天
+ */
+export declare function getWeekList(date?: Moment): string[];
+/**
+ * 获取上个月份
+ */
+export declare function getLastMonth(date?: Moment): string;
+/**
+ * 获取下个月份
+ */
+export declare function getNextMonth(date?: Moment): string;
+/**
+ * 格式化日期为两个单词，例如：‘1’号 格式为 ‘01’
+ * @param {*} dateNumber
+ */
+export declare const formatDayWithTwoWords: (dateNumber: number) => string | number;
+/**
+ * 初始化日历
+ */
+export declare function initCalendar(date?: Moment): {
+    date: string;
+    text: string | number;
+    isCurrentMonth: boolean;
+    isCurrentDay: boolean;
+}[];
+/**
+ * 初始化日历
+ */
+export declare function initWeekCalendar(type: string, date?: Moment): ({
+    text: string;
+    date?: undefined;
+} | {
+    date: string;
+    text?: undefined;
+})[];

package/dist/index.css

@@ -12744,6 +12744,70 @@ button.swiper-pagination-bullet {
   cursor: se-resize;
   z-index: 101;
 }
+.content_container {
+  width: 100%;
+  height: 100%;
+}
+.content_container .toolbar_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 94px;
+  background: white;
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .calendar_header_wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 100%;
+  height: 47px;
+  color: #fff;
+  background: #26958c;
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .content_wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .content_wrapper .day_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  color: #333;
+  background: #f6f6f6;
+  border-right: 1px solid rgb(215 215 215);
+  border-bottom: 1px solid rgb(215 215 215);
+  cursor: pointer;
+}
+.content_container .content_wrapper .day_container:hover {
+  box-shadow: inset 0px 0px 5px 1px lightgreen;
+}
+.content_container .content_wrapper .date_title {
+  display: inline-block;
+  width: 24px;
+  height: 20px;
+  margin-left: 4px;
+  color: rgb(103 113 122);
+  font-weight: 400;
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  line-height: 20px;
+  text-align: center;
+}
+.content_container .content_wrapper .isCurrentMonth {
+  color: #000;
+  background: #fff;
+}
+.content_container .content_wrapper .isToday {
+  background: lightgreen;
+}
+.content_container .content_wrapper .isCurrentDay {
+  box-shadow: inset 0px 0px 5px 1px lightgreen;
+}
 
 /* Color
 ----------------------- */
@@ -28107,3 +28171,68 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   opacity: 1;
   background: #9cd0ef;
 }
+
+.content_container {
+  width: 100%;
+  height: 100%;
+}
+.content_container .toolbar_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 94px;
+  background: white;
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .calendar_header_wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 100%;
+  height: 47px;
+  color: #fff;
+  background: #26958c;
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .content_wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .content_wrapper .day_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  color: #333;
+  background: #f6f6f6;
+  border-right: 1px solid rgb(215 215 215);
+  border-bottom: 1px solid rgb(215 215 215);
+  cursor: pointer;
+}
+.content_container .content_wrapper .day_container:hover {
+  box-shadow: inset 0px 0px 5px 1px lightgreen;
+}
+.content_container .content_wrapper .date_title {
+  display: inline-block;
+  width: 24px;
+  height: 20px;
+  margin-left: 4px;
+  color: rgb(103 113 122);
+  font-weight: 400;
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  line-height: 20px;
+  text-align: center;
+}
+.content_container .content_wrapper .isCurrentMonth {
+  color: #000;
+  background: #fff;
+}
+.content_container .content_wrapper .isToday {
+  background: lightgreen;
+}
+.content_container .content_wrapper .isCurrentDay {
+  box-shadow: inset 0px 0px 5px 1px lightgreen;
+}

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { default as DragBox } from './components/DragBox';
 export { default as ModalForm } from './components/ModalForm';
 export { default as TabelCard } from './components/TabelCard';
 export { default as Cascader } from './components/Cascader';
+export { default as Calendar } from './components/Calendar';
 export { default as WebsocketHeart } from './components/WebsocketHeart';
 export { default as VideoPlayer } from './components/VideoPlayer';
 export { default as Video } from './components/Video';

package/dist/index.esm.css

@@ -12744,6 +12744,70 @@ button.swiper-pagination-bullet {
   cursor: se-resize;
   z-index: 101;
 }
+.content_container {
+  width: 100%;
+  height: 100%;
+}
+.content_container .toolbar_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 94px;
+  background: white;
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .calendar_header_wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 100%;
+  height: 47px;
+  color: #fff;
+  background: #26958c;
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .content_wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .content_wrapper .day_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  color: #333;
+  background: #f6f6f6;
+  border-right: 1px solid rgb(215 215 215);
+  border-bottom: 1px solid rgb(215 215 215);
+  cursor: pointer;
+}
+.content_container .content_wrapper .day_container:hover {
+  box-shadow: inset 0px 0px 5px 1px lightgreen;
+}
+.content_container .content_wrapper .date_title {
+  display: inline-block;
+  width: 24px;
+  height: 20px;
+  margin-left: 4px;
+  color: rgb(103 113 122);
+  font-weight: 400;
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  line-height: 20px;
+  text-align: center;
+}
+.content_container .content_wrapper .isCurrentMonth {
+  color: #000;
+  background: #fff;
+}
+.content_container .content_wrapper .isToday {
+  background: lightgreen;
+}
+.content_container .content_wrapper .isCurrentDay {
+  box-shadow: inset 0px 0px 5px 1px lightgreen;
+}
 
 /* Color
 ----------------------- */
@@ -28107,3 +28171,68 @@ button[data-prefers-color='light'] .swiper-pagination-bullet {
   opacity: 1;
   background: #9cd0ef;
 }
+
+.content_container {
+  width: 100%;
+  height: 100%;
+}
+.content_container .toolbar_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 94px;
+  background: white;
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .calendar_header_wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  width: 100%;
+  height: 47px;
+  color: #fff;
+  background: #26958c;
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .content_wrapper {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  border: 1px solid rgb(215 215 215);
+}
+.content_container .content_wrapper .day_container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+  color: #333;
+  background: #f6f6f6;
+  border-right: 1px solid rgb(215 215 215);
+  border-bottom: 1px solid rgb(215 215 215);
+  cursor: pointer;
+}
+.content_container .content_wrapper .day_container:hover {
+  box-shadow: inset 0px 0px 5px 1px lightgreen;
+}
+.content_container .content_wrapper .date_title {
+  display: inline-block;
+  width: 24px;
+  height: 20px;
+  margin-left: 4px;
+  color: rgb(103 113 122);
+  font-weight: 400;
+  font-size: 16px;
+  font-family: PingFangSC-Regular, PingFang SC;
+  line-height: 20px;
+  text-align: center;
+}
+.content_container .content_wrapper .isCurrentMonth {
+  color: #000;
+  background: #fff;
+}
+.content_container .content_wrapper .isToday {
+  background: lightgreen;
+}
+.content_container .content_wrapper .isCurrentDay {
+  box-shadow: inset 0px 0px 5px 1px lightgreen;
+}

package/dist/index.esm.js

@@ -6,7 +6,7 @@ import 'antd/es/dropdown/style';
 import _Dropdown from 'antd/es/dropdown';
 import 'antd/es/menu/style';
 import _Menu from 'antd/es/menu';
-import { createFromIconfontCN, PlusOutlined, SearchOutlined, ReloadOutlined, CloseCircleOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';
+import { createFromIconfontCN, PlusOutlined, SearchOutlined, ReloadOutlined, CloseCircleOutlined, EllipsisOutlined, ExclamationCircleOutlined, EyeOutlined, EditOutlined, DeleteOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons';
 import 'antd/es/input/style';
 import _Input from 'antd/es/input';
 import 'antd/es/modal/style';
@@ -53,6 +53,8 @@ import 'antd/es/breadcrumb/style';
 import _Breadcrumb from 'antd/es/breadcrumb';
 import ReactDOM from 'react-dom';
 import ProTable from '@ant-design/pro-table';
+import 'antd/es/space/style';
+import _Space from 'antd/es/space';
 import Player from 'xgplayer';
 import FlvPlayer from 'xgplayer-flv.js';
 import HlsJsPlayer from 'xgplayer-hls.js';
@@ -317,6 +319,10 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function _toArray(arr) {
+  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
+}
+
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
@@ -11290,6 +11296,356 @@ var TabelCard = function TabelCard(props, ref) {
 
 var index$3 = /*#__PURE__*/React.forwardRef(TabelCard);
 
+var YEAER_MONTH_FORMAT_EN = 'YYYY-MM';
+
+var _moment$weekdaysMin = hooks.weekdaysMin(),
+    _moment$weekdaysMin2 = _toArray(_moment$weekdaysMin),
+    _ = _moment$weekdaysMin2[0],
+    rest = _moment$weekdaysMin2.slice(1); // 将星期天放置数组最后
+
+
+var WEEk_HEADER = [].concat(_toConsumableArray(rest), [_]); // 日历布局为6 * 7单元格
+
+var TOTAL_LENGTH = 6 * 7; // 初始化一下下
+
+var INIT_DAYS = Array(TOTAL_LENGTH).fill(0).map(function (_, index) {
+  return +index + 1;
+});
+
+/**
+ * 获取当前月的天数
+ */
+
+console.log(hooks().format('YYYY-MM-DD'), 'moment()');
+function getMonthDays(date) {
+  return hooks(date).daysInMonth();
+}
+/**
+ * 获取当前月第一天是星期几
+ */
+
+function getWeekDays(date) {
+  return hooks(date).startOf('month').weekday();
+}
+/**
+ * 获取当前星期第一天到星期天
+ */
+
+function getWeekList(date) {
+  var weekOfDay = parseInt(hooks(date).format('E')); //计算今天是这周第几天
+  // let last_monday = moment().startOf('day').subtract(weekOfDay - 1, 'days').format('YYYY-MM-DD');//周一日期
+  // let last_sunday = moment().startOf('day').subtract(weekOfDay - 7, 'days').format('YYYY-MM-DD');//周日日期
+
+  return ['时间'].concat(_toConsumableArray(new Array(7).fill('').map(function (item, index) {
+    return hooks(date).startOf('day').subtract(weekOfDay - (index + 1), 'days').format('YYYY-MM-DD');
+  })));
+}
+/**
+ * 获取上个月份
+ */
+
+function getLastMonth(date) {
+  return hooks(date).subtract(1, 'month').format(YEAER_MONTH_FORMAT_EN);
+}
+/**
+ * 格式化日期为两个单词，例如：‘1’号 格式为 ‘01’
+ * @param {*} dateNumber
+ */
+
+var formatDayWithTwoWords = function formatDayWithTwoWords(dateNumber) {
+  if (dateNumber < 10) {
+    return '0' + dateNumber;
+  }
+
+  return dateNumber;
+};
+/**
+ * 初始化日历
+ */
+
+function initCalendar(date) {
+  // 当前月天数
+  var totalDaysInMonth = getMonthDays(date); // 上个月天数
+
+  var totalDaysInLastMonth = getMonthDays(getLastMonth(date)); // 下个月开始日期
+
+  var nextFirstDate = 1;
+  var lastDays = [],
+      currentDays = [],
+      nextDays = []; // 当前月第一天是星期几(索引值)
+
+  /**
+   * 这里的索引值刚刚好是需要填充的上月的天数
+   */
+
+  var currentWeekDay = getWeekDays(date);
+
+  for (var i = 0, len = 42; i < len; i++) {
+    // 填充上个月的天数
+    if (i < currentWeekDay) {
+      // lastDays.push(totalDaysInLastMonth);
+      var daySting = hooks(hooks(date).subtract(1, 'month').format(YEAER_MONTH_FORMAT_EN) + '-' + totalDaysInLastMonth).format('YYYY-MM-DD');
+      lastDays.push({
+        date: daySting,
+        text: formatDayWithTwoWords(totalDaysInLastMonth),
+        isCurrentMonth: false,
+        isCurrentDay: hooks().format('YYYY-MM-DD') == daySting
+      });
+      totalDaysInLastMonth--;
+    } // 填充下个月的天数
+    else if (i >= totalDaysInMonth + currentWeekDay) {
+      // nextDays.push(nextFirstDate);
+      var _daySting = hooks(hooks(date).add(1, 'month').format(YEAER_MONTH_FORMAT_EN) + '-' + nextFirstDate).format('YYYY-MM-DD');
+
+      nextDays.push({
+        date: _daySting,
+        text: formatDayWithTwoWords(nextFirstDate),
+        isCurrentMonth: false,
+        isCurrentDay: hooks().format('YYYY-MM-DD') == _daySting
+      });
+      nextFirstDate++;
+    } // 填充当前月天数
+    else {
+      // currentDays.push(i - currentWeekDay + 1);
+      var _daySting2 = hooks(hooks(date).format(YEAER_MONTH_FORMAT_EN) + '-' + (i - currentWeekDay + 1)).format('YYYY-MM-DD');
+
+      currentDays.push({
+        date: _daySting2,
+        text: formatDayWithTwoWords(i - currentWeekDay + 1),
+        isCurrentMonth: true,
+        isCurrentDay: hooks().format('YYYY-MM-DD') == _daySting2
+      });
+    }
+  } // 上个月需要倒序显示
+
+
+  return [].concat(_toConsumableArray(lastDays.reverse()), currentDays, nextDays);
+}
+/**
+ * 初始化日历
+ */
+
+function initWeekCalendar(type, date) {
+  var weekLength = type == 'week' ? 8 : 2;
+  var dayTime = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30'];
+  var weekOfDay = parseInt(hooks(date).format('E')); //计算今天是这周第几天
+
+  var days = [];
+
+  for (var i = 0, len = weekLength * 20; i < len; i++) {
+    var timeIndex = Math.floor(i / weekLength);
+
+    if (i % weekLength == 0) {
+      days.push({
+        text: dayTime[timeIndex]
+      });
+    } else {
+      days.push({
+        date: type == 'week' ? hooks(date).startOf('day').subtract(weekOfDay - i % weekLength, 'days').format('YYYY-MM-DD') + " ".concat(dayTime[timeIndex]) : hooks(date).format('YYYY-MM-DD') + " ".concat(dayTime[timeIndex])
+      });
+    }
+  }
+
+  return days;
+}
+
+function Calendar(_ref, ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      click = _ref.click,
+      type = _ref.type,
+      toolBarSolt = _ref.toolBarSolt,
+      dateCellRender = _ref.dateCellRender,
+      calendarBodyClassName = _ref.calendarBodyClassName;
+
+  var _useState = useState(initCalendar()),
+      _useState2 = _slicedToArray(_useState, 2),
+      days = _useState2[0],
+      setDays = _useState2[1];
+
+  var _useState3 = useState(hooks()),
+      _useState4 = _slicedToArray(_useState3, 2),
+      datevalue = _useState4[0],
+      setDatevalue = _useState4[1];
+
+  var _useState5 = useState(getWeekList()),
+      _useState6 = _slicedToArray(_useState5, 2),
+      oneWeekDays = _useState6[0],
+      setOneWeekDays = _useState6[1];
+
+  var weekLabelArray = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+  var getweekDay = function getweekDay(date) {
+    var index = hooks(date).day();
+    return [weekLabelArray[index - 1]];
+  };
+
+  useEffect(function () {
+    if (type == 'day' || type == 'week') {
+      if (type == 'day') {
+        setOneWeekDays(['时间'].concat(_toConsumableArray(getweekDay(datevalue))));
+      } else {
+        setOneWeekDays(getWeekList(datevalue));
+      }
+
+      setDays(initWeekCalendar(type, datevalue));
+    } else {
+      setDays(initCalendar(datevalue));
+    }
+  }, [type, datevalue]);
+  useEffect(function () {
+    setDatevalue(value || hooks());
+  }, [value]);
+  useEffect(function () {
+    onChange && onChange(datevalue);
+  }, [datevalue]);
+
+  var handleUp = function handleUp() {
+    if (type == 'day' || type == 'week') {
+      if (type == 'day') {
+        var lastDay = hooks(datevalue).subtract(1, 'days');
+        setOneWeekDays(['时间'].concat(_toConsumableArray(getweekDay(lastDay))));
+        setDays(initWeekCalendar(type, lastDay));
+        setDatevalue(lastDay);
+      } else {
+        var lastWeek = hooks().week(hooks(datevalue).week() - 1);
+        setOneWeekDays(getWeekList(lastWeek));
+        setDays(initWeekCalendar(type, lastWeek));
+        setDatevalue(lastWeek);
+      }
+    } else {
+      var lastMonth = hooks(datevalue).subtract(1, 'month');
+      setDays(initCalendar(lastMonth));
+      setDatevalue(lastMonth);
+    }
+  };
+
+  var handleDown = function handleDown() {
+    if (type == 'day' || type == 'week') {
+      if (type == 'day') {
+        var lastDay = hooks(datevalue).add(1, 'days');
+        setOneWeekDays(['时间'].concat(_toConsumableArray(getweekDay(lastDay))));
+        setDays(initWeekCalendar(type, lastDay));
+        setDatevalue(lastDay);
+      } else {
+        var lastWeek = hooks().week(hooks(datevalue).week() + 1);
+        setOneWeekDays(getWeekList(lastWeek));
+        setDays(initWeekCalendar(type, lastWeek));
+        setDatevalue(lastWeek);
+      }
+    } else {
+      var lastMonth = hooks(datevalue).add(1, 'month');
+      setDays(initCalendar(lastMonth));
+      setDatevalue(lastMonth);
+    }
+  };
+
+  var cellClick = function cellClick(info) {
+    console.log(info);
+    click && click(info);
+  };
+
+  useImperativeHandle(ref, function () {
+    return {
+      datevalue: datevalue,
+      handleUp: handleUp,
+      handleDown: handleDown
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: "content_container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "toolbar_container"
+  }, /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement(_Button, {
+    icon: /*#__PURE__*/React.createElement(LeftOutlined, null),
+    type: "text",
+    onClick: handleUp
+  }), type == 'day' ? /*#__PURE__*/React.createElement(_DatePicker, {
+    value: datevalue,
+    onChange: function onChange(date) {
+      setOneWeekDays(['时间'].concat(_toConsumableArray(getweekDay(date))));
+      setDays(initWeekCalendar(type, date));
+      setDatevalue(date);
+    },
+    style: {
+      width: '250px'
+    }
+  }) : type == 'week' ? /*#__PURE__*/React.createElement(_DatePicker, {
+    value: datevalue,
+    style: {
+      width: '250px'
+    },
+    format: "".concat(hooks(datevalue).startOf('week').format('YYYY-MM-DD'), " ~ ").concat(hooks(datevalue).endOf('week').format('YYYY-MM-DD')),
+    picker: "week",
+    onChange: function onChange(date) {
+      setOneWeekDays(getWeekList(date));
+      setDays(initWeekCalendar(type, date));
+      setDatevalue(date);
+    }
+  }) : /*#__PURE__*/React.createElement(_DatePicker, {
+    value: datevalue,
+    picker: "month",
+    onChange: function onChange(date) {
+      setDays(initCalendar(date));
+      setDatevalue(date);
+    },
+    style: {
+      width: '250px'
+    }
+  }), /*#__PURE__*/React.createElement(_Button, {
+    icon: /*#__PURE__*/React.createElement(RightOutlined, null),
+    type: "text",
+    onClick: handleDown
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "pa r30  flex h100p ai-c ",
+    style: {
+      margin: 'auto 0'
+    }
+  }, toolBarSolt)), type == 'week' || type == 'day' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "calendar_header_wrapper",
+    style: {
+      gridTemplateColumns: type == 'week' ? 'repeat(8, 1fr)' : '1fr 7fr'
+    }
+  }, oneWeekDays.map(function (weekLabel) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: weekLabel,
+      className: "flex ai-c jc-c"
+    }, weekLabel);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "content_wrapper ".concat(calendarBodyClassName),
+    style: {
+      gridTemplateColumns: type == 'week' ? 'repeat(8, 1fr)' : '1fr 7fr'
+    }
+  }, days === null || days === void 0 ? void 0 : days.map(function (day, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return cellClick(day);
+      },
+      className: "day_container ".concat(day.isCurrentDay ? 'isCurrentDay' : '', " ").concat(day.isCurrentMonth ? 'isCurrentMonth' : ''),
+      key: index
+    }, dateCellRender ? dateCellRender(day) : day.text);
+  }))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "calendar_header_wrapper"
+  }, weekLabelArray.map(function (weekLabel) {
+    return /*#__PURE__*/React.createElement("div", {
+      key: weekLabel,
+      className: "flex ai-c jc-c"
+    }, weekLabel);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "content_wrapper ".concat(calendarBodyClassName)
+  }, days === null || days === void 0 ? void 0 : days.map(function (day, index) {
+    return /*#__PURE__*/React.createElement("div", {
+      onClick: function onClick() {
+        return cellClick(day);
+      },
+      className: "day_container ".concat(day.isCurrentDay ? 'isCurrentDay' : '', " ").concat(day.isCurrentMonth ? 'isCurrentMonth' : ''),
+      key: index
+    }, dateCellRender ? dateCellRender(day) : day.text);
+  }))));
+}
+
+var index$4 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(Calendar));
+
 var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   var _this = this;
 
@@ -11724,7 +12080,7 @@ function VideoPlayer(_ref, ref) {
   })) : null));
 }
 
-var index$4 = /*#__PURE__*/forwardRef(VideoPlayer);
+var index$5 = /*#__PURE__*/forwardRef(VideoPlayer);
 
 var _excluded$j = ["id", "videoUrls", "definitionList", "isLoop", "muted", "currentIndex", "setCurrentIndex", "className", "style", "visible", "autoplay", "videoInit", "enableMemory", "lastPlayTimeHideDelay"];
 
@@ -11733,7 +12089,7 @@ var DEFAULT_PLAY_BACK_RATE = [0.5, 0.75, 1, 1.5, 2]; // 默认记忆提示文字
 var DEFAULT_LAST_PLAY_TIME_DELAY = 5; // 默认音量大小
 
 var DEFAULT_VOLUME = 0.6;
-var index$5 = (function (_ref) {
+var index$6 = (function (_ref) {
   var id = _ref.id,
       _ref$videoUrls = _ref.videoUrls,
       videoUrls = _ref$videoUrls === void 0 ? [] : _ref$videoUrls,
@@ -12735,4 +13091,4 @@ function WaterLevelCharts(config) {
   });
 }
 
-export { Index$a as AutoScroll, Index$c as Breadcrumb, WButton as Button, index$2 as Card, WCascader as Cascader, Index$4 as Checkbox, Index$9 as CountUp, Index$2 as DatePicker, DragBox, index as IconFont, Index as Input, WInputNumber as InputNumber, LineEcharts, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$8 as Number, NumericInput, Index$3 as Radio, Select, Index$b as Swiper, WSwitch as Switch, index$3 as TabelCard, index$1 as Table, Index$7 as TreeSelect, Upload, index$5 as Video, index$4 as VideoPlayer, Index$6 as WDatePicker, WForm$1 as WForm, WaterLevelCharts, WebsocketHeart, useEventEmitter };
+export { Index$a as AutoScroll, Index$c as Breadcrumb, WButton as Button, index$4 as Calendar, index$2 as Card, WCascader as Cascader, Index$4 as Checkbox, Index$9 as CountUp, Index$2 as DatePicker, DragBox, index as IconFont, Index as Input, WInputNumber as InputNumber, LineEcharts, Modal, ModalForm$1 as ModalForm, Modal$1 as ModalTips, Index$8 as Number, NumericInput, Index$3 as Radio, Select, Index$b as Swiper, WSwitch as Switch, index$3 as TabelCard, index$1 as Table, Index$7 as TreeSelect, Upload, index$6 as Video, index$5 as VideoPlayer, Index$6 as WDatePicker, WForm$1 as WForm, WaterLevelCharts, WebsocketHeart, useEventEmitter };

package/dist/index.js

@@ -57,6 +57,8 @@ require('antd/es/breadcrumb/style');
 var _Breadcrumb = require('antd/es/breadcrumb');
 var ReactDOM = require('react-dom');
 var ProTable = require('@ant-design/pro-table');
+require('antd/es/space/style');
+var _Space = require('antd/es/space');
 var Player = require('xgplayer');
 var FlvPlayer = require('xgplayer-flv.js');
 var HlsJsPlayer = require('xgplayer-hls.js');
@@ -118,6 +120,7 @@ var SwiperCore__default = /*#__PURE__*/_interopDefaultLegacy(SwiperCore);
 var _Breadcrumb__default = /*#__PURE__*/_interopDefaultLegacy(_Breadcrumb);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 var ProTable__default = /*#__PURE__*/_interopDefaultLegacy(ProTable);
+var _Space__default = /*#__PURE__*/_interopDefaultLegacy(_Space);
 var Player__default = /*#__PURE__*/_interopDefaultLegacy(Player);
 var FlvPlayer__default = /*#__PURE__*/_interopDefaultLegacy(FlvPlayer);
 var HlsJsPlayer__default = /*#__PURE__*/_interopDefaultLegacy(HlsJsPlayer);
@@ -378,6 +381,10 @@ function _slicedToArray(arr, i) {
   return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
 }
 
+function _toArray(arr) {
+  return _arrayWithHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableRest();
+}
+
 function _toConsumableArray(arr) {
   return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
 }
@@ -11351,6 +11358,356 @@ var TabelCard = function TabelCard(props, ref) {
 
 var index$3 = /*#__PURE__*/React__default['default'].forwardRef(TabelCard);
 
+var YEAER_MONTH_FORMAT_EN = 'YYYY-MM';
+
+var _moment$weekdaysMin = hooks.weekdaysMin(),
+    _moment$weekdaysMin2 = _toArray(_moment$weekdaysMin),
+    _ = _moment$weekdaysMin2[0],
+    rest = _moment$weekdaysMin2.slice(1); // 将星期天放置数组最后
+
+
+var WEEk_HEADER = [].concat(_toConsumableArray(rest), [_]); // 日历布局为6 * 7单元格
+
+var TOTAL_LENGTH = 6 * 7; // 初始化一下下
+
+var INIT_DAYS = Array(TOTAL_LENGTH).fill(0).map(function (_, index) {
+  return +index + 1;
+});
+
+/**
+ * 获取当前月的天数
+ */
+
+console.log(hooks().format('YYYY-MM-DD'), 'moment()');
+function getMonthDays(date) {
+  return hooks(date).daysInMonth();
+}
+/**
+ * 获取当前月第一天是星期几
+ */
+
+function getWeekDays(date) {
+  return hooks(date).startOf('month').weekday();
+}
+/**
+ * 获取当前星期第一天到星期天
+ */
+
+function getWeekList(date) {
+  var weekOfDay = parseInt(hooks(date).format('E')); //计算今天是这周第几天
+  // let last_monday = moment().startOf('day').subtract(weekOfDay - 1, 'days').format('YYYY-MM-DD');//周一日期
+  // let last_sunday = moment().startOf('day').subtract(weekOfDay - 7, 'days').format('YYYY-MM-DD');//周日日期
+
+  return ['时间'].concat(_toConsumableArray(new Array(7).fill('').map(function (item, index) {
+    return hooks(date).startOf('day').subtract(weekOfDay - (index + 1), 'days').format('YYYY-MM-DD');
+  })));
+}
+/**
+ * 获取上个月份
+ */
+
+function getLastMonth(date) {
+  return hooks(date).subtract(1, 'month').format(YEAER_MONTH_FORMAT_EN);
+}
+/**
+ * 格式化日期为两个单词，例如：‘1’号 格式为 ‘01’
+ * @param {*} dateNumber
+ */
+
+var formatDayWithTwoWords = function formatDayWithTwoWords(dateNumber) {
+  if (dateNumber < 10) {
+    return '0' + dateNumber;
+  }
+
+  return dateNumber;
+};
+/**
+ * 初始化日历
+ */
+
+function initCalendar(date) {
+  // 当前月天数
+  var totalDaysInMonth = getMonthDays(date); // 上个月天数
+
+  var totalDaysInLastMonth = getMonthDays(getLastMonth(date)); // 下个月开始日期
+
+  var nextFirstDate = 1;
+  var lastDays = [],
+      currentDays = [],
+      nextDays = []; // 当前月第一天是星期几(索引值)
+
+  /**
+   * 这里的索引值刚刚好是需要填充的上月的天数
+   */
+
+  var currentWeekDay = getWeekDays(date);
+
+  for (var i = 0, len = 42; i < len; i++) {
+    // 填充上个月的天数
+    if (i < currentWeekDay) {
+      // lastDays.push(totalDaysInLastMonth);
+      var daySting = hooks(hooks(date).subtract(1, 'month').format(YEAER_MONTH_FORMAT_EN) + '-' + totalDaysInLastMonth).format('YYYY-MM-DD');
+      lastDays.push({
+        date: daySting,
+        text: formatDayWithTwoWords(totalDaysInLastMonth),
+        isCurrentMonth: false,
+        isCurrentDay: hooks().format('YYYY-MM-DD') == daySting
+      });
+      totalDaysInLastMonth--;
+    } // 填充下个月的天数
+    else if (i >= totalDaysInMonth + currentWeekDay) {
+      // nextDays.push(nextFirstDate);
+      var _daySting = hooks(hooks(date).add(1, 'month').format(YEAER_MONTH_FORMAT_EN) + '-' + nextFirstDate).format('YYYY-MM-DD');
+
+      nextDays.push({
+        date: _daySting,
+        text: formatDayWithTwoWords(nextFirstDate),
+        isCurrentMonth: false,
+        isCurrentDay: hooks().format('YYYY-MM-DD') == _daySting
+      });
+      nextFirstDate++;
+    } // 填充当前月天数
+    else {
+      // currentDays.push(i - currentWeekDay + 1);
+      var _daySting2 = hooks(hooks(date).format(YEAER_MONTH_FORMAT_EN) + '-' + (i - currentWeekDay + 1)).format('YYYY-MM-DD');
+
+      currentDays.push({
+        date: _daySting2,
+        text: formatDayWithTwoWords(i - currentWeekDay + 1),
+        isCurrentMonth: true,
+        isCurrentDay: hooks().format('YYYY-MM-DD') == _daySting2
+      });
+    }
+  } // 上个月需要倒序显示
+
+
+  return [].concat(_toConsumableArray(lastDays.reverse()), currentDays, nextDays);
+}
+/**
+ * 初始化日历
+ */
+
+function initWeekCalendar(type, date) {
+  var weekLength = type == 'week' ? 8 : 2;
+  var dayTime = ['08:00', '08:30', '09:00', '09:30', '10:00', '10:30', '11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30', '17:00', '17:30'];
+  var weekOfDay = parseInt(hooks(date).format('E')); //计算今天是这周第几天
+
+  var days = [];
+
+  for (var i = 0, len = weekLength * 20; i < len; i++) {
+    var timeIndex = Math.floor(i / weekLength);
+
+    if (i % weekLength == 0) {
+      days.push({
+        text: dayTime[timeIndex]
+      });
+    } else {
+      days.push({
+        date: type == 'week' ? hooks(date).startOf('day').subtract(weekOfDay - i % weekLength, 'days').format('YYYY-MM-DD') + " ".concat(dayTime[timeIndex]) : hooks(date).format('YYYY-MM-DD') + " ".concat(dayTime[timeIndex])
+      });
+    }
+  }
+
+  return days;
+}
+
+function Calendar(_ref, ref) {
+  var value = _ref.value,
+      onChange = _ref.onChange,
+      click = _ref.click,
+      type = _ref.type,
+      toolBarSolt = _ref.toolBarSolt,
+      dateCellRender = _ref.dateCellRender,
+      calendarBodyClassName = _ref.calendarBodyClassName;
+
+  var _useState = React.useState(initCalendar()),
+      _useState2 = _slicedToArray(_useState, 2),
+      days = _useState2[0],
+      setDays = _useState2[1];
+
+  var _useState3 = React.useState(hooks()),
+      _useState4 = _slicedToArray(_useState3, 2),
+      datevalue = _useState4[0],
+      setDatevalue = _useState4[1];
+
+  var _useState5 = React.useState(getWeekList()),
+      _useState6 = _slicedToArray(_useState5, 2),
+      oneWeekDays = _useState6[0],
+      setOneWeekDays = _useState6[1];
+
+  var weekLabelArray = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
+
+  var getweekDay = function getweekDay(date) {
+    var index = hooks(date).day();
+    return [weekLabelArray[index - 1]];
+  };
+
+  React.useEffect(function () {
+    if (type == 'day' || type == 'week') {
+      if (type == 'day') {
+        setOneWeekDays(['时间'].concat(_toConsumableArray(getweekDay(datevalue))));
+      } else {
+        setOneWeekDays(getWeekList(datevalue));
+      }
+
+      setDays(initWeekCalendar(type, datevalue));
+    } else {
+      setDays(initCalendar(datevalue));
+    }
+  }, [type, datevalue]);
+  React.useEffect(function () {
+    setDatevalue(value || hooks());
+  }, [value]);
+  React.useEffect(function () {
+    onChange && onChange(datevalue);
+  }, [datevalue]);
+
+  var handleUp = function handleUp() {
+    if (type == 'day' || type == 'week') {
+      if (type == 'day') {
+        var lastDay = hooks(datevalue).subtract(1, 'days');
+        setOneWeekDays(['时间'].concat(_toConsumableArray(getweekDay(lastDay))));
+        setDays(initWeekCalendar(type, lastDay));
+        setDatevalue(lastDay);
+      } else {
+        var lastWeek = hooks().week(hooks(datevalue).week() - 1);
+        setOneWeekDays(getWeekList(lastWeek));
+        setDays(initWeekCalendar(type, lastWeek));
+        setDatevalue(lastWeek);
+      }
+    } else {
+      var lastMonth = hooks(datevalue).subtract(1, 'month');
+      setDays(initCalendar(lastMonth));
+      setDatevalue(lastMonth);
+    }
+  };
+
+  var handleDown = function handleDown() {
+    if (type == 'day' || type == 'week') {
+      if (type == 'day') {
+        var lastDay = hooks(datevalue).add(1, 'days');
+        setOneWeekDays(['时间'].concat(_toConsumableArray(getweekDay(lastDay))));
+        setDays(initWeekCalendar(type, lastDay));
+        setDatevalue(lastDay);
+      } else {
+        var lastWeek = hooks().week(hooks(datevalue).week() + 1);
+        setOneWeekDays(getWeekList(lastWeek));
+        setDays(initWeekCalendar(type, lastWeek));
+        setDatevalue(lastWeek);
+      }
+    } else {
+      var lastMonth = hooks(datevalue).add(1, 'month');
+      setDays(initCalendar(lastMonth));
+      setDatevalue(lastMonth);
+    }
+  };
+
+  var cellClick = function cellClick(info) {
+    console.log(info);
+    click && click(info);
+  };
+
+  React.useImperativeHandle(ref, function () {
+    return {
+      datevalue: datevalue,
+      handleUp: handleUp,
+      handleDown: handleDown
+    };
+  });
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "content_container"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "toolbar_container"
+  }, /*#__PURE__*/React__default['default'].createElement(_Space__default['default'], null, /*#__PURE__*/React__default['default'].createElement(_Button__default['default'], {
+    icon: /*#__PURE__*/React__default['default'].createElement(icons.LeftOutlined, null),
+    type: "text",
+    onClick: handleUp
+  }), type == 'day' ? /*#__PURE__*/React__default['default'].createElement(_DatePicker__default['default'], {
+    value: datevalue,
+    onChange: function onChange(date) {
+      setOneWeekDays(['时间'].concat(_toConsumableArray(getweekDay(date))));
+      setDays(initWeekCalendar(type, date));
+      setDatevalue(date);
+    },
+    style: {
+      width: '250px'
+    }
+  }) : type == 'week' ? /*#__PURE__*/React__default['default'].createElement(_DatePicker__default['default'], {
+    value: datevalue,
+    style: {
+      width: '250px'
+    },
+    format: "".concat(hooks(datevalue).startOf('week').format('YYYY-MM-DD'), " ~ ").concat(hooks(datevalue).endOf('week').format('YYYY-MM-DD')),
+    picker: "week",
+    onChange: function onChange(date) {
+      setOneWeekDays(getWeekList(date));
+      setDays(initWeekCalendar(type, date));
+      setDatevalue(date);
+    }
+  }) : /*#__PURE__*/React__default['default'].createElement(_DatePicker__default['default'], {
+    value: datevalue,
+    picker: "month",
+    onChange: function onChange(date) {
+      setDays(initCalendar(date));
+      setDatevalue(date);
+    },
+    style: {
+      width: '250px'
+    }
+  }), /*#__PURE__*/React__default['default'].createElement(_Button__default['default'], {
+    icon: /*#__PURE__*/React__default['default'].createElement(icons.RightOutlined, null),
+    type: "text",
+    onClick: handleDown
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "pa r30  flex h100p ai-c ",
+    style: {
+      margin: 'auto 0'
+    }
+  }, toolBarSolt)), type == 'week' || type == 'day' ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "calendar_header_wrapper",
+    style: {
+      gridTemplateColumns: type == 'week' ? 'repeat(8, 1fr)' : '1fr 7fr'
+    }
+  }, oneWeekDays.map(function (weekLabel) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: weekLabel,
+      className: "flex ai-c jc-c"
+    }, weekLabel);
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "content_wrapper ".concat(calendarBodyClassName),
+    style: {
+      gridTemplateColumns: type == 'week' ? 'repeat(8, 1fr)' : '1fr 7fr'
+    }
+  }, days === null || days === void 0 ? void 0 : days.map(function (day, index) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      onClick: function onClick() {
+        return cellClick(day);
+      },
+      className: "day_container ".concat(day.isCurrentDay ? 'isCurrentDay' : '', " ").concat(day.isCurrentMonth ? 'isCurrentMonth' : ''),
+      key: index
+    }, dateCellRender ? dateCellRender(day) : day.text);
+  }))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "calendar_header_wrapper"
+  }, weekLabelArray.map(function (weekLabel) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      key: weekLabel,
+      className: "flex ai-c jc-c"
+    }, weekLabel);
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "content_wrapper ".concat(calendarBodyClassName)
+  }, days === null || days === void 0 ? void 0 : days.map(function (day, index) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      onClick: function onClick() {
+        return cellClick(day);
+      },
+      className: "day_container ".concat(day.isCurrentDay ? 'isCurrentDay' : '', " ").concat(day.isCurrentMonth ? 'isCurrentMonth' : ''),
+      key: index
+    }, dateCellRender ? dateCellRender(day) : day.text);
+  }))));
+}
+
+var index$4 = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(Calendar));
+
 var WebsocketHeart = /*#__PURE__*/_createClass(function WebsocketHeart(_ref) {
   var _this = this;
 
@@ -11785,7 +12142,7 @@ function VideoPlayer(_ref, ref) {
   })) : null));
 }
 
-var index$4 = /*#__PURE__*/React.forwardRef(VideoPlayer);
+var index$5 = /*#__PURE__*/React.forwardRef(VideoPlayer);
 
 var _excluded$j = ["id", "videoUrls", "definitionList", "isLoop", "muted", "currentIndex", "setCurrentIndex", "className", "style", "visible", "autoplay", "videoInit", "enableMemory", "lastPlayTimeHideDelay"];
 
@@ -11794,7 +12151,7 @@ var DEFAULT_PLAY_BACK_RATE = [0.5, 0.75, 1, 1.5, 2]; // 默认记忆提示文字
 var DEFAULT_LAST_PLAY_TIME_DELAY = 5; // 默认音量大小
 
 var DEFAULT_VOLUME = 0.6;
-var index$5 = (function (_ref) {
+var index$6 = (function (_ref) {
   var id = _ref.id,
       _ref$videoUrls = _ref.videoUrls,
       videoUrls = _ref$videoUrls === void 0 ? [] : _ref$videoUrls,
@@ -12799,6 +13156,7 @@ function WaterLevelCharts(config) {
 exports.AutoScroll = Index$a;
 exports.Breadcrumb = Index$c;
 exports.Button = WButton;
+exports.Calendar = index$4;
 exports.Card = index$2;
 exports.Cascader = WCascader;
 exports.Checkbox = Index$4;
@@ -12822,8 +13180,8 @@ exports.TabelCard = index$3;
 exports.Table = index$1;
 exports.TreeSelect = Index$7;
 exports.Upload = Upload;
-exports.Video = index$5;
-exports.VideoPlayer = index$4;
+exports.Video = index$6;
+exports.VideoPlayer = index$5;
 exports.WDatePicker = Index$6;
 exports.WForm = WForm$1;
 exports.WaterLevelCharts = WaterLevelCharts;

package/package.json

@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "wargerm",
-  "version": "0.5.31",
+  "version": "0.5.32",
   "scripts": {
     "dev": "dumi dev",
     "docs:build": "dumi build",