common-scheduler

基于Vue的日程排班表

安装

npm install common-scheduler

使用

<schedule
      start="2016-8-12 12:00:00"
      end="2017-9-12 12:00:00"
      :datas="scheduleData"
      :width="180"
      :height="80"
      granularity="month"
      @addHandle="addHandle"
      @removeHandle="removeHandle"
    >

    </schedule>

datas数据格式

const scheduleData = {
    '1#': {
        name: '1', // 月台名称
        type: 1, // 月台类型 0:装；1:卸；
        sche: [
            {
                start: '2019-08-14 12:30', // 开始时间
                end: '2019-08-14 15:30', // 结束时间
                type: 1, // 类型 1:装；2:卸
                status: 2, // 状态 【预约未确认，预约已确认 ...】
                selected: false, // 是否选中 默认false[新增/修改后需将默认设置为false]
                carNum: '川A98UI4', // 车牌号
                constractor: '明夏物流', // 承运商
            },
        ],
    },
    ...
}

完整示例

<template>
  <div id="app">
    <commonScheduler
      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>
    </commonScheduler>

  </div>
</template>

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

export default {
  components: {
    commonScheduler
  },
  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 | 自定义日程内容 | | sche-name | 自定义月台名称| | detail | 自定义详情 |