bug 日志

新入职一个公司，在改之前项目的bug，做一个记录

1.服务名称输入框输入非法字符（如^）时未做处理，后台报错（400）请求错误

用正则进行判断即可

<el-input

    v-model="searchForm.serviceName"

    placeholder="请输入服务名称"

    style="width:140px"

    clearable

    @input="serviceNameLimit"

    @keyup.enter.native="getfilterList"

></el-input>



methods: {

    serviceNameLimit() {

        this.searchForm.serviceName = this.searchForm.serviceName.replace(/[`~!@#$%^&*()_\-   =+<>?:"{}|,.\/;'\\[\]·~！@#￥%……&*（）——+={}|《》？、：“”【】；‘’，。`]/g, '')

    },

}

2.输入框前后空格处理，期望时可以去除前后空白进行查询

找到输入框的class，直接更改padding为0即可

.el-input__inner{
    padding: 0;
}

3.输入框无需点击查询按钮即可进行筛选

1中input加入@keyup.enter.native="getfilterList"，方法与点击查询的方法一致即可

 getfilterList(flag) {
    getList(this, this.searchForm.serviceName,                         
    this.searchForm.serviceType).then(res => {
   // console.log(res)
     if (res.success) {
         this.cacelDate = JSON.parse(JSON.stringify(res.data))
         this.tableData = res.data
         this.filterData()
         this.currentPage = flag ? 1 : this.currentPage
     } else {
         this.$message.error('查询失败')
       }
   })
},

4.服务分类下拉框时无需点击查询按钮即可进行筛选

选择标签中增加 @change="serviceTypeItem"

 <el-select 
            v-model="searchForm.serviceType" 
            placeholder="服务分类" 
            style="width:140px;"
            @change="serviceTypeItem">
........
</el-select>

data(){
    ......
    return{
        ......,
        searchServiceType: '', //服务搜索
        ......
    }
},

methods:{
    //服务搜索
        async serviceTypeItem() {
            // this.searchItem = [];
            //注意用''占位，确保参数传入设定的位置中
            let res = await getList(this, '', this.searchForm.serviceType)
            if (res.success) {
                this.tableData = res.data;
                console.log(res)
            }
        },
}

5.修改内容后点击Cancel，取消修改，显示修改前的数据

增加 this.tableData = this.cacheData

 cancelEdit(row) {
            row.edit = false
            //增加直接给表格数据复制初始保存的数据
            this.tableData = this.cacheData
            this.$message({
                message: '修改被取消',
                type: 'warning'
            })
        },

6.将待办中的“安全预警”单独放置在主页上，并让其闪铃

<div class="helpbtn" v-if="bellTwinkle" >                  
      <router-link to="/securityCenter" >
          <el-icon class="el-icon-message-solid bell-twinkle"></el-icon>
          <span style="color: #ee0a24;">安全求助</span> 
      </router-link>
</div>
<div @click="drawer = true">
    <el-icon class="el-icon-message-solid bell-twinkle" v-show="todo"></el-icon>
    <span>待办</span>
</div>
......
<el-drawer title="消息通知" :visible.sync="drawer" direction="rtl" custom-class="drawer" size="350px">
    <ul class="drawer__content">
        <router-link :to="item.router" v-for="(item,i) in messageList" :key="i">               
             <li class="drawer__item" @click="drawer = false" v-if="item.name =='手工派单'||item.name =='改派审核'">
                 {{item.name}} 
                 <span class="drawer__count" v-if="item.count != 0">{{item.count}}</span>
              </li>                  
        </router-link>
    </ul>
</el-drawer>

data(){
    return{
        todo:false,
        drawer: false,
        bellTwinkle: false, // 消息闪烁    
    }
},

@keyframes twinkle {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.bell-twinkle {
  animation: twinkle 1s steps(1, start) infinite;
  -webkit-animation: twinkle 1.2s steps(1, start) infinite;
  cursor: pointer;
  color: #ee0a24;
}