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" @change="orgChange"></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 title="营业" clickable @click="formData.isDisabled?null: changeRadio(1)">
            <template #right-icon>
              <van-radio :name="1" />
            </template>
          </van-cell>
          <van-cell 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 >
        <date-cell :disabled="formData.isDisabled || !formData.isEnable" title="营业开始" v-model="formData.workTime" date-type="time"></date-cell>
        <date-cell :disabled="formData.isDisabled || !formData.isEnable" title="营业结束" v-model="formData.workOffTime" date-type="time"></date-cell>
<!--        <van-cell title="开始时间" is-link  :label="formData.workTime" @click="formData.isDisabled?null:showTimePopup(1)"/>-->
<!--        <van-cell title="结束时间" is-link  :label="formData.workOffTime"  @click="formData.isDisabled?null:showTimePopup(0)"/>-->
        <van-popup v-model="showTime" round  position="bottom" >
          <van-datetime-picker
            v-model="selectedTime"
            type="time"
            min-hour="0"
            max-hour="23"
            @confirm="datePickerConfirm"
            :columns-order="['hour', 'minute']"
          />
        </van-popup>
      <!--   操作     -->
      </van-cell-group>
      <van-cell center title="是否复制到全月" v-if="!formData.isDisabled">
        <template #right-icon>
          <van-button round size="small" type="info" @click="copyMouth">点击复制</van-button>
        </template>
      </van-cell>

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

<script>
import NavBar from '@/components/NavBar';
import Calendar from '@/components/Calendar';
import OrgTree from '@/components/orgTree';
import DateCell from '@/components/dateCell';
import {mapGetters} from "vuex";
import {deptTreeList} from "@/api/public";
import {editWorkTime} from "@/views/menu/workTime/api";
import {dataList} from "@/views/menu/educationStatistics/api";
export default {
  components:{NavBar,Calendar,OrgTree,DateCell},
  data(){
    return{
      // orgInfo:{
      //   orgId:null,
      //   orgName:null,
      // },
      formData:{
        workTime:null,
        workOffTime:null,
        isEnable:null,
        ymdDate:null,
        isDisabled:false,
        orgId:null,
      },
      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:{
    orgChange(){
      // let data = {
      //   ...this.query
      // }
      // data.date = `${this.query.date}-01`;
      // if(!this.query.orgId) return this.$toast('请选择机构');
      // dataList(data).then(res=>{
      //   this.dataList = res.data;
      // })
    },
    //切换状态
    changeRadio(s){
      this.formData.isEnable = s;
    },
    //获取复制的数据
    getCopyData(arr){
      this.dates = arr;
    },
    copyMouth(){
      if(!this.formData.ymdDate) return this.$toast('请选择日期');
      this.$refs.calendar.copyMouth(this.formData);
      this.isCopy = true;
    },
    //根据状态切换选择时间
    datePickerConfirm(date){
      if(this.timeFlag) {
        this.formData.workTime = date;
      }else{
        this.formData.workOffTime = date;
      }
      this.showTime = false;
    },
    //获取机构树
    getTreeList(){
      deptTreeList(this.orgId).then(res=>{
        this.options = res.data;
        this.orgInfo.orgId = this.orgId;
        this.orgInfo.orgName = this.orgName;
        console.log(res,'3333')
      })
    },
    //改变机构后将重新发起请求
    changeTree({selectedOptions}){
      console.log(selectedOptions,'aaaaaa')
      this.formData.orgId = selectedOptions[selectedOptions.length-1].id;
      this.formData.orgName = selectedOptions[selectedOptions.length-1].name;
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.showOrg = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
    },
    //显示日历
    showCalendar(){
      this.calendar = !this.calendar;
    },
    //显示机构选择
    showPopup() {
      this.showOrg = true;
    },
    //显示时间选择
    showTimePopup(key){
      this.timeFlag = key;
      this.showTime = 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 {
        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;
      console.log(this.selectDate,'this.date')
      this.formData.ymdDate = this.selectDate.ymdDate;
      this.formData.isEnable = this.selectDate.isEnable;
      this.formData.workTime = this.selectDate.workTime;
      this.formData.workOffTime = this.selectDate.workOffTime;
      this.formData.isDisabled = this.selectDate.isDisabled;
    },
  }
}
</script>

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