common-scheduler v0.0.3

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>

参数说明

属性

方法

slot