yudao
/
admin-vue3
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vue3.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

✨ feat(mes): 优化排班日历查询逻辑，支持批量班组查询 

重构排班日历查询功能，简化代码实现，支持一次性查询多个班组的排班记录。
新增班组编号集合字段，提升查询效率和可读性。
pull/871/MERGE
YunaiV 2026-04-02 19:54:18 +08:00
parent f8553abcdd
commit 1b3a41da14
5 changed files with 139 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
src/views/mes/cal/calendar/TeamView.vue
View File

@ -33,26 +33,16 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { CalCalendarApi, CalCalendarDayVO } from '@/api/mes/cal/calendar'
import { CalTeamApi, CalTeamVO } from '@/api/mes/cal/team' import { CalTeamApi, CalTeamVO } from '@/api/mes/cal/team'
import { CalHolidayApi, CalHolidayVO } from '@/api/mes/cal/holiday'
import { formatDate } from '@/utils/formatTime'
import { HolidayType } from '@/views/mes/utils/constants'
import CalendarDateCell from './CalendarDateCell.vue' import CalendarDateCell from './CalendarDateCell.vue'
import CalendarLegend from './CalendarLegend.vue' import CalendarLegend from './CalendarLegend.vue'
import dayjs from 'dayjs' import { useCalendar } from './useCalendar'
import 'dayjs/locale/zh-cn'
import PluginLunar from 'dayjs-plugin-lunar'
dayjs.locale('zh-cn') const { loading, currentDate, calendarDayMap, holidaySet, loadHolidays, fetchCalendar, watchMonth } =
dayjs.extend(PluginLunar) useCalendar()
const loading = ref(false)
const currentDate = ref(new Date()) // 日历当前显示月份
const selectedTeamId = ref<number>() // 当前选中的班组编号 const selectedTeamId = ref<number>() // 当前选中的班组编号
const teamList = ref<CalTeamVO[]>([]) // 所有班组列表 const teamList = ref<CalTeamVO[]>([]) // 所有班组列表
const calendarDayMap = ref<Map<string, CalCalendarDayVO>>(new Map()) // key: yyyy-MM-dd
const holidaySet = ref(new Set<string>()) // 节假日日期集合，key: yyyy-MM-dd
/** 获取班组列表，并默认选中第一个 */ /** 获取班组列表，并默认选中第一个 */
const getTeamList = async () => { const getTeamList = async () => {
@ -62,71 +52,28 @@ const getTeamList = async () => {
} }
} }
/** 获取节假日列表，构建节假日日期集合 */
const getHolidayList = async () => {
holidaySet.value.clear()
const list = await CalHolidayApi.getHolidayList()
if (!list) {
return
}
list.forEach((item: CalHolidayVO) => {
const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
if (day && item.type === HolidayType.HOLIDAY) {
holidaySet.value.add(day)
}
})
}
/** 查询当前月份的排班日历，按选中班组过滤 */ /** 查询当前月份的排班日历，按选中班组过滤 */
const fetchCalendar = async () => { const doFetch = () => {
if (!selectedTeamId.value) return if (!selectedTeamId.value) return
loading.value = true fetchCalendar({ queryType: 'TEAM', teamId: selectedTeamId.value })
try {
// 计算当前月份的起止时间
const date = currentDate.value
const year = date.getFullYear()
const month = date.getMonth()
const startDay = new Date(year, month, 1)
const endDay = new Date(year, month + 1, 0, 23, 59, 59)
const list = await CalCalendarApi.getCalendarList({
queryType: 'TEAM',
teamId: selectedTeamId.value,
startDay: formatDate(startDay, 'YYYY-MM-DD HH:mm:ss'),
endDay: formatDate(endDay, 'YYYY-MM-DD HH:mm:ss')
})
// 转为 Map 方便按日期快速查找
calendarDayMap.value.clear()
if (!list) {
return
}
list.forEach((item: CalCalendarDayVO) => {
// 后端返回的 day 为时间戳（long），格式化为 yyyy-MM-dd 作为 Map key
const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
if (day) {
calendarDayMap.value.set(day, { ...item, day })
}
})
} finally {
loading.value = false
}
} }
/** 点击左侧班组后切换并刷新日历 */ /** 点击左侧班组后切换并刷新日历 */
const onSelectTeam = (id: number) => { const onSelectTeam = (id: number) => {
selectedTeamId.value = id selectedTeamId.value = id
fetchCalendar() doFetch()
} }
/** 监听月份切换，重新加载当月排班 */ /** 监听月份切换，重新加载当月排班 */
watch(currentDate, () => { watchMonth(() => {
if (selectedTeamId.value) { if (selectedTeamId.value) {
fetchCalendar() doFetch()
} }
}) })
/** 初始化 */ /** 初始化 */
onMounted(() => { onMounted(() => {
getTeamList() getTeamList()
getHolidayList() loadHolidays()
}) })
</script> </script>

71
src/views/mes/cal/calendar/TypeView.vue
View File

@ -33,91 +33,38 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { CalCalendarApi, CalCalendarDayVO } from '@/api/mes/cal/calendar'
import { CalHolidayApi, CalHolidayVO } from '@/api/mes/cal/holiday'
import { formatDate } from '@/utils/formatTime'
import { DICT_TYPE, getIntDictOptions } from '@/utils/dict' import { DICT_TYPE, getIntDictOptions } from '@/utils/dict'
import { HolidayType } from '@/views/mes/utils/constants'
import CalendarDateCell from './CalendarDateCell.vue' import CalendarDateCell from './CalendarDateCell.vue'
import CalendarLegend from './CalendarLegend.vue' import CalendarLegend from './CalendarLegend.vue'
import dayjs from 'dayjs' import { useCalendar } from './useCalendar'
import 'dayjs/locale/zh-cn'
import PluginLunar from 'dayjs-plugin-lunar'
dayjs.locale('zh-cn') const { loading, currentDate, calendarDayMap, holidaySet, loadHolidays, fetchCalendar, watchMonth } =
dayjs.extend(PluginLunar) useCalendar()
const loading = ref(false)
const currentDate = ref(new Date()) // 日历当前显示月份
const selectedType = ref<number>() // 当前选中的班组类型（枚举 MES_CAL_CALENDAR_TYPE） const selectedType = ref<number>() // 当前选中的班组类型（枚举 MES_CAL_CALENDAR_TYPE）
const calendarDayMap = ref<Map<string, CalCalendarDayVO>>(new Map()) // key: yyyy-MM-dd
const holidaySet = ref(new Set<string>()) // 节假日日期集合，key: yyyy-MM-dd
/** 获取节假日列表，构建节假日日期集合 */
const getHolidayList = async () => {
holidaySet.value.clear()
const list = await CalHolidayApi.getHolidayList()
if (!list) {
return
}
list.forEach((item: CalHolidayVO) => {
const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
if (day && item.type === HolidayType.HOLIDAY) {
holidaySet.value.add(day)
}
})
}
/** 查询当前月份的排班日历，按选中分类过滤 */ /** 查询当前月份的排班日历，按选中分类过滤 */
const fetchCalendar = async () => { const doFetch = () => {
if (!selectedType.value) return if (!selectedType.value) return
loading.value = true fetchCalendar({ queryType: 'TYPE', calendarType: selectedType.value })
try {
// 计算当前月份的起止时间
const date = currentDate.value
const year = date.getFullYear()
const month = date.getMonth()
const startDay = new Date(year, month, 1)
const endDay = new Date(year, month + 1, 0, 23, 59, 59)
const list = await CalCalendarApi.getCalendarList({
queryType: 'TYPE',
calendarType: selectedType.value,
startDay: formatDate(startDay, 'YYYY-MM-DD HH:mm:ss'),
endDay: formatDate(endDay, 'YYYY-MM-DD HH:mm:ss')
})
// 转为 Map 方便按日期快速查找
calendarDayMap.value.clear()
if (!list) {
return
}
list.forEach((item: CalCalendarDayVO) => {
// 后端返回的 day 为时间戳（long），格式化为 yyyy-MM-dd 作为 Map key
const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
if (day) {
calendarDayMap.value.set(day, { ...item, day })
}
})
} finally {
loading.value = false
}
} }
/** 点击左侧分类后切换并刷新日历 */ /** 点击左侧分类后切换并刷新日历 */
const onSelectType = (value: number) => { const onSelectType = (value: number) => {
selectedType.value = value selectedType.value = value
fetchCalendar() doFetch()
} }
/** 监听月份切换，重新加载当月排班 */ /** 监听月份切换，重新加载当月排班 */
watch(currentDate, () => { watchMonth(() => {
if (selectedType.value) { if (selectedType.value) {
fetchCalendar() doFetch()
} }
}) })
/** 初始化：加载节假日，并默认选中第一个分类 */ /** 初始化：加载节假日，并默认选中第一个分类 */
onMounted(() => { onMounted(() => {
getHolidayList() loadHolidays()
const opts = getIntDictOptions(DICT_TYPE.MES_CAL_CALENDAR_TYPE) const opts = getIntDictOptions(DICT_TYPE.MES_CAL_CALENDAR_TYPE)
if (opts.length > 0) { if (opts.length > 0) {
onSelectType(opts[0].value as number) onSelectType(opts[0].value as number)

90
src/views/mes/cal/calendar/UserView.vue
View File

@ -7,7 +7,10 @@
<el-select <el-select
v-model="userId" v-model="userId"
filterable filterable
placeholder="请选择人员" remote
:remote-method="remoteSearchUser"
:loading="userSearchLoading"
placeholder="请输入人员姓名搜索"
class="!w-200px" class="!w-200px"
@change="onUserQuery" @change="onUserQuery"
> >
@ -41,91 +44,54 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { CalCalendarApi, CalCalendarDayVO } from '@/api/mes/cal/calendar'
import { CalHolidayApi, CalHolidayVO } from '@/api/mes/cal/holiday'
import { getSimpleUserList, UserVO } from '@/api/system/user' import { getSimpleUserList, UserVO } from '@/api/system/user'
import { formatDate } from '@/utils/formatTime'
import { HolidayType } from '@/views/mes/utils/constants'
import CalendarDateCell from './CalendarDateCell.vue' import CalendarDateCell from './CalendarDateCell.vue'
import CalendarLegend from './CalendarLegend.vue' import CalendarLegend from './CalendarLegend.vue'
import dayjs from 'dayjs' import { useCalendar } from './useCalendar'
import 'dayjs/locale/zh-cn'
import PluginLunar from 'dayjs-plugin-lunar'
dayjs.locale('zh-cn') const { loading, currentDate, calendarDayMap, holidaySet, loadHolidays, fetchCalendar, watchMonth } =
dayjs.extend(PluginLunar) useCalendar()
const loading = ref(false)
const currentDate = ref(new Date()) // 日历当前显示月份
const userId = ref<number>() // 当前选中的用户编号 const userId = ref<number>() // 当前选中的用户编号
const userList = ref<UserVO[]>([]) // 所有用户列表 const userList = ref<UserVO[]>([]) // 搜索到的用户列表
const calendarDayMap = ref<Map<string, CalCalendarDayVO>>(new Map()) // key: yyyy-MM-dd const userSearchLoading = ref(false) // 远程搜索加载状态
const holidaySet = ref(new Set<string>()) // 节假日日期集合，key: yyyy-MM-dd let allUserList: UserVO[] = [] // 缓存全量用户列表
/** 获取节假日列表，构建节假日日期集合 */ /** 远程搜索用户 */
const getHolidayList = async () => { const remoteSearchUser = (query: string) => {
holidaySet.value.clear() if (query) {
const list = await CalHolidayApi.getHolidayList() userSearchLoading.value = true
if (!list) { // 从缓存的全量列表中前端过滤
return userList.value = allUserList.filter((user) =>
user.nickname?.toLowerCase().includes(query.toLowerCase())
)
userSearchLoading.value = false
} else {
userList.value = []
} }
list.forEach((item: CalHolidayVO) => {
const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
if (day && item.type === HolidayType.HOLIDAY) {
holidaySet.value.add(day)
}
})
} }
/** 查询当前月份的排班日历，按选中人员过滤 */ /** 查询当前月份的排班日历，按选中人员过滤 */
const fetchCalendar = async () => { const doFetch = () => {
if (!userId.value) return if (!userId.value) return
loading.value = true fetchCalendar({ queryType: 'USER', userId: userId.value })
try {
// 计算当前月份的起止时间
const date = currentDate.value
const year = date.getFullYear()
const month = date.getMonth()
const startDay = new Date(year, month, 1)
const endDay = new Date(year, month + 1, 0, 23, 59, 59)
const list = await CalCalendarApi.getCalendarList({
queryType: 'USER',
userId: userId.value,
startDay: formatDate(startDay, 'YYYY-MM-DD HH:mm:ss'),
endDay: formatDate(endDay, 'YYYY-MM-DD HH:mm:ss')
})
// 转为 Map 方便按日期快速查找
calendarDayMap.value.clear()
if (!list) {
return
}
list.forEach((item: CalCalendarDayVO) => {
// 后端返回的 day 为时间戳（long），格式化为 yyyy-MM-dd 作为 Map key
const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
if (day) {
calendarDayMap.value.set(day, { ...item, day })
}
})
} finally {
loading.value = false
}
} }
/** 查询按钮 / 下拉选人后刷新日历 */ /** 查询按钮 / 下拉选人后刷新日历 */
const onUserQuery = () => { const onUserQuery = () => {
fetchCalendar() doFetch()
} }
/** 监听月份切换，重新加载当月排班 */ /** 监听月份切换，重新加载当月排班 */
watch(currentDate, () => { watchMonth(() => {
if (userId.value) { if (userId.value) {
fetchCalendar() doFetch()
} }
}) })
/** 初始化 */ /** 初始化 */
onMounted(async () => { onMounted(async () => {
userList.value = await getSimpleUserList() allUserList = await getSimpleUserList()
await getHolidayList() await loadHolidays()
}) })
</script> </script>

90
src/views/mes/cal/calendar/useCalendar.ts Normal file
View File

@ -0,0 +1,90 @@
import { ref, watch } from 'vue'
import { CalCalendarApi, CalCalendarDayVO } from '@/api/mes/cal/calendar'
import { CalHolidayApi, CalHolidayVO } from '@/api/mes/cal/holiday'
import { formatDate } from '@/utils/formatTime'
import { HolidayType } from '@/views/mes/utils/constants'
/**
* 排班日历通用 composable
*
* 封装日历组件中通用的响应式状态、假期加载、排班查询、月份切换逻辑
*/
export function useCalendar() {
const loading = ref(false)
const currentDate = ref(new Date())
const calendarDayMap = ref<Map<string, CalCalendarDayVO>>(new Map())
const holidaySet = ref(new Set<string>())
/** 获取节假日列表，按当前月份范围加载 */
const loadHolidays = async () => {
holidaySet.value.clear()
const { startDay, endDay } = getMonthRange()
const list = await CalHolidayApi.getHolidayList({
startDay: formatDate(startDay, 'YYYY-MM-DD HH:mm:ss'),
endDay: formatDate(endDay, 'YYYY-MM-DD HH:mm:ss')
})
if (!list) {
return
}
list.forEach((item: CalHolidayVO) => {
const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
if (day && item.type === HolidayType.HOLIDAY) {
holidaySet.value.add(day)
}
})
}
/** 查询排班日历，params 由调用方提供 queryType 相关参数 */
const fetchCalendar = async (params: Record<string, any>) => {
loading.value = true
try {
const { startDay, endDay } = getMonthRange()
const list = await CalCalendarApi.getCalendarList({
...params,
startDay: formatDate(startDay, 'YYYY-MM-DD HH:mm:ss'),
endDay: formatDate(endDay, 'YYYY-MM-DD HH:mm:ss')
})
calendarDayMap.value.clear()
if (!list) {
return
}
list.forEach((item: CalCalendarDayVO) => {
const day = item.day ? formatDate(item.day as any, 'YYYY-MM-DD') : ''
if (day) {
calendarDayMap.value.set(day, { ...item, day })
}
})
} finally {
loading.value = false
}
}
/** 计算当前月份的起止时间 */
const getMonthRange = () => {
const date = currentDate.value
const year = date.getFullYear()
const month = date.getMonth()
return {
startDay: new Date(year, month, 1),
endDay: new Date(year, month + 1, 0, 23, 59, 59)
}
}
/** 监听月份切换，调用回调刷新数据 */
const watchMonth = (callback: () => void) => {
watch(currentDate, () => {
loadHolidays().then()
callback()
})
}
return {
loading,
currentDate,
calendarDayMap,
holidaySet,
loadHolidays,
fetchCalendar,
watchMonth
}
}

6
src/views/mes/dv/machinery/type/MachineryTypeForm.vue
View File

@ -19,8 +19,9 @@
class="w-1/1" class="w-1/1"
/> />
</el-form-item> </el-form-item>
<el-form-item label="设备类型编码" prop="code"> <el-form-item label="设备类型编码" prop="code" v-if="formType === 'update'">
<el-input v-model="formData.code" placeholder="请输入类型编码" /> <!-- TODO @AI：点击后生成，不要这里自动生成； -->
<el-input v-model="formData.code" placeholder="系统自动生成" disabled />
</el-form-item> </el-form-item>
<el-form-item label="设备类型名称" prop="name"> <el-form-item label="设备类型名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入类型名称" /> <el-input v-model="formData.name" placeholder="请输入类型名称" />
@ -75,7 +76,6 @@ const formData = ref({
}) })
const formRules = reactive({ const formRules = reactive({
parentId: [{ required: true, message: '上级类型不能为空', trigger: 'blur' }], parentId: [{ required: true, message: '上级类型不能为空', trigger: 'blur' }],
code: [{ required: true, message: '类型编码不能为空', trigger: 'blur' }],
name: [{ required: true, message: '类型名称不能为空', trigger: 'blur' }], name: [{ required: true, message: '类型名称不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }], sort: [{ required: true, message: '显示排序不能为空', trigger: 'blur' }],
status: [{ required: true, message: '状态不能为空', trigger: 'blur' }] status: [{ required: true, message: '状态不能为空', trigger: 'blur' }]