|
|
@@ -1,13 +1,7 @@
|
|
|
<template>
|
|
|
<div class="app-container">
|
|
|
- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
|
|
|
- <el-form-item label="岗位编码" prop="code">
|
|
|
- <el-input v-model="queryParams.code" placeholder="请输入岗位编码" clearable @keyup.enter.native="handleQuery" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="岗位名称" prop="name">
|
|
|
- <el-input v-model="queryParams.name" placeholder="请输入岗位名称" clearable @keyup.enter.native="handleQuery" />
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="状态" prop="status">
|
|
|
+ <el-form :model="queryParams" ref="queryForm" size="small" label-position="left" :inline="true">
|
|
|
+ <el-form-item label="会议室" prop="status">
|
|
|
<el-select v-model="queryParams.status" placeholder="岗位状态" clearable>
|
|
|
<el-option v-for="dict in this.getDictDatas(DICT_TYPE.COMMON_STATUS)" :key="parseInt(dict.value)"
|
|
|
:label="dict.label" :value="parseInt(dict.value)" />
|
|
|
@@ -15,10 +9,17 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
|
|
|
- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
|
|
|
+ <!-- <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button> -->
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions" />
|
|
|
+ <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions">
|
|
|
+ <template v-slot:eventContent="arg">
|
|
|
+ <div style="width: 100%;font-size: 14px;">
|
|
|
+ <span>{{ arg.event.extendedProps.startTieme }} ~ {{ arg.event.extendedProps.endTieme }}</span>
|
|
|
+ <div>{{ arg.event.title }}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </FullCalendar>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -37,11 +38,8 @@ export default {
|
|
|
return {
|
|
|
// 查询参数
|
|
|
queryParams: {
|
|
|
- pageNo: 1,
|
|
|
- pageSize: 10,
|
|
|
- code: undefined,
|
|
|
- name: undefined,
|
|
|
- status: undefined
|
|
|
+ status: 1,
|
|
|
+ strDate: this.nowDate(),
|
|
|
},
|
|
|
calendarApi: null,
|
|
|
calendarOptions: {
|
|
|
@@ -49,6 +47,7 @@ export default {
|
|
|
initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
|
|
|
initialView: 'dayGridMonth', // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
|
|
|
locale: 'zh-cn', // 设置日历的语言，中文为 “zh-cn”
|
|
|
+ displayEventEnd: true,//所有视图显示结束时间
|
|
|
firstDay: '1', // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
|
|
|
weekNumberCalculation: 'ISO', // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
|
|
|
buttonText: { // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
|
|
|
@@ -62,20 +61,62 @@ export default {
|
|
|
center: 'title',
|
|
|
left: 'dayGridMonth,dayGridWeek,dayGridDay'
|
|
|
},
|
|
|
+ height: 'auto',
|
|
|
eventTimeFormat: { // 在每个事件上显示的时间的格式
|
|
|
hour: 'numeric',
|
|
|
minute: '2-digit',
|
|
|
hour12: false
|
|
|
},
|
|
|
- events: [ // 将在日历上显示的事件对象， events 可以是数组、json、函数。具体可以查看官方文档
|
|
|
+ events: [
|
|
|
+ {
|
|
|
+ state: '1',
|
|
|
+ title: '会议状态 : 未开始',
|
|
|
+ startTieme: '12:00:00',
|
|
|
+ endTieme: '15:00:00',
|
|
|
+ start: '2024-07-10',
|
|
|
+ end: '2024-07-10',
|
|
|
+ allDay: true, // 是否为全天事件
|
|
|
+ backgroundColor: '#f8ac59', // 该事件的背景颜色
|
|
|
+ borderColor: '#f8ac59', // 该事件的边框颜色
|
|
|
+ textColor: '#fff' // 该事件的文字颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: '2',
|
|
|
+ title: '会议状态 : 进行中',
|
|
|
+ startTieme: '12:00:00',
|
|
|
+ endTieme: '15:00:00',
|
|
|
+ start: '2024-07-10 12:00:00',
|
|
|
+ end: '2024-07-10 15:00:00',
|
|
|
+ allDay: true, // 是否为全天事件
|
|
|
+ backgroundColor: '#1ab394', // 该事件的背景颜色
|
|
|
+ borderColor: '#1ab394', // 该事件的边框颜色
|
|
|
+ textColor: '#fff' // 该事件的文字颜色
|
|
|
+ },
|
|
|
+ {
|
|
|
+ state: '3',
|
|
|
+ title: '会议状态 : 已结束',
|
|
|
+ startTieme: '12:00:00',
|
|
|
+ endTieme: '15:00:00',
|
|
|
+ start: '2024-07-17',
|
|
|
+ end: '2024-07-17',
|
|
|
+ allDay: true, // 是否为全天事件
|
|
|
+ backgroundColor: '#ed5565', // 该事件的背景颜色
|
|
|
+ borderColor: '#ed5565', // 该事件的边框颜色
|
|
|
+ textColor: '#fff' // 该事件的文字颜色
|
|
|
+ },
|
|
|
{
|
|
|
- title: '标题',
|
|
|
- start: '2024-07-17 12:00:00',
|
|
|
- end: '2024-07-17 15:00:00', // 这里要注意，end为可选参数，无end参数时该事件仅在当天展示
|
|
|
- backgroundColor: '#FDEBC9', // 该事件的背景颜色
|
|
|
- borderColor: '#FDEBC9', // 该事件的边框颜色
|
|
|
- textColor: '#F9AE26' // 该事件的文字颜色
|
|
|
+ state: '4',
|
|
|
+ title: '会议状态 : 已取消',
|
|
|
+ startTieme: '12:00:00',
|
|
|
+ endTieme: '15:00:00',
|
|
|
+ start: '2024-07-17',
|
|
|
+ end: '2024-07-17',
|
|
|
+ allDay: true, // 是否为全天事件
|
|
|
+ backgroundColor: '#ccc', // 该事件的背景颜色
|
|
|
+ borderColor: '#ccc', // 该事件的边框颜色
|
|
|
+ textColor: '#fff' // 该事件的文字颜色
|
|
|
},
|
|
|
+
|
|
|
],
|
|
|
customButtons: { // 定义可在headerToolbar / footerToolbar中使用的自定义按钮
|
|
|
today: {
|
|
|
@@ -90,8 +131,8 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
eventClick: this.handleDateClick, // 点击事件时，触发该回调
|
|
|
- eventMouseEnter: this.handleMouseEnter, // 鼠标悬停在事件上时，触发该回调
|
|
|
- eventMouseLeave: this.handleMouseLeave, // 鼠标移除时，触发该回调
|
|
|
+ // eventMouseEnter: this.handleMouseEnter, // 鼠标悬停在事件上时，触发该回调
|
|
|
+ // eventMouseLeave: this.handleMouseLeave, // 鼠标移除时，触发该回调
|
|
|
dateClick: this.handleDateClick // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
|
|
|
}
|
|
|
}
|
|
|
@@ -102,6 +143,43 @@ export default {
|
|
|
this.calendarApi = this.$refs.fullCalendar.getApi()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 获取当前年月
|
|
|
+ nowDate() {
|
|
|
+ var d = new Date();
|
|
|
+ var month = '';
|
|
|
+ if (d.getMonth() + 1 < 10) {
|
|
|
+ month = '0' + (d.getMonth() + 1)
|
|
|
+ } else {
|
|
|
+ month = d.getMonth() + 1
|
|
|
+ }
|
|
|
+
|
|
|
+ var str = d.getFullYear() + '-' + month;
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ getEvent() {
|
|
|
+ //这里用的mock
|
|
|
+ this.$http.post('/schedule/query').then(res => {
|
|
|
+ const event = res.result.data // 拿到返回的数据
|
|
|
+ for (var i = 0; i < event.length; i++) {
|
|
|
+ this.calendarOptions.events.push(event[i]) // 使用push方法将事件逐一添加，
|
|
|
+ }
|
|
|
+ console.log(this.calendarOptions.events)
|
|
|
+ this.calendarApi.refetchEvents()
|
|
|
+ // 重新抓取所有的日程事件源上的日程事件并渲染它们。
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 格式化日期
|
|
|
+ formatDate(dateStr) {
|
|
|
+ // 假设 dateStr 是 "2024年8月" 这样的格式
|
|
|
+ const parts = dateStr.match(/(\d+)年(\d+)月/); // 使用正则表达式提取年份和月份
|
|
|
+ if (parts) {
|
|
|
+ const year = parts[1];
|
|
|
+ const month = parts[2].padStart(2, '0'); // 确保月份是两位数
|
|
|
+ return `${year}-${month}`; // 返回格式化后的日期字符串
|
|
|
+ }
|
|
|
+ return null; // 如果格式不匹配，返回null
|
|
|
+ },
|
|
|
+
|
|
|
/** 搜索按钮操作 */
|
|
|
handleQuery() {
|
|
|
this.queryParams.pageNo = 1;
|
|
|
@@ -123,20 +201,26 @@ export default {
|
|
|
console.log(mouseEnterInfo)
|
|
|
},
|
|
|
todayClick(mouseEvent, htmlElement) {
|
|
|
- calendarApi.today() // 将日历移动到当前日期。
|
|
|
- calendarApi.getDate() // 返回日期的日历的当前日期
|
|
|
+ this.calendarApi.today() // 将日历移动到当前日期。
|
|
|
+ this.calendarApi.getDate() // 返回日期的日历的当前日期
|
|
|
+ const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
+ console.log(formattedDate); // 输出: 2024-08
|
|
|
},
|
|
|
nextClick(mouseEvent, htmlElement) {
|
|
|
- calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
|
|
|
+ this.calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
|
|
|
// 如果dayGridMonth查看日历，则将日历向前移动一个月。
|
|
|
// 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
|
|
|
// 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
|
|
|
+ const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
+ console.log(formattedDate);
|
|
|
},
|
|
|
prevClick(mouseEvent, htmlElement) {
|
|
|
- calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
|
|
|
+ this.calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
|
|
|
// 如果dayGridMonth查看日历，则将日历后移一个月。
|
|
|
// 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
|
|
|
// 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
|
|
|
+ const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
|
|
|
+ console.log(formattedDate); // 输出: 2024-08
|
|
|
}
|
|
|
}
|
|
|
}
|
