emsfront/src/components/Ems/ZdSelect/index.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>