383 lines
9.5 KiB
Vue
383 lines
9.5 KiB
Vue
<!--
|
||
* @Author: zwq
|
||
* @Date: 2021-11-18 14:16:25
|
||
* @LastEditors: zwq
|
||
* @LastEditTime: 2025-10-23 13:29:58
|
||
* @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
|
||
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"
|
||
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,
|
||
checkDeleteHoliday,
|
||
deleteHoliday,
|
||
updateSchedule,
|
||
getHoliday,
|
||
} from '@/api/group/holidaySetting';
|
||
|
||
export default {
|
||
components: {},
|
||
data() {
|
||
return {
|
||
dataForm: {
|
||
id: undefined,
|
||
name: undefined,
|
||
calendarType: 1,
|
||
dateType: 1,
|
||
dateDay: undefined,
|
||
dateDayArr: [],
|
||
repeat: true,
|
||
inherited: true, // 是否为继承
|
||
deptId: undefined,
|
||
},
|
||
detail: false,
|
||
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' },
|
||
],
|
||
repeat: [
|
||
{
|
||
required: true,
|
||
message: '是否每年重复不能为空',
|
||
trigger: 'change',
|
||
},
|
||
],
|
||
},
|
||
pickerOptions: {
|
||
disabledDate(time) {
|
||
return time.getTime() < Date.now();
|
||
},
|
||
},
|
||
dialogVisible: false,
|
||
};
|
||
},
|
||
methods: {
|
||
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');
|
||
});
|
||
});
|
||
},
|
||
// 表单提交
|
||
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.$emit('refreshPage');
|
||
});
|
||
return;
|
||
}
|
||
// 添加的提交
|
||
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: '已取消',
|
||
});
|
||
});
|
||
}
|
||
});
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|