elementUI日历----pc端可编辑的elementUI日历+加sass样式属性使用变量值
<template>
<div :style="{'--opacityA':opacityA,'--opacityB':opacityB}">
<el-calendar v-model="value">
<template slot="dateCell" slot-scope="{date, data}">
{{ data.day.split('-').slice(1).join('-') }}
<div class="data gdt" @click="ejectFun(data.day)">
<div class="zao">
<div class="type-add">
<div class="top">
<div class="title">早班：</div>
<div class="el-icon-circle-plus-outline" v-if="new Date(data.day).getTime()>=newTimeStamp"></div>
</div>
<div class="personal">
<div class="name">
<el-tooltip class="item" effect="dark" content="生产部 15011112222" placement="top-start">
<div>亚索</div>
</el-tooltip>
</div>
<div class="operation">
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-edit"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-delete"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="抽查" placement="top-start">
<div class="el-icon-film" @click="goCreateSpotcheck()"></div>
</el-tooltip>
</div>
</div>
<div class="personal">
<div class="name">
<el-tooltip class="item" effect="dark" content="生产部 15011112222" placement="top-start">
<div>托儿索</div>
</el-tooltip>
</div>
<div class="operation">
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-edit"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-delete"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="抽查" placement="top-start">
<div class="el-icon-film" @click="goCreateSpotcheck()"></div>
</el-tooltip>
</div>
</div>
<div class="personal">
<div class="name">
<el-tooltip class="item" effect="dark" content="生产部 15011112222" placement="top-start">
<div>疾风剑豪</div>
</el-tooltip>
</div>
<div class="operation">
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-edit"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-delete"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="抽查" placement="top-start">
<div class="el-icon-film" @click="goCreateSpotcheck()"></div>
</el-tooltip>
</div>
</div>
</div>
</div>
<div class="zao">
<div class="type-add">
<div class="top">
<div class="title">晚班：</div>
<div class="el-icon-circle-plus-outline" v-if="new Date(data.day).getTime()>=newTimeStamp"></div>
</div>
<div class="personal">
<div class="name">
<el-tooltip class="item" effect="dark" content="生产部 15011112222" placement="top-start">
<span>亚索</span>
</el-tooltip>
</div>
<div class="operation">
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-edit"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-delete"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="抽查" placement="top-start">
<div class="el-icon-film" @click="goCreateSpotcheck()"></div>
</el-tooltip>
</div>
</div>
<div class="personal">
<div class="name">
<el-tooltip class="item" effect="dark" content="生产部 15011112222" placement="top-start">
<div>托儿索</div>
</el-tooltip>
</div>
<div class="operation">
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-edit"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-delete"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="抽查" placement="top-start">
<div class="el-icon-film" @click="goCreateSpotcheck()"></div>
</el-tooltip>
</div>
</div>
<div class="personal">
<div class="name">
<el-tooltip class="item" effect="dark" content="生产部 15011112222" placement="top-start">
<div>疾风剑豪</div>
</el-tooltip>
</div>
<div class="operation">
<el-tooltip class="item" effect="dark" content="编辑" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-edit"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="删除" placement="top-start" v-if="new Date(data.day).getTime()>=newTimeStamp">
<div class="el-icon-delete"></div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="抽查" placement="top-start">
<div class="el-icon-film" @click="goCreateSpotcheck()"></div>
</el-tooltip>
</div>
</div>
</div>
</div>
<!-- <div v-for="item in scheduleData" :key="item.id">
<div v-if="data.day == item.data">
<div v-for="tag in item.personnelS" :key="tag.id">
<el-tag size='mini' closable :type="statefun(tag.captain,tag.cwa,tag.late,'type')" :effect="statefun(tag.captain,tag.cwa,tag.late,'cwafun')"> {{tag.name}}</el-tag>
</div>
</div>
</div> -->
</div>
</template>
</el-calendar>
<!-- 添加弹框 -->
<el-dialog title="值班值守" :visible.sync="dialogFormVisible">
<el-form :model="form">
<el-form-item label="选择值班人员">
<el-cascader
:options="options"
@change="selectFun"
:emitPath="true"
ref='cascader'
:getCheckedNodes="true"
v-model="form.arr"
:props="{ multiple: true, checkStrictly: true,value:'value',label:'label'}"
clearable></el-cascader>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="quediing">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {
props:{
opacityA:{
default:0,
},
opacityB:{
default:1,
},
},
data(){
return{
/***日历需要的数据**/
//控制对话框显示
dialogFormVisible:false,
//人员选择表单
form:{arr:[]},
value: new Date(),
scheduleData: [
{
data:'2022-05-02',//具体的日期
id:'0000000000001',
group:'白班组',//值班的人可能是一个组的人，或者需要组或者部门(可弃用)
groupID:'0000000000',//部门或者组的id(可弃用)
personnelS:[//当天值班人员可能是多个,所以是个数组
{
id:'01',//值班人员id
name:'格雷福斯',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:true,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
{
id:'02',//值班人员id
name:'亚索（缺勤）',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:true,//是否迟到
},
{
id:'03',//值班人员id
name:' 裴擒虎',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:false,//是否到岗
late:false,//是否迟到
},
{
id:'04',//值班人员id
name:'露娜',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:false,//是否到岗
late:false,//是否迟到
},
{
id:'05',//值班人员id
name:'灵狐者',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
{
id:'06',//值班人员id
name:'灵狐者',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
{
id:'07',//值班人员id
name:'灵狐者',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
{
id:'08',//值班人员id
name:'灵狐者',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
]
},
{
data:'2022-05-12',//具体的日期
id:'0000000000002',
group:'白班组',//值班的人可能是一个组的人，或者需要组或者部门(可弃用)
groupID:'0000000000',//部门或者组的id(可弃用)
personnelS:[//当天值班人员可能是多个,所以是个数组
{
id:'01',//值班人员id
name:'格雷福斯',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
{
id:'02',//值班人员id
name:'亚索（迟到）',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:true,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:true,//是否迟到
},
{
id:'03',//值班人员id
name:' 裴擒虎',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:false,//是否到岗
late:false,//是否迟到
},
{
id:'04',//值班人员id
name:'露娜',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:false,//是否到岗
late:false,//是否迟到
},
{
id:'05',//值班人员id
name:'灵狐者',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
]
},
{
data:'2022-05-22',//具体的日期
id:'0000000000003',
group:'白班组',//值班的人可能是一个组的人，或者需要组或者部门(可弃用)
groupID:'0000000000',//部门或者组的id(可弃用)
personnelS:[//当天值班人员可能是多个,所以是个数组
{
id:'01',//值班人员id
name:'格雷福斯',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
{
id:'02',//值班人员id
name:'亚索',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:true,//是否迟到
},
{
id:'03',//值班人员id
name:' 裴擒虎',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:false,//是否到岗
late:false,//是否迟到
},
{
id:'04',//值班人员id
name:'露娜（缺勤）',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:true,//当天值班负责人（领导或者组长）
cwa:false,//是否到岗
late:false,//是否迟到
},
{
id:'05',//值班人员id
name:'灵狐者',//值班人员id
group:'屯粮部',//所属部门/组名称
groupID:'111111111',//所属部门/组id
captain:false,//当天值班负责人（领导或者组长）
cwa:true,//是否到岗
late:false,//是否迟到
},
]
},
],
options: [
{
value: 'zhinan',
label: '屯粮部门',
children: [
{
value: 'shejiyuanze',
label: '第一组',
children: [
{
value: 'yizhi',
label: '男枪'
},
{
value: 'fankui',
label: '德玛'
},
{
value: 'xiaolv',
label: '大嘴'
},
{
value: 'kekong',
label: '石头人'
}
]
},
{
value: 'daohang',
label: '第二组',
children: [
{
value: 'cexiangdaohang',
label: '永恩'
},
{
value: 'dingbudaohang',
label: '亚索'
}
]
}
]
}
],
id:'',
name:'',
time:'',
//显示的月份
month:'',
//当天日期时间的时间戳
newTimeStamp:0,
//
changeTimeStamp:0,
}
},
created(){
this.$nextTick(() => {
// 点击前一个月显示前一个月考勤打卡展示
const prevBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:nth-child(1)'
)
prevBtn.addEventListener('click', e => {
const daTime = this.parseTime(this.value)
})
// 点击下一个月
const nextBtn = document.querySelector(
'.el-calendar__button-group .el-button-group>button:nth-child(3)'
)
nextBtn.addEventListener('click', (e) => {
const daTime = this.parseTime(this.value)
})
// 点击今天
const prevBtn2 = document.querySelector('.el-calendar__button-group .el-button-group>button:nth-child(2)')
prevBtn2.addEventListener('click', (e) => {
const daTime = this.parseTime(this.value)
})
})
this.parseTime(this.value)
this.parseTimeB(this.value)
},
methods:{
/****其他逻辑**/
//进入创建值班抽查
goCreateSpotcheck(){
this.$router.push({name:'onduty:ondutyList:createSpotcheck'})
},
/**日历**/
//点击上个月、下个月、今天
parseTime(date){
console.log(date);
var y = date.getFullYear();
var m = date.getMonth() + 1;
this.month=m;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
this.changeTimeStamp=new Date(y + '-' + m + '-' + d).getTime()
console.log(this.changeTimeStamp)
},
parseTimeB(date){
console.log(date);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
this.newTimeStamp=new Date(y + '-' + m + '-' + d).getTime()
console.log(this.newTimeStamp)
},
ejectFun(data){
console.log(data)
this.dialogFormVisible = true;
this.time=data;
// let obj = this.scheduleData.filter((item,index)=>{
// console.log(item,index)
// if(item.data == data){
// return item
// }
// })
// console.log(obj)
},
selectFun(item){
console.log(item)
console.log(this.form.arr)
console.log(this.$refs["cascader"].getCheckedNodes()[0])
this.name = this.$refs["cascader"].getCheckedNodes()[0].label
this.id = this.$refs["cascader"].getCheckedNodes()[0].value
},
quediing(){
let arr = this.scheduleData.filter((item,index)=>{
console.log(item,index)
if(item.data == this.time){
return item
}
})
console.log(arr)
if(arr.length==0){
let obj2 = {
data:this.time,
id:Math.floor(Math.random() * 10)+'',
personnelS:[{id:this.id,name:this.name,captain:false,cwa:true,late:false,personnelS:[]}]
}
console.log('???')
this.scheduleData.push(obj2)
}else{
console.log('???')
let obj3 = JSON.parse(JSON.stringify(this.scheduleData))
console.log(arr)
arr[0].personnelS.push({id:this.id,name:this.name,captain:false,cwa:true,late:false,})
this.scheduleData.map((item,index)=>{
if(item.data == this.time){
obj3[index]=arr[0]
this.scheduleData = obj3
}
})
}
this.dialogFormVisible=false;
this.form.arr=[]
}
}
}
</script>
<style lang="scss" scoped>
/deep/.el-calendar__title{//左侧时间显示
opacity: var(--opacityA);
}
/deep/.el-calendar__button-group{//右侧时间选择
opacity: var(--opacityB);
}
/deep/.el-calendar-day {
box-sizing: border-box;
padding: 5px;
height:10rem;
overflow: hidden;
}
/deep/.current{
height: 125px;
/deep/.el-calendar-day{
height: 22vh;
}
.data{
width: 100%;
border: 1px solid green;
border-radius: 6px;
padding: 2px;
box-sizing: border-box;
height:8.5rem;
overflow: auto;
display: flex;
flex-direction: column;
.zao{
.type-add{
.top{
height: 1rem;
display: flex;
.title{
line-height: 1rem;
color:#1195DA;
}
.el-icon-circle-plus-outline{
font-size: 1rem;
color:#1195DA;
line-height: 1rem;
font-weight: 900;
}
}
.personal{
display: flex;
height: 1.3rem;
line-height: 1.3rem;
.name{
flex: 1;
text-align: center;
}
.operation{
display: flex;
width: 4rem;
justify-content: space-between;
// justify-content: flex-end;
.el-icon-edit,.el-icon-delete,.el-icon-film{
font-size: 1rem;
color:#1195DA;
line-height: 1rem;
// margin:0px 2px;
}
}
}
}
}
.wan{
flex:1;
.type-add{
.top{
height: 1rem;
display: flex;
.title{
line-height: 1rem;
color:#1195DA;
}
.el-icon-circle-plus-outline{
font-size: 1rem;
color:#1195DA;
line-height: 1rem;
font-weight: 900;
}
}
.personal{
display: flex;
.name{
height: 1.3rem;
line-height: 1.3rem;
text-align: center;
}
.el-icon-edit,.el-icon-delete,.el-icon-film{
font-size: 1rem;
color:#1195DA;
line-height: 1rem;
}
}
}
}
}
}
/deep/.next,/deep/.prev{
height: 125px;
/deep/.el-calendar-day{
height: 22vh;
}
.data{
width: 100%;
border: 1px solid green;
border-radius: 6px;
padding: 2px;
box-sizing: border-box;
height:8.5rem;
overflow: auto;
display: flex;
flex-direction: column;
.zao{
.type-add{
.top{
height: 1rem;
display: flex;
.title{
line-height: 1rem;
// color:#1195DA;
}
.el-icon-circle-plus-outline{
font-size: 1rem;
// color:#1195DA;
line-height: 1rem;
font-weight: 900;
}
}
.personal{
display: flex;
height: 1.3rem;
line-height: 1.3rem;
.name{
flex: 1;
text-align: center;
}
.operation{
display: flex;
width: 4rem;
justify-content: space-between;
.el-icon-edit,.el-icon-delete,.el-icon-film{
font-size: 1rem;
// color:#1195DA;
line-height: 1rem;
}
}
}
}
}
.wan{
flex:1;
.type-add{
.top{
height: 1rem;
display: flex;
.title{
line-height: 1rem;
// color:#1195DA;
}
.el-icon-circle-plus-outline{
font-size: 1rem;
// color:#1195DA;
line-height: 1rem;
font-weight: 900;
}
}
.personal{
display: flex;
.name{
height: 1.3rem;
line-height: 1.3rem;
text-align: center;
}
.el-icon-edit,.el-icon-delete,.el-icon-film{
font-size: 1rem;
// color:#1195DA;
line-height: 1rem;
}
}
}
}
}
}
/deep/.is-selected{//当前/选中的天背景色
background-color:#F2F8FE !important;
}
.gdt::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 5px;
scrollbar-arrow-color: red;
}
.gdt::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
border-radius: 5px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2);
scrollbar-arrow-color: red;
}
.gdt::-webkit-scrollbar-track { /*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.3);
border-radius: 0;
background: rgba(0,0,0,0);
}
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
