210 lines
4.6 KiB
Vue
210 lines
4.6 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2021-11-18 14:16:25
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2025-10-19 00:09:11
|
|
* @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%"
|
|
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>
|
|
</template>
|
|
|
|
<script>
|
|
import { createHoliday, updateHoliday,deleteHolidayn } from '@/api/group/holidaySetting';
|
|
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
dataForm: {
|
|
id: undefined,
|
|
name: undefined,
|
|
calendarType: 1,
|
|
dateType: 1,
|
|
dateDay: undefined,
|
|
dateDayArr: [],
|
|
repeat: true,
|
|
},
|
|
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',
|
|
},
|
|
],
|
|
},
|
|
};
|
|
},
|
|
methods: {
|
|
init(id, detail) {
|
|
this.dataForm.id = id || undefined;
|
|
this.detail = detail || false;
|
|
},
|
|
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.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');
|
|
});
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|