draggable-schedule

基于Vue的日程排班表

安装

npm install draggable-schedule

使用

  <draggable-schedule
    :yAxis="platform"
    :eventArr="eventArr"
    :originData="originData"
    @change="handleChange"
    startDateTime="2020-02-11 08:00"
    endDateTime="2020-02-11 22:00"
  >
    </draggable-schedule>

datas数据格式

const scheduleData = {
    '星期一': [
        {
            id: 1,
            platId: 1,
            startTime: '2020-02-11 10:00',
            endTime: '2020-02-11 12:00',
            eventName: '起床，早餐',
            type: 0,
        },
    ],
    ...
}

yAxis数据格式

yAxis: [
      {
          name: '星期一',
          type: 0,
          id: 1,
      },
      {
          name: '星期二',
          type: 1,
          id: 2,
      },
      {
          name: '星期三',
          type: 2,
          id: 3,
      },
      {
          name: '星期四',
          type: 1,
          id: 4,
      },
      {
          name: '星期五',
          type: 2,
          id: 5,
      },
      {
          name: '星期六',
          type: 2,
          id: 7,
      },
      {
          name: '星期天',
          type: 2,
          id: 8,
      },
  ];

eventArr数据格式

const eventArr = [
  {
      id: 1,
      startTime: '2020-02-11 10:00',
      endTime: '2020-02-11 12:00',
      eventName: '起床，早餐',
      type: 0,
  },
  {
      id: 8,
      startTime: '2020-02-11 10:00',
      endTime: '2020-02-11 12:00',
      eventName: '语文课',
      type: 1,
  }
]

完整示例

<template>
  <div id="app">
    <draggable-schedule
      :yAxis="yAxis"
      :eventArr="eventArr"
      :originData="originData"
      @change="handleChange"
      startDateTime="2020-02-11 08:00"
      endDateTime="2020-02-11 22:00"
    >
    </draggable-schedule>
  </div>
</template>

<script>
import draggableSchedule from 'draggable-schedule';

export default {
  components: {
    draggableSchedule
  },
  data() {
    return {
      yAxis,
      originData,
    }
  },
  methods: {
    change(data) {
      console.log(data);
    },
  }
}
</script>

    :yAxis="yAxis"
    :eventArr="eventArr"
    :originData="originData"
    @change="handleChange"
    startDateTime="2020-02-11 08:00"
    endDateTime="2020-02-11 22:00"

参数说明

属性

名称	类型	默认	描述
yAxis	Array	[]	纵坐标数据
eventArr	Array	[]	自定义事件数据
originData	Object	[]	原始数据
startDateTime	String	'2020-02-11 08:00'	开始时间
endDateTime	String	'2020-02-11 23:00	结束时间

方法

名称	类型	参数	描述
change	Function	data	修改排版后触发