common-schedule

基于Vue的日程排班表

安装

npm install common-schedule

使用

<commonSchedule
      start="2019-1-12 12:00:00"
      end="2019-12-12 12:00:00"
      :datas="scheduleData"
      :width="180"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >
    </commonSchedule>

datas数据格式

const scheduleData = {
    '川A89UZ0': {
        xName: '川A89UZ0', //
        sche: [
            {
                start: '2019-08-14 12:30', // 开始时间
                end: '2019-09-14 15:30', // 结束时间
                eventName: '成都-上海', // 事件
            },
        ],
    },
    ...
}

完整示例

<template>
  <div id="app">
    <commonSchedule
      start="2018-8-12 12:00:00"
      end="2018-12-12 12:00:00"
      :datas="scheduleData"
      :width="180"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >
      <template slot="content" slot-scope="props">
        {{props.content.carNum}}
      </template>
      <template slot="time" slot-scope="props">
        {{props.content.year}}
      </template>
      <template slot="sche-name" slot-scope='props'>
        {{props.content.name}}
      </template>
      <template slot="detail" slot-scope="props">
        <div>
          {{props.content.carNum}}
        </div>
      </template>
    </commonSchedule>
  </div>
</template>

<script>
import commonSchedule from 'common-schedule';
import scheduleData from './components/schedule/demoData';

export default {
  components: {
    commonSchedule
  },
  data() {
    return {
      scheduleData,
    }
  },
  methods: {
    addHandle(params) {
      console.log('添加方法');
      console.log(params);
    },
    removeHandle(params) {
      console.log('删除方法');
      console.log(params);
    }
  }
}
</script>

参数说明

属性

| 名称 | 类型 | 默认 | 描述 | | --- | --- | --- | --- | | datas | Object | {} | 展示数据 | | start | String | '2018-8-12 12:00:00' | 开始时间 | | end | String | '2018-12-12 12:00:00' | 结束时间 | | granularity | String | 'hour' 可选值['year','month', 'day'] | 时间粒度 | | width | Number | 200 | 宽度 | | height | Number | 70 | 高度 | | halfSplit | Boolean | false | 是否分半展示时间粒度[如一小时分为0-30分 、30-60分] |

方法

| 名称 | 类型 | 参数 | 描述 | | --- | --- | --- | --- | | addHandle | Function | item | 添加日程事件 | | removeHandle | Function | item | 删除日程事件 |

slot

| 名称 | 描述 | | --- | --- | | time | 自定义时间线 | | content | 自定义日程内容 | | x-name | 自定义月台名称| | detail | 自定义详情 |