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

---
 src/api/mes/cal/team.js                     |   8 +
 src/views/mes/cal/calendar/calendarType.vue |  25 +--
 src/views/mes/cal/calendar/index.vue        |   8 +-
 src/views/mes/cal/calendar/team.vue         | 212 +++++++++++++++++++-
 4 files changed, 223 insertions(+), 30 deletions(-)

diff --git a/src/api/mes/cal/team.js b/src/api/mes/cal/team.js
index 6e12f3d..b027191 100644
--- a/src/api/mes/cal/team.js
+++ b/src/api/mes/cal/team.js
@@ -9,6 +9,14 @@ export function listTeam(query) {
   })
 }
 
+// 查询班组列表
+export function listAllTeam() {
+  return request({
+    url: '/mes/cal/team/listAll',
+    method: 'get'
+  })
+}
+
 // 查询班组详细
 export function getTeam(teamId) {
   return request({
diff --git a/src/views/mes/cal/calendar/calendarType.vue b/src/views/mes/cal/calendar/calendarType.vue
index 3d304b0..7399b03 100644
--- a/src/views/mes/cal/calendar/calendarType.vue
+++ b/src/views/mes/cal/calendar/calendarType.vue
@@ -37,29 +37,7 @@
                                                       <el-button v-if="teamShift.orderNum ==3 && calendarDay.shiftType=='SHIFT_THREE'" type="info"    icon="el-icon-moon">{{ teamShift.teamName }}</el-button>
                                                 </div>                                               
                                           </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>                                         
-                                    -->
+                                    </el-row>                                  
                               </div>                
                               </template>
                         </el-calendar>
@@ -126,7 +104,6 @@ export default {
                   this.workdayList =[];
                   let that = this;         
                   listCalholiday(this.queryParams).then(response => {
-                  debugger;
                   if(response.data !=null){
                         response.data.forEach(theDay => {
                               if(theDay.holidayType =='HOLIDAY'){
diff --git a/src/views/mes/cal/calendar/index.vue b/src/views/mes/cal/calendar/index.vue
index 3219619..4d09551 100644
--- a/src/views/mes/cal/calendar/index.vue
+++ b/src/views/mes/cal/calendar/index.vue
@@ -4,7 +4,9 @@
             <el-tab-pane label="类型">
                 <CalendarTypeView></CalendarTypeView>
             </el-tab-pane>
-            <el-tab-pane label="班组"></el-tab-pane>
+            <el-tab-pane label="班组">
+                <TeamView></TeamView>
+            </el-tab-pane>
             <el-tab-pane label="个人"></el-tab-pane>
         </el-tabs>
     </div>
@@ -12,9 +14,9 @@
 
 <script>
 import CalendarTypeView from "./calendarType.vue"
-
+import TeamView from "./team.vue"
 export default {
-    components:{CalendarTypeView},
+    components:{CalendarTypeView,TeamView},
     data(){
         return {
 
diff --git a/src/views/mes/cal/calendar/team.vue b/src/views/mes/cal/calendar/team.vue
index e9776fd..91b22eb 100644
--- a/src/views/mes/cal/calendar/team.vue
+++ b/src/views/mes/cal/calendar/team.vue
@@ -1,15 +1,221 @@
 <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="item in teamList"
+                                    :key="item.teamId"
+                                    :label="item.teamId"
+                              >{{item.teamName}}</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 v-for="calendarDay in calendarDayList " :key="calendarDay.theDay">
+                                          <el-col :span="24" v-if="calendarDay.theDay == data.day && holidayList.indexOf(data.day) ==-1">
+                                                <div v-for="teamShift in calendarDay.teamShifts" :key="teamShift.orderNum" class="grid-content">
+                                                      <el-button v-if="teamShift.orderNum == 1" type="success" icon="el-icon-sunrise">{{ teamShift.teamName }}</el-button>
+                                                      <el-button v-if="teamShift.orderNum ==2 && calendarDay.shiftType=='SHIFT_THREE'" type="warning" icon="el-icon-sunny">{{ teamShift.teamName }}</el-button>
+                                                      <el-button v-if="teamShift.orderNum ==2 && calendarDay.shiftType=='SHIFT_TWO'"   type="info"    icon="el-icon-moon">{{ teamShift.teamName }}</el-button>
+                                                      <el-button v-if="teamShift.orderNum ==3 && calendarDay.shiftType=='SHIFT_THREE'" type="info"    icon="el-icon-moon">{{ teamShift.teamName }}</el-button>
+                                                </div>                                               
+                                          </el-col>
+                                    </el-row>
+                              </div>                
+                              </template>
+                        </el-calendar>
+                  </el-main>
+          </el-container>
       </div>
 </template>
 
 <script>
+import { listAllTeam  } from "@/api/mes/cal/team";
+import { listCalholiday } from "@/api/mes/cal/calholiday";
+import { listCalendars } from "@/api/mes/cal/calendar";
+import calendar from '@/utils/calendar';
 export default {
-
+      name: 'TeamView',     
+      dicts:['mes_calendar_type'], 
+      data(){
+            return {
+                  // 遮罩层
+                  loading: true,
+                  date: new Date(),
+                  teamList: [], //所有的班组
+                  holidayList:[],//假日
+                  workdayList:[],//工作日
+                  selectedType:null,
+                  calendarDayList:[
+                        {
+                              theDay:'2022-06-04',
+                              shiftType: 'SHIFT_TWO',
+                              teamShifts:[{teamName: '注塑1组',shiftName:'白班',orderNum: 1},{teamName: '注塑2组',shiftName:'中班',orderNum: 2},{teamName: '注塑3组',shiftName:'晚班',orderNum: 3}]                        
+                        },
+                        {
+                              theDay:'2022-06-13',
+                              shiftType: 'SHIFT_TWO',
+                              teamShifts:[{teamName: '注塑1组',shiftName:'白班',orderNum: 1},{teamName: '注塑2组',shiftName:'中班',orderNum: 2},{teamName: '注塑3组',shiftName:'晚班',orderNum: 3}]                        
+                        },
+                        {
+                              theDay:'2022-06-14',
+                              shiftType: 'SHIFT_THREE',
+                              teamShifts:[{teamName: '注塑1组',shiftName:'白班',orderNum: 1},{teamName: '注塑2组',shiftName:'中班',orderNum: 2},{teamName: '注塑3组',shiftName:'晚班',orderNum: 3}]                        
+                        }
+                  ],
+                  queryParams: {
+                        theDay: null,
+                        holidayType: null,
+                        startTime: null,
+                        endTime: null,
+                  },                        
+            }
+      },
+      watch:{
+            date:{
+                  handler(newVal,oldVal){
+                        console.log(newVal.getFullYear()+'-'+(newVal.getMonth()+1)+'-'+newVal.getDate());
+                  }
+            }
+      },
+      created() {
+            this.getList();
+            this.getTeams();
+      },
+      methods:{
+            getTeams(){
+                  listAllTeam().then(response =>{
+                        this.teamList = response.data;
+                  });
+            },
+            /** 查询节假日设置列表 */
+            getList() {
+                  this.loading = true;   
+                  this.holidayList =[];
+                  this.workdayList =[];
+                  let that = this;         
+                  listCalholiday(this.queryParams).then(response => {
+                  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(teamId){
+                  this.loading = true;   
+                  var param = {
+                        queryType: 'TEAM',
+                        teamId: teamId
+                  }
+                  listCalendars(param).then(response =>{
+                        this.calendarDayList = response.data;
+                  });
+            },
+            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