diff --git a/src/api/personnelMatters/holidays.js b/src/api/personnelMatters/holidays.js
index b70f902..9d3b2ae 100644
--- a/src/api/personnelMatters/holidays.js
+++ b/src/api/personnelMatters/holidays.js
@@ -1,44 +1,28 @@
 import request from '@/utils/request'
 
-// 查询假期管理列表
-export function listHoliday(query) {
+
+export function getPage(year){
   return request({
-    url: '/personnelMatters/holiday/list',
+    url: '/personnelMatters/holiday/pageInfo/'+year,
     method: 'get',
-    params: query
   })
 }
 
+
+
 // 查询假期管理详细
-export function getHoliday(id) {
-  return request({
-    url: '/personnelMatters/holiday/' + id,
-    method: 'get'
-  })
-}
-
-// 新增假期管理
-export function addHoliday(data) {
-  return request({
-    url: '/personnelMatters/holiday',
-    method: 'post',
-    data: data
-  })
-}
+// export function getHoliday(id) {
+//   return request({
+//     url: '/personnelMatters/holiday/' + id,
+//     method: 'get'
+//   })
+// }
 
 // 修改假期管理
 export function updateHoliday(data) {
   return request({
-    url: '/personnelMatters/holiday',
-    method: 'put',
+    url: '/personnelMatters/holiday/edit',
+    method: 'post',
     data: data
   })
 }
-
-// 删除假期管理
-export function delHoliday(id) {
-  return request({
-    url: '/personnelMatters/holiday/' + id,
-    method: 'delete'
-  })
-}
diff --git a/src/api/personnelMatters/leave.js b/src/api/personnelMatters/leave.js
index 3b321a5..9146c65 100644
--- a/src/api/personnelMatters/leave.js
+++ b/src/api/personnelMatters/leave.js
@@ -51,3 +51,18 @@ export function listLeaveDetails(query) {
     params: query
   })
 }
+
+export function getNewDicts(dictType) {
+  return request({
+    url: '/system/dict/data/type/new/' + dictType,
+    method: 'get'
+  })
+}
+
+
+export function autoTypeList(){
+  return request({
+    url: '/personnelMatters/leave/autoTypeList',
+    method: 'get',
+  })
+}
diff --git a/src/api/personnelMatters/leaveDetail.js b/src/api/personnelMatters/leaveDetail.js
index dcd63bd..fea630e 100644
--- a/src/api/personnelMatters/leaveDetail.js
+++ b/src/api/personnelMatters/leaveDetail.js
@@ -42,3 +42,12 @@ export function delDetail(id) {
     method: 'delete'
   })
 }
+
+//计算请假时长
+export function calculationLeaveHour(param){
+  return request({
+    url: '/personnelMatters/leaveDetail/calculationLeaveHour',
+    method: 'post',
+    data: param
+  })
+}
diff --git a/src/components/DictNewTag/index.vue b/src/components/DictNewTag/index.vue
new file mode 100644
index 0000000..3865215
--- /dev/null
+++ b/src/components/DictNewTag/index.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <template v-for="(item, index) in optionArrays">
+      <template v-if="values.includes(item.value)">
+        <span
+          v-if="(item.listClass == 'default' || item.listClass == '') && (item.cssClass == '' || item.cssClass == null)"
+          :key="item.value"
+          :index="index"
+          :class="item.cssClass"
+          >{{ item.label + ' ' }}</span
+        >
+        <el-tag
+          v-else
+          :disable-transitions="true"
+          :key="item.value"
+          :index="index"
+          :type="item.listClass == 'primary' ? '' : item.listClass"
+          :class="item.cssClass"
+        >
+          {{ item.label + ' ' }}
+        </el-tag>
+      </template>
+    </template>
+    <template v-if="unmatch && showValue">
+      {{ unmatchArray | handleArray }}
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "DictNewTag",
+  props: {
+    options: {
+      type: Array,
+      default: null,
+    },
+    value: [Number, String, Array],
+    // 当未找到匹配的数据时，显示value
+    showValue: {
+      type: Boolean,
+      default: true,
+    },
+    separator: {
+      type: String,
+      default: ","
+    }
+  },
+  data() {
+    return {
+      unmatchArray: [], // 记录未匹配的项
+    }
+  },
+  computed: {
+    values() {
+      if (this.value === null || typeof this.value === 'undefined' || this.value === '') return []
+      return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator)
+    },
+    optionArrays(){
+      let optionArrays = []
+      this.options.forEach(item => {
+        optionArrays.push({value:item.value, label:item.label, listClass:item.listClass});
+      })
+      optionArrays.forEach(item => {
+        item.value = String(item.value);
+      })
+
+      return optionArrays;
+    },
+    unmatch() {
+      this.unmatchArray = []
+      // 没有value不显示
+      if (this.value === null || typeof this.value === 'undefined' || this.value === '' || this.options.length === 0) return false
+      // 传入值为数组
+      let unmatch = false // 添加一个标志来判断是否有未匹配项
+      this.values.forEach(item => {
+        if (!this.optionArrays.some(v => v.value === item)) {
+          this.unmatchArray.push(item)
+          unmatch = true // 如果有未匹配项，将标志设置为true
+        }
+      })
+      return unmatch // 返回标志的值
+    },
+
+  },
+  filters: {
+    handleArray(array) {
+      if (array.length === 0) return '';
+      return array.reduce((pre, cur) => {
+        return pre + ' ' + cur;
+      })
+    },
+  }
+};
+</script>
+<style scoped>
+.el-tag + .el-tag {
+  margin-left: 10px;
+}
+</style>
diff --git a/src/main.js b/src/main.js
index d2fe0bf..76efaa9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -32,6 +32,7 @@ import ImageUpload from "@/components/ImageUpload"
 import ImagePreview from "@/components/ImagePreview"
 // 字典标签组件
 import DictTag from '@/components/DictTag'
+import DictNewTag from '@/components/DictNewTag'
 // 头部标签组件
 import VueMeta from 'vue-meta'
 // 字典数据组件
@@ -50,6 +51,7 @@ Vue.prototype.downloadExcel = downloadExcel
 
 // 全局组件挂载
 Vue.component('DictTag', DictTag)
+Vue.component('DictNewTag', DictNewTag)
 Vue.component('Pagination', Pagination)
 Vue.component('RightToolbar', RightToolbar)
 Vue.component('Editor', Editor)
diff --git a/src/views/personnelMatters/holidays/index.vue b/src/views/personnelMatters/holidays/index.vue
index 8793933..e1d4797 100644
--- a/src/views/personnelMatters/holidays/index.vue
+++ b/src/views/personnelMatters/holidays/index.vue
@@ -1,97 +1,72 @@
 <template>
   <div class="app-container">
     <el-row :gutter="10" class="mb8">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['personnelMatters:holiday:add']"
-        >新增</el-button>
+      <el-col :span="2">
+        <el-button style="width: 100%; font-size: 100%; color:black;" type="primary" @click="getInitPage(beforYear)" plain><i style="margin-right: 15%" class="el-icon-d-arrow-left"/>{{beforYear}}   </el-button>
+      </el-col>
+      <el-col :span="20">
+        <el-button style="width: 100%; font-size: 100%; color:black;" type="success" round>{{holiday.year}}</el-button>
+      </el-col>
+      <el-col :span="2">
+        <el-button style="width: 100%; font-size: 100%; color:black;" type="primary" @click="getInitPage(afterYear)" plain>{{afterYear}}   <i style="margin-left: 15%"  class="el-icon-d-arrow-right"/></el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
+    <el-row :gutter="20"  v-loading="loading" style="display: flex; flex-wrap: wrap;">
+        <el-col :span="4" v-for="(month,index) in holiday.list" style="height: 351px; margin-bottom: 2%;">
+          <el-card class="box-card" style="height: 100%;">
+            <div slot="header" class="clearfix">
+              <span>{{index+1}}月</span>
+            </div>
+            <div>
+              <table class="el-date-table">
+                <tbody>
+                <tr>
+                  <th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th>
+                </tr>
+                <tr class="el-date-table__row" v-for="week in month">
+                  <td :class="day.month === index+1?'available':'prev-month'" v-for="(day,ind) in week" @click="clickDay(day)">
+                      <div :style="(day.month !== index+1)?'':(day.holiday? (day.holidayType ==2 ? 'background-color: #eeee25;' : 'background-color: red;'):'background-color: #f5f7fa;')">
+                        <!-- <el-tooltip :content="day.holidayName" placement="top" v-if="day.holiday">
+                          <span>{{day.day}}</span>
+                        </el-tooltip>
+                        <span v-else>{{day.day}}</span> -->
+                        <span>{{day.day}}</span>
+                      </div>
+                  </td>
+                </tr>
+                </tbody>
+              </table>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
 
-    <el-table v-loading="loading" :data="holidayList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="假期时间" align="center" prop="holiday" width="180">
-        <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.holiday, '{y}-{m}-{d}') }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="假期说明" align="center" prop="remarks" />
-      <el-table-column label="特殊说明" align="center" prop="specialFlag">
-        <template slot-scope="scope">
-          <span v-if="scope.row.specialFlag=='0'">放假</span>
-          <span v-else>上班</span>
-        </template>
-      </el-table-column>
-      <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="['personnelMatters:holiday:edit']"
-          >修改</el-button>
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-delete"
-            @click="handleDelete(scope.row)"
-            v-hasPermi="['personnelMatters:holiday:remove']"
-          >删除</el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-
-    <pagination
-      v-show="total>0"
-      :total="total"
-      :page.sync="queryParams.pageNum"
-      :limit.sync="queryParams.pageSize"
-      @pagination="getList"
-    />
-
-    <!-- 添加或修改假期管理对话框 -->
-    <el-dialog :title="title" v-dialog-drag :visible.sync="open" width="360px" append-to-body>
-      <el-form ref="form" :model="form" :rules="rules" label-width="98px">
-        <el-form-item label="假期时间：" prop="holiday">
-          <el-date-picker clearable
-            v-model="form.holiday"
-            type="date"
-            value-format="yyyy-MM-dd"
-            placeholder="请选择假期时间">
-          </el-date-picker>
-        </el-form-item>
-        <el-form-item label="假期说明：" prop="remarks">
-          <el-input v-model="form.remarks" placeholder="请输入假期说明" />
-        </el-form-item>
-        <el-form-item label="特殊说明：" prop="specialFlag">
-          <el-select v-model="form.specialFlag" placeholder="请选择特殊说明">
-            <el-option label="放假" value="0" />
-            <el-option label="上班" value="1" />
-          </el-select>
-        </el-form-item>
-      </el-form>
-      <div slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="submitForm">确 定</el-button>
-        <el-button @click="cancel">取 消</el-button>
-      </div>
-    </el-dialog>
+       <!-- 修改公休法休 -->
+       <el-dialog title="选择假期类型" :visible.sync="openHoliday" width="400px" append-to-body>
+          <el-form ref="form" :model="updateDay"  label-width="80px">
+            <el-form-item label="假期类型">
+              <el-select v-model="updateDay.holidayType" @change="holidayType()">
+                <el-option label="法休" value="1" />
+                <el-option label="公休" value="2" />
+              </el-select>
+            </el-form-item>
+          </el-form>
+        </el-dialog>
   </div>
 </template>
 
 <script>
-import { listHoliday, getHoliday, delHoliday, addHoliday, updateHoliday } from "@/api/personnelMatters/holidays";
+import { getPage, updateHoliday } from "@/api/personnelMatters/holidays";
 
 export default {
   name: "Holiday",
   data() {
     return {
+      holiday:{},
+      beforYear:null,
+      afterYear:null,
+      updateDay:{},
+      openHoliday:false,
       // 遮罩层
       loading: true,
       // 非单个禁用
@@ -128,90 +103,40 @@ export default {
     };
   },
   created() {
-    this.getList();
+    this.getInitPage(new Date().getFullYear());
   },
   methods: {
-    /** 查询假期管理列表 */
-    getList() {
+
+    getInitPage(year){
       this.loading = true;
-      listHoliday(this.queryParams).then(response => {
-        this.holidayList = response.rows;
-        this.total = response.total;
+      getPage(year).then(response => {
+        this.holiday = response.data;
+        console.log(this.holiday);
+        
+        this.beforYear = this.holiday.year-1;
+        this.afterYear = this.holiday.year+1;
         this.loading = false;
       });
     },
-    // 取消按钮
-    cancel() {
-      this.open = false;
-      this.reset();
-    },
-    // 表单重置
-    reset() {
-      this.form = {
-        holiday: null,
-        remarks: null,
-      };
-      this.resetForm("form");
-    },
-    /** 搜索按钮操作 */
-    handleQuery() {
-      this.queryParams.pageNum = 1;
-      this.getList();
-    },
-    /** 重置按钮操作 */
-    resetQuery() {
-      this.resetForm("queryForm");
-      this.handleQuery();
-    },
-    // 多选框选中数据
-    handleSelectionChange(selection) {
-      this.single = selection.length!==1
-      this.multiple = !selection.length
-    },
-    /** 新增按钮操作 */
-    handleAdd() {
-      this.reset();
-      this.open = true;
-      this.title = "添加假期管理";
-    },
-    /** 修改按钮操作 */
-    handleUpdate(row) {
-      this.reset();
-      getHoliday(row.id).then(response => {
-        this.form = response.data;
-        this.open = true;
-        this.title = "修改假期管理";
-      });
-    },
-    /** 提交按钮 */
-    submitForm() {
-      this.$refs["form"].validate(valid => {
-        if (valid) {
-          if (this.form.id != null) {
-            updateHoliday(this.form).then(response => {
-              this.$modal.msgSuccess("修改成功");
-              this.open = false;
-              this.getList();
-            });
-          } else {
-            addHoliday(this.form).then(response => {
-              this.$modal.msgSuccess("新增成功");
-              this.open = false;
-              this.getList();
-            });
-          }
-        }
-      });
-    },
-    /** 删除按钮操作 */
-    handleDelete(row) {
-      this.$modal.confirm('是否确认删除假期为"' + row.holiday + '"的数据项？').then(function() {
-        return delHoliday(row.id);
-      }).then(() => {
-        this.getList();
-        this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+
+    clickDay(day){
+      //取消选中状态, 直接取消
+      if(day.holiday){
+        updateHoliday({id:this.holiday.holidayId, add:!day.holiday, holidayDate:day.localDate}).then(response => {
+          this.getInitPage(day.year);
+        });
+      }else{
+        //如果不是选中状态需要维护是公休,还是法休
+        this.updateDay = day;
+        this.openHoliday = true;
+      }
     },
+    holidayType(){
+      updateHoliday({id:this.holiday.holidayId, add:!this.updateDay.holiday, holidayDate:this.updateDay.localDate, holidayType:this.updateDay.holidayType}).then(response => {
+          this.getInitPage(this.holiday.year);
+          this.openHoliday = false;
+        });
+    }
 
 
   }
diff --git a/src/views/personnelMatters/leave/index.vue b/src/views/personnelMatters/leave/index.vue
index 1c904b0..f20b980 100644
--- a/src/views/personnelMatters/leave/index.vue
+++ b/src/views/personnelMatters/leave/index.vue
@@ -7,14 +7,6 @@
       <el-form-item label="员工姓名：" prop="userId">
         <el-input v-model="queryParams.name" placeholder="请输入员工姓名" @keyup.enter.native="handleQuery"/>
       </el-form-item>
-      <el-form-item label="请假月份：" prop="leaveDate">
-        <el-date-picker clearable
-          v-model="queryParams.leaveDate"
-          type="month"
-          value-format="yyyy-MM"
-          placeholder="请选择请假月份">
-        </el-date-picker>
-      </el-form-item>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -46,12 +38,16 @@
     </el-row>
 
     <el-table v-loading="loading" :data="leaveList">
-      <el-table-column type="selection" width="55" align="center" />
+      
       <el-table-column label="部门" align="center" prop="deptName" />
-      <el-table-column label="员工姓名" align="center" prop="name" />
-      <el-table-column label="请假月份" align="center" prop="leaveDate" width="180">
+      <el-table-column label="员工姓名" align="center" prop="name" >
         <template slot-scope="scope">
-          <span>{{ parseTime(scope.row.leaveDate, '{y}-{m}') }}</span>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="detailOpen(scope.row)"
+          >{{scope.row.name}}</el-button>
         </template>
       </el-table-column>
       <el-table-column label="病假时长" align="center" prop="sickHours" />
@@ -63,16 +59,8 @@
       <el-table-column label="陪产假时长" align="center" prop="paternityHours" />
       <el-table-column label="丧假时长" align="center" prop="funeralHours" />
       <el-table-column label="工伤假时长" align="center" prop="workHours" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" width="200">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            type="text"
-            icon="el-icon-edit"
-            v-if="scope.row.leaveHours==0"
-            @click="handleUpdate(scope.row)"
-            v-hasPermi="['personnelMatters:leave:edit']"
-          >修改</el-button>
           <el-button
             size="mini"
             type="text"
@@ -83,9 +71,12 @@
           <el-button
             size="mini"
             type="text"
-            icon="el-icon-info"
-            @click="handleDetail(scope.row)"
-          >查看详情</el-button>
+            icon="el-icon-edit"
+            v-if="scope.row.leaveHours==0"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['personnelMatters:leave:edit']"
+          >修改</el-button>
+         
         </template>
       </el-table-column>
     </el-table>
@@ -114,25 +105,99 @@
             ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="请假月份：" prop="leaveDate">
-          <el-date-picker clearable style="width: 253px;"
-            v-model="form.leaveDate"
-            type="month"
-            value-format="yyyy-MM"
-            placeholder="请选择请假月份">
-          </el-date-picker>
-        </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <el-drawer :title="detail.leaveTitle"  :visible.sync="detail.leaveDrawer" direction="rtl" size="50%"  :before-close="detailClose">
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="2">
+          <el-button
+            type="primary"
+            plain
+            style="margin-left: 25%;"
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAddDetail"
+            v-hasPermi="['personnelMatters:leaveDetail:add']"
+          >新增</el-button>
+        </el-col>
+      </el-row>
+
+        <el-table :data="detail.detailList">
+          <el-table-column label="请假开始时间" align="center" prop="leaveStartTime">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.leaveStartTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="请假结束时间" align="center" prop="leaveEndTime">
+            <template slot-scope="scope">
+              <span>{{ parseTime(scope.row.leaveEndTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="请假时长" align="center" prop="leaveHour" />
+          <el-table-column label="请假类型" align="center" prop="type" >
+            <template slot-scope="scope">
+              <dict-new-tag :options="detail.holidaysType" :value="scope.row.type"/>
+            </template>
+          </el-table-column>
+          <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="handleUpdateDetail(scope.row)"
+                v-hasPermi="['personnelMatters:leaveDetail:edit']"
+              >修改</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+    </el-drawer>
+
+    <el-dialog :title="title" v-dialog-drag :visible.sync="detail.detailOpen" width="390px" append-to-body>
+      <el-form ref="detailForm" :model="detail.form" :rules="detail.rules" label-width="128px">
+        <el-form-item label="请假类型：" prop="type">
+          <el-select v-model="detail.form.type" placeholder="请选择请假类型" clearable @change="changeHolidayType" >
+            <el-option
+              v-for="dict in detail.holidaysType"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="开始时间：" prop="leaveStartTime">
+          <el-date-picker clearable v-model="detail.form.leaveStartTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择具体开始时间" @blur="blurLeaveStartTime">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="结束时间：" prop="leaveEndTime">
+          <el-date-picker clearable :disabled="detail.autoCalculation"  v-model="detail.form.leaveEndTime" type="date" value-format="yyyy-MM-dd"   @blur="blurLeaveEndTime" placeholder="请选择具体结束时间"> </el-date-picker>
+        </el-form-item>
+        <el-form-item label="请假时长" prop="leaveHour">
+          <el-input v-model="detail.form.leaveHour" :disabled="detail.autoCalculation" placeholder="请假时长" >
+            <template slot="append">小时</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="备注：" prop="remark">
+          <el-input v-model="detail.form.remarks" placeholder="请输入备注" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitDetailForm">确 定</el-button>
+        <el-button @click="cancelDetail">取 消</el-button>
+      </div>
+    </el-dialog>
+    
   </div>
 </template>
 
 <script>
-import { listLeave, getLeave, delLeave, addLeave, updateLeave } from "@/api/personnelMatters/leave";
+import { listLeave, getLeave, delLeave, addLeave, updateLeave,autoTypeList,getNewDicts } from "@/api/personnelMatters/leave";
+import { listDetail, getDetail, addDetail, updateDetail, calculationLeaveHour } from "@/api/personnelMatters/leaveDetail";
 import { listAllDepts } from '@/api/system/dept';
 import {listStaffAll, listStaffByDept} from '@/api/system/staff';
 import Treeselect from "@riophae/vue-treeselect";
@@ -143,6 +208,32 @@ export default {
   components: {Treeselect},
   data() {
     return {
+      detail:{
+        row:{},
+        autoTypeList:[],
+        autoCalculation: true,
+        leaveTitle:"请假详情",
+        leaveDrawer:false,
+
+        holidaysType:[],
+        // 请假管理详情表格数据
+        detailList: [],
+        detailOpen:false,
+        form:{},
+         // 表单校验
+        rules: {
+          type:[
+          { required: true, message: "请假类型不能为空", trigger: "blur" }
+          ],
+          leaveStartTime: [
+            { required: true, message: "请假开始时间不能为空", trigger: "blur" }
+          ],
+          leaveEndTime: [
+            { required: true, message: "请假结束时间不能为空", trigger: "blur" }
+          ],
+        }
+      },
+     
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -188,8 +279,120 @@ export default {
     this.getList();
     this.getDeptList();
     this.getStaffList();
+    this.getAutoTypeList();
+    this.getholidaysType();
   },
   methods: {
+    getholidaysType(){
+      getNewDicts("holidays_type").then(res => {
+            this.detail.holidaysType = res.data;  
+      });
+    },
+    //查询详情
+    detailOpen(row) {
+      this.detail.leaveTitle = row.name+" 的请假详情"
+      this.detail.row = row;
+      listDetail({leaveId:row.id}).then(response => {
+        this.detail.detailList = response.data;
+        this.detail.leaveDrawer = true;
+      });
+    },
+    //关闭详情
+    detailClose(done) {
+      done();
+    },
+    handleAddDetail() {
+      this.detail.form={};
+      this.detail.detailOpen = true;
+      this.detail.autoCalculation = true;
+      this.title = "添加请假详情";
+    },
+    //修改假期
+    handleUpdateDetail(row){
+      getDetail(row.id).then(response => {
+        this.detail.form = response.data;
+        this.changeHolidayType();
+        this.detail.detailOpen = true;
+        this.title = "修改请假详情";
+      });
+    },
+    cancelDetail() {
+      this.detail.detailOpen = false;
+    },
+    //更改请假类型
+    changeHolidayType(){
+      console.log("changeHolidayType")
+      this.detail.autoCalculation=this.detail.autoTypeList.includes(this.detail.form.type);
+      this.blurLeaveStartTime();
+    },
+    //更改请假开始时间
+    blurLeaveStartTime(){
+      console.log("blurLeaveStartTime")
+      //如果需要计算
+      if(this.detail.autoCalculation){
+        //存在开始时间
+        if(!!this.detail.form.leaveStartTime){
+          //根据类型和时间, 计算请假结束时间. 和请假时长
+          calculationLeaveHour(this.detail.form).then(response => {
+              this.detail.form = response.data;
+            });
+        }
+      }else if(this.detail.form.id == undefined){
+        console.log("走了")
+        this.blurLeaveEndTime();
+      }
+    },
+
+     //更改请假开始时间
+     blurLeaveEndTime(){
+      let days = 0;
+      //如果需要计算
+      if(!this.detail.autoCalculation){
+        //存在开始时间
+        if(!!this.detail.form.leaveStartTime && !!this.detail.form.leaveEndTime){
+           //根据类型和时间, 计算请假结束时间. 和请假时长
+           calculationLeaveHour(this.detail.form).then(response => {
+              this.detail.form = response.data;
+            });
+        }
+      }
+      this.$forceUpdate();
+    },
+    /** 提交按钮 */
+    submitDetailForm() {
+      this.detail.form.name = this.detail.row.name;
+      this.detail.form.leaveId = this.detail.row.id;
+      this.$refs["detailForm"].validate(valid => {
+        if (valid) {
+          if (this.detail.form.id != null) {
+            updateDetail(this.detail.form).then(response => {
+              this.$modal.msgSuccess("修改成功");
+              this.detail.detailOpen = false;
+              this.detailOpen(this.detail.row);
+            });
+          } else {
+            addDetail(this.detail.form).then(response => {
+              this.$modal.msgSuccess("新增成功");
+              this.detail.detailOpen = false;
+              this.detailOpen(this.detail.row);
+            });
+          }
+        }
+      });
+    },
+
+
+    getAutoTypeList(){
+      autoTypeList().then(response => {
+        this.detail.autoTypeList = response.data;
+      });
+    },
+
+
+
+
+
+
     /** 获取部门 */
     getDeptList(){
       listAllDepts().then(response => {
@@ -221,8 +424,6 @@ export default {
       this.form = {
         dept: null,
         name: null,
-        leaveDate: null,
-        leaveHours: null,
       };
       this.resetForm("form");
     },
diff --git a/src/views/system/staff/index.vue b/src/views/system/staff/index.vue
index 81e707e..6ce093a 100644
--- a/src/views/system/staff/index.vue
+++ b/src/views/system/staff/index.vue
@@ -498,9 +498,9 @@
             <el-select v-model="form.subsidyList" multiple placeholder="请选择福利补贴" style="width: 100%;">
               <el-option
                 v-for="subsidy in subsidyOptions"
-                :key="subsidy.key"
-                :label="subsidy.value"
-                :value="subsidy.key"
+                :key="subsidy.value"
+                :label="subsidy.label"
+                :value="subsidy.value"
               ></el-option>
             </el-select>
           </el-form-item>