假期问题修复

ruoyi-ui/src/views/oa/holidaycal/index.vue

@@ -3,62 +3,68 @@
     <el-tabs v-model="activeName" style="margin-left: 10px;">
       <el-tab-pane label="休假日历" name="first">
         <el-calendar>
-          <template #dateCell="{ date, data }">
-            <div :class="{'is-selected': data.isSelected, 'blue-background': isHoliday(data.day)}" @click="handleCellClick(data)">
-              <p>{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}</p>
-              <p v-if="isHoliday(data.day)" class="holiday-name">{{ getHolidayName(data.day) }}</p>
+          <template slot="dateCell" slot-scope="{date, data}">
+            <div :class="{'is-selected': data.isSelected, 'blue-background': isHoliday(data.day)}" style="height: 100%"
+                 @click="handleCellClick(data)">
+              <div v-if="isHoliday(data.day)" class="holiday-name">
+                <div>{{ data.day.split('-').slice(1).join('-') }}</div>
+                <div> {{ getHolidayName(data.day) }}</div>
+              </div>
+              <div v-else>
+                <div>{{ data.day.split('-').slice(1).join('-') }}</div>
+              </div>
             </div>
           </template>
         </el-calendar>
-        <el-spin v-if="loading" size="large" class="loading-spinner" />
+        <el-spin v-if="loading" size="large" class="loading-spinner"/>
       </el-tab-pane>
       <el-tab-pane label="节假日列表" name="second">
 
         <el-table v-loading="loading" :data="oaHolidayList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="主键id" align="center" prop="holidayId" v-if="true"/>
-      <el-table-column label="0正常1周日2节假日3调休" align="center" prop="type" />
-      <el-table-column label="假期日期" align="center" prop="holidayTime" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.holidayTime, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="假期名称" align="center" prop="name" />
-      <el-table-column label="备注" align="center" prop="remark" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-        <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['oa:oaHoliday:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['oa:oaHoliday:remove']"
-          >删除</el-button>
+
+          <el-table-column label="序号" align="center" type="index" v-if="true"/>
+          <el-table-column label="假期名称" align="center" prop="holidayName"/>
+
+          <el-table-column label="涉及日期" align="center" prop="holidayTimeString" width="500" :show-overflow-tooltip='true'>
+
+          </el-table-column>
+          <el-table-column label="类型" align="center" prop="holidayType">
+            <template slot-scope="scope">
+              <el-tag v-if="scope.row.holidayType==1">周日</el-tag>
+              <el-tag v-if="scope.row.holidayType==2">节假日</el-tag>
+              <el-tag v-if="scope.row.holidayType==3">调休</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+
+<!--        <pagination-->
+<!--          v-show="total>0"-->
+<!--          :total="total"-->
+<!--          :page.sync="queryParams.pageNum"-->
+<!--          :limit.sync="queryParams.pageSize"-->
+<!--          @pagination="getList"-->
+<!--        />-->
+
+      </el-tab-pane>
+    </el-tabs>
 
 
-  <!-- 添加或修改休假管理对话框 -->
-  <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+    <!-- 添加或修改休假管理对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="假期日期" prop="holidayTime">
           <el-date-picker clearable
-            v-model="form.holidayTime"
-            type="datetime"
-            value-format="yyyy-MM-dd HH:mm:ss"
-            placeholder="请选择假期日期">
+                          v-model="form.holidayTime"
+                          type="datetime"
+                          value-format="yyyy-MM-dd HH:mm:ss"
+                          placeholder="请选择假期日期">
           </el-date-picker>
         </el-form-item>
         <el-form-item label="假期名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入假期名称" />
+          <el-input v-model="form.name" placeholder="请输入假期名称"/>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -68,26 +74,9 @@
     </el-dialog>
 
 
-
-
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-      </el-tab-pane>
-    </el-tabs>
-
     <el-dialog :visible.sync="dialogVisible" title="编辑日期类型" width="30%">
-      <el-form :model="currentHoliday" ref="form">
-        <el-form-item label="选择类型">
+      <el-form :model="currentHoliday" ref="form" label-width="80px">
+        <el-form-item label="选择类型" prop="">
           <el-select v-model="currentHoliday.type" placeholder="请选择">
             <el-option label="工作日" :value="0"></el-option>
             <el-option label="休息日" :value="1"></el-option>
@@ -95,6 +84,10 @@
             <el-option label="调休" :value="3"></el-option>
           </el-select>
         </el-form-item>
+
+        <el-form-item label="假期名称" prop="name">
+          <el-input v-model="currentHoliday.name" placeholder="请输入假期名称"/>
+        </el-form-item>
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取消</el-button>
@@ -105,7 +98,7 @@
 </template>
 
 <script>
-import { listOaHoliday, updateOaHoliday } from "@/api/oa/oaHoliday";
+import {listOaHoliday, updateOaHoliday,queryListHoliday} from "@/api/oa/oaHoliday";
 
 export default {
   data() {
@@ -115,12 +108,9 @@ export default {
       dialogVisible: false,
       currentHoliday: {},
       loading: false,  // New loading state
-
-
-        // 按钮loading
-        buttonLoading: false,
+      // 按钮loading
+      buttonLoading: false,
       // 遮罩层
-      loading: true,
       // 选中数组
       ids: [],
       // 非单个禁用
@@ -140,7 +130,7 @@ export default {
       // 查询参数
       queryParams: {
         pageNum: 1,
-        pageSize: 10,
+        pageSize: 999,
         type: undefined,
         holidayTime: undefined,
         name: undefined,
@@ -150,40 +140,40 @@ export default {
       // 表单校验
       rules: {
         holidayId: [
-          { required: true, message: "主键id不能为空", trigger: "blur" }
+          {required: true, message: "主键id不能为空", trigger: "blur"}
         ],
         type: [
-          { required: true, message: "0正常1周日2节假日3调休不能为空", trigger: "change" }
+          {required: true, message: "0正常1周日2节假日3调休不能为空", trigger: "change"}
         ],
         holidayTime: [
-          { required: true, message: "假期日期不能为空", trigger: "blur" }
+          {required: true, message: "假期日期不能为空", trigger: "blur"}
         ],
         name: [
-          { required: true, message: "假期名称不能为空", trigger: "blur" }
+          {required: true, message: "假期名称不能为空", trigger: "blur"}
         ],
         remark: [
-          { required: true, message: "备注不能为空", trigger: "blur" }
+          {required: true, message: "备注不能为空", trigger: "blur"}
         ],
         delFlag: [
-          { required: true, message: "删除标志不能为空", trigger: "blur" }
+          {required: true, message: "删除标志不能为空", trigger: "blur"}
         ]
       }
     };
   },
   methods: {
     fetchHolidayData() {
-      this.loading = true;  // Set loading to true when fetching data
+      this.loading = true;
       listOaHoliday({}).then(response => {
         this.holidays = response.rows.map(item => ({
           date: item.holidayTime.split(" ")[0],
           type: item.type,
           name: item.name,
-          fullData: item 
+          fullData: item
         }));
-        this.loading = false;  // Set loading to false once data is fetched
+        this.loading = false;
       }).catch(error => {
-        console.error("Error fetching holiday data:", error);
-        this.loading = false;  // Set loading to false even on error
+
+        this.loading = false;
       });
     },
     isHoliday(date) {
@@ -195,58 +185,37 @@ export default {
       return holiday ? holiday.name : '';
     },
     handleCellClick(data) {
+
       const holiday = this.holidays.find(holiday => holiday.date === data.day);
-      if (holiday) {
-        this.currentHoliday = { ...holiday.fullData, type: holiday.type };
-        this.dialogVisible = true;
-      }
+      this.currentHoliday = {...holiday.fullData, type: holiday.type};
+      this.dialogVisible = true;
+
     },
-
-
-
-
-
-
     updateHoliday() {
-      switch (this.currentHoliday.type) {
-        case 0:
-          this.currentHoliday.name = null;
-          break;
-        case 1:
-          this.currentHoliday.name = "休息日";
-          break;
-        case 2:
-          this.currentHoliday.name = "节假日";
-          break;
-        case 3:
-          this.currentHoliday.name = "调休";
-          break;
-        default:
-          break;
-      }
-
       updateOaHoliday(this.currentHoliday).then(response => {
         this.dialogVisible = false;
         this.fetchHolidayData();
         this.$message.success("假期类型更新成功");
+
       }).catch(error => {
         console.error("Error updating holiday data:", error);
         this.$message.error("更新失败");
       });
-
-
     },
 
 
-      /** 查询休假管理列表 */
-  getList() {
+    /** 查询休假管理列表 */
+    getList() {
       this.loading = true;
-      listOaHoliday(this.queryParams).then(response => {
-        this.oaHolidayList = response.rows;
-        this.total = response.total;
+      queryListHoliday(this.queryParams).then(response => {
+
+        this.oaHolidayList = response.data;
+        console.log(response)
         this.loading = false;
       });
     },
+
+
     // 取消按钮
     cancel() {
       this.open = false;
@@ -281,7 +250,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.holidayId)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -356,8 +325,9 @@ export default {
   border: none !important;
   background-color: inherit;
   padding: 0;
-  transition: all 0.3s ease;  /* Smooth transition for hover effect */
+  transition: all 0.3s ease; /* Smooth transition for hover effect */
 }
+
 .blue-background {
   background-color: #dcf2f2;
   color: inherit;
@@ -368,25 +338,30 @@ export default {
   height: 100%;
   border-radius: 4px;
 }
+
 .el-calendar__cell p {
   margin: 0;
   padding: 0;
-  font-size: 14px;  /* Improve text size for better readability */
+  font-size: 14px; /* Improve text size for better readability */
 }
+
 .holiday-name {
   font-size: 16px;
   color: #141313;
-  text-align: center;
+
   margin-top: 5px;
 }
+
 .el-dialog {
   max-width: 100%;
   padding: 20px;
 }
+
 .dialog-footer {
   display: flex;
   justify-content: space-between;
 }
+
 .loading-spinner {
   display: block;
   margin: 20px auto;