feat: 优化选择器组件渲染，和placeholder现实

data-room-ui/packages/BasicComponents/Select/index.vue

@@ -1,17 +1,17 @@
 <template>
   <el-select
     :key="config.code"
-    v-model="selectValue"
+    v-model="value"
     :popper-class="'basic-component-select selct-popper-' + config.code"
     :class="['basic-component-select', `selct-${config.code}`]"
-    :placeholder="`请选择${placeholder}`"
+    :placeholder="`请选择${placeholder || newPlaceholder}`"
     filterable
     clearable
     @visible-change="visibleChange"
     @change="selectChange"
   >
     <el-option
-      v-for="(option, key) in config.option.data"
+      v-for="(option, key) in optionData"
       :key="key"
       :label="option[config.dataSource.dimensionField]"
       :value="option[config.dataSource.metricField]"
@@ -38,22 +38,46 @@ export default {
   },
   data () {
     return {
-      selectValue: '',
-      innerConfig: {}
+      value: '',
+      innerConfig: {},
+      optionData: [],
+      newPlaceholder: ''
     }
   },
   computed: {
-    placeholder () {
-      return window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
+    isPreview () {
+      return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
+    },
+    placeholder: {
+      get () {
+        return window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
+      },
+      set (val) {
+        this.newPlaceholder = val
+      }
     }
   },
   watch: { },
   created () { },
   mounted () {
+    window.dataSetFields = []
     this.changeStyle(this.config)
     EventBus.$on('changeBusinessKey', () => {
       window.dataSetFields = []
     })
+    if (this.isPreview) {
+      if (window.dataSetFields.length === 0) {
+        getDataSetDetails(this.config.dataSource.businessKey).then(res => {
+          window.dataSetFields = res.fields.map(field => {
+            return {
+              label: field.comment || field.fieldDesc,
+              value: field.name || field.fieldName
+            }
+          })
+          this.placeholder = window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
+        })
+      }
+    }
   },
   beforeDestroy () {
     EventBus.$off('changeBusinessKey')
@@ -73,6 +97,7 @@ export default {
           }
         }
         config.option.data = data
+        this.optionData = data
         config.customize.title = config.option.data[config.dataSource.dimensionField] || config.customize.title
         if (window.dataSetFields.length === 0) {
           getDataSetDetails(this.config.dataSource.businessKey).then(res => {
@@ -82,12 +107,14 @@ export default {
                 value: field.name || field.fieldName
               }
             })
+            this.placeholder = window.dataSetFields.find(field => field.value === this.config.dataSource.dimensionField)?.label || ''
           })
         }
         // 语音播报
       } else {
         // 数据返回失败则赋前端的模拟数据
         config.option.data = []
+        this.optionData = []
       }
       return config
     },
@@ -95,6 +122,7 @@ export default {
       this.innerConfig = config
       // 选择器元素
       const selectInputEl = document.querySelector(`.selct-${config.code} .el-input__inner`)
+      console.log(selectInputEl)
       // 背景颜色
       selectInputEl.style.backgroundColor = config.customize.backgroundColor
       // 字体大小
@@ -109,20 +137,6 @@ export default {
         selectDropdownEl.style.border = 'none'
         // 背景颜色
         selectDropdownEl.style.backgroundColor = config.customize.dropDownBackgroundColor
-        // 下拉项hover颜色
-        const selectDropdownItemEl = document.querySelectorAll(`.selct-${this.innerConfig.code} .el-select-dropdown__item`)
-        selectDropdownItemEl.forEach(item => {
-          // 下拉项字体颜色
-          item.style.color = this.innerConfig.customize.dropDownFontColor
-          item.addEventListener('mouseenter', () => {
-            item.style.color = this.innerConfig.customize.dropDownHoverFontColor
-            item.style.backgroundColor = this.innerConfig.customize.dropDownHoverBackgroundColor
-          })
-          item.addEventListener('mouseleave', () => {
-            item.style.color = this.innerConfig.customize.dropDownFontColor
-            item.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
-          })
-        })
       }
     },
     // 组件联动
@@ -139,6 +153,13 @@ export default {
         if (selectDropdownEmptyEl) {
           selectDropdownEmptyEl.style.backgroundColor = this.innerConfig.customize.dropDownBackgroundColor
         }
+        // 下拉项hover颜色
+        const selectDropdownItemEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item`)
+        // 给--dropDownHoverFontColor 和 --dropDownHoverBackgroundColor 赋值
+        selectDropdownItemEl.forEach(item => {
+          item.style.setProperty('--dropDownHoverFontColor', this.innerConfig.customize.dropDownHoverFontColor)
+          item.style.setProperty('--dropDownHoverBackgroundColor', this.innerConfig.customize.dropDownHoverBackgroundColor)
+        })
         // 激活项
         const selectDropdownItemSelectedEl = document.querySelectorAll(`.selct-popper-${this.innerConfig.code} .el-select-dropdown__item.selected`)
         selectDropdownItemSelectedEl.forEach(item => {
@@ -192,6 +213,11 @@ export default {
       border-color: var(--bs-el-border) !important;
     }
   }
+  .el-select-dropdown__item.hover,
+  .el-select-dropdown__item:hover {
+    color: var(--dropDownHoverFontColor) !important;
+    background-color: var(--dropDownHoverBackgroundColor) !important;
+  }
 
   .el-tag.el-tag--info {
     color: var(--bs-el-text) !important;