Merge pull request #8641 from dataease/pr@dev_radio
feat(过滤组件): 下拉组件支持radio风格展示
This commit is contained in:
dataeaseShu
GitHub
commit
90037fc810
177
core/frontend/src/components/widget/deWidget/DeRadio.vue
Normal file
177
core/frontend/src/components/widget/deWidget/DeRadio.vue
Normal file
@ -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>
|
||||
@ -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'
|
||||
}
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -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() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user