mt-fe-group/yudao-dev
13
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

更新班组

Browse Source
This commit is contained in:
朱文强
2025-11-05 13:57:58 +08:00
parent 0e1e813dc2
commit 7bee1f7863
17 changed files with 866 additions and 249 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/views/group/holidaySetting/add-or-updata.vue
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2021-11-18 14:16:25
* @LastEditors: zwq
* @LastEditTime: 2025-10-23 13:29:58
* @LastEditTime: 2025-11-05 13:43:53
* @Description:
-->
<template>
@@ -18,6 +18,7 @@
<el-col :span="12">
<el-form-item label="节假日名称" prop="name">
<el-input
ref="inputWidth"
v-model="dataForm.name"
clearable
:disabled="detail"
@@ -54,7 +55,7 @@
</el-col>
<el-col :span="12">
<el-form-item
v-if="dataForm.dateType == 1"
v-if="dataForm.dateType == 1 && dataForm.calendarType == 1"
label="日期"
prop="dateDay">
<el-date-picker
@@ -66,9 +67,13 @@
placeholder="选择日期"
format="yyyy-MM-dd"
value-format="--MM-dd"
@blur="$forceUpdate()"
:picker-options="pickerOptions"></el-date-picker>
</el-form-item>
<el-form-item v-else label="日期" prop="dateDayArr">
<el-form-item
v-else-if="dataForm.dateType == 2 && dataForm.calendarType == 1"
label="日期"
prop="dateDayArr">
<el-date-picker
:disabled="detail"
style="width: 100%"
@@ -80,8 +85,53 @@
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@blur="$forceUpdate()"
:picker-options="pickerOptions"></el-date-picker>
</el-form-item>
<el-form-item
v-else-if="dataForm.dateType == 1 && dataForm.calendarType == 2"
label="日期"
prop="dateDayChinese">
<j-date-picker
ref="JDatePicker1"
style="line-height: 18px"
v-model="dataForm.dateDayChinese"
id="value1"
:width="width1"
:placeholder="placeholder"
:picker-options="pickerOptions"
:rangeSeparator="rangeSeparator"
@change="onDateChange"
:disabled="detail"
:showLunarClass="showLunarClass"
:showLunarControl="showLunarControl"
type="DATE"
:showBackYears="showBackYears"
:showLunarIcon="showLunarIcon"
:format="format"></j-date-picker>
</el-form-item>
<el-form-item
v-else-if="dataForm.dateType == 2 && dataForm.calendarType == 2"
label="日期"
prop="dateDayArrChinese">
<j-date-picker
style="line-height: 18px"
ref="JDatePicker2"
v-model="dataForm.dateDayArrChinese"
id="value2"
:width="width1"
:placeholder="placeholder"
:picker-options="pickerOptions"
:rangeSeparator="rangeSeparator"
@change="onDateChange"
:disabled="detail"
:showLunarClass="showLunarClass"
:showLunarControl="showLunarControl"
type="DATERANGE"
:showBackYears="showBackYears"
:showLunarIcon="showLunarIcon"
:format="format"></j-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="是否每年重复" prop="repeat">
@@ -131,6 +181,7 @@
</template>
<script>
import JDatePicker from 'vue-jlunar-datepicker';
import {
createHoliday,
updateHoliday,
@@ -141,7 +192,9 @@ import {
} from '@/api/group/holidaySetting';
export default {
components: {},
components: {
JDatePicker,
},
data() {
return {
dataForm: {
@@ -151,6 +204,10 @@ export default {
dateType: 1,
dateDay: undefined,
dateDayArr: [],
dateDayChinese: undefined,
dateDayArrChinese: [],
noRepeatYear: undefined,
noRepeatYearChinese: undefined,
repeat: true,
inherited: true, // 是否为继承
deptId: undefined,
@@ -202,6 +259,12 @@ export default {
dateDayArr: [
{ required: true, message: '日期不能为空', trigger: 'change' },
],
dateDayChinese: [
{ required: true, message: '日期不能为空', trigger: 'change' },
],
dateDayArrChinese: [
{ required: true, message: '日期不能为空', trigger: 'change' },
],
repeat: [
{
required: true,
@@ -216,12 +279,61 @@ export default {
},
},
dialogVisible: false,
//农历组件数据
showLunarClass: 'LUNAR', //农历日期的展示类型 MIX(混合)FULLLUNAR(全农历)LUNAR(农历)NUMBER(数字)
showBackYears: 2, //向后展示年数;见于年份列表;
showLunarIcon: true, //是否显示农历控制组件
showLunarControl: false, //是否显示农历控制组件
width1: '300', //这个设置成100%，原组件写死了px需要修改
format: 'yyyy-MM-dd',
placeholder: '',
rangeSeparator: '-',
editable: true,
clearable: true,
pickerOptions: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
},
},
};
},
watch: {
'dataForm.calendarType': function (newValue, oldValue) {
this.$nextTick(() => {
if (this.$refs.JDatePicker1) {
this.$refs.JDatePicker1.isLunar = true; //默认转为农历
this.$refs.JDatePicker1.onLunarChange();
}
if (this.$refs.JDatePicker2) {
this.$refs.JDatePicker2.isLunar = true;
this.$refs.JDatePicker2.onLunarChange();
}
});
},
'dataForm.dateType': function (newValue, oldValue) {
this.$nextTick(() => {
if (this.$refs.JDatePicker1) {
this.$refs.JDatePicker1.isLunar = true; //默认转为农历
this.$refs.JDatePicker1.onLunarChange();
}
if (this.$refs.JDatePicker2) {
this.$refs.JDatePicker2.isLunar = true;
this.$refs.JDatePicker2.onLunarChange();
}
});
},
},
mounted() {
this.$nextTick(() => {
this.width1 = this.$refs.inputWidth.$el.offsetWidth + '';
});
},
methods: {
init(deptId, id, detail) {
init(deptId, val, detail) {
this.dataForm.deptId = deptId || undefined;
this.dataForm.id = id || undefined;
this.dataForm.id = val.holidayId || undefined;
this.dataForm.inherited = val.isInherit || false;
this.detail = detail || false;
this.$nextTick(() => {
this.$refs['dataForm'].resetFields();
@@ -245,14 +357,21 @@ export default {
this.dataForm.dateType == 1 &&
this.dataForm.calendarType == 2
) {
this.dataForm.dateDay = this.dataForm.oneDayChinese;
this.dataForm.dateDayChinese =
'L' +
new Date().getFullYear() +
this.dataForm.oneDayChinese.slice(-6);
} else if (
this.dataForm.dateType == 2 &&
this.dataForm.calendarType == 2
) {
this.dataForm.dateDayArr = [
this.dataForm.startDayChinese,
this.dataForm.endDayChinese,
this.dataForm.dateDayArrChinese = [
'L' +
new Date().getFullYear() +
this.dataForm.startDayChinese.slice(-6),
'L' +
new Date().getFullYear() +
this.dataForm.endDayChinese.slice(-6),
];
}
});
@@ -307,10 +426,13 @@ export default {
this.$modal.msgSuccess('删除成功');
updateSchedule({ logId: res.data.logId }).then((res1) => {
this.$modal.msgSuccess('更新成功');
this.$emit('refreshPage');
});
this.$emit('refreshPage');
});
},
onDateChange(val) {
console.log(val);
},
// 表单提交
dataFormSubmit() {
this.$refs['dataForm'].validate((valid) => {
@@ -329,25 +451,57 @@ export default {
this.dataForm.dateType == 1 &&
this.dataForm.calendarType == 2
) {
this.dataForm.oneDayChinese = this.dataForm.dateDay;
this.dataForm.oneDayChinese =
'--' + this.dataForm.dateDayChinese.slice(-5);
} else if (
this.dataForm.dateType == 2 &&
this.dataForm.calendarType == 2
) {
this.dataForm.startDayChinese = this.dataForm.dateDayArr[0];
this.dataForm.endDayChinese = this.dataForm.dateDayArr[1];
this.dataForm.startDayChinese =
'--' + this.dataForm.dateDayArrChinese[0].slice(-5);
this.dataForm.endDayChinese =
'--' + this.dataForm.dateDayArrChinese[1].slice(-5);
}
if (this.dataForm.calendarType == 1 && !this.dataForm.repeat) {
this.dataForm.noRepeatYear = new Date().getFullYear();
} else if (this.dataForm.calendarType == 2 && !this.dataForm.repeat) {
this.dataForm.noRepeatYearChinese = new Date().getFullYear();
}
// 修改的提交
if (this.dataForm.id) {
updateHoliday(this.dataForm).then((response) => {
this.$modal.msgSuccess('修改成功');
this.$emit('refreshPage');
updateHoliday(this.dataForm).then((res) => {
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: '已取消',
});
this.$emit('refreshPage');
});
}
});
return;
}
// 添加的提交
createHoliday(this.dataForm).then((res) => {
updateSchedule;
if (!res.data.updateFlag) {
this.$modal.msgSuccess('新增成功');
this.$emit('refreshPage');
@@ -363,15 +517,16 @@ export default {
)
.then(() => {
updateSchedule({ logId: res.data.logId }).then((res1) => {
this.$modal.msgSuccess('新增成功');
this.$emit('refreshPage');
this.$modal.msgSuccess('更新成功');
});
this.$emit('refreshPage');
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消',
});
this.$emit('refreshPage');
});
}
});

4
src/views/group/holidaySetting/holidayLog.vue
View File

@@ -33,6 +33,10 @@ const tableProps = [
prop: 'opPeopleName',
label: '操作人'
},
{
prop: 'deptName',
label: '部门'
},
{
prop: 'opType',
label: '操作类型',

247
src/views/group/holidaySetting/index.vue
View File

@@ -2,7 +2,7 @@
* @Author: zwq
* @Date: 2024-07-01 14:54:06
* @LastEditors: zwq
* @LastEditTime: 2025-10-27 10:18:54
* @LastEditTime: 2025-11-05 13:46:00
* @Description:
-->
<template>
@@ -32,15 +32,24 @@
<div class="groupTeamScheduling">
<div class="operationArea">
<el-row>
<el-col :span="16">
<el-col :span="6">
<div style="height: 40px; font-size: 16px">
<span style="color: #409eff; font-weight: 600">
{{ showDeptName }}
</span>
节假日设置
<span
:style="{
color: inherited ? '#67c23a' : '#b5b839',
fontSize: '12px',
fontWeight: 600,
}"
v-show="ishasParent">
{{ inherited ? '继承模式' : '自定义模式' }}
</span>
</div>
</el-col>
<el-col :span="8">
<el-col :span="18" v-if="!ishasParent">
<div style="float: right">
<el-button
size="small"
@@ -58,6 +67,39 @@
</el-button>
</div>
</el-col>
<el-col :span="18" v-else style="text-align: right">
<el-button
size="small"
type="primary"
:disabled="inherited"
v-hasPermi="['base:group-holiday:create']"
@click="addHoliday">
新增节假日
</el-button>
<el-button
size="small"
type="success"
:disabled="inherited"
v-hasPermi="['base:group-holiday:update']"
@click="reExtends">
恢复继承
</el-button>
<el-button
size="small"
type="warning"
:disabled="!inherited"
v-hasPermi="['base:group-holiday:update']"
@click="disExtends">
解除继承
</el-button>
<el-button
size="small"
:disabled="inherited"
v-hasPermi="['base:group-holiday-log:query']"
@click="holidayLog">
节假日变更记录
</el-button>
</el-col>
</el-row>
</div>
<div class="operationArea">
@@ -73,6 +115,24 @@
:clearable="false"
style="width: 120px"></el-date-picker>
</el-form-item>
<el-form-item label="继承上一级的节假日" v-show="ishasParent">
<div
style="
width: 36px;
height: 36px;
background-color: #67c23a;
border-radius: 3px;
"></div>
</el-form-item>
<el-form-item label="本级自定义的节假日" v-show="ishasParent">
<div
style="
width: 36px;
height: 36px;
background-color: #b5b839;
border-radius: 3px;
"></div>
</el-form-item>
<el-form-item style="float: right">
<el-button
size="small"
@@ -83,15 +143,24 @@
</el-form-item>
</el-form>
<el-tag
v-if="topDeptId == deptId"
v-if="!ishasParent"
type="warning"
closable
style="margin-bottom: 10px; color: black">
<i class="el-icon-warning" style="color: #ffbd02"></i>
当前节假日设置为组织架构中最高层级配置，默认自动继承至下属部门。子部门可选择
<span style="color: red">解除继承</span>
设置后进行独立修改，复制后不再继承上级设置
</el-tag>
<el-tag
v-else
type="warning"
closable
style="margin-bottom: 10px; color: black">
<i class="el-icon-warning" style="color: #ffbd02"></i>
当前部门继承上级节假日设置，默认不可修改。可通过
<span style="color: red">解除继承</span>
进行自定义，解除后将不再继承。
</el-tag>
</div>
<!-- 日历区域 -->
<div class="calenderArea">
@@ -99,7 +168,16 @@
<template slot="dateCell" slot-scope="{ data }">
<div v-if="data.type === 'current-month'">
<!-- 日期 -->
<div class="dateStyle">
<div
class="dateStyle"
@click="
new Date(data.day).getTime() > Date.now() &&
HolidayList[Number(data.day.split('-')[2]) - 1]
?.isHoliday &&
showDetail(
HolidayList[Number(data.day.split('-')[2]) - 1]
)
">
<el-row :gutter="20">
<!-- 公历和农历 -->
<el-col :span="18">
@@ -134,13 +212,14 @@
">
<div
class="holiday-div"
@click="
new Date(data.day).getTime() > Date.now() &&
showDetail(
HolidayList[Number(data.day.split('-')[2]) - 1]
.holidayId
)
">
:style="{
backgroundColor: ishasParent
? HolidayList[Number(data.day.split('-')[2]) - 1]
.isInherit
? '#67c23a'
: '#b5b839'
: '',
}">
{{
HolidayList[Number(data.day.split('-')[2]) - 1]
?.holidayName
@@ -179,6 +258,7 @@
@confirm="handleConfirm"
:before-close="cancel"
:destroy-on-close="true"
class="addDialog"
width="40%">
<add-or-updata
ref="addOrUpdataRef"
@@ -252,7 +332,14 @@ import moment from 'moment';
import { solarToLunar } from 'chinese-lunar';
import { getUserProfile } from '@/api/system/user';
import { deptHolidayList, getEnableData } from '@/api/group/holidaySetting';
import {
deptHolidayList,
getEnableData,
disExtends,
reExtends,
updateSchedule,
getSet,
} from '@/api/group/holidaySetting';
import addOrUpdata from './add-or-updata.vue';
import holidayLog from './holidayLog';
@@ -274,7 +361,9 @@ export default {
// 选择的部门名称
showDeptName: undefined,
topDeptId: undefined, // 保存当前用户的部门id为最高级部门id
parentId: undefined, // 保存部门点击时对象的父id，用于解除和恢复继承
deptId: undefined,
ishasParent: false, // 判断是否有上级,false,则表示为最高级
defaultProps: {
children: 'children',
label: 'name',
@@ -283,6 +372,7 @@ export default {
addOrUpdateVisible: false,
detail: false,
logVisible: false,
inherited: true, //该部门是否为继承状态
};
},
watch: {
@@ -298,9 +388,9 @@ export default {
this.showDeptName = response.data.dept.name || '';
this.topDeptId = response.data.dept.id || ''; // 保存当前用户的部门id为最高级部门id
this.deptId = response.data.dept.id || '';
this.getHolidayPage();
this.getTreeselect();
this.getSet();
});
this.getTreeselect();
},
methods: {
getHolidayPage() {
@@ -329,11 +419,23 @@ export default {
/** 查询部门下拉树结构 */
getTreeselect() {
getEnableData().then((response) => {
// 遍历部门，判断当前帐号的部门是否有为最上级
const nowDept = response.data.filter((i) => i.id == this.topDeptId);
this.ishasParent = nowDept.hasParent;
this.parentId = nowDept.parentId;
// 处理 deptOptions 参数
this.deptOptions = [];
this.deptOptions.push(...this.handleTree(response.data, 'id'));
});
},
// 根据部门id查询该部门是否是继承
getSet() {
getSet({ id: this.deptId }).then((res) => {
this.inherited = res.data;
});
this.getHolidayPage();
},
// 筛选节点
filterNode(value, data) {
if (!value) return true;
@@ -343,6 +445,9 @@ export default {
handleNodeClick(data) {
this.deptId = data.id;
this.showDeptName = data.name;
this.ishasParent = data.hasParent;
this.parentId = data.parentId;
this.getSet();
this.getHolidayPage();
},
//获取农历
@@ -414,9 +519,108 @@ export default {
this.detail = false;
this.dialogTitle = '新增节假日';
this.$nextTick(() => {
this.$refs.addOrUpdataRef.init(this.deptId);
this.$refs.addOrUpdataRef.init(this.deptId, {
inherited: this.inherited,
});
});
},
disExtends() {
this.$confirm(
'当前节假日设置继承自上级部门，解除继承后将不再自动同步上级设置。<br/>系统将保留当前节假日配置作为初始数据，您可以自定义修改。<br/>是否确认解除继承？',
'解除继承',
{
dangerouslyUseHTMLString: true,
confirmButtonText: '确认解除',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
disExtends({ id: this.deptId, pid: this.parentId }).then((res) => {
if (!res.data.updateFlag) {
this.$modal.msgSuccess('操作成功');
this.getSet();
} else {
this.$confirm(
'新增节假日影响已有排班计划，是否立即更新？',
'更新排班',
{
confirmButtonText: '立即更新',
cancelButtonText: '暂不更新',
type: 'warning',
}
)
.then(() => {
updateSchedule({ logId: res.data.logId }).then((res1) => {
this.$modal.msgSuccess('更新成功');
this.getSet();
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消',
});
});
}
});
})
.catch((res) => {
console.log(res);
this.$message({
type: 'info',
message: '已取消',
});
});
},
reExtends() {
this.$confirm(
'恢复继承后，当前部门将重新同步未来时间的上级部门的节假日设置，<br/>现有自定义配置将被清空并替换为上级设置，不可恢复。<br/>是否确认继续？',
'恢复继承',
{
dangerouslyUseHTMLString: true,
confirmButtonText: '确认恢复继承',
cancelButtonText: '取消',
type: 'warning',
}
)
.then(() => {
reExtends({ id: this.deptId, pid: this.parentId }).then((res) => {
if (!res.data.updateFlag) {
this.$modal.msgSuccess('操作成功');
this.getSet();
} else {
this.$confirm(
'新增节假日影响已有排班计划，是否立即更新？',
'更新排班',
{
confirmButtonText: '立即更新',
cancelButtonText: '暂不更新',
type: 'warning',
}
)
.then(() => {
updateSchedule({ logId: res.data.logId }).then((res1) => {
this.$modal.msgSuccess('更新成功');
this.getSet();
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消',
});
});
}
});
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消',
});
});
},
holidayLog() {
this.logVisible = true;
this.$nextTick(() => {
@@ -434,12 +638,12 @@ export default {
handleConfirm() {
this.$refs.addOrUpdataRef.dataFormSubmit();
},
showDetail(id) {
showDetail(val) {
this.addOrUpdateVisible = true;
this.detail = true;
this.dialogTitle = '节假日详情';
this.$nextTick(() => {
this.$refs.addOrUpdataRef.init(this.deptId, id, true);
this.$refs.addOrUpdataRef.init(this.deptId, val, true);
});
},
editHoliday() {
@@ -561,4 +765,9 @@ export default {
}
}
}
.addDialog {
.el-dialog__body {
overflow: visible;
}
}
</style>