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="800"  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="营业状态">
                  <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, 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",
          },
        ],
      },
      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: {
    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;
    },
    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;
      }
      // 校验
      for (let workTime of this.formData.dayOfWeeks) {
        if (!this.checkItem(workTime)) {
          return;
        }
      }
      addTimeWeek(this.formData).then(res=>{
        this.$emit("ok");
        this.handleClose();
      })
    },
    checkItem(dayOfWeek){
      console.log(dayOfWeek,'dayOfWeek');
      //是否启用
      if(!dayOfWeek.isWorkday) return true;
      if (!( dayOfWeek.openTime && dayOfWeek.closeTime)) {
        this.$message.error(`${dayOfWeek.dayOfWeekText}的营业时间未完整配置`);
        return;
      }
      // if (!dayOfWeek.noonbreakStart ^ !dayOfWeek.noonbreakEnd) {
      //   this.$message.error(`${dayOfWeek.dayOfWeekText}的午休开始及结束时间必须同时配置`);
      //   return;
      // }
      let arr = [dayOfWeek.openTime,dayOfWeek.closeTime];
      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=>{
        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>