soc_web/src/views/system/workTimeSet/dialog.add.vue

<template>
  <div class="question-infos">
    <DialogCom title="新增作息" @close="handleClose" :visible.sync="isShow" :close-on-click-modal="false"
      custom-class="gxDialog" width="1320px" append-to-body>
<!--      <div class="p-5 work-time">-->
        <el-form label-width="90px" label-suffix="" label-position="right">

          <el-form-item label="分配机构">
            <org-tree-select ref="orgTreeSelect" :checkShow="true"  v-model="orgIdList"></org-tree-select>
          </el-form-item >
          <el-form-item label="调整日期">
            <el-button type="primary" @click="addData">新增日期</el-button>
          </el-form-item>
          <!--  -->
          <el-form-item label="作息规则">
            <el-table class="w-auto" height="350" border :data="workTimeList">
              <el-table-column label="日期" width="160">
                <template slot-scope="r" >
                  <el-date-picker
                    style="width: 100%"
                    v-model="r.row.ymdDate"
                    size="mini"
                    :clearable=false
                    popper-class="no-atTheMoment"
                    :picker-options="startDatepickerOptions"
                    type="date"
                    placeholder="请选择日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column label="星期" width="80">
                <template slot-scope="r">
                  <span>{{parseTime(r.row.ymdDate ,'dddd')}}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" width="160">
                <template slot-scope="r">
<!--                  <el-switch-->
<!--                  v-model="r.row.isEnable"-->
<!--                  :active-value="1"-->
<!--                  :inactive-value="0"-->
<!--                  @change="onEnableChange(r.row)"-->
<!--                  active-text="营业"-->
<!--                  inactive-text="歇业">-->
<!--                </el-switch>-->

                  <el-radio-group
                      :disabled="r.row.disabled"
                      v-model="r.row.isEnable"
                      @change="onEnableChange(r.row)">
                    <el-radio text-color="#48bb78" :label="1">营业</el-radio>
                    <el-radio text-color="#f56565" :label="0">歇业</el-radio>
                  </el-radio-group>
                </template>
              </el-table-column>
              <el-table-column label="是否值班打卡" width="160">
                <template slot-scope="r">
                  <el-switch
                  v-model="r.row.isDuty"
                  :active-value="1"
                  :inactive-value="0"
                  @change="onEnableChange(r.row)"
                  active-text="是"
                  inactive-text="否">
                </el-switch>

<!--                  <el-radio-group-->
<!--                    :disabled="r.row.disabled"-->
<!--                    v-model="r.row.isEnable"-->
<!--                    @change="onEnableChange(r.row)">-->
<!--                    <el-radio text-color="#48bb78" :label="1">营业</el-radio>-->
<!--                    <el-radio text-color="#f56565" :label="0">歇业</el-radio>-->
<!--                  </el-radio-group>-->
                </template>
              </el-table-column>
              <el-table-column label="上班时间" width="120">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    size="mini"
                    :picker-options="pickerOptions"
                    :disabled="r.row.disabled || !r.row.isEnable"
                    v-model="r.row.workTime"/>
                </template>
              </el-table-column>
              <el-table-column label="营业开始" width="120">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%;"
                    size="mini"
                    :picker-options="pickerOptions"
                    :disabled="r.row.disabled || !r.row.isEnable"
                    v-model="r.row.openTime"/>
                </template>
              </el-table-column>
<!--              <el-table-column label="午休开始">-->
<!--                <template slot-scope="r">-->
<!--                  <el-time-select-->
<!--                    style="width: 100%"-->
<!--                    size="mini"-->
<!--                    :picker-options="pickerOptions"-->
<!--                    :disabled="r.row.disabled || !r.row.isEnable"-->
<!--                    v-model="r.row.noonbreakStart"/>-->
<!--                </template>-->
<!--              </el-table-column>-->
<!--              <el-table-column label="午休结束">-->
<!--                <template slot-scope="r">-->
<!--                  <el-time-select-->
<!--                    style="width: 100%"-->
<!--                    size="mini"-->
<!--                    :picker-options="pickerOptions"-->
<!--                    :disabled="r.row.disabled || !r.row.isEnable"-->
<!--                    v-model="r.row.noonbreakEnd"/>-->
<!--                </template>-->
<!--              </el-table-column>-->
              <el-table-column label="营业结束" width="120">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    size="mini"
                    :picker-options="pickerOptions"
                    :disabled="r.row.disabled || !r.row.isEnable"
                    v-model="r.row.closeTime"/>
                </template>
              </el-table-column>
              <el-table-column label="下班时间" width="120">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    size="mini"
                    :picker-options="pickerOptions"
                    :disabled="r.row.disabled || !r.row.isEnable"
                    v-model="r.row.workOffTime"/>
                </template>
              </el-table-column>
              <el-table-column label="操作列表" width="140">
                <template slot-scope="r">
                  <btn-tip type="text" @click="deleteData(r.row,r.$index)">删除</btn-tip>
                  <el-button type="text" @click="coppy(r.$index)">复制至全部</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>
<!--      </div>-->

      <div slot="footer" class="dialog-footer">
        <btn-tip tip="确定要提交吗?" type="primary" @click="onSubmit">保存</btn-tip>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </DialogCom>
  </div>
</template>
<script>

import OrgTreeSelect from '@/components/orgTreeSelect'
import BtnTip from "@/components/btnTip";
import dayjs from "dayjs";
import {formatTime, timeCheck} from "@/utils/ruoyi";
import {addWorkTimeDay} from "@/views/system/workTimeSet/api";
import day from "@/components/Crontab/day";


export default {
  components:{OrgTreeSelect,BtnTip},
  data() {
    return {
      selectTreeStrictly: true,
      isShow: false,
      workTimeList: [],
      orgIdList:  [],
      nodes:[],
      startDatepickerOptions: {
        disabledDate(time) {
          const date = new Date();
          date.setTime(date.getTime()- 3600 * 1000 * 24 );
          return time.getTime() < date;
        },
      },
    };
  },
  props: {},
  watch: {

  },
  computed: {
    pickerOptions() {
      return {
        start: "00:00",
        end: "24:00",
        step: "00:05",
      };
    },
  },
  methods: {
    // queryNode(nodes){
    //   console.log(JSON.parse(nodes),'nodes')
    //   this.orgIdList = JSON.parse(nodes).map(v=>{return v.id});
    // },
    add(){
      this.isShow = true;
    },
    async refresh() {
    },
    reset() {
      return {
        workTimeList:[]
      };
    },
    addData(){
      //获取workTimeList最后一条数据
      let workTime = {
        isEnable: 1,
        workTime: '08:30',
        openTime: '09:00',
        // noonbreakStart: '12:00',
        // noonbreakEnd: '14:00',
        closeTime: '17:00',
        workOffTime: '17:30',
        isDuty:'0',
        ymdDate: new Date(),
        disabled: false,
      };
      if(this.workTimeList.length>0){
        if(this.workTimeList[this.workTimeList.length-1].ymdDate!=null){
          workTime.ymdDate = dayjs(this.workTimeList[this.workTimeList.length-1].ymdDate).add(1,'day').toDate()
        }
      }
      this.workTimeList.push(workTime);
      console.log("addData",this.workTimeList);
    },
    coppy(index){
      let workTime = this.workTimeList[index];
      for(let i=0;i<this.workTimeList.length;i++){
        this.workTimeList[i].isEnable = workTime.isEnable;
        // this.workTimeList[i].workTime = workTime.workTime;
        this.workTimeList[i].openTime = workTime.openTime;
        // this.workTimeList[i].noonbreakStart = workTime.noonbreakStart;
        // this.workTimeList[i].noonbreakEnd = workTime.noonbreakEnd;
        this.workTimeList[i].closeTime = workTime.closeTime;
        // this.workTimeList[i].workOffTime = workTime.workOffTime;
      }
    },
    deleteData(row,index){
      console.log(index);
      this.workTimeList.splice(index,1);
    },
    //检查每一项
    check(other) {
      if(!other.ymdDate){
        this.$message.warning(`日期不能为空`);
        return;
      }
      const ds = this.formatTime(other.ymdDate,"YYYY-MM-DD");
      console.log(other,'ds')
      if ( !other.isEnable === null && !other.disabled ) {
        this.$message.warning(`${ds}：未进行配置`);
        return;
      }
      if(other.isEnable){
        if(!other.openTime || !other.closeTime){
          this.$message.warning(`${ds}：未配置时间`);
          return;
        }
        if(!timeCheck([other.openTime,other.closeTime])){
          this.$message.warning(`${ds}：营业开始时间应在营业结束之前`);
          return false;
        }
      }
      return true
      // if (other.isEnable) {
      //   if (
      //       !(
      //           other.workTime &&
      //           other.openTime &&
      //           other.closeTime &&
      //           other.workOffTime
      //       )
      //   ) {
      //     this.$message.error(`${ds}未配置时间`);
      //     return;
      //   }
      //   if (!other.noonbreakStart ^ !other.noonbreakEnd) {
      //     this.$message.error(`午休开始及结束时间必须同时配置`);
      //     return;
      //   }
      //   if (
      //       !timeCheck([
      //         other.workTime,
      //         other.openTime,
      //         other.noonbreakStart,
      //         other.noonbreakEnd,
      //         other.closeTime,
      //         other.workOffTime,
      //       ])
      //   ) {
      //     this.$message.error(
      //         `${ds}上班时间<=营业时间<=午休开始<=午休结束<=营业终了<=下班时间`
      //     );
      //     return false;
      //   }
      // }
      // return true;
    },
    handleClose() {
      this.isShow = false;
      this.workTimeList = [];
      this.orgIdList=[];
      this.$refs['orgTreeSelect'].clear();
    },
    onEnableChange(workTime) {
      if (!workTime.isEnable) {
        workTime.openTime = null;
        workTime.closeTime = null;
        // workTime.noonbreakStart = null;
        // workTime.noonbreakEnd = null;
        // workTime.workTime = null;
        // workTime.workOffTime = null;
      }
    },
    async onSubmit() {
      if(this.orgIdList.length === 0)return  this.$message.warning('请选择机构！');
      if(this.workTimeList.length === 0)return  this.$message.warning('请添加日期！');
      //判断是否有重复的日期
      let dateList = [];
      let workTimeList = JSON.parse(JSON.stringify(this.workTimeList))
      for (let v of workTimeList) {
        if (v.ymdDate) {
          let date = this.formatTime(v.ymdDate,"YYYY-MM-DD");
          if (dateList.indexOf(date) > -1) {
            this.$message.error(`日期: ${date} 重复`);
            return;
          }
          dateList.push(date);
        }
      }
      // 校验
      for (let workTime of workTimeList) {
        if (!this.check(workTime)) {
          return;
        }
      }
      let data = {
        orgIdList:this.orgIdList,
        workTimeList:workTimeList
      }
      addWorkTimeDay(data).then(res=>{
        this.$emit("ok");
        this.handleClose();
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.question-infos {
  .el-form {
    padding-top: 10px;

  }
}

.el-rate {
  margin-top: 6px;
}

.change-icon {
  font-size: 18px;
}

</style>