cnhis-design-vue 2.1.113 → 2.1.114

package/packages/full-calendar/src/FullCalendar.vue

@@ -0,0 +1,695 @@
+<template>
+  <div class="c-full-calendar">
+    <a-spin v-show="loading" class="loading" tip="加载中" :spinning="loading"></a-spin>
+    <div class="search-wrapper" v-if="showSearchHeader">
+      <a-select style="width: 160px; margin-right: 8px" placeholder="全部数据" @change="handleCategoryChange" allowClear showSearch :filterOption="filterOption">
+        <a-select-option :value="item.sid" v-for="item in schedulerList" :key="item.sid">{{ item.name }}</a-select-option>
+      </a-select>
+      <a-input-search placeholder="请输入关键字搜索" @search="onSearch" allowClear style="width: 222px; margin-right: 8px" class="scheduler-search" enter-button> </a-input-search>
+      <a-button type="primary" style="margin-left: auto" icon="plus-square" @click="handleAdd">
+        新增日程
+      </a-button>
+    </div>
+
+    <div class="main-wrapper">
+      <div class="full-calendar">
+        <div class="full-calendar__header">
+          <div class="header-left">
+            <span class="btn-today calendar-quick" :class="{ disabled: disabledToday }" @click="() => handleDate()">
+              今天
+            </span>
+            <span class="btn-prev calendar-quick" @click="() => handleDate('subtract')"><a-icon type="left"/></span>
+            <span class="btn-next calendar-quick" @click="() => handleDate('add')"><a-icon type="right"/></span>
+            <span class="time-title">{{ timeTitle }}</span>
+          </div>
+          <div class="header-right">
+            <div class="viewshow-wrap">
+              <span v-for="{ label, value } in viewShows" :key="value" @click="handleChangeView(value)" :class="{ active: viewType === value }">
+                {{ label }}
+              </span>
+            </div>
+            <a-button type="primary" style="margin-left: 10px" icon="plus-square" @click="handleAdd">
+              新增日程
+            </a-button>
+          </div>
+        </div>
+        <FullCalendar v-show="viewType !== 'list'" ref="fullCalendar" :options="calendarOptions" class="full-calendar__body" />
+        <ListTag v-show="viewType === 'list'" :list-data="calendarOptions.events" :date-value="dateValue" :view-type="viewType" v-on="$listeners"></ListTag>
+      </div>
+      <div class="sidebar" v-if="showSidebar"></div>
+    </div>
+
+    <TagDetail v-on="$listeners" ref="tagDetailRef"></TagDetail>
+  </div>
+</template>
+
+<script>
+import create from '@/core/create';
+import FullCalendar from '@fullcalendar/vue';
+import dayGridPlugin from '@fullcalendar/daygrid';
+import timeGridPlugin from '@fullcalendar/timegrid';
+import interactionPlugin from '@fullcalendar/interaction';
+import listPlugin from '@fullcalendar/list';
+import { Spin, Select, Input, Button, Icon } from 'ant-design-vue';
+import Tag from './components/Tag.vue';
+import ListTag from './components/ListTag.vue';
+import TagDetail from './components/TagDetail.vue';
+// import SvgIcon from '@/component/svg/index.vue';
+import { axiosInstance, getScheduleListApi, getScheduleSettingApi, getScheduleDataApi, queryScheduleListApi, saveOrUpdateScheduleApi, delScheduleApi } from './api';
+import vexutils, { moment } from '@/utils/vexutils';
+import { isAllDay, isAllDayWeek, getWeekEnd, isAllDayMonth, formatDate, weekIsMonth, hanldeDateListArr, handleListRows, viewMap } from './utils';
+
+window.moment = moment;
+
+export default create({
+  name: 'full-calendar',
+  components: {
+    // SvgIcon,
+    // Tag,
+    TagDetail,
+    ListTag,
+    FullCalendar,
+    [Spin.name]: Spin,
+    [Select.name]: Select,
+    [Select.Option.name]: Select.Option,
+    [Input.Search.name]: Input.Search,
+    [Button.name]: Button,
+    [Icon.name]: Icon
+  },
+  props: {
+    serverPrefix: { type: String, default: 'inbox' },
+    // userInfo: { type: Object, default: () => {} },
+    orgId: { type: String },
+    userId: { type: String },
+    token: { type: String },
+    showSearchHeader: { type: Boolean },
+    showSidebar: { type: Boolean }
+  },
+  computed: {
+    disabledToday() {
+      return (
+        this.dateValue
+          .clone()
+          .startOf('day')
+          .valueOf() ===
+        moment()
+          .startOf('day')
+          .valueOf()
+      );
+    },
+    timeTitle() {
+      if (this.viewType === 'list') {
+        return moment(this.currentDate.startTime)
+          .startOf('month')
+          .format('YYYY年MM月');
+      } else {
+        const map = {
+          day: '今天',
+          week: '本月',
+          month: '本月'
+        };
+
+        const formatTime = this.dateValue.clone().format(this.viewType !== 'day' ? 'YYYY年MM月' : 'YYYY年MM月DD日 ddd');
+        let isToday = false;
+        if (this.viewType === 'week') {
+          isToday = weekIsMonth(this.dateValue);
+        } else {
+          isToday = this.isToday;
+        }
+        return `${formatTime} ${isToday ? map[this.viewType] : ''}`;
+      }
+    },
+    isToday() {
+      if (!this.calendar) return false;
+      const viewType = this.viewType;
+      const calendarDate = moment(this.calendar.getDate());
+      const calendarDateValue = calendarDate
+        .clone()
+        .startOf(viewType)
+        .valueOf();
+      const nowValue = moment()
+        .startOf(viewType)
+        .valueOf();
+      return calendarDateValue === nowValue;
+    }
+  },
+  watch: {},
+  data() {
+    this.tippyInstance = null;
+    const { startTime, endTime } = formatDate();
+    return {
+      calendar: null,
+      viewShows: ['list', 'day', 'week', 'month'].map((value, idx) => ({
+        id: idx,
+        label: viewMap[value],
+        value
+      })),
+      loading: false,
+      schedulerList: [],
+      currentDate: {
+        startTime,
+        endTime
+      },
+      viewType: 'month',
+      dateValue: moment(),
+      calendarOptions: {
+        // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
+        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
+        initialView: 'dayGridMonth', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
+        firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
+        locale: 'zh-cn', // 切换语言，当前为中文
+        eventColor: '#3BB2E3', // 全部日历日程背景色
+        timeGridEventMinHeight: '20', // 设置事件的最小高度
+        // aspectRatio: 1.82, // 设置日历单元格宽度与高度的比例。
+        expandRows: true,
+        // displayEventTime: false, // 是否显示时间
+        // allDaySlot: false, // 周，日视图时，all-day 不显示
+        allDayText: '全天',
+        eventLimit: 3, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
+        // headerToolbar: {
+        //   // 日历头部按钮位置
+        //   left: 'today prev,next title',
+        //   center: '',
+        //   right: 'list,timeGridDay,timeGridWeek,dayGridMonth'
+        // },
+        headerToolbar: {
+          left: '',
+          center: '',
+          right: ''
+        },
+        buttonText: {
+          list: '列表',
+          day: '日',
+          week: '周',
+          month: '月',
+          today: '今天'
+        },
+        slotLabelFormat: {
+          hour: '2-digit',
+          minute: '2-digit',
+          meridiem: false,
+          hour12: false // 设置时间为24小时
+        },
+        // 事件
+        // eventClick: this.handleEventClick, // 点击日历日程事件
+        eventDrop: this.handleDrop, // 拖动日历日程事件
+        // eventResize: this.eventResize, // 修改日历日程大小事件
+        select: this.handleSelect, // 选中日历格事件
+        // eventDidMount: this.eventDidMount, // 安装提示事件
+        // loading: this.loadingEvent, // 视图数据加载中、加载完成触发（用于配合显示/隐藏加载指示器。）
+        // selectAllow: this.selectAllow, //编程控制用户可以选择的地方，返回true则表示可选择，false表示不可选择
+        // eventMouseEnter: this.eventMouseEnter, // 鼠标滑过
+        showNonCurrentDates: true,
+        droppable: true,
+        allowContextMenu: false,
+        editable: true, // 是否可以进行（拖动、缩放）修改
+        eventStartEditable: true, // Event日程开始时间可以改变，默认true，如果是false其实就是指日程块不能随意拖动，只能上下拉伸改变他的endTime
+        eventDurationEditable: true, // Event日程的开始结束时间距离是否可以改变，默认true，如果是false则表示开始结束时间范围不能拉伸，只能拖拽
+        selectable: true, // 是否可以选中日历格
+        selectMirror: true,
+        selectMinDistance: 0, // 选中日历格的最小距离
+        dayMaxEvents: true,
+        weekends: true,
+        // navLinks: true, // 天链接
+        selectHelper: false,
+        slotEventOverlap: false, // 相同时间段的多个日程视觉上是否允许重叠，默认true允许
+        eventResizableFromStart: true,
+        moreLinkContent: ({ num }) => `还有${num}个日程`,
+        now: new Date(),
+        events: [],
+        // 表头内容
+        dayHeaderContent: this.dayHeaderContentRender,
+        eventContent: this.eventContentRender
+      }
+    };
+  },
+  beforeCreate() {
+    axiosInstance.interceptors.request.use(config => {
+      config.headers['Authorization'] = 'bearer ' + this.token;
+      config.baseURL = '/' + this.serverPrefix;
+      return config;
+    });
+  },
+  async created() {
+    // await this.queryScheduleList();
+    // await this.getSchedulerList();
+    // await this.getSchedulerData();
+  },
+  async mounted() {
+    this.calendar = this.$refs.fullCalendar.calendar;
+    await this.queryScheduleList();
+    // try {
+    //   this.loading = true;
+    //   this.calendar = this.$refs.fullCalendar.calendar;
+    //   // await this.getScheduleSettingt();
+    //   // await this.getSchedulerList();
+    //   // await this.getSchedulerData();
+    // } catch (err) {
+    //   this.loading = false;
+    // } finally {
+    //   this.loading = false;
+    // }
+  },
+  methods: {
+    async queryScheduleList() {
+      this.loading = true;
+      try {
+        const data = await queryScheduleListApi({
+          ...this.currentDate,
+          userId: this.userId,
+          orgId: this.orgId
+        });
+        if (!data.success) return;
+
+        if (vexutils.isArray(data.data)) {
+          this.calendarOptions.events = data.data.map(item => ({ ...item, start: item.startTime, end: item.endTime }));
+        } else {
+          this.calendarOptions.events = [];
+        }
+        // this.dateValue && this.calendar.gotoDate(this.dateValue._d);
+      } catch (error) {
+        console.log(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    async saveOrUpdateSchedule(params) {
+      try {
+        const data = await saveOrUpdateScheduleApi(params);
+        if (data.success) this.$message.success('保存成功');
+        await this.queryScheduleList();
+      } catch (error) {
+        console.log(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    async delSchedule(params) {
+      try {
+        const data = await delScheduleApi(params);
+        if (data.success) {
+          this.$message.success('删除成功');
+          this.calendarOptions.events = this.calendarOptions.events.filter(item => item.scheduleId === params.scheduleId);
+        }
+        // await this.queryScheduleList();
+      } catch (error) {
+        console.log(error);
+      } finally {
+        this.loading = false;
+      }
+    },
+    eventContentRender(info) {
+      const { avatar, scheduleId, table, isAllDay, statusFlag } = info.event.extendedProps;
+
+      const tagProps = {
+        viewType: this.viewType,
+        statusFlag,
+        avatar,
+        title: info.event.title,
+        isAllDay,
+        item: info.event.extendedProps
+      };
+      return [<Tag props={tagProps} on={this.$listeners}></Tag>];
+    },
+    dayHeaderContentRender({ date }) {
+      const weekday = ['日', '一', '二', '三', '四', '五', '六'];
+      const day = date.getDate();
+      const week = date.getDay();
+
+      let html = `<span>周${weekday[week]}</span>`;
+      if (this.calendar?.view?.type === 'timeGridWeek') {
+        html = `<div class="week-header">
+                <span>周${weekday[week]}</span>
+                <span class="week-day">${day}</span>
+              </div>`;
+      } else if (this.calendar?.view?.type === 'dayGridMonth') {
+        html = `<div class="month-header">周${weekday[week]}</div>`;
+      }
+      return { html };
+    },
+    handleDate(changeType) {
+      if (this.loading) return;
+      const dateValue = changeType ? this.dateValue.clone()[changeType](1, this.viewType) : moment();
+      this.dateValue = dateValue;
+      switch (changeType) {
+        case 'subtract':
+          this.calendar.prev();
+          break;
+        case 'add':
+          this.calendar.next();
+          break;
+        default:
+          this.calendar.today();
+          this.calendar.gotoDate(dateValue._d);
+          break;
+      }
+
+      // this.calendarOptions.now = dateValue._d;
+      this.handleCurrentDateChange();
+    },
+    handleCurrentDateChange() {
+      const date = moment(this.dateValue).format('YYYY-MM-DD');
+      let currentDate = {};
+      switch (this.viewType) {
+        case 'day':
+          currentDate = formatDate(date, 'day');
+          break;
+        case 'week':
+          currentDate = formatDate(date, 'week');
+          break;
+        default:
+          currentDate = formatDate(date, 'month');
+          break;
+      }
+      Object.assign(this.currentDate, currentDate);
+      this.queryScheduleList();
+    },
+    handleAdd() {
+      this.$emit('add', {});
+    },
+    handleSelect({ start, end }, type = 'add') {
+      const startTime = moment(start).format('YYYY-MM-DD HH:mm:ss');
+      const endTime = moment(end).format('YYYY-MM-DD HH:mm:ss');
+      if (moment(start).valueOf() < moment().valueOf()) {
+        this.$confirm({
+          title: '提示',
+          content: '日程开始时间小于当前时间,是否继续?',
+          okText: '确定',
+          cancelText: '取消',
+          onOk: () => {
+            this.$emit(type, { startTime, endTime });
+          },
+          onCancel: () => {
+            if (type === 'edit') {
+              this.queryScheduleList();
+            }
+          }
+        });
+      } else {
+        this.$emit(type, { startTime, endTime });
+      }
+    },
+    handleDrop({ event, oldEvent }) {
+      this.handleSelect(event, 'edit');
+    },
+    handleChangeView(value) {
+      if (this.viewType === value) return;
+      this.viewType = value;
+
+      switch (value) {
+        case 'day':
+          this.calendar.changeView('timeGridDay');
+          break;
+        case 'week':
+          this.calendar.changeView('timeGridWeek');
+          break;
+        case 'month':
+          this.calendar.changeView('dayGridMonth');
+          break;
+      }
+
+      this.handleCurrentDateChange();
+    }
+  },
+  beforeDestroy() {}
+});
+</script>
+<style lang="less" scoped>
+@primary-color: #2d7aff;
+
+.c-full-calendar {
+  display: flex;
+  flex-flow: column nowrap;
+  width: 100%;
+  height: 100%;
+  /deep/ .tag-detail-wrpper {
+    display: none;
+  }
+  /deep/.loading {
+    position: absolute;
+    left: 0;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    z-index: 9999;
+    background: rgba(255, 255, 255, 0.7);
+    .ant-spin-text {
+      margin-top: 8px;
+    }
+  }
+  .search-wrapper {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex: 0 0 48px;
+    padding: 0 15px;
+  }
+  .main-wrapper {
+    display: flex;
+    width: 100%;
+    flex: 1;
+    .full-calendar {
+      display: flex;
+      flex-flow: column nowrap;
+      flex: 1;
+      &__header {
+        display: inline-flex;
+        align-items: center;
+        flex: 0 0 66px;
+        padding: 0 15px;
+        background: #f7f7f7;
+        .header-left {
+          color: #212121;
+          span {
+            display: inline-block;
+          }
+          .ant-icon {
+            font-size: 12px;
+          }
+          .calendar-quick {
+            height: 34px;
+            line-height: 34px;
+            padding: 0 14px;
+            border: 1px solid #d9d9d9;
+            cursor: pointer;
+            &:hover {
+              color: #2d7aff;
+              background: rgba(36, 116, 255, 0.1);
+              border-color: rgba(36, 116, 255, 0.2);
+              i {
+                color: #2d7aff;
+              }
+            }
+            &:active {
+              color: #2d7aff;
+              background: rgba(36, 116, 255, 0.2);
+              border-color: #2d7aff;
+              i {
+                color: #2d7aff;
+              }
+            }
+            &.disabled {
+              color: rgba(0, 0, 0, 0.6);
+              background: #f7f7f7;
+              border: 1px solid #d9d9d9;
+              cursor: not-allowed;
+              background: #ffffff;
+            }
+          }
+          .btn-today {
+            border-radius: 4px;
+            border: 1px solid #d9d9d9;
+            background: #ffffff;
+          }
+
+          .btn-prev {
+            margin-left: 8px;
+            border-bottom-left-radius: 4px;
+            border-top-left-radius: 4px;
+            &:hover {
+              box-shadow: 1px 0 0 0 rgba(36, 116, 255, 0.2);
+            }
+            &:active {
+              box-shadow: 1px 0 0 0 #2d7aff;
+            }
+          }
+          .btn-next {
+            margin-left: -1px;
+            border-bottom-right-radius: 4px;
+            border-top-right-radius: 4px;
+            background: #ffffff; // 12
+          }
+          .time-title {
+            margin-left: 16px;
+            font-size: 18px;
+          }
+        }
+        .header-right {
+          display: inline-flex;
+          align-items: center;
+          margin-left: auto;
+          .viewshow-wrap {
+            display: inline-flex;
+            align-items: center;
+            height: 34px;
+            padding: 4px;
+            color: #212121;
+            border-radius: 6px;
+            background: #e5e5e5;
+            box-sizing: border-box;
+            span {
+              display: inline-flex;
+              align-items: center;
+              height: 100%;
+              padding: 4px 14px;
+              border-radius: 4px;
+              cursor: pointer;
+              &.active {
+                background: #ffffff;
+                box-shadow: 0px 1px 2px 0px rgba(154, 154, 154, 0.5);
+              }
+            }
+          }
+        }
+      }
+      /* 插件样式 */
+      /deep/ .full-calendar__body {
+        width: 100%;
+        flex: 1;
+        box-sizing: border-box;
+
+        .fc-header-toolbar {
+          margin-bottom: 0;
+        }
+
+        .fc-scroller {
+          &::-webkit-scrollbar {
+            width: 0px;
+          }
+        }
+
+        .fc-more-popover {
+          background: #fff;
+          box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
+          border-radius: 8px;
+          border: 1px solid #d5d5d5;
+          width: 208px;
+          box-sizing: border-box;
+          .fc-popover-header {
+            height: 50px;
+            line-height: 50px;
+            padding: 0 16px;
+            color: #000;
+            border-radius: 8px 8px 0 0;
+            box-sizing: border-box;
+            background: #fff;
+            border-bottom: 1px solid #e6e6e6;
+            .fc-titlefc-popover-title {
+              font-size: 16px;
+            }
+            .fc-popover-close {
+              font-size: 18px;
+            }
+          }
+          .fc-popover-body {
+            height: 156px;
+            padding: 8px 14px;
+            box-sizing: border-box;
+            margin-right: 0px;
+          }
+          .fc-daygrid-event {
+            margin: 0;
+            margin-bottom: 7px;
+          }
+        }
+
+        .fc-timegrid-slot-minor {
+          border-top-style: hidden;
+        }
+
+        .fc-event {
+          background: transparent !important;
+          border-color: transparent !important;
+          padding-right: 0px;
+        }
+        .fc-event + .fc-event {
+          margin-left: 4px;
+        }
+
+        .week-header {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          height: 71px;
+          padding-top: 4px;
+          color: #212121;
+          background: #fff;
+          box-sizing: border-box;
+          .week-day {
+            font-size: 30px;
+          }
+        }
+        .fc-day-past .week-header {
+          color: rgba(33, 33, 33, 0.4);
+          .week-day {
+            color: rgba(33, 33, 33, 0.4);
+          }
+        }
+        .fc-day-today .week-header {
+          color: @primary-color;
+          .week-day {
+            color: @primary-color;
+          }
+        }
+
+        .month-header {
+          height: 71px;
+          line-height: 71px;
+          font-size: 16px;
+          color: #212121;
+          background: #fff;
+        }
+
+        .fc-timegrid-body .fc-day-today {
+          background-color: #fff;
+        }
+
+        .fc-daygrid-day {
+          background-color: #fff;
+
+          .fc-daygrid-day-top {
+            flex-direction: row;
+            .fc-daygrid-day-number {
+              width: 26px;
+              height: 26px;
+              line-height: 26px;
+              color: #000;
+              font-size: 19px;
+              text-align: center;
+              padding: 4px;
+              overflow: hidden;
+              box-sizing: content-box;
+              margin: 2px 0 0 2px;
+            }
+          }
+          &.fc-day-today {
+            background-color: #f2f7ff;
+            .fc-daygrid-day-number {
+              color: #fff;
+              background-color: #2d7aff;
+              border-radius: 50%;
+            }
+          }
+        }
+      }
+    }
+    .sidebar {
+      flex: 0 0 240px;
+    }
+  }
+}
+</style>