Merge pull request #8647 from dataease/pr@dev_radio

fix(过滤组件): radio模式一些样式问题

core/frontend/src/components/widget/deWidget/DeRadio.vue

@@ -89,7 +89,7 @@ export default {
         this.init();
       });
     },
-    'element.style': {
+    radioStyle: {
       handler() {
         this.setPlaceholderColor()
       },
@@ -103,6 +103,12 @@ export default {
       this.setPlaceholderColor();
     });
   },
+  beforeDestroy() {
+    let styleEle = document.querySelector(`#radio-style${this.id}`)
+    if (styleEle) {
+      styleEle. parentElement.removeChild(styleEle)
+    }
+  },
   methods: {
     setPlaceholderColor() {
       let styleEle = document.querySelector(`#radio-style${this.id}`)
@@ -121,18 +127,13 @@ export default {
       }
       this.options = this.newList.slice(0, this.maxLength);
     },
-    customInputStyle() {},
     init() {
       if (this.defaultFirst && this.list.length > 0) {
         this.selectValue = this.list[0].value;
       }
-      if (!this.list || !this.list.length) {
-        this.customInputStyle();
-        return;
-      }
     },
     visualChange(val) {
-      this.$emit("visual-change", val);
+      this.$emit("change", val);
     },
   },
 };

core/frontend/src/lang/en.js

@@ -68,6 +68,12 @@ export default {
     at_the_beginning_of_the_month: 'At the beginning of the month',
     at_the_beginning_of_the_year: 'At the beginning of the year',
     custom: 'custom',
+    dropdown_display: 'Dropdown display',
+    tile_display: 'Tile display',
+    display_format: 'Display format',
+    radio: 'Radio',
+    tab_switching: 'Tab switching',
+    number_of_display_options: 'Number of display options'
   },
   track: {
     upload_limit_format: 'The image format is incorrect. It supports JPG and PNG',

core/frontend/src/lang/tw.js

@@ -68,6 +68,12 @@ export default {
     at_the_beginning_of_the_month: '月初',
     at_the_beginning_of_the_year: '年初',
     custom: '自定義',
+    dropdown_display: '下拉展示',
+    tile_display: '平鋪展示',
+    display_format: '展示形式',
+    radio: '單選框',
+    tab_switching: 'Tab切換',
+    number_of_display_options: '展示選項數'
   },
   track: {
     upload_limit_format: '圖片格式錯誤，支持JPG，PNG',

core/frontend/src/lang/zh.js

@@ -72,6 +72,12 @@ export default {
     at_the_beginning_of_the_month: '月初',
     at_the_beginning_of_the_year: '年初',
     custom: '自定义',
+    dropdown_display: '下拉展示',
+    tile_display: '平铺展示',
+    display_format: '展示形式',
+    radio: '单选框',
+    tab_switching: 'Tab切换',
+    number_of_display_options: '展示选项数'
   },
   route: {
     dashboard: '首页',

core/frontend/src/views/background/index.vue

@@ -254,19 +254,20 @@
             v-model="curComponent.style.showMode"
             size="mini"
           >
-            <el-radio label="select">{{ $t('下拉展示') }}</el-radio>
+            <el-radio label="select">{{ $t('time.dropdown_display') }}</el-radio>
-            <el-radio label="radio">{{ $t('平铺展示') }}</el-radio>
+            <el-radio label="radio">{{ $t('time.tile_display') }}</el-radio>
           </el-radio-group>
           </el-col>
         </el-row>
         <el-row
+          v-if="curComponent.style.showMode === 'radio'"
           style="height: 40px;overflow: hidden;"
         >
         <el-col
             :span="3"
             style="padding-left: 10px;padding-top: 8px"
           >
-          {{ $t('展示形式') }}
+          {{ $t('time.display_format') }}
         </el-col>
         <el-col
             :span="20"
@@ -276,31 +277,32 @@
             v-model="curComponent.style.showStyle"
             size="mini"
           >
-            <el-radio label="single">{{ $t('单选框') }}</el-radio>
+            <el-radio label="single">{{ $t('time.radio') }}</el-radio>
-            <el-radio label="tab">{{ $t('Tab切换') }}</el-radio>
+            <el-radio label="tab">{{ $t('time.tab_switching') }}</el-radio>
           </el-radio-group>
         </el-col>
         </el-row>
         <el-row
+          v-if="curComponent.style.showMode === 'radio'"
           style="height: 40px;overflow: hidden;"
         >
         <el-col
-            :span="3"
+          :span="3"
-            style="padding-left: 10px;padding-top: 8px"
+          style="padding-left: 10px;padding-top: 8px"
-          >
+        >
-          {{$t('展示选项数')}}
+          {{$t('time.number_of_display_options')}}
         </el-col>
         <el-col
-            :span="8"
+          :span="8"
-            style="padding-left: 10px;padding-top: 8px"
+          style="padding-left: 10px;padding-top: 8px"
-          >
+        >
           <el-input-number
-                v-model="curComponent.style.showNum"
+            v-model="curComponent.style.showNum"
-                :min="1"
+            :min="1"
-                :max="10"
+            :max="10"
-                controls-position="right"
+            controls-position="right"
-                size="small"
+            size="small"
-              />
+          />
           </el-col>
         </el-row>
       </template>
@@ -524,6 +526,7 @@ span {
 
 .main-content {
   border: 1px solid #E6E6E6;
+  padding-bottom: 16px;
 }
 
 .params-title {