Compare commits

...

2 Commits

Author SHA1 Message Date
zwq
31bafae4aa 更新班组 2025-10-24 11:42:24 +08:00
67b6b88863 Merge pull request 'projects/line-new-zhp' (#445) from projects/line-new-zhp into projects/line-new
Reviewed-on: #445
2025-10-24 11:21:24 +08:00
17 changed files with 1865 additions and 257 deletions

View File

@@ -57,7 +57,66 @@ export function listByDeptId(id) {
method: 'get'
})
}
// 作废计划
export function disablePlan(id) {
return request({
url: '/base/group-scheduling-plan/disablePlan?id='+id,
method: 'delete',
})
}
// 同步节假日
export function updateScheduleLater(data) {
return request({
url: '/base/group-holiday/updateScheduleLater',
method: 'post',
data:data
})
}
// 复制计划
export function copyPlan(id) {
return request({
url: '/base/group-scheduling-plan/copyPlan?id='+id,
method: 'get'
})
}
// 列表草稿编辑
export function draftEditing(id) {
return request({
url: '/base/group-scheduling-plan/draftEditing?id='+id,
method: 'get'
})
}
// 排班计划-详情
export function getPlan(id) {
return request({
url: '/base/group-scheduling-plan/get?id='+id,
method: 'get'
})
}
// 弹窗-取消
export function cancelStepThree(id) {
return request({
url: '/base/group-scheduling-plan/cancelStepThree?id='+id,
method: 'delete',
})
}
// 第三步确认并执行 检查计划时间是否冲突,如果有,返回冲突的计划列表
export function checkPlan(data) {
return request({
url: '/base/group-scheduling-plan/checkPlan',
method: 'post',
data:data
})
}
// 第三步确认并执行 执行
export function createStepFour(id) {
return request({
url: '/base/group-scheduling-plan/createStepFour',
method: 'post',
data:id
})
}
// 班组班次下一步至获取预览
export function createStepTwo(data) {
return request({
@@ -73,3 +132,12 @@ export function returnStepTwo(id) {
method: 'delete',
})
}
// 第三步获取预览
export function getPerView(data) {
return request({
url: '/base/group-scheduling-plan/getPerView',
method: 'post',
data:data
})
}

18
src/api/group/calendar.js Normal file
View File

@@ -0,0 +1,18 @@
import request from '@/utils/request'
// 获取部门及下级部门排班list
export function getDeptSchedulingList(data) {
return request({
url: '/base/group-team-scheduling/getDeptSchedulingList',
method: 'post',
data: data
})
}
// 某个班组的排班list
export function getClassSchedulingList(data) {
return request({
url: '/base/group-team-scheduling/getClassSchedulingList',
method: 'post',
data: data
})
}

View File

@@ -2,19 +2,28 @@
* @Author: zwq
* @Date: 2025-10-18 21:24:37
* @LastEditors: zwq
* @LastEditTime: 2025-10-18 23:07:37
* @LastEditTime: 2025-10-22 14:34:29
* @Description:
*/
import request from '@/utils/request'
// 获得节假日基础信息分页
export function deptHolidayList(query) {
export function deptHolidayPage(query) {
return request({
url: '/base/group-holiday/page',
method: 'get',
params: query
})
}
// 获得部门节假日信息
export function deptHolidayList(data) {
return request({
url: '/base/group-holiday/deptHolidayList',
method: 'post',
data: data
})
}
// 创建节假日基础信息
export function createHoliday(data) {
@@ -24,6 +33,14 @@ export function createHoliday(data) {
data: data
})
}
// 节假日操作后直接更新排班日历
export function updateSchedule(data) {
return request({
url: '/base/group-holiday/updateSchedule',
method: 'post',
data: data
})
}
// 更新节假日基础信息
export function updateHoliday(data) {
@@ -33,14 +50,30 @@ export function updateHoliday(data) {
data: data
})
}
// 删除节假日基础信息前校验是否影响排班
export function checkDeleteHoliday(id) {
return request({
url: '/base/group-holiday/checkDelete?id=' + id,
method: 'delete'
})
}
// 删除
export function deleteHolidayn(id) {
export function deleteHoliday(id) {
return request({
url: '/base/group-holiday/delete?id=' + id,
method: 'delete'
})
}
// 获得节假日基础信息
export function getHoliday(id) {
return request({
url: '/base/group-holiday/get?id=' + id,
method: 'get'
})
}
// 获得节假日变动日志分页
export function deptHolidayLogList(query) {
return request({
@@ -49,3 +82,11 @@ export function deptHolidayLogList(query) {
params: query
})
}
// 获得用户本人及以下的部门扁平化结构
export function getEnableData() {
return request({
url: '/base/group-team-scheduling/getEnableData',
method: 'get',
})
}

View File

@@ -0,0 +1,83 @@
<!--
* @Author: zwq
* @Date: 2025-10-23 13:43:55
* @LastEditors: zwq
* @LastEditTime: 2025-10-23 16:50:43
* @Description:
-->
<template>
<div class="app-container">
<div v-for="item in groupClassArr" :key="item.planId">
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
{{item.planName}}
</small-title>
<base-table
:table-props="tableProps"
:table-data="
tableData.filter((titem) => titem.schedulingPlanId == item.planId)
"></base-table>
</div>
</div>
</template>
<script>
import SmallTitle from '../Schedule/SmallTitle';
const tableProps = [
{
prop: 'classesName',
label: '班次名称',
},
{
prop: 'workTime',
label: '班次时间',
},
{
prop: 'teamName',
label: '班组名称',
},
{
prop: 'teamLeader',
label: '组长',
},
{
prop: 'teamLeaderPhone',
label: '组长电话',
},
];
export default {
components: {
SmallTitle,
},
data() {
return {
tableProps,
tableData: [],
groupClassArr: [],
};
},
created() {},
methods: {
init(det) {
this.tableData = det;
//返回计划名和id
const arr = det.map((item) => {
const obj = {
planName: item.schedulingPlanName,
planId: item.schedulingPlanId,
};
return obj;
});
//去重
const map = new Map();
arr.forEach((item) => {
if (!map.has(item.planId)) {
map.set(item.planId, item);
}
});
this.groupClassArr = Array.from(map.values());
},
},
};
</script>

View File

@@ -0,0 +1,567 @@
<!--
* @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>

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2025-10-13 15:07:24
* @LastEditors: zwq
* @LastEditTime: 2025-10-17 17:01:35
* @LastEditTime: 2025-10-24 09:19:17
* @Description:
-->
<template>
@@ -116,15 +116,7 @@
<el-input
v-model="dataForm.shiftSustainedNum"
oninput="value=value.replace(/^(0+)|[^\d]+/g,'')">
<el-select
style="width: 80px"
v-model="dataForm.shiftSustainedType"
slot="append">
<el-option label="日" :value="1"></el-option>
<el-option label="周" :value="2"></el-option>
<el-option label="月" :value="3"></el-option>
<el-option label="季" :value="4"></el-option>
</el-select>
<span slot="append"></span>
</el-input>
</el-form-item>
</el-col>
@@ -176,7 +168,10 @@
</base-table>
</div>
<div v-if="stepNum == 3">
<small-title style="margin: 16px 0" size="sm" :no-padding="true">
<small-title
style="margin: 16px 0; font-size: 16px"
size="de"
:no-padding="true">
排班计划预览
<span style="font-size: 14px; color: #ff1c15">
系统将根据以下设置按班组轮班顺序依次循环每日班次生成正式排班计划请确认
@@ -263,6 +258,31 @@
</div>
</div>
</div>
<small-title
style="margin: 16px 0; font-size: 16px"
size="de"
:no-padding="true">
预览周期
<span>
<el-select
style="height: 20px"
v-model="period"
size="mini"
@change="setPeriod"
placeholder="请选择">
<el-option
v-for="item in periodArr"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</span>
</small-title>
<base-table
v-if="tableProps3.length > 0"
:table-props="tableProps3"
:table-data="tableData3"></base-table>
</div>
<base-dialog
:dialogTitle="'修改班次'"
@@ -306,11 +326,24 @@
<script>
import deptSelect from './../deptSelect.vue';
import SmallTitle from './SmallTitle';
import propfirstSpan from './propfirstSpan.vue';
import propSpan from './propSpan.vue';
import { parseTime } from '@/filter/code-filter';
import editClass from './edit-class.vue';
import addGroup from './add-group.vue';
import bindLine from './bind-line.vue';
import { getCode, createStepOne, returnStepOne } from '@/api/group/Schedule';
import {
getCode,
createStepOne,
returnStepOne,
createStepTwo,
returnStepTwo,
getPerView,
draftEditing,
cancelStepThree,
checkPlan,
createStepFour,
} from '@/api/group/Schedule';
const tableProps1 = [
{
@@ -318,18 +351,18 @@ const tableProps1 = [
label: '班次名称',
},
{
prop: 'startDay',
prop: 'startTime',
label: '开始时间',
// filter: (val) => {
// parseTime(val, '{H}:{mm}');
// },
filter: (val) => {
return val ? val.slice(0, -3) : '-';
},
},
{
prop: 'endDay',
prop: 'endTime',
label: '结束时间',
// filter: (val) => {
// parseTime(val, '{H}:{mm}');
// },
filter: (val) => {
return val ? val.slice(0, -3) : '-';
},
},
{
prop: 'remark',
@@ -356,7 +389,7 @@ const tableProps2 = [
width: 110,
},
{
prop: 'code1',
prop: 'lineName',
label: '产线及工段',
},
];
@@ -368,6 +401,8 @@ export default {
editClass,
addGroup,
bindLine,
propfirstSpan,
propSpan,
},
data() {
return {
@@ -383,6 +418,7 @@ export default {
},
],
stepNum: 1, // 当前第几步
shiftTypeEdit: undefined, //该值为编辑时获取的shiftType到第二步判断dataForm.shiftType是否改变同时改变班次信息
//第一步参数
dataForm: {
id: undefined,
@@ -527,41 +563,55 @@ export default {
class2: 'B',
},
],
period: 7, //预览周期
periodArr: [
{
value: 7,
label: '7天',
},
{
value: 14,
label: '14天',
},
{
value: 30,
label: '30天',
},
],
tableProps3: [],
tableData3: [],
};
},
methods: {
//子组件获取的部门id
setDeptId(val) {
this.dataForm.deptId = val;
},
//详情时传给子组件的部门id
setDataForm() {
this.$refs.deptSelect.setID(this.dataForm.deptId);
},
init() {
init(id) {
this.dataForm.id = id || undefined;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
getCode().then((res) => {
this.dataForm.code = res.data;
});
if (this.dataForm.id) {
draftEditing(this.dataForm.id).then((res) => {
this.dataForm = res.data?.stepOne;
this.shiftTypeEdit = res.data?.stepOne.shiftType;
this.setDataForm();
this.tableData1 = res.data?.stepTwo.groupPlanClassesBaseVOList;
this.tableData2 = res.data?.stepTwo.groupPlanTeamBaseVOList;
this.tableData2.forEach((item, index) => {
let lineName = '';
lineName = this.setLineName(item.bindLineTree, lineName);
this.$set(
this.tableData2[index],
'lineName',
lineName.slice(0, -1)
);
});
});
} else {
getCode().then((res) => {
this.dataForm.code = res.data;
});
}
});
},
handleClick1(val) {
this.addOrUpdateVisible1 = true;
this.$nextTick(() => {
this.$refs.editClassRef.init(val.data);
});
},
handleClick2(val) {
if (val.type === 'bind') {
this.addOrUpdateVisible3 = true;
this.$nextTick(() => {
this.$refs.bindLineRef.init(val.data.id);
});
} else if (val.type === 'delete') {
this.tableData2.splice(val.data._pageIndex - 1, 1);
}
},
//上一步
upSubmit() {
if (this.stepNum == 2) {
returnStepOne(this.dataForm.id).then((res) => {
@@ -571,8 +621,14 @@ export default {
this.setDataForm();
});
});
} else if (this.stepNum == 3) {
returnStepTwo(this.dataForm.id).then((res) => {
this.stepNum -= 1;
this.$emit('setSN', this.stepNum);
});
}
},
//下一步
nextSubmit() {
if (this.stepNum == 1) {
this.$refs['dataForm'].validate((valid) => {
@@ -585,93 +641,191 @@ export default {
return;
}
createStepOne(this.dataForm).then((res) => {
this.dataForm.id = res.data;
if (!this.dataForm.id) {
this.dataForm.id = res.data;
}
this.stepNum += 1;
this.$emit('setSN', this.stepNum);
this.setTWOclass(); // 第一步提交后,根据倒班方式设置第二部班次
if (
!this.dataForm.id ||
this.dataForm.shiftType !== this.shiftTypeEdit
) {
this.setTWOclass(); // (新增时或者编辑时倒班方式变了)第一步提交后,根据倒班方式设置第二部班次
}
});
});
return;
}
if (this.stepNum == 2) {
let data = {}
data.planId = this.dataForm.id
data.groupPlanClassesBaseVOList = [] //排班-班次信息list
this.tableData1.forEach((item,index)=>{
const obj = {
sort: index+1,
name : item.name,
remark: item.remark,
startTime: {
hour:item.startDay.split(':')[0],
minute:item.startDay.split(':')[1],
},
endTime: {
hour:item.endDay.split(':')[0],
minute:item.endDay.split(':')[1],
}
}
data.groupPlanClassesBaseVOList.push(obj)
})
data.groupPlanTeamBaseVOList = [] //排班-班组信息list
this.tableData2.forEach(item=>{
const obj = {
teamId:item.id,
bindData: ''
}
data.groupPlanTeamBaseVOList.push(obj)
})
this.stepNum += 1;
this.$emit('setSN', this.stepNum);
if (!this.tableData2 || this.tableData2.length == 0) {
this.$message('班组不能为空');
return;
}
let isbindLine = false;
this.tableData2.forEach((item) => {
if (!item.bindLineTree || item.bindLineTree.length == 0) {
isbindLine = true;
}
});
if (isbindLine) {
this.$message('生产班组必须绑定产线或工段');
return;
}
const ids = this.tableData2.map((item) => item.id);
const uniqueIds = [...new Set(ids)];
if (ids.length !== uniqueIds.length) {
this.$message('存在重复的班组,请检查!');
return;
}
if (this.dataForm.shiftType == 1 && this.tableData2.length > 1) {
this.$message('白班,班组数量仅支持 1个 班组');
return;
} else if (this.dataForm.shiftType == 2 && this.tableData2.length < 2) {
this.$message('两班倒,班组数量至少 2个 班组');
return;
} else if (this.dataForm.shiftType == 3 && this.tableData2.length < 3) {
this.$message('三班倒,班组数量至少 3个 班组');
return;
}
let data = {};
data.planId = this.dataForm.id;
data.groupPlanClassesBaseVOList = []; //排班-班次信息list
this.tableData1.forEach((item, index) => {
const obj = {
sort: index + 1,
name: item.name,
remark: item.remark,
startTime: item.startTime,
endTime: item.endTime,
daySpan: item.daySpan,
};
data.groupPlanClassesBaseVOList.push(obj);
});
data.groupPlanTeamBaseVOList = []; //排班-班组信息list
this.tableData2.forEach((item) => {
const obj = {
teamId: item.id,
name: item.name,
leaderName: item.leaderName,
leaderPhone:item.leaderPhone,
bindData: JSON.stringify(item.bindLineTree),
};
data.groupPlanTeamBaseVOList.push(obj);
});
createStepTwo(data).then((res) => {
this.stepNum += 1;
this.$emit('setSN', this.stepNum);
this.getThreeGroup(7); // 第三步,进来加载预览排班,默认7天预览周期
});
return;
}
if (this.stepNum == 3) {
this.stepNum = 1;
this.$emit('setSN', this.stepNum);
let data = { planId: this.dataForm.id };
data.groupPlanTeamBaseVOList = []; //排班-班组信息list
this.tableData2.forEach((item) => {
const obj = {
teamId: item.id,
name: item.name,
bindData: JSON.stringify(item.bindLineTree),
};
data.groupPlanTeamBaseVOList.push(obj);
});
checkPlan(data).then((RES) => {
createStepFour(this.dataForm.id).then((res) => {
this.$modal.msgSuccess('创建计划成功');
this.stepNum = 1;
this.$emit('setSN', this.stepNum);
this.$emit('refreshDataList');
});
});
return;
}
},
//第一步
//子组件获取的部门id
setDeptId(val) {
this.dataForm.deptId = val;
},
//详情时传给子组件的部门id
setDataForm() {
this.$refs.deptSelect.setID(this.dataForm.deptId);
},
//第二步
//设置第二部班次
setTWOclass() {
this.tableData1 = [];
if (this.dataForm.shiftType == 1) {
const obj = {
name: '长白班',
startDay: '8:00',
endDay: '17:00',
startTime: '08:00:00',
endTime: '17:00:00',
daySpan: 0, //是否跨天
code: 1, //排版日历页面,根据这个字段显示颜色
};
this.tableData1.push(obj);
} else if (this.dataForm.shiftType == 2) {
const obj1 = {
name: '白班',
startDay: '8:00',
endDay: '20:00',
startTime: '08:00:00',
endTime: '20:00:00',
daySpan: 0,
code: 1,
};
const obj2 = {
name: '夜班',
startDay: '20:00',
endDay: '8:00',
startTime: '20:00:00',
endTime: '08:00:00',
daySpan: 1,
code: 3,
};
this.tableData1.push(obj1, obj2);
} else if (this.dataForm.shiftType == 3) {
const obj1 = {
name: '早班',
startDay: '8:00',
endDay: '16:00',
startTime: '08:00:00',
endTime: '16:00:00',
daySpan: 0,
code: 1,
};
const obj2 = {
name: '中班',
startDay: '16:00',
endDay: '00:00',
startTime: '16:00:00',
endTime: '00:00:00',
daySpan: 1,
code: 2,
};
const obj3 = {
name: '夜班',
startDay: '00:00',
endDay: '8:00',
startTime: '00:00:00',
endTime: '08:00:00',
daySpan: 0,
code: 3,
};
this.tableData1.push(obj1, obj2, obj3);
}
},
//编辑班次
handleClick1(val) {
this.addOrUpdateVisible1 = true;
this.$nextTick(() => {
this.$refs.editClassRef.init(val.data);
});
},
//班组操作
handleClick2(val) {
if (val.type === 'bind') {
this.addOrUpdateVisible3 = true;
this.$nextTick(() => {
this.$refs.bindLineRef.init(val.data);
});
} else if (val.type === 'delete') {
this.tableData2.splice(val.data._pageIndex - 1, 1);
}
},
// 新增班组
addNewGroup() {
this.addOrUpdateVisible2 = true;
@@ -705,10 +859,93 @@ export default {
this.tableData2.push(...val);
this.cancel2();
},
refreshTableData3(val) {
console.log(val);
refreshTableData3(index, val) {
this.tableData2[index].bindLineTree = val;
let lineName = '';
lineName = this.setLineName(val, lineName);
if (lineName) {
this.$set(this.tableData2[index], 'lineName', lineName.slice(0, -1));
}
this.cancel3();
},
//提取绑定的产线工段名展示出来
setLineName(val, lineName) {
val.forEach((item) => {
lineName += item.name + '';
if (item.children && item.children.length > 0) {
const childName = this.setLineName(item.children, lineName);
lineName = childName;
}
});
return lineName;
},
//第三步
// 进来加载预览排班
getThreeGroup(day) {
const data = {
id: this.dataForm.id,
count: day,
};
this.tableProps3 = [];
this.tableData3 = [];
getPerView(data).then((res) => {
this.setThreeData(res.data);
});
},
setPeriod(val) {
this.getThreeGroup(val);
},
setThreeData(data) {
//表头第一个为班次名称
const propfirst = {
prop: 'name',
label: '',
align: 'center',
fixed: true,
subcomponent: propfirstSpan,
};
this.tableProps3.push(propfirst);
data.forEach((item, index) => {
//设置所有日期为表头
const obj = {
prop: 'daydata' + index,
label: item.day,
work: item.work,
subcomponent: propSpan,
};
this.tableProps3.push(obj);
item.det.forEach((sItem, sIndex) => {
if (index === 0) {
let sObj = {
name: sItem.classesName + '/' + sItem.time,
sort: sItem.sort,
};
sObj['daydata' + index] = item.work
? sItem.teamName
: item.holidayName;
this.tableData3.push(sObj);
} else {
this.$set(
this.tableData3[sIndex],
'daydata' + index,
item.work ? sItem.teamName : item.holidayName
);
this.$set(this.tableData3[sIndex], 'sort', sItem.sort);
}
});
});
},
cancelStep() {
if (this.stepNum > 1) {
cancelStepThree(this.dataForm.id).then((res) => {
this.$message('已取消计划');
this.$emit('refreshDataList');
});
} else {
this.$emit('refreshDataList');
}
},
},
};
</script>

View File

@@ -31,7 +31,6 @@ export default {
components: { treeTransfer },
data() {
return {
groupId: undefined,
title: ['待选', '已选'],
mode: 'transfer',
fromData: [], //左边内容
@@ -39,10 +38,10 @@ export default {
};
},
methods: {
init(id) {
init(val) {
this._pageIndex = val._pageIndex-1;
this.fromData = [];
this.toData = [];
this.groupId = id;
getGroupPlanTree().then((res) => {
this.fromData = res.data;
this.fromData.forEach((item) => {
@@ -62,7 +61,7 @@ export default {
},
// 表单提交
dataFormSubmit() {
this.$emit('refreshTableData',this.toData);
this.$emit('refreshTableData', this._pageIndex,this.toData);
},
},
};

View File

@@ -0,0 +1,187 @@
<!--
* @Author: zwq
* @Date: 2025-10-21 14:27:23
* @LastEditors: zwq
* @LastEditTime: 2025-10-21 15:02:27
* @Description:
-->
<template>
<div>
<div class="info-div">
<div>
<span class="title">计划编号:</span>
{{ infoData.code }}
</div>
<div>
<span class="title">计划状态:</span>
{{ ['', '草稿', '已确认', '已作废'][infoData.status] }}
</div>
<div>
<span class="title">计划名称:</span>
{{ infoData.name }}
</div>
<div>
<span class="title">部门:</span>
{{ infoData.deptName }}
</div>
<div>
<span class="title">开始时间:</span>
{{ parseTime(infoData.startDay) }}
</div>
<div>
<span class="title">结束时间:</span>
{{ parseTime(infoData.endDay) }}
</div>
<div>
<span class="title">周末休假方式:</span>
{{ ['', '双休', '周六休', '周日休', '不休'][infoData.weekType] }}
</div>
<div>
<span class="title">倒班方式:</span>
{{ ['', '长白班', '两班倒', '三班倒'][infoData.shiftType] }}
</div>
<div>
<span class="title">同班次连排:</span>
{{ infoData.shiftSustainedNum }}
</div>
<div>
<span class="title">创建人:</span>
{{ infoData.creator }}
</div>
<div>
<span class="title">创建时间:</span>
{{ parseTime(infoData.createTime) }}
</div>
<div v-if="infoData.status == 3">
<span class="title">作废时间:</span>
{{ parseTime(infoData.disableTime) }}
</div>
<div>
<span class="title">备注:</span>
{{ infoData.remark }}
</div>
</div>
<div>
<el-tabs v-model="activeName" stretch>
<el-tab-pane label="班次" name="first"></el-tab-pane>
<el-tab-pane label="班组" name="second"></el-tab-pane>
</el-tabs>
<base-table
v-if="activeName == 'first'"
:table-props="tableProps1"
:page="1"
:limit="10"
:table-data="tableData1"></base-table>
<base-table
v-else
:table-props="tableProps2"
:page="1"
:limit="10"
:table-data="tableData2"></base-table>
</div>
</div>
</template>
<script>
import { parseTime } from '@/filter/code-filter';
import { getPlan } from '@/api/group/Schedule';
const tableProps1 = [
{
prop: 'name',
label: '班次名称',
},
{
prop: 'startTime',
label: '开始时间',
filter: (val) => {
return val ? val.slice(0, -3) : '-';
},
},
{
prop: 'endTime',
label: '结束时间',
filter: (val) => {
return val ? val.slice(0, -3) : '-';
},
},
{
prop: 'remark',
label: '备注',
},
];
const tableProps2 = [
{
prop: 'code',
label: '班组编号',
width: 140,
},
{
prop: 'name',
label: '班组名称',
},
{
prop: 'isProduction',
label: '是否生产班组',
filter: (val) => {
return val ? '是' : '否';
},
width: 110,
},
{
prop: 'lineName',
label: '产线及工段',
},
];
export default {
data() {
return {
infoData: {},
activeName: 'first',
tableProps1,
tableData1: [],
tableProps2,
tableData2: [],
};
},
methods: {
init(id) {
this.infoData = {};
getPlan(id).then((res) => {
this.infoData = res.data || {};
console.log(res);
this.tableData1 = res.data?.groupPlanClassesBaseVOList;
this.tableData2 = res.data?.groupPlanTeamBaseVOList;
this.tableData2.forEach((item, index) => {
let lineName = '';
lineName = this.setLineName(item.bindLineTree, lineName);
this.$set(this.tableData2[index], 'lineName', lineName.slice(0, -1));
});
});
},
//提取绑定的产线工段名展示出来
setLineName(val, lineName) {
val.forEach((item) => {
lineName += item.name + '';
if (item.children && item.children.length > 0) {
const childName = this.setLineName(item.children, lineName);
lineName = childName;
}
});
return lineName;
},
},
};
</script>
<style scoped>
.info-div {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.title {
font-weight: bold;
}
</style>

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2025-10-15 16:31:11
* @LastEditTime: 2025-10-20 10:23:52
* @Description:
-->
<template>
@@ -32,22 +32,22 @@
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="开始时间" prop="startDay">
<el-form-item label="开始时间" prop="startTime">
<el-time-picker
style="width: 100%"
format="H:mm"
value-format="H:mm"
v-model="dataForm.startDay"
value-format="HH:mm:ss"
v-model="dataForm.startTime"
placeholder="选择日期时间"></el-time-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="结束时间" prop="endDay">
<el-form-item label="结束时间" prop="endTime">
<el-time-picker
style="width: 100%"
format="H:mm"
value-format="H:mm"
v-model="dataForm.endDay"
value-format="HH:mm:ss"
v-model="dataForm.endTime"
placeholder="选择日期时间"></el-time-picker>
</el-form-item>
</el-col>
@@ -72,8 +72,8 @@ export default {
id: undefined,
index: undefined,
name: undefined,
startDay: undefined,
endDay: undefined,
startTime: undefined,
endTime: undefined,
remark: undefined,
},
_pageIndex: 1,
@@ -82,10 +82,10 @@ export default {
name: [
{ required: true, message: '班次名称不能为空', trigger: 'blur' },
],
startDay: [
startTime: [
{ required: true, message: '开始时间不能为空', trigger: 'change' },
],
endDay: [
endTime: [
{ required: true, message: '结束时间不能为空', trigger: 'change' },
],
},
@@ -96,8 +96,8 @@ export default {
this._pageIndex = val._pageIndex-1;
this.dataForm.index = val._pageIndex || 1;
this.dataForm.name = val.name || undefined;
this.dataForm.startDay = val.startDay || undefined;
this.dataForm.endDay = val.endDay || undefined;
this.dataForm.startTime = val.startTime || undefined;
this.dataForm.endTime = val.endTime || undefined;
this.dataForm.remark = val.remark || undefined;
},
// 表单提交

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2025-10-11 14:27:37
* @LastEditors: zwq
* @LastEditTime: 2025-10-15 16:42:28
* @LastEditTime: 2025-10-23 16:31:41
* @Description:
-->
<template>
@@ -95,7 +95,7 @@
<method-btn
v-if="tableBtn.length"
slot="handleBtn"
:width="80"
:width="270"
label="操作"
:method-list="tableBtn"
@clickBtn="handleClick" />
@@ -112,7 +112,7 @@
@confirm="handleConfirm"
:before-close="handleCancel"
:destroy-on-close="true"
append-to-body
append-to-body
width="60%">
<add-or-update
ref="addOrUpdate"
@@ -141,7 +141,7 @@
class="btnTextStyle"
size="small"
plain
@click="handleConfirm">
@click="successSubmit">
保存草稿
</el-button>
<el-button
@@ -156,6 +156,30 @@
</slot>
</template>
</base-dialog>
<base-dialog
:dialogTitle="'排班计划详情'"
:dialogVisible="detailVisible"
@cancel="detailCancel"
:before-close="detailCancel"
:destroy-on-close="true"
append-to-body
width="50%">
<detail ref="detailRef"></detail>
<template #footer>
<slot name="footer">
<el-row slot="footer" type="flex" justify="end">
<el-col :span="24">
<el-button
size="small"
class="btnTextStyle"
@click="detailCancel">
取消
</el-button>
</el-col>
</el-row>
</slot>
</template>
</base-dialog>
</div>
</template>
@@ -165,8 +189,15 @@ import deptSelect from './../deptSelect.vue';
import basicPage from '@/mixins/basic-page';
import subSpan from './subSpan.vue';
import subStatus from './subStatus.vue';
import detail from './detail.vue';
import { parseTime } from '@/filter/code-filter';
import { getGroupPlanPage, deleteGroupPlan } from '@/api/group/Schedule';
import {
getGroupPlanPage,
deleteGroupPlan,
copyPlan,
disablePlan,
updateScheduleLater,
} from '@/api/group/Schedule';
const tableProps = [
{
@@ -206,7 +237,7 @@ const tableProps = [
subcomponent: subSpan,
},
{
prop: 'deptId',
prop: 'deptName',
label: '部门',
},
{
@@ -337,11 +368,13 @@ export default {
status: '',
},
stepNum: 1, // 新增编辑时当前第几步
detailVisible: false,
};
},
components: {
AddOrUpdate,
deptSelect,
detail
},
created() {},
methods: {
@@ -396,10 +429,15 @@ export default {
setStepNum(val) {
this.stepNum = val;
},
// dialog取消
handleCancel() {
successSubmit() {
this.addOrUpdateVisible = false;
this.addOrEditTitle = '';
this.stepNum = 1;
this.getDataList();
},
// dialog取消
handleCancel() {
this.$refs.addOrUpdate.cancelStep();
},
handleConfirm(val) {
if (val == 'up') {
@@ -408,6 +446,41 @@ export default {
this.$refs.addOrUpdate.nextSubmit();
}
},
//tableBtn点击
handleClick(val) {
if (val.type === 'edit') {
this.addOrUpdateVisible = true;
this.addOrEditTitle = '编辑';
this.$nextTick(() => {
this.$refs.addOrUpdate.init(val.data.id);
});
} else if (val.type === 'delete') {
this.deleteHandle(val.data.id, val.data.name, val.data._pageIndex);
} else if (val.type === 'detail') {
this.detailVisible = true;
this.$nextTick(() => {
this.$refs.detailRef.init(val.data.id);
});
} else if (val.type === 'cancel') {
disablePlan(val.data.id).then((res) => {
this.$modal.msgSuccess('作废成功');
this.getDataList()
});
} else if (val.type === 'sync') {
updateScheduleLater({ planId: val.data.id }).then((res) => {
this.$modal.msgSuccess('同步节假日成功');
this.getDataList()
});
} else if (val.type === 'copy') {
copyPlan(val.data.id).then((res) => {
this.$modal.msgSuccess('复制成功');
this.getDataList()
});
}
},
detailCancel() {
this.detailVisible = false;
},
},
};
</script>
@@ -449,21 +522,21 @@ export default {
margin: 4px 0;
}
body .el-dialog__header {
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
padding: 13px 24px;
border-bottom: 1px solid #e9e9e9;
font-size: 16px;
color: rgba(0, 0, 0, 0.85);
font-weight: 500;
padding: 13px 24px;
border-bottom: 1px solid #e9e9e9;
}
body .el-dialog__header .titleStyle::before{
content: '';
display: inline-block;
width: 4px;
height: 16px;
background-color: #0B58FF;
border-radius: 1px;
margin-right: 8px;
position: relative;
top: 2px;
body .el-dialog__header .titleStyle::before {
content: '';
display: inline-block;
width: 4px;
height: 16px;
background-color: #0b58ff;
border-radius: 1px;
margin-right: 8px;
position: relative;
top: 2px;
}
</style>

View File

@@ -0,0 +1,36 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 16:18:41
* @LastEditors: zwq
* @LastEditTime: 2025-10-21 13:54:52
* @Description:
-->
<template>
<span>
<el-tag
v-if="injectData.work"
size="small"
:type="['', 'success', 'warning'][injectData.sort]">
{{ injectData[injectData.prop] }}
</el-tag>
<el-tag v-else effect="dark" size="small" type="info">
{{ injectData[injectData.prop] }}
</el-tag>
</span>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
created() {},
methods: {},
};
</script>

View File

@@ -0,0 +1,33 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 16:18:41
* @LastEditors: zwq
* @LastEditTime: 2025-10-20 10:13:26
* @Description:
-->
<template>
<div>
<div>
{{ injectData.name.split('/')[0] }}
</div>
<div>
{{ injectData.name.split('/')[1] }}
</div>
</div>
</template>
<script>
export default {
props: {
injectData: {
type: Object,
default: () => ({}),
},
},
data() {
return {};
},
created() {},
methods: {},
};
</script>

View File

@@ -1,9 +1,16 @@
<!--
* @Author: zwq
* @Date: 2025-10-13 16:18:41
* @LastEditors: zwq
* @LastEditTime: 2025-10-20 10:13:26
* @Description:
-->
<template>
<span>
{{
injectData.shiftSustainedNum +
(injectDatashiftSustainedType
? ['', '日', '周', '月', '季'][injectDatashiftSustainedType]
(injectData.shiftSustainedType
? ['', '日', '周', '月', '季'][injectData.shiftSustainedType]
: '')
}}
</span>

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2025-10-11 14:27:37
* @LastEditors: zwq
* @LastEditTime: 2025-10-13 14:44:29
* @LastEditTime: 2025-10-24 09:11:11
* @Description:
-->
<template>
@@ -126,7 +126,7 @@ const tableProps = [
width: 100,
},
{
prop: 'deptId',
prop: 'deptName',
label: '所属部门',
},
{

View File

@@ -2,101 +2,143 @@
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2025-10-19 00:09:11
* @LastEditTime: 2025-10-23 13:29:58
* @Description:
-->
<template>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-position="top"
label-width="80px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="节假日名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
:disabled="detail"
placeholder="请输入节假日名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="日历类型" prop="calendarType">
<el-select
v-model="dataForm.calendarType"
:disabled="detail"
style="width: 100%">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="日期类型" prop="dateType">
<el-select
style="width: 100%"
:disabled="detail"
v-model="dataForm.dateType">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="日期" prop="dateTime">
<el-date-picker
:disabled="detail"
style="width: 100%"
<div>
<el-form
:model="dataForm"
:rules="dataRule"
ref="dataForm"
@keyup.enter.native="dataFormSubmit()"
label-position="top"
label-width="80px">
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="节假日名称" prop="name">
<el-input
v-model="dataForm.name"
clearable
:disabled="detail"
placeholder="请输入节假日名称" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="日历类型" prop="calendarType">
<el-select
v-model="dataForm.calendarType"
:disabled="detail"
style="width: 100%">
<el-option
v-for="item in options1"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="日期类型" prop="dateType">
<el-select
style="width: 100%"
:disabled="detail"
v-model="dataForm.dateType">
<el-option
v-for="item in options2"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
v-if="dataForm.dateType == 1"
key="date"
v-model="dataForm.dateDay"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"></el-date-picker>
<el-date-picker
:disabled="detail"
style="width: 100%"
v-else
key="daterange"
v-model="dataForm.dateDayArr"
type="daterange"
format="yyyy-MM-dd"
value-format="yyyy-MM-dd"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否每年重复" prop="repeat">
<el-select
v-model="dataForm.repeat"
:disabled="detail"
style="width: 100%">
<el-option
v-for="item in options3"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
label="日期"
prop="dateDay">
<el-date-picker
:disabled="detail"
style="width: 100%"
key="date"
v-model="dataForm.dateDay"
type="date"
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="--MM-dd"
:picker-options="pickerOptions"></el-date-picker>
</el-form-item>
<el-form-item v-else label="日期" prop="dateDayArr">
<el-date-picker
:disabled="detail"
style="width: 100%"
key="daterange"
v-model="dataForm.dateDayArr"
type="daterange"
format="yyyy-MM-dd"
value-format="--MM-dd"
range-separator=""
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"></el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否每年重复" prop="repeat">
<el-select
v-model="dataForm.repeat"
:disabled="detail"
style="width: 100%">
<el-option
v-for="item in options3"
:key="item.value"
:label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12" v-if="detail">
<el-form-item label="来源" prop="inherited">
<el-radio-group disabled v-model="dataForm.inherited">
<el-radio :label="true">继承</el-radio>
<el-radio :label="false">自定义</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
<el-dialog
title="删除确认"
:visible.sync="dialogVisible"
width="30%"
append-to-body>
<span>
确认删除该节假日吗
<br />
该节假日已被排班计划使用建议确认是否同步更新排班计划
<br />
此操作不可恢复请确认是否继续
</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button @click="onlyDelete">仅删除</el-button>
<el-button type="primary" @click="deleteAndUpdate">
删除并更新
</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { createHoliday, updateHoliday,deleteHolidayn } from '@/api/group/holidaySetting';
import {
createHoliday,
updateHoliday,
checkDeleteHoliday,
deleteHoliday,
updateSchedule,
getHoliday,
} from '@/api/group/holidaySetting';
export default {
components: {},
@@ -110,6 +152,8 @@ export default {
dateDay: undefined,
dateDayArr: [],
repeat: true,
inherited: true, // 是否为继承
deptId: undefined,
},
detail: false,
options1: [
@@ -166,41 +210,170 @@ export default {
},
],
},
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now();
},
},
dialogVisible: false,
};
},
methods: {
init(id, detail) {
init(deptId, id, detail) {
this.dataForm.deptId = deptId || undefined;
this.dataForm.id = id || undefined;
this.detail = detail || false;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
if (this.dataForm.id) {
getHoliday(this.dataForm.id).then((res) => {
this.dataForm = res.data;
if (
this.dataForm.dateType == 1 &&
this.dataForm.calendarType == 1
) {
this.dataForm.dateDay = this.dataForm.oneDay;
} else if (
this.dataForm.dateType == 2 &&
this.dataForm.calendarType == 1
) {
this.dataForm.dateDayArr = [
this.dataForm.startDay,
this.dataForm.endDay,
];
} else if (
this.dataForm.dateType == 1 &&
this.dataForm.calendarType == 2
) {
this.dataForm.dateDay = this.dataForm.oneDayChinese;
} else if (
this.dataForm.dateType == 2 &&
this.dataForm.calendarType == 2
) {
this.dataForm.dateDayArr = [
this.dataForm.startDayChinese,
this.dataForm.endDayChinese,
];
}
});
}
});
},
editHoliday() {
this.detail = false;
},
deleteHoliday() {
//删除节假日基础信息前校验是否影响排班
checkDeleteHoliday(this.dataForm.id).then((res) => {
if (res.data) {
this.dialogVisible = true;
} else {
this.$confirm(
'确认删除该节假日吗?<br/>此操作不可恢复,请确认是否继续',
'删除确认',
{
dangerouslyUseHTMLString: true,
confirmButtonText: '确认删除',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
deleteHoliday(this.dataForm.id).then((res) => {
console.log(res);
this.$modal.msgSuccess('删除成功');
this.$emit('refreshPage');
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消',
});
});
}
});
},
onlyDelete() {
deleteHoliday(this.dataForm.id).then((res) => {
this.dialogVisible = false;
this.$modal.msgSuccess('删除成功');
this.$emit('refreshPage');
});
},
deleteAndUpdate() {
deleteHoliday(this.dataForm.id).then((res) => {
this.dialogVisible = false;
this.$modal.msgSuccess('删除成功');
updateSchedule({ logId: res.data.logId }).then((res1) => {
this.$modal.msgSuccess('更新成功');
this.$emit('refreshPage');
});
});
},
editHoliday(){
this.detail = false
},
deleteHoliday(){
deleteHolidayn(this.dataForm.id).then(res=>{
console.log(res)
})
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
if (!valid) {
return false;
}
if (this.dataForm.dateType == 1 && this.dataForm.calendarType == 1) {
this.dataForm.oneDay = this.dataForm.dateDay;
} else if (
this.dataForm.dateType == 2 &&
this.dataForm.calendarType == 1
) {
this.dataForm.startDay = this.dataForm.dateDayArr[0];
this.dataForm.endDay = this.dataForm.dateDayArr[1];
} else if (
this.dataForm.dateType == 1 &&
this.dataForm.calendarType == 2
) {
this.dataForm.oneDayChinese = this.dataForm.dateDay;
} else if (
this.dataForm.dateType == 2 &&
this.dataForm.calendarType == 2
) {
this.dataForm.startDayChinese = this.dataForm.dateDayArr[0];
this.dataForm.endDayChinese = this.dataForm.dateDayArr[1];
}
// 修改的提交
if (this.dataForm.id) {
updateHoliday(this.dataForm).then((response) => {
this.$modal.msgSuccess('修改成功');
this.visible = false;
this.$emit('refreshPage');
});
return;
}
// 添加的提交
createHoliday(this.dataForm).then((response) => {
this.$modal.msgSuccess('新增成功');
this.visible = false;
this.$emit('refreshPage');
createHoliday(this.dataForm).then((res) => {
updateSchedule;
if (!res.data.updateFlag) {
this.$modal.msgSuccess('新增成功');
this.$emit('refreshPage');
} else {
this.$confirm(
'新增节假日影响已有排班计划,是否立即更新?',
'更新排班',
{
confirmButtonText: '立即更新',
cancelButtonText: '暂不更新',
type: 'warning',
}
)
.then(() => {
updateSchedule({ logId: res.data.logId }).then((res1) => {
this.$modal.msgSuccess('新增成功');
this.$emit('refreshPage');
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消',
});
});
}
});
});
},

View File

@@ -3,6 +3,7 @@
<search-bar
:formConfigs="formConfig"
ref="searchBarForm"
:isFold="true"
@headBtnClick="buttonClick" />
<base-table
:table-props="tableProps"

View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2024-07-01 14:54:06
* @LastEditors: zwq
* @LastEditTime: 2025-10-19 00:35:24
* @LastEditTime: 2025-10-23 13:52:52
* @Description:
-->
<template>
@@ -73,12 +73,13 @@
<el-button
size="small"
type="primary"
@click="startDay = new Date()">
@click="startDay = new Date(),getHolidayPage()">
跳转到今天
</el-button>
</el-form-item>
</el-form>
<el-tag
v-if="topDeptId == deptId"
type="warning"
closable
style="margin-bottom: 10px; color: black">
@@ -92,15 +93,61 @@
<div class="calenderArea">
<el-calendar v-model="startDay">
<template slot="dateCell" slot-scope="{ data }">
<div v-if="data.type === 'current-month'" @click="showDetail">
<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"></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>
</el-col>
<!-- 显示假期名和操作 -->
<el-col
:span="24"
v-if="
HolidayList[Number(data.day.split('-')[2]) - 1]
?.isHoliday
">
<div
class="holiday-div"
@click="
new Date(data.day).getTime() > Date.now() &&
showDetail(
HolidayList[Number(data.day.split('-')[2]) - 1]
.holidayId
)
">
{{
HolidayList[Number(data.day.split('-')[2]) - 1]
?.holidayName
}}
<span
class="holiday-div-btn"
v-if="new Date(data.day).getTime() > Date.now()">
<i class="el-icon-more" style="color: #fff"></i>
</span>
</div>
</el-col>
</el-row>
</div>
</div>
@@ -126,11 +173,12 @@
:dialogVisible="addOrUpdateVisible"
@cancel="cancel"
@confirm="handleConfirm"
:before-close="cancel"
:destroy-on-close="true"
width="40%">
<add-or-updata
ref="addOrUpdataRef"
@refreshPage="getHolidayPage"></add-or-updata>
@refreshPage="successSubmit"></add-or-updata>
<template #footer>
<slot name="footer">
<el-row slot="footer" type="flex" justify="end">
@@ -174,6 +222,7 @@
dialogTitle="节假日变更记录"
:dialogVisible="logVisible"
@cancel="cancelLog"
:before-close="cancelLog"
:destroy-on-close="true"
width="70%">
<holiday-log ref="holidayLogRef"></holiday-log>
@@ -196,9 +245,8 @@
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 { deptHolidayList, getEnableData } from '@/api/group/holidaySetting';
import addOrUpdata from './add-or-updata.vue';
import holidayLog from './holidayLog';
@@ -212,12 +260,14 @@ export default {
data() {
return {
startDay: '', // 查询参数
HolidayList: [],
// 部门树选项
deptOptions: undefined,
// 查询的部门名称
deptName: undefined,
// 选择的部门名称
showDeptName: undefined,
topDeptId: undefined, // 保存当前用户的部门id为最高级部门id
deptId: undefined,
defaultProps: {
children: 'children',
@@ -240,6 +290,7 @@ export default {
// 查询用户个人信息
getUserProfile().then((response) => {
this.showDeptName = response.data.dept.name || '';
this.topDeptId = response.data.dept.id || ''; // 保存当前用户的部门id为最高级部门id
this.deptId = response.data.dept.id || '';
this.getHolidayPage();
});
@@ -247,16 +298,31 @@ export default {
},
methods: {
getHolidayPage() {
deptHolidayList({ deptId: this.deptId }).then((response) => {});
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 = [];
deptHolidayList({
deptId: this.deptId,
startTime: Date.parse(startTime),
endTime: Date.parse(endTime),
}).then((res) => {
this.HolidayList = res.data;
});
},
// 切换月份
selectMonth() {
console.log(this.startDay);
this.getHolidayPage();
},
/** 查询部门下拉树结构 */
getTreeselect() {
listSimpleDepts().then((response) => {
getEnableData().then((response) => {
// 处理 deptOptions 参数
this.deptOptions = [];
this.deptOptions.push(...this.handleTree(response.data, 'id'));
@@ -342,7 +408,7 @@ export default {
this.detail = false;
this.dialogTitle = '新增节假日';
this.$nextTick(() => {
this.$refs.addOrUpdataRef.init();
this.$refs.addOrUpdataRef.init(this.deptId);
});
},
holidayLog() {
@@ -352,8 +418,13 @@ export default {
});
},
cancel() {
this.getHolidayPage();
this.addOrUpdateVisible = false;
},
successSubmit() {
this.cancel();
this.getHolidayPage();
},
handleConfirm() {
this.$refs.addOrUpdataRef.dataFormSubmit();
},
@@ -362,7 +433,7 @@ export default {
this.detail = true;
this.dialogTitle = '节假日详情';
this.$nextTick(() => {
this.$refs.addOrUpdataRef.init(id, true);
this.$refs.addOrUpdataRef.init(this.deptId, id, true);
});
},
editHoliday() {
@@ -465,6 +536,20 @@ export default {
text-align: center;
float: right;
}
.holiday-div {
background-color: #67c23a;
border-radius: 3px;
height: 25px;
text-align: center;
line-height: 24px;
color: #fff;
.holiday-div-btn {
float: right;
transform: rotate(90deg);
font-size: 14px;
pointer-events: none;
}
}
}
}
}