切换分枝

src/router/index.js

@@ -74,6 +74,12 @@ const serviceSchedule = (r) =>
     () => r(require('@/views/IM/diagnosis-admin/addEditSchedule.vue')),
     'addEditSchedule'
   );
+  const overviewScheduling = (r) =>
+  require.ensure(
+    [],
+    () => r(require('@/views/IM/diagnosis-admin/overviewScheduling.vue')),
+    'overviewScheduling'
+  );
 const administrators = (r) =>
   require.ensure(
     [],
@@ -144,6 +150,10 @@ const routerConfig = [
         path: '/addEditSchedule',
         component: addEditSchedule,
       },
+      {
+        path: '/overviewScheduling',
+        component: overviewScheduling,
+      },
       {
         path: '/administrators',
         component: administrators,
@@ -161,4 +171,4 @@ if (process.env.VUE_APP_ENV == 'uat') {
     routerConfig: routerConfig,
   };
   handleAllRouter(routerInfo);
-}
+}
\ No newline at end of file

src/views/IM/diagnosis-admin/overviewScheduling.vue

+<template>
+  <div
+    v-loading="loading"
+    style="
+      width: 100%;
+      height: auto;
+      position: relative;
+      display: flex;
+      justifycontent: space-between;
+    "
+  >
+    <div
+      ref="agment"
+      class="agment-box"
+      :class="{'w2':week==2,'w3':week==3}"
+    >
+      <FullCalendar :options="calendarOptions" />
+    </div>
+  </div>
+</template>
+<script>
+// import '@fullcalendar/core/vdom'
+// import moment from 'moment';
+  import FullCalendar from '@fullcalendar/vue';
+  import dayGridPlugin from '@fullcalendar/daygrid';
+  import timeGridPlugin from '@fullcalendar/timegrid';
+  import interactionPlugin from '@fullcalendar/interaction';
+  import {
+    dutyRosterQuery,
+    saveDutyRoster,
+    getLevel,
+    getDoctorInfo,
+  } from '@/api/serviceSchedule';
+  export default {
+    name: 'Index',
+    components: {
+      FullCalendar,
+    },
+    data() {
+      return {
+        id:'',
+        doctorId:'',
+        schedulingTypeValue:{},
+        schedulingType: 1, // 1 新增  2 编辑  3 查看
+        createList: [],
+        listDate: [],
+        week: 1, // 1:当前周 2:上一周 3:下一周
+        currentIndex: 3,
+        haveWeek: [1],
+        calendarOptions: {
+          // 引入的插件，比如fullcalendar/daygrid，fullcalendar/timegrid引入后才可显示月，周，日
+          plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin],
+          initialView: 'timeGrid', // 默认为那个视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
+          duration: { days: 30 },
+          selectable: true,
+          selectMirror: true,
+          selectAllow: this.selectAllow,
+          selectOverlap: false,
+          select: this.selectInfo,
+          selectMinDistance: 0,
+          eventResize: this.eventResize,
+          eventDrop: this.eventDrop,
+          editable: true,
+          overlap: false,
+          defaultDate: new Date(),
+          datesSet: this.handleDatesSet,
+          events: [],
+          slotEventOverlap: true,
+          header: {
+            center: 'month,agendaFourDay', // buttons for switching between views
+          },
+          firstDay: 1, // 设置一周中显示的第一天是哪天，周日是0，周一是1，类推
+          locale: 'zh-cn', // 切换语言，当前为中文
+          eventColor: '#fff', // 全部日历日程背景色3BB2E3
+          eventBackgroundColor: '#E7F4F5',
+          // themeSystem: 'bootstrap', // 主题色(本地测试未能生效)
+          // initialDate: moment().format('YYYY-MM-DD'), // 自定义设置背景颜色时一定要初始化日期时间
+          timeGridEventMinHeight: '40', // 设置事件的最小高度
+          aspectRatio: 1.35, // 设置日历单元格宽度与高度的比例。
+          // displayEventTime: false, // 是否显示时间
+          allDaySlot: false, // 周，日视图时，all-day 不显示
+          eventLimit: true, // 设置月日程，与all-day slot的最大显示数量，超过的通过弹窗显示
+          customButtons: {
+            myCustomButton: {
+              text: '本周',
+            },
+          },
+          dayHeaderContent:this.aaa,
+          headerToolbar: {
+            // 日历头部按钮位置
+            left: '',
+            center: 'prev myCustomButton next',
+            right: '',
+          },
+          expandRows: true,
+          slotMinWidth: 50,
+          slotDuration: '00:30:00',
+          slotMinTime: '09:00',
+          slotMaxTime: '21:00',
+          slotLabelInterval: '',
+          scrollTime: false,
+          slotLabelFormat: {
+            hour: 'numeric',
+            minute: '2-digit',
+            meridiem: 'short',
+            hour12: false, // 设置时间为24小时
+          },
+          eventLimitNum: {
+            // 事件显示数量限制(本地测试未能生效)
+            dayGrid: {
+              eventLimit: 5,
+            },
+            timeGrid: {
+              eventLimit: 4, // adjust to 6 only for timeGridWeek/timeGridDay
+            },
+          },
+          eventClick: this.handleEventClick,
+        },
+        workingTicketVisible: false, // 工作表票详情页面
+        scrollerHeight: 0,
+        loading: false,
+        indexArr:[1, 2, 3, 4, 5, 6, 7, 1, 2, 3, 4, 5, 6, 7],
+        doctorList:[
+          {
+            doctorId: 0,
+            doctorName: '张三'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三1'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三2'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三3'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三4'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三5'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三6'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三7'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三8'
+          },
+          {
+            doctorId: 0,
+            doctorName: '张三9'
+          },
+        ],
+        index:0,
+      };
+    },
+    watch: {
+      week(newV) {
+        if (this.haveWeek.indexOf(newV) == -1) {
+          this.haveWeek.push(newV);
+          this.handleInitSearch();
+        }
+      },
+    },
+    created() {
+      this.schedulingType = this.$route.query.type || 1;
+      this.id = this.$route.query.id;
+      this.doctorId = this.$route.query.doctorId,
+      getDoctorInfo({ id: this.id }).then((res) => {
+        if (res.code == '000000') {
+          this.schedulingTypeValue = res.data;
+          this.currentIndex = res.data.level;
+        }else{
+          this.$toast(res.message);
+        }
+      });
+      getLevel().then((res) => {
+        if (res.code == '000000') {
+          this.createList = res.data;
+        }
+      });
+
+      this.calendarOptions.duration.days = this.doctorList.length;
+    },
+    mounted() {
+      this.scrollerHeight = this.$refs.agment.clientHeight + 'px';
+      // console.log(this.$refs.agment.clientHeight, 'this.$refs.agment.offsetHeight;');
+      this.init();
+    },
+    methods: {
+      /**
+       * 点击日历日程事件
+       *
+       * info: 事件信息
+       * event是日程（事件）对象
+       * jsEvent是个javascript事件
+       * view是当前视图对象。
+       */
+      aaa(e) {
+        console.log(e);
+        const italicEl = document.createElement('i');
+        italicEl.innerHTML = this.doctorList[this.index]['doctorName'];
+        if(this.index < this.doctorList.length) {
+          this.index += 1;
+        }
+        console.log(italicEl);
+        return {domNodes:[italicEl]};
+      },
+      init() {
+        if (this.schedulingType == 1 || this.schedulingType == 2) {
+          this.calendarOptions.editable = true;
+        } else {
+          // 查看
+          this.calendarOptions.slotDuration = '00:05:00';
+          this.calendarOptions.selectable = false;
+          this.calendarOptions.editable = false;
+        }
+        this.handleInitSearch();
+      },
+      handleInitSearch(isReset) {
+        if (isReset) {
+          this.calendarOptions.events = [];
+        }
+        const objParms = {};
+        objParms.doctorId = this.doctorId;
+        objParms.week = this.week;
+        objParms.workId = this.id;
+        // this.currentIndex = this.schedulingTypeValue.level;
+        dutyRosterQuery(objParms).then((res) => {
+          if (res.code == '000000') {
+            this.handleInitData(res.data);
+          } else {
+            this.$toast(res.message);
+          }
+        });
+      },
+      handleInitData(data) {
+        var newDate = null;
+        if (this.schedulingType != 3) {
+          newDate = [].concat(data.noAcceptList);
+        } else {
+          var acceptList = [];
+          data.acceptList.forEach((item) => {
+            item.type = 88;
+            acceptList.push(item);
+          });
+          newDate = [].concat(acceptList, data.noAcceptList);
+        }
+        // const keyAll = ['end', 'endStr', 'id', 'start', 'startStr'];
+        newDate.forEach((item) => {
+          const dataObj = {};
+          const id = (this.calendarOptions.events.length + 1) * 10;
+          dataObj['week'] = this.week;
+          dataObj['id'] = id;
+          dataObj['end'] = item.endTime;
+          dataObj['start'] = item.startTime;
+          console.log(item.type);
+          dataObj['type'] = item.type;
+          if (item.type == 88) {
+            dataObj['color'] = '#FFEDE9';
+          }
+          this.calendarOptions.events.push(dataObj);
+        });
+      },
+      handleDatesSet(dataInfo) {
+        const currentTime = new Date().getTime();
+        const getTime = new Date(dataInfo.startStr).getTime();
+        const cz = currentTime - getTime;
+        const oneHour = 1 * 60 * 60 * 1000 * 24;
+        const timeDifference = (cz / oneHour) | 0;
+        const headObj = this.calendarOptions.customButtons.myCustomButton;
+        if (timeDifference > 0 && timeDifference < 7) {
+          // 过去
+          this.week = 1;
+          headObj.text = '本周';
+        } else if (timeDifference < 0) {
+          // 未来
+          this.week = 3;
+          headObj.text = '下周';
+        } else {
+          // 现在
+          headObj.text = '上周';
+          this.week = 2;
+        }
+      },
+      eventResize(event) {
+        const index = this.getIdDeleteData(event.event.id);
+        const oldData = this.calendarOptions.events;
+        const keyAll = Object.keys(oldData[index]);
+        const dataObj = {};
+        keyAll.forEach((item) => {
+          if (item === 'week' || item === 'type') {
+            dataObj[item] = oldData[index][item];
+          } else {
+            dataObj[item] = event.event[item];
+          }
+        });
+        oldData.splice(index, 1, dataObj);
+        this.getHandleTime(dataObj);
+      },
+      handleEventClick(event) {
+        if (!this.calendarOptions.selectable) {
+          return;
+        }
+        this.$confirm('你要取消日期吗？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning',
+        })
+          .then((_) => {
+            console.log(_);
+            const index = this.getIdDeleteData(event.event.id);
+            return this.calendarOptions.events.splice(index, 1);
+          })
+          .catch((_) => {
+            console.log(_);
+          });
+      // alert("你要取消日期吗");
+      },
+      eventDrop(event) {
+        event.revert();
+        return;
+      },
+      selectInfo(info) {
+        const startDay = new Date(info.start).getDay();
+        const endDay = new Date(info.end).getDay();
+        if (startDay != endDay) {
+          return this.$toast('不能夸天选择排班');
+        }
+        const id = (this.calendarOptions.events.length + 1) * 10;
+        info.id = id;
+        const keyAll = ['end', 'endStr', 'id', 'start', 'startStr', 'week'];
+        const dataObj = {};
+        keyAll.forEach((item) => {
+          if (item == 'week') {
+            dataObj[item] = this.week;
+          } else {
+            dataObj[item] = info[item];
+          }
+        });
+        this.calendarOptions.events.push(dataObj);
+      },
+      selectAllow(info) {
+        const startDay = new Date(info.start).getDay();
+        const endDay = new Date(info.end).getDay();
+        if (startDay != endDay) {
+          return false;
+        }
+        const currentDate = new Date();
+        const start = info.start;
+        const end = info.end;
+        return start <= end && start >= currentDate;
+      },
+      getIdDeleteData(eventId) {
+        // 删除现有排班
+        const data = this.calendarOptions.events;
+        const index = data.findIndex((event) => event.id == eventId);
+        return index;
+      },
+      getHandleTime(info) {
+        // 对于排班交叉部分处理
+        const infoStart = new Date(info.start).getTime();
+        const infoEnd = new Date(info.end).getTime();
+        const data = this.calendarOptions.events;
+        const newDate = [];
+        let indexObj = false;
+        data.forEach((item) => {
+          const d = new Date(item.end).getTime();
+          const s = new Date(item.start).getTime();
+          if (s > infoStart && infoEnd >= d) {
+            indexObj = true;
+          } else if (s > infoStart && infoEnd >= s) {
+            indexObj = true;
+          } else {
+            const id = (newDate.length + 1) * 10;
+            item.id = id;
+            newDate.push(item);
+          }
+        });
+        this.calendarOptions.events = newDate;
+        return indexObj;
+      },
+      handlePriority(index) {
+        this.currentIndex = index;
+      },
+      resetDoctoreScheduling() {
+        this.handleInitSearch(true);
+      },
+      saveDoctoreScheduling() {
+        this.loading = true;
+        const objParms = {};
+        objParms.week = this.week;
+        objParms.workId = this.schedulingTypeValue.id;
+        objParms.level = this.currentIndex;
+        objParms.list = [];
+        const data = this.calendarOptions.events;
+        data.forEach((item) => {
+          if (item.week == this.week) {
+            const obj = {};
+            obj.startTime = this.dateFormat('YYYY-mm-dd HH:MM:SS', item.start);
+            obj.endTime = this.dateFormat('YYYY-mm-dd HH:MM:SS', item.end);
+            objParms.list.push(obj);
+          }
+        });
+        saveDutyRoster(objParms).then((res) => {
+          if (res.code === '000000') {
+            // this.$toast(res.message);
+            // this.handleInitSearch(true);
+            // this.$router.go(0);
+            this.loading = false;
+            this.$message({
+              message: '排班保存成功',
+              type: 'success'
+            });
+          } else {
+            // this.$toast(res.message);
+            this.$message.error(res.message || '排班保存失败');
+          }
+        });
+      },
+      dateFormat(fmt, date2) {
+        const date = new Date(date2);
+        let ret;
+        const opt = {
+          'Y+': date.getFullYear().toString(), // 年
+          'm+': (date.getMonth() + 1).toString(), // 月
+          'd+': date.getDate().toString(), // 日
+          'H+': date.getHours().toString(), // 时
+          'M+': date.getMinutes().toString(), // 分
+          'S+': date.getSeconds().toString() || '00', // 秒
+        // 有其他格式化字符需求可以继续添加，必须转化成字符串
+        };
+        for (const k in opt) {
+          ret = new RegExp('(' + k + ')').exec(fmt);
+          if (ret) {
+            fmt = fmt.replace(
+              ret[1],
+              ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0')
+            );
+          }
+        }
+        return fmt;
+      },
+    },
+  };
+</script>
+
+<style lang="scss" scoped>
+@import './modal/index';
+</style>