Merge pull request #8641 from dataease/pr@dev_radio

feat(过滤组件): 下拉组件支持radio风格展示

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

@@ -0,0 +1,177 @@
+<template>
+  <el-radio-group  @change="visualChange" v-model="selectValue">
+    <template v-for="item in options">
+      <el-radio
+        :key="item.id + 'radio'"
+        :label="item.text"
+        :value="item.id"
+        v-if="radioStyle.showStyle === 'single'"
+        :disabled="itemDisabled"
+        />
+      <el-radio-button
+        v-else
+        :disabled="itemDisabled"
+        :key="item.id + 'tab'"
+        :label="item.text"
+        :value="item.id"
+      />
+    </template>
+  </el-radio-group>
+</template>
+
+<script>
+import { uuid } from "vue-uuid";
+
+export default {
+  name: "DeRadio",
+  model: {
+    prop: "value", // 绑定的值，通过父组件传递
+    event: "update", // 自定义名
+  },
+  props: {
+    id: {
+      type: String,
+      require: true,
+      default: uuid.v1(),
+    },
+    radioStyle: {
+      type: Object,
+      default: () => {},
+    },
+    list: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    value: {
+      type: [String, Number],
+      default: "",
+    },
+    isConfig: {
+      type: Boolean,
+      default: false,
+    },
+    itemDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      newList: [],
+      selectValue: this.value,
+      options: [],
+      defaultFirst: false,
+    };
+  },
+  computed: {
+    maxLength() {
+      return this.radioStyle.showNum || 5;
+    },
+  },
+  watch: {
+    value(val) {
+      this.selectValue = val;
+    },
+    selectValue(val) {
+      this.$emit("update", val);
+      if (!val) {
+        this.resetList();
+      }
+    },
+    maxLength() {
+      this.resetList();
+    },
+    list() {
+      this.resetList();
+      this.$nextTick(() => {
+        this.init();
+      });
+    },
+    'element.style': {
+      handler() {
+        this.setPlaceholderColor()
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.resetList();
+    this.$nextTick(() => {
+      this.init();
+      this.setPlaceholderColor();
+    });
+  },
+  methods: {
+    setPlaceholderColor() {
+      let styleEle = document.querySelector(`#radio-style${this.id}`)
+      if (!styleEle) {
+        styleEle = document.createElement('style')
+        styleEle.id = `radio-style${this.id}`
+        document.querySelector('head').appendChild(styleEle)
+      }
+      styleEle.innerHTML = `#component${this.id} {\n  color: transparent !important; \n border-color:transparent !important; \n background-color: transparent !important; \n  } #component${this.id} .el-radio-button:not(.is-active) .el-radio-button__inner {\n  color: ${this.radioStyle.wordColor}; \n border-color: ${this.radioStyle.brColor}; \n background-color: ${this.radioStyle.innerBgColor}; \n  } #component${this.id} .el-radio:not(.is-check) .el-radio__label {\n  color: ${this.radioStyle.wordColor}; \n }`
+    },
+    resetList(arrays) {
+      if (Array.isArray(arrays)) {
+        this.newList = arrays.slice();
+      } else {
+        this.newList = this.list.slice();
+      }
+      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);
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.VisualSelects {
+  .el-scrollbar {
+    position: relative;
+    height: 245px;
+    overflow: inherit;
+    overflow-x: hidden;
+    content-visibility: auto;
+  }
+
+  ::-webkit-scrollbar {
+    background: #ffffff !important;
+  }
+
+  .el-select-height {
+    width: 1px;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .el-select-dropdown__list {
+    width: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .el-select-dropdown__wrap {
+    height: 0;
+  }
+}
+
+.select-all {
+  padding: 10px 20px 0 20px;
+}
+</style>

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

@@ -4,6 +4,7 @@
     v-if="element.options!== null && element.options.attrs!==null && show "
     ref="deSelect"
     v-model="value"
+    :id="element.id"
     :class-id="'visual-' + element.id + '-' + inDraw + '-' + inScreen"
     :collapse-tags="showNumber"
     :clearable="(inDraw || !selectFirst)"
@@ -21,6 +22,7 @@
     :flag="flag"
     :is-config="isConfig"
     :custom-style="customStyle"
+    :radioStyle="element.style"
     @resetKeyWords="filterMethod"
     @change="changeValue"
     @focus="setOptionWidth"
@@ -47,6 +49,7 @@
 
 <script>
 import ElVisualSelect from '@/components/elVisualSelect'
+import DeRadio from './DeRadio.vue'
 import { linkMultFieldValues, multFieldValues } from '@/api/dataset/dataset'
 import bus from '@/utils/bus'
 import { isSameVueObj, mergeCustomSortOption } from '@/utils'
@@ -56,7 +59,7 @@ import { textSelectWidget } from '@/components/widget/deWidget/serviceNameFn.js'
 import { uuid } from 'vue-uuid'
 import _ from 'lodash'
 export default {
-  components: { ElVisualSelect },
+  components: { ElVisualSelect, DeRadio },
   mixins: [customInput],
   props: {
     canvasId: {
@@ -105,6 +108,9 @@ export default {
   computed: {
     mode() {
       let result = 'el-select'
+      if (this.element.style.showMode && this.element.style.showMode === 'radio' && !this.element.options.attrs.multiple && !this.isConfig) {
+        return 'DeRadio'
+      }
       if (this.element.options && this.element.options.attrs && this.element.options.attrs.visual) {
         result = 'el-visual-select'
       }

core/frontend/src/components/widget/deWidget/inputStyleMixin.js

@@ -67,6 +67,7 @@ export default {
   },
   methods: {
     handlerInputStyle(type, newValue) {
+      if (this.element.style.showMode && this.element.style.showMode === 'radio') return
       let nodeCache = ''
       this.styleAttrs.forEach(ele => {
         if (!nodeCache) {

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

@@ -236,6 +236,74 @@
         </el-col>
       </el-row>
 
+      <template v-if="this.curComponent.component === 'de-select'">
+        <el-row
+          style="height: 40px;overflow: hidden;"
+        >
+        <el-col
+            :span="3"
+            style="padding-left: 10px;padding-top: 8px"
+          >
+          {{ $t('deshowdate.open_mode') }}
+        </el-col>
+        <el-col
+          :span="20"
+          style="padding-left: 10px;padding-top: 8px"
+          >
+          <el-radio-group
+            v-model="curComponent.style.showMode"
+            size="mini"
+          >
+            <el-radio label="select">{{ $t('下拉展示') }}</el-radio>
+            <el-radio label="radio">{{ $t('平铺展示') }}</el-radio>
+          </el-radio-group>
+          </el-col>
+        </el-row>
+        <el-row
+          style="height: 40px;overflow: hidden;"
+        >
+        <el-col
+            :span="3"
+            style="padding-left: 10px;padding-top: 8px"
+          >
+          {{ $t('展示形式') }}
+        </el-col>
+        <el-col
+            :span="20"
+            style="padding-left: 10px;padding-top: 8px"
+          >
+          <el-radio-group
+            v-model="curComponent.style.showStyle"
+            size="mini"
+          >
+            <el-radio label="single">{{ $t('单选框') }}</el-radio>
+            <el-radio label="tab">{{ $t('Tab切换') }}</el-radio>
+          </el-radio-group>
+        </el-col>
+        </el-row>
+        <el-row
+          style="height: 40px;overflow: hidden;"
+        >
+        <el-col
+            :span="3"
+            style="padding-left: 10px;padding-top: 8px"
+          >
+          {{$t('展示选项数')}}
+        </el-col>
+        <el-col
+            :span="8"
+            style="padding-left: 10px;padding-top: 8px"
+          >
+          <el-input-number
+                v-model="curComponent.style.showNum"
+                :min="1"
+                :max="10"
+                controls-position="right"
+                size="small"
+              />
+          </el-col>
+        </el-row>
+      </template>
     </el-row>
     <el-row class="root-class">
       <el-col :span="24">
@@ -327,7 +395,13 @@ export default {
         this.fileList.push({ url: imgUrlTrans(this.curComponent.commonBackground.outerImage) })
       }
       this.backgroundOrigin = deepCopy(this.curComponent.commonBackground ? this.curComponent.commonBackground : COMMON_BACKGROUND_NONE)
-      this.backgroundOrigin.style = deepCopy(this.curComponent.style || { brColor: '', innerBgColor: '', wordColor: ''})
+      this.backgroundOrigin.style = deepCopy(this.curComponent.style || { brColor: '', innerBgColor: '', wordColor: '' })
+      if (!this.backgroundOrigin.style.showStyle) {
+        this.backgroundOrigin.style = {...this.backgroundOrigin.style, ...{ showStyle: 'single', showMode: 'select', showNum: 5 }}
+      }
+      if (!this.curComponent.style.showStyle) {
+        this.curComponent.style = {...this.curComponent.style, ...{ showStyle: 'single', showMode: 'select', showNum: 5 }}
+      }
       this.queryBackground()
     },
     queryBackground() {
@@ -347,7 +421,9 @@ export default {
       this.curComponent.style.brColor = this.backgroundOrigin.style.brColor
       this.curComponent.style.innerBgColor = this.backgroundOrigin.style.innerBgColor
       this.curComponent.style.wordColor = this.backgroundOrigin.style.wordColor
-      console.log('backgroundSetClose');
+      this.curComponent.style.showStyle = this.backgroundOrigin.style.showStyle
+      this.curComponent.style.showMode = this.backgroundOrigin.style.showMode
+      this.curComponent.style.showNum = this.backgroundOrigin.style.showNum
       this.$emit('backgroundSetClose')
     },
     save() {