站点选择下拉框的数据获取、存储处理逻辑更新,解决因为多层router-view嵌套,二级路由以上页面不会被缓存的而导致单站监控页面站点选择下拉框闪烁的问题

This commit is contained in:
白菜
2025-06-22 22:20:34 +08:00
parent dea617d853
commit 02d3ab04bb
5 changed files with 64 additions and 16 deletions

View File

@ -19,8 +19,14 @@
</style>
<script>
import {getAllSites} from '@/api/ems/zddt'
import {mapGetters} from "vuex"
export default {
props:{
getListByStore:{
type:Boolean,
default:false,
required:false
},
defaultSiteId:{//默认展示的站点ID
type:String|Number,
default:'',
@ -31,33 +37,54 @@ import {getAllSites} from '@/api/ems/zddt'
return {
id:'',
loading:false,
siteList:[]
siteList:[],
}
},
computed:{
...mapGetters(["zdList"]),
},
methods:{
onSubmit(){
this.$emit('submitSite',this.id)
},
change(id){
this.$emit('changeSite',id)
},
setDefaultSite(){
const defaultSite = parseInt(this.defaultSiteId)
if(defaultSite && this.siteList.find(item=>item.id === defaultSite)){
this.id = defaultSite
}else if(!defaultSite && this.siteList.length>0){
this.id = this.siteList[0].id
}
this.$emit('submitSite',this.id)
},
getList(){
return getAllSites().then(response => {
this.siteList = response.data || []
console.log("获取站点列表返回数据",response,this.siteList)
this.setDefaultSite()
}).finally(() => {this.loading=false})
}
},
mounted(){
this.loading=true
this.$nextTick(()=>{
getAllSites().then(response => {
this.siteList = response.data || []
console.log("获取站点列表返回数据",response,this.siteList)
// 页面初始化 设置默认选中的站点
//defaultSite会传来字符串类型 getAllSites接口返回的id是number类型 两个数据的类型不匹配时下拉框的默认值会显示有问题
const defaultSite = parseInt(this.defaultSiteId)
if(defaultSite&& this.siteList.find(item=>item.id === defaultSite)){
this.id = defaultSite
}else if(!defaultSite && this.siteList.length>0){
this.id = this.siteList[0].id
if(this.getListByStore){
if(this.zdList.length === 0){
this.getList().then(()=>{
this.$store.commit('SET_ZD_LIST', this.siteList)
console.log("从store中获取站点列表数据,但是store中的zdList=[],所以从接口获取数据",this.zdList,this.siteList)
})
}else{
this.siteList = this.zdList
this.loading=false
console.log("从store中获取站点列表数据",this.zdList,this.siteList)
this.setDefaultSite()
}
this.$emit('submitSite',this.id)
}).finally(() => {this.loading=false})
}else{
this.getList()
}
})
}
}