FE-V2-PC/src/views/creditViolation/violation/violationSite/index.vue

<!--违规设置-->
<template>
  <div class="app-container violation-site">
    <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="处理方式设置：" label-width="240px" style="margin-top: 22px;">-->
        <!--<div style="display: flex">-->
          <!--<el-input-->
            <!--v-model="violationVal"-->
            <!--placeholder="请输入处理方式名称"-->
            <!--maxLength="10"-->
            <!--clearable-->
            <!--size="small"-->
          <!--/>-->
          <!--<p class="add-button-two-90"-->
             <!--style="margin-left:20px;width:140px;"-->
             <!--@click="addViolationVal"-->
          <!--&gt;<i class="el-icon-plus"></i>添加处理方式</p>-->
        <!--</div>-->
      <!--</el-form-item>-->
      <!--<div class="violationType-for-max-box">-->
        <!--<div class="violationType-for-min-box" v-for="(item,index) in violationTypeList">-->
          <!--<div>-->
            <!--<p>{{item.violationVal}}</p>-->
          <!--</div>-->
        <!--</div>-->
        <!--<div class="violationType-for-min-box" v-for="(item,index) in form.violationType">-->
          <!--<div>-->
            <!--<p>{{item.violationVal}}</p>-->
            <!--<i class="el-icon-circle-close" @click="delViolationVal(index)"></i>-->
          <!--</div>-->
        <!--</div>-->
      <!--</div>-->
      <el-form-item label="负面清单次数设置：" prop="remake" label-width="240px">
        <el-input
          v-model="form.remake"
          placeholder="请输入负面清单次数"
          maxLength="5"
          clearable
          size="small">
          <template slot="append">次</template>
        </el-input>
      </el-form-item>
      <el-form-item label="违规项设置：" label-width="240px">
        <div style="display: flex">
          <el-input
            v-model="violationName"
            placeholder="请输入违规项名称"
            clearable
            maxLength="14"
            size="small"
          />
          <p class="add-button-two-90"
             style="margin-left:20px;width:140px;"
             @click="addViolationMeth"
          ><i class="el-icon-plus"></i>添加违规项</p>
        </div>
      </el-form-item>
      <div v-for="(item,index) in form.violationMeth">
        <el-form-item :label="item.violationName+'：'" :rules="rules.violationVal" :prop="'violationMeth.'+ index +'.violationVal'" label-width="240px">
          <div class="violationMeth-for-box">
            <el-input
              v-model="item.violationVal"
              placeholder="请输入扣分值"
              clearable
              maxLength="5"
              size="small">
              <template slot="append">分</template>
            </el-input>
            <i class="el-icon-circle-close" @click="delViolationMeth(index)"></i>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="form-bottom-button-box" v-hasPermi="['laboratory:site:add']">
      <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 { listSite, violationSite } from "@/api/laboratory/violationSite";

export default {
  name: "Site",
  data() {
    return {
      //数据
      violationTypeList:[
        {violationVal:"警告"},{violationVal:"约谈"},{violationVal:"考试"},{violationVal:"学习"},{violationVal:"做题"}
      ],
      form:{
        violationType:[],
        remake:"",
        violationMeth:[
          {
            violationName:"",
            violationVal:"",
          }
        ],
      },
      violationVal:"",
      violationName:"",
      // 表单校验
      rules: {
        remake: [
          { required: true, message: "请输入负面清单次数", trigger: "blur" },
          { required: true, message: "请输入负面清单次数", validator: this.spaceJudgment, trigger: "blur" },
          { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
        ],
        violationVal: [
          { 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: {
    //添加处理方式
    addViolationVal(){
      let self = this;
      if(!this.violationVal){
        this.msgError("请先输入处理方式名称")
        return
      }
      for(let i=0;i<self.form.violationType.length;i++){
        if(self.violationVal == self.form.violationType[i].violationVal){
          self.msgError("已存在相同名称的处理方式");
          return
        }
      }
      let obj = {
        violationVal:this.violationVal,
      };
      this.form.violationType.push(obj);
      this.violationVal = "";
    },
    //删除处理方式
    delViolationVal(index){
      this.form.violationType.splice(index,1);
    },
    //添加违规项
    addViolationMeth(){
      let self = this;
      if(!this.violationName){
        this.msgError("请先输入违规项名称");
        return
      }
      for(let i=0;i<self.form.violationMeth.length;i++){
        if(self.violationName == self.form.violationMeth[i].violationName){
          self.msgError("已存在相同名称的违规项");
          return
        }
      }
      let obj = {
        violationName:this.violationName,
        violationVal:"",
      };
      this.form.violationMeth.push(obj);
      this.violationName = "";
    },
    //删除违规项
    delViolationMeth(index){
      this.form.violationMeth.splice(index,1);
    },
    /** 查询数据 */
    getList() {
      listSite({}).then( response => {
        this.$set(this,'form',response.data)
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          violationSite(this.form).then( response => {
            this.getList();
            this.msgSuccess("保存成功")
          });
        }
      });
    },
  }
};
</script>

<style scoped lang="scss">
  .violation-site {
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    .title-p{
      margin:0;
      line-height:80px;
      font-size:18px;
      color:#0045AF;
      border-bottom:2px solid #E0E0E0;
      padding:0 20px;
    }
    .form-content{
      overflow-y: scroll;
      padding:20px 20px 0;
      flex:1;
      .violationType-for-max-box{
        padding:0 240px;
        margin-bottom:2px;
        .violationType-for-min-box{
          display: inline-block;
          margin:0 20px 20px 0;
          div{
            display: flex;
            /*border:1px solid #dedede;*/
            background: #CCE6FE;
            border-radius:4px;
            color:#0183FA;
            padding:6px 10px;
            min-width:100px;
            *{
              margin:0;
              padding:0;
            }
            p{
              font-size:14px;
              flex:1;
              line-height:20px;
              text-align: center;
              font-weight:500;
            }
            i{
              margin-left:10px;
              cursor:pointer;
              line-height:20px;
              font-size:16px;
            }
            i:hover{
              color:#E65D6E;
            }
          }
        }
      }
      .violationMeth-for-box{
        display: flex;
        i{
          color:#666;
          margin-left:20px;
          cursor:pointer;
          line-height:40px;
          font-size:20px;
        }
        i:hover{
          color:#E65D6E;
        }
      }
      .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>