班组的排班日历

This commit is contained in:
JinLu.Yin 2022-06-11 22:25:19 +08:00
parent 47d476825d
commit bd50c6f429
4 changed files with 223 additions and 30 deletions

View File

@ -9,6 +9,14 @@ export function listTeam(query) {
}) })
} }
// 查询班组列表
export function listAllTeam() {
return request({
url: '/mes/cal/team/listAll',
method: 'get'
})
}
// 查询班组详细 // 查询班组详细
export function getTeam(teamId) { export function getTeam(teamId) {
return request({ return request({

View File

@ -38,28 +38,6 @@
</div> </div>
</el-col> </el-col>
</el-row> </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> </div>
</template> </template>
</el-calendar> </el-calendar>
@ -126,7 +104,6 @@ export default {
this.workdayList =[]; this.workdayList =[];
let that = this; let that = this;
listCalholiday(this.queryParams).then(response => { listCalholiday(this.queryParams).then(response => {
debugger;
if(response.data !=null){ if(response.data !=null){
response.data.forEach(theDay => { response.data.forEach(theDay => {
if(theDay.holidayType =='HOLIDAY'){ if(theDay.holidayType =='HOLIDAY'){

View File

@ -4,7 +4,9 @@
<el-tab-pane label="类型"> <el-tab-pane label="类型">
<CalendarTypeView></CalendarTypeView> <CalendarTypeView></CalendarTypeView>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="班组"></el-tab-pane> <el-tab-pane label="班组">
<TeamView></TeamView>
</el-tab-pane>
<el-tab-pane label="个人"></el-tab-pane> <el-tab-pane label="个人"></el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
@ -12,9 +14,9 @@
<script> <script>
import CalendarTypeView from "./calendarType.vue" import CalendarTypeView from "./calendarType.vue"
import TeamView from "./team.vue"
export default { export default {
components:{CalendarTypeView}, components:{CalendarTypeView,TeamView},
data(){ data(){
return { return {

View File

@ -1,15 +1,221 @@
<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="item in teamList"
:key="item.teamId"
:label="item.teamId"
>{{item.teamName}}</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 v-for="calendarDay in calendarDayList " :key="calendarDay.theDay">
<el-col :span="24" v-if="calendarDay.theDay == data.day && holidayList.indexOf(data.day) ==-1">
<div v-for="teamShift in calendarDay.teamShifts" :key="teamShift.orderNum" class="grid-content">
<el-button v-if="teamShift.orderNum == 1" type="success" icon="el-icon-sunrise">{{ teamShift.teamName }}</el-button>
<el-button v-if="teamShift.orderNum ==2 && calendarDay.shiftType=='SHIFT_THREE'" type="warning" icon="el-icon-sunny">{{ teamShift.teamName }}</el-button>
<el-button v-if="teamShift.orderNum ==2 && calendarDay.shiftType=='SHIFT_TWO'" type="info" icon="el-icon-moon">{{ teamShift.teamName }}</el-button>
<el-button v-if="teamShift.orderNum ==3 && calendarDay.shiftType=='SHIFT_THREE'" type="info" icon="el-icon-moon">{{ teamShift.teamName }}</el-button>
</div>
</el-col>
</el-row>
</div>
</template>
</el-calendar>
</el-main>
</el-container>
</div> </div>
</template> </template>
<script> <script>
import { listAllTeam } from "@/api/mes/cal/team";
import { listCalholiday } from "@/api/mes/cal/calholiday";
import { listCalendars } from "@/api/mes/cal/calendar";
import calendar from '@/utils/calendar';
export default { export default {
name: 'TeamView',
dicts:['mes_calendar_type'],
data(){
return {
//
loading: true,
date: new Date(),
teamList: [], //
holidayList:[],//
workdayList:[],//
selectedType:null,
calendarDayList:[
{
theDay:'2022-06-04',
shiftType: 'SHIFT_TWO',
teamShifts:[{teamName: '注塑1组',shiftName:'白班',orderNum: 1},{teamName: '注塑2组',shiftName:'中班',orderNum: 2},{teamName: '注塑3组',shiftName:'晚班',orderNum: 3}]
},
{
theDay:'2022-06-13',
shiftType: 'SHIFT_TWO',
teamShifts:[{teamName: '注塑1组',shiftName:'白班',orderNum: 1},{teamName: '注塑2组',shiftName:'中班',orderNum: 2},{teamName: '注塑3组',shiftName:'晚班',orderNum: 3}]
},
{
theDay:'2022-06-14',
shiftType: 'SHIFT_THREE',
teamShifts:[{teamName: '注塑1组',shiftName:'白班',orderNum: 1},{teamName: '注塑2组',shiftName:'中班',orderNum: 2},{teamName: '注塑3组',shiftName:'晚班',orderNum: 3}]
}
],
queryParams: {
theDay: null,
holidayType: null,
startTime: null,
endTime: null,
},
}
},
watch:{
date:{
handler(newVal,oldVal){
console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate());
}
}
},
created() {
this.getList();
this.getTeams();
},
methods:{
getTeams(){
listAllTeam().then(response =>{
this.teamList = response.data;
});
},
/** 查询节假日设置列表 */
getList() {
this.loading = true;
this.holidayList =[];
this.workdayList =[];
let that = this;
listCalholiday(this.queryParams).then(response => {
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(teamId){
this.loading = true;
var param = {
queryType: 'TEAM',
teamId: teamId
}
listCalendars(param).then(response =>{
this.calendarDayList = response.data;
});
},
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>