474 lines
11 KiB
Vue
474 lines
11 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2024-07-01 14:54:06
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2025-10-19 00:35:24
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<el-row :gutter="10" style="background-color: #f2f4f9">
|
||
<!--部门数据-->
|
||
<el-col :span="4">
|
||
<div class="head-container">
|
||
<el-input
|
||
v-model="deptName"
|
||
placeholder="请输入部门名称"
|
||
clearable
|
||
size="small"
|
||
prefix-icon="el-icon-search"
|
||
style="margin-bottom: 20px" />
|
||
<el-tree
|
||
:data="deptOptions"
|
||
:props="defaultProps"
|
||
:expand-on-click-node="false"
|
||
:filter-node-method="filterNode"
|
||
ref="tree"
|
||
default-expand-all
|
||
highlight-current
|
||
@node-click="handleNodeClick" />
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="20">
|
||
<div class="groupTeamScheduling">
|
||
<div class="operationArea">
|
||
<el-row>
|
||
<el-col :span="16">
|
||
<div style="height: 40px; font-size: 16px">
|
||
<span style="color: #409eff; font-weight: 600">
|
||
{{ showDeptName }}
|
||
</span>
|
||
节假日设置
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="8">
|
||
<div style="float: right">
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
style="margin-right: 10px"
|
||
@click="addHoliday">
|
||
新增节假日
|
||
</el-button>
|
||
<el-button size="small" @click="holidayLog">
|
||
节假日变更记录
|
||
</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<div class="operationArea">
|
||
<el-form :inline="true" class="demo-form-inline">
|
||
<span class="blue-block"></span>
|
||
<el-form-item label="月份选择">
|
||
<el-date-picker
|
||
v-model="startDay"
|
||
type="month"
|
||
placeholder="选择月"
|
||
size="small"
|
||
@change="selectMonth"
|
||
:clearable="false"
|
||
style="width: 120px"></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item style="float: right">
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
@click="startDay = new Date()">
|
||
跳转到今天
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-tag
|
||
type="warning"
|
||
closable
|
||
style="margin-bottom: 10px; color: black">
|
||
<i class="el-icon-warning" style="color: #ffbd02"></i>
|
||
当前节假日设置为组织架构中最高层级配置，默认自动继承至下属部门。子部门可选择
|
||
<span style="color: red">解除继承</span>
|
||
设置后进行独立修改，复制后不再继承上级设置
|
||
</el-tag>
|
||
</div>
|
||
<!-- 日历区域 -->
|
||
<div class="calenderArea">
|
||
<el-calendar v-model="startDay">
|
||
<template slot="dateCell" slot-scope="{ data }">
|
||
<div v-if="data.type === 'current-month'" @click="showDetail">
|
||
<!-- 日期 -->
|
||
<div class="dateStyle">
|
||
<el-row :gutter="20">
|
||
<el-col :span="18">
|
||
{{ Number(data.day.split('-')[2]) }}
|
||
<div class="lunar-date">{{ getLunarDate(data.day) }}</div>
|
||
</el-col>
|
||
<el-col :span="6"><div class="work-tip">班</div></el-col>
|
||
</el-row>
|
||
</div>
|
||
</div>
|
||
<div
|
||
v-else
|
||
style="font-size: 20px; font-weight: 500; text-align: left">
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
{{ Number(data.day.split('-')[2]) }}
|
||
<span style="font-size: 12px">
|
||
{{ getLunarDate(data.day) }}
|
||
</span>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
</template>
|
||
</el-calendar>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<base-dialog
|
||
:dialogTitle="dialogTitle"
|
||
:dialogVisible="addOrUpdateVisible"
|
||
@cancel="cancel"
|
||
@confirm="handleConfirm"
|
||
:destroy-on-close="true"
|
||
width="40%">
|
||
<add-or-updata
|
||
ref="addOrUpdataRef"
|
||
@refreshPage="getHolidayPage"></add-or-updata>
|
||
<template #footer>
|
||
<slot name="footer">
|
||
<el-row slot="footer" type="flex" justify="end">
|
||
<el-col :span="24">
|
||
<el-button
|
||
v-if="!detail"
|
||
size="small"
|
||
class="btnTextStyle"
|
||
@click="cancel">
|
||
取消
|
||
</el-button>
|
||
<el-button
|
||
v-if="!detail"
|
||
type="primary"
|
||
class="btnTextStyle"
|
||
size="small"
|
||
@click="handleConfirm">
|
||
确定
|
||
</el-button>
|
||
<el-button
|
||
v-if="detail"
|
||
size="small"
|
||
type="primary"
|
||
class="btnTextStyle"
|
||
@click="editHoliday">
|
||
修改
|
||
</el-button>
|
||
<el-button
|
||
v-if="detail"
|
||
class="btnTextStyle"
|
||
size="small"
|
||
@click="deleteHoliday">
|
||
删除
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</slot>
|
||
</template>
|
||
</base-dialog>
|
||
<base-dialog
|
||
dialogTitle="节假日变更记录"
|
||
:dialogVisible="logVisible"
|
||
@cancel="cancelLog"
|
||
:destroy-on-close="true"
|
||
width="70%">
|
||
<holiday-log ref="holidayLogRef"></holiday-log>
|
||
<template #footer>
|
||
<slot name="footer">
|
||
<el-row slot="footer" type="flex" justify="end">
|
||
<el-col :span="24">
|
||
<el-button size="small" class="btnTextStyle" @click="cancelLog">
|
||
取消
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</slot>
|
||
</template>
|
||
</base-dialog>
|
||
</el-row>
|
||
</template>
|
||
|
||
<script>
|
||
import moment from 'moment';
|
||
import { solarToLunar } from 'chinese-lunar';
|
||
|
||
import { listSimpleDepts } from '@/api/system/dept';
|
||
import { getUserProfile } from '@/api/system/user';
|
||
import { deptHolidayList } from '@/api/group/holidaySetting';
|
||
|
||
import addOrUpdata from './add-or-updata.vue';
|
||
import holidayLog from './holidayLog';
|
||
|
||
export default {
|
||
name: '',
|
||
components: {
|
||
addOrUpdata,
|
||
holidayLog,
|
||
},
|
||
data() {
|
||
return {
|
||
startDay: '', // 查询参数
|
||
// 部门树选项
|
||
deptOptions: undefined,
|
||
// 查询的部门名称
|
||
deptName: undefined,
|
||
// 选择的部门名称
|
||
showDeptName: undefined,
|
||
deptId: undefined,
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name',
|
||
},
|
||
dialogTitle: undefined,
|
||
addOrUpdateVisible: false,
|
||
detail: false,
|
||
logVisible: false,
|
||
};
|
||
},
|
||
watch: {
|
||
// 根据名称筛选部门树
|
||
deptName(val) {
|
||
this.$refs.tree.filter(val);
|
||
},
|
||
},
|
||
created() {
|
||
this.startDay = new Date();
|
||
// 查询用户个人信息
|
||
getUserProfile().then((response) => {
|
||
this.showDeptName = response.data.dept.name || '';
|
||
this.deptId = response.data.dept.id || '';
|
||
this.getHolidayPage();
|
||
});
|
||
this.getTreeselect();
|
||
},
|
||
methods: {
|
||
getHolidayPage() {
|
||
deptHolidayList({ deptId: this.deptId }).then((response) => {});
|
||
},
|
||
// 切换月份
|
||
selectMonth() {
|
||
console.log(this.startDay);
|
||
this.getHolidayPage();
|
||
},
|
||
/** 查询部门下拉树结构 */
|
||
getTreeselect() {
|
||
listSimpleDepts().then((response) => {
|
||
// 处理 deptOptions 参数
|
||
this.deptOptions = [];
|
||
this.deptOptions.push(...this.handleTree(response.data, 'id'));
|
||
});
|
||
},
|
||
// 筛选节点
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.name.indexOf(value) !== -1;
|
||
},
|
||
// 节点单击事件
|
||
handleNodeClick(data) {
|
||
this.deptId = data.id;
|
||
this.showDeptName = data.name;
|
||
this.getHolidayPage();
|
||
},
|
||
//获取农历
|
||
getLunarDate(solarDate) {
|
||
try {
|
||
const [year, month, day] = solarDate.split('-').map(Number);
|
||
|
||
const date = new Date(year, month - 1, day);
|
||
const lunar = solarToLunar(date);
|
||
|
||
// 将数字月份和日期转换为中文
|
||
const monthMap = {
|
||
1: '正',
|
||
2: '二',
|
||
3: '三',
|
||
4: '四',
|
||
5: '五',
|
||
6: '六',
|
||
7: '七',
|
||
8: '八',
|
||
9: '九',
|
||
10: '十',
|
||
11: '冬',
|
||
12: '腊',
|
||
};
|
||
|
||
const dayMap = {
|
||
1: '初一',
|
||
2: '初二',
|
||
3: '初三',
|
||
4: '初四',
|
||
5: '初五',
|
||
6: '初六',
|
||
7: '初七',
|
||
8: '初八',
|
||
9: '初九',
|
||
10: '初十',
|
||
11: '十一',
|
||
12: '十二',
|
||
13: '十三',
|
||
14: '十四',
|
||
15: '十五',
|
||
16: '十六',
|
||
17: '十七',
|
||
18: '十八',
|
||
19: '十九',
|
||
20: '二十',
|
||
21: '廿一',
|
||
22: '廿二',
|
||
23: '廿三',
|
||
24: '廿四',
|
||
25: '廿五',
|
||
26: '廿六',
|
||
27: '廿七',
|
||
28: '廿八',
|
||
29: '廿九',
|
||
30: '三十',
|
||
};
|
||
|
||
// 返回 "三月初四" 格式
|
||
return `${monthMap[lunar.month]}月${dayMap[lunar.day]}`;
|
||
} catch (error) {
|
||
console.log(error);
|
||
return '';
|
||
}
|
||
},
|
||
addHoliday() {
|
||
this.addOrUpdateVisible = true;
|
||
this.detail = false;
|
||
this.dialogTitle = '新增节假日';
|
||
this.$nextTick(() => {
|
||
this.$refs.addOrUpdataRef.init();
|
||
});
|
||
},
|
||
holidayLog() {
|
||
this.logVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.holidayLogRef.getDataList();
|
||
});
|
||
},
|
||
cancel() {
|
||
this.addOrUpdateVisible = false;
|
||
},
|
||
handleConfirm() {
|
||
this.$refs.addOrUpdataRef.dataFormSubmit();
|
||
},
|
||
showDetail(id) {
|
||
this.addOrUpdateVisible = true;
|
||
this.detail = true;
|
||
this.dialogTitle = '节假日详情';
|
||
this.$nextTick(() => {
|
||
this.$refs.addOrUpdataRef.init(id, true);
|
||
});
|
||
},
|
||
editHoliday() {
|
||
this.detail = false;
|
||
this.$nextTick(() => {
|
||
this.$refs.addOrUpdataRef.editHoliday();
|
||
});
|
||
},
|
||
deleteHoliday() {
|
||
this.$nextTick(() => {
|
||
this.$refs.addOrUpdataRef.deleteHoliday();
|
||
});
|
||
},
|
||
cancelLog() {
|
||
this.logVisible = false;
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.head-container {
|
||
padding: 20px 10px 0;
|
||
background-color: #fff;
|
||
min-height: calc(100vh - 120px - 8px);
|
||
border-radius: 8px;
|
||
}
|
||
.groupTeamScheduling {
|
||
.operationArea {
|
||
padding: 14px 10px 0 16px;
|
||
margin-bottom: 8px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
.blue-block {
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 16px;
|
||
background-color: #0b58ff;
|
||
border-radius: 1px;
|
||
margin-right: 8px;
|
||
margin-top: 10px;
|
||
}
|
||
.el-form-item {
|
||
margin-bottom: 10px;
|
||
}
|
||
}
|
||
// 日历
|
||
.calenderArea {
|
||
padding: 14px 10px 0 20px;
|
||
background-color: #fff;
|
||
border-radius: 8px;
|
||
min-height: calc(100vh - 120px - 8px - 168px);
|
||
.el-calendar__body {
|
||
padding: 10px 16px 16px 0;
|
||
}
|
||
.el-calendar__header {
|
||
display: none;
|
||
}
|
||
.el-calendar-table > thead {
|
||
height: 48px;
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
background-color: rgba(242, 244, 249, 1);
|
||
}
|
||
.el-calendar-table__row {
|
||
height: 133px;
|
||
.prev,
|
||
.next {
|
||
pointer-events: none;
|
||
}
|
||
.is-selected,
|
||
.is-today {
|
||
background-color: #e4f0fd;
|
||
}
|
||
.el-calendar-day {
|
||
padding: 0;
|
||
height: 100%;
|
||
:hover {
|
||
background-color: #e4f0fd;
|
||
}
|
||
.dateStyle {
|
||
font-size: 20px;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
text-align: left;
|
||
height: 133px;
|
||
line-height: 28px;
|
||
padding: 10px;
|
||
|
||
.lunar-date {
|
||
display: inline-block;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
.work-tip {
|
||
background: #87c1ff;
|
||
color: white;
|
||
font-size: 18px;
|
||
width: 30px;
|
||
text-align: center;
|
||
float: right;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|