更新记录

1.0.0（2023-09-25） 下载此版本

23-09-24 排班表组件1.0.0

平台兼容性

使用方法

使用：

1. 下载文件，然后将文件放到项目的指定目录下，并 import 导入使用即可

注意说明：

1. 该组件使用的是Ts, 如您的项目是js,那么就需要手动修改下，移除组件里面的Ts相关类型定义即可
2. 里面的 PickerDate 组件是用了uniapp原有的picker-view进行二次封装的日期选择组件；可自行替换成你们自己项目里的UI库的选择器，若替换了之后，需要将返回值对应上 onConfirmDate 函数的值即可

传参说明

事件方法

示例1

html

<gcm-work-schedule :now-date="nowDate" :shift-data="taskAllList" isThisWeek isSelectWeek></gcm-work-schedule>

Ts

<script setup lang='ts'>
import GcmWorkSchedule from '@/components/GcmWorkSchedule/GcmWorkSchedule.vue'

// 排班表
const nowDate = new Date('2023-09-09') // 显示日期
const taskAllList: { [key: string]: any } = {
  '2023-09-04': {
    morning: { name: '学习JS' },
    afternoon: {}
  },
  '2023-09-05': {
    morning: { name: 'node' },
    afternoon: { name: 'Next', color: '#FFD101' }
  },
  '2023-09-06': {
    morning: { name: 'TypeScrips' },
  },
  '2023-09-09': {
    morning: { name: 'Vue', color: '#333' },
    afternoon: { name: 'vuex' }
  }
}
</script>

示例2

如需要自定义字段, 添加 value-keys 属性配置即可

<template>
  <gcm-work-schedule title="自定义数据(只读)" :now-date="nowDate" :value-keys="valueKeysConfig" :shift-data="taskAllList" isThisWeek isSelectWeek></gcm-work-schedule>
</template>

<script setup lang='ts'>
import GcmWorkSchedule from '@/components/GcmWorkSchedule/GcmWorkSchedule.vue'

// 排班表
const nowDate = new Date('2023-09-21') // 显示日期
const valueKeysConfig = [
  { label: '9:00 ~ 10:00', keyName: 'one' },
  { label: '10:30 ~ 11:30', keyName: 'two' },
  { label: '14:30 ~ 15:30', keyName: 'three' },
  { label: '16:00 ~ 17:00', keyName: 'four' },
] // 自定义字段
const taskAllList: { [key: string]: any } = {
  '2023-09-21': {
    one: { name: '学习JS' },
    two: {}
  },
  '2023-09-22': {
    one: { name: 'node' },
    two: { name: 'Next' }
  },
} // 数据
</script>