police-mailbox
/
mailbox-lan-vue
7
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

节假日前端

master
laishajiang 2 years ago
parent
890645dc8c
commit
7d3b303170
1 changed files with 189 additions and 100 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 289
      src/views/holiday/index.vue

289
src/views/holiday/index.vue
Unescape View File

@ -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>
Write Preview
Loading…
Cancel
Save