修改

.env.dev

@@ -6,9 +6,9 @@ VUE_APP_TITLE = 爱思系统
 
 # 爱思系统/开发环境
 # 赵培清
-# VUE_APP_BASE_API = 'http://192.168.100.213:48080'
+VUE_APP_BASE_API = 'http://192.168.100.213:48080'
 # 王东坡
-VUE_APP_BASE_API = 'http://192.168.100.64:48081'
+# VUE_APP_BASE_API = 'http://192.168.100.64:48081'
 # 测试
 # VUE_APP_BASE_API = 'http://47.103.79.143:48081'
 

src/api/personnel/attendance/workday/index.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+
+// 查询工作日
+export function getWorkDay(query) {
+  return request({
+    url: '/personnel/attendance/workday-setting/get-workdays',
+    method: 'get',
+    params: query
+  })
+}
+// 设置工作日
+export function setWorkDay(data) {
+  return request({
+    url: '/personnel/attendance/workday-setting/update',
+    method: 'post',
+    data: data
+  })
+}

src/api/system/user.js

@@ -4,8 +4,8 @@ import { praseStrEmpty } from "@/utils/ruoyi";
 // 查询用户列表
 export function listUser(query) {
   return request({
-    url: '/system/user/page',
-    // url: '/personnel/employee/page',
+    // url: '/system/user/page',
+    url: '/personnel/employee/page',
     method: 'get',
     params: query
   })

src/views/login.vue

@@ -210,7 +210,7 @@ export default {
             removePassword()
             removeRememberMe()
           }
-          setTenantId(1)
+          // setTenantId(1)
           this.$store.dispatch(this.loginForm.loginType === "sms" ? "SmsLogin" : "Login", this.loginForm).then(() => {
             this.$router.push({path: "/"}).catch(() => {
             });

src/views/meeting/reserve/index.vue

@@ -8,7 +8,7 @@
       </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">
@@ -173,7 +173,6 @@ export default {
 
     /** 搜索按钮操作 */
     handleQuery() {
-      this.queryParams.pageNo = 1;
       this.getList();
     },
     /** 重置按钮操作 */
@@ -195,7 +194,6 @@ export default {
       this.calendarApi.today() // 将日历移动到当前日期。
       this.calendarApi.getDate() // 返回日期的日历的当前日期
       const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
-      console.log(formattedDate); // 输出: 2024-08
       this.queryParams.month = formattedDate;
       this.getList();
     },
@@ -205,7 +203,6 @@ export default {
       // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
       // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
       const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
-      console.log(formattedDate);
       this.queryParams.month = formattedDate;
       this.getList();
     },
@@ -215,7 +212,6 @@ export default {
       // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
       // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
       const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
-      console.log(formattedDate); // 输出: 2024-08
       this.queryParams.month = formattedDate;
       this.getList();
     }

src/views/personnel/attendance/workday/index copy.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button type="primary" icon="el-icon-setting" size="mini" @click="handleWorkDay">设置工作日</el-button>
+      </el-col>
+    </el-row>
+    <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions">
+    </FullCalendar>
+  </div>
+</template>
+
+
+<script>
+import { reserveInfo } from "@/api/meeting";
+import FullCalendar from '@fullcalendar/vue'
+import dayGridPlugin from '@fullcalendar/daygrid'
+import interactionPlugin from '@fullcalendar/interaction'
+import timeGridPlugin from '@fullcalendar/timegrid'
+import { get } from "sortablejs";
+
+export default {
+  components: {
+    FullCalendar  // 像使用自定义组件一样使用
+  },
+  data() {
+    return {
+      workDateList:[],
+      dataList:[
+        {
+          "id": 24910,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-02",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24911,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-05",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24912,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-06",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24913,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-07",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24914,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-08",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24915,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-09",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24916,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-12",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24917,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-13",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24918,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-14",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24919,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-15",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24920,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-16",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24921,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-19",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24922,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-20",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24923,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-21",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24924,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-22",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24925,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-23",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24926,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-26",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24927,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-27",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24928,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-28",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24929,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-29",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        },
+        {
+          "id": 24930,
+          "workMonth": "2024-08",
+          "workDate": "2024-08-30",
+          "workDateCount": null,
+          "createTime": null,
+          "createUser": null
+        }
+      ],
+      // 查询参数
+      queryParams: {
+        status: 1,
+        month: this.nowDate(),
+      },
+      calendarApi: null,
+      calendarOptions: {
+        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin], // 需要用哪个插件引入后放到这个数组里
+        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注入。所有特殊字符将被转义。
+          today: '今天',
+          month: '月',
+          week: '周',
+          day: '天'
+        },
+        headerToolbar: { // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
+          right: 'prev,next today',
+          // center: 'title',
+          // left: 'dayGridMonth,dayGridWeek,dayGridDay'
+        },
+        // height: 'auto',
+        eventTimeFormat: { // 在每个事件上显示的时间的格式
+          hour: 'numeric',
+          minute: '2-digit',
+          hour12: false
+        },
+        events: [],
+        customButtons: { // 定义可在headerToolbar / footerToolbar中使用的自定义按钮
+          today: {
+            text: '今天', // 按钮的展示文本
+            click: this.todayClick // 点击按钮触发的事件，这里要注意的是当按钮绑定了事件之后该按钮原本自带的事件将会失效
+          },
+          next: {
+            click: this.nextClick
+          },
+          prev: {
+            click: this.prevClick
+          }
+        },
+        dayCellClassNames: this.eventClassNames,
+        dayCellContent: this.eventContent,
+        eventClick: this.handleDateClick, // 点击事件时，触发该回调
+        dateClick: this.handleDateClick // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
+      }
+    }
+  },
+  mounted() {
+    // 这里有两点要注意，想要调用插件的方法，要在组件上设置ref
+    // 并且在组件未加载的时候this.$refs中是没有fullCalendar的，所以未加载的时候调用方法会报错
+    this.calendarApi = this.$refs.fullCalendar.getApi()
+  },
+  created() {
+    this.getEvents();
+  },
+  methods: {
+    getStrArray(){
+      let strArray = [];
+      this.workDateList.forEach(item => {
+        strArray.push(item.workDate) 
+      })
+      return strArray;
+    },
+    eventClassNames(arg) {
+      let thisDate = this.formatDate1(arg.date)
+      let index = this.workDateList.indexOf(thisDate);
+      let workMonth = this.queryParams.month;
+      if(thisDate.substring(0,7)==workMonth){
+        if (index > -1) {
+          return ['selectDayColor']
+        }else{
+          return ['noselectDayColor']
+        }
+      }
+      
+    },
+    eventContent(arg) {
+      let thisDate = this.formatDate1(arg.date)
+      var index = this.workDateList.indexOf(thisDate);
+      let workMonth = this.queryParams.month;
+      if(thisDate.substring(0,7)==workMonth){
+        if (index > -1) {
+        return { html: `<span style="position: absolute;width: 40px;right: 80px;">工作日</span><span>${arg.dayNumberText.replace('日', '')}</span>` }
+      }else{
+        return { html: `<span style="position: absolute;width: 40px;right: 80px;">休息日</span><span>${arg.dayNumberText.replace('日', '')}</span>` }
+      }
+      }
+      
+    },
+    //设置工作日
+    handleWorkDay() {
+
+    },
+    // 获取当前年月
+    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;
+    },
+    getEvents() {
+      this.calendarOptions.events = [];
+      // reserveInfo(this.queryParams).then(response => {
+        // const dataList = response.data // 拿到返回的数据
+        const dataList = this.dataList;
+        let workDateList = [];
+        dataList.forEach(item => {
+          workDateList.push(item.workDate) 
+        })
+        this.workDateList = workDateList;
+      // });
+    },
+    formatDate1(cellValue) {
+      if (cellValue == null || cellValue === "") return "";
+      const date = new Date(cellValue)
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
+      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
+      return year + '-' + month + '-' + day
+    },
+    // 格式化日期
+    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;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    handleDateClick(dateClickInfo) {
+      console.log(dateClickInfo)
+      let thisDate = dateClickInfo.dateStr;
+      let index = this.workDateList.indexOf(thisDate);
+      let workMonth = this.queryParams.month;
+      if(thisDate.substring(0,7)==workMonth){
+        if (index > -1) {
+          this.workDateList.splice(index, 1);
+        }else{
+          this.workDateList.push(thisDate);
+        }
+      }
+      this.calendarApi.refetchEvents();
+      console.log(this.calendarApi);
+
+    },
+    todayClick(mouseEvent, htmlElement) {
+      this.calendarApi.today() // 将日历移动到当前日期。
+      this.calendarApi.getDate() // 返回日期的日历的当前日期
+      const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
+      console.log(formattedDate); // 输出: 2024-08
+    },
+    nextClick(mouseEvent, htmlElement) {
+      this.calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
+      // 如果dayGridMonth查看日历，则将日历向前移动一个月。
+      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
+      // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
+      const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
+      console.log(formattedDate);
+    },
+    prevClick(mouseEvent, htmlElement) {
+      this.calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
+      // 如果dayGridMonth查看日历，则将日历后移一个月。
+      // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
+      // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
+      const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
+      console.log(formattedDate); // 输出: 2024-08
+    }
+  }
+}
+</script>
+<style>
+.selectDayColor {
+  background: #c6e0b4;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.noselectDayColor {
+  background: #bdd7ee;
+  text-align: center;
+  vertical-align: middle;
+
+}
+</style>

src/views/personnel/attendance/workday/index.vue

@@ -6,18 +6,22 @@
       </el-col>
     </el-row>
     <FullCalendar class="fullCalendar" ref="fullCalendar" :options="calendarOptions">
+      <template v-slot:eventContent="arg">
+        <div style="width: 100%;font-size: 18px;">
+          <div style="text-align: center;">{{ arg.event.title }}</div>
+        </div>
+      </template>
     </FullCalendar>
   </div>
 </template>
 
 
 <script>
-import { reserveInfo } from "@/api/meeting";
+import { getWorkDay,setWorkDay } from "@/api/reserveMeeting";
 import FullCalendar from '@fullcalendar/vue'
 import dayGridPlugin from '@fullcalendar/daygrid'
 import interactionPlugin from '@fullcalendar/interaction'
 import timeGridPlugin from '@fullcalendar/timegrid'
-import { get } from "sortablejs";
 
 export default {
   components: {
@@ -25,7 +29,8 @@ export default {
   },
   data() {
     return {
-      workDateList:[
+      workDateList:[],
+      dataList:[
         {
           "id": 24910,
           "workMonth": "2024-08",
@@ -197,8 +202,8 @@ export default {
       ],
       // 查询参数
       queryParams: {
-        status: 1,
-        strDate: this.nowDate(),
+        roomId: 2,
+        month: this.nowDate(),
       },
       calendarApi: null,
       calendarOptions: {
@@ -239,8 +244,6 @@ export default {
             click: this.prevClick
           }
         },
-        dayCellClassNames: this.eventClassNames,
-        dayCellContent: this.eventContent,
         eventClick: this.handleDateClick, // 点击事件时，触发该回调
         dateClick: this.handleDateClick // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
       }
@@ -252,39 +255,26 @@ export default {
     this.calendarApi = this.$refs.fullCalendar.getApi()
   },
   created() {
-    // this.getEvents();
+    this.getList();
   },
   methods: {
-    getStrArray(){
+    getWorkDayList(){
       let strArray = [];
-      this.workDateList.forEach(item => {
-        strArray.push(item.workDate) 
+      this.calendarOptions.events.forEach(item => {
+        strArray.push(item.start) 
       })
       return strArray;
     },
-    eventClassNames(arg) {
-      let thisDate = this.formatDate1(arg.date)
-      let strArray = this.getStrArray();
-      var index = strArray.indexOf(thisDate);
-      if (index > -1) {
-        return ['selectDayColor']
-      }else{
-        return ['noselectDayColor']
-      }
-    },
-    eventContent(arg) {
-      let thisDate = this.formatDate1(arg.date)
-      let strArray = this.getStrArray();
-      var index = strArray.indexOf(thisDate);
-      if (index > -1) {
-        return { html: `<span style="position: absolute;width: 40px;right: 80px;">工作日</span><span>${arg.dayNumberText.replace('日', '')}</span>` }
-      }else{
-        return { html: `<span style="position: absolute;width: 40px;right: 80px;">休息日</span><span>${arg.dayNumberText.replace('日', '')}</span>` }
-      }
-    },
     //设置工作日
     handleWorkDay() {
-
+      this.$modal.confirm('是否设置该月工作日?').then(function() {
+          return setWorkDay(this.getWorkDayList());
+        }).then(() => {
+          this.getList();
+          this.$modal.msgSuccess("设置成功");
+      }).catch(() => {
+        this.$modal.msgError("设置失败");
+      });
     },
     // 获取当前年月
     nowDate() {
@@ -299,16 +289,24 @@ export default {
       var str = d.getFullYear() + '-' + month;
       return str;
     },
-    getEvents() {
-      reserveInfo(this.queryParams).then(response => {
-        const event = response.data // 拿到返回的数据
-        for (var i = 0; i < event.length; i++) {
-          this.calendarOptions.events.push(event[i]) // 使用push方法将事件逐一添加，
-        }
+    getList() {
+        this.calendarOptions.events = [];
+      // getWorkDay(this.queryParams).then(response => {
+        const event = this.dataList // 拿到返回的数据
+        event.forEach(item => {
+          let obj = {};
+          // obj.backgroundColor = '#c6e0b4'; // 该事件的背景颜色
+          // obj.borderColor  = '#c6e0b4'; // 该事件的边框颜色
+          // obj.textColor = '#fff'; // 该事件的文字颜色
+          obj.title = '工作日'
+          obj.start = item.workDate
+          // obj.allDay = true // 是否为全天事件
+          this.calendarOptions.events.push(obj) // 使用push方法将事件逐一添加，
+        });
         console.log(this.calendarOptions.events)
         this.calendarApi.refetchEvents()
         // 重新抓取所有的日程事件源上的日程事件并渲染它们。
-      });
+      // });
     },
     formatDate1(cellValue) {
       if (cellValue == null || cellValue === "") return "";
@@ -329,25 +327,32 @@ export default {
       }
       return null; // 如果格式不匹配，返回null
     },
-
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNo = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
     handleDateClick(dateClickInfo) {
-      console.log(dateClickInfo)
+      let thisDate = dateClickInfo.dateStr;
+      let strArray = [];
+      this.calendarOptions.events.forEach(item => {
+        strArray.push(item.start) 
+      })
+      let index = strArray.indexOf(thisDate);
+      let workMonth = this.queryParams.month;
+      if(thisDate.substring(0,7)==workMonth){
+        if (index > -1) {
+          this.calendarOptions.events.splice(index, 1);
+        }else{
+          this.calendarOptions.events.push({
+            title: '工作日',
+            start: thisDate
+          });
+        }
+      }
+      this.calendarApi.refetchEvents();
     },
     todayClick(mouseEvent, htmlElement) {
       this.calendarApi.today() // 将日历移动到当前日期。
       this.calendarApi.getDate() // 返回日期的日历的当前日期
       const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
-      console.log(formattedDate); // 输出: 2024-08
+      this.queryParams.month = formattedDate;
+      this.getList();
     },
     nextClick(mouseEvent, htmlElement) {
       this.calendarApi.next() // 将日历向前移动一步（例如，一个月或一周）。
@@ -355,7 +360,8 @@ export default {
       // 如果日历位于dayGridWeek或中timeGridWeek，则将日历向前移动一周。
       // 如果日历位于dayGridDay或中timeGridDay，则将日历向前移动一天。
       const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
-      console.log(formattedDate);
+      this.queryParams.month = formattedDate;
+      this.getList();
     },
     prevClick(mouseEvent, htmlElement) {
       this.calendarApi.prev() // 将日历后退一步（例如，一个月或一周）。
@@ -363,7 +369,8 @@ export default {
       // 如果日历位于dayGridWeek或中timeGridWeek，则将日历后移一周。
       // 如果日历位于dayGridDay或中timeGridDay，则将日历移回一天。
       const formattedDate = this.formatDate(this.calendarApi.view.title);//获取当前月份
-      console.log(formattedDate); // 输出: 2024-08
+      this.queryParams.month = formattedDate;
+      this.getList();
     }
   }
 }