From 45d6b5661ea8267c2dd28ae82e32a4666d793953 Mon Sep 17 00:00:00 2001
From: "JinLu.Yin" <411641505@qq.com>
Date: Thu, 9 Jun 2022 22:25:41 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8E=92=E7=8F=AD=E6=97=A5=E5=8E=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/mes/cal/calendar/calendarType.vue | 175 +++++++++++++++++++-
 src/views/mes/cal/calendar/index.vue        |   9 +-
 src/views/mes/cal/calendar/person.vue       |   4 +-
 src/views/mes/cal/calendar/team.vue         |  15 ++
 4 files changed, 197 insertions(+), 6 deletions(-)

diff --git a/src/views/mes/cal/calendar/calendarType.vue b/src/views/mes/cal/calendar/calendarType.vue
index e9776fd..29ab808 100644
--- a/src/views/mes/cal/calendar/calendarType.vue
+++ b/src/views/mes/cal/calendar/calendarType.vue
@@ -1,15 +1,186 @@
 <template>
       <div class="app-container">
-          
+          <el-container>
+                  <el-aside width="150px">
+                        <el-radio-group v-model="selectedType" class="x-fillitem el-group-list" @change="onSelected">        
+                              <el-radio-button
+                                    v-for="dict in dict.type.mes_calendar_type"
+                                    :key="dict.value"
+                                    :label="dict.value"
+                              >{{dict.label}}</el-radio-button>                                              
+                        </el-radio-group>
+                  </el-aside>
+                  <el-main>
+                        <el-calendar v-model="date">
+                              <template slot="dateCell" slot-scope="{date, data }">
+                              <div>
+                                    <el-row>
+                                          <el-col :span="6">
+                                                <div class="solar">                    
+                                                      {{ data.day.split('-')[2] }}
+                                                </div>
+                                          </el-col>
+                                          <el-col :span="12">
+                                                <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarDate2lunar(data.day) }}</div>
+                                          </el-col>
+                                          <el-col :span="6">
+                                                <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="grid-content">
+                                                      <el-button type="success" icon="el-icon-sunrise">注塑1组</el-button>
+                                                </div>
+                                          </el-col>                        
+                                    </el-row>                                        
+                                    <el-row>
+                                          <el-col :span="24">
+                                                <div class="grid-content">
+                                                      <el-button type="warning"  icon="el-icon-sunny">注塑2组</el-button>
+                                                </div>                                                
+                                          </el-col>                        
+                                    </el-row>                                        
+                                    <el-row>
+                                          <el-col :span="24">
+                                                <div class="grid-content">
+                                                      <el-button type="info"  icon="el-icon-moon">注塑3组</el-button>
+                                                </div>                                                
+                                          </el-col>                        
+                                    </el-row>                                        
+                              </div>                
+                              </template>
+                        </el-calendar>
+                  </el-main>
+          </el-container>
       </div>
 </template>
 
 <script>
+import { listCalholiday } from "@/api/mes/cal/calholiday";
+import calendar from '@/utils/calendar';
 export default {
+      name: 'CalendarTypeView',     
+      dicts:['mes_calendar_type'], 
+      data(){
+            return {
+                  // 遮罩层
+                  loading: true,
+                  date: new Date(),
+                  holidayList:[],//假日
+                  workdayList:[],//工作日
+                  selectedType:null
+            }
+      },
+      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;
+                  }
+                  });
+            },
+            onSelected(para){
 
+            },
+            isFestival(slotDate, slotData) {
+                  let solarDayArr = slotData.day.split('-');
+                  let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
+      
+                  // 公历节日\农历节日\农历节气
+                  let festAndTerm = [];
+                  festAndTerm.push(lunarDay.festival == null ? '' : ' ' + lunarDay.festival)
+                  festAndTerm.push(lunarDay.lunarFestival == null ? '' : '' + lunarDay.lunarFestival)
+                  festAndTerm.push(lunarDay.Term == null ? '' : '' + lunarDay.Term)
+                  festAndTerm = festAndTerm.join('')
+      
+                  return festAndTerm != ''
+            },
+            solarDate2lunar(solarDate) {
+                  var solar = solarDate.split('-')
+                  var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])       
+                  
+                  let lunarMD = lunar.IMonthCn + lunar.IDayCn;
+                  // 公历节日\农历节日\农历节气
+                  let festAndTerm = [];
+                  festAndTerm.push(lunar.festival == null ? '' : ' ' + lunar.festival)
+                  festAndTerm.push(lunar.lunarFestival == null ? '' : '' + lunar.lunarFestival)
+                  festAndTerm.push(lunar.Term == null ? '' : '' + lunar.Term)
+                  festAndTerm = festAndTerm.join('')
+      
+                  return festAndTerm == '' ? lunarMD : festAndTerm
+                  
+            }
+      }
 }
 </script>
-
 <style>
+      .grid-content{
+            padding: 5px 0;
+      }
 
+      .el-group-list.el-radio-group{
+            display: flex;
+            flex-direction: column;
+            align-items:stretch;
+      }
+
+      .el-group-list.el-radio-group .el-radio-button:first-child .el-radio-button__inner,
+      .el-group-list.el-radio-group .el-radio-button:last-child .el-radio-button__inner,
+      .el-group-list.el-radio-group  .el-radio-button:first-child .el-radio-button__inner,
+      .el-group-list.el-radio-group .el-radio-button__inner
+      {
+            border-radius: 0px !important;
+            border: none !important;
+      }
+
+      .el-group-list.el-radio-group .el-radio-button{
+            border-bottom: 1px solid #F7F7F7 !important;
+      }
+
+      .el-group-list.el-radio-group{
+            border: 1px solid #dcdfe6;
+      }
+
+      .el-group-list.el-radio-group > label > span{
+            width: 100%;
+            text-align: left;
+            padding-left: 20px;
+      }
+      /**本月周末设置为红色*/
+      .el-calendar-table .current:nth-last-child(-n+2) .solar {
+            color: red;
+            font-size: small;
+      }
+      /**本月农历设置为灰色*/
+      .el-calendar-table .current .lunar {
+            color: #606266;
+            font-size: small;
+      }
+      /**本月农历节日设置为红色*/
+      .el-calendar-table .current .lunar.festival {
+            color: green;
+            font-size: small;
+      }
+      /**节假日背景设置为绿色 */
+      .el-calendar-table .holiday {
+            background-color: #88E325;
+      }
 </style>
\ No newline at end of file
diff --git a/src/views/mes/cal/calendar/index.vue b/src/views/mes/cal/calendar/index.vue
index 4001fe5..3219619 100644
--- a/src/views/mes/cal/calendar/index.vue
+++ b/src/views/mes/cal/calendar/index.vue
@@ -1,7 +1,9 @@
 <template>
     <div class="app-container">
-        <el-tabs type="card">
-            <el-tab-pane label="类型"></el-tab-pane>
+        <el-tabs type="border-card">
+            <el-tab-pane label="类型">
+                <CalendarTypeView></CalendarTypeView>
+            </el-tab-pane>
             <el-tab-pane label="班组"></el-tab-pane>
             <el-tab-pane label="个人"></el-tab-pane>
         </el-tabs>
@@ -9,9 +11,10 @@
 </template>
 
 <script>
-
+import CalendarTypeView from "./calendarType.vue"
 
 export default {
+    components:{CalendarTypeView},
     data(){
         return {
 
diff --git a/src/views/mes/cal/calendar/person.vue b/src/views/mes/cal/calendar/person.vue
index 17bcab3..e9776fd 100644
--- a/src/views/mes/cal/calendar/person.vue
+++ b/src/views/mes/cal/calendar/person.vue
@@ -1,5 +1,7 @@
 <template>
-  
+      <div class="app-container">
+          
+      </div>
 </template>
 
 <script>
diff --git a/src/views/mes/cal/calendar/team.vue b/src/views/mes/cal/calendar/team.vue
index e69de29..e9776fd 100644
--- a/src/views/mes/cal/calendar/team.vue
+++ b/src/views/mes/cal/calendar/team.vue
@@ -0,0 +1,15 @@
+<template>
+      <div class="app-container">
+          
+      </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file