FE-V2-PC/src/views/creditViolation/credit/rewardconfig/index.vue

<!--奖励分设置-->
<template>
  <div class="app-container rewardconfig">
    <p class="title-p">奖励分设置</p>
    <el-form class="form-content scrollbar-box" ref="form" :model="form" label-width="100px" :rules="rules">
      <el-form-item label="一个月无违规记录奖励分值：" prop="monthNoviolationScore" label-width="240px" style="margin-top:22px;">
        <el-input
          v-model="form.monthNoviolationScore"
          placeholder="请输入一个月无违规记录奖励分值"
          maxLength="5"
          clearable
          size="small">
          <template slot="append">分</template>
        </el-input>
      </el-form-item>
      <el-form-item label="模拟练习做题奖励分值：" prop="exerciseScore" label-width="240px">
        <el-input
          v-model="form.exerciseScore"
          placeholder="请输入模拟练习做题奖励分值"
          maxLength="5"
          clearable
          size="small">
          <template slot="append">分</template>
        </el-input>
      </el-form-item>
      <el-form-item label="模拟考试奖励分换算值：" prop="mockExam" label-width="240px">
        <el-input
          v-model="form.mockExam"
          placeholder="请输入模拟考试得分值"
          maxLength="5"
          clearable
          size="small">
          <template slot="prepend">1奖励分等于</template>
          <template slot="append">分</template>
        </el-input>
      </el-form-item>
      <el-form-item label="学习时长奖励分换算值：" prop="studyLen" label-width="240px">
        <el-input
          v-model="form.studyLen"
          placeholder="请输入学习时长奖励分换算值"
          maxLength="5"
          clearable
          size="small">
          <template slot="prepend">1奖励分等于</template>
          <template slot="append">分钟</template>
        </el-input>
      </el-form-item>
      <el-form-item label="完成签到考勤获得奖励分值：" prop="signGetScore" label-width="240px">
        <el-input
          v-model="form.signGetScore"
          placeholder="请输入完成签到考勤获得奖励分值"
          maxLength="5"
          clearable
          size="small">
          <template slot="append">分</template>
        </el-input>
      </el-form-item>
      <el-form-item label="完成离开考勤获得奖励分值：" prop="leaveGetScore" label-width="240px">
        <el-input
          v-model="form.leaveGetScore"
          placeholder="请输入完成离开考勤获得奖励分值"
          maxLength="5"
          clearable
          size="small">
          <template slot="append">分</template>
        </el-input>
      </el-form-item>
    </el-form>
    <div class="form-bottom-button-box"
         v-hasPermi="['exam:rewardconfig:edit']">
      <p class="null-p-button"></p>
      <el-button @click="getList">重 置</el-button>
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <p class="null-p-button"></p>
    </div>
  </div>
</template>

<script>
import { listRewardconfig, updateRewardconfig } from "@/api/exam/rewardconfig";

export default {
  name: "Rewardconfig",
  data() {
    return {
      form:{},
      // 表单校验
      rules: {
        monthNoviolationScore: [
          { required: true, message: "请输入一个月无违规记录奖励分值", trigger: "blur" },
          { required: true, message: "请输入一个月无违规记录奖励分值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        exerciseScore: [
          { required: true, message: "请输入模拟练习做题奖励分值", trigger: "blur" },
          { required: true, message: "请输入模拟练习做题奖励分值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        mockExam: [
          { required: true, message: "请输入模拟考试奖励分换算值", trigger: "blur" },
          { required: true, message: "请输入模拟考试奖励分换算值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        studyLen: [
          { required: true, message: "请输入学习时长奖励分换算值", trigger: "blur" },
          { required: true, message: "请输入学习时长奖励分换算值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        signGetScore: [
          { required: true, message: "请输入完成签到考勤获得奖励分值", trigger: "blur" },
          { required: true, message: "请输入完成签到考勤获得奖励分值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        leaveGetScore: [
          { required: true, message: "请输入完成离开考勤获得奖励分值", trigger: "blur" },
          { required: true, message: "请输入完成离开考勤获得奖励分值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询数据 */
    getList() {
      listRewardconfig({}).then( response => {
        this.$set(this,'form',response.data[0])
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateRewardconfig(this.form).then( response => {
            this.getList();
            this.msgSuccess("保存成功")
          });
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
  .rewardconfig{
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:0 20px 0 20px!important;
    .title-p{
      margin:0;
      line-height:80px;
      font-size:18px;
      color:#0045AF;
      border-bottom:2px solid #E0E0E0;
    }
    .form-content{
      overflow-y: scroll;
      flex:1;
      .annotation-span{
        margin-left:20px;
        font-size:14px;
        font-weight:500;
        color:#999999;
      }
    }
    .form-bottom-button-box{
      height:80px;
      padding:20px;
      display: flex;
      .null-p-button{
        flex:1;
      }
    }
  }
</style>