重构

src/components/Ems/ZdSelect/index.vue

@@ -2,8 +2,16 @@
 <template>
   <div class="zd-select-container">
     <el-form :inline="true">
-      <el-form-item label="站点选择">
-        <el-select v-model="id" placeholder="请选择换电站名称" :loading="loading" loading-text="正在加载数据" @change="onSubmit">
+      <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>
@@ -15,7 +23,21 @@
 </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'
@@ -31,6 +53,26 @@ import {mapGetters} from "vuex"
         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() {
@@ -44,6 +86,16 @@ import {mapGetters} from "vuex"
     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)
@@ -60,7 +112,6 @@ import {mapGetters} from "vuex"
       getList(){
        return getAllSites().then(response => {
           this.siteList = response.data || []
-          console.log("获取站点列表返回数据",response,this.siteList)
           this.setDefaultSite()
         }).finally(() => {this.loading=false;this.searchLoading=false})
       }
@@ -71,15 +122,13 @@ import {mapGetters} from "vuex"
       this.$nextTick(()=>{
         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)
+              this.getList().then(()=>{
+                this.$store.commit('SET_ZD_LIST', this.siteList)
             })
           }else{
             this.siteList = this.zdList
             this.loading=false
             this.searchLoading=false
-            console.log("从store中获取站点列表数据",this.zdList,this.siteList)
             this.setDefaultSite()
           }
         }else{