568 lines
14 KiB
Vue
568 lines
14 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2025-10-23 13:43:55
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2025-10-24 11:14:55
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<el-row :gutter="10" style="background-color: #f2f4f9">
|
||
<!--部门数据-->
|
||
<el-col :span="4">
|
||
<div class="head-container">
|
||
<el-tabs v-model="activeName" stretch @tab-click="tabsClick">
|
||
<el-tab-pane label="部门" name="first"></el-tab-pane>
|
||
<el-tab-pane label="班组" name="second"></el-tab-pane>
|
||
</el-tabs>
|
||
<div v-if="activeName == 'first'">
|
||
<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>
|
||
<div v-else>
|
||
<el-input
|
||
v-model="groupName"
|
||
placeholder="请输入班组名称"
|
||
clearable
|
||
size="small"
|
||
prefix-icon="el-icon-search"
|
||
style="margin-bottom: 20px" />
|
||
<el-tree
|
||
:data="groupOptions"
|
||
:props="defaultProps"
|
||
:expand-on-click-node="false"
|
||
:filter-node-method="filterNode"
|
||
ref="tree1"
|
||
default-expand-all
|
||
highlight-current
|
||
@node-click="handleNodeClick1" />
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<el-col :span="20">
|
||
<div class="groupTeamScheduling">
|
||
<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>
|
||
<span
|
||
style="color: #909399; font-size: 12px"
|
||
v-if="activeName == 'first'">
|
||
提示：排班日历仅展示当前选中部门的节假日设置，若休假日中仍有排班，则表示下级组织已通过自定义假期进行排班。
|
||
</span>
|
||
<span v-else>
|
||
组长:{{ showTeamName?.leaderName || '-' }} 组长电话:{{
|
||
showTeamName?.leaderPhone || '-'
|
||
}}
|
||
</span>
|
||
</el-form-item>
|
||
<el-form-item style="float: right">
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
@click="(startDay = new Date()), getHolidayPage()">
|
||
跳转到今天
|
||
</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- 日历区域 -->
|
||
<div class="calenderArea">
|
||
<el-calendar v-model="startDay">
|
||
<template slot="dateCell" slot-scope="{ data }">
|
||
<div v-if="data.type === 'current-month'">
|
||
<!-- 日期 -->
|
||
<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"
|
||
:style="{
|
||
backgroundColor: HolidayList[
|
||
Number(data.day.split('-')[2]) - 1
|
||
]?.isHoliday
|
||
? '#67C23A'
|
||
: '#409EFF',
|
||
}">
|
||
{{
|
||
HolidayList[Number(data.day.split('-')[2]) - 1]
|
||
?.isHoliday
|
||
? '假'
|
||
: '班'
|
||
}}
|
||
<!-- //变更节假日未更新排班计划的角标 -->
|
||
<div
|
||
class="subIcon"
|
||
v-if="
|
||
HolidayList[Number(data.day.split('-')[2]) - 1]
|
||
?.isUpdate
|
||
">
|
||
<el-tooltip
|
||
effect="dark"
|
||
content="本日节假日变更已影响当前排班计划，但尚未同步，请及时处理。"
|
||
placement="top">
|
||
<i
|
||
class="el-icon-warning"
|
||
style="color: #f56c6c"></i>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
</el-col>
|
||
<!-- 显示排班 -->
|
||
<div
|
||
v-if="
|
||
HolidayList[Number(data.day.split('-')[2]) - 1]?.det
|
||
.length > 0
|
||
">
|
||
<el-col
|
||
:span="24"
|
||
v-for="(item, index) in HolidayList[
|
||
Number(data.day.split('-')[2]) - 1
|
||
]?.det.filter(
|
||
(item) =>
|
||
item.schedulingPlanId ==
|
||
HolidayList[Number(data.day.split('-')[2]) - 1]
|
||
?.schedulingPlanId
|
||
)"
|
||
:key="index">
|
||
<el-tooltip
|
||
effect="dark"
|
||
content="点击展示全部排班计划"
|
||
placement="top-start">
|
||
<div
|
||
class="holiday-div"
|
||
:style="{
|
||
backgroundColor:
|
||
holidayDivColor[item?.classesCode],
|
||
}"
|
||
@click="
|
||
holidayLog(
|
||
HolidayList[Number(data.day.split('-')[2]) - 1]
|
||
?.det,
|
||
HolidayList[Number(data.day.split('-')[2]) - 1]
|
||
?.date
|
||
)
|
||
"
|
||
:title="
|
||
item.classesName +
|
||
' | ' +
|
||
item.teamName +
|
||
' | ' +
|
||
item.workTime
|
||
">
|
||
{{
|
||
item.classesName +
|
||
' | ' +
|
||
item.teamName +
|
||
' | ' +
|
||
item.workTime
|
||
}}
|
||
</div>
|
||
</el-tooltip>
|
||
</el-col>
|
||
</div>
|
||
</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="logVisible"
|
||
@cancel="cancelLog"
|
||
:before-close="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 { getUserProfile } from '@/api/system/user';
|
||
import { listByDeptId } from '@/api/group/Schedule';
|
||
import { getEnableData } from '@/api/group/holidaySetting';
|
||
import {
|
||
getDeptSchedulingList,
|
||
getClassSchedulingList,
|
||
} from '@/api/group/calendar';
|
||
import holidayLog from './holidayLog';
|
||
|
||
export default {
|
||
name: '',
|
||
components: {
|
||
holidayLog,
|
||
},
|
||
data() {
|
||
return {
|
||
activeName: 'first',
|
||
startDay: '', // 查询参数
|
||
HolidayList: [],
|
||
// 选择的部门名称
|
||
showDeptName: undefined,
|
||
showTeamName: {},
|
||
// 部门树选项
|
||
deptOptions: undefined,
|
||
groupOptions: undefined,
|
||
// 查询的部门名称
|
||
deptName: undefined,
|
||
groupName: undefined,
|
||
|
||
topDept: {}, // 保存当前用户的部门id为最高级部门id
|
||
deptId: undefined,
|
||
teamId: undefined,
|
||
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name',
|
||
},
|
||
logVisible: false,
|
||
dialogTitle: '',
|
||
holidayDivColor: ['#67c23a', '#69d983', '#f5c931', '#4fa6f0'],
|
||
};
|
||
},
|
||
watch: {
|
||
// 根据名称筛选部门树
|
||
deptName(val) {
|
||
this.$refs.tree.filter(val);
|
||
},
|
||
groupName(val) {
|
||
this.$refs.tree1.filter(val);
|
||
},
|
||
},
|
||
created() {
|
||
this.startDay = new Date();
|
||
// 查询用户个人信息
|
||
getUserProfile().then((response) => {
|
||
this.showDeptName = response.data.dept.name || '';
|
||
this.topDept = {
|
||
name: response.data.dept.name || '',
|
||
id: response.data.dept.id || '',
|
||
}; // 保存当前用户的部门为最高级部门id
|
||
this.deptId = response.data.dept.id || '';
|
||
this.getHolidayPage();
|
||
this.getTreeselect();
|
||
});
|
||
},
|
||
methods: {
|
||
getHolidayPage() {
|
||
const now = new Date(this.startDay);
|
||
const year = now.getFullYear();
|
||
const month = now.getMonth();
|
||
const startTime = `${year}-${String(month + 1).padStart(2, '0')}-01`;
|
||
const lastDate = new Date(year, month + 1, 0).getDate();
|
||
const endTime = `${year}-${String(month + 1).padStart(2, '0')}-${String(
|
||
lastDate
|
||
).padStart(2, '0')}`;
|
||
|
||
this.HolidayList = [];
|
||
if (this.activeName == 'first') {
|
||
getDeptSchedulingList({
|
||
deptId: this.deptId,
|
||
startTime: Date.parse(startTime),
|
||
endTime: Date.parse(endTime),
|
||
}).then((res) => {
|
||
this.HolidayList = res.data;
|
||
});
|
||
} else {
|
||
getClassSchedulingList({
|
||
teamId: this.teamId,
|
||
startTime: Date.parse(startTime),
|
||
endTime: Date.parse(endTime),
|
||
}).then((res) => {
|
||
this.HolidayList = res.data;
|
||
});
|
||
}
|
||
},
|
||
// 切换月份
|
||
selectMonth() {
|
||
this.getHolidayPage();
|
||
},
|
||
/** 查询部门下拉树结构 */
|
||
getTreeselect() {
|
||
getEnableData().then((response) => {
|
||
// 处理 deptOptions 参数
|
||
this.deptOptions = [];
|
||
this.deptOptions.push(...this.handleTree(response.data, 'id'));
|
||
});
|
||
listByDeptId(this.topDept.id).then((response) => {
|
||
this.groupOptions = [];
|
||
this.groupOptions.push(...response.data);
|
||
});
|
||
},
|
||
// 筛选节点
|
||
filterNode(value, data) {
|
||
if (!value) return true;
|
||
return data.name.indexOf(value) !== -1;
|
||
},
|
||
tabsClick() {
|
||
if (this.activeName == 'second' && this.groupOptions.length > 0) {
|
||
this.teamId = this.groupOptions[0].id;
|
||
this.showTeamName = {
|
||
leaderName: this.groupOptions[0].leaderName || '-',
|
||
leaderPhone: this.groupOptions[0].leaderPhone || '-',
|
||
};
|
||
} else if (this.activeName == 'first') {
|
||
this.deptId = this.topDept.id;
|
||
}
|
||
this.getHolidayPage();
|
||
},
|
||
// 节点单击事件
|
||
handleNodeClick(data) {
|
||
this.deptId = data.id;
|
||
this.showDeptName = data.name;
|
||
this.getHolidayPage();
|
||
},
|
||
handleNodeClick1(data) {
|
||
this.teamId = data.id;
|
||
this.showTeamName = {
|
||
leaderName: data.leaderName || '-',
|
||
leaderPhone: data.leaderPhone || '-',
|
||
};
|
||
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 '';
|
||
}
|
||
},
|
||
holidayLog(det, date) {
|
||
this.dialogTitle = this.showDeptName + '-' + date + '-排班详情';
|
||
this.logVisible = true;
|
||
this.$nextTick(() => {
|
||
this.$refs.holidayLogRef.init(det);
|
||
});
|
||
},
|
||
cancelLog() {
|
||
this.dialogTitle = '';
|
||
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;
|
||
overflow: hidden;
|
||
|
||
.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;
|
||
position: relative;
|
||
.subIcon {
|
||
position: absolute;
|
||
top: -18px;
|
||
right: -10px;
|
||
font-size: 10px;
|
||
}
|
||
}
|
||
.holiday-div {
|
||
background-color: #67c23a;
|
||
border-radius: 3px;
|
||
height: 25px;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
line-height: 24px;
|
||
color: #fff;
|
||
margin-bottom: 2px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|