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

<template>
  <div class="question-infos">
    <DialogCom :title="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-modify">-->
        <el-form
            :disabled="title === '查看作息模版'"
            label-width="140px"
            :rules="rules"
            label-suffix=":"
            label-position="left">
          <el-form-item>
            <span slot="label"> <span style="color: red"> * </span>机构 </span>
            <org-tree-select v-model="tagsList" :disabled="data.disabled" @selectNode="queryNode"></org-tree-select>
          </el-form-item>
          <el-form-item >
            <span slot="label"> <span style="color: red"> * </span>生效日期 </span>
            <el-date-picker
              v-model="formData.effectiveDate"
              value-format="yyyy-MM-dd hh:mm:ss"
              :disabled="data.disabled"
              :clearable="!data.disabled"
              :picker-options="startDatepickerOptions"
              popper-class="no-atTheMoment"
              type="date"
              placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <!--  -->
          <div class="grid" >
            <p>
              <span style="color: red;"> * </span>作息设置(勾选表示当日正常上班)
            </p >
            <div class="box">
              <el-table class="w-auto" border :data="formData.dayOfWeeks">
                <el-table-column label="星期" width="100px" prop="dayOfWeekText">
                </el-table-column>
                <el-table-column label="营业状态" width="160px">
                  <template slot-scope="r">
                    <el-switch
                      v-model="r.row.isWorkday"
                      :active-value="1"
                      :inactive-value="0"
                      @change="onEnableChange(r.row)"
                      active-text="营业"
                      inactive-text="歇业">
                    </el-switch>
<!--                    <el-radio-group-->
<!--                        v-model="r.row.isWorkday"-->
<!--                        @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%"
                      size="mini"
                      :picker-options="pickerOptions"
                      :disabled="!r.row.isWorkday || !r.row.isWorkday"
                      v-model="r.row.workTime"/>
                  </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.isWorkday ||!r.row.isWorkday"
                      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.isWorkday || !r.row.isWorkday"
                      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.isWorkday || !r.row.isWorkday"
                      v-model="r.row.noonbreakEnd"/>
                  </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.isWorkday || !r.row.isWorkday"
                      v-model="r.row.closeTime"/>
                  </template>
                </el-table-column>
                <el-table-column label="下班时间">
                  <template slot-scope="r">
                    <el-time-select
                      style="width: 100%"
                      size="small"
                      :picker-options="pickerOptions"
                      :disabled="!r.row.isWorkday || !r.row.isWorkday"
                      v-model="r.row.workOffTime"/>
                  </template>
                </el-table-column>

              </el-table>

            </div>
          </div>
        </el-form>
      <div style="color: red;font-size: 12px;line-height: 30px;">
        注：保存后生成或更新本月或下月生效日期后的每日作息
      </div>
<!--      </div>-->
      <div v-if="title != '查看作息模版'" slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <btn-tip tip="确定要提交吗?" type="primary" @click="onSubmit">保存</btn-tip>
      </div>
    </DialogCom>

    <DialogCom
        title="提示"
        :visible="centerDialogVisible"
        width="25%"
        @close="centerDialogVisible=false"
        center>
      <span>所选机构中在当前生效日期内已有按指定日期配置的作息数据，是否覆盖按指定日期配置的作息数据?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitData(0)">不覆盖</el-button>
        <el-button type="primary" @click="submitData(1)">覆盖</el-button>
      </span>
    </DialogCom>

    <DialogCom
        title="提示"
        :visible="centerDialogVisiblea"
        width="25%"
        @close="centerDialogVisiblea=false"
        center>
      <span>已存在其他生效的配置，将会生成{{checkMsg}}的作息，是否提交?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose()">取消</el-button>
        <el-button type="primary" @click="checkDataMsg(1)">提交</el-button>
      </span>
    </DialogCom>
  </div>
</template>
<script>

import BtnTip from "@/components/btnTip";
import OrgTreeSelect from '@/components/orgTreeSelect'
import { timeCheck } from "@/utils/ruoyi";
import {addTimeWeek,checkData, queryInfoById} from "@/views/system/workTimeSet/api";
import {json} from './json'
export default {
  components:{BtnTip,OrgTreeSelect},
  data() {
    return {
      title:'',
      isShow: false,
      row:null,
      id:0,
      orgId:null,
      formData: {
        orgIdList: [],
        dayOfWeeks: json,
        effectiveDate:null,
      },
      data: {
        orgIdList: [],
        disabled: false,
      },
      rules: {
        orgIdList: [
          {
            required: true,
            message: "请选择机构",
            trigger: "change",
          },
        ],
      },
      // options: [
      //   {
      //     value: new Date().getFullYear(),
      //     label: new Date().getFullYear(),
      //   },
      //   {
      //     value: new Date().getFullYear() + 1,
      //     label: new Date().getFullYear() + 1,
      //   },
      // ],
      startDatepickerOptions: {
        disabledDate(time) {
          const date = new Date();
          date.setTime(date.getTime() );
          return time.getTime() < date;
        },
      },
      centerDialogVisible: false,
      centerDialogVisiblea:false,
      checkData:null,
      checkMsg:null,
      //回显tag
      tagsList:[]
    };
  },
  props: {},
  watch: {
  },
  computed: {
    pickerOptions() {
      return {
        start: "00:00",
        end: "24:00",
        step: "00:10",
      };
    },
  },
  methods: {
    queryNode(json){
      this.data.orgIdList = JSON.parse(json);
      console.log(this.orgIdList,'orgIdList')
    },
    edit(row){
      this.title = '编辑作息模版';
      this.isShow = true;
      this.formData = row;
    },
    add(){
      this.title = '新增作息模版';
      this.isShow = true;
      //this.getData()
      // for (let i=0; i <= 6;i++){
      //   this.formData.dayOfWeeks.push({})
      // }
    },
    show(row) {
      this.title = '查看作息模版';
      this.isShow = true;
      this.id = row.id;
      this.orgId = row.orgId;
      this.getData();
    },
    onSubmit() {
      this.formData.orgIds = this.data.orgIdList.map(v=>{
        return v.id
      });
      if (this.data.orgIdList.length < 1) {
        this.$message.error("机构不能为空");
        return;
      }
      if (!this.formData.effectiveDate ) {
        this.$message.error("生效日期不能为空");
        return;
      }
      if (this.formData.dayOfWeeks.filter((w) => w.isWorkday == 1 || w.isWorkday).length === 0) {
        this.$message.error("工作日不能为空");
        return;
      }
      this.formData.dayOfWeeks.forEach(v=>{
        let dayOfWeek = v;
        console.log(dayOfWeek,'dayOfWeek');
        //是否启用
        if(!dayOfWeek.isWorkday ) return ;
        if (!(dayOfWeek.workTime && dayOfWeek.openTime && dayOfWeek.closeTime && dayOfWeek.workOffTime)) {
          this.$message.error(`${dayOfWeek.dayOfWeekText}的上班时间、营业时间未配置完整`);
          return;
        }
        if (!dayOfWeek.noonbreakStart ^ !dayOfWeek.noonbreakEnd) {
          this.$message.error(`${dayOfWeek.dayOfWeekText}的午休开始及结束时间必须同时配置`);
          return;
        }
        let arr = [dayOfWeek.workTime, dayOfWeek.openTime, dayOfWeek.noonbreakStart, dayOfWeek.noonbreakEnd, dayOfWeek.closeTime, dayOfWeek.workOffTime];
        let flag = timeCheck(arr);
        if (!flag) {
          this.$message.error(`${dayOfWeek.dayOfWeekText}的上班时间<=营业时间<=午休开始<=午休结束<=营业终了<=下班时间`);
          return false;
        }
      })
      checkData(this.formData).then(res=>{
        this.checkData = res.checkData;
        if(!res.checkData) {
          addTimeWeek(this.formData).then(res=>{
            this.$emit("success");
            this.handleClose();
          })
        }
      })
    },
    async submitData(result){
      this.centerDialogVisible=false;
      this.centerDialogVisiblea=false;
      this.formData.checkDataResult =result;
      // this.$api.workTimeMonth.timeSetAdd(this.formData).then((v) => {
      //   this.$emit("success");
      //   this.onHide();
      // });

    },
    async getData() {
      queryInfoById({id:this.id}).then(res=>{
        this.formData = res.data;
        if (this.id != 0) {
          this.tagsList = [
            {
              id:res.data.orgId,
              name:res.data.orgName
            }
          ];
          this.data.disabled = true;
          this.data.orgIdList = [this.formData.orgId];
          console.log(this.formData.orgIdList);
          if (this.orgId) {
            this.data.orgIdList = [this.formData.orgId];
            console.log(this.data.orgIdList);
          }
        } else {
          this.data.orgIdList = [];
          this.data.disabled= false;
        }
      })

      // this.data.orgIdList =[];
    },
    onEnableChange(workTime) {
      if (!workTime.isWorkday) {
        workTime.openTime = null;
        workTime.closeTime = null;
        workTime.noonbreakStart = null;
        workTime.noonbreakEnd = null;
        workTime.workTime = null;
        workTime.workOffTime = null;
      }
    },
    handleClose() {
      this.id=null;
      this.formData = {
        orgIdList: [],
        dayOfWeeks: json,
        effectiveDate: null,
        checkDataResult:null,
      };
      this.tagsList = [];
      this.data.orgIdList = [];
      this.data.disabled= false;
      this.checkData=null;
      this.checkMsg=null;
      this.centerDialogVisiblea=false;
      this.centerDialogVisible=false;
      this.isShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.work-time-modify {
  .red {
    color: red;
  }
  .grid {
    width: 100%;
    .title {
    }
    .box {
      padding: 20px;
      border: 1px solid #000000;
      background: #ffffff;
      .time {
      }
    }
  }
  //
  .el-input {
    width: 400px;
  }

  .el-table {
    .el-date-editor.el-input {
      width: 100%;
    }
  }
  .el-dialog__body {
    overflow-y: auto;
    min-height: 200px;
  }
}
</style>