Compare commits
2 Commits
projects/l
...
projects/l
| Author | SHA1 | Date | |
|---|---|---|---|
| 31bafae4aa | |||
| 67b6b88863 |
@@ -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
18
src/api/group/calendar.js
Normal 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
|
||||
})
|
||||
}
|
||||
@@ -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',
|
||||
})
|
||||
}
|
||||
|
||||
83
src/views/group/Calendar/holidayLog.vue
Normal file
83
src/views/group/Calendar/holidayLog.vue
Normal 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>
|
||||
567
src/views/group/Calendar/index.vue
Normal file
567
src/views/group/Calendar/index.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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);
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
187
src/views/group/Schedule/detail.vue
Normal file
187
src/views/group/Schedule/detail.vue
Normal 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>
|
||||
@@ -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;
|
||||
},
|
||||
// 表单提交
|
||||
|
||||
@@ -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>
|
||||
|
||||
36
src/views/group/Schedule/propSpan.vue
Normal file
36
src/views/group/Schedule/propSpan.vue
Normal 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>
|
||||
33
src/views/group/Schedule/propfirstSpan.vue
Normal file
33
src/views/group/Schedule/propfirstSpan.vue
Normal 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>
|
||||
@@ -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>
|
||||
|
||||
@@ -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: '所属部门',
|
||||
},
|
||||
{
|
||||
|
||||
@@ -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: '已取消',
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
<search-bar
|
||||
:formConfigs="formConfig"
|
||||
ref="searchBarForm"
|
||||
:isFold="true"
|
||||
@headBtnClick="buttonClick" />
|
||||
<base-table
|
||||
:table-props="tableProps"
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user