604 lines
17 KiB
Vue
604 lines
17 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2021-11-18 14:16:25
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2025-12-11 10:47:50
|
||
* @Description:
|
||
-->
|
||
<template>
|
||
<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
|
||
ref="inputWidth"
|
||
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 && dataForm.calendarType == 1"
|
||
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="yyyy-MM-dd"
|
||
@blur="$forceUpdate()"
|
||
:picker-options="pickerOptions"></el-date-picker>
|
||
</el-form-item>
|
||
<el-form-item
|
||
v-else-if="dataForm.dateType == 2 && dataForm.calendarType == 1"
|
||
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="yyyy-MM-dd"
|
||
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">
|
||
<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 JDatePicker from './components/JDatePicker.vue';
|
||
import {
|
||
createHoliday,
|
||
updateHoliday,
|
||
checkDeleteHoliday,
|
||
deleteHoliday,
|
||
updateSchedule,
|
||
getHoliday,
|
||
} from '@/api/group/holidaySetting';
|
||
|
||
export default {
|
||
components: {
|
||
JDatePicker,
|
||
},
|
||
data() {
|
||
return {
|
||
dataForm: {
|
||
id: undefined,
|
||
name: undefined,
|
||
calendarType: 1,
|
||
dateType: 1,
|
||
dateDay: undefined,
|
||
dateDayArr: [],
|
||
dateDayChinese: undefined,
|
||
dateDayArrChinese: [],
|
||
noRepeatYear: undefined,
|
||
noRepeatYearChinese: undefined,
|
||
repeat: true,
|
||
inherited: true, // 是否为继承
|
||
deptId: undefined,
|
||
},
|
||
detail: false,
|
||
inherited: true,
|
||
options1: [
|
||
{
|
||
value: 1,
|
||
label: '公历(阳历)',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '农历(阴历)',
|
||
},
|
||
],
|
||
options2: [
|
||
{
|
||
value: 1,
|
||
label: '单天',
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '时间段',
|
||
},
|
||
],
|
||
options3: [
|
||
{
|
||
value: false,
|
||
label: '否，本年度有效',
|
||
},
|
||
{
|
||
value: true,
|
||
label: '是，每年循环生效',
|
||
},
|
||
],
|
||
dataRule: {
|
||
name: [
|
||
{ required: true, message: '节假日名称不能为空', trigger: 'blur' },
|
||
],
|
||
calendarType: [
|
||
{ required: true, message: '日历类型不能为空', trigger: 'change' },
|
||
],
|
||
dateType: [
|
||
{ required: true, message: '日期类型不能为空', trigger: 'change' },
|
||
],
|
||
dateDay: [
|
||
{ required: true, message: '日期不能为空', trigger: 'change' },
|
||
],
|
||
dateDayArr: [
|
||
{ required: true, message: '日期不能为空', trigger: 'change' },
|
||
],
|
||
dateDayChinese: [
|
||
{ required: true, message: '日期不能为空', trigger: 'change' },
|
||
],
|
||
dateDayArrChinese: [
|
||
{ required: true, message: '日期不能为空', trigger: 'change' },
|
||
],
|
||
repeat: [
|
||
{
|
||
required: true,
|
||
message: '是否每年重复不能为空',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
},
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() < Date.now();
|
||
},
|
||
},
|
||
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, val, detail, inherited) {
|
||
this.dataForm.deptId = deptId || undefined;
|
||
this.dataForm.id = val.holidayId || undefined;
|
||
this.dataForm.inherited = val.isInherit || false;
|
||
this.detail = detail || false;
|
||
this.inherited = inherited; //编辑的时候，该部门如果是自定义的，但这个val数据是继承的，修改之后，则变成自定义的inherited
|
||
this.$nextTick(() => {
|
||
this.$refs['dataForm'].resetFields();
|
||
if (this.dataForm.id) {
|
||
getHoliday(this.dataForm.id).then((res) => {
|
||
//设置年份，不重复的直接用返回的年份，重复的直接用当年年份
|
||
let year = new Date().getFullYear();
|
||
if (res.data.calendarType == 1 && !res.data.repeat) {
|
||
year = res.data.noRepeatYear;
|
||
} else if (res.data.calendarType == 2 && !res.data.repeat) {
|
||
year = res.data.noRepeatYearChinese;
|
||
}
|
||
|
||
this.dataForm = res.data;
|
||
if (
|
||
this.dataForm.dateType == 1 &&
|
||
this.dataForm.calendarType == 1
|
||
) {
|
||
this.dataForm.dateDay =
|
||
year + '-' + this.dataForm.oneDay.slice(-5);
|
||
} else if (
|
||
this.dataForm.dateType == 2 &&
|
||
this.dataForm.calendarType == 1
|
||
) {
|
||
let num = this.compareMonthDay(
|
||
this.dataForm.startDay.slice(-5),
|
||
this.dataForm.endDay.slice(-5)
|
||
);
|
||
this.dataForm.dateDayArr = [
|
||
year + '-' + this.dataForm.startDay.slice(-5),
|
||
(num > 0 ? year : year + 1) +
|
||
'-' +
|
||
this.dataForm.endDay.slice(-5),
|
||
];
|
||
} else if (
|
||
this.dataForm.dateType == 1 &&
|
||
this.dataForm.calendarType == 2
|
||
) {
|
||
this.dataForm.dateDayChinese =
|
||
'L' + year + this.dataForm.oneDayChinese.slice(-6);
|
||
} else if (
|
||
this.dataForm.dateType == 2 &&
|
||
this.dataForm.calendarType == 2
|
||
) {
|
||
let num = this.compareMonthDay(
|
||
this.dataForm.startDayChinese.slice(-6),
|
||
this.dataForm.endDayChinese.slice(-6)
|
||
);
|
||
this.dataForm.dateDayArrChinese = [
|
||
'L' + year + this.dataForm.startDayChinese.slice(-6),
|
||
'L' +
|
||
(num > 0 ? year : year + 1) +
|
||
+this.dataForm.endDayChinese.slice(-6),
|
||
];
|
||
}
|
||
});
|
||
}
|
||
});
|
||
},
|
||
//用于比较日期大小，判断年份是否要加1
|
||
compareMonthDay(dateStr1, dateStr2) {
|
||
const [month1, day1] = dateStr1.split('-').map(Number);
|
||
const [month2, day2] = dateStr2.split('-').map(Number);
|
||
|
||
if (month1 !== month2) {
|
||
return month2 - month1;
|
||
}
|
||
return day2 - day1;
|
||
},
|
||
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');
|
||
});
|
||
},
|
||
onDateChange(val) {
|
||
console.log(val);
|
||
},
|
||
// 表单提交
|
||
dataFormSubmit() {
|
||
this.$refs['dataForm'].validate((valid) => {
|
||
if (!valid) {
|
||
return false;
|
||
}
|
||
if (this.dataForm.dateType == 1 && this.dataForm.calendarType == 1) {
|
||
const [year, month, day] = this.dataForm.dateDay.split('-');
|
||
this.dataForm.oneDay = `--${month}-${day}`;
|
||
} else if (
|
||
this.dataForm.dateType == 2 &&
|
||
this.dataForm.calendarType == 1
|
||
) {
|
||
const [year, month, day] = this.dataForm.dateDayArr[0].split('-');
|
||
this.dataForm.startDay = `--${month}-${day}`;
|
||
const [year1, month1, day1] = this.dataForm.dateDayArr[1].split('-');
|
||
this.dataForm.endDay = `--${month1}-${day1}`;
|
||
} else if (
|
||
this.dataForm.dateType == 1 &&
|
||
this.dataForm.calendarType == 2
|
||
) {
|
||
this.dataForm.oneDayChinese =
|
||
'--' + this.dataForm.dateDayChinese.slice(-5);
|
||
} else if (
|
||
this.dataForm.dateType == 2 &&
|
||
this.dataForm.calendarType == 2
|
||
) {
|
||
this.dataForm.startDayChinese =
|
||
'--' + this.dataForm.dateDayArrChinese[0].slice(-5);
|
||
this.dataForm.endDayChinese =
|
||
'--' + this.dataForm.dateDayArrChinese[1].slice(-5);
|
||
}
|
||
//是否每年重复，不重复的话需要传 年份
|
||
if (
|
||
this.dataForm.dateType == 1 &&
|
||
this.dataForm.calendarType == 1 &&
|
||
!this.dataForm.repeat
|
||
) {
|
||
const [year, month, day] = this.dataForm.dateDay.split('-');
|
||
this.dataForm.noRepeatYear = year;
|
||
} else if (
|
||
this.dataForm.dateType == 2 &&
|
||
this.dataForm.calendarType == 1 &&
|
||
!this.dataForm.repeat
|
||
) {
|
||
const [year, month, day] = this.dataForm.dateDayArr[0].split('-');
|
||
this.dataForm.noRepeatYear = year;
|
||
} else if (
|
||
this.dataForm.dateType == 1 &&
|
||
this.dataForm.calendarType == 2 &&
|
||
!this.dataForm.repeat
|
||
) {
|
||
this.dataForm.noRepeatYearChinese =
|
||
this.dataForm.dateDayChinese.slice(1, 5);
|
||
} else if (
|
||
this.dataForm.dateType == 2 &&
|
||
this.dataForm.calendarType == 2 &&
|
||
!this.dataForm.repeat
|
||
) {
|
||
this.dataForm.noRepeatYearChinese =
|
||
this.dataForm.dateDayArrChinese[0].slice(1, 5);
|
||
}
|
||
// 修改的提交
|
||
if (this.dataForm.id) {
|
||
if (!this.inherited) {
|
||
this.dataForm.inherited = false;
|
||
}
|
||
updateHoliday(this.dataForm).then((res) => {
|
||
if (res.code === 0 || res.code === 200) {
|
||
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');
|
||
});
|
||
}
|
||
} else {
|
||
this.$modal.msg(res.msg);
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
// 添加的提交
|
||
createHoliday(this.dataForm).then((res) => {
|
||
if (res.code === 0 || res.code === 200) {
|
||
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');
|
||
});
|
||
}
|
||
} else {
|
||
this.$modal.msg(res.msg);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|