soc_app/src/views/menu/workTime/index.vue

<template>
  <div class="works-time">
    <nav-bar></nav-bar>
    <div class="form-box">
      <org-tree v-model="formData.orgId"></org-tree>
      <!--   选择日期   -->
      <van-collapse v-model="activeCalendar">
        <van-collapse-item title="日期" :label="formData.ymdDate" name="1">
          <calendar ref="calendar" :orgId="formData.orgId"  @change="onChange" @copy="getCopyData"></calendar>
        </van-collapse-item>
      </van-collapse>

      <!--   选择状态   -->
      <van-radio-group :disabled="formData.isDisabled" v-model="formData.isEnable">
        <van-cell-group>
          <van-cell required title="营业" clickable @click="formData.isDisabled?null: changeRadio('1')">
            <template #right-icon>
              <van-radio name="1" />
            </template>
          </van-cell>
          <van-cell required title="歇业" clickable @click="formData.isDisabled?null: changeRadio('0')">
            <template #right-icon>
              <van-radio name="0" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-radio-group>

      <!--  选择时间    -->
      <van-cell-group>
        <hours-cell required is-row :disabled="formData.isDisabled || !formData.isEnable || formData.isEnable =='0'" title="营业开始" v-model="formData.openTime"></hours-cell>
        <hours-cell required is-row :disabled="formData.isDisabled || !formData.isEnable || formData.isEnable =='0'" title="营业结束" v-model="formData.closeTime"></hours-cell>
      </van-cell-group>
      <!--  选择时间    -->
      <van-cell-group>
        <hours-cell required is-row :disabled="formData.isDisabled || !formData.isEnable || formData.isEnable =='0'" title="上班时间" v-model="formData.workTime"></hours-cell>
        <hours-cell required is-row :disabled="formData.isDisabled || !formData.isEnable || formData.isEnable =='0'" title="下班时间" v-model="formData.workOffTime"></hours-cell>
      </van-cell-group>

      <!--   操作     -->
      <van-cell-group>
        <van-cell center title="是否值班打卡" v-if="!formData.isDisabled">
          <template #right-icon>
            <van-switch :size="20" active-value="1" inactive-value="0" v-model="formData.isDuty"></van-switch>
          </template>
        </van-cell>
        <van-cell center title="是否复制到全月" v-if="!formData.isDisabled">
          <template #right-icon>
            <van-button size="mini" type="info" @click="copyMouth">点击复制</van-button>
          </template>
        </van-cell>
      </van-cell-group>

      <div class="button-box">
        <van-button type="info" size="large" v-show="!formData.isDisabled" @click="onsubmit">提交</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar';
import Calendar from '@/components/Calendar';
import OrgTree from '@/components/orgTree';
import HoursCell from '@/components/HoursCell';
import {mapGetters} from "vuex";
import {deptTreeList} from "@/api/public";
import {editWorkTime} from "@/views/menu/workTime/api";
import {timeCheck} from "@/utils/date"
import {dataList} from "@/views/menu/educationStatistics/api";
export default {
  components:{NavBar,Calendar,OrgTree,HoursCell},
  data(){
    return{
      // orgInfo:{
      //   orgId:null,
      //   orgName:null,
      // },
      formData:{
        openTime:null,
        closeTime:null,
        workTime:null,
        workOffTime:null,
        isEnable:null,
        ymdDate:null,
        isDisabled:false,
        orgId:null,
        isDuty:'0'
      },
      dates:[],
      activeCalendar:['1'],
      options: [],
      showOrg:false,
      calendar:true,
      activeNames: ['1'],
      showTime:false,
      selectedTime:null,
      fieldNames: {
        text: 'name',
        value: 'id',
        children: 'children',
      },
      timeFlag:true,
      selectDate:null,
      isCopy:false,
    }
  },
  mounted() {
    this.formData.orgId = this.orgId;
  },
  computed:{
    ...mapGetters(['orgName','orgId']),
  },
  methods:{
    //切换状态
    changeRadio(s){
      this.formData.isEnable = s;
      this.formData.openTime = null;
      this.formData.closeTime = null;
      this.formData.workTime = null;
      this.formData.workOffTime = null;
    },
    //获取复制的数据
    getCopyData(arr){
      this.dates = arr;
    },
    copyMouth(){
      if(!this.formData.ymdDate) return this.$toast('请选择日期');
      if(this.formData.isEnable === null) return this.$toast('请选择营业状态');
      if(this.formData.isEnable == '1'){
        if(!this.formData.openTime) return this.$toast('请选择开始时间');
        if(!this.formData.closeTime) return this.$toast('请选择结束时间');
        if(!this.formData.workTime) return this.$toast('请选择上班时间');
        if(!this.formData.workOffTime) return this.$toast('请选择下班时间');
        if(!timeCheck([this.formData.openTime,this.formData.closeTime])) return this.$toast('开始时间不能大于结束时间');
        if(!timeCheck([this.formData.workTime,this.formData.workOffTime])) return this.$toast('上班时间不能大于下班时间');
      }
      this.$refs.calendar.copyMouth(this.formData);
      this.isCopy = true;
    },
    //提交
    onsubmit(){
      if(!this.formData.orgId) return this.$toast('请选择机构');

      if(this.isCopy){
        let data = {
          orgIdList:[this.formData.orgId],
          workTimeList:this.dates
        }
        editWorkTime(data).then(res=>{
          this.$refs.calendar.queryMoth(); //刷新日历的状态
          this.$toast.success('操作成功');
          this.isCopy = false;
        })
      }else {
        if(this.formData.isEnable === null){
          return this.$toast('请选择营业状态');
        }
        if(this.formData.isEnable == '1'){
          if(!this.formData.openTime) return this.$toast('请选择开始时间');
          if(!this.formData.closeTime) return this.$toast('请选择结束时间');
          if(!this.formData.workTime) return this.$toast('请选择上班时间');
          if(!this.formData.workOffTime) return this.$toast('请选择下班时间');
          if(!timeCheck([this.formData.openTime,this.formData.closeTime])) return this.$toast('开始时间不能大于结束时间');
          if(!timeCheck([this.formData.workTime,this.formData.workOffTime])) return this.$toast('上班时间不能大于下班时间');
        }
        let data = {
          orgIdList:[this.formData.orgId],
          workTimeList:[this.formData]
        }
        editWorkTime(data).then(res => {
          this.$refs.calendar.queryMoth(); //刷新日历的状态
          this.$toast.success('操作成功');
          this.isCopy = false;
        })
      }
    },
    //日期选择
    onChange(day){
      this.selectDate = day;
      this.formData.ymdDate = this.selectDate.ymdDate;
      this.formData.isEnable = this.selectDate.isEnable;
      this.formData.openTime = this.selectDate.openTime;
      this.formData.closeTime = this.selectDate.closeTime;
      this.formData.isDisabled = this.selectDate.isDisabled;
      this.formData.workTime = this.selectDate.workTime;
      this.formData.workOffTime = this.selectDate.workOffTime;
      this.formData.isDuty = this.selectDate.isDuty;
    },
  }
}
</script>

<style lang="scss" scoped>
  .works-time{
  }
  .form-box{
    height: calc(100vh - 200px);
    padding: 20px;
    overflow: auto;
  }
  .radio-box{
    height: 100px;
    padding: 30px;
  }
  .org-name{
    font-size: 30px;
    line-height: 80px;
    height: 80px;
    text-align: center;
  }
  .button-box{
    margin-top: 30px;
  }
</style>