146 lines
3.6 KiB
Vue
146 lines
3.6 KiB
Vue
<!--站点选择组件-->
|
|
<template>
|
|
<div class="zd-select-container">
|
|
<el-form :inline="true">
|
|
<el-form-item :label="showLabel ? '站点选择' : ''" :class="{'no-label': !showLabel}">
|
|
<el-select
|
|
v-model="id"
|
|
:size="size"
|
|
:placeholder="placeholder"
|
|
:loading="loading"
|
|
loading-text="正在加载数据"
|
|
:style="{width: selectWidth}"
|
|
@change="onSubmit"
|
|
>
|
|
<el-option :label="item.siteName" :value="item.siteId" v-for="(item,index) in siteList" :key="index+'zdxeSelect'"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<!-- <el-form-item>-->
|
|
<!-- <el-button type="primary" :loading="searchLoading" @click="onSubmit">搜索</el-button>-->
|
|
<!-- </el-form-item>-->
|
|
</el-form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.zd-select-container {
|
|
.el-form {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
}
|
|
.el-form-item {
|
|
margin-bottom: 0;
|
|
}
|
|
.no-label ::v-deep .el-form-item__label {
|
|
display: none;
|
|
}
|
|
.no-label ::v-deep .el-form-item__content {
|
|
margin-left: 0 !important;
|
|
}
|
|
}
|
|
</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,
|
|
default:'',
|
|
required:false
|
|
},
|
|
showLabel: {
|
|
type: Boolean,
|
|
default: true,
|
|
required: false
|
|
},
|
|
size: {
|
|
type: String,
|
|
default: 'medium',
|
|
required: false
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: '请选择换电站名称',
|
|
required: false
|
|
},
|
|
selectWidth: {
|
|
type: String,
|
|
default: '220px',
|
|
required: false
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
id:'',
|
|
loading:false,
|
|
searchLoading:false,
|
|
siteList:[],
|
|
}
|
|
},
|
|
computed:{
|
|
...mapGetters(["zdList"]),
|
|
},
|
|
watch: {
|
|
defaultSiteId(newVal) {
|
|
if (!newVal || !this.siteList || this.siteList.length === 0) {
|
|
return
|
|
}
|
|
if (this.siteList.find(item => item.siteId === newVal) && this.id !== newVal) {
|
|
this.id = newVal
|
|
}
|
|
}
|
|
},
|
|
methods:{
|
|
onSubmit(){
|
|
this.$emit('submitSite',this.id)
|
|
},
|
|
emitSitesLoaded() {
|
|
this.$emit('sitesLoaded', this.siteList || [])
|
|
},
|
|
setDefaultSite(){
|
|
const defaultSite = this.defaultSiteId
|
|
if(defaultSite && this.siteList.find(item=>item.siteId === defaultSite)){
|
|
this.id = defaultSite
|
|
}else if(!defaultSite && this.siteList.length>0){
|
|
this.id = this.siteList[0].siteId
|
|
}
|
|
this.$emit('submitSite',this.id)
|
|
},
|
|
getList(){
|
|
return getAllSites().then(response => {
|
|
this.siteList = response.data || []
|
|
this.emitSitesLoaded()
|
|
this.setDefaultSite()
|
|
}).finally(() => {this.loading=false;this.searchLoading=false})
|
|
}
|
|
},
|
|
mounted(){
|
|
this.loading=true
|
|
this.searchLoading=true
|
|
this.$nextTick(()=>{
|
|
if(this.getListByStore){
|
|
if(this.zdList.length === 0){
|
|
this.getList().then(()=>{
|
|
this.$store.commit('SET_ZD_LIST', this.siteList)
|
|
})
|
|
}else{
|
|
this.siteList = this.zdList
|
|
this.emitSitesLoaded()
|
|
this.loading=false
|
|
this.searchLoading=false
|
|
this.setDefaultSite()
|
|
}
|
|
}else{
|
|
this.getList()
|
|
}
|
|
})
|
|
}
|
|
}
|
|
</script>
|