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

<template>
  <div class="question-infos">
    <el-dialog title="新增作息" @close="handleClose" :visible.sync="isShow" :close-on-click-modal="false"
      custom-class="gxDialog" width="75%" 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 @selectNode="queryNode"></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="160px">
                <template slot-scope="r" >
                  <el-date-picker
                    style="width: 100%"
                    v-model="r.row.date"
                    value-format="yyyy-MM-dd hh:mm:ss"
                    :clearable=false
                    popper-class="no-atTheMoment"
                    :picker-options="startDatepickerOptions"
                    type="date"
                    placeholder="请选择日期">
                  </el-date-picker>
                </template>
              </el-table-column>
              <el-table-column label="星期" width="80px">
                <template slot-scope="r">
                  <span>{{parseTime(r.row.date ,'dddd')}}</span>
                </template>
              </el-table-column>
              <el-table-column label="状态" width="160px">
                <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="上班时间" >
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    :picker-options="pickerOptions"
                    :disabled="r.row.disabled || !r.row.isEnable"
                    v-model="r.row.workTime"/>
                </template>
              </el-table-column>
              <el-table-column label="营业时间" >
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    :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%"
                    :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%"
                    :picker-options="pickerOptions"
                    :disabled="r.row.disabled || !r.row.isEnable"
                    v-model="r.row.noonbreakEnd"/>
                </template>
              </el-table-column>
              <el-table-column label="营业终了">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    :picker-options="pickerOptions"
                    :disabled="r.row.disabled || !r.row.isEnable"
                    v-model="r.row.closeTime"/>
                </template>
              </el-table-column>
              <el-table-column label="下班时间" >
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    :picker-options="pickerOptions"
                    :disabled="r.row.disabled || !r.row.isEnable"
                    v-model="r.row.workOffTime"/>
                </template>
              </el-table-column>
              <el-table-column label="操作列表" width="140px">
                <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">
        <el-button @click="handleClose">取消</el-button>
        <btn-tip tip="确定要提交吗?" type="primary" @click="onSubmit">保存</btn-tip>
      </div>
    </el-dialog>
  </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";


export default {
  components:{OrgTreeSelect,BtnTip},
  data() {
    return {
      selectTreeStrictly: true,
      isShow: false,
      workTimeList: [],
      orgIdList:  [],
      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:10",
      };
    },
  },
  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: '07:00',
        openTime: '09:00',
        noonbreakStart: null,
        noonbreakEnd: null,
        closeTime: '17:00',
        workOffTime: '20:00',
        date: new Date(),
        disabled: false,
      };
      if(this.workTimeList.length>0){
        if(this.workTimeList[this.workTimeList.length-1].date!=null){
          workTime.date = dayjs(this.workTimeList[this.workTimeList.length-1].date).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.date){
        this.$message.error(`日期不能为空`);
        return;
      }
      const ds = this.parseTime(other.date,"YYYY-MM-DD");
      if (!other.disabled && !other.isEnable) {
        this.$message.error(`${ds}未进行配置`);
        return;
      }
      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=[];
    },
    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() {
      //判断是否有重复的日期
      let dateList = [];
      for (let v of this.workTimeList) {
        if (v.date) {
          let date = this.formatTime(v.date,"YYYY-MM-DD");
          if (dateList.indexOf(date) > -1) {
            this.$message.error(`日期: ${date} 重复`);
            return;
          }
          dateList.push(date);
        }
      }
      // 校验
      for (let workTime of this.workTimeList) {
        if (!this.check(workTime)) {
          return;
        }
      }
      let data = {
        orgIdList:this.orgIdList,
        workTimeList:this.workTimeList
      }
      addWorkTimeDay(data).then(res=>{
        this.$emit("success");
        this.handleClose();
      })

      // await this.$api.workTimeMonth.edit({
      //   ...this.data,
      //   workTimeList: this.workTimeList,
      // }).then((v) => {
      //   this.$emit("success");
      //   this.onHide();
      // });
    },
    //apimark//
  },
};
</script>

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

  }
}

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

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

</style>