Skip to content

日程组件 - IkSchedule

props

props类型说明默认值
modelValueArray绑定日程数组[]
optionsObject属性,具体查看 https://fullcalendar.io/
removableBoolean是否可删除false

事件

名称说明
update:modelValue更新日程数据
editOpen新增、编辑对话框打开
submit新增、编辑提交
submitAdd新增日程
submitUpdate编辑日程
submitDelete删除日程

示例代码

vue
<script lang="ts" setup>
import { IkSchedule } from 'iking-web-ui'
const events = ref<any[]>([
  {
    id: 'a6c69dd6784e4ba9a91a66dfd6d1c079',
    businessId: '',
    title: '11111',
    type: null,
    typeName: null,
    status: null,
    statusName: null,
    estimateEndTime: '2023-12-06 00:00:00',
    remark: '111',
    estimateStartTime: '2023-12-06 00:00:00',
    redirectUrl: '',
    allDay: true,
    createBy: '00000000',
    createName: '平台管理员',
    createTime: '2023-12-06 18:03:06',
    updateBy: '00000000',
    updateName: '平台管理员',
    updateTime: '2023-12-06 18:03:06',
    start: '2023-12-06 00:00:00',
    end: '2023-12-06 00:00:00'
  }
])

const isObject = (value: any) => {
  const opt = Object.prototype.toString
  return opt.call(value) === '[object Object]'
}

const copyValue = (tar: any, src: any): any => {
  if (!isObject(tar) || !isObject(src))
    throw new Error('参数异常')

  Object.keys(tar).forEach(key => {
    if (Reflect.has(src, key))
      tar[key] = src[key]
  })
  return tar
}

const handleAdd = (param: any) => {
  console.log('handleAdd param ', param)
  param.id = new Date().getTime()
  events.value.push(param)
}

const handleUpdate = (param: any) => {
  console.log('handleUpdate param ', param)
  const target = events.value.find(item => `${item.id}` === `${param?.id}`)
  if (target) {
    const id = target?.id
    copyValue(target, param)
    target.id = id
  }
}

const handleDelete = (id: any) => {
  console.log('handleDelete param ', id)
  const delIndex = events.value.findIndex(item => `${item.id}` === `${id}`)
  if (delIndex > -1)
    events.value.splice(delIndex, 1)
}
</script>

<template>
  <IkPageMain fixed>
    <IkSchedule
      ref="_ref"
      v-model="events"
      :removable="false"
      @submitAdd="handleAdd"
      @submitUpdate="handleUpdate"
      @submitDelete="handleDelete"
    />
  </IkPageMain>
</template>

<style scoped lang="scss">
</style>