员工年假

src/api/system/annualleave.js

+import request from '@/utils/request'
+
+// 查询员工年假列表
+export function listAnnualleave(query) {
+  return request({
+    url: '/system/annualleave/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询员工年假详细
+export function getAnnualleave(id) {
+  return request({
+    url: '/system/annualleave/' + id,
+    method: 'get'
+  })
+}
+
+// 新增员工年假
+export function addAnnualleave(data) {
+  return request({
+    url: '/system/annualleave',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改员工年假
+export function updateAnnualleave(data) {
+  return request({
+    url: '/system/annualleave',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除员工年假
+export function delAnnualleave(id) {
+  return request({
+    url: '/system/annualleave/' + id,
+    method: 'delete'
+  })
+}

src/views/system/annualleave/index.vue

+<template>
+  <div class="app-container">
+    <!-- 搜索框容器 -->
+    <div class="search-container">
+      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form-item label="姓名" prop="uname">
+          <el-input v-model="queryParams.uname" placeholder="请输入姓名" clearable @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="年份" prop="year">
+          <el-date-picker v-model="queryParams.year" type="year" value-format="YYYY" placeholder="请选择年份"
+            :editable="false" @change="handleYearChange" :picker-options="pickerOptions" />
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createdTime">
+          <el-date-picker clearable v-model="queryParams.createdTime" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择创建时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="更新时间" prop="updatedTime">
+          <el-date-picker clearable v-model="queryParams.updatedTime" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择更新时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="resetQuery" class="el-button-defalut">
+            <img src="@/assets/icons/common/reset.png" alt="重置图标">重置
+          </el-button>
+          <el-button type="primary" @click="handleQuery" class="el-button-primary">
+            <img src="@/assets/icons/common/search.png" alt="查询图标">查询
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <!-- 标题和横条以及表格容器 -->
+    <div class="table - title - container">
+      <div class="table-container">
+        <div class="div1"></div>
+      <span class="leave-application-title">员工年假</span>
+      <span class="add">
+      <el-tooltip content="新增" placement="top" >
+      <el-button
+          type="text"
+          plain
+          @click="handleAdd"
+          v-hasPermi="['psa:annualleave:add']"
+          >新增</el-button> 
+      </el-tooltip>   
+      <el-tooltip content="导出" placement="top" >
+      <el-button
+          type="text"
+          plain
+          @click="handleExport"
+          v-hasPermi="['system:project:export']"
+      ><img src="../../../assets/icons/common/export2.png" height="35" width="35"/>
+      </el-button>
+      </el-tooltip>
+ </span>
+
+      <div class="leave-application-line"></div>
+        <el-table v-loading="loading" :data="annualleaveList" @selection-change="handleSelectionChange" border>
+          <el-table-column type="selection" width="55" align="center" />
+          <el-table-column label="姓名" align="center" width="120" prop="uname" />
+          <el-table-column label="年份" align="center" width="120" prop="year" />
+          <el-table-column label="总年假天数" align="center" width="120" prop="totalDays" />
+          <el-table-column label="已使用年假天数" align="center" width="120" prop="usedDays" />
+          <el-table-column label="剩余年假天数" align="center" width="120" prop="remainingDays" />
+          <el-table-column label="创建时间" align="center" width="180" prop="createdTime">
+            <template #default="scope">
+              <span>{{ parseTime(scope.row.createdTime, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="更新时间" align="center" width="180" prop="updatedTime">
+            <template #default="scope">
+              <span>{{ parseTime(scope.row.updatedTime, '{y}-{m}-{d}') }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+            <template #default="scope">
+              <el-tooltip content="编辑" placement="top">
+                <a class="icon-margin" @click="handleUpdate(scope.row)" v-hasPermi="['psa:annualleave:edit']">
+                  <img src="@/assets/icons/common/edit.png" alt="修改图标" />
+                </a>
+              </el-tooltip>
+              <el-tooltip content="删除" placement="top">
+                <a class="icon-margin2" @click="handleDelete(scope.row)" v-hasPermi="['psa:annualleave:remove']">
+                  <img src="@/assets/icons/common/delete.png" alt="删除图标">
+                </a>
+              </el-tooltip>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="pagination-container">
+          <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize" @pagination="getList" />
+        </div>
+      </div>
+    </div>
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="annualleaveRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="姓名" prop="uname">
+          <el-input v-model="form.uname" placeholder="请输入姓名" />
+        </el-form-item>
+        <el-form-item label="年份" prop="year">
+          <el-date-picker v-model="form.year" type="year" value-format="YYYY" placeholder="请选择年份" :editable="false"
+            @change="handleYearChange" :picker-options="pickerOptions" />
+        </el-form-item>
+        <el-form-item label="总年假天数" prop="totalDays">
+          <el-input-number v-model="form.totalDays" :min="0" placeholder="请输入总年假天数" />
+        </el-form-item>
+        <el-form-item label="已使用年假天数" prop="usedDays">
+          <el-input-number v-model="form.usedDays" :min="0" placeholder="请输入已使用年假天数" />
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createdTime">
+          <el-date-picker clearable v-model="form.createdTime" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择创建时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="更新时间" prop="updatedTime">
+          <el-date-picker clearable v-model="form.updatedTime" type="date" value-format="YYYY-MM-DD"
+            placeholder="请选择更新时间">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Annualleave">
+import { listAnnualleave, getAnnualleave, delAnnualleave, addAnnualleave, updateAnnualleave } from "@/api/system/annualleave";
+import { getCurrentInstance, ref, reactive, toRefs, onMounted } from 'vue';
+
+const { proxy } = getCurrentInstance();
+
+const annualleaveList = ref([]);
+const open = ref(false);
+const loading = ref(true);
+const showSearch = ref(true);
+const ids = ref([]);
+const single = ref(true);
+const multiple = ref(true);
+const total = ref(0);
+const title = ref("");
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userId: null,
+    uname: null,
+    year: null,
+    createdTime: null,
+    updatedTime: null
+  },
+  rules: {
+    uname: [
+      { required: true, message: "姓名不能为空", trigger: "blur" }
+    ],
+    year: [
+      { required: true, message: "年份不能为空", trigger: "blur" }
+    ],
+    totalDays: [
+      { required: true, message: "总年假天数不能为空", trigger: "blur" }
+    ],
+    usedDays: [
+      { required: true, message: "已使用年假天数不能为空", trigger: "blur" }
+    ],
+    remainingDays: [
+      { required: true, message: "剩余年假天数不能为空", trigger: "blur" }
+    ],
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+// 日期选择器的配置项
+const pickerOptions = {
+  shortcuts: false,
+  format: 'YYYY',
+  valueFormat: 'YYYY',
+  startDate: '1900-01-01',
+  endDate: new Date().toISOString().split('T')[0],
+  onPick: (date) => {
+    queryParams.value.year = date.getFullYear();
+  }
+};
+
+// 年份选择改变时的处理函数
+const handleYearChange = (val) => {
+  queryParams.value.year = val;
+  form.value.year = val;
+};
+
+
+/** 查询员工年假列表 */
+function getList() {
+  loading.value = true;
+  listAnnualleave(queryParams.value).then(response => {
+    annualleaveList.value = response.rows;
+    total.value = response.total;
+    loading.value = false;
+  });
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false;
+  reset();
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    userId: null,
+    year: null,
+    totalDays: null,
+    usedDays: null,
+    remainingDays: null,
+    createdTime: null,
+    updatedTime: null,
+    uname: null
+  };
+  proxy.resetForm("annualleaveRef");
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1;
+  getList();
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  // 重置姓名搜索框
+  queryParams.value.uname = null;
+  // 重置创建时间搜索框
+  queryParams.value.createdTime = null;
+  // 重置更新时间搜索框
+  queryParams.value.updatedTime = null;
+  // 设置年份为当前年份
+  queryParams.value.year = new Date().getFullYear();
+  getList();
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  // 设置默认年份为当前年份
+  const currentYear = new Date().getFullYear();
+  form.value.year = currentYear;
+  // 设置默认年假天数为10天
+  form.value.totalDays = 10;
+  open.value = true;
+  title.value = "添加员工年假";
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const _id = row.id || ids.value;
+  getAnnualleave(_id).then(response => {
+    form.value = response.data;
+    // 确保年份格式正确
+    if (form.value.year) {
+      form.value.year = String(form.value.year); // 转换为字符串格式，确保和日期选择器兼容
+    }
+    open.value = true;
+    title.value = "修改员工年假";
+  });
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["annualleaveRef"].validate(valid => {
+    if (valid) {
+      // 验证返回值为 -2 时，显示员工不存在
+      if (form.value.userId == -2) {
+        proxy.$modal.msgError("员工不存在，请重新选择员工");
+        return;
+      }
+
+      // 验证已使用天数不能超过总天数
+      if (form.value.usedDays > form.value.totalDays) {
+        proxy.$modal.msgError("已使用年假天数不能超过总年假天数");
+        return;
+      }
+
+      if (form.value.id != null) {
+        updateAnnualleave(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功");
+          open.value = false;
+          getList();
+        });
+      } else {
+        addAnnualleave(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功");
+          open.value = false;
+          getList();
+        });
+      }
+    }
+  });
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value;
+  proxy.$modal.confirm('是否确认删除员工年假编号为"' + _ids + '"的数据项？').then(function () {
+    return delAnnualleave(_ids);
+  }).then(() => {
+    getList();
+    proxy.$modal.msgSuccess("删除成功");
+  }).catch(() => { });
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/annualleave/export', {
+    ...queryParams.value
+  }, `annualleave_${new Date().getTime()}.xlsx`);
+}
+
+// 进入页面时自动设置查询参数为当前年份
+onMounted(() => {
+  const currentYear = new Date().getFullYear();
+  queryParams.value.year = currentYear;
+  form.value.year = currentYear;
+  getList();
+});
+
+</script>
+
+<style>
+.icon-margin {
+  margin: 12px 18px 12px 10px;
+}
+
+.icon-margin2 {
+  margin: 12px 18px 12px 0;
+}
+
+.search-container {
+  border: 1px solid #e4e7ed;
+  /* 搜索框容器边框 */
+  padding: 15px;
+  /* 内边距 */
+  margin-bottom: 15px;
+  /* 与表格容器的间距 */
+}
+
+.table-container {
+  border: 1px solid #e4e7ed;
+  /* 表格容器边框 */
+  padding: 30px;
+  /* 整体内边距，可根据实际情况调整 */
+
+}
+
+.pagination-container {
+  margin-top: 12px;
+  margin-right: 285px;
+}
+
+/* 标题样式*/
+.leave-application-title {
+  width: 72px;
+  height: 15px;
+  font-family: "PingFangSC-Medium", sans-serif;
+  font-weight: 500;
+  font-size: 18px;
+  color: #0D162A;
+  letter-spacing: 0;
+  line-height: 15px;
+  margin-left: 32px;
+  text-align: center;
+}
+
+/*蓝色下划线样式*/
+.leave-application-line {
+  width: 72px;
+  height: 4px;
+  background: #0062FF;
+  margin: 0 0 40px 32px;
+}
+.add {
+  margin-left: 1200px;
+}
+/*空白行*/
+.div1 {
+  height: 22px;
+  width: 200px;
+}
+</style>    
\ No newline at end of file