<template>
|
<div class="container">
|
<div class="main-calendar">
|
<el-calendar v-model="calendarDate">
|
<template #date-cell="{ data }">
|
<div class="calendarClass" @click="handleCalendarClick(data.day)">
|
<p>
|
{{ data.day.split('-').slice(1).join('-') }}
|
{{ data.isSelected ? '✔️' : '' }}
|
</p>
|
<p>{{ getCurHolidayByDay(data.day) }}</p>
|
</div>
|
</template>
|
</el-calendar>
|
</div>
|
<div class="main-calendar-holiday">
|
<div class="search-section">
|
<el-form :inline="true" :model="queryForm" class="demo-form-inline">
|
<el-form-item label="标题">
|
<el-input v-model="queryForm.title" placeholder="标题" clearable />
|
</el-form-item>
|
<el-form-item label="日期" prop="daily_date" style="width: 400px">
|
<!-- <el-date-picker
|
v-model="queryForm.date_range"
|
type="daterange"
|
range-separator="到"
|
start-placeholder="开始时间"
|
end-placeholder="结束时间"
|
value-format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
clearable
|
/> -->
|
<el-date-picker v-model="queryForm.calDate" type="date" placeholder="选择时间" clearable />
|
</el-form-item>
|
</el-form>
|
</div>
|
|
<el-button @click="handleAdd()">新增</el-button>
|
<el-table :data="calendarHolidayList" style="width: 100%">
|
<el-table-column fixed prop="title" label="标题" width="180" />
|
<el-table-column prop="start_date" label="时间" width="220">
|
<template #default="scope"> {{ scope.row.start_date }} - {{ scope.row.end_date }} </template>
|
</el-table-column>
|
<!-- <el-table-column prop="start_date" label="开始时间" width="180" />
|
<el-table-column prop="end_date" label="结束时间" width="180" /> -->
|
<el-table-column prop="type" label="假期类型" width="100">
|
<template #default="scope">
|
{{ getSysDictName(scope.row.type, calendarTypeList) }}
|
</template>
|
</el-table-column>
|
<el-table-column prop="update_time" label="更新时间" width="220" />
|
<el-table-column fixed="right" label="操作" min-width="120">
|
<template #default="scope">
|
<el-button link type="primary" size="small" @click="handleEditClick(scope.row)">编辑</el-button>
|
<el-button link type="primary" size="small" @click="handleDelClick(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
|
<el-drawer v-model="addDrawer" :before-close="handleItemClose">
|
<calendar-holiday-add
|
@editClose="handleCalendarHolidayClose"
|
:editId="calendarHoliday.id"
|
:key="uniKey"
|
:showBack="false"
|
:pointDate="pointDate"
|
></calendar-holiday-add>
|
</el-drawer>
|
</div>
|
</template>
|
|
<script>
|
import { ref, onMounted, watch, reactive } from 'vue'
|
import { ElMessageBox, ElMessage } from 'element-plus'
|
import Calendar from '@/model/calendar'
|
import CalendarHoliday from '@/model/calendarHoliday'
|
import SysDictItemModel from '@/model/sysDictItem'
|
import calendarHolidayAdd from '@/view/calendar/calendar-holiday-add'
|
|
export default {
|
components: {
|
calendarHolidayAdd,
|
},
|
setup() {
|
const uniKey = ref(0)
|
const calendarDate = ref(new Date())
|
const addDrawer = ref(false)
|
const pointDate = ref(null)
|
const calendarHoliday = ref({
|
id: '',
|
})
|
const loading = ref(false)
|
const calendarTypeList = ref([])
|
const queryForm = reactive({
|
date_range: [],
|
title: '',
|
calDate: '',
|
page: 1,
|
count: 10,
|
})
|
|
onMounted(async () => {
|
// 先获取字典
|
await loadDictDitems()
|
// 获取当前日历日期的列表情况
|
await getCalendarList()
|
// 列出所有项目信息
|
getCalendarHolidayList()
|
})
|
|
// 监听日历日期的变化
|
watch(
|
() => calendarDate,
|
(newDate, oldDate) => {
|
getCalendarList()
|
},
|
)
|
// 监听日历日期的变化
|
watch(
|
() => queryForm,
|
(newData, oldData) => {
|
// console.log("查询条件")
|
// console.log(queryForm)
|
getCalendarHolidayList()
|
},
|
{ deep: true }, // 深度监听
|
)
|
|
// 根据字典类型查询字典
|
const loadDictDitems = async () => {
|
calendarTypeList.value = await SysDictItemModel.getSysDictItemListByType('calendar_type')
|
}
|
|
// 日历记事信息
|
const calendarList = ref([])
|
const getCalendarList = async () => {
|
try {
|
loading.value = true
|
|
const params = {
|
// calMonth:calendarDate.value.getMonth()+1,
|
calMonthStart: calendarDate.value.getMonth(),
|
calMonthEnd: calendarDate.value.getMonth() + 2,
|
}
|
const res = await Calendar.getCalendarList(params)
|
calendarList.value = res
|
} catch (error) {
|
console.log(error)
|
loading.value = false
|
if (error.code === 10020) {
|
calendarList.value = []
|
}
|
}
|
}
|
|
// 日历记事信息
|
const calendarHolidayList = ref([])
|
const getCalendarHolidayList = async () => {
|
try {
|
loading.value = true
|
const res = await CalendarHoliday.getCalendarHolidayList(queryForm)
|
calendarHolidayList.value = res
|
// 同时更新日历的情况
|
getCalendarList()
|
} catch (error) {
|
console.log(error)
|
loading.value = false
|
if (error.code === 10020) {
|
calendarHolidayList.value = []
|
}
|
}
|
}
|
|
const handleAdd = () => {
|
uniKey.value++
|
pointDate.value = ''
|
calendarHoliday.value = {}
|
addDrawer.value = true
|
}
|
const handleEditClick = row => {
|
uniKey.value++
|
pointDate.value = ''
|
calendarHoliday.value = row
|
addDrawer.value = true
|
}
|
const handleDelClick = row => {
|
// 删除操作
|
ElMessageBox.confirm('此操作将永久删除该记录, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning',
|
}).then(async () => {
|
const res = await CalendarHoliday.deleteCalendarHoliday(row.id)
|
if (res.code < window.MAX_SUCCESS_CODE) {
|
getCalendarHolidayList()
|
|
ElMessage.success(`${res.message}`)
|
}
|
}).catch(() => {
|
// 用户点击取消按钮时执行的操作
|
// 可以选择不做任何事情，也可以显示取消消息
|
// ElMessage.info('操作已取消'); // 如果需要显示取消消息，可以取消注释
|
});
|
}
|
const handleCalendarHolidayClose = () => {
|
uniKey.value++
|
addDrawer.value = true
|
getCalendarHolidayList()
|
}
|
|
const handleItemClose = () => {
|
uniKey.value++
|
addDrawer.value = false
|
getCalendarHolidayList()
|
}
|
|
const getSysDictName = (value, data) => {
|
const tmp = data.find(tmp => tmp.value == value)
|
if (tmp) {
|
return tmp.label
|
}
|
return ''
|
}
|
|
const getCurHolidayByDay = currDate => {
|
const data = calendarList.value.find(f => f.cal_date == `${currDate} 00:00:00`)
|
if (data) {
|
if (data.type != 0) {
|
return getSysDictName(data.type, calendarTypeList.value)
|
}
|
return ''
|
}
|
return ''
|
}
|
|
// 日历点击操作
|
const handleCalendarClick = async currDate => {
|
// queryForm.date_range[0]=currDate
|
// queryForm.date_range[1]=currDate
|
queryForm.calDate = currDate
|
// 根据当前日期判断是否有记录
|
calendarHoliday.value = {}
|
pointDate.value = ''
|
const res = await CalendarHoliday.getCalendarHolidayList({ calDate: currDate })
|
if (res && res.length > 0) {
|
calendarHoliday.value = res[0]
|
} else {
|
calendarHoliday.value = {}
|
pointDate.value = currDate
|
}
|
uniKey.value++
|
addDrawer.value = true
|
}
|
|
return {
|
loading,
|
calendarDate,
|
calendarHolidayList,
|
getCalendarHolidayList,
|
|
// 新增
|
calendarHoliday,
|
addDrawer,
|
handleAdd,
|
handleCalendarHolidayClose,
|
handleItemClose,
|
handleEditClick,
|
handleDelClick,
|
uniKey,
|
calendarList,
|
getCurHolidayByDay,
|
calendarTypeList,
|
getSysDictName,
|
handleCalendarClick,
|
pointDate,
|
queryForm,
|
}
|
},
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
display: flex;
|
justify-content: center;
|
|
.main-calendar {
|
width: 50%;
|
height: 100%;
|
padding: 20px;
|
|
.calendarClass {
|
width: 100%;
|
height: 100%;
|
text-align: center;
|
}
|
}
|
|
.main-calendar-holiday {
|
width: 50%;
|
height: 100%;
|
padding: 20px;
|
}
|
}
|
</style>
|
