<style scoped>
.calendar {
width: 308px;
padding-left: 40px;
}
.title {
border-bottom: 1px solid rgba(0, 0, 0, .09);
margin-bottom: 12px;
}
.week {
flex-wrap: wrap;
}
.week span {
width: 44px;
position: relative;
}
.week span {
box-sizing: border-box;
margin-bottom: 10px;
cursor: pointer;
}
.work-day {
background: rgba(82, 196, 26, .1);
}
.work-day:hover {
border: 1px solid rgba(82, 196, 26, 1);
}
.not-work-day {
background: rgba(255, 102, 0, .1);
}
.not-work-day:hover {
border: 1px solid rgba(255, 102, 0, 1);
}
.legend {
flex-wrap: wrap;
}
.legend span {
width: 6px;
height: 6px;
border-radius: 50%;
margin: 0 8px;
}
.width {
width: 44px;
height: 44px;
}
.calendar-left {
width: 500px;
padding: 24px;
border-right: 1px solid #E4E7ED;
}
.calendar-left-f {
display: flex;
justify-content: space-between;
margin-bottom: 24px;
margin-right: 16px;
}
.calendar-left-f-button > div {
width: 84px;
height: 36px;
margin-right: 16px;
margin-bottom: 16px;
border: 1px solid rgba(236, 236, 236, 1);
text-align: center;
line-height: 34px;
color: rgba(200, 200, 200, 1);
font-size: 16px;
cursor: pointer;
}
.calendar-left-f-button > div.week-active {
border-color: transparent;
background: #FFF2EA;
color: #F60;
}
.calendar-left-f-button > div:not(.week-active):hover {
color: #838383;
}
.calendar-left-f-button > div:hover {
border-color: rgba(255, 102, 0, .5);
}
.calendar-left-s-time {
margin-top: 24px;
display: flex;
justify-content: space-between;
margin-bottom: 20px;
margin-right: 16px;
}
.calendar-left-s-time p {
margin-bottom: 10px;
}
>>> .el-input__inner {
color: rgba(0, 0, 0, .65);
}
</style>
<template>
<div>
<breadcrumb class="m-16">
<el-breadcrumb-item>企业日历</el-breadcrumb-item>
</breadcrumb>
<div class="mt16 bf" style="display: flex; padding: 24px;">
<div class="calendar-left">
<div class="calendar-left-f">
<h3 class="f16 c85">工作日</h3>
<p class="c25">已设置 <span>{{ additionalDay }}</span> 个额外工作日</p>
</div>
<el-row class="calendar-left-f-button">
<el-col v-for="(i,index) in weekArrLeft" :key="index" :class="i.flag&&'week-active'">
<p @click="weekHandle(i,index)">{{ i.value }}</p>
</el-col>
</el-row>
<div class="calendar-left-s" style="margin-top: 40px;">
<h3 class="f16 c85">工作时间</h3>
<div class="calendar-left-s-time">
<div class="calendar-left-s-time-f">
<p class="c45">上午</p>
<el-time-picker
@change="num++"
v-model="startWorkTime"
value-format="HH:mm:ss"
placeholder="任意时间点"
/>
</div>
<div>
<p class="c45">下午</p>
<el-time-picker
@change="num++"
v-model="endWorkTime"
value-format="HH:mm:ss"
placeholder="任意时间点"
/>
</div>
</div>
<p style="margin-bottom: 40px;" class="c25">
<i class="el-icon-info" style="margin-right: 7px;" />温馨提示:调整企业日历后,将影响平台用户添加工时的核准规则。
</p>
<div class="tr mr16">
<el-button type="primary" :disabled="!num" @click="btnYes">确 定</el-button>
</div>
</div>
</div>
<div class="calendar" style="padding: 15px 29px;">
<div class="title flex_ai_c c65 flex_jc_b p12_0">
<i class="el-icon-d-arrow-left m0_12 hover" @click="prevYear" />
<i class="el-icon-arrow-left hover" @click="prevMonth" />
<span class="flex1 flex_center c85 fw">{{ getDateFormat }}</span>
<i class="el-icon-arrow-right hover" @click="nextMonth" />
<i class="el-icon-d-arrow-right m0_12 hover" @click="nextYear" />
</div>
<div class="">
<div class="week flex_ai_c c85">
<span v-for="i in weekArr" :key="i" class="flex_center width">{{ i }}</span>
</div>
<div class="week flex_ai_c f16 c65">
<span v-for="i in getFirstDayInfo" :key="i" class="width" />
<span v-for="i in monthDays"
:key="i.date"
:class="['width date flex_center', i.isWorkDay ? 'work-day' : 'not-work-day'] "
@click="changeWorkDay(i)"
>{{ i.day }}</span>
</div>
</div>
<div class="flex_center legend p12_0 f14">
<em v-for="i in legend" :key="i.text" class="c65 p0_12 flex_ai_c"><span
:style="{background:i.color}"
/>{{ i.text }}</em>
</div>
<p style="margin-bottom: 40px; text-align: center;" class="c25">
<span>点击日期即可切换工作日/休息日</span>
</p>
</div>
</div>
</div>
</template>
<script>
import moment from "moment"
export default {
data() {
return {
startWorkTime: '09:00:00',//开始工作的时间
endWorkTime: '18:00:00',//结束工作的时间
loading: false,
weekArrLeft: [
{value: "星期一", flag: false, index: 1},
{value: "星期二", flag: false, index: 2},
{value: "星期三", flag: false, index: 3},
{value: "星期四", flag: false, index: 4},
{value: "星期五", flag: false, index: 5},
{value: "星期六", flag: false, index: 6},
{value: "星期日", flag: false, index: 7},
],
weekArr: ["一", "二", "三", "四", "五", "六", "日"],
legend: [{text: "工作日", color: '#52C41A'}, {text: "休息日", color: '#ff6600'}],
date: moment(this.yearMonth).format("YYYY-MM"),
num: 0,
resItems: [], //返回的特殊项的数组
}
},
computed: {
additionalDay() {
return this.resItems.filter(v => v.type == 1 && !this.extraWorkDay(v.day)).length
},
monthDays() {
let dateArr = [];
for (var i = 1; i <= this.dataLocal.daysInMonth(); i++) { //daysInMonth循环当月的天数
let date = this.dataLocal.date(i); //当月第几天
let dateFormat = date.format("YYYY-MM-DD 00:00:00");
let repeatDay = this.resItems.find(v => v.day == dateFormat); //查找后台的特殊项是否包含当前循环的这一天
var obj = {
day: i < 10 ? '0' + i : '' + i,
isWorkDay: repeatDay ? repeatDay.type == 1 : this.extraWorkDay(date),
date: dateFormat
};
dateArr.push(obj);
}
return dateArr
},
getFirstDayInfo() { //每个月第一天的位置
return this.dataLocal.weekday()
},
getDateFormat() {
return this.dataLocal.format("YYYY年MM月")
},
dataLocal() { //当天格式化为中国格式
return moment(this.date).locale("zh_CN")
}
},
mounted() {
this.getList()
},
methods: {
//点击特殊项的回调
changeWorkDay(i) {
this.num++
const type = i.isWorkDay ? 2 : 1
let repeatDay = this.resItems.find(v => v.day == i.date);
if (repeatDay) {
repeatDay.type = type
} else {
this.resItems.push({day: i.date, type: type})
}
},
//确定按钮的回调
btnYes() {
this.num = 0;
this.$c_ajax.post("/calendar/save", {
workDay: this.weekArrLeft.filter(v => v.flag).map(v => v.index).join(","),
startWorkTime: this.startWorkTime,
endWorkTime: this.endWorkTime,
items: this.resItems
}).then((res) => {
this.loading = false;
res.state ? this.$message.success(res.msg) : this.$message.error(res.msg);
});
},
//工作日回调
weekHandle(i, index) {
this.num++
i.flag = !i.flag;
},
getList() {
this.loading = true;
this.$c_ajax.post("/calendar/all").then((res) => {
this.loading = false;
for (let i of res.data.workDay.split(',')) {
this.weekArrLeft[i - 1].flag = true
}
this.startWorkTime = res.data.startWorkTime;
this.endWorkTime = res.data.endWorkTime;
this.resItems = res.data.items
});
},
extraWorkDay(date) { //是不是额外工作日
let DayOfWeek = moment(date).locale("zh_CN").format("d") - 1;
return this.weekArrLeft[DayOfWeek == -1 ? 6 : DayOfWeek].flag;
},
prevMonth() {
this.date = this.dataLocal.subtract(1, "M").format("YYYY-MM");
},
nextMonth() {
this.date = this.dataLocal.add(1, "M").format("YYYY-MM");
},
prevYear() {
this.date = this.dataLocal.subtract(1, "y").format("YYYY-MM");
},
nextYear() {
this.date = this.dataLocal.add(1, "y").format("YYYY-MM");
}
}
}
</script>
用moment写日历
最新推荐文章于 2023-11-10 17:05:56 发布