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

<!--信用分设置-->
<template>
  <div class="app-container Markconfig">
    <p class="title-p">信用分设置</p>
    <el-form class="form-content scrollbar-box" ref="form" :model="form" :rules="rules" v-if="pageType">
      <div style="display: flex">
        <el-form-item label="信用分合格分值：" prop="passMark" label-width="160px">
          <el-input
            v-model="form.passMark"
            placeholder="请输入信用分合格分值"
            maxLength="5"
            clearable
            style="width:180px;">
            <template slot="append">分</template>
          </el-input>
        </el-form-item>
        <el-form-item label="信用分合格分值获取条件：" prop="gainSafeCertList" label-width="230px">
          <el-checkbox-group v-model="form.gainSafeCertList" style="width:370px;display: flex;margin-top:2px;">
            <el-checkbox label="gainSafeCert" style="color:#999;">获得安全准入证书</el-checkbox>
            <el-checkbox label="gainSubSafeCert" style="color:#999;">获得实验室安全准入资格</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="黑名单分值：" prop="blackScore" label-width="120px">
          <el-input
            v-model="form.blackScore"
            placeholder="请输入黑名单分值"
            maxLength="5"
            clearable
            style="width:180px;">
            <template slot="append">分</template>
          </el-input>
          <span class="annotation-span" style="margin-left:20px;">信用分小于等于设定的分值即进入黑名单</span>
        </el-form-item>
      </div>
      <el-form-item label="信用分值段设置：" prop="passMark" label-width="160px" style="margin-bottom:10px;">
        <span class="annotation-span">可设置多个分值段，系统根据设置自动处理</span>
      </el-form-item>
      <div class="max-add-for-box">
        <div class="max-add-for-box-min" v-for="(item,index) in form.configDetailList">
          <p class="position-del-p el-icon-circle-close" v-if="index!=0" @click="delObj(index)"></p>
          <div class="for-interval-flex-box">
            <p class="for-interval-title-p min-p-color">信用分值区间</p>
            <el-form-item label="" :rules="rules.beginScore" :prop="'configDetailList.'+ index +'.beginScore'" style="margin-bottom:15px;">
              <el-input
                v-model="item.beginScore"
                placeholder="请输入最小值"
                maxLength="5"
                clearable
                size="small">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
            <p class="for-interval-p">~</p>
            <el-form-item label="" :rules="rules.endScore" :prop="'configDetailList.'+ index +'.endScore'" style="margin-bottom:15px;">
              <el-input
                v-model="item.endScore"
                placeholder="请输入最大值"
                maxLength="5"
                clearable
                size="small">
                <template slot="append">分</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="for-check-max-box">
            <el-form-item label="" :rules="rules.checkListTwo" :prop="'configDetailList.'+ index +'.checkListTwo'">
              <p class="min-p-color" style="margin-bottom:10px;">处理方式</p>
              <el-form-item label="">
                <el-checkbox-group v-model="item.checkList" style="display: inline-block;width:270px;">
                  <el-checkbox label="warningStatus">警告<span style="color:#999;">（系统推送警告消息）</span></el-checkbox>
                </el-checkbox-group>
                <el-checkbox-group v-model="item.checkList" style="display: inline-block;width:270px;">
                  <el-checkbox label="interviewStatus">约谈<span style="color:#999;">（线下约谈）</span></el-checkbox>
                </el-checkbox-group>
                <el-checkbox-group v-model="item.checkListTwo" style="display: inline-block;width:270px;">
                  <el-checkbox label="testStatus">考试</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div style="display: flex;">
                <div class="for-check-box" style="min-width:210px;max-width:520px;">
                  <el-checkbox-group v-model="item.checkListTwo" @change="(data)=>checkClickOne(data,item,'xx')" style="height:40px;line-height:40px;width:80px;">
                    <el-checkbox label="learnStatus">学习</el-checkbox>
                  </el-checkbox-group>
                  <p v-if="item.learnStatusType">学习时长：</p>
                  <el-form-item label="" :rules="rules.learnHour" :prop="'configDetailList.'+ index +'.learnHour'" v-if="item.learnStatusType">
                    <el-input
                      style="width:150px;"
                      v-model="item.learnHour"
                      placeholder="请输入"
                      maxLength="5"
                      clearable
                      size="small">
                      <template slot="append">时</template>
                    </el-input>
                  </el-form-item>
                  <p style="width:30px;"></p>
                  <el-form-item label="" :rules="rules.learnMinute" :prop="'configDetailList.'+ index +'.learnMinute'" v-if="item.learnStatusType">
                    <el-input
                      style="width:150px;"
                      v-model="item.learnMinute"
                      placeholder="请输入"
                      maxLength="5"
                      clearable
                      size="small">
                      <template slot="append">分</template>
                    </el-input>
                  </el-form-item>
                </div>
                <div class="for-check-box" style="margin-left:60px;">
                  <el-checkbox-group v-model="item.checkListTwo" @change="(data)=>checkClickTwo(data,item,'zt')" style="height:40px;line-height:40px;width:80px;">
                    <el-checkbox label="practiceStatus">做题</el-checkbox>
                  </el-checkbox-group>
                  <p v-if="item.practiceStatusType">题目数量：</p>
                  <el-form-item label="" :rules="rules.numberTopics" :prop="'configDetailList.'+ index +'.numberTopics'" v-if="item.practiceStatusType">
                    <el-input
                      style="width:150px;"
                      v-model="item.numberTopics"
                      placeholder="请输入"
                      maxLength="5"
                      clearable
                      size="small">
                      <template slot="append">道</template>
                    </el-input>
                  </el-form-item>
                  <p style="width:87px;text-align: right;" v-if="item.practiceStatusType">正确率：</p>
                  <el-form-item label="" :rules="rules.numberAccuracy" :prop="'configDetailList.'+ index +'.numberAccuracy'" v-if="item.practiceStatusType">
                    <el-input
                      style="width:150px;"
                      v-model="item.numberAccuracy"
                      placeholder="请输入"
                      maxLength="5"
                      clearable
                      size="small">
                      <template slot="append">%</template>
                    </el-input>
                  </el-form-item>
                </div>
              </div>
            </el-form-item>
            <el-form-item label="" :rules="rules.handleDay" :prop="'configDetailList.'+ index +'.handleDay'" style="margin-bottom:0;">
              <p class="interval-title-p min-p-color">处理天数时限</p>
              <el-input
                v-model="item.handleDay"
                placeholder="请输入"
                maxLength="5"
                clearable
                style="width:200px;">
                <template slot="append">天</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
        <p class="add-button-one-90"
           style="margin-left:20px;width:140px;"
           @click="addObj"
        >添加分值段</p>
      </div>
    </el-form>
    <div class="form-bottom-button-box"
         v-hasPermi="['exam:markconfig: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 { listMarkconfig, addpassmark, editpassmark } from "@/api/exam/markconfig";

export default {
  name: "Markconfig",
  data() {
    return {
      //页面状态
      pageType:false,
      // 遮罩层
      loading: true,
      //数据
      form:{},
      // 表单校验
      rules: {
        passMark: [
          { required: true, message: "请输入信用分合格分值", trigger: "blur" },
          { required: true, message: "请输入信用分合格分值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        gainSafeCertList: [
          { required: true, message: "请选择信用分合格分值获取条件", trigger: "blur" }
        ],
        blackScore: [
          { required: true, message: "请输入黑名单分值", trigger: "blur" },
          { required: true, message: "请输入黑名单分值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        beginScore: [
          { required: true, message: "请输入最小值", trigger: "blur" },
          { required: true, message: "请输入最小值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        endScore: [
          { required: true, message: "请输入最大值", trigger: "blur" },
          { required: true, message: "请输入最大值", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        checkListTwo: [
          { required: true, message: "请在考试/学习/做题中至少选择一种", trigger: "blur" }
        ],
        learnHour: [
          { required: true, message: "请输入小时", trigger: "blur" },
          { required: true, message: "请输入小时", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        learnMinute: [
          { required: true, message: "请输入分钟", trigger: "blur" },
          { required: true, message: "请输入分钟", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        numberTopics: [
          { required: true, message: "请输入数量", trigger: "blur" },
          { required: true, message: "请输入数量", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        numberAccuracy: [
          { required: true, message: "请输入百分比", trigger: "blur" },
          { required: true, message: "请输入百分比", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        handleDay: [
          { 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: {
    //勾选学习
    checkClickOne(data,item,name){
      if(name == 'xx'){
        let num = 0;
        for(let i=0;i<data.length;i++){
          if('learnStatus' == data[i]){
            num++
          }
        }
        item.learnStatusType = num != 0;
      }
    },
    //勾选做题
    checkClickTwo(data,item,name){
      if(name == 'zt'){
        let num = 0;
        for(let i=0;i<data.length;i++){
          if('practiceStatus' == data[i]){
            num++
          }
        }
        item.practiceStatusType = num != 0;
      }
    },
    //添加分值段
    addObj(){
      let obj = {
        beginScore:"",//最小信用分
        endScore:"",//最大信用分
        checkList:[],//处理方式
        checkListTwo:[],//处理方式
        warningStatus:"",//警告
        interviewStatus:"",//约谈
        testStatus:"",//考试
        learnStatus:"",//学习
        learnStatusType:false,
        learnHour:"",//学习小时
        learnMinute:"",//学习分钟
        practiceStatus:"",//做题
        practiceStatusType:false,
        numberTopics:"",//做题数量
        numberAccuracy:"",//做题准确率
        handleDay:"",//天数
      };
      this.form.configDetailList.push(obj);
    },
    //删除分段数据
    delObj(index){
      this.form.configDetailList.splice(index,1);
    },
    /** 查询数据 */
    getList() {
      this.pageType = false;
      listMarkconfig({pageNum:"1",pageSize:"1"}).then( response => {
        if(response.rows[0]){
          //修改
          console.log("修改")
          let newObj = JSON.parse(JSON.stringify(response.rows[0]));
          let obj = {
            id:newObj.id,
            passMark:newObj.passMark,
            blackScore:newObj.blackScore,
            gainSafeCertList:[],
            configDetailList:[],
          };
          //处理一级数据
          if(newObj.gainSafeCert == 1){
            obj.gainSafeCert = 1;
            obj.gainSafeCertList.push('gainSafeCert');
          }else{
            obj.gainSafeCert = ""
          }
          if(newObj.gainSubSafeCert == 1){
            obj.gainSubSafeCert = 1;
            obj.gainSafeCertList.push('gainSubSafeCert');
          }else{
            obj.gainSubSafeCert = ""
          }
          //处理二级数据
          for(let i=0;i<newObj.configDetailList.length;i++){
            let minObj = {
              beginScore:newObj.configDetailList[i].beginScore,
              endScore:newObj.configDetailList[i].endScore,
              handleDay:newObj.configDetailList[i].handleDay,
              checkList:[],
              checkListTwo:[],
            };
            //警告
            if(newObj.configDetailList[i].warningStatus == 1){
              minObj.warningStatus = 1;
              minObj.checkList.push('warningStatus');
            }else{
              minObj.warningStatus = 0;
            }
            //约谈
            if(newObj.configDetailList[i].interviewStatus == 1){
              minObj.interviewStatus = 1;
              minObj.checkList.push('interviewStatus');
            }else{
              minObj.interviewStatus = 0;
            }
            //考试
            if(newObj.configDetailList[i].testStatus == 1){
              minObj.testStatus = 1;
              minObj.checkListTwo.push('testStatus');
            }else{
              minObj.testStatus = 0;
            }
            //学习
            if(newObj.configDetailList[i].learnStatus == 1){
              minObj.learnStatus = 1;
              minObj.learnHour = newObj.configDetailList[i].learnHour;
              minObj.learnMinute = newObj.configDetailList[i].learnMinute;
              minObj.learnStatusType = true;
              minObj.checkListTwo.push('learnStatus');
            }else{
              minObj.learnStatus = 0;
              minObj.learnHour = "";
              minObj.learnMinute = "";
              minObj.learnStatusType = false;
            }
            //做题
            if(newObj.configDetailList[i].practiceStatus == 1){
              minObj.practiceStatus = 1;
              minObj.numberTopics = newObj.configDetailList[i].numberTopics;
              minObj.numberAccuracy = newObj.configDetailList[i].numberAccuracy;
              minObj.practiceStatusType = true;
              minObj.checkListTwo.push('practiceStatus');
            }else{
              minObj.practiceStatus = 0;
              minObj.numberTopics = "";
              minObj.numberAccuracy = "";
              minObj.practiceStatusType = false;
            }
            obj.configDetailList.push(minObj);
          }
          this.$set(this,'form',obj);
          this.pageType = true;
        }else{
          //新提交
          console.log("新提交")
          let obj = {
            passMark:"",//信用分合格值
            gainSafeCertList:[],//多选数组库
            gainSafeCert:"",//获得安全准入证书
            gainSubSafeCert:"",//获得实验室安全准入资格
            blackScore:"",//黑名单分值
            configDetailList:[
              {
                beginScore:"",//最小信用分
                endScore:"",//最大信用分
                checkList:[],//处理方式
                checkListTwo:[],//处理方式
                warningStatus:"",//警告
                interviewStatus:"",//约谈
                testStatus:"",//考试
                learnStatus:"",//学习
                learnStatusType:false,
                learnHour:"",//学习小时
                learnMinute:"",//学习分钟
                practiceStatus:"",//做题
                practiceStatusType:false,
                numberTopics:"",//做题数量
                numberAccuracy:"",//做题准确率
                handleDay:"",//天数
              }
            ],
          };
          this.$set(this,'form',obj);
          this.pageType = true;
        }
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          let newObj = JSON.parse(JSON.stringify(this.form));
          let obj = {
            passMark:newObj.passMark,
            blackScore:newObj.blackScore,
            configDetailList:[],
          };
          if(newObj.id){
            obj.id = newObj.id;
          }
          //处理一级多选
          let gainSafeCertNum = 0;
          let gainSubSafeCertNum = 0;
          for(let i=0;i<newObj.gainSafeCertList.length;i++){
            if(newObj.gainSafeCertList[i] == 'gainSafeCert'){
              gainSafeCertNum++
            }
            if(newObj.gainSafeCertList[i] == 'gainSubSafeCert'){
              gainSubSafeCertNum++
            }
          }
          if(gainSafeCertNum == 0){
            obj.gainSafeCert = "";
          }else{
            obj.gainSafeCert = 1;
          }
          if(gainSubSafeCertNum == 0){
            obj.gainSubSafeCert = "";
          }else{
            obj.gainSubSafeCert = 1;
          }
          //处理二级子项
          for(let i=0;i<newObj.configDetailList.length;i++){
            let minObj ={
              beginScore:newObj.configDetailList[i].beginScore,
              endScore:newObj.configDetailList[i].endScore,
              handleDay:newObj.configDetailList[i].handleDay,
            };
            //处理二级多选--警告/约谈
            let warningStatusNum = 0;
            let interviewStatusNum = 0;
            for(let o=0;o<newObj.configDetailList[i].checkList.length;o++){
              if(newObj.configDetailList[i].checkList[o] == 'warningStatus'){
                warningStatusNum++
              }
              if(newObj.configDetailList[i].checkList[o] == 'interviewStatus'){
                interviewStatusNum++
              }
            }
            if(warningStatusNum == 0){
              minObj.warningStatus = "";
            }else{
              minObj.warningStatus = 1;
            }
            if(interviewStatusNum == 0){
              minObj.interviewStatus = "";
            }else{
              minObj.interviewStatus = 1;
            }
            //处理二级多选--考试
            let testStatusNum = 0;
            for(let o=0;o<newObj.configDetailList[i].checkListTwo.length;o++){
              if(newObj.configDetailList[i].checkListTwo[o] == 'testStatus'){
                testStatusNum++
              }
            }
            if(testStatusNum == 0){
              minObj.testStatus = "";
            }else{
              minObj.testStatus = 1;
            }
            //处理二级多选--学习
            if(newObj.configDetailList[i].learnStatusType){
              minObj.learnStatus = 1;
              minObj.learnHour = newObj.configDetailList[i].learnHour;
              minObj.learnMinute = newObj.configDetailList[i].learnMinute;
            }else{
              minObj.learnStatus = "";
              minObj.learnHour = "";
              minObj.learnMinute = "";
            }
            //处理二级多选--做题
            if(newObj.configDetailList[i].practiceStatusType){
              minObj.practiceStatus = 1;
              minObj.numberTopics = newObj.configDetailList[i].numberTopics;
              minObj.numberAccuracy = newObj.configDetailList[i].numberAccuracy;
            }else{
              minObj.practiceStatus = "";
              minObj.numberTopics = "";
              minObj.numberAccuracy = "";
            }
            obj.configDetailList.push(minObj);
          }
          if(this.form.id){
            editpassmark(obj).then( response => {
              this.getList();
              this.msgSuccess("保存成功");
            });
          }else{
            addpassmark(obj).then( response => {
              this.msgSuccess("保存成功");
            });
          }
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
  .Markconfig {
    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;
      padding-top:22px;
      .interval-flex-box{
        margin-left:220px;
        display: flex;
        .interval-title-p{
          width:100px;
          line-height:40px;
          font-size:14px;
          margin:0;
        }
        .interval-p{
          width:40px;
          text-align: center;
          line-height:40px;
          margin:0;
        }
      }
      .min-p-color{
        color:#606266;
        font-size:14px;
        margin:0;
      }
      .check-box{
        display: flex;
      }
      .annotation-span{
        font-size:14px;
        font-weight:500;
        line-height:40px;
        color:#999999;
      }
      .max-add-for-box{
        margin-left:140px;
        .max-add-for-box-min{
          border:1px solid #dedede;
          width:1200px;
          margin:20px 20px;
          border-radius:4px;
          padding:20px 20px 40px 20px;
          position: relative;
          .position-del-p{
            position: absolute;
            right:20px;
            top:0;
            font-size:20px;
            color:#999;
            cursor:pointer;
          }
          .position-del-p:hover{
            color: #E65D6E;
          }
          .for-interval-flex-box{
            display: flex;
            .for-interval-title-p{
              width:100px;
              line-height:40px;
              font-size:14px;
              margin:0;
            }
            .for-interval-p{
              width:40px;
              text-align: center;
              line-height:40px;
              margin:0;
            }
          }
          .for-check-max-box{
            .for-check-box{
              display: flex;
              p{
                margin:0;
                font-size:14px;
                color:#606266;
                font-weight:500;
                line-height:40px;
              }
            }
          }
        }
      }
    }
    .form-bottom-button-box{
      height:80px;
      padding:20px;
      display: flex;
      .null-p-button{
        flex:1;
      }
    }
  }
</style>