94 lines
2.2 KiB
Vue
94 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
||
import type { SystemUserApi } from '#/api/system/user';
|
||
|
||
import { onMounted, ref } from 'vue';
|
||
|
||
import { IconifyIcon } from '@vben/icons';
|
||
|
||
import { Button, Form, FormItem, Select } from 'ant-design-vue';
|
||
|
||
import { getSimpleUserList } from '#/api/system/user';
|
||
|
||
import CalendarPanel from '../components/calendar-panel.vue';
|
||
import { useCalendar } from '../components/use-calendar';
|
||
|
||
const {
|
||
calendarDayMap,
|
||
currentDate,
|
||
fetchCalendar,
|
||
holidaySet,
|
||
loadHolidays,
|
||
loading,
|
||
watchMonth,
|
||
} = useCalendar();
|
||
|
||
const userId = ref<number>();
|
||
const userOptions = ref<SystemUserApi.User[]>([]);
|
||
|
||
/** 查询当前月份的排班日历，按选中人员过滤 */
|
||
function doFetch() {
|
||
if (!userId.value) {
|
||
return;
|
||
}
|
||
fetchCalendar({ queryType: 'USER', userId: userId.value });
|
||
}
|
||
|
||
/** 查询按钮 / 下拉选人后刷新日历 */
|
||
function onUserQuery() {
|
||
doFetch();
|
||
}
|
||
|
||
/** 监听月份切换，重新加载当月排班 */
|
||
watchMonth(() => {
|
||
if (userId.value) {
|
||
doFetch();
|
||
}
|
||
});
|
||
|
||
onMounted(async () => {
|
||
// 假期列表与人员列表并行加载，避免假期接口无权限或异常时阻断人员排班查询
|
||
void loadHolidays();
|
||
userOptions.value = await getSimpleUserList();
|
||
});
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<!-- 顶部：人员选择 -->
|
||
<Form layout="inline" class="mb-2.5">
|
||
<FormItem label="人员">
|
||
<Select
|
||
v-model:value="userId"
|
||
allow-clear
|
||
show-search
|
||
placeholder="请输入人员姓名搜索"
|
||
class="!w-[200px]"
|
||
:options="userOptions"
|
||
:field-names="{ label: 'nickname', value: 'id' }"
|
||
:filter-option="
|
||
(input: string, option: any) =>
|
||
(option?.nickname ?? '').includes(input)
|
||
"
|
||
@change="onUserQuery"
|
||
/>
|
||
</FormItem>
|
||
<FormItem>
|
||
<Button type="primary" @click="onUserQuery">
|
||
<template #icon>
|
||
<IconifyIcon icon="lucide:search" />
|
||
</template>
|
||
查询
|
||
</Button>
|
||
</FormItem>
|
||
</Form>
|
||
|
||
<!-- 日历 -->
|
||
<CalendarPanel
|
||
v-model:current-date="currentDate"
|
||
:calendar-day-map="calendarDayMap"
|
||
:holiday-set="holidaySet"
|
||
:loading="loading"
|
||
/>
|
||
</div>
|
||
</template>
|