safetyEducationExamination/src/views/safetyEducationExaminationNew/publicConfiguration/basicConfiguration/classHoursConfiguration.vue

<!--学时积分设置-->
<template>
  <div class="page-container basicConfiguration-classHoursConfiguration">
    <div class="content-box scrollbar-box">
      <el-form class="add-form-box" :model="newData" ref="form" :rules="rules" label-width="120px">
        <p class="title-p">学时计算</p>
        <div class="form-big-box">
          <el-form-item label="" label-width="0">
            <div class="form-min-box">
              <p class="form-min-left-p">1</p>
              <p class="form-min-p">学时</p>
            </div>
          </el-form-item>
          <p class="form-text-p" style="margin:0 18px;">=</p>
          <el-form-item label="" prop="studyHours" label-width="0">
            <div class="form-min-box">
              <el-input-number  class="form-input-number"
                                style="width:160px"
                                :min="0"
                                :max="9999"
                                :step="0.1" :precision="1" step-strictly
                                v-model="newData.studyHours">
              </el-input-number>
              <p class="form-min-p">分钟</p>
            </div>
          </el-form-item>
          <div class="form-help-box">
            <p class="el-icon-question"></p>
            <p>课件资料的要求时长与所获学时的计算公式</p>
          </div>
        </div>
        <div class="form-big-box">
          <p class="form-text-p" style="margin:0 20px 0 0;">重复学习同一课件超过</p>
          <el-form-item label="" prop="repeatGetStudyDay" label-width="0">
            <div class="form-min-box">
              <el-input-number  class="form-input-number"
                                style="width:160px"
                                :min="0"
                                :max="9999"
                                :step="0.1" :precision="1" step-strictly
                                v-model="newData.repeatGetStudyDay">
              </el-input-number>
            </div>
          </el-form-item>
          <p class="form-text-p" style="margin:0 0 0 20px;">天，不可再获得学时</p>
          <div class="form-help-box">
            <p class="el-icon-question"></p>
            <p>课件资料的要求时长与所获学时的计算公式</p>
          </div>
        </div>
        <p class="border-top"></p>
        <p class="title-p">积分计算</p>
        <div class="form-big-box">
          <el-form-item label="" label-width="0">
            <div class="form-min-box">
              <p class="form-min-left-p">1</p>
              <p class="form-min-p">分钟</p>
            </div>
          </el-form-item>
          <p class="form-text-p" style="margin:0 18px;">=</p>
          <el-form-item label="" prop="studuHoursPoint" label-width="0">
            <div class="form-min-box">
              <el-input-number  class="form-input-number"
                                style="width:160px"
                                :min="0"
                                :max="9999"
                                :step="0.1" :precision="1" step-strictly
                                v-model="newData.studuHoursPoint">
              </el-input-number>
              <p class="form-min-p">积分</p>
            </div>
          </el-form-item>
          <div class="form-help-box">
            <p class="el-icon-question"></p>
            <p>课件资料的要求时长与所获积分的计算公式</p>
          </div>
        </div>
        <div class="form-big-box">
          <el-form-item label="" label-width="0">
            <div class="form-min-box">
              <p class="form-min-left-p">1</p>
              <p class="form-min-p">分</p>
            </div>
          </el-form-item>
          <p class="form-text-p" style="margin:0 18px;">=</p>
          <el-form-item label="" prop="examScorePoint" label-width="0">
            <div class="form-min-box">
              <el-input-number  class="form-input-number"
                                style="width:160px"
                                :min="0"
                                :max="9999"
                                :step="1" :precision="0" step-strictly
                                v-model="newData.examScorePoint">
              </el-input-number>
              <p class="form-min-p">积分</p>
            </div>
          </el-form-item>
          <div class="form-help-box">
            <p class="el-icon-question"></p>
            <p>考试通过后取得的考试分数与所获积分的计算公式</p>
          </div>
        </div>
        <div class="form-big-box">
          <el-form-item label="" label-width="0">
            <div class="form-min-box">
              <p class="form-min-left-p">1</p>
              <p class="form-min-p">个试题</p>
            </div>
          </el-form-item>
          <p class="form-text-p" style="margin:0 18px;">=</p>
          <el-form-item label="" prop="practisePoint" label-width="0">
            <div class="form-min-box">
              <el-input-number  class="form-input-number"
                                style="width:160px"
                                :min="0"
                                :max="9999"
                                :step="1" :precision="0" step-strictly
                                v-model="newData.practisePoint">
              </el-input-number>
              <p class="form-min-p">积分</p>
            </div>
          </el-form-item>
          <div class="form-help-box">
            <p class="el-icon-question"></p>
            <p>刷题练习正确题目数量与所获积分的计算公式</p>
          </div>
        </div>
        <div class="form-big-box">
          <p class="form-text-p" style="margin:0 20px 0 0;">重复学习同一课件超过</p>
          <el-form-item label="" prop="repeatGetPointDay" label-width="0">
            <div class="form-min-box">
              <el-input-number  class="form-input-number"
                                style="width:160px"
                                :min="0"
                                :max="9999"
                                :step="1" :precision="0" step-strictly
                                v-model="newData.repeatGetPointDay">
              </el-input-number>
            </div>
          </el-form-item>
          <p class="form-text-p" style="margin:0 0 0 20px;">天，不可再获得学时</p>
          <div class="form-help-box">
            <p class="el-icon-question"></p>
            <p>超过设置的时间周期后，学员重复学习该课件将不会再获得积分奖励</p>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  //import { getDicts } from "@/api/commonality/noPermission";
  //import { systemUserSelect } from "@/api/commonality/permission";
  //import { getInfo } from "@/api/basicsModules/index";
  import { examElConfigValueMap,examElConfigSave } from "@/api/safetyEducationExaminationNew/index";
  export default {
    name: 'classHoursConfiguration',
    props:{
      propsData:{},
    },
    data(){
      return{
        newData:{
          studyHours:0,
          repeatGetStudyDay:0,
          studuHoursPoint:0,
          examScorePoint:0,
          practisePoint:0,
          repeatGetPointDay:0,
        },
        rules:{},
      }
    },
    created(){
      this.initialize();
    },
    mounted(){

    },
    methods:{
      initialize(){
        examElConfigValueMap({configType:5}).then(response => {
          this.$set(this,'newData',response.data);
        });
      },
      //重置
      resetButton(){
        let self = this;
        this.$confirm('确认重置?', "提示", {
          confirmButtonText: "确认",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
        }).then(() => {
          this.initialize();
        }).catch(() => {});
      },
      //提交
      submitButton(){
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.$confirm('确认提交?', "提示", {
              confirmButtonText: "确认",
              cancelButtonText: "取消",
              type: "warning"
            }).then(function() {
            }).then(() => {
              const list = Object.entries(self.newData).map(([key, value]) => ({
                configType: 5,
                configCode: key,
                configValue: value // 确保 configValue 是字符串类型
              }));
              examElConfigSave(list).then(response => {
                self.msgSuccess(response.message);
                self.initialize();
              });
            }).catch(() => {});
          }
        })
      },
    },
  }
</script>

<style scoped lang="scss">
  .basicConfiguration-classHoursConfiguration{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .content-box{
      flex:1;
      display: flex;
      flex-direction: column;
      .border-top{
        margin-top:30px;
        border-top:1px solid #dedede;
      }
      .title-p{
        margin-left:30px;
        line-height:40px;
        margin-top:30px;
      }
      .form-big-box{
        display: flex;
        padding-left:60px;
        margin-top:30px;
        .form-text-p{
          line-height:40px;
          font-size:16px;
          font-weight:700;
        }
        .form-min-box{
          display: flex;
          .form-input-number ::v-deep .el-input__inner {
            border-top-right-radius: 0;
            border-bottom-right-radius:0;
          }
          .form-min-left-p{
            width:60px;
            background-color: #fff;
            border:1px solid #DCDFE6;
            text-align: center;
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            line-height: 40px;
          }
          .form-min-p{
            width:72px;
            background-color: #DCDFE6;
            text-align: center;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            line-height: 40px;
          }
          .form-min-span{
            margin-left:20px;
            color: #999;
            line-height: 40px;
          }
        }
        .form-help-box{
          display: flex;
          p{
            line-height:40px;
          }
          p:nth-child(1){
            color:#0183fa;
            margin:0 10px 0 20px;
          }
          p:nth-child(2){
            font-size:16px;
          }
        }
      }
    }
  }
</style>