日程组件 - IkSchedule
props
props | 类型 | 说明 | 默认值 |
---|---|---|---|
modelValue | Array | 绑定日程数组 | [] |
options | Object | 属性,具体查看 https://fullcalendar.io/ | |
removable | Boolean | 是否可删除 | 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>