Unverified 提交 9fd8b7f1 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw 提交者: GitHub

Merge pull request #1527 from dataease/pr@dev@style_panel_filter

style: 过滤组件样式
...@@ -10,10 +10,18 @@ ...@@ -10,10 +10,18 @@
</div> </div>
</div> </div>
</div> </div>
<div ref="deContentContainer" class="condition-content" :class="element.options.attrs.title ? '' : 'condition-content-default'"> <div
ref="deContentContainer"
class="condition-content"
:class="element.options.attrs.title ? '' : 'condition-content-default'"
>
<div class="condition-content-container"> <div class="condition-content-container">
<div class="first-element"> <div class="first-element">
<div :class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''" class="first-element-contaner"> <div
:class="element.component === 'de-select-grid' ? 'first-element-grid-contaner': ''"
class="first-element-contaner"
>
<component <component
:is="element.component" :is="element.component"
v-if="element.type==='custom'" v-if="element.type==='custom'"
...@@ -27,6 +35,7 @@ ...@@ -27,6 +35,7 @@
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
...@@ -71,6 +80,7 @@ export default { ...@@ -71,6 +80,7 @@ export default {
sizeInfo() { sizeInfo() {
let size let size
if (this.h > this.inputMaxSize) { if (this.h > this.inputMaxSize) {
return size
} else if (this.h > this.inputLargeSize) { } else if (this.h > this.inputLargeSize) {
size = 'medium' size = 'medium'
} else if (this.h > this.inputSmallSize) { } else if (this.h > this.inputSmallSize) {
...@@ -99,14 +109,12 @@ export default { ...@@ -99,14 +109,12 @@ export default {
const titleWidth = this.$refs.deTitle.offsetWidth const titleWidth = this.$refs.deTitle.offsetWidth
const deContentContainer = this.$refs.deContentContainer const deContentContainer = this.$refs.deContentContainer
this.$nextTick(() => { this.$nextTick(() => {
let min = 75 let min = this.element.style.fontSize * 2 + 50
if (this.element.component === 'de-number-range') { if (this.element.component === 'de-number-range') {
min = 105 min = this.element.style.fontSize * 2 + 80
} }
if (height < min) { if (height < min) {
// console.log(titleWidth)
this.mainClass = 'condition-main-line' this.mainClass = 'condition-main-line'
/* deContentContainer && (deContentContainer.style.inset = '0 0 0 ' + (titleWidth + 15) + 'px') */
if (deContentContainer) { if (deContentContainer) {
deContentContainer.style.top = '0px' deContentContainer.style.top = '0px'
...@@ -114,9 +122,8 @@ export default { ...@@ -114,9 +122,8 @@ export default {
} }
} else { } else {
this.mainClass = '' this.mainClass = ''
/* deContentContainer && (deContentContainer.style.inset = '33px 0px 0px') */
if (deContentContainer) { if (deContentContainer) {
deContentContainer.style.top = '33px' deContentContainer.style.top = '2em'
deContentContainer.style.marginLeft = '0px' deContentContainer.style.marginLeft = '0px'
} }
} }
...@@ -125,37 +132,38 @@ export default { ...@@ -125,37 +132,38 @@ export default {
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.my-container { .my-container {
position: absolute; position: absolute;
overflow: auto; overflow: auto;
/* inset: 0px; */ top: 0px;
top:0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
} }
.ccondition-main { .ccondition-main {
position: absolute; position: absolute;
overflow: auto; overflow: auto;
/* inset: 0px; */ top: 0px;
top:0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
} }
.condition-title { .condition-title {
/* inset: 0; */ top: 0px;
top:0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
position: absolute; position: absolute;
height: 35px; height: 2em;
cursor: -webkit-grab; cursor: -webkit-grab;
} }
.first-title { .first-title {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
...@@ -166,12 +174,13 @@ export default { ...@@ -166,12 +174,13 @@ export default {
} }
.condition-title-absolute { .condition-title-absolute {
/* inset: 0px 0px; */
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
position: absolute; position: absolute;
top: 15px; top: 0px;
left: 4px; left: 4px;
display: flex;
align-items: flex-end;
} }
.span-container { .span-container {
...@@ -182,14 +191,14 @@ export default { ...@@ -182,14 +191,14 @@ export default {
.condition-content { .condition-content {
overflow: auto hidden; overflow: auto hidden;
/* inset: 33px 0px 0px; */ top: 2em;
top: 33px;
left: 0px; left: 0px;
right: 0px; right: 0px;
bottom: 0px; bottom: 0px;
position: absolute; position: absolute;
letter-spacing: 0px!important; letter-spacing: 0px !important;
} }
.condition-content-container { .condition-content-container {
position: relative; position: relative;
display: table; display: table;
...@@ -197,6 +206,7 @@ export default { ...@@ -197,6 +206,7 @@ export default {
height: 100%; height: 100%;
white-space: nowrap; white-space: nowrap;
} }
.first-element { .first-element {
position: relative; position: relative;
display: table-cell; display: table-cell;
...@@ -205,25 +215,34 @@ export default { ...@@ -205,25 +215,34 @@ export default {
padding: 0px; padding: 0px;
height: 100%; height: 100%;
} }
.first-element-contaner { .first-element-contaner {
width: calc(100% - 10px); width: calc(100% - 10px);
background: initial; background: initial;
position:absolute; position: absolute;
bottom: 5px; bottom: 5px;
margin: 0 4px; margin: 0 4px;
div { div {
width: 100%; width: 100%;
} }
display: flex;
align-items: flex-end;
} }
.first-element-grid-contaner { .first-element-grid-contaner {
background: #fff; background: #fff;
border: 1px solid #d7dae2; border: 1px solid #d7dae2;
top: 5px; top: 5px;
} }
.condition-main-line { .condition-main-line {
height: 40px !important; height: 40px !important;
} }
.condition-content-default { .condition-content-default {
inset: 0px 0px 0px !important; inset: 0px 0px 0px !important;
} }
</style> </style>
...@@ -19,9 +19,13 @@ ...@@ -19,9 +19,13 @@
</template> </template>
<script> <script>
import { ApplicationContext } from '@/utils/ApplicationContext' import {
import { timeSection } from '@/utils' ApplicationContext
import bus from "@/utils/bus"; } from '@/utils/ApplicationContext'
import {
timeSection
} from '@/utils'
import bus from '@/utils/bus'
export default { export default {
props: { props: {
...@@ -92,7 +96,8 @@ export default { ...@@ -92,7 +96,8 @@ export default {
} }
}, },
created() { created() {
if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default && this.element.options.attrs.default.isDynamic) { if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default && this.element.options
.attrs.default.isDynamic) {
if (this.element.options.attrs.default) { if (this.element.options.attrs.default) {
const widget = ApplicationContext.getService(this.element.serviceName) const widget = ApplicationContext.getService(this.element.serviceName)
this.values = widget.dynamicDateFormNow(this.element) this.values = widget.dynamicDateFormNow(this.element)
...@@ -172,15 +177,16 @@ export default { ...@@ -172,15 +177,16 @@ export default {
fillValueDerfault() { fillValueDerfault() {
const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString() const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
if (this.element.options.attrs.type === 'daterange') { if (this.element.options.attrs.type === 'daterange') {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return [] if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return [] }
return defaultV.split(',').map(item => parseFloat(item)) return defaultV.split(',').map(item => parseFloat(item))
} else { } else {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return null }
return parseFloat(defaultV.split(',')[0]) return parseFloat(defaultV.split(',')[0])
} }
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
......
...@@ -2,12 +2,19 @@ ...@@ -2,12 +2,19 @@
<div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class"> <div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class">
<div class="de-select-grid-search"> <div class="de-select-grid-search">
<el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" :size="size" prefix-icon="el-icon-search" clearable /> <el-input
v-model="keyWord"
:placeholder="$t('deinputsearch.placeholder')"
:size="size"
prefix-icon="el-icon-search"
clearable
/>
</div> </div>
<div class="list"> <div class="list">
<div v-if="element.options.attrs.multiple" class="checkbox-group-container"> <div v-if="element.options.attrs.multiple" class="checkbox-group-container">
<el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('commons.all') }}</el-checkbox> <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">
{{ $t('commons.all') }}</el-checkbox>
<el-checkbox-group v-model="value" @change="handleCheckedChange"> <el-checkbox-group v-model="value" @change="handleCheckedChange">
<el-checkbox v-for="item in datas" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox> <el-checkbox v-for="item in datas" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox>
...@@ -27,7 +34,9 @@ ...@@ -27,7 +34,9 @@
</template> </template>
<script> <script>
import { multFieldValues } from '@/api/dataset/dataset' import {
multFieldValues
} from '@/api/dataset/dataset'
export default { export default {
props: { props: {
...@@ -167,10 +176,10 @@ export default { ...@@ -167,10 +176,10 @@ export default {
fillValueDerfault() { fillValueDerfault() {
const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString() const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
if (this.element.options.attrs.multiple) { if (this.element.options.attrs.multiple) {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return [] if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return [] }
return defaultV.split(',') return defaultV.split(',')
} else { } else {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') return null if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return null }
return defaultV.split(',')[0] return defaultV.split(',')[0]
} }
}, },
...@@ -204,42 +213,49 @@ export default { ...@@ -204,42 +213,49 @@ export default {
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.de-select-grid-search {
.de-select-grid-search {
>>>input { >>>input {
border-radius: 0px; border-radius: 0px;
} }
}
.de-select-grid-class { .el-input {
display: block !important;
}
}
.de-select-grid-class {
height: 100%;
.list { .list {
overflow-y: auto; overflow-y: auto;
width: 100%; width: 100%;
position: absolute; position: relative;
top: 30px;
bottom: 0; bottom: 0;
text-align: left; height: calc(100% - 40px);
}
} }
}
.radio-group-container > .el-radio-group > label { .radio-group-container>.el-radio-group>label {
display: block !important; display: block !important;
margin: 10px !important; margin: 10px !important;
} }
.checkbox-group-container{ .checkbox-group-container {
label.el-checkbox { label.el-checkbox {
display: block !important; display: block !important;
margin: 10px !important; margin: 10px !important;
} }
.el-checkbox-group > label { .el-checkbox-group>label {
display: block !important; display: block !important;
margin: 10px !important; margin: 10px !important;
} }
} }
</style> </style>
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论