69 lines
1.8 KiB
Vue
69 lines
1.8 KiB
Vue
<!-- 排班日历 - 按个人视图 -->
|
||
<template>
|
||
<div>
|
||
<!-- 顶部：人员选择 -->
|
||
<el-form :inline="true" label-width="80px" class="mb-10px">
|
||
<el-form-item label="人员">
|
||
<UserSelect
|
||
v-model="userId"
|
||
placeholder="请输入人员姓名搜索"
|
||
class="!w-200px"
|
||
@change="onUserQuery"
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onUserQuery">
|
||
<Icon icon="ep:search" class="mr-5px" /> 查询
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<!-- 日历 -->
|
||
<CalendarLegend />
|
||
<el-calendar v-model="currentDate" v-loading="loading">
|
||
<template #date-cell="{ data }">
|
||
<CalendarDateCell
|
||
:day="data.day"
|
||
:holiday-set="holidaySet"
|
||
:calendar-day-map="calendarDayMap"
|
||
/>
|
||
</template>
|
||
</el-calendar>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import UserSelect from '@/views/system/user/components/UserSelect.vue'
|
||
import CalendarDateCell from './CalendarDateCell.vue'
|
||
import CalendarLegend from './CalendarLegend.vue'
|
||
import { useCalendar } from './useCalendar'
|
||
|
||
const { loading, currentDate, calendarDayMap, holidaySet, loadHolidays, fetchCalendar, watchMonth } =
|
||
useCalendar()
|
||
|
||
const userId = ref<number>() // 当前选中的用户编号
|
||
|
||
/** 查询当前月份的排班日历，按选中人员过滤 */
|
||
const doFetch = () => {
|
||
if (!userId.value) return
|
||
fetchCalendar({ queryType: 'USER', userId: userId.value })
|
||
}
|
||
|
||
/** 查询按钮 / 下拉选人后刷新日历 */
|
||
const onUserQuery = () => {
|
||
doFetch()
|
||
}
|
||
|
||
/** 监听月份切换，重新加载当月排班 */
|
||
watchMonth(() => {
|
||
if (userId.value) {
|
||
doFetch()
|
||
}
|
||
})
|
||
|
||
/** 初始化 */
|
||
onMounted(async () => {
|
||
await loadHolidays()
|
||
})
|
||
</script>
|