# 排班

**Repository Path**: ygx11/scheduling

## Basic Information

- **Project Name**: 排班
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2024-11-13
- **Last Updated**: 2024-11-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 效果图
![image](https://gitee.com/zheng_mingpeng/scheduling/raw/master/demo.jpg)


## 引用
``` vue
import { Timetable } from 'zmp_scheduling'
import 'zmp_scheduling/style.css';
```

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

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

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


## 组件提供了 四个 自定义内容
``` vue
<!-- 满足你的一切幻想 看的你直呼 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默认配置
``` vue
<!-- 看完这个配置  你只能说，太智能了，你忍不住膜拜 -->
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  // 是否可选中
})
```

## 组件内部对外提供超多方法  良心作者啊，不要太感动了
``` vue
<!-- 生成传入月份对应的时间表 -->
getMonthDates(date:Date), 
<!-- 渲染 时间表 -->
bindRenderTimetable(data?:any[]), 
<!-- 渲染 人员列表 -->
bindRenderPersonnel(data?:any[]), 
<!-- 设置表格配置 -->
bindSetTableConfig(initData:any={}), 
<!-- 修改表格选中内容 -->
bindChangeTableConfig(type)
```

## 忘记说了 单元格里面的配置了 哈哈哈
``` vue
<!-- 这个默认就会生成的，就改不了的 -->
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请不要联系作者，就算联系了我也不会改的。最后附上作者邮箱 52610123@qq.com。