排班日历
This commit is contained in:
JinLu.Yin
parent
5b1e392e5d
commit
45d6b5661e
@ -1,15 +1,186 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCalholiday } from "@/api/mes/cal/calholiday";
|
||||
import calendar from '@/utils/calendar';
|
||||
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>
|
||||
|
||||
<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>
|
||||
@ -1,7 +1,9 @@
|
||||
<template>
|
||||
<div class="app-container">
|
||||
<el-tabs type="card">
|
||||
<el-tab-pane label="类型"></el-tab-pane>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane label="类型">
|
||||
<CalendarTypeView></CalendarTypeView>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="班组"></el-tab-pane>
|
||||
<el-tab-pane label="个人"></el-tab-pane>
|
||||
</el-tabs>
|
||||
@ -9,9 +11,10 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import CalendarTypeView from "./calendarType.vue"
|
||||
|
||||
export default {
|
||||
components:{CalendarTypeView},
|
||||
data(){
|
||||
return {
|
||||
|
||||
|
||||
@ -1,5 +1,7 @@
|
||||
<template>
|
||||
|
||||
<div class="app-container">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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