center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

Merge pull request #2460 from dataease/pr@dev_filter_input_style_custom

Browse Source 
feat: 过滤组件自定义样式
This commit is contained in:
dataeaseShu 2022-06-21 14:39:17 +08:00 committed by GitHub
commit d796226601
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 413 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/components/ElTreeSelect/index.vue
View File

@ -562,6 +562,7 @@ export default {
// 显示弹出框的时候容错，查看是否和el宽度一致
_popoverShowFun(val) {
this._updateH()
this.$emit('onFoucs')
},
// 判断是否隐藏弹出框
_popoverHideFun(e) {

25
frontend/src/components/dataease/DeOutWidget.vue
View File

@ -19,6 +19,7 @@
<div class="first-element">
<div
:class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''"
:style="deSelectGridBg"
class="first-element-contaner"
>
@ -27,6 +28,7 @@
v-if="element.type==='custom'"
:id="'component' + element.id"
class="component-custom"
ref="deOutWidget"
:out-style="element.style"
:element="element"
:in-draw="inDraw"
@ -44,8 +46,10 @@
<script>
import { mapState } from 'vuex'
import inputStyleMixin from '@/components/widget/DeWidget/inputStyleMixin'
export default {
name: 'DeOutWidget',
mixins: [inputStyleMixin],
props: {
element: {
type: Object,
@ -99,12 +103,23 @@ export default {
},
...mapState([
'curCanvasScale'
])
]),
deSelectGridBg() {
if (this.element.component !== 'de-select-grid') return null;
const { backgroundColorSelect, color } = this.element.commonBackground;
return {
background: backgroundColorSelect ? color : '#fff',
border: backgroundColorSelect ? 'none' : '1px solid #d7dae2'
}
},
isFilterComponent() {
return ['de-select', 'de-select-grid', 'de-date', "de-input-search", "de-number-range", "de-select-tree"].includes(this.element.component)
}
},
watch: {
'element.style': {
handler(val) {
this.handlerPositionChange(val)
this.handlerPositionChange(val);
},
deep: true,
immediate: true
@ -114,9 +129,13 @@ export default {
// this.watchSize()
},
created() {
const { horizontal, vertical } = this.element.style
// console.log('aaaaaa')
const { horizontal, vertical, brColor, wordColor, innerBgColor } = this.element.style
this.$set(this.element.style, 'horizontal', horizontal || 'left')
this.$set(this.element.style, 'vertical', vertical || 'center')
this.$set(this.element.style, 'brColor', brColor || '')
this.$set(this.element.style, 'wordColor', wordColor || '')
this.$set(this.element.style, 'innerBgColor', innerBgColor || '')
},
methods: {
handlerPositionChange(val) {

48
frontend/src/components/widget/DeWidget/DeDate.vue
View File

@ -3,6 +3,7 @@
v-if="element.options!== null && element.options.attrs!==null"
ref="dateRef"
v-model="values"
popper-class="coustom-date-picker"
:type="element.options.attrs.type"
:range-separator="$t(element.options.attrs.rangeSeparator)"
:start-placeholder="$t(element.options.attrs.startPlaceholder)"
@ -26,8 +27,10 @@ import {
timeSection
} from '@/utils'
import bus from '@/utils/bus'
export default {
import customInput from '@/components/widget/DeWidget/customInput'
export default {
mixins: [customInput],
props: {
element: {
type: Object,
@ -133,6 +136,9 @@ export default {
},
toFocus() {
this.onFocus = true
this.$nextTick(() => {
this.handleCoustomStyle()
})
},
search() {
this.setCondition()
@ -204,6 +210,44 @@ export default {
</script>
<style lang="scss" scoped>
<style lang="scss">
.coustom-date-picker {
border:1px solid var(--BrDateColor, #dfe4ed) !important;
background: var(--BgDateColor, #FFFFFF) !important;
// .popper__arrow::after{
// border-bottom-color: var(--BgDateColor, #FFFFFF) !important;
// }
.popper__arrow,
.popper__arrow::after {
display: none !important;
}
.el-date-range-picker__content.is-left{
border-right:1px solid var(--BrDateColor, #e6ebf5) !important;
}
.el-date-table th,
.el-date-picker__header--bordered {
border-bottom:1px solid var(--BrDateColor, #e6ebf5) !important;
}
.el-date-range-picker__header,
.el-date-table th,
.el-date-table__row,
.el-month-table td .cell,
.el-year-table td .cell,
.el-picker-panel__icon-btn,
.el-date-picker__header-label{
color: var(--DateColor, #606266);
}
.el-month-table td.current:not(.disabled) .cell,
.el-month-table td.today:not(.disabled) .cell,
.el-year-table td.current:not(.disabled) .cell,
.el-year-table td.today:not(.disabled) .cell {
color: #409EFF;
}
}
</style>

10
frontend/src/components/widget/DeWidget/DeInputSearch.vue
View File

@ -6,6 +6,8 @@
resize="vertical"
:placeholder="$t(element.options.attrs.placeholder)"
:size="size"
class="de-range-tag"
ref="de-input-search"
@input="valueChange"
@keypress.enter.native="search"
@dblclick="setEdit"
@ -111,6 +113,10 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
// .de-range-tag {
// input::placeholder {
// color: var(--CustomColor, #909399) !important;
// }
// }
</style>

4
frontend/src/components/widget/DeWidget/DeNumberRange.vue
View File

@ -3,11 +3,11 @@
<el-form v-if="element.options!== null && element.options.attrs!==null" ref="form" :model="form" :rules="rules">
<div class="de-number-range-container">
<el-form-item prop="min">
<el-input v-model="form.min" :placeholder="$t(element.options.attrs.placeholder_min)" :size="size" @input="inputChange" @change="handleMinChange" />
<el-input ref='de-number-range-min' v-model="form.min" :placeholder="$t(element.options.attrs.placeholder_min)" :size="size" @input="inputChange" @change="handleMinChange" />
</el-form-item>
<span>{{ $t('denumberrange.split_placeholder') }}</span>
<el-form-item prop="max">
<el-input v-model="form.max" :placeholder="$t(element.options.attrs.placeholder_max)" :size="size" @input="inputChange" @change="handleMaxChange" />
<el-input ref='de-number-range-max' v-model="form.max" :placeholder="$t(element.options.attrs.placeholder_max)" :size="size" @input="inputChange" @change="handleMaxChange" />
</el-form-item>
</div>
</el-form>

51
frontend/src/components/widget/DeWidget/DeSelect.vue
View File

@ -11,6 +11,8 @@
:popper-append-to-body="inScreen"
:size="size"
:filterable="true"
class="de-select-tag"
popper-class="coustom-de-select"
@change="changeValue"
@focus="setOptionWidth"
@blur="onBlur"
@ -32,8 +34,10 @@
import { multFieldValues, linkMultFieldValues } from '@/api/dataset/dataset'
import bus from '@/utils/bus'
import { getLinkToken, getToken } from '@/utils/auth'
export default {
import customInput from '@/components/widget/DeWidget/customInput'
export default {
mixins: [customInput],
props: {
element: {
type: Object,
@ -120,6 +124,7 @@ export default {
this.show = false
this.$nextTick(() => {
this.show = true
this.handleCoustomStyle()
})
},
'element.options.attrs.sort': function(value, old) {
@ -253,6 +258,7 @@ export default {
this.$nextTick(() => {
// this.selectOptionWidth = event.srcElement.offsetWidth + 'px'
this.selectOptionWidth = event.srcElement.parentElement.parentElement.offsetWidth + 'px'
this.handleCoustomStyle()
})
}
@ -261,6 +267,45 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.coustom-de-select {
background-color: var(--BgSelectColor, #FFFFFF) !important;
// .popper__arrow::after{
// border-bottom-color: var(--BgSelectColor, #FFFFFF) !important;
// }
</style>
.popper__arrow,
.popper__arrow::after {
display: none !important;
}
.el-select-dropdown__item {
color: var(--SelectColor, #606266);
}
.el-select-dropdown__item.selected {
color: #409eff;
background-color: rgb(245, 247, 250, .5);
}
.el-select-dropdown__item.hover {
background-color: rgb(245, 247, 250, .5);
}
}
.de-select-tag {
.el-select__tags {
.el-tag {
background-color: var(--BgSelectColor, #f4f4f5) !important;
border-color: var(--BrSelectColor, #e9e9eb) !important;
color: var(--SelectColor, #909399) !important;
i {
color: var(--SelectColor, #909399) !important;
}
}
.el-icon-close {
background-color: var(--BgSelectColor, #C0C4CC) !important;
}
}
}
</style>

39
frontend/src/components/widget/DeWidget/DeSelectGrid.vue
View File

@ -6,6 +6,7 @@
v-model="keyWord"
:placeholder="$t('deinputsearch.placeholder')"
:size="size"
ref="de-select-grid"
prefix-icon="el-icon-search"
clearable
/>
@ -39,8 +40,9 @@
import { multFieldValues, linkMultFieldValues } from '@/api/dataset/dataset'
import { getLinkToken, getToken } from '@/utils/auth'
import bus from '@/utils/bus'
export default {
import { attrsMap, styleAttrs, textSelectGridWidget } from '@/components/widget/DeWidget/serviceNameFn.js'
export default {
props: {
element: {
type: Object,
@ -76,7 +78,7 @@ export default {
show: true,
datas: [],
isIndeterminate: false,
checkAll: false
checkAll: false,
}
},
computed: {
@ -96,6 +98,10 @@ export default {
},
panelInfo() {
return this.$store.state.panel.panelInfo
},
cssArr() {
const { brColor, wordColor, innerBgColor } = this.element.style;
return { brColor, wordColor, innerBgColor }
}
},
watch: {
@ -130,6 +136,7 @@ export default {
this.element.options.attrs.fieldId.length > 0 &&
method(param).then(res => {
this.datas = this.optionDatas(res.data)
this.changeInputStyle()
}) || (this.element.options.value = '')
},
'element.options.attrs.multiple': function(value, old) {
@ -148,6 +155,7 @@ export default {
this.checkAll = this.value.length === this.datas.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
}
this.changeInputStyle();
})
},
'element.options.attrs.sort': function(value, old) {
@ -167,8 +175,14 @@ export default {
this.element.options.attrs.fieldId.length > 0 &&
method(param).then(res => {
this.datas = this.optionDatas(res.data)
this.changeInputStyle()
}) || (this.element.options.value = '')
}
},
cssArr: {
handler: 'changeInputStyle',
deep: true
},
keyWord: 'changeInputStyle'
},
created() {
if (!this.element.options.attrs.sort) {
@ -191,6 +205,24 @@ export default {
},
methods: {
changeInputStyle() {
if (!this.$parent.handlerInputStyle) return;
this.$nextTick(() => {
this.handlerInputStyle(this.element.style)
})
},
handlerInputStyle(newValue) {
let nodeCache = '';
if (!this.$refs['de-select-grid']) return
styleAttrs.forEach(ele => {
if (!nodeCache) {
nodeCache = this.$refs['de-select-grid'].$el.querySelector('.el-input__inner')
}
nodeCache.style[attrsMap[ele]] = newValue[ele];
this.textSelectGridWidget(this.$el, ele, newValue[ele])
})
},
textSelectGridWidget: textSelectGridWidget,
initLoad() {
this.value = this.element.options.attrs.multiple ? [] : null
if (this.element.options.attrs.fieldId) {
@ -202,6 +234,7 @@ export default {
}
method({ fieldIds: this.element.options.attrs.fieldId.split(','), sort: this.element.options.attrs.sort }).then(res => {
this.datas = this.optionDatas(res.data)
this.changeInputStyle()
if (this.element.options.attrs.multiple) {
this.checkAll = this.value.length === this.datas.length
this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length

38
frontend/src/components/widget/DeWidget/DeSelectTree.vue
View File

@ -15,6 +15,7 @@
@removeTag="changeNodeIds"
@check="changeCheckNode"
@select-clear="selectClear"
@onFoucs="onFoucs"
/>
</template>
@ -24,8 +25,11 @@ import { mappingFieldValues, linkMappingFieldValues } from '@/api/dataset/datase
import bus from '@/utils/bus'
import { getLinkToken, getToken } from '@/utils/auth'
import ElTreeSelect from '@/components/ElTreeSelect'
import customInput from '@/components/widget/DeWidget/customInput'
export default {
components: { ElTreeSelect },
mixins: [customInput],
props: {
element: {
type: Object,
@ -208,6 +212,11 @@ export default {
},
methods: {
onFoucs() {
this.$nextTick(() => {
this.handleCoustomStyle()
})
},
selectClear() {
this.changeValue(this.value)
},
@ -354,6 +363,33 @@ export default {
}
</script>
<style lang="scss" scoped>
<style lang="scss">
.test-class-wrap {
background: var(--BgSelectTreeColor, #FFFFFF) !important;
.popper__arrow,
.popper__arrow::after {
display: none !important;
}
.el-tree {
background: var(--BgSelectTreeColor, #FFFFFF) !important;
color: var(--SelectTreeColor, #606266) !important;
}
.el-input-group--append {
.el-input__inner {
background: var(--BgSelectTreeColor, #FFFFFF) !important;
color: var(--SelectTreeColor, #606266) !important;
border: 1px solid var(--BrSelectTreeColor, #606266) !important;
}
.el-input-group__append {
background: var(--BgSelectTreeColor, #FFFFFF) !important;
color: var(--SelectTreeColor, #606266) !important;
border: 1px solid var(--BrSelectTreeColor, #606266) !important;
border-left: none;
}
}
}
</style>

39
frontend/src/components/widget/DeWidget/customInput.js Normal file
View File

@ -0,0 +1,39 @@
// 通过控制css变量控制过滤组件弹框样式 de-select-grid除外
import { attrsMap, styleAttrs } from '@/components/widget/DeWidget/serviceNameFn.js'
export default {
data() {
return {
attrsMap,
styleAttrs,
// 过滤组件名css变量映射
refComNameMap: {
'de-date': ['--BgDateColor', '--DateColor', '--BrDateColor'],
'de-select': ['--BgSelectColor', '--SelectColor', '--BrSelectColor'],
'de-select-tree': ['--BgSelectTreeColor', '--SelectTreeColor', '--BrSelectTreeColor'],
"de-input-search": ['--BgSearchColor', '--SearchColor', '--BrSearchColor'],
"de-number-range": ['--BgRangeColor', '--RangeColor', '--BrRangeColor']
}
}
},
mounted() {
this.handleCoustomStyle()
},
methods: {
typeTransform() {
let refNode = this.refComNameMap[this.element.component];
if (!refNode) return [];
return refNode
},
handleCoustomStyle() {
// 判断组件是否是在仪表板内部 否则css样式取默认值
const isPanelDe = this.$parent.handlerInputStyle;
const { brColor, wordColor, innerBgColor } = this.element.style;
const newValue = { brColor, wordColor, innerBgColor };
const cssVar = this.typeTransform();
this.styleAttrs.forEach((ele, index) => {
document.documentElement.style.setProperty(cssVar[index], !isPanelDe ? '' : newValue[ele])
})
},
}
}

74
frontend/src/components/widget/DeWidget/inputStyleMixin.js Normal file
View File

@ -0,0 +1,74 @@
// 通过控制 js 控制过滤组件输入框样式 如需额外处理 声明组件serviceName同名函数处理
import { timeDateRangeWidget, textInputWidget, attrsMap, styleAttrs } from '@/components/widget/DeWidget/serviceNameFn.js'
export default {
data() {
return {
attrsMap,
styleAttrs,
// 过滤组件名ref映射
refComNameMap: {
'de-date': 'dateRef',
'de-select-grid': 'de-select-grid',
'de-select': 'deSelect',
'de-select-tree': 'deSelectTree',
"de-input-search": "de-input-search",
"de-number-range": ['de-number-range-min', 'de-number-range-max']
}
}
},
watch: {
cssArr: {
handler(newValue) {
if (!this.isFilterComponent) return;
this.typeTransform().forEach(ele => {
this.handlerInputStyle(ele, newValue)
})
},
deep: true
},
},
computed: {
cssArr() {
const { brColor, wordColor, innerBgColor } = this.element.style;
return { brColor, wordColor, innerBgColor }
}
},
mounted() {
if (!this.isFilterComponent) return;
this.typeTransform().forEach(item => {
const nodeCache = this.$refs.deOutWidget.$refs[item].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[item].$el
this.styleAttrs.forEach(ele => {
nodeCache.style[this.attrsMap[ele]] = this.element.style[ele];
this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(item), ele, this.element.style[ele])
})
})
},
methods: {
handlerInputStyle(type, newValue) {
let nodeCache = '';
this.styleAttrs.forEach(ele => {
if (!nodeCache) {
nodeCache = this.$refs.deOutWidget.$refs[type].$el.querySelector('.el-input__inner') || this.$refs.deOutWidget.$refs[type].$el
}
nodeCache.style[this.attrsMap[ele]] = newValue[ele];
this[this.element.serviceName] && this[this.element.serviceName](this.selectRange(type), ele, newValue[ele])
})
},
selectRange(item) {
if (this.element.component === 'de-select-grid') {
return this.$refs.deOutWidget.$el;
}
return this.$refs.deOutWidget.$refs[item].$el;
},
timeDateRangeWidget: timeDateRangeWidget,
textInputWidget: textInputWidget,
typeTransform() {
let refNode = this.refComNameMap[this.element.component];
if (!refNode) return [];
if (!Array.isArray(refNode)) {
refNode = [refNode]
}
return refNode
}
}
}

46
frontend/src/components/widget/DeWidget/serviceNameFn.js Normal file
View File

@ -0,0 +1,46 @@
const attrsMap = { brColor: 'borderColor', wordColor: 'color', innerBgColor: 'backgroundColor' }
const styleAttrs = ['innerBgColor', 'wordColor', 'brColor']
function timeDateRangeWidget (nodeCache, name, value) {
const classList = ['.el-range-input', '.el-range-separator']
classList.forEach(ele => {
let nodeList = nodeCache.querySelectorAll(ele);
if (!nodeList.length) return;
nodeList.forEach(ele => {
ele.style[attrsMap[name]] = value;
})
})
}
function textInputWidget (nodeCache, name, value) {
let groupAppend = nodeCache.querySelector('.el-input-group__append');
groupAppend.style[attrsMap[name]] = value;
if (name === 'brColor') {
groupAppend.style.borderLeft = 'none'
}
}
function textSelectGridWidget (nodeCache, name, value) {
if (name === 'innerBgColor') {
nodeCache.querySelector('.list').style.backgroundColor = value;
}
if (name === 'wordColor') {
let elRadio = nodeCache.querySelectorAll('.el-radio')
let elCheckbox = nodeCache.querySelectorAll('.el-checkbox')
if (elRadio.length) {
elRadio.forEach(ele => {
ele.style.color = value;
});
}
if (elCheckbox.length) {
elCheckbox.forEach(ele => {
ele.style.color = value;
});
}
}
}
export {
attrsMap,
styleAttrs,
timeDateRangeWidget,
textInputWidget,
textSelectGridWidget,
}

27
frontend/src/styles/theme/dark.scss
View File

@ -22,6 +22,32 @@ $--color-black: #FFFFFF;
$--background-color-base: #171b22;
/* 定义全局变量 */
:root{
--BgSelectColor: #ffffff;
--SelectColor: #fff;
--BrSelectColor: #fff;
--BgSelectTreeColor: #ffffff;
--SelectTreeColor: #fff;
--BrSelectTreeColor: #fff;
--BgDateColor: #ffffff;
--DateColor: #fff;
--BrDateColor: #fff;
--BgRangeColor: #ffffff;
--RangeColor: #fff;
--BrRangeColor: #fff;
--BgSerachColor: #ffffff;
--SerachColor: #fff;
--BrSerachColor: #fff;
--BgSelectGridColor: #ffffff;
--SelectGridColor: #fff;
--BrSelectGridColor: #fff;
}
// 与CSS原生变量映射
#app {
@ -56,3 +82,4 @@ $--background-color-base: #171b22;
}

28
frontend/src/views/background/index.vue
View File

@ -93,6 +93,29 @@
</el-col>
</el-row>
</el-row>
<el-row v-if="isFilterComponent" style="height: 40px;overflow: hidden;">
<el-col :span="5" style="padding-left: 10px;padding-top: 8px">
输入框样式(颜色):
</el-col>
<el-col :span="2" style="padding-left: 10px;padding-top: 8px">
边框
</el-col>
<el-col :span="3" style="padding-top: 5px">
<el-color-picker v-model="curComponent.style.brColor" size="mini" class="color-picker-style" :predefine="predefineColors" />
</el-col>
<el-col :span="2" style="padding-left: 10px;padding-top: 8px">
文字
</el-col>
<el-col :span="3" style="padding-top: 5px">
<el-color-picker v-model="curComponent.style.wordColor" size="mini" class="color-picker-style" :predefine="predefineColors" />
</el-col>
<el-col :span="2" style="padding-left: 10px;padding-top: 8px">
背景
</el-col>
<el-col :span="3" style="padding-top: 5px">
<el-color-picker v-model="curComponent.style.innerBgColor" size="mini" class="color-picker-style" :predefine="predefineColors" />
</el-col>
</el-row>
</el-row>
<el-row class="root-class">
@ -139,7 +162,10 @@ export default {
...mapState([
'curComponent',
'componentData'
])
]),
isFilterComponent() {
return ['de-select', 'de-select-grid', 'de-date', "de-input-search", "de-number-range", "de-select-tree"].includes(this.curComponent.component)
}
},
methods: {
init() {