|
|
@@ -6,26 +6,33 @@
|
|
|
<div>
|
|
|
<el-date-picker v-model="month" type="month" :clearable="false" placeholder="请选择月份" @change="selectMonth" />
|
|
|
</div>
|
|
|
- <el-button-group>
|
|
|
- <el-button type="primary" @click="setHoliday" :disabled="!multipleDates.length"> <SvgIcon name="ele-Sunny" class="mr3"/> 设定休息日</el-button>
|
|
|
- <el-button type="primary" @click="setWorkDay" :disabled="!multipleDates.length"> <SvgIcon name="ele-Monitor" class="mr3"/> 设定工作日</el-button>
|
|
|
- <el-button type="primary" @click="clearSelect" :disabled="!multipleDates.length"><SvgIcon name="ele-Delete" class="mr3"/> 清空选择</el-button>
|
|
|
+ <el-button-group v-ath="'system:holiday:workDay'">
|
|
|
+ <el-button type="primary" @click="setHoliday" :disabled="!multipleDates.length">
|
|
|
+ <SvgIcon name="ele-Sunny" class="mr3" /> 设定休息日</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="setWorkDay" :disabled="!multipleDates.length">
|
|
|
+ <SvgIcon name="ele-Monitor" class="mr3" /> 设定工作日</el-button
|
|
|
+ >
|
|
|
+ <el-button type="primary" @click="clearSelect" :disabled="!multipleDates.length"
|
|
|
+ ><SvgIcon name="ele-Delete" class="mr3" /> 清空选择</el-button
|
|
|
+ >
|
|
|
+ </el-button-group>
|
|
|
+ <el-button-group>
|
|
|
+ <el-button @click="setWorkTime"><SvgIcon name="ele-AlarmClock" class="mr3" /> 设定工作时间</el-button>
|
|
|
</el-button-group>
|
|
|
- <el-button-group>
|
|
|
- <el-button @click="setWorkTime" ><SvgIcon name="ele-AlarmClock" class="mr3"/> 设定工作时间</el-button>
|
|
|
- </el-button-group>
|
|
|
</template>
|
|
|
<template #date-cell="{ data }">
|
|
|
- <template v-for="(item, index) in state.calendarData" :key="index">
|
|
|
- <div v-if="data.day === item.currantTime" class="h100">
|
|
|
- <el-checkbox v-model="item.checked" class="w100 h100">
|
|
|
- <div>
|
|
|
- {{dayjs(data.day).format('D')}}<span :class="item.isWorkDay ? 'color-primary':'color-success'">（{{ item.isWorkDay ? '工作日' :'休息日'}}）</span>
|
|
|
- </div>
|
|
|
- <div class="lunar" :class="{'color-danger font-bold':isFestival(data)}">{{ solarToLunar(data) }}</div>
|
|
|
- </el-checkbox>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
+ <template v-for="(item, index) in state.calendarData" :key="index">
|
|
|
+ <div v-if="data.day === item.currantTime" class="h100">
|
|
|
+ <el-checkbox v-model="item.checked" class="w100 h100">
|
|
|
+ <div>
|
|
|
+ {{ dayjs(data.day).format('D')
|
|
|
+ }}<span :class="item.isWorkDay ? 'color-primary' : 'color-success'">（{{ item.isWorkDay ? '工作日' : '休息日' }}）</span>
|
|
|
+ </div>
|
|
|
+ <div class="lunar" :class="{ 'color-danger font-bold': isFestival(data) }">{{ solarToLunar(data) }}</div>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
</template>
|
|
|
</el-calendar>
|
|
|
</el-card>
|
|
|
@@ -56,18 +63,20 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts" name="holidayConfig">
|
|
|
-import {ref, reactive, onMounted, computed} from 'vue';
|
|
|
-import {ElMessage, ElMessageBox, FormInstance} from 'element-plus';
|
|
|
-import dayjs from "dayjs";
|
|
|
-import calendar from '/@/utils/calendar.js'
|
|
|
-import {getDaysSetting, setHolidayApi} from '/@/api/system/holiday';
|
|
|
+import { ref, reactive, onMounted, computed } from 'vue';
|
|
|
+import { ElMessage, ElMessageBox, FormInstance } from 'element-plus';
|
|
|
+import dayjs from 'dayjs';
|
|
|
+import calendar from '/@/utils/calendar.js';
|
|
|
+import { getDaysSetting, setHolidayApi } from '/@/api/system/holiday';
|
|
|
+import { auth } from '/@/utils/authFunction';
|
|
|
+import { getDataByTypeId } from '/@/api/system/dict';
|
|
|
|
|
|
const state = reactive<any>({
|
|
|
ruleForm: {
|
|
|
- time: '',
|
|
|
- time1: '',
|
|
|
+ time: '',
|
|
|
+ time1: '',
|
|
|
},
|
|
|
- calendarData : [] // 日历数据
|
|
|
+ calendarData: [], // 日历数据
|
|
|
});
|
|
|
const today = ref(new Date()); // 当前日期
|
|
|
const month = ref(new Date()); // 月份
|
|
|
@@ -75,56 +84,55 @@ const dialogVisible = ref(false); // 是否显示弹窗
|
|
|
const loading = ref(false); // 加载状态
|
|
|
// 选择月份
|
|
|
const selectMonth = async (val: Date) => {
|
|
|
- state.calendarData = [];
|
|
|
- const days: number = dayjs(val).daysInMonth();
|
|
|
- state.calendarData = Array.from({ length: days }, (_, i) => ({
|
|
|
- currantTime: dayjs(val).startOf('month').add(i, 'day').format('YYYY-MM-DD'),
|
|
|
- checked: false,
|
|
|
- isWorkDay:![0,6].includes(dayjs(val).startOf('month').add(i, 'day').day())
|
|
|
- }));
|
|
|
- dateRange.value = [new Date(dayjs(val).startOf('month').format('YYYY-MM-DD')),
|
|
|
- new Date(dayjs(val).endOf('month').format('YYYY-MM-DD'))];
|
|
|
- await getSetting(dayjs(val).format('YYYY'),dayjs(val).format('MM'));
|
|
|
- today.value = val;
|
|
|
+ state.calendarData = [];
|
|
|
+ const days: number = dayjs(val).daysInMonth();
|
|
|
+ state.calendarData = Array.from({ length: days }, (_, i) => ({
|
|
|
+ currantTime: dayjs(val).startOf('month').add(i, 'day').format('YYYY-MM-DD'),
|
|
|
+ checked: false,
|
|
|
+ isWorkDay: ![0, 6].includes(dayjs(val).startOf('month').add(i, 'day').day()),
|
|
|
+ }));
|
|
|
+ dateRange.value = [new Date(dayjs(val).startOf('month').format('YYYY-MM-DD')), new Date(dayjs(val).endOf('month').format('YYYY-MM-DD'))];
|
|
|
+ await getSetting(dayjs(val).format('YYYY'), dayjs(val).format('MM'));
|
|
|
+ today.value = val;
|
|
|
};
|
|
|
// 日期范围
|
|
|
-const dateRange = ref([new Date(dayjs(today.value).startOf('month').format('YYYY-MM-DD')),
|
|
|
- new Date(dayjs(today.value).endOf('month').format('YYYY-MM-DD'))]); // 日期范围
|
|
|
+const dateRange = ref([
|
|
|
+ new Date(dayjs(today.value).startOf('month').format('YYYY-MM-DD')),
|
|
|
+ new Date(dayjs(today.value).endOf('month').format('YYYY-MM-DD')),
|
|
|
+]); // 日期范围
|
|
|
// 设置休息日
|
|
|
const setHoliday = () => {
|
|
|
- ElMessageBox.confirm(
|
|
|
- `您确定要将【${multipleDates.value.map((item:any) => dayjs(item).format('YYYY-MM-DD')).join(',')}】设为休息日吗？`,
|
|
|
- '提示',
|
|
|
- {
|
|
|
- type: 'warning',
|
|
|
- draggable:true
|
|
|
- }
|
|
|
- ).then(() => {
|
|
|
- setHolidayApi({
|
|
|
- list:multipleDates.value,isWorkDay:false
|
|
|
- }).then(() => {
|
|
|
- ElMessage.success('设置成功');
|
|
|
- selectMonth(today.value);
|
|
|
- })
|
|
|
- }).catch(()=>{})
|
|
|
+ ElMessageBox.confirm(`您确定要将【${multipleDates.value.map((item: any) => dayjs(item).format('YYYY-MM-DD')).join(',')}】设为休息日吗？`, '提示', {
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ setHolidayApi({
|
|
|
+ list: multipleDates.value,
|
|
|
+ isWorkDay: false,
|
|
|
+ }).then(() => {
|
|
|
+ ElMessage.success('设置成功');
|
|
|
+ selectMonth(today.value);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
};
|
|
|
// 设置工作日
|
|
|
const setWorkDay = () => {
|
|
|
- ElMessageBox.confirm(
|
|
|
- `您确定要将【${multipleDates.value.map((item:any) => dayjs(item).format('YYYY-MM-DD')).join(',')}】设为工作日吗？`,
|
|
|
- '提示',
|
|
|
- {
|
|
|
- type: 'warning',
|
|
|
- draggable:true
|
|
|
- }
|
|
|
- ).then(() => {
|
|
|
- setHolidayApi({
|
|
|
- list:multipleDates.value,isWorkDay:true
|
|
|
- }).then(() => {
|
|
|
- ElMessage.success('设置成功');
|
|
|
- selectMonth(today.value);
|
|
|
- })
|
|
|
- }).catch(()=>{})
|
|
|
+ ElMessageBox.confirm(`您确定要将【${multipleDates.value.map((item: any) => dayjs(item).format('YYYY-MM-DD')).join(',')}】设为工作日吗？`, '提示', {
|
|
|
+ type: 'warning',
|
|
|
+ draggable: true,
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ setHolidayApi({
|
|
|
+ list: multipleDates.value,
|
|
|
+ isWorkDay: true,
|
|
|
+ }).then(() => {
|
|
|
+ ElMessage.success('设置成功');
|
|
|
+ selectMonth(today.value);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
};
|
|
|
// 设置工作时间
|
|
|
const setWorkTime = () => {
|
|
|
@@ -132,77 +140,79 @@ const setWorkTime = () => {
|
|
|
};
|
|
|
// 清除选择
|
|
|
const clearSelect = () => {
|
|
|
- state.calendarData.forEach((item:any) => {
|
|
|
- item.checked = false;
|
|
|
- })
|
|
|
+ state.calendarData.forEach((item: any) => {
|
|
|
+ item.checked = false;
|
|
|
+ });
|
|
|
};
|
|
|
// 获取所选中的日期
|
|
|
const multipleDates = computed(() => {
|
|
|
- return state.calendarData.filter((item:any) => item.checked).map((item:any) => item.currantTime);
|
|
|
+ return state.calendarData.filter((item: any) => item.checked).map((item: any) => item.currantTime);
|
|
|
});
|
|
|
// 表单ref
|
|
|
const ruleFormRef = ref<RefType>();
|
|
|
// 表单提交
|
|
|
const onSubmit = (formEl: FormInstance | undefined) => {
|
|
|
if (!formEl) return;
|
|
|
- formEl.validate((valid:boolean) => {
|
|
|
- if(!valid) return;
|
|
|
-
|
|
|
+ formEl.validate((valid: boolean) => {
|
|
|
+ if (!valid) return;
|
|
|
});
|
|
|
};
|
|
|
// 获取休息日设置
|
|
|
-const getSetting = async ( dateYear: string,dateMoth: string) => {
|
|
|
- loading.value = true;
|
|
|
- try {
|
|
|
- const { result } = await getDaysSetting(dateYear,dateMoth);
|
|
|
- result.forEach((i:any) => {
|
|
|
- const item = state.calendarData.find((j:any)=> dayjs(i.day).format('YYYY-MM-DD') === j.currantTime);
|
|
|
- if (item) {
|
|
|
- item.isWorkDay = i.isWorkDay;
|
|
|
- }
|
|
|
- });
|
|
|
- } catch {
|
|
|
- // handle error if needed
|
|
|
- } finally {
|
|
|
- loading.value = false;
|
|
|
- }
|
|
|
+const getSetting = async (dateYear: string, dateMoth: string) => {
|
|
|
+ loading.value = true;
|
|
|
+ if (!auth('system:holiday:query')) ElMessage.error('抱歉，您没有权限获取节假日设置！');
|
|
|
+ else {
|
|
|
+ try {
|
|
|
+ const { result } = await getDaysSetting(dateYear, dateMoth);
|
|
|
+ result.forEach((i: any) => {
|
|
|
+ const item = state.calendarData.find((j: any) => dayjs(i.day).format('YYYY-MM-DD') === j.currantTime);
|
|
|
+ if (item) {
|
|
|
+ item.isWorkDay = i.isWorkDay;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } catch {
|
|
|
+ // handle error if needed
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
};
|
|
|
// 是否休息日
|
|
|
-const isFestival = (slotData:any)=> {
|
|
|
- let solarDayArr = slotData.day.split('-');
|
|
|
- let lunarDay:any = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
|
|
|
- return lunarDay.lunarFestival || lunarDay.festival;
|
|
|
+const isFestival = (slotData: any) => {
|
|
|
+ let solarDayArr = slotData.day.split('-');
|
|
|
+ let lunarDay: any = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]);
|
|
|
+ return lunarDay.lunarFestival || lunarDay.festival;
|
|
|
};
|
|
|
// 公历转农历
|
|
|
-const solarToLunar = (slotData:any)=> {
|
|
|
- let solarDayArr = slotData.day.split('-');
|
|
|
- let lunarDay:any = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
|
|
|
- // 农历日期
|
|
|
- let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;
|
|
|
- return lunarDay.lunarFestival ? lunarDay.lunarFestival : lunarDay.festival ? lunarDay.festival : lunarMD
|
|
|
+const solarToLunar = (slotData: any) => {
|
|
|
+ let solarDayArr = slotData.day.split('-');
|
|
|
+ let lunarDay: any = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]);
|
|
|
+ // 农历日期
|
|
|
+ let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn;
|
|
|
+ return lunarDay.lunarFestival ? lunarDay.lunarFestival : lunarDay.festival ? lunarDay.festival : lunarMD;
|
|
|
};
|
|
|
-onMounted(async ()=>{
|
|
|
- const days: number = dayjs(today.value).daysInMonth();
|
|
|
- state.calendarData = Array.from({ length: days }, (_, i) => ({
|
|
|
- currantTime: dayjs(today.value).startOf('month').add(i, 'day').format('YYYY-MM-DD'),
|
|
|
- isWorkDay:![0,6].includes(dayjs(today.value).startOf('month').add(i, 'day').day()),
|
|
|
- checked: false
|
|
|
- }));
|
|
|
- await getSetting(dayjs(today.value).format('YYYY'),dayjs(today.value).format('MM'));
|
|
|
-})
|
|
|
+onMounted(async () => {
|
|
|
+ const days: number = dayjs(today.value).daysInMonth();
|
|
|
+ state.calendarData = Array.from({ length: days }, (_, i) => ({
|
|
|
+ currantTime: dayjs(today.value).startOf('month').add(i, 'day').format('YYYY-MM-DD'),
|
|
|
+ isWorkDay: ![0, 6].includes(dayjs(today.value).startOf('month').add(i, 'day').day()),
|
|
|
+ checked: false,
|
|
|
+ }));
|
|
|
+ await getSetting(dayjs(today.value).format('YYYY'), dayjs(today.value).format('MM'));
|
|
|
+});
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
/**日期div的样式-农历*/
|
|
|
.el-calendar-table .el-calendar-day > div .lunar {
|
|
|
- padding-top: 10px;
|
|
|
+ padding-top: 10px;
|
|
|
}
|
|
|
-:deep(.el-checkbox){
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
+:deep(.el-checkbox) {
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
-:deep(.el-checkbox__input){
|
|
|
- position: absolute;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
+:deep(.el-checkbox__input) {
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
}
|
|
|
</style>
|
zhangchong