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

<template>
  <div class="question-infos">
    <DialogCom title="编辑作息" @close="handleClose" :visible="show" width="800px"  append-to-body>
      <div class="page-body">
        <el-form :model="formData" :rules="formData.isEnable?formDataRules:{}" size="small" ref="form" label-position="right"
                 label-width="120px" label-prefix=":">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item prop="orgName" label="机构：" >
                <span>{{formData.orgName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="日期：">
                <span >{{formData.ymdDate}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="星期：">
                <span>{{parseTime(formData.ymdDate,"dddd")}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="isEnable" label="状态：">
                <template >
                  <el-radio-group v-model="formData.isEnable" @change="onEnableChange(formData)">
                    <el-radio text-color="#48bb78" label="1">营业</el-radio>
                    <el-radio text-color="#f56565" label="0">歇业</el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="isEnable" label="值班打卡：">
                <template >
                  <el-radio-group v-model="formData.isDuty">
                    <el-radio text-color="#48bb78" label="1">是</el-radio>
                    <el-radio text-color="#f56565" label="0">否</el-radio>
                  </el-radio-group>
                </template>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.isEnable == '1'" :span="12">
              <el-form-item prop="workTime" label="上班时间：">
                <template >
                  <el-time-select
                      :picker-options="pickerOptions"
                      v-model="formData.workTime"/>
                </template>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.isEnable == '1'" :span="12">
              <el-form-item prop="workOffTime" label="下班时间：">
                <template >
                  <el-time-select
                    :picker-options="pickerOptions"
                    v-model="formData.workOffTime"/>
                </template>
              </el-form-item>
            </el-col>
<!--              <el-col :span="12">-->

<!--              <el-form-item prop="noonbreakStart" label="午休开始：">-->
<!--                <template>-->
<!--                  <el-time-select-->
<!--                      :picker-options="pickerOptions"-->
<!--                      v-model="formData.noonbreakStart"-->
<!--                      :disabled="!formData.isEnable || formData.isEnable === false"/>-->
<!--                </template>-->
<!--              </el-form-item>-->
<!--              </el-col>-->
<!--            <el-col :span="12">-->
<!--              <el-form-item prop="noonbreakEnd" label="午休结束：">-->
<!--                <template >-->
<!--                  <el-time-select-->
<!--                      :picker-options="pickerOptions"-->
<!--                      v-model="formData.noonbreakEnd"-->
<!--                      :disabled="!formData.isEnable || formData.isEnable === false"/>-->
<!--                </template>-->
<!--              </el-form-item>-->
<!--            </el-col>-->
            <el-col v-if="formData.isEnable == '1'" :span="12">
              <el-form-item prop="openTime" label="营业开始：">
                <template >
                  <el-time-select
                    :picker-options="pickerOptions"
                    v-model="formData.openTime"/>
                </template>
              </el-form-item>
            </el-col>
            <el-col v-if="formData.isEnable == '1'" :span="12">
              <el-form-item prop="closeTime" label="营业结束：">
                <template >
                  <el-time-select
                    :picker-options="pickerOptions"
                    v-model="formData.closeTime"/>
                </template>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="handleClose">取消</el-button>
      </div>
    </DialogCom>
  </div>
</template>

<script>


import {queryOrgInfo,editWorkTime} from "@/views/system/workTimeSet/api";
import {timeCheck }from '@/utils/ruoyi'
export default {
  data() {
    return {
      //弹窗展示
      show:false,
      //选中的id
      id: null,
      //form数据
      formData: {},
      workTimeId:null,
      //表单验证
      formDataRules: {
        isEnable: [{ required: true, message: "请选择状态" }],
        workTime: [{ required: true, message: "请输入上班时间" }],
        workOffTime: [{ required: true, message: "请输入下班时间" }],
        // noonbreakStart: [{ required: true, message: "请输入午休开始时间" }],
        // noonbreakEnd: [{ required: true, message: "请输入午休结束时间" }],
        openTime: [{ required: true, message: "请输入营业开始时间" }],
        closeTime: [{ required: true, message: "请输入营业结束时间" }],
      },

    };
  },
  created() {
  },
  computed: {
    pickerOptions() {
      return {
        start: "00:00",
        end: "24:00",
        step: "00:05",
      };
    },
  },
  methods: {
    edit(row){
      this.orgId = row.id;
      queryOrgInfo(row.id).then(res=>{
        this.formData = res.data;
        this.show = true;
      })
      console.log(row,'11111')
    },
    reset() {
      return {
        isEnable: 1,
        openTime: null,
        closeTime: null,
        // noonbreakStart: null,
        // noonbreakEnd: null,
        workTime: null,
        workOffTime: null,
      };
    },
    onEnableChange(workTime) {
      if (workTime.isEnable == '0') {
        workTime.openTime = null;
        workTime.closeTime = null;
        // workTime.noonbreakStart = null;
        // workTime.noonbreakEnd = null;
        workTime.workTime = null;
        workTime.workOffTime = null;
      }
    },
    handleClose() {
      this.show = false;
      this.formData = this.reset();
      console.log(this.$refs.form,'from')
      this.$refs.form.clearValidate();
      this.id=null;
    },
    onSubmit() {
      this.$refs.form.validate((isValidate) => {
        if (!isValidate) return;
        // if (
        //     !timeCheck([
        //       this.formData.openTime,
        //       this.formData.closeTime,
        //     ])
        // ) {
        //   this.$message.warning(`营业开始时间应在营业结束之前`);
        //   return false;
        // }
        // if (
        //   !timeCheck([
        //     this.formData.workTime,
        //     this.formData.workOffTime,
        //   ])
        // ) {
        //   this.$message.warning(`上班开始时间应在下班结束之前`);
        //   return false;
        // }
        if (
          !timeCheck([
            this.formData.workTime,
            this.formData.openTime,
            this.formData.closeTime,
            this.formData.workOffTime,
          ])
        ) {
          this.$message.error(
            `请按照（上班时间<营业时间<营业结束<下班时间）顺序配置`
          );
          return false;
        }
        editWorkTime(this.formData).then(res=>{
            this.show = false;
            this.$message.success('操作成功')
            this.$emit('ok')
        })
      });
    },
  },
};
</script>

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

  }
}

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

.change-icon {
  font-size: 18px;
}
</style>