cnhis-design-vue 2.2.3 → 2.2.6

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

@@ -1,775 +0,0 @@
-<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 class="c-full-calendar__mask" v-if="!editable"></div>
-  </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 vexutils, { moment } from '@/utils/vexutils';
-import { formatDate, weekIsMonth, viewMap, getAddTime } from './utils';
-
-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 },
-    editable: { type: Boolean, default: true },
-    showSearchHeader: { type: Boolean },
-    showSidebar: { type: Boolean },
-    queryScheduleList: {
-      type: Function,
-      default: () => Promise.resolve([])
-    },
-    saveOrUpdateSchedule: {
-      type: Function,
-      default: () => Promise.resolve(true)
-    },
-    delSchedule: {
-      type: Function,
-      default: () => Promise.resolve(true)
-    }
-  },
-  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();
-    this.resizeObserver = null;
-    this.updateSize = vexutils.throttle(() => {
-      this.calendar.updateSize();
-    }, 300);
-    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() {},
-  async mounted() {
-    this.calendar = this.$refs.fullCalendar.calendar;
-    this.setViewTime();
-    await this._queryScheduleList();
-    this.handleResizeObserver();
-  },
-  methods: {
-    handleResizeObserver() {
-      // 创建 ResizeObserver 实例
-      this.resizeObserver = new ResizeObserver(entries => {
-        for (const entry of entries) {
-          // // 获取div新的大小
-          // const newWidth = entry.contentRect.width;
-          // const newHeight = entry.contentRect.height;
-
-          this.updateSize();
-        }
-      });
-
-      // 监听可调整大小的div
-      this.resizeObserver.observe(this.$el.parentNode);
-    },
-    async _queryScheduleList() {
-      this.loading = true;
-      try {
-        const res = await this.queryScheduleList({
-          ...this.currentDate
-          // userId: this.userId,
-          // orgId: this.orgId
-        });
-        // if (!data.success) return;
-
-        if (vexutils.isArray(res)) {
-          this.calendarOptions.events = res.map(item => ({ ...item, start: item.startTime, end: item.endTime }));
-        } else {
-          this.calendarOptions.events = [];
-        }
-      } catch (error) {
-        console.log(error);
-      } finally {
-        this.loading = false;
-      }
-    },
-    async _saveOrUpdateSchedule(params) {
-      this.loading = true;
-      try {
-        await this.saveOrUpdateSchedule(params);
-        // if (data.success) this.$message.success('保存成功');
-        await this._queryScheduleList();
-      } catch (error) {
-        console.log(error);
-      } finally {
-        this.loading = false;
-      }
-    },
-    async _delSchedule(params) {
-      this.loading = true;
-      try {
-        const data = await this.delSchedule(params);
-        if (data) {
-          // 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 { title, extendedProps, allDay, start, end } = info.event;
-
-      const tagProps = {
-        viewType: this.viewType,
-        title,
-        isAllDay: allDay,
-        state: extendedProps.state,
-        item: { ...extendedProps, title, startTime: moment(start).format('YYYY-MM-DD HH:mm:ss'), endTime: moment(end).format('YYYY-MM-DD HH:mm:ss') }
-      };
-      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 === 'list' ? 'month' : 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 'list':
-          currentDate = formatDate(date, 'month');
-          break;
-        default:
-          this.setViewTime();
-          break;
-      }
-      Object.assign(this.currentDate, currentDate);
-      this._queryScheduleList();
-    },
-    setViewTime() {
-      const currentDate = {};
-      const { activeStart, activeEnd } = this.calendar.view;
-      currentDate.startTime = moment(activeStart)
-        .clone()
-        .startOf('day')
-        .format('YYYY-MM-DD HH:mm:ss');
-      currentDate.endTime = moment(activeEnd)
-        .clone()
-        .subtract(1, 'day')
-        .endOf('day')
-        .format('YYYY-MM-DD HH:mm:ss');
-
-      Object.assign(this.currentDate, currentDate);
-    },
-    handleAdd() {
-      this.$emit('add', getAddTime(this.dateValue));
-    },
-    handleSelect(event, type = 'add') {
-      const { start, end, extendedProps, title } = event;
-      const { startTime, endTime } = getAddTime(start, end);
-      const params = { ...extendedProps, startTime, endTime, title };
-      if (type === 'edit' || ['day', 'week'].includes(this.viewType)) {
-        params.startTime = moment(start).format('YYYY-MM-DD HH:mm:ss');
-        params.endTime = moment(end).format('YYYY-MM-DD HH:mm:ss');
-      }
-      const that = this;
-      if (
-        moment(start)
-          .clone()
-          .valueOf() <
-        moment()
-          .clone()
-          .startOf('day')
-          .valueOf()
-      ) {
-        this.$confirm({
-          title: '提示',
-          content: '日程开始时间小于当前时间,是否继续?',
-          okText: '确定',
-          cancelText: '取消',
-          onOk: () => {
-            setEmit();
-          },
-          onCancel: () => {
-            if (type === 'edit') {
-              this._queryScheduleList();
-            }
-          }
-        });
-      } else {
-        setEmit();
-      }
-
-      function setEmit() {
-        if (type === 'add') {
-          that.$emit('add', params);
-        } else {
-          that._saveOrUpdateSchedule(params);
-        }
-      }
-    },
-    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() {
-    this.resizeObserver = null;
-  }
-});
-</script>
-<style lang="less" scoped>
-@main-color: #2563f4;
-
-.c-full-calendar {
-  position: relative;
-  display: flex;
-  flex-flow: column nowrap;
-  width: 100%;
-  height: 100%;
-  &__mask {
-    position: absolute;
-    z-index: 1;
-    width: calc(100% - 10px);
-    height: calc(100% - 10px);
-    background-color: rgba(0, 0, 0, 0);
-  }
-  /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%;
-    height: 100%;
-    .full-calendar {
-      display: flex;
-      flex-flow: column nowrap;
-      flex: 1;
-      &__header {
-        display: inline-flex;
-        align-items: center;
-        flex: 0 0 66px;
-        padding: 0 5px;
-        background: #fff;
-        .header-left {
-          color: #212121;
-          span {
-            display: inline-block;
-          }
-          .ant-icon {
-            font-size: 12px;
-          }
-          .calendar-quick {
-            height: 32px;
-            line-height: 32px;
-            padding: 0 14px;
-            border: 1px solid #d9d9d9;
-            cursor: pointer;
-            &:hover {
-              color: @main-color;
-              background: rgba(36, 116, 255, 0.1);
-              border-color: rgba(36, 116, 255, 0.2);
-              i {
-                color: @main-color;
-              }
-            }
-            &:active {
-              color: @main-color;
-              background: rgba(36, 116, 255, 0.2);
-              border-color: @main-color;
-              i {
-                color: @main-color;
-              }
-            }
-            &.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 @main-color;
-            }
-          }
-          .btn-next {
-            margin-left: -1px;
-            border-bottom-right-radius: 4px;
-            border-top-right-radius: 4px;
-            background: #ffffff; // 12
-          }
-          .time-title {
-            margin-left: 10px;
-            font-size: 16px;
-          }
-        }
-        .header-right {
-          display: inline-flex;
-          align-items: center;
-          margin-left: auto;
-          .viewshow-wrap {
-            display: inline-flex;
-            align-items: center;
-            height: 32px;
-            padding: 4px;
-            color: #212121;
-            border-radius: 6px;
-            background: #e5e5e5;
-            box-sizing: border-box;
-            span {
-              display: inline-flex;
-              align-items: center;
-              height: 100%;
-              padding: 4px 10px;
-              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;
-        overflow-y: auto;
-        box-sizing: border-box;
-
-        .fc-timegrid-divider {
-          display: none;
-        }
-
-        .fc-header-toolbar {
-          margin-bottom: 0;
-        }
-
-        .fc-scroller {
-          &::-webkit-scrollbar {
-            width: 0px;
-          }
-        }
-
-        .fc-col-header-cell-cushion {
-          font-weight: normal;
-          color: @main-color;
-          & > span {
-            padding: 10px 0;
-            display: inline-block;
-          }
-        }
-
-        .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;
-          }
-        }
-
-        .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: 60px;
-          padding-top: 3px;
-          color: #212121;
-          background: #fff;
-          box-sizing: border-box;
-          font-weight: normal;
-          .week-day {
-            font-size: 30px;
-            font-weight: 500;
-          }
-        }
-        .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: @main-color;
-          .week-day {
-            color: @main-color;
-          }
-        }
-
-        .month-header {
-          padding: 10px 0;
-          font-size: 14px;
-          font-weight: normal;
-          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: 18px;
-              height: 18px;
-              line-height: 20px;
-              color: #000;
-              font-size: 17px;
-              text-align: center;
-              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: @main-color;
-              border-radius: 50%;
-            }
-          }
-        }
-      }
-    }
-    .sidebar {
-      flex: 0 0 240px;
-    }
-  }
-}
-</style>