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="1080px"
      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>-->
          <org-select ref="orgSelect" v-model="orgIdList" ></org-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" align="center">
              <template slot-scope="r">
                <el-date-picker
                  :default-timezone="'GMT+8'"
                  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" align="center">
              <template slot-scope="r">
                <span>{{ parseTime(r.row.ymdDate, "dddd") }}</span>
              </template>
            </el-table-column>
            <el-table-column label="状态" width="160" align="center">
              <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" 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.isDuty"
                    @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>

                <!--                  <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" align="center">
              <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" align="center">
              <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" align="center">
              <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" align="center">
              <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" align="center">
              <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 { validateTimes } from "@/utils/ruoyi";
import { formatTime, timeCheck } from "@/utils/ruoyi";
import { addWorkTimeDay } from "@/views/system/workTimeSet/api";
import day from "@/components/Crontab/day";
import orgSelect from "@/components/orgSelect/index.vue";

export default {
  components: {orgSelect, 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: dayjs(new Date()).add(1, "day"),
        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].isDuty = workTime.isDuty;
        // 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.error(`日期不能为空`);
        return;
      }
      const ds = this.formatTime(other.ymdDate, "YYYY-MM-DD");
      console.log(other, "ds");
      if (!other.isEnable === null && !other.disabled) {
        this.$message.error(`${ds}：未进行配置`);
        return;
      }
      if (other.isEnable) {
        if (!other.openTime || !other.closeTime) {
          this.$message.error(`${ds}：未配置时间`);
          return;
        }
        if (!timeCheck([other.openTime, other.closeTime])) {
          this.$message.error(`${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 (!validateTimes(other)) {
          // this.$message.error(
          //   `${ds}：请按照（上班时间<=营业时间<营业结束<=下班时间）顺序配置`
          // );
          this.$message.error(
            `${ds}：请按照（营业时间<营业结束）顺序配置`
          );
          return false;
        }
      }
      return true;
    },
    handleClose() {
      this.isShow = false;
      this.workTimeList = [];
      this.orgIdList = [];
      this.$refs["orgSelect"].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.error("请选择机构");
      if (this.workTimeList.length === 0)
        return this.$message.error("请添加日期");
      //判断是否有重复的日期
      let dateList = [];
      console.log(this.workTimeList, "this.workTimeList");
      let workTimeList = JSON.parse(JSON.stringify(this.workTimeList))
      //let workTimeList = this.workTimeList;
      for (let v of this.workTimeList) {
        if (v.ymdDate) {
          console.log(v,'vvvvv')
          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) {
        console.log(workTime,'workTime')
        const adjustedDate = new Date(
          dayjs(workTime.ymdDate).toDate().getTime() + 8 * 60 * 60 * 1000
        );
        workTime.ymdDate = adjustedDate.toISOString().split("T")[0];
        if (!this.check(workTime)) {
          return;
        }
      }
      let data = {
        orgIdList: this.orgIdList,
        workTimeList: workTimeList,
      };
      console.log(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>