fix：排班日历中增加下拉框，以便快速定位到某个月
This commit is contained in:
zhangxuanming
parent
8028e4a32f
commit
0873930f45
@ -11,6 +11,16 @@
|
||||
</el-radio-group>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<el-form :model="form" size="small" :inline="true" label-width="100px">
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="date"
|
||||
@change="changeDate"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-calendar v-loading="loading" v-model="date">
|
||||
<template slot="dateCell" slot-scope="{date, data }">
|
||||
<div>
|
||||
@ -50,11 +60,14 @@
|
||||
import { listCalholiday } from "@/api/mes/cal/calholiday";
|
||||
import { listCalendars } from "@/api/mes/cal/calendar";
|
||||
import calendar from '@/utils/calendar';
|
||||
import UserSingleSelect from "@/components/userSelect/single.vue";
|
||||
export default {
|
||||
name: 'CalendarTypeView',
|
||||
components: {UserSingleSelect},
|
||||
dicts:['mes_calendar_type'],
|
||||
data(){
|
||||
return {
|
||||
form: {},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
date: new Date(),
|
||||
@ -92,6 +105,9 @@ export default {
|
||||
this.getList();
|
||||
},
|
||||
methods:{
|
||||
changeDate(val) {
|
||||
this.date = val
|
||||
},
|
||||
/** 查询节假日设置列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
|
||||
@ -14,6 +14,14 @@
|
||||
</el-input>
|
||||
<UserSingleSelect ref="userSelect" @onSelected="onUserSelected"></UserSingleSelect>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="date"
|
||||
@change="changeDate"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-header>
|
||||
<el-main>
|
||||
@ -22,7 +30,7 @@
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="solar">
|
||||
<div class="solar">
|
||||
{{ data.day.split('-')[2] }}
|
||||
</div>
|
||||
</el-col>
|
||||
@ -41,10 +49,10 @@
|
||||
<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>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</el-main>
|
||||
@ -58,8 +66,8 @@ import { listCalendars } from "@/api/mes/cal/calendar";
|
||||
import UserSingleSelect from "@/components/userSelect/single.vue"
|
||||
import calendar from '@/utils/calendar';
|
||||
export default {
|
||||
name: 'UserView',
|
||||
dicts:['mes_calendar_type'],
|
||||
name: 'UserView',
|
||||
dicts:['mes_calendar_type'],
|
||||
components :{UserSingleSelect},
|
||||
data(){
|
||||
return {
|
||||
@ -81,15 +89,14 @@ export default {
|
||||
holidayType: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
date:{
|
||||
handler(newVal,oldVal){
|
||||
console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate());
|
||||
this.teamShiftQueryParams.date = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
|
||||
this.loading = true;
|
||||
this.teamShiftQueryParams.date = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
|
||||
this.loading = true;
|
||||
listCalendars(this.teamShiftQueryParams).then(response =>{
|
||||
this.calendarDayList = response.data;
|
||||
this.loading = false;
|
||||
@ -101,12 +108,15 @@ export default {
|
||||
this.getList();
|
||||
},
|
||||
methods:{
|
||||
changeDate(val) {
|
||||
this.date = val
|
||||
},
|
||||
/** 查询节假日设置列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.loading = true;
|
||||
this.holidayList =[];
|
||||
this.workdayList =[];
|
||||
let that = this;
|
||||
let that = this;
|
||||
listCalholiday(this.queryParams).then(response => {
|
||||
if(response.data !=null){
|
||||
response.data.forEach(theDay => {
|
||||
@ -115,7 +125,7 @@ export default {
|
||||
}else{
|
||||
that.workdayList.push(theDay.theDay);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
@ -125,9 +135,9 @@ export default {
|
||||
this.$refs.userSelect.showFlag = true;
|
||||
},
|
||||
//人员选择返回
|
||||
onUserSelected(row){
|
||||
onUserSelected(row){
|
||||
this.form.nickName = row.nickName;
|
||||
this.loading = true;
|
||||
this.loading = true;
|
||||
this.teamShiftQueryParams.userId = row.userId;
|
||||
this.teamShiftQueryParams.date = this.date;
|
||||
listCalendars(this.teamShiftQueryParams).then(response =>{
|
||||
@ -138,20 +148,20 @@ export default {
|
||||
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])
|
||||
|
||||
var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])
|
||||
|
||||
let lunarMD = lunar.IMonthCn + lunar.IDayCn;
|
||||
// 公历节日\农历节日\农历节气
|
||||
let festAndTerm = [];
|
||||
@ -159,9 +169,9 @@ export default {
|
||||
festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
|
||||
festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
|
||||
festAndTerm = festAndTerm.join('')
|
||||
|
||||
|
||||
return festAndTerm == '' ? lunarMD : festAndTerm
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -218,4 +228,4 @@ export default {
|
||||
.el-calendar-table .holiday {
|
||||
background-color: #88E325;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@ -2,21 +2,31 @@
|
||||
<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-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>
|
||||
>{{item.teamName}}</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-aside>
|
||||
<el-main>
|
||||
<el-form :model="form" size="small" :inline="true" label-width="100px">
|
||||
<el-form-item label="日期" prop="date">
|
||||
<el-date-picker
|
||||
v-model="form.date"
|
||||
type="date"
|
||||
@change="changeDate"
|
||||
placeholder="选择日期">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-calendar v-loading="loading" v-model="date">
|
||||
<template slot="dateCell" slot-scope="{date, data }">
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="6">
|
||||
<div class="solar">
|
||||
<div class="solar">
|
||||
{{ data.day.split('-')[2] }}
|
||||
</div>
|
||||
</el-col>
|
||||
@ -35,10 +45,10 @@
|
||||
<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>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
</el-main>
|
||||
@ -52,10 +62,11 @@ import { listCalholiday } from "@/api/mes/cal/calholiday";
|
||||
import { listCalendars } from "@/api/mes/cal/calendar";
|
||||
import calendar from '@/utils/calendar';
|
||||
export default {
|
||||
name: 'TeamView',
|
||||
dicts:['mes_calendar_type'],
|
||||
name: 'TeamView',
|
||||
dicts:['mes_calendar_type'],
|
||||
data(){
|
||||
return {
|
||||
form: {},
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
date: new Date(),
|
||||
@ -73,15 +84,15 @@ export default {
|
||||
holidayType: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
date:{
|
||||
handler(newVal,oldVal){
|
||||
console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate());
|
||||
this.teamShiftQueryParams.date = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
|
||||
this.loading = true;
|
||||
this.teamShiftQueryParams.date = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
|
||||
this.loading = true;
|
||||
listCalendars(this.teamShiftQueryParams).then(response =>{
|
||||
this.calendarDayList = response.data;
|
||||
this.loading = false;
|
||||
@ -94,6 +105,9 @@ export default {
|
||||
this.getTeams();
|
||||
},
|
||||
methods:{
|
||||
changeDate(val) {
|
||||
this.date = val
|
||||
},
|
||||
getTeams(){
|
||||
listAllTeam().then(response =>{
|
||||
this.teamList = response.data;
|
||||
@ -101,10 +115,10 @@ export default {
|
||||
},
|
||||
/** 查询节假日设置列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.loading = true;
|
||||
this.holidayList =[];
|
||||
this.workdayList =[];
|
||||
let that = this;
|
||||
let that = this;
|
||||
listCalholiday(this.queryParams).then(response => {
|
||||
if(response.data !=null){
|
||||
response.data.forEach(theDay => {
|
||||
@ -113,14 +127,14 @@ export default {
|
||||
}else{
|
||||
that.workdayList.push(theDay.theDay);
|
||||
}
|
||||
});
|
||||
});
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//点击班组类型
|
||||
onSelected(teamId){
|
||||
this.loading = true;
|
||||
this.loading = true;
|
||||
this.teamShiftQueryParams.teamId = teamId;
|
||||
this.teamShiftQueryParams.date = this.date;
|
||||
listCalendars(this.teamShiftQueryParams).then(response =>{
|
||||
@ -131,20 +145,20 @@ export default {
|
||||
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])
|
||||
|
||||
var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])
|
||||
|
||||
let lunarMD = lunar.IMonthCn + lunar.IDayCn;
|
||||
// 公历节日\农历节日\农历节气
|
||||
let festAndTerm = [];
|
||||
@ -152,9 +166,9 @@ export default {
|
||||
festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
|
||||
festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
|
||||
festAndTerm = festAndTerm.join('')
|
||||
|
||||
|
||||
return festAndTerm == '' ? lunarMD : festAndTerm
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -211,4 +225,4 @@ export default {
|
||||
.el-calendar-table .holiday {
|
||||
background-color: #88E325;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user