排班日历
This commit is contained in:
JinLu.Yin
parent
5b1e392e5d
commit
45d6b5661e
@ -1,15 +1,186 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
|
<el-container>
|
||||||
|
<el-aside width="150px">
|
||||||
|
<el-radio-group v-model="selectedType" class="x-fillitem el-group-list" @change="onSelected">
|
||||||
|
<el-radio-button
|
||||||
|
v-for="dict in dict.type.mes_calendar_type"
|
||||||
|
:key="dict.value"
|
||||||
|
:label="dict.value"
|
||||||
|
>{{dict.label}}</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-aside>
|
||||||
|
<el-main>
|
||||||
|
<el-calendar v-model="date">
|
||||||
|
<template slot="dateCell" slot-scope="{date, data }">
|
||||||
|
<div>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="6">
|
||||||
|
<div class="solar">
|
||||||
|
{{ data.day.split('-')[2] }}
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6">
|
||||||
|
<el-tag v-if="holidayList.indexOf(data.day) ==-1" effect="dark">班</el-tag>
|
||||||
|
<el-tag v-else effect="dark" type="success">休</el-tag>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="grid-content">
|
||||||
|
<el-button type="success" icon="el-icon-sunrise">注塑1组</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="grid-content">
|
||||||
|
<el-button type="warning" icon="el-icon-sunny">注塑2组</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<div class="grid-content">
|
||||||
|
<el-button type="info" icon="el-icon-moon">注塑3组</el-button>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-calendar>
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { listCalholiday } from "@/api/mes/cal/calholiday";
|
||||||
|
import calendar from '@/utils/calendar';
|
||||||
export default {
|
export default {
|
||||||
|
name: 'CalendarTypeView',
|
||||||
|
dicts:['mes_calendar_type'],
|
||||||
|
data(){
|
||||||
|
return {
|
||||||
|
// 遮罩层
|
||||||
|
loading: true,
|
||||||
|
date: new Date(),
|
||||||
|
holidayList:[],//假日
|
||||||
|
workdayList:[],//工作日
|
||||||
|
selectedType:null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
/** 查询节假日设置列表 */
|
||||||
|
getList() {
|
||||||
|
this.loading = true;
|
||||||
|
this.holidayList =[];
|
||||||
|
this.workdayList =[];
|
||||||
|
let that = this;
|
||||||
|
listCalholiday(this.queryParams).then(response => {
|
||||||
|
debugger;
|
||||||
|
if(response.data !=null){
|
||||||
|
response.data.forEach(theDay => {
|
||||||
|
if(theDay.holidayType =='HOLIDAY'){
|
||||||
|
that.holidayList.push(theDay.theDay);
|
||||||
|
}else{
|
||||||
|
that.workdayList.push(theDay.theDay);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.loading = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onSelected(para){
|
||||||
|
|
||||||
|
},
|
||||||
|
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 != ''
|
||||||
|
},
|
||||||
|
solarDate2lunar(solarDate) {
|
||||||
|
var solar = solarDate.split('-')
|
||||||
|
var 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
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
.grid-content{
|
||||||
|
padding: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-group-list.el-radio-group{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items:stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
|
||||||
|
.el-group-list.el-radio-group .el-radio-button:last-child .el-radio-button__inner,
|
||||||
|
.el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
|
||||||
|
.el-group-list.el-radio-group .el-radio-button__inner
|
||||||
|
{
|
||||||
|
border-radius: 0px !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-group-list.el-radio-group .el-radio-button{
|
||||||
|
border-bottom: 1px solid #F7F7F7 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-group-list.el-radio-group{
|
||||||
|
border: 1px solid #dcdfe6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-group-list.el-radio-group > label > span{
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 20px;
|
||||||
|
}
|
||||||
|
/**本月周末设置为红色*/
|
||||||
|
.el-calendar-table .current:nth-last-child(-n+2) .solar {
|
||||||
|
color: red;
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
/**本月农历设置为灰色*/
|
||||||
|
.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;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,7 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="app-container">
|
<div class="app-container">
|
||||||
<el-tabs type="card">
|
<el-tabs type="border-card">
|
||||||
<el-tab-pane label="类型"></el-tab-pane>
|
<el-tab-pane label="类型">
|
||||||
|
<CalendarTypeView></CalendarTypeView>
|
||||||
|
</el-tab-pane>
|
||||||
<el-tab-pane label="班组"></el-tab-pane>
|
<el-tab-pane label="班组"></el-tab-pane>
|
||||||
<el-tab-pane label="个人"></el-tab-pane>
|
<el-tab-pane label="个人"></el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
@ -9,9 +11,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import CalendarTypeView from "./calendarType.vue"
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
components:{CalendarTypeView},
|
||||||
data(){
|
data(){
|
||||||
return {
|
return {
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
|||||||
@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user