mes/mes-lqqt-ui
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix：排班日历中增加下拉框，以便快速定位到某个月

Browse Source
This commit is contained in:
zhangxuanming 2024-12-27 16:00:54 +08:00
parent 8028e4a32f
commit 0873930f45
3 changed files with 83 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/mes/cal/calendar/calendarType.vue
View File

@ -11,6 +11,16 @@
</el-radio-group> </el-radio-group>
</el-aside> </el-aside>
<el-main> <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"> <el-calendar v-loading="loading" v-model="date">
<template slot="dateCell" slot-scope="{date, data }"> <template slot="dateCell" slot-scope="{date, data }">
<div> <div>
@ -50,11 +60,14 @@
import { listCalholiday } from "@/api/mes/cal/calholiday"; import { listCalholiday } from "@/api/mes/cal/calholiday";
import { listCalendars } from "@/api/mes/cal/calendar"; import { listCalendars } from "@/api/mes/cal/calendar";
import calendar from '@/utils/calendar'; import calendar from '@/utils/calendar';
import UserSingleSelect from "@/components/userSelect/single.vue";
export default { export default {
name: 'CalendarTypeView', name: 'CalendarTypeView',
components: {UserSingleSelect},
dicts:['mes_calendar_type'], dicts:['mes_calendar_type'],
data(){ data(){
return { return {
form: {},
// 遮罩层 // 遮罩层
loading: true, loading: true,
date: new Date(), date: new Date(),
@ -92,6 +105,9 @@ export default {
this.getList(); this.getList();
}, },
methods:{ methods:{
changeDate(val) {
this.date = val
},
/** 查询节假日设置列表 */ /** 查询节假日设置列表 */
getList() { getList() {
this.loading = true; this.loading = true;

54
src/views/mes/cal/calendar/person.vue
View File

@ -14,6 +14,14 @@
</el-input> </el-input>
<UserSingleSelect ref="userSelect" @onSelected="onUserSelected"></UserSingleSelect> <UserSingleSelect ref="userSelect" @onSelected="onUserSelected"></UserSingleSelect>
</el-form-item> </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-form>
</el-header> </el-header>
<el-main> <el-main>
@ -22,7 +30,7 @@
<div> <div>
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<div class="solar"> <div class="solar">
{{ data.day.split('-')[2] }} {{ data.day.split('-')[2] }}
</div> </div>
</el-col> </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_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 ==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> <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-col>
</el-row> </el-row>
</div> </div>
</template> </template>
</el-calendar> </el-calendar>
</el-main> </el-main>
@ -58,8 +66,8 @@ import { listCalendars } from "@/api/mes/cal/calendar";
import UserSingleSelect from "@/components/userSelect/single.vue" import UserSingleSelect from "@/components/userSelect/single.vue"
import calendar from '@/utils/calendar'; import calendar from '@/utils/calendar';
export default { export default {
name: 'UserView', name: 'UserView',
dicts:['mes_calendar_type'], dicts:['mes_calendar_type'],
components :{UserSingleSelect}, components :{UserSingleSelect},
data(){ data(){
return { return {
@ -81,15 +89,14 @@ export default {
holidayType: null, holidayType: null,
startTime: null, startTime: null,
endTime: null, endTime: null,
}, },
} }
}, },
watch:{ watch:{
date:{ date:{
handler(newVal,oldVal){ handler(newVal,oldVal){
console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate()); this.teamShiftQueryParams.date = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
this.teamShiftQueryParams.date = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate(); this.loading = true;
this.loading = true;
listCalendars(this.teamShiftQueryParams).then(response =>{ listCalendars(this.teamShiftQueryParams).then(response =>{
this.calendarDayList = response.data; this.calendarDayList = response.data;
this.loading = false; this.loading = false;
@ -101,12 +108,15 @@ export default {
this.getList(); this.getList();
}, },
methods:{ methods:{
changeDate(val) {
this.date = val
},
/** 查询节假日设置列表 */ /** 查询节假日设置列表 */
getList() { getList() {
this.loading = true; this.loading = true;
this.holidayList =[]; this.holidayList =[];
this.workdayList =[]; this.workdayList =[];
let that = this; let that = this;
listCalholiday(this.queryParams).then(response => { listCalholiday(this.queryParams).then(response => {
if(response.data !=null){ if(response.data !=null){
response.data.forEach(theDay => { response.data.forEach(theDay => {
@ -115,7 +125,7 @@ export default {
}else{ }else{
that.workdayList.push(theDay.theDay); that.workdayList.push(theDay.theDay);
} }
}); });
this.loading = false; this.loading = false;
} }
}); });
@ -125,9 +135,9 @@ export default {
this.$refs.userSelect.showFlag = true; this.$refs.userSelect.showFlag = true;
}, },
//人员选择返回 //人员选择返回
onUserSelected(row){ onUserSelected(row){
this.form.nickName = row.nickName; this.form.nickName = row.nickName;
this.loading = true; this.loading = true;
this.teamShiftQueryParams.userId = row.userId; this.teamShiftQueryParams.userId = row.userId;
this.teamShiftQueryParams.date = this.date; this.teamShiftQueryParams.date = this.date;
listCalendars(this.teamShiftQueryParams).then(response =>{ listCalendars(this.teamShiftQueryParams).then(response =>{
@ -138,20 +148,20 @@ export default {
isFestival(slotDate, slotData) { isFestival(slotDate, slotData) {
let solarDayArr = slotData.day.split('-'); let solarDayArr = slotData.day.split('-');
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]) let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
// 公历节日\农历节日\农历节气 // 公历节日\农历节日\农历节气
let festAndTerm = []; let festAndTerm = [];
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival) festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival) festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term) festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
festAndTerm = festAndTerm.join('') festAndTerm = festAndTerm.join('')
return festAndTerm != '' return festAndTerm != ''
}, },
solarDate2lunar(solarDate) { solarDate2lunar(solarDate) {
var solar = solarDate.split('-') 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 lunarMD = lunar.IMonthCn + lunar.IDayCn;
// 公历节日\农历节日\农历节气 // 公历节日\农历节日\农历节气
let festAndTerm = []; let festAndTerm = [];
@ -159,9 +169,9 @@ export default {
festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival) festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term) festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
festAndTerm = festAndTerm.join('') festAndTerm = festAndTerm.join('')
return festAndTerm == '' ? lunarMD : festAndTerm return festAndTerm == '' ? lunarMD : festAndTerm
} }
} }
} }
@ -218,4 +228,4 @@ export default {
.el-calendar-table .holiday { .el-calendar-table .holiday {
background-color: #88E325; background-color: #88E325;
} }
</style> </style>

56
src/views/mes/cal/calendar/team.vue
View File

@ -2,21 +2,31 @@
<div class="app-container"> <div class="app-container">
<el-container> <el-container>
<el-aside width="150px"> <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 <el-radio-button
v-for="item in teamList" v-for="item in teamList"
:key="item.teamId" :key="item.teamId"
:label="item.teamId" :label="item.teamId"
>{{item.teamName}}</el-radio-button> >{{item.teamName}}</el-radio-button>
</el-radio-group> </el-radio-group>
</el-aside> </el-aside>
<el-main> <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"> <el-calendar v-loading="loading" v-model="date">
<template slot="dateCell" slot-scope="{date, data }"> <template slot="dateCell" slot-scope="{date, data }">
<div> <div>
<el-row> <el-row>
<el-col :span="6"> <el-col :span="6">
<div class="solar"> <div class="solar">
{{ data.day.split('-')[2] }} {{ data.day.split('-')[2] }}
</div> </div>
</el-col> </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_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 ==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> <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-col>
</el-row> </el-row>
</div> </div>
</template> </template>
</el-calendar> </el-calendar>
</el-main> </el-main>
@ -52,10 +62,11 @@ import { listCalholiday } from "@/api/mes/cal/calholiday";
import { listCalendars } from "@/api/mes/cal/calendar"; import { listCalendars } from "@/api/mes/cal/calendar";
import calendar from '@/utils/calendar'; import calendar from '@/utils/calendar';
export default { export default {
name: 'TeamView', name: 'TeamView',
dicts:['mes_calendar_type'], dicts:['mes_calendar_type'],
data(){ data(){
return { return {
form: {},
// 遮罩层 // 遮罩层
loading: true, loading: true,
date: new Date(), date: new Date(),
@ -73,15 +84,15 @@ export default {
holidayType: null, holidayType: null,
startTime: null, startTime: null,
endTime: null, endTime: null,
}, },
} }
}, },
watch:{ watch:{
date:{ date:{
handler(newVal,oldVal){ handler(newVal,oldVal){
console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate()); console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate());
this.teamShiftQueryParams.date = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate(); this.teamShiftQueryParams.date = newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate();
this.loading = true; this.loading = true;
listCalendars(this.teamShiftQueryParams).then(response =>{ listCalendars(this.teamShiftQueryParams).then(response =>{
this.calendarDayList = response.data; this.calendarDayList = response.data;
this.loading = false; this.loading = false;
@ -94,6 +105,9 @@ export default {
this.getTeams(); this.getTeams();
}, },
methods:{ methods:{
changeDate(val) {
this.date = val
},
getTeams(){ getTeams(){
listAllTeam().then(response =>{ listAllTeam().then(response =>{
this.teamList = response.data; this.teamList = response.data;
@ -101,10 +115,10 @@ export default {
}, },
/** 查询节假日设置列表 */ /** 查询节假日设置列表 */
getList() { getList() {
this.loading = true; this.loading = true;
this.holidayList =[]; this.holidayList =[];
this.workdayList =[]; this.workdayList =[];
let that = this; let that = this;
listCalholiday(this.queryParams).then(response => { listCalholiday(this.queryParams).then(response => {
if(response.data !=null){ if(response.data !=null){
response.data.forEach(theDay => { response.data.forEach(theDay => {
@ -113,14 +127,14 @@ export default {
}else{ }else{
that.workdayList.push(theDay.theDay); that.workdayList.push(theDay.theDay);
} }
}); });
this.loading = false; this.loading = false;
} }
}); });
}, },
//点击班组类型 //点击班组类型
onSelected(teamId){ onSelected(teamId){
this.loading = true; this.loading = true;
this.teamShiftQueryParams.teamId = teamId; this.teamShiftQueryParams.teamId = teamId;
this.teamShiftQueryParams.date = this.date; this.teamShiftQueryParams.date = this.date;
listCalendars(this.teamShiftQueryParams).then(response =>{ listCalendars(this.teamShiftQueryParams).then(response =>{
@ -131,20 +145,20 @@ export default {
isFestival(slotDate, slotData) { isFestival(slotDate, slotData) {
let solarDayArr = slotData.day.split('-'); let solarDayArr = slotData.day.split('-');
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2]) let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
// 公历节日\农历节日\农历节气 // 公历节日\农历节日\农历节气
let festAndTerm = []; let festAndTerm = [];
festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival) festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival) festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term) festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
festAndTerm = festAndTerm.join('') festAndTerm = festAndTerm.join('')
return festAndTerm != '' return festAndTerm != ''
}, },
solarDate2lunar(solarDate) { solarDate2lunar(solarDate) {
var solar = solarDate.split('-') 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 lunarMD = lunar.IMonthCn + lunar.IDayCn;
// 公历节日\农历节日\农历节气 // 公历节日\农历节日\农历节气
let festAndTerm = []; let festAndTerm = [];
@ -152,9 +166,9 @@ export default {
festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival) festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term) festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
festAndTerm = festAndTerm.join('') festAndTerm = festAndTerm.join('')
return festAndTerm == '' ? lunarMD : festAndTerm return festAndTerm == '' ? lunarMD : festAndTerm
} }
} }
} }
@ -211,4 +225,4 @@ export default {
.el-calendar-table .holiday { .el-calendar-table .holiday {
background-color: #88E325; background-color: #88E325;
} }
</style> </style>