引言

这是一个全方面，全功能的的人员时间安排表，可点击单选，可长按鼠标拖动范围选中，真是好及。一切皆可自定义，就是这么强大。

效果图

引用

import { Timetable } from 'zmp_scheduling'
import 'zmp_scheduling/style.css';

单个示例

<Timetable ref="timetableRef" @bindTableSelect="bindTableSelect" @bindSetTableSuccess="bindSetTableSuccess" />
<!-- 初值化 需要 调用 这个三个方法 -->
const timetableRef = ref()
timetableRef.value?.bindRenderTimetable()
timetableRef.value?.bindRenderPersonnel()
timetableRef.value?.bindSetTableConfig()

<!-- 选中的时候返回的 -->
@bindTableSelect

<!-- 设置成功之后返回的 -->
@bindSetTableSuccess

组件提供了 四个 自定义内容

<!-- 满足你的一切幻想 看的你直呼 666 -->
<template #date="scope">{{ scope.date.week }} {{ scope.date.day }}</template>
<template #personnel="scope">{{ scope.personnel.value }} {{ scope.personnel.label }}</template>
<template #tableItem="scope">{{ JSON.stringify(scope.person.label) }}</template>
<template #setTable>aaa</template>

props默认配置

<!-- 看完这个配置  你只能说，太智能了，你忍不住膜拜 -->
const defaultOption = reactive({
    dateLableKey: 'day',  // 日期展示 key
    dateValueKey: 'week', // 星期展示key  
    labelKey: 'label',   // 人员 展示key
    valueKey: 'value',   // 人员 值是唯一性  key
    tableSelectedKey: 'type',  // 表格选中类型 key
    typeStyle: {  // 选中样式配置  
        0: { backgroundColor: 'unset',color: '#666A71',label: '休息' },
        1: { backgroundColor: '#FFEAE9',color: '#FF5A52',label: '早班' },
        2: { backgroundColor: '#FFF5E9',color: '#F19B34',label: '中班' },
        3: { backgroundColor: '#F2FBEA',color: '#6ECA1B',label: '晚班' },
        4: { backgroundColor: '#E3F1FF',color: '#3297FF',label: '假日班' },
    },
    scheduleStyle: { // 排班表 宽高
        w: 1000,
        h: 500
    },
    personnelStyle: { // 人员单元格 宽高
        w: 100,
        h: 40
    },
    dateStyle: {  // 日期单元格 宽高
        w: 80,
        h: 45
    },
    formatConfigFn: (data:any=null) => data,   // 自定义配置表
    tableIsDisabledFn: (data:any={}) => false  // 是否可选中
})

组件内部对外提供超多方法 良心作者啊，不要太感动了

<!-- 生成传入月份对应的时间表 -->
getMonthDates(date:Date), 
<!-- 渲染 时间表 -->
bindRenderTimetable(data?:any[]), 
<!-- 渲染 人员列表 -->
bindRenderPersonnel(data?:any[]), 
<!-- 设置表格配置 -->
bindSetTableConfig(initData:any={}), 
<!-- 修改表格选中内容 -->
bindChangeTableConfig(type)

忘记说了 单元格里面的配置了 哈哈哈

<!-- 这个默认就会生成的，就改不了的 -->
basicConfig: {
    row,
    col,
    w: colW,
    h: colH,
    x: colW * col,
    y: colH * row,
    selected: false,  // 鼠标范围选中状态
    disabled: defaultOption.tableIsDisabledFn({person,time,row,col}),  // 是否可选中
}
<!-- 这个是可以配合 上面配置 formatConfigFn 自行自定义配置的，最后会合到一起生成最终的配置 -->
selfConfig: {
    id: ( initConfig[time.day] && initConfig[time.day].id ) || '',
    person,
    time: time,
    type: ( initConfig[time.day] && initConfig[time.day][defaultOption.tableSelectedKey] ) || 0,
}

自述

上述已经够清楚了吧，要是还是不懂请v50联系作者，待作者吃完肯德基之后，再为你作答。要是发现了bug请不要联系作者，就算联系了我也不会改的。最后附上作者邮箱 [email protected]。