From f54dc4aa3ec9457dd06fd6ff32d1fdfc1a3a0f5b Mon Sep 17 00:00:00 2001
From: mkbk <2189095126@qq.com>
Date: Sun, 23 Feb 2025 15:42:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E8=8A=82=E5=81=87=E6=97=A5?=
=?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
ruoyi-ui/src/views/oa/holidaycal/index.vue | 268 ++++++++++++++++++++-
1 file changed, 260 insertions(+), 8 deletions(-)
diff --git a/ruoyi-ui/src/views/oa/holidaycal/index.vue b/ruoyi-ui/src/views/oa/holidaycal/index.vue
index af4cd29..7a47422 100644
--- a/ruoyi-ui/src/views/oa/holidaycal/index.vue
+++ b/ruoyi-ui/src/views/oa/holidaycal/index.vue
@@ -10,8 +10,79 @@
+
+
+
+
+
+
+
+
+
+
+ {{ parseTime(scope.row.holidayTime, '{y}-{m}-{d}') }}
+
+
+
+
+
+
+ 修改
+ 删除
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
- 节假日列表
@@ -42,11 +113,66 @@ export default {
activeName: 'first',
holidays: [],
dialogVisible: false,
- currentHoliday: {}
+ currentHoliday: {},
+ loading: false, // New loading state
+
+
+ // 按钮loading
+ buttonLoading: false,
+ // 遮罩层
+ loading: true,
+ // 选中数组
+ ids: [],
+ // 非单个禁用
+ single: true,
+ // 非多个禁用
+ multiple: true,
+ // 显示搜索条件
+ showSearch: true,
+ // 总条数
+ total: 0,
+ // 休假管理表格数据
+ oaHolidayList: [],
+ // 弹出层标题
+ title: "",
+ // 是否显示弹出层
+ open: false,
+ // 查询参数
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ type: undefined,
+ holidayTime: undefined,
+ name: undefined,
+ },
+ // 表单参数
+ form: {},
+ // 表单校验
+ rules: {
+ holidayId: [
+ { required: true, message: "主键id不能为空", trigger: "blur" }
+ ],
+ type: [
+ { required: true, message: "0正常1周日2节假日3调休不能为空", trigger: "change" }
+ ],
+ holidayTime: [
+ { required: true, message: "假期日期不能为空", trigger: "blur" }
+ ],
+ name: [
+ { required: true, message: "假期名称不能为空", trigger: "blur" }
+ ],
+ remark: [
+ { required: true, message: "备注不能为空", trigger: "blur" }
+ ],
+ delFlag: [
+ { required: true, message: "删除标志不能为空", trigger: "blur" }
+ ]
+ }
};
},
methods: {
fetchHolidayData() {
+ this.loading = true; // Set loading to true when fetching data
listOaHoliday({}).then(response => {
this.holidays = response.rows.map(item => ({
date: item.holidayTime.split(" ")[0],
@@ -54,8 +180,10 @@ export default {
name: item.name,
fullData: item
}));
+ this.loading = false; // Set loading to false once data is fetched
}).catch(error => {
console.error("Error fetching holiday data:", error);
+ this.loading = false; // Set loading to false even on error
});
},
isHoliday(date) {
@@ -69,15 +197,17 @@ export default {
handleCellClick(data) {
const holiday = this.holidays.find(holiday => holiday.date === data.day);
if (holiday) {
- // 这里拷贝 fullData 保证不会直接修改列表中的数据
this.currentHoliday = { ...holiday.fullData, type: holiday.type };
this.dialogVisible = true;
}
},
+
+
+
+
+
+
updateHoliday() {
- // 根据当前选择的类型更新 name 字段
- // 举例：若 type 由 0 改为 2，则 name 设为 "节假日"
- // 若 type 由 1 改为 0，则 name 设为 null
switch (this.currentHoliday.type) {
case 0:
this.currentHoliday.name = null;
@@ -94,7 +224,7 @@ export default {
default:
break;
}
-
+
updateOaHoliday(this.currentHoliday).then(response => {
this.dialogVisible = false;
this.fetchHolidayData();
@@ -103,10 +233,120 @@ export default {
console.error("Error updating holiday data:", error);
this.$message.error("更新失败");
});
- }
+
+
+ },
+
+
+ /** 查询休假管理列表 */
+ getList() {
+ this.loading = true;
+ listOaHoliday(this.queryParams).then(response => {
+ this.oaHolidayList = response.rows;
+ this.total = response.total;
+ this.loading = false;
+ });
+ },
+ // 取消按钮
+ cancel() {
+ this.open = false;
+ this.reset();
+ },
+ // 表单重置
+ reset() {
+ this.form = {
+ holidayId: undefined,
+ type: undefined,
+ holidayTime: undefined,
+ name: undefined,
+ createTime: undefined,
+ createBy: undefined,
+ updateTime: undefined,
+ updateBy: undefined,
+ remark: undefined,
+ delFlag: undefined
+ };
+ this.resetForm("form");
+ },
+ /** 搜索按钮操作 */
+ handleQuery() {
+ this.queryParams.pageNum = 1;
+ this.getList();
+ },
+ /** 重置按钮操作 */
+ resetQuery() {
+ this.resetForm("queryForm");
+ this.handleQuery();
+ },
+ // 多选框选中数据
+ handleSelectionChange(selection) {
+ this.ids = selection.map(item => item.holidayId)
+ this.single = selection.length!==1
+ this.multiple = !selection.length
+ },
+ /** 新增按钮操作 */
+ handleAdd() {
+ this.reset();
+ this.open = true;
+ this.title = "添加休假管理";
+ },
+ /** 修改按钮操作 */
+ handleUpdate(row) {
+ this.loading = true;
+ this.reset();
+ const holidayId = row.holidayId || this.ids
+ getOaHoliday(holidayId).then(response => {
+ this.loading = false;
+ this.form = response.data;
+ this.open = true;
+ this.title = "修改休假管理";
+ });
+ },
+ /** 提交按钮 */
+ submitForm() {
+ this.$refs["form"].validate(valid => {
+ if (valid) {
+ this.buttonLoading = true;
+ if (this.form.holidayId != null) {
+ updateOaHoliday(this.form).then(response => {
+ this.$modal.msgSuccess("修改成功");
+ this.open = false;
+ this.getList();
+ }).finally(() => {
+ this.buttonLoading = false;
+ });
+ } else {
+ addOaHoliday(this.form).then(response => {
+ this.$modal.msgSuccess("新增成功");
+ this.open = false;
+ this.getList();
+ }).finally(() => {
+ this.buttonLoading = false;
+ });
+ }
+ }
+ });
+ },
+ /** 删除按钮操作 */
+ handleDelete(row) {
+ const holidayIds = row.holidayId || this.ids;
+ this.$modal.confirm('是否确认删除休假管理编号为"' + holidayIds + '"的数据项？').then(() => {
+ this.loading = true;
+ return delOaHoliday(holidayIds);
+ }).then(() => {
+ this.loading = false;
+ this.getList();
+ this.$modal.msgSuccess("删除成功");
+ }).catch(() => {
+ }).finally(() => {
+ this.loading = false;
+ });
+ },
+
},
created() {
this.fetchHolidayData();
+ this.getList();
}
};
@@ -116,6 +356,7 @@ export default {
border: none !important;
background-color: inherit;
padding: 0;
+ transition: all 0.3s ease; /* Smooth transition for hover effect */
}
.blue-background {
background-color: #dcf2f2;
@@ -130,6 +371,7 @@ export default {
.el-calendar__cell p {
margin: 0;
padding: 0;
+ font-size: 14px; /* Improve text size for better readability */
}
.holiday-name {
font-size: 16px;
@@ -139,5 +381,15 @@ export default {
}
.el-dialog {
max-width: 100%;
+ padding: 20px;
+}
+.dialog-footer {
+ display: flex;
+ justify-content: space-between;
+}
+.loading-spinner {
+ display: block;
+ margin: 20px auto;
}
+