You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
380 lines
9.7 KiB
Vue
380 lines
9.7 KiB
Vue
<template>
|
|
<ContentWrap>
|
|
<div >
|
|
<el-calendar v-model="currentDate" >
|
|
<template #header="{ date }">
|
|
<div class="custom-header-with-buttons">
|
|
<!-- 左侧：标题和统计信息 -->
|
|
<div class="header-left">
|
|
<div>{{ date }}</div>
|
|
</div>
|
|
<!-- 自定义操作按钮 -->
|
|
<!-- <div class="custom-actions">
|
|
|
|
</div>-->
|
|
<!-- 右侧：原按钮 + 自定义按钮 -->
|
|
<div class="header-right">
|
|
|
|
<!-- 原按钮组 -->
|
|
<div class="original-buttons">
|
|
<el-button-group>
|
|
<el-button
|
|
type="primary"
|
|
size="small"
|
|
@click="handleWorkday(date)"
|
|
>{{ t('FactoryModeling.CalHoliday.setWorkingDays') }}
|
|
</el-button>
|
|
<el-button
|
|
style="margin-left: 10px"
|
|
type="success"
|
|
size="small"
|
|
@click="handleHoliday(date)"
|
|
>{{ t('FactoryModeling.CalHoliday.setHoliday') }}
|
|
</el-button>
|
|
<el-button
|
|
style="margin-left: 10px"
|
|
size="small"
|
|
:icon="ArrowLeft"
|
|
@click="handleOriginalPrevMonth"
|
|
>
|
|
{{ t('FactoryModeling.CalHoliday.lastMonth') }}
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
@click="handleOriginalToday"
|
|
>
|
|
{{ t('FactoryModeling.CalHoliday.today') }}
|
|
</el-button>
|
|
<el-button
|
|
size="small"
|
|
:icon="ArrowRight"
|
|
@click="handleOriginalNextMonth"
|
|
>
|
|
{{ t('FactoryModeling.CalHoliday.nextMonth') }}</el-button>
|
|
</el-button-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</template>
|
|
<template #date-cell="{ data }">
|
|
<div>
|
|
<el-row>
|
|
<el-col :span="16">
|
|
<div class="solar">
|
|
{{ data.day.split('-')[2] }}
|
|
</div>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-tag v-if="holidayList.indexOf(data.day) ==-1" effect="dark">{{ t('FactoryModeling.CalHoliday.work') }}</el-tag>
|
|
<el-tag v-else effect="dark" type="success">{{ t('FactoryModeling.CalHoliday.rest') }}</el-tag>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
|
|
</el-col>
|
|
</el-row>
|
|
</div>
|
|
</template>
|
|
</el-calendar>
|
|
</div>
|
|
</ContentWrap>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { dateFormatter } from '@/utils/formatTime'
|
|
import download from '@/utils/download'
|
|
import { CalHolidayApi, CalHolidayVO } from '@/api/mes/calholiday'
|
|
import dayjs from "dayjs";
|
|
import calendar from '@/utils/calendar';
|
|
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
|
|
import {ElMessage} from "element-plus";
|
|
/** 节假日设置 列表 */
|
|
defineOptions({ name: 'CalHoliday' })
|
|
|
|
const message = useMessage() // 消息弹窗
|
|
const { t } = useI18n() // 国际化
|
|
const currentDate = ref(new Date())
|
|
const holidayList:any = ref([])
|
|
const workdayList:any = ref([])
|
|
const loading = ref(true) // 列表的加载中
|
|
const list = ref<CalHolidayVO[]>([]) // 列表的数据
|
|
const total = ref(0) // 列表的总页数
|
|
const queryParams = reactive({
|
|
pageNo: 1,
|
|
pageSize: 100,
|
|
theDay: dayjs(currentDate.value).format('YYYY-MM-DD')
|
|
})
|
|
const queryFormRef = ref() // 搜索的表单
|
|
const exportLoading = ref(false) // 导出的加载中
|
|
|
|
/** 查询列表 */
|
|
const getList = async () => {
|
|
loading.value = true;
|
|
holidayList.value =[];
|
|
workdayList.value =[];
|
|
try {
|
|
const data = await CalHolidayApi.getCalHolidayPage(queryParams)
|
|
list.value = data.list
|
|
total.value = data.total
|
|
if(data.list !=null){
|
|
data.list.forEach(theDay => {
|
|
if(theDay.holidayType =='HOLIDAY'){
|
|
holidayList.value.push(theDay.theDay);
|
|
}else{
|
|
workdayList.value.push(theDay.theDay);
|
|
}
|
|
});
|
|
}
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
// 加载月份数据
|
|
const loadMonthData = () => {
|
|
const year = dayjs(currentDate.value).year()
|
|
const month = dayjs(currentDate.value).month() + 1
|
|
}
|
|
|
|
// 原按钮的事件处理
|
|
const handleOriginalPrevMonth = () => {
|
|
queryParams.theDay = dayjs(currentDate.value).format('YYYY-MM-DD');
|
|
currentDate.value = dayjs(currentDate.value)
|
|
.subtract(1, 'month')
|
|
.toDate()
|
|
loadMonthData()
|
|
getList()
|
|
}
|
|
|
|
const handleOriginalNextMonth = () => {
|
|
queryParams.theDay = dayjs(currentDate.value).format('YYYY-MM-DD');
|
|
currentDate.value = dayjs(currentDate.value)
|
|
.add(1, 'month')
|
|
.toDate()
|
|
loadMonthData()
|
|
getList()
|
|
}
|
|
|
|
const handleOriginalToday = () => {
|
|
currentDate.value = new Date();
|
|
queryParams.theDay = dayjs(currentDate.value).format('YYYY-MM-DD');
|
|
loadMonthData()
|
|
}
|
|
|
|
function isFestival(slotDate, slotData) {
|
|
let solarDayArr = slotData.day.split('-');
|
|
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
|
|
|
|
// 公历节日\农历节日\农历节气
|
|
let festAndTerm = [];
|
|
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
|
|
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
|
|
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
|
|
festAndTerm = festAndTerm.join('')
|
|
|
|
return festAndTerm != ''
|
|
}
|
|
|
|
function solarDate2lunar(solarDate) {
|
|
let solar = solarDate.split('-')
|
|
let lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])
|
|
|
|
let lunarMD = lunar.IMonthCn + lunar.IDayCn;
|
|
// 公历节日\农历节日\农历节气
|
|
let festAndTerm = [];
|
|
festAndTerm.push(lunar.festival == null ? '' : ' ' + lunar.festival)
|
|
festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
|
|
festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
|
|
festAndTerm = festAndTerm.join('')
|
|
|
|
return festAndTerm == '' ? lunarMD : festAndTerm
|
|
|
|
}
|
|
|
|
/** 搜索按钮操作 */
|
|
const handleQuery = () => {
|
|
queryParams.pageNo = 1
|
|
getList()
|
|
}
|
|
|
|
/** 重置按钮操作 */
|
|
const resetQuery = () => {
|
|
queryFormRef.value.resetFields()
|
|
handleQuery()
|
|
}
|
|
|
|
const props = defineProps<{
|
|
}>()
|
|
|
|
/** 添加/修改操作 */
|
|
const formRef = ref()
|
|
const openForm = (type: string, id?: number) => {
|
|
formRef.value.open(type, id)
|
|
}
|
|
|
|
// 获取日期信息
|
|
const getDayInfo = (data: any) => {
|
|
const dateStr = dayjs(data.day).format('YYYY-MM-DD')
|
|
|
|
}
|
|
|
|
// 判断是否是今天
|
|
const isToday = (date: Date) => {
|
|
return dayjs(date).isSame(dayjs(), 'day')
|
|
}
|
|
|
|
const getDayClass = (data: any) => {
|
|
const dayInfo = getDayInfo(data)
|
|
const classes = []
|
|
|
|
if (isToday(data.day)) {
|
|
classes.push('today')
|
|
}
|
|
|
|
if (dayInfo) {
|
|
|
|
} else {
|
|
// 判断是否是周末
|
|
const day = new Date(data.day).getDay()
|
|
if (day === 0 || day === 6) {
|
|
classes.push('weekend')
|
|
}
|
|
}
|
|
|
|
return classes.join(' ')
|
|
}
|
|
|
|
/** 删除按钮操作 */
|
|
const handleDelete = async (id: number) => {
|
|
try {
|
|
// 删除的二次确认
|
|
await message.delConfirm()
|
|
// 发起删除
|
|
await CalHolidayApi.deleteCalHoliday(id)
|
|
message.success(t('common.delSuccess'))
|
|
// 刷新列表
|
|
await getList()
|
|
} catch {}
|
|
}
|
|
/** 设置为工作日*/
|
|
const handleWorkday = async (date: any) => {
|
|
try {
|
|
loading.value = true
|
|
let value = currentDate.value;
|
|
let dateValue = dayjs(value).format('YYYY-MM-DD');
|
|
await CalHolidayApi.deleteCalHolidayByDay(dateValue);
|
|
message.success(t('设置成功'))
|
|
// 刷新列表
|
|
await getList();
|
|
} catch {
|
|
loading.value = false
|
|
}
|
|
}
|
|
/** 设置为节假日*/
|
|
const handleHoliday = async (date: any) => {
|
|
try {
|
|
loading.value = true
|
|
let value = currentDate.value;
|
|
let dateValue = dayjs(value).format('YYYY-MM-DD');
|
|
let sysDate = new Date();
|
|
let dateTime = dayjs(sysDate).format('YYYY-MM-DD HH:mm:ss');
|
|
let CalHolidayVO:any={
|
|
theDay:dateValue,
|
|
holidayType:'HOLIDAY',
|
|
startTime:dateTime,
|
|
endTime:dateTime
|
|
}
|
|
await CalHolidayApi.createCalHoliday(CalHolidayVO);
|
|
message.success(t('设置成功'))
|
|
// 刷新列表
|
|
await getList();
|
|
} catch {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
/** 导出按钮操作 */
|
|
const handleExport = async () => {
|
|
try {
|
|
// 导出的二次确认
|
|
await message.exportConfirm()
|
|
// 发起导出
|
|
exportLoading.value = true
|
|
const data = await CalHolidayApi.exportCalHoliday(queryParams)
|
|
download.excel(data, '节假日设置.xls')
|
|
} catch {
|
|
} finally {
|
|
exportLoading.value = false
|
|
}
|
|
}
|
|
|
|
/** 初始化 **/
|
|
onMounted(() => {
|
|
getList()
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.app-container {
|
|
padding: 20px;
|
|
}
|
|
.el-calendar-table .current:nth-last-child(-n+2) .solar {
|
|
color: red;
|
|
}
|
|
/**本月农历设置为灰色*/
|
|
.el-calendar-table .current .lunar {
|
|
color: #606266;
|
|
font-size: small;
|
|
}
|
|
/**本月农历节日设置为红色*/
|
|
.el-calendar-table .current .lunar.festival {
|
|
color: green;
|
|
font-size: small;
|
|
}
|
|
/**节假日背景设置为绿色 */
|
|
.el-calendar-table .holiday {
|
|
background-color: #88E325;
|
|
}
|
|
|
|
.workday {
|
|
background-color: #f0f9eb;
|
|
}
|
|
.calendar-original-buttons {
|
|
position: relative;
|
|
padding: 20px;
|
|
}
|
|
.custom-header-with-buttons {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
}
|
|
.header-left {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 10px;
|
|
}
|
|
|
|
|
|
.header-right {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
:deep(.original-buttons).el-button-group
|
|
{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
:deep(.el-calendar__header){
|
|
border-bottom: var(--el-calendar-header-border-bottom);
|
|
display: block !important;;
|
|
justify-content: space-between;
|
|
padding: 12px 20px;
|
|
}
|
|
|
|
</style>
|