节假日设置
This commit is contained in:
JinLu.Yin
parent
3852491b83
commit
dc1b93f8af
44
src/api/mes/cal/calholiday.js
Normal file
44
src/api/mes/cal/calholiday.js
Normal file
@ -0,0 +1,44 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询节假日设置列表
|
||||
export function listCalholiday(query) {
|
||||
return request({
|
||||
url: '/mes/cal/calholiday/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询节假日设置详细
|
||||
export function getCalholiday(holidayId) {
|
||||
return request({
|
||||
url: '/mes/cal/calholiday/' + holidayId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增节假日设置
|
||||
export function addCalholiday(data) {
|
||||
return request({
|
||||
url: '/mes/cal/calholiday',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改节假日设置
|
||||
export function updateCalholiday(data) {
|
||||
return request({
|
||||
url: '/mes/cal/calholiday',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除节假日设置
|
||||
export function delCalholiday(holidayId) {
|
||||
return request({
|
||||
url: '/mes/cal/calholiday/' + holidayId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
@ -2,22 +2,139 @@
|
||||
<div class="app-container">
|
||||
<el-calendar v-model="date">
|
||||
<template slot="dateCell" slot-scope="{date, data }">
|
||||
<div class="solar">{{ data.day.split('-')[2] }}</div>
|
||||
<div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
|
||||
<div @contextmenu.prevent="onRightClick(data)">
|
||||
<el-row>
|
||||
<el-col :span="16">
|
||||
<div class="solar">
|
||||
{{ data.day.split('-')[2] }}
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-tag v-if="holidayList.indexOf(data.day) ==-1" effect="dark">班</el-tag>
|
||||
<el-tag v-else effect="dark" type="success">休</el-tag>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
</el-calendar>
|
||||
<!-- 添加或修改节假日设置对话框 -->
|
||||
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="日期" prop="theDay">
|
||||
<el-input v-model="form.theDay" readonly="readonly"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="类型" prop="holidayType">
|
||||
<el-radio-group v-model="form.holidayType">
|
||||
<el-radio label="HOLIDAY">假</el-radio>
|
||||
<el-radio label="WORKDAY">班</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
<el-button @click="cancel">取 消</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCalholiday, getCalholiday, delCalholiday, addCalholiday, updateCalholiday } from "@/api/mes/cal/calholiday";
|
||||
import calendar from '@/utils/calendar';
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
date: new Date(),
|
||||
holidayList:[],//假日
|
||||
workdayList:[],//工作日
|
||||
// 弹出层标题
|
||||
title: "节假日设置",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
form:{},
|
||||
queryParams: {
|
||||
theDay: null,
|
||||
holidayType: null,
|
||||
startTime: null,
|
||||
endTime: null,
|
||||
},
|
||||
// 表单校验
|
||||
rules: {
|
||||
holidayType: [
|
||||
{ required: true, message: "请选择类型", trigger: "blur" }
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods:{
|
||||
/** 查询节假日设置列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.holidayList =[];
|
||||
this.workdayList =[];
|
||||
let that = this;
|
||||
listCalholiday(this.queryParams).then(response => {
|
||||
debugger;
|
||||
if(response.data !=null){
|
||||
response.data.forEach(theDay => {
|
||||
if(theDay.holidayType =='HOLIDAY'){
|
||||
that.holidayList.push(theDay.theDay);
|
||||
}else{
|
||||
that.workdayList.push(theDay.theDay);
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
onRightClick(date){
|
||||
this.open = true;
|
||||
this.reset();
|
||||
this.form.theDay=date.day;
|
||||
},
|
||||
submitForm(){
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
addCalholiday(this.form).then(response => {
|
||||
this.$modal.msgSuccess("设置成功");
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
holidayId: null,
|
||||
theDay: null,
|
||||
holidayType: null,
|
||||
startTime: new Date().setHours(0),
|
||||
endTime: new Date().setHours(23)
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
isFestival(slotDate, slotData) {
|
||||
let solarDayArr = slotData.day.split('-');
|
||||
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
|
||||
@ -65,4 +182,8 @@ export default {
|
||||
color: green;
|
||||
font-size: small;
|
||||
}
|
||||
/**节假日背景设置为绿色 */
|
||||
.el-calendar-table .holiday {
|
||||
background-color: #88E325;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user