laishajiang
2 years ago
1 changed files with 189 additions and 100 deletions
@ -1,117 +1,206 @@
|
||||
<template> |
||||
<div class="index-lists"> |
||||
<el-card class="!border-none" shadow="never"> |
||||
<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true"> |
||||
<div class="index-lists" v-loading="loading"> |
||||
|
||||
<el-form-item label="名称" prop="holidayName"> |
||||
<el-input class="w-[280px]" v-model="queryParams.holidayName" /> |
||||
</el-form-item> |
||||
<el-form-item label="日期" prop="holidayDate"> |
||||
<el-card class="!border-none" shadow="never"> |
||||
<el-form :inline="true" style="display: flex; justify-content: center;margin-top: 10px;margin-right: 70px;"> |
||||
<el-form-item label="请选择年份"> |
||||
<el-date-picker type="year" v-model="currenYear" placeholder="请选择年份" value-format="YYYY"></el-date-picker> |
||||
</el-form-item> |
||||
<el-button type="primary" @click="searchHoliday">查询节假日</el-button> |
||||
</el-form> |
||||
</el-card> |
||||
|
||||
<el-date-picker |
||||
class="flex-1 !flex" |
||||
v-model="queryParams.searchDate" |
||||
type="date" |
||||
value-format="YYYY-MM-DD" |
||||
placeholder="请选择" |
||||
/> |
||||
</el-form-item> |
||||
<el-scrollbar class="scrollbar-container"> |
||||
<el-row> |
||||
<el-col v-for="(item, index) in defaultCals " :key="item.cal" :span="7" |
||||
style="margin-right: 10px;margin-left: 50px;"> |
||||
<el-card shadow="hover" style="margin-bottom: 20px;"> |
||||
<el-calendar v-model="item.cal" class="holiday" style="pointer-events:none"> |
||||
<!-- <el-calendar v-model="item.cal" class="holiday"> --> |
||||
<template #date-cell="{ data }"> |
||||
<div class="holiday-cell" v-show="data.type === 'current-month'" |
||||
:id="index + '-' + data.day" |
||||
:class="{ 'is-holiday': ifHoliday(data.day) }, { 'is-adjust': ifAdjustDay(data.day) }"> |
||||
{{ data.day.split('-')[2] }} |
||||
<span class="holiday-text">{{ ifHoliday(data.day) ? '休' : '' }}</span> |
||||
<span class="adjust-text">{{ ifAdjustDay(data.day) ? '班' : '' }}</span> |
||||
<span class="content-text">{{ dayContent(data.day) }}</span> |
||||
</div> |
||||
</template> |
||||
</el-calendar> |
||||
</el-card> |
||||
</el-col> |
||||
</el-row> |
||||
</el-scrollbar> |
||||
|
||||
<el-form-item> |
||||
<el-button type="primary" @click="resetPage">查询</el-button> |
||||
<el-button @click="resetParams">重置</el-button> |
||||
</el-form-item> |
||||
</el-form> |
||||
</el-card> |
||||
<el-card class="!border-none mt-4" shadow="never"> |
||||
<div> |
||||
<el-button v-perms="['holiday:add']" type="primary" @click="handleAdd()"> |
||||
<template #icon> |
||||
<icon name="el-icon-Plus" /> |
||||
</template> |
||||
新增 |
||||
</el-button> |
||||
</div> |
||||
<el-table |
||||
class="mt-4" |
||||
size="large" |
||||
v-loading="pager.loading" |
||||
:data="pager.lists" |
||||
> |
||||
<el-table-column label="名称" prop="holidayName" min-width="100" /> |
||||
<el-table-column label="开始日期" prop="startDate" min-width="100" /> |
||||
<el-table-column label="结束日期" prop="endDate" min-width="100" /> |
||||
<el-table-column label="操作" width="120" fixed="right"> |
||||
<template #default="{ row }"> |
||||
<el-button |
||||
v-perms="['holiday:edit']" |
||||
type="primary" |
||||
link |
||||
@click="handleEdit(row)" |
||||
> |
||||
编辑 |
||||
</el-button> |
||||
<el-button |
||||
v-perms="['holiday:del']" |
||||
type="danger" |
||||
link |
||||
@click="handleDelete(row.id)" |
||||
> |
||||
删除 |
||||
</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="flex justify-end mt-4"> |
||||
<pagination v-model="pager" @change="getLists" /> |
||||
</div> |
||||
</el-card> |
||||
<edit-popup |
||||
v-if="showEdit" |
||||
ref="editRef" |
||||
@success="getLists" |
||||
@close="showEdit = false" |
||||
/> |
||||
</div> |
||||
</template> |
||||
<script lang="ts" setup name="holiday"> |
||||
import { holidayDelete, holidayLists } from '@/api/holiday' |
||||
import { usePaging } from '@/hooks/usePaging' |
||||
import feedback from '@/utils/feedback' |
||||
import EditPopup from './edit.vue' |
||||
const editRef = shallowRef<InstanceType<typeof EditPopup>>() |
||||
const showEdit = ref(false) |
||||
const queryParams = reactive({ |
||||
searchDate: '', |
||||
holidayName: '' |
||||
}) |
||||
|
||||
const { pager, getLists, resetPage, resetParams } = usePaging({ |
||||
fetchFun: holidayLists, |
||||
params: queryParams |
||||
}) |
||||
import { ref, onMounted, onBeforeMount } from 'vue'; |
||||
import { ElMessage } from 'element-plus' |
||||
import { getToken } from '@/utils/auth' |
||||
|
||||
import axios from 'axios' |
||||
const currenYear = ref(''); |
||||
const loading = ref(true); |
||||
const defaultCals = ref([]); |
||||
const dayType = ref({ |
||||
date: '', |
||||
type: '' |
||||
}); |
||||
const getDateData = () => { |
||||
axios.get('/lan-api/api/holiday/show-holiday', |
||||
).then((res: any) => { |
||||
// 处理成功情况 |
||||
dayType.value = res.data; |
||||
loading.value = false; |
||||
}).catch((err: any) => { |
||||
console.log(err); |
||||
}); |
||||
} |
||||
onBeforeMount(() => { |
||||
getDateData(); |
||||
}) |
||||
onMounted(() => { |
||||
let nowYear = new Date().getFullYear(); |
||||
initCalendar(nowYear); |
||||
loading.value = false; |
||||
}); |
||||
const searchHoliday = () => { |
||||
loading.value = true; |
||||
let nowYear = new Date().getFullYear(); |
||||
if (currenYear.value === String(nowYear)) { |
||||
getDateData(); |
||||
setTimeout(() => { |
||||
loading.value = false; |
||||
ElMessage.info('查询成功') |
||||
}, 1000); |
||||
} else { |
||||
ElMessage.info('其他年份尚未拥有数据') |
||||
loading.value = false; |
||||
} |
||||
}; |
||||
const initCalendar = (year) => { |
||||
const months = []; |
||||
for (let i = 0; i < 12; i++) |
||||
months.push({ cal: new Date(year, i, 1) }); |
||||
defaultCals.value = months; |
||||
}; |
||||
|
||||
const refreshHoliday = () => { |
||||
loading.value = true; |
||||
axios.post('/lan-api/api/holiday/refresh-holiday',{ year: currenYear.value }, |
||||
{headers: { 'Content-Type': 'application/json', |
||||
'Accept': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', |
||||
"Admin": getToken() }}).then((res: any) => { |
||||
dayType.value = res.data.holidayList; |
||||
setTimeout(() => { |
||||
loading.value = false; |
||||
}, 1000); |
||||
ElMessage.success('同步成功') |
||||
}).catch((err: any) => { |
||||
ElMessage.error('同步失败') |
||||
console.log(err); |
||||
}); |
||||
}; |
||||
const ifHoliday = (day) => { |
||||
for (let i = 0; i < dayType.value.length; i++) |
||||
if (dayType.value[i].date === day && dayType.value[i].holidayFlag === 'Y') |
||||
return true; |
||||
return false; |
||||
}; |
||||
const ifAdjustDay = (day) => { |
||||
for (let i = 0; i < dayType.value.length; i++) |
||||
if (dayType.value[i].date === day && dayType.value[i].holidayFlag === 'N') |
||||
return true; |
||||
return false; |
||||
}; |
||||
const ifCurrentDay = (day, index) => { |
||||
var today = new Date(); |
||||
// 获取当前时间的年、月和日 |
||||
var year = today.getFullYear(); |
||||
var month = ('0' + (today.getMonth() + 1)).slice(-2); // 月份需要加1，并且确保两位数字 |
||||
var dayNumber = ('0' + today.getDate()).slice(-2); // 确保两位数字 |
||||
// if (String(year) === currenYear && String(index + 1) === month && dayNumber == String(day)) |
||||
if (String(year) === currenYear && '02' === month && '11' == String(day)) |
||||
return true; |
||||
else |
||||
return false; |
||||
}; |
||||
const dayContent = (day) => { |
||||
// console.log('Comparing dayType.value.date:', dayType.value.date, 'with day:', day); |
||||
for (let i = 0; i < dayType.value.length; i++) |
||||
if (dayType.value[i].date === day) |
||||
return dayType.value[i].detail; |
||||
return ''; |
||||
}; |
||||
|
||||
const handleAdd = async () => { |
||||
showEdit.value = true |
||||
await nextTick() |
||||
editRef.value?.open('add') |
||||
</script> |
||||
<style> |
||||
.holiday .el-calendar__button-group { |
||||
display: none; |
||||
} |
||||
.select-month .el-calendar__button-group { |
||||
display: none; |
||||
} |
||||
.holiday .el-calendar-day { |
||||
padding: 1px; |
||||
width: 100%; |
||||
height: 40px; |
||||
background: #FFF; |
||||
} |
||||
.select-month .el-calendar-day { |
||||
padding: 1px; |
||||
width: 100%; |
||||
} |
||||
.holiday-cell { |
||||
position: relative; |
||||
width: 50px; |
||||
height: 40px; |
||||
display: flex; |
||||
justify-content: center; |
||||
} |
||||
.holiday-text { |
||||
position: absolute; |
||||
top: 15%; |
||||
left: 85%; |
||||
transform: translate(-50%, -50%); |
||||
font-size: 12px; |
||||
color: #5e72cc; |
||||
} |
||||
.adjust-text { |
||||
position: absolute; |
||||
top: 15%; |
||||
left: 85%; |
||||
transform: translate(-50%, -50%); |
||||
font-size: 12px; |
||||
color: #5e72cc; |
||||
} |
||||
.content-text { |
||||
position: absolute; |
||||
top: 70%; |
||||
left: 55%; |
||||
transform: translate(-50%, -50%); |
||||
font-size: 12px; |
||||
white-space: nowrap; |
||||
} |
||||
.is-holiday { |
||||
border-radius: 5px; |
||||
background: linear-gradient(145deg, #a7d2b3, #c6f9d5); |
||||
|
||||
const handleEdit = async (data: any) => { |
||||
showEdit.value = true |
||||
await nextTick() |
||||
editRef.value?.open('edit') |
||||
editRef.value?.getDetail(data) |
||||
} |
||||
.is-adjust { |
||||
border-radius: 5px; |
||||
background: linear-gradient(145deg, #d9a2a2, #ffc1c1); |
||||
|
||||
const handleDelete = async (id: number) => { |
||||
await feedback.confirm('确定要删除？') |
||||
await holidayDelete({ id }) |
||||
feedback.msgSuccess('删除成功') |
||||
getLists() |
||||
} |
||||
.scrollbar-container { |
||||
height: calc(100vh - 200px); |
||||
} |
||||
.is-today { |
||||
border-radius: 5px; |
||||
background: linear-gradient(145deg, #d9a2a2, #ffc1c1); |
||||
|
||||
getLists() |
||||
</script> |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue