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

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

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;

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>
@ -87,7 +95,6 @@ export default {
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 =>{
@ -101,6 +108,9 @@ export default {
this.getList(); this.getList();
}, },
methods:{ methods:{
changeDate(val) {
this.date = val
},
/** 查询节假日设置列表 */ /** 查询节假日设置列表 */
getList() { getList() {
this.loading = true; this.loading = true;

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>
@ -56,6 +66,7 @@ export default {
dicts:['mes_calendar_type'], dicts:['mes_calendar_type'],
data(){ data(){
return { return {
form: {},
// //
loading: true, loading: true,
date: new Date(), date: new Date(),
@ -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;