1.工厂日历增加班次选择

src/components/Gcrl/GcrlProperties.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="middle-event">
+    <el-select type="primary" v-model="workType" @change="changeWorkType" v-show="!isRestDay(data)" style="width: 50%;">
+      <el-option value="0" key="0" label="白班" />
+      <el-option value="1" key="1" label="二班" />
+      <el-option value="2" key="2" label="夜班" />
+      <el-option value="3" key="3" label="双班(白+夜)" />
+    </el-select>
+    <el-button type="primary" @click="changeDay(data)"   plain >{{ isRestDay(data)?'休息':'工作' }}日</el-button>
+  </div>
+</template>
+<script>
+import {update} from "@/api/sjzx/gcrlWH";
+
+export default {
+  name:"GcrlProperties",
+  props:{
+    data:{
+      type:Date,
+      default:{}
+    },
+    restDays:{
+      type:Array,
+      default: []
+    },
+    eb:{
+      type:Array,
+      default: []
+    },
+    yb:{
+      type:Array,
+      default: []
+    },
+    sb:{
+      type:Array,
+      default: []
+    },
+  },
+  data(){
+    return{
+      workType:null,
+    }
+  },
+  mounted(){
+    this.handler()
+    console.log(this.workType)
+  },
+  methods:{
+    handler(){
+      const data=this.dateFormat(this.$props.data)
+      console.log(data)
+      if (this.$props.eb.includes(data)){
+        this.workType='1'
+        return
+      }
+      console.log(this.$props.yb);
+      if (this.$props.yb.includes(data)){
+        this.workType='2'
+        return
+      }
+      if (this.$props.sb.includes(data)){
+        this.workType='3'
+        return
+      }
+      this.workType='0'
+    },
+    changeWorkType(val){
+      const dateF=this.dateFormat(this.$props.data);
+      update({pb:this.workType,gl:dateF})
+    },
+    changeDay(date){
+      var  dateF=this.dateFormat(date);
+      if (this.$props.restDays.includes(dateF)){
+        update({xxr:'1',gl:dateF}).then((res)=>{
+          this.$props.restDays.splice(this.$props.restDays.indexOf(dateF) , 1)
+        })
+      }else {
+        update({xxr:'0',gl:dateF}).then((res)=>{
+          this.$props.restDays.push(dateF)
+        })
+      }
+    },
+    isRestDay(date){
+      const dateF=this.dateFormat(date);
+      return this.$props.restDays.includes(dateF)
+    },
+    dateFormat(date){
+      const year = date.getFullYear();
+      const month = ('0' + (date.getMonth() + 1)).slice(-2);
+      const day = ('0' + date.getDate()).slice(-2);
+      var dateF=year+'/'+month+'/'+day;
+      return dateF;
+    },
+    isHidden(date){
+      // let today = new Date(Date.UTC(2024, 5, 18));
+      let today = new Date();
+      if (today.getDate()<21){
+        return !(this.$props.data < today);
+      }else {
+        var lastDay= new Date(today.getFullYear(), today.getMonth()+1, 1);
+        return !(date < lastDay);
+      }
+
+    },
+  }
+}
+</script>

src/components/Gcrl/index.vue

@@ -40,12 +40,9 @@
             :class="{ faded: !isCurrentMonth(day.date),}"
           >
             <div class="top-day">{{ day.date.getDate() }}日</div>
-            <div class="middle-event" v-show="isHidden(day.date)" >
-              <el-button type="primary" @click="changeDay(day.date)"   plain >{{ isRestDay(day.date)?'休息':'工作' }}日</el-button>
-            </div>
+            <GcrlProperties v-if="flag" :data="day.date" :eb="eb" :yb="yb" :sb="sb" :rest-days="restDays"/>
             <div class="bottom-event" >
             </div>
-
           </div>
         </td>
       </tr>
@@ -56,15 +53,22 @@
 </template>
 <script>
 import { getList, generate, update } from "@/api/sjzx/gcrlWH";
+import GcrlProperties from "@/components/Gcrl/GcrlProperties.vue";
 export default {
+  components: {GcrlProperties},
   data() {
     return {
+      workType:'0',
       current: new Date(),
       today: new Date(),
       restDays:[],
       years:[],
       nextYear:0,
-      flag:false
+      flag:false,
+      eb:[],//二班数据
+      yb:[],//夜班数据
+      sb:[],//双班数据
+      showProperties:false
     };
   },
 
@@ -91,7 +95,6 @@ export default {
     }
   },
   methods: {
-
     generateNextYear(){
       this.years.length-1
       generate('').then((res) => {
@@ -107,33 +110,12 @@ export default {
         this.years = res.data.years;
         this.restDays=res.data.restDays;
         this.nextYear=res.data.nextYear;
+        this.eb=res.data.eb;
+        this.yb=res.data.yb
+        this.sb=res.data.sb
         this.flag=true
       });
     },
-    changeDay(date){
-      var  dateF=this.dateFormat(date);
-      if (this.restDays.includes(dateF)){
-        update({xxr:'1',gl:dateF}).then((res)=>{
-          this.restDays.splice(this.restDays.indexOf(dateF) , 1)
-        })
-      }else {
-        update({xxr:'0',gl:dateF}).then((res)=>{
-          this.restDays.push(dateF)
-        })
-
-      }
-    },
-    isHidden(date){
-      // let today = new Date(Date.UTC(2024, 5, 18));
-      let today = new Date();
-      if (today.getDate()<21){
-        return !(date < today);
-      }else {
-        var lastDay= new Date(today.getFullYear(), today.getMonth()+1, 1);
-        return !(date < lastDay);
-      }
-
-    },
     getCurDate() {
       var year = this.current.getFullYear();
       var month = this.current.getMonth() + 1; // getMonth() returns a zero-based value (0-11)