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="1200px" append-to-body>
<!--      <div class="p-5 work-time-modify">-->
        <el-form
            :disabled="title === '查看作息模版'"
            label-width="100px"
            label-suffix=""
            label-position="left">
          <el-form-item>
            <span slot="label"> <span style="color: red"> * </span>机构 </span>
            <org-tree-select v-model="formData.orgIds" :checkShow="true" :disabled="disabled" ></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="disabled"
              :clearable="!disabled"
              :picker-options="startDatepickerOptions"
              popper-class="no-atTheMoment"
              type="date"
              placeholder="请选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label"> <span style="color: red"> * </span>作息设置 </span>
            <el-table  border :data="formData.dayOfWeeks">
              <el-table-column label="星期" width="100px" prop="dayOfWeekText" align="center">
              </el-table-column>
              <el-table-column label="营业状态" align="center" width="180">
                <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="值班打卡" align="center">
                <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-->
                  <!--                      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="上班时间" align="center">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    size="mini"
                    :picker-options="pickerOptions"
                    :disabled="r.row.isWorkday=='0' ||!r.row.isWorkday"
                    v-model="r.row.workTime"/>
                </template>
              </el-table-column>
              <el-table-column label="营业开始" align="center">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    size="mini"
                    :picker-options="pickerOptions"
                    :disabled="r.row.isWorkday=='0' ||!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="营业结束" align="center">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    size="mini"
                    :picker-options="pickerOptions"
                    :disabled="r.row.isWorkday=='0' || !r.row.isWorkday"
                    v-model="r.row.closeTime"/>
                </template>
              </el-table-column>
              <el-table-column label="下班时间" align="center">
                <template slot-scope="r">
                  <el-time-select
                    style="width: 100%"
                    size="small"
                    :picker-options="pickerOptions"
                    :disabled="r.row.isWorkday=='0' ||!r.row.isWorkday"
                    v-model="r.row.workOffTime"/>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </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 type="primary" @click="checkDataMsg(1)">提交</el-button>
        <el-button @click="handleClose()">取消</el-button>
      </span>
    </DialogCom>
  </div>
</template>
<script>

import BtnTip from "@/components/btnTip";
import OrgTreeSelect from '@/components/orgTreeSelect'
import { timeCheck } from "@/utils/ruoyi";
import {addTimeWeek, 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: {
        orgIds:[],
        dayOfWeeks: null,
        effectiveDate:null,
      },
      disabled: false,
      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:05",
      };
    },
  },
  methods: {
    edit(row){
      this.title = '编辑作息模版';
      this.isShow = true;
      this.id = row.id;
      this.orgId = row.orgId;
      this.getData();
    },
    add(){
      this.title = '新增作息模版';
      this.formData.dayOfWeeks = JSON.parse(JSON.stringify(json));
      this.isShow = true;
    },
    show(row) {
      this.title = '查看作息模版';
      this.isShow = true;
      this.id = row.id;
      this.orgId = row.orgId;
      this.disabled = true;
      this.getData();
    },
    onSubmit() {
      if (this.formData.orgIds.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;
      }
      // 校验
      for (let workTime of this.formData.dayOfWeeks) {
        if (!this.checkItem(workTime)) {
          return;
        }
      }
      addTimeWeek(this.formData).then(res=>{
        this.handleClose();
        this.$emit("ok");
      })
    },
    checkItem(dayOfWeek){
      console.log(dayOfWeek,'dayOfWeek');
      //是否启用
      if(dayOfWeek.isWorkday == '0') return true;
      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.closeTime,dayOfWeek.workOffTime];
      if (!timeCheck(arr)) {

        this.$message.error(`${dayOfWeek.dayOfWeekText}：请按照（上班时间<营业时间<营业结束<下班时间）顺序配置`);
        return false;
      }
      return true;
    },
    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=>{
        res.data.effectiveDate = new Date(res.data.effectiveDate);
        this.formData = res.data;
        this.formData.orgIds = [res.data.orgId];
      })
    },
    onEnableChange(workTime) {
      if (workTime.isWorkday=='0') {
        workTime.openTime = null;
        workTime.closeTime = null;
        // workTime.noonbreakStart = null;
        // workTime.noonbreakEnd = null;
        workTime.workTime = null;
        workTime.workOffTime = null;
      }
    },
    handleClose() {
      this.id=null;
      this.formData = {
        orgIds: [],
        dayOfWeeks: null,
        effectiveDate: null,
        checkDataResult:null,
      };
      this.tagsList = [];
      this.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>