FE-V2-PC/src/views/comprehensive/message/warningNotice/sourceOfDangerForewarning.vue

<!--危险源预警-->
<template>
  <div class="sourceOfDangerForewarning">
    <div class="title-box">
      <p>危险源预警配置</p>
      <p></p>
    </div>
    <div class="content-box scrollbar-box">
      <el-form class="form-max-box" ref="addForm" :model="addForm" :rules="rules" label-width="170px">
        <p class="form-title-p">化学品预警规则</p>
        <div class="form-top-box">
          <el-form-item class="form-item-box" label="即将过期提醒" prop="unexpiredWarnDays">
            <el-input-number style="width:320px" v-model="addForm.unexpiredWarnDays" placeholder="请输入即将过期提醒天数(天)" :min="5" :max="60" label=""></el-input-number>
          </el-form-item>
          <el-form-item class="form-item-box" label="过期提醒数" prop="expiredWarnCount">
            <el-input-number style="width:320px" v-model="addForm.expiredWarnCount" placeholder="请输入化学品过期后提醒次数" :min="1" :max="5" label=""></el-input-number>
          </el-form-item>
        </div>
        <el-form-item class="form-item-check-box" label="违规带离">
          <el-checkbox-group v-model="addForm.illegalRemoval">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListA" :value="item.key" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="超时未归还">
          <el-checkbox-group v-model="addForm.timeout">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListA" :value="item.key" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="化学品已过期">
          <el-checkbox-group v-model="addForm.expired">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListC" :value="item.key" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="化学品即将过期">
          <el-checkbox-group v-model="addForm.unexpired">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListC" :value="item.key" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <p class="form-title-p" style="margin-top:20px;margin-bottom:10px;">气瓶预警规则</p>
        <el-form-item class="form-item-check-box" label="违规带离">
          <el-checkbox-group v-model="addForm2.illegalRemoval">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListB" :value="item.key" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item class="form-item-check-box" label="超时未归还">
          <el-checkbox-group v-model="addForm2.timeout">
            <el-checkbox style="width:100px;margin-top:2px;"
                         v-for="item in checkListB" :value="item.key" :label="item.key" :key="item.key">{{item.value}}</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
      </el-form>
    </div>
    <div class="bottom-button-max-box">
      <p></p>
      <p class="reset-button-one" @click="outButton">取消</p>
      <p class="inquire-button-one" @click="upDataButton">提交</p>
      <p></p>
    </div>
  </div>
</template>

<script>
import { warningConfigAdd, warningConfigList } from '@/api/laboratory/warningNotice'

  export default {
    name: 'sourceOfDangerForewarning',
    data(){
      return{
        checkListA:[{key:"1",value:"系统通知"},{key:"2",value:"短信通知"},{key:"3",value:"声光报警"},{key:"5",value:"电话通知"},],
        checkListB:[{key:"1",value:"系统通知"},{key:"2",value:"短信通知"},{key:"3",value:"声光报警"},],
        checkListC:[{key:"1",value:"系统通知"},{key:"2",value:"短信通知"}],
        addForm:{//化学品
          id:'',
          unexpiredWarnDays:7,
          expiredWarnCount:2,
          illegalRemoval:[],
          timeout:[],
          expired:[],
          unexpired:[],
          warningType:2,

        },
        addForm2:{//气瓶
          id:'',
          illegalRemoval:[],
          timeout:[],
          expired:[],
          unexpired:[],
          warningType:3,
        },
        rules:{
          unexpiredWarnDays: [
            { required: true, message: "请输入即将过期提醒天数(天)", trigger: "blur" },
          ],
          expiredWarnCount: [
            { required: true, message: "请输入化学品过期后提醒次数", trigger: "blur" },
          ],
        },
      }
    },
    created(){

    },
    mounted(){
      this.getInfo();
    },
    methods:{
      /* 详情 */
      getInfo(){
        warningConfigList({warningType:'2'}).then( response => {
          let res=response.data[0];
          if(response.code==200 && res){
            this.addForm.id=res.id
            this.addForm.unexpiredWarnDays=res.unexpiredWarnDays
            this.addForm.expiredWarnCount=res.expiredWarnCount
            this.addForm.illegalRemoval=res.illegalRemoval.split(',')
            this.addForm.timeout=res.timeout.split(',')
            this.addForm.expired=res.expired.split(',')
            this.addForm.unexpired=res.unexpired.split(',')
          }
        });
        warningConfigList({warningType:'3'}).then( response => {
          let res=response.data[0];
          if(response.code==200 && res){
            this.addForm2.id=res.id
            this.addForm2.illegalRemoval=res.illegalRemoval.split(',')
            this.addForm2.timeout=res.timeout.split(',')
            this.addForm2.expired=res.expired.split(',')
            this.addForm2.unexpired=res.unexpired.split(',')
          }
        });
      },
      //提交
      upDataButton(){
        this.$refs["addForm"].validate(valid => {
          if (valid) {
            let obj=[];
            obj.push(this.addForm)
            obj.push(this.addForm2)
            for(let i=0;i<obj.length;i++){
              obj[i].illegalRemoval=obj[i].illegalRemoval.join(',');
              obj[i].timeout=obj[i].timeout.join(',');
              obj[i].expired=obj[i].expired.join(',');
              obj[i].unexpired=obj[i].unexpired.join(',');
            }
            warningConfigAdd(obj).then((response) => {
              if(response.code==200){
                this.outButton();
              }
            });
          }
        })
      },
      //返回事件
      outButton(){
        this.$parent.goPage(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .sourceOfDangerForewarning{
    font-weight: 500;
    flex: 1;
    display: flex !important;
    flex-direction: column;
    overflow: hidden;
    ::v-deep .el-input-number__increase{
      line-height: 38px;
    }
    .title-box{
      display: flex;
      border-bottom:1px solid #dedede;
      p:nth-child(1){
        margin-left:20px;
        line-height: 80px;
        font-size:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        flex:1;
      }
      p:nth-child(3){
        margin:20px;
      }
    }
    .content-box{
      flex:1;
      padding-top:30px;

      .form-max-box{
        .form-top-box{
          display: flex;
          margin-top:30px;
          height:60px;
          .form-item-box{
            height:60px;
            margin-bottom:0;
          }
        }
        .form-item-check-box{
          margin:0;
        }
        .form-title-p{
          line-height:50px;
          color:#0045AF;
          background-color: #F5F5F5;
          font-size:16px;
          padding-left:20px;
        }
      }
    }
    .bottom-button-max-box{
      display: flex;
      padding:20px 0;
      p:nth-child(1){
        flex:1;
      }
      p:nth-child(2){
        width:100px;
        margin-right:20px;
      }
      p:nth-child(3){
        width:100px;
      }
      p:nth-child(4){
        flex:1;
      }
    }
  }
</style>