节假日设置

src/api/mes/cal/calholiday.js

@@ -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'
+  })
+}

src/views/mes/cal/holiday/index.vue

@@ -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 @contextmenu.prevent="onRightClick(data)">
-                <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
+                    <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>