修改

src/views/login.vue

@@ -123,7 +123,27 @@ export default {
       LoginRules: {
         username: [
           {required: true, trigger: "blur", message: "手机号不能为空"},
-          
+          // {
+          //   validator: (rule, value, callback) => {
+          //     if (/^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(value) === false) {
+          //       callback(new Error("手机号格式错误"));
+          //     } else {
+          //       removeTenantId()
+          //       getTenantIdByName(value).then(res => {
+          //         const tenantId = res.data;
+          //         if (tenantId && tenantId >= 0) {
+          //           setTenantId(tenantId)
+          //           callback();
+          //         } else {
+          //           callback('该手机号未创建账号,请重新输入');
+          //         }
+          //       });
+          //     }
+           
+          //   },
+          //   trigger: 'blur'
+          // }
+
         ],
         password: [
           {required: true, trigger: "blur", message: "密码不能为空"}

src/views/meeting/reserve/index.vue

@@ -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
     }
   }
 }