dy-admin-manager/src/views/courseRulersManager/components/onlineCloudRules.vue

<template>
  <div class="m-container">
    <div class="m-core">
      <el-form :inline="true" :model="form" ref="form">
        <el-alert
          style="margin: 10px 0"
          title="云教室考勤规则"
          :closable="false"
          type="info"
        >
        </el-alert>
        <p class="subtitle">迟到:</p>
        <el-row>
          <el-form-item
            prop="159"
            :rules="[
              {
                required: true,
                message: '请输入时间',
                trigger: 'blur',
              },
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的时间',
              },
              { validator: this.validateMin, trigger: 'blur' },
            ]"
          >
            <span style="color: #f56c6c; margin-right: 4px">*</span>
            课程开始前
            <el-input v-model="form['159']" placeholder="请输入时间">
              <template slot="append">分钟</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="162"
            :rules="[
              {
                required: false,
                message: '请输入时间',
                trigger: 'blur',
              },
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的时间',
              },
            ]"
          >
            <!-- <span style="color: #f56c6c; margin-right: 4px">*</span> -->
            至课程开始后
            <el-input v-model="form['162']" placeholder="请输入时间">
              <template slot="append">分钟</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="163"
            :rules="[
              {
                required: false,
                pattern:
                  /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                message: '请输入正确的金额',
              },
            ]"
          >
            以前进入云教室，扣减课酬
            <el-input
              v-model="form['163']"
              placeholder="请输入金额"
              class="chiose"
            >
              <template slot="append">
                <el-select class="append" v-model.trim="form['164']">
                  <el-option label="元" value="1"> </el-option>
                  <el-option label="%" value="2"> </el-option>
                </el-select>
              </template>
            </el-input>。
          </el-form-item>
        </el-row>
        <p class="example" v-if="form['159']">
          例:
          <span style="color: #f56c6c; margin-right: 4px">12:00:00</span>
          开始的课程，最早
          <span style="color: #f56c6c; margin-right: 4px">{{
            reduceFormMinute("12:00:00", forwardTime)
          }}</span
          >能进入云教室,
          <span style="color: #f56c6c; margin-right: 4px">{{
            reduceFormMinuteAddS("12:00:00", form["159"])
          }}</span
          >到
          <span style="color: #f56c6c; margin-right: 4px">{{
            addFormMinute("12:00:00", form["162"])
          }}</span
          >为迟到时间范围。
        </p>
        <p class="subtitle">旷课:</p>
        <el-row>
          <el-form-item prop="162">
            课程开始
            <el-input v-model="form['162']" placeholder="请输入时间" disabled>
              <template slot="append">分钟</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="166"
            :rules="[
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的距离',
              },
            ]"
          >
            后进入云教室，扣减课酬
            <el-input
              v-model="form['166']"
              placeholder="请输入距离"
              class="chiose"
            >
              <template slot="append">
                <el-select class="append" v-model.trim="form['167']">
                  <el-option label="元" value="1"> </el-option>
                  <el-option label="%" value="2"> </el-option>
                </el-select>
              </template>
            </el-input>。
          </el-form-item>
        </el-row>
        <p class="example" v-if="form['162']">
          例:
          <span style="color: #f56c6c; margin-right: 4px">12:00:00</span>
          开始的课程
          <span style="color: #f56c6c; margin-right: 4px">{{
            addFormMinuteAddS("12:00:00", form["162"])
          }}</span>
          以后进入云教室为旷课。
        </p>

        <p class="subtitle">未签到:</p>
        <el-row>
          <el-form-item
            prop="168"
            :rules="[
              {
                required: false,
                pattern:
                  /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                message: '请输入正确的金额',
              },
            ]"
          >
            老师未签到扣减课酬
            <el-input
              v-model="form['168']"
              placeholder="请输入金额"
              class="chiose"
            >
              <template slot="append">
                <el-select class="append" v-model.trim="form['169']">
                  <el-option label="元" value="1"> </el-option>
                  <el-option label="%" value="2"> </el-option>
                </el-select>
              </template>
            </el-input>。
          </el-form-item>
        </el-row>

        <p class="subtitle">异常签退:</p>
        <el-row>
          <el-form-item
            prop="173"
            :rules="[
              {
                required: false,
                message: '请输入时间',
                trigger: 'blur',
              },
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的时间',
              },
            ]"
          >
            <!-- <span style="color: #f56c6c; margin-right: 4px">*</span> -->
            课程结束前
            <el-input v-model="form['173']" placeholder="请输入时间">
              <template slot="append">分钟</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="171"
            :rules="[
              {
                required: false,
                pattern:
                  /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                message: '请输入正确的金额',
              },
            ]"
          >
            以后到课程结束前退出云教室，扣减课酬
            <el-input
              v-model="form['171']"
              placeholder="请输入金额"
              class="chiose"
            >
              <template slot="append">
                <el-select class="append" v-model.trim="form['172']">
                  <el-option label="元" value="1"> </el-option>
                  <el-option label="%" value="2"> </el-option>
                </el-select>
              </template>
            </el-input>。
          </el-form-item>
        </el-row>
        <p class="example" v-if="form['173']">
          例:
          <span style="color: #f56c6c; margin-right: 4px">13:00:00</span>
          结束的课程
          <span style="color: #f56c6c; margin-right: 4px">{{
            reduceFormMinute("13:00:00", form["173"])
          }}</span
          >到
          <span style="color: #f56c6c; margin-right: 4px">{{
            "12:59:59"
          }}</span>
          为异常签退时间范围。
        </p>

        <p class="subtitle">早退:</p>
        <el-row>
          <el-form-item prop="173">
            <!-- <span style="color: #f56c6c; margin-right: 4px">*</span> -->
            早于课程结束前
            <el-input disabled v-model="form['173']" placeholder="请输入时间">
              <template slot="append">分钟</template>
            </el-input>
          </el-form-item>
          <el-form-item
            prop="174"
            :rules="[
              {
                required: false,
                pattern:
                  /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                message: '请输入正确的金额',
              },
            ]"
          >
            前退出云教室，扣减课酬
            <el-input
              v-model="form['174']"
              placeholder="请输入金额"
              class="chiose"
            >
              <template slot="append">
                <el-select class="append" v-model.trim="form['175']">
                  <el-option label="元" value="1"> </el-option>
                  <el-option label="%" value="2"> </el-option>
                </el-select>
              </template>
            </el-input>。
          </el-form-item>
        </el-row>
        <p class="example" v-if="form['173']">
          例:
          <span style="color: #f56c6c; margin-right: 4px">13:00:00</span>
          结束的课程
          <span style="color: #f56c6c; margin-right: 4px">{{
            reduceFormMinuteMS("13:00:00", form["173"])
          }}</span
          >之前退出云教室为早退。
        </p>
        <p class="subtitle">未签退:</p>
        <el-row>
          <el-form-item
            prop="176"
            :rules="[
              {
                required: false,
                pattern:
                  /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/,
                message: '请输入正确的金额',
              },
            ]"
          >
            老师未签退扣减课酬
            <el-input
              v-model="form['176']"
              placeholder="请输入金额"
              class="chiose"
            >
              <template slot="append">
                <el-select class="append" v-model.trim="form['177']">
                  <el-option label="元" value="1"> </el-option>
                  <el-option label="%" value="2"> </el-option>
                </el-select>
              </template>
            </el-input>。
          </el-form-item>
        </el-row>

        <el-alert
          style="margin: 10px 0"
          title="云教室连堂课"
          :closable="false"
          type="info"
        >
        </el-alert>
        <p class="subtitle">
          云教室连堂课：
          <el-tooltip placement="top" popper-class="mTooltip">
            <div slot="content">
              <p style="color: #fff">
                1.同一班级中，两节课的时间间隔在N分钟之内视为连堂课。
              </p>
              <p style="color: #fff">
                2.连堂课仅需在第一节课正常签到、最后一节课正常签退，课程中间无需签到签退。
              </p>
            </div>
            <i
              class="el-icon-question micon el-tooltip"
              style="font-size: 18px; color: #f56c6c"
            ></i>
          </el-tooltip>
        </p>
        <el-row>
          <el-form-item
            prop="50"
            :rules="[
              {
                required: false,
                pattern: /^[1-9][0-9]*$/,
                message: '请输入正确的时间',
              },
            ]"
          >
            云教室课程间隔<el-input
              v-model="form['50']"
              placeholder="请输入时间"
            >
              <template slot="append">分钟</template>
            </el-input>
            以内视为连堂课。
          </el-form-item>
        </el-row>
      </el-form>
    </div>
    <el-button
      type="primary"
      @click="save"
      class="saveBtn"
      v-permission="'sysTenantConfig/batchUpSet_onlineCloudRules'"
      v-if="!isPlatform"
      >保存</el-button
    >
    <el-button
      type="primary"
      @click="save"
      class="saveBtn"
      v-permission="'sysConfig/batchUpdate_onlineCloudRules'"
      v-else
      >保存</el-button
    >
  </div>
</template>
<script>
import { getSysTenantConfig, setSysTenantConfig } from "../api";
import { sysConfigList, sysConfigUpdate } from "@/api/generalSettings"; // 平台的修改和查
import {
  addFormMinute,
  addFormMinuteAddS,
  reduceFormMinute,
  reduceFormMinuteAddS,
  addFormMinuteMS,
  reduceFormMinuteMS,
} from "@/utils/date";
export default {
  props: ["isPlatform"],
  data() {
    return {
      form: {},
      questionList: [],
      rulesVisiable: false,
      forwardTime: 5,
    };
  },
  async mounted() {
    this.getRules();
  },
  methods: {
    getRules() {
      if (this.isPlatform) {
        this.getPlatformRules();
      } else {
        this.getInstitutionRules();
      }
    },
    async getPlatformRules() {
      try {
        const res = await sysConfigList({ group: "ONLINE" });
        const forwardRes = await sysConfigList({ group: "DAYA_BASIC" });

        forwardRes.data.forEach((item) => {
          if (item.id == "203") {
            this.forwardTime = item.paranValue;
          }
        });
        res.data.forEach((item) => {
          // this.form[item.paramName] = item.paranValue
          this.$set(this.form, item.id, item.paranValue);
        });
        // this.$forceUpdate()
        // console.log(this.forwardTime);
      } catch (e) {
        console.log(e);
      }
    },
    async getInstitutionRules() {
      try {
        const res = await getSysTenantConfig({ group: "ONLINE" });
        const forwardRes = await getSysTenantConfig({ group: "DAYA_BASIC" });
        forwardRes.data.forEach((item) => {
          if (item.id == "203") {
            this.forwardTime = item.paranValue;
          }
        });
        console.log(this.forwardTime);
        res.data.forEach((item) => {
          // this.form[item.paramName] = item.paranValue
          this.$set(this.form, item.id, item.paranValue);
        });
        // this.$forceUpdate()
      } catch (e) {
        console.log(e);
      }
    },
    savePlatform() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let param = [];
          for (let i in this.form) {
            param.push({
              id: i,
              paranValue: this.form[i],
            });
          }
          try {
            const res = await sysConfigUpdate(param);
            this.$message.success("保存成功");
            this.getRules();
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
    saveInstitution() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let param = [];
          for (let i in this.form) {
            param.push({
              id: i,
              paranValue: this.form[i],
            });
          }
          try {
            const res = await setSysTenantConfig(param);
            this.$message.success("保存成功");
            this.getRules();
          } catch (e) {
            console.log(e);
          }
        }
      });
    },
    save() {
      if (this.isPlatform) {
        this.savePlatform();
      } else {
        this.saveInstitution();
      }
    },
    validateMin(rule, value, callback) {
      const one = Number(value);
      const max = Number(this.forwardTime);
      if (!max || one < max) {
        return callback();
      }
      return callback(
        new Error(`最早可提前${this.forwardTime - 1}分钟进入教室`)
      );
    },
    addFormMinute(timerStr, time) {
      return addFormMinute(timerStr, time);
    },
    addFormMinuteAddS(timerStr, time) {
      return addFormMinuteAddS(timerStr, time);
    },
    reduceFormMinute(timerStr, time) {
      return reduceFormMinute(timerStr, time);
    },
    reduceFormMinuteAddS(timerStr, time) {
      return reduceFormMinuteAddS(timerStr, time);
    },
    addFormMinuteMS(timerStr, time) {
      return addFormMinuteMS(timerStr, time);
    },
    reduceFormMinuteMS(timerStr, time) {
      return reduceFormMinuteMS(timerStr, time);
    },
  },
};
</script>
<style lang="scss" scoped>
@import "../index.scss";
</style>