新入职一个公司,在改之前项目的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;
}