FE-V2-PC/src/views/medicUniversity-3_1/chemicalManagement/alarmRecord/addPage.vue

<template>
  <div class="addPage">
    <div class="title-box">
      <p>报警通知配置</p>
      <p class="reset-button-one" @click="backPage"><i class="el-icon-arrow-left"></i>返回</p>
    </div>
    <div class="addPage-min scrollbar-box">
      <p class="addPage-min-title-box"><i class="el-icon-question"></i>化学品领用超时未归还，或未领用即携带化学品离开房间报警设置</p>
      <el-form :model="formData" ref="form" :inline="true" :rules="rules" label-width="100px" style="position: relative;">
        <el-form-item label="适用学院：" >
          <el-select v-model="formData.alarmDeptId" clearable placeholder="请选择适用学院" style="width:400px;" @change="deptChange">
            <el-option
              v-for="item in optionsList"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId">
            </el-option>
          </el-select>
        </el-form-item>
        <div class="for-max-box">
          <div class="for-big-box" v-for="(item,index) in formData.hxpAlarmConfigList">
            <div class="for-left-box">
              <p class="top-null"></p>
              <p class="center-num">{{item.sort}}</p>
              <p class="bottom-null"></p>
            </div>
            <div class="for-right-box" :class="index==0?'for-right-box-none-border':''">
              <div class="for-right-box-1">
                <!--<el-form-item label="报警方式：" :prop="'hxpAlarmConfigList.'+ index +'.alarmMode'" :rules="rules.alarmMode">-->
                  <!--<el-select v-model="item.alarmMode" clearable placeholder="请选择报警方式" style="width:400px;">-->
                    <!--<el-option-->
                      <!--v-for="item in optionsListOne"-->
                      <!--:key="item.id"-->
                      <!--:label="item.name"-->
                      <!--:value="item.id">-->
                    <!--</el-option>-->
                  <!--</el-select>-->
                <!--</el-form-item>-->
                <el-form-item label="间隔时间：" :prop="'hxpAlarmConfigList.'+ index +'.timeInterval'" :rules="rules.timeInterval">
                  <el-input
                    maxlength="3"
                    style="width:400px;"
                    v-model="item.timeInterval"
                    placeholder="请输入间隔时间"
                    clearable
                    size="small">
                  <template slot="append">分钟</template>
                  </el-input>
                </el-form-item>
                <p class="for-right-box-1-text">设定未处理即执行下一步报警的时间间隔</p>
              </div>
              <!--<div >-->
                <!--<el-form-item label="报警内容：" :prop="'hxpAlarmConfigList.'+ index +'.alarmContent'" :rules="rules.alarmContent">-->
                  <!--<el-input-->
                    <!--maxlength="50"-->
                    <!--style="width:910px;"-->
                    <!--show-word-limit-->
                    <!--v-model="item.alarmContent"-->
                    <!--placeholder="请输入报警内容"-->
                    <!--clearable-->
                    <!--size="small"/>-->
                <!--</el-form-item>-->
              <!--</div>-->
              <div class="for-right-box-3">
                <div v-for="(minItem,minIndex) in item.alarmPhone">
                  <el-form-item label="联系方式："  :prop="'hxpAlarmConfigList.'+index+'.alarmPhone.'+minIndex+'.phone'" :rules="rules.phone">
                    <el-input
                      maxlength="11"
                      style="width:400px;"
                      v-model="minItem.phone"
                      placeholder="请输入联系方式"
                      clearable
                      size="small"/>
                  </el-form-item>
                  <i class="el-icon-delete" v-if="item.alarmPhone.length>1" @click="delPhone(index,minIndex)"></i>
                  <i class="el-icon-plus" v-if="minIndex == item.alarmPhone.length-1" @click="addPhone(index)"></i>
                  <i class="phone-add-text" v-if="minIndex == item.alarmPhone.length-1">最多可添加5个联系方式</i>
                </div>
              </div>
              <p class="el-icon-delete postion-button-1" @click="delItem(index)"></p>
            </div>
          </div>
        </div>
        <p class="postion-button-2" @click="addItem">添加处理流程</p>
      </el-form>
      <img src="@/assets/ZDimages/null-data.png" alt="" style="width:200px;margin:80px auto 0;" v-if="!formData.hxpAlarmConfigList[0]">
      <p style="text-align:center;color:#999;margin-top:20px;margin-left:-50px;font-weight:500;font-size:16px;" v-if="!formData.hxpAlarmConfigList[0]">未配置报警通知</p>
      <div class="bottom-button-box">
        <p class="inquire-button-one right-button" style="margin-left:22px;" @click="upDataButton">保存</p>
      </div>
    </div>
  </div>
</template>

<script>
  import { filterDept,getDeptDetail,hxpAlarmConfig } from "@/api/medicUniversity-3_1/index";
  export default {
    name: "addPage",
    data() {
      return {
        optionsList:[],
        optionsListOne:[{id:1,name:"系统通知"},{id:2,name:"声光报警"},{id:3,name:"短信通知"}],
        rules:{
          alarmMode: [
            { required: true, message: "请选择报警方式", trigger: "blur" },
          ],
          timeInterval: [
            { required: true, message: "请输入间隔时间", trigger: "blur" },
            { required: true, message: "请输入间隔时间", validator: this.spaceJudgment, trigger: "blur" },
            { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
          ],
          alarmContent: [
            { required: true, message: "请输入报警内容", trigger: "blur" },
            { required: true, message: "请输入报警内容", validator: this.spaceJudgment, trigger: "blur" }
          ],
          phone: [
            { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的联系方式", trigger: "blur"},
            { required: true, message: "请输入联系方式", trigger: "blur" },
            { required: true, message: "请输入联系方式", validator: this.spaceJudgment, trigger: "blur" },
            { required: true, message: "只能输入数字", validator: this.isNum, trigger: "blur" },
          ],
        },
        formData:{
          hxpAlarmConfigList:[]
        },
      };
    },
    created() {

    },
    mounted(){
      this.filterDept();
    },
    methods: {
      delPhone(index,minIndex){
        this.formData.hxpAlarmConfigList[index].alarmPhone.splice(minIndex,1)
      },
      addPhone(index){
        if(this.formData.hxpAlarmConfigList[index].alarmPhone.length>4){
          this.msgError("最多可添加5个联系方式");
          return
        }
        let obj = {
          phone:"",
        }
        this.formData.hxpAlarmConfigList[index].alarmPhone.push(obj);
      },
      //提交
      upDataButton(){
        let self = this;
        this.$refs["form"].validate(valid => {
          if (valid) {
            let obj = {
              alarmDeptId:this.formData.alarmDeptId,
              hxpAlarmConfigList:[]
            };
            for(let i=0;i<self.formData.hxpAlarmConfigList.length;i++){
              let minObj = {
                // alarmMode:self.formData.hxpAlarmConfigList[i].alarmMode,
                sort:i+1,
                alarmMode:4,
                timeInterval:self.formData.hxpAlarmConfigList[i].timeInterval,
                alarmContent:self.formData.hxpAlarmConfigList[i].alarmContent,
              }
              let phoneList = [];
              for(let o=0;o<self.formData.hxpAlarmConfigList[i].alarmPhone.length;o++){
                phoneList.push(self.formData.hxpAlarmConfigList[i].alarmPhone[o].phone)
              }
              minObj.alarmPhone = phoneList+"";
              obj.hxpAlarmConfigList.push(minObj)
            }
            hxpAlarmConfig(obj).then(response => {
              if(response.code == 200){
                self.msgSuccess(response.msg);
                self.$parent.pageToggle(1);
              }
            })
          }
        })
      },
      addItem(){
        if(this.formData.hxpAlarmConfigList.length>4){
          this.msgError("最多添加5个流程")
          return
        }
        let obj = {
          alarmMode:"",
          timeInterval:"",
          alarmContent:"",
          alarmPhone:[{
            phone:"",
          }]
        }
        this.formData.hxpAlarmConfigList.push(obj);
      },
      delItem(index){
        this.formData.hxpAlarmConfigList.splice(index,1)
      },
      deptChange(val){
        this.$set(this.formData,'alarmDeptId',val)
        this.getDeptDetail(val);
      },
      // 根据院系获取配置
      getDeptDetail(id){
        getDeptDetail(id).then(response => {
          if (response.data[0]){
            for(let i=0;i<response.data.length;i++){
              let list = []
              if(response.data[i].alarmPhone){
                response.data[i].alarmPhone = response.data[i].alarmPhone.split(",");
                for(let o=0;o<response.data[i].alarmPhone.length;o++){
                  let obj = {
                    phone:response.data[i].alarmPhone[o]
                  }
                  list.push(obj);
                }
              }
              response.data[i].alarmPhone = JSON.parse(JSON.stringify(list));
              this.$set(this.formData,'hxpAlarmConfigList',response.data)
            }
          } else {
            // let list = [
            //   {
            //     alarmMode:"",
            //     timeInterval:"",
            //     alarmContent:"",
            //     alarmPhone:[{
            //       phone:"",
            //     }]
            //   }
            // ];
            // this.$set(this.formData,'hxpAlarmConfigList',list)
            this.$set(this.formData,'hxpAlarmConfigList',[])
          }
        });
      },
      //查询当前院系
      filterDept(){
        filterDept().then(response => {
          this.optionsList = response.data;
          if(response.data[0]){
            this.formData.alarmDeptId = response.data[0].deptId;
            this.getDeptDetail(response.data[0].deptId);
          }
        });
      },
      backPage(){
        this.$parent.pageToggle(1);
      },
    }
  }
</script>

<style scoped lang="scss">
  .addPage{
    flex:1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    p{
      margin:0;
      padding:0;
    }
    .title-box{
      display: flex;
      height:90px;
      border-bottom: 1px solid #D8D8D8;
      p:nth-child(1){
        flex:1;
        font-size:16px;
        line-height:90px;
        margin-left:18px;
        color:#0045AF;
      }
      p:nth-child(2){
        margin:25px 25px 0 0;
      }
    }
    .addPage-min{
      flex:1;
      display: flex;
      flex-direction: column;
      padding:20px;
      .addPage-min-title-box{
        margin:20px 0;
        color:#3D3D3D;
        font-size:14px;
        i{
          font-size:16px;
          color:#FFC000;
          margin-right:10px;
        }
      }
      .for-max-box{
        flex:1;
        border:1px solid #dedede;
        .for-big-box:nth-child(1){
          .top-null{
            border:none!important;
          }
        }
        .for-big-box:last-child{
          .bottom-null{
            border:none!important;
          }
        }
        .for-big-box{
          display: flex;
          .for-left-box{
            width:100px;
            display: flex;
            flex-direction: column;
            .top-null{
              flex:1;
              border-left: 1px dashed #0183FA;
              width:0;
              margin:0 auto;
            }
            .center-num{
              width:46px;
              height:46px;
              border-radius:50%;
              background: #CCE6FE;
              color:#0183FA;
              font-size:24px;
              text-align: center;
              line-height: 46px;
              margin:0 auto;
            }
            .bottom-null{
              flex:1;
              border-left: 1px dashed #0183FA;
              width:0;
              margin:0 auto 2px;
            }
          }
          .for-right-box{
            flex:1;
            padding-top:20px;
            border-left:1px solid #dedede;
            border-top:1px solid #dedede;
            position: relative;
            .for-right-box-1{
              display: flex;
              .for-right-box-1-text{
                font-size:14px;
                line-height:40px;
                color:#999;
                margin-left:10px;
                font-weight:500;
              }
            }
            .for-right-box-3{
              div{
                display: flex;
                .el-icon-delete{
                  width:40px;
                  height:40px;
                  line-height: 40px;
                  margin-right:10px;
                  text-align: center;
                  cursor: pointer;
                }
                .el-icon-plus{
                  width:40px;
                  height:40px;
                  line-height: 40px;
                  text-align: center;
                  border:1px solid #dedede;
                  border-radius:6px;
                  font-size:14px;
                  cursor: pointer;
                }
              }
              .phone-add-text{
                font-size:14px;
                color:#999;
                margin-left:20px;
                line-height:40px;
                font-weight:500;
                font-style: normal;
              }
            }
            .postion-button-1{
              position: absolute;
              right:40px;
              bottom:40px;
              width:40px;
              height:40px;
              line-height:40px;
              text-align: center;
              font-size:30px;
              cursor: pointer;
              color:#666;
            }
          }
          .for-right-box-none-border{
            border-top:none!important;
          }
        }
      }
      .postion-button-2{
        position: absolute;
        padding:5px 10px;
        border:1px solid #1E90FF;
        border-radius:4px;
        right:0;
        top:20px;
        text-align: center;
        font-size:14px;
        cursor: pointer;
        color:#1E90FF;
      }
      .bottom-button-box{
        display: flex;
        width:160px;
        margin:40px auto;
        .left-button{
          margin-right:20px;
        }
      }
    }
  }
</style>