Skip to content

D
dataease
提交 c48e2ef9 authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw
浏览文件
操作

fix: 条件组件弹框样式

上级 b44f152c
隐藏空白字符变更
内嵌 并排
正在显示 包含 264 行增加 和 164 行删除
frontend/src/styles/index.scss
浏览文件 @ c48e2ef9
...@@ -744,6 +744,12 @@ div:focus { ...@@ -744,6 +744,12 @@ div:focus {
border: 1px solid #999999!important; border: 1px solid #999999!important;
margin: 0 0 6px 6px!important; margin: 0 0 6px 6px!important;
} }
.de-checkbox {
width: 100%;
margin-left: 0px !important;
.el-checkbox__input {
padding: 0 0 8px 0 !important;
}
}
frontend/src/views/panel/filter/filterDialog.vue
浏览文件 @ c48e2ef9
...@@ -7,7 +7,8 @@ ...@@ -7,7 +7,8 @@
<div class="component-header filter-common"> <div class="component-header filter-common">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label"> <el-breadcrumb-item v-for="bread in dataSetBreads" :key="bread.label">
<a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)"> {{ bread.label }}</a> <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="backToLink(bread)">
{{ bread.label }}</a>
<span v-else>{{ bread.label }}</span> <span v-else>{{ bread.label }}</span>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
...@@ -66,7 +67,12 @@ ...@@ -66,7 +67,12 @@
@start="start1" @start="start1"
> >
<transition-group> <transition-group>
<div v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row"> <div
v-for="item in fieldDatas.filter(item => !keyWord || (item.name && item.name.toLocaleLowerCase().includes(keyWord)))"
:key="item.id"
:class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
class="filter-db-row"
>
<i class="el-icon-s-data" /> <i class="el-icon-s-data" />
<span> {{ item.name }}</span> <span> {{ item.name }}</span>
</div> </div>
...@@ -81,7 +87,8 @@ ...@@ -81,7 +87,8 @@
<div class="component-header filter-common"> <div class="component-header filter-common">
<el-breadcrumb separator-class="el-icon-arrow-right"> <el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item v-for="bread in componentSetBreads" :key="bread.label"> <el-breadcrumb-item v-for="bread in componentSetBreads" :key="bread.label">
<a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)"> {{ bread.label }}</a> <a v-if="bread.link" :class="{'link-text' : bread.link}" @click="comBackLink(bread)">
{{ bread.label }}</a>
<span v-else>{{ bread.label }}</span> <span v-else>{{ bread.label }}</span>
</el-breadcrumb-item> </el-breadcrumb-item>
</el-breadcrumb> </el-breadcrumb>
...@@ -135,7 +142,12 @@ ...@@ -135,7 +142,12 @@
@start="start1" @start="start1"
> >
<transition-group> <transition-group>
<div v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))" :key="item.id" :class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'" class="filter-db-row"> <div
v-for="item in comFieldDatas.filter(item => !viewKeyWord || item.name.toLocaleLowerCase().includes(viewKeyWord))"
:key="item.id"
:class="componentInfo && componentInfo.options.attrs.fieldId === item.id ? 'filter-db-row-checked' : 'filter-db-row'"
class="filter-db-row"
>
<i class="el-icon-s-data" /> <i class="el-icon-s-data" />
<span> {{ item.name }}</span> <span> {{ item.name }}</span>
</div> </div>
...@@ -171,7 +183,13 @@ ...@@ -171,7 +183,13 @@
@end="end2" @end="end2"
> >
<transition-group class="list-group" :data-value="$t('panel.drag_here')"> <transition-group class="list-group" :data-value="$t('panel.drag_here')">
<drag-item v-for="(item,index) in selectField" :key="item.id" :item="item" :index="index" @closeItem="closeItem" /> <drag-item
v-for="(item,index) in selectField"
:key="item.id"
:item="item"
:index="index"
@closeItem="closeItem"
/>
</transition-group> </transition-group>
</draggable> </draggable>
</el-row> </el-row>
...@@ -192,46 +210,72 @@ ...@@ -192,46 +210,72 @@
/> />
</div> </div>
</el-col> </el-col>
<el-col :span="16"><div class="filter-options-right"> <el-col :span="16">
<span style="padding-right: 10px;"> <div class="filter-options-right">
<el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题</el-checkbox> <span style="padding-right: 10px;">
<el-popover <el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题
v-model="titlePopovervisible" </el-checkbox>
placement="bottom-end" <el-popover
:disabled="!componentInfo.options.attrs.showTitle" v-model="titlePopovervisible"
width="200" placement="bottom-end"
> :disabled="!componentInfo.options.attrs.showTitle"
<div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;"> width="200"
<el-input v-model="componentInfo.options.attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit /> >
</div> <div
style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;"
>
<el-input
v-model="componentInfo.options.attrs.title"
placeholder="请输入标题"
type="textarea"
maxlength="15"
show-word-limit
/>
</div>
<i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}" class="el-icon-setting i-filter" /> <i
</el-popover> slot="reference"
</span> :class="{'i-filter-active': componentInfo.options.attrs.showTitle, 'i-filter-inactive': !componentInfo.options.attrs.showTitle}"
<span style="padding-left: 10px;"> class="el-icon-setting i-filter"
<el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span> {{ $t('panel.custom_scope') }} </span> </el-checkbox> />
</el-popover>
<el-popover </span>
v-model="popovervisible" <span style="padding-left: 10px;">
placement="bottom-end" <el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>
:disabled="!componentInfo.options.attrs.enableRange" {{ $t('panel.custom_scope') }} </span> </el-checkbox>
width="200"
> <el-popover
<div class="view-container-class"> v-model="popovervisible"
<el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange"> placement="bottom-end"
<el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id"> :disabled="!componentInfo.options.attrs.enableRange"
<span> width="200"
<svg-icon :icon-class="item.type" class="chart-icon" /> >
<span style="margin-left: 6px">{{ item.name }}</span> <div class="view-container-class">
</span> <el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
</el-checkbox> <el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" class="de-checkbox">
</el-checkbox-group> <div class="span-div">
</div> <svg-icon :icon-class="item.type" class="chart-icon" />
<span
v-if="item.name && item.name.length <= 7"
style="margin-left: 6px"
>{{ item.name }}</span>
<el-tooltip v-else class="item" effect="dark" :content="item.name" placement="left">
<span style="margin-left: 6px">{{ item.name }}</span>
</el-tooltip>
</div>
</el-checkbox>
</el-checkbox-group>
</div>
<i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" /> <i
</el-popover> slot="reference"
</span> :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}"
</div> class="el-icon-setting i-filter"
/>
</el-popover>
</span>
</div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -261,11 +305,22 @@ import DeContainer from '@/components/dataease/DeContainer' ...@@ -261,11 +305,22 @@ import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer' import DeAsideContainer from '@/components/dataease/DeAsideContainer'
import draggable from 'vuedraggable' import draggable from 'vuedraggable'
import DragItem from '@/components/DragItem' import DragItem from '@/components/DragItem'
import { mapState } from 'vuex' import {
// import { ApplicationContext } from '@/utils/ApplicationContext' mapState
import { groupTree, fieldList, fieldValues, post } from '@/api/dataset/dataset' } from 'vuex'
import { viewsWithIds } from '@/api/panel/view' // import { ApplicationContext } from '@/utils/ApplicationContext'
import { authModel } from '@/api/system/sysAuth' import {
groupTree,
fieldList,
fieldValues,
post
} from '@/api/dataset/dataset'
import {
viewsWithIds
} from '@/api/panel/view'
import {
authModel
} from '@/api/system/sysAuth'
export default { export default {
name: 'FilterDialog', name: 'FilterDialog',
components: { components: {
...@@ -292,12 +347,16 @@ export default { ...@@ -292,12 +347,16 @@ export default {
activeName: 'dataset', activeName: 'dataset',
showDomType: 'tree', showDomType: 'tree',
comShowDomType: 'view', comShowDomType: 'view',
dataSetBreads: [ dataSetBreads: [{
{ label: this.$t('panel.data_list'), link: false, type: 'root' } label: this.$t('panel.data_list'),
], link: false,
componentSetBreads: [ type: 'root'
{ label: this.$t('panel.component_list'), link: false, type: 'root' } }],
], componentSetBreads: [{
label: this.$t('panel.component_list'),
link: false,
type: 'root'
}],
datas: [], datas: [],
sceneDatas: [], sceneDatas: [],
// viewDatas: [], // viewDatas: [],
...@@ -441,7 +500,8 @@ export default { ...@@ -441,7 +500,8 @@ export default {
// 判断根节点 ### // 判断根节点 ###
el.type = el.modelInnerType el.type = el.modelInnerType
el.isLeaf = el.leaf el.isLeaf = el.leaf
if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this.defaultProps.parentId] === '0') { if (el[this.defaultProps.parentId] === null || el[this.defaultProps.parentId] === 0 || el[this
.defaultProps.parentId] === '0') {
roots.push(el) roots.push(el)
return return
} }
...@@ -512,11 +572,19 @@ export default { ...@@ -512,11 +572,19 @@ export default {
tail.link = true tail.link = true
}, },
addTail(node) { addTail(node) {
const tail = { link: false, label: node.label || node.name, type: node.type } const tail = {
link: false,
label: node.label || node.name,
type: node.type
}
this.dataSetBreads.push(tail) this.dataSetBreads.push(tail)
}, },
comAddTail(node) { comAddTail(node) {
const tail = { link: false, label: node.label || node.name, type: node.type } const tail = {
link: false,
label: node.label || node.name,
type: node.type
}
this.componentSetBreads.push(tail) this.componentSetBreads.push(tail)
}, },
...@@ -529,19 +597,19 @@ export default { ...@@ -529,19 +597,19 @@ export default {
return return
} }
} }
// this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1) // this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
// this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false // this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
}, },
comRemoveTail() { comRemoveTail() {
this.componentSetBreads = this.componentSetBreads.slice(0, this.componentSetBreads.length - 1) this.componentSetBreads = this.componentSetBreads.slice(0, this.componentSetBreads.length - 1)
this.componentSetBreads[this.componentSetBreads.length - 1]['link'] = false this.componentSetBreads[this.componentSetBreads.length - 1]['link'] = false
}, },
backToLink(bread) { backToLink(bread) {
// if (bread.type === 'field') { // if (bread.type === 'field') {
// this.showDomType = 'db' // this.showDomType = 'db'
// } else { // } else {
// this.showDomType = 'tree' // this.showDomType = 'tree'
// } // }
this.showDomType = 'tree' this.showDomType = 'tree'
this.removeTail(bread) this.removeTail(bread)
...@@ -645,7 +713,7 @@ export default { ...@@ -645,7 +713,7 @@ export default {
multipleChange(value) { multipleChange(value) {
// this.componentInfo.options.attrs.multiple = value // this.componentInfo.options.attrs.multiple = value
// this.componentInfo.options.value = null // this.componentInfo.options.value = null
this.$emit('re-fresh-component', this.componentInfo) this.$emit('re-fresh-component', this.componentInfo)
}, },
...@@ -668,16 +736,19 @@ export default { ...@@ -668,16 +736,19 @@ export default {
} }
} }
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.my-form-item { .my-form-item {
cursor: text; cursor: text;
} }
.de-dialog-container { .de-dialog-container {
height: 50vh !important; height: 50vh !important;
} }
.ms-aside-container { .ms-aside-container {
width: 40% !important; width: 40% !important;
min-width: 230px !important; min-width: 230px !important;
...@@ -697,179 +768,202 @@ export default { ...@@ -697,179 +768,202 @@ export default {
.filter-field { .filter-field {
// background: #99a9bf; // background: #99a9bf;
border-radius: 4px; border-radius: 4px;
height: 45px; height: 45px;
.field-content {
.field-content {
position: relative;
display: table;
width: 100%;
height: 100%;
white-space: nowrap;
.field-content-left {
width: 50px;
max-width: 50px;
position: relative; position: relative;
display: table; display: table-cell;
width: 100%; vertical-align: middle;
margin: 0px;
padding: 8px;
height: 100%; height: 100%;
white-space: nowrap; border-right: none;
border: 1px solid var(--TableBorderColor, #E6E6E6);
.field-content-left { ;
width: 50px;
max-width: 50px; .field-content-text {
position: relative; box-sizing: border-box;
display: table-cell; overflow: hidden;
vertical-align: middle; overflow-x: hidden;
margin: 0px; overflow-y: hidden;
padding: 8px; word-break: break-all;
height: 100%;
border-right: none;
border: 1px solid var(--TableBorderColor, #E6E6E6);;
.field-content-text {
box-sizing: border-box;
overflow: hidden;
overflow-x: hidden;
overflow-y: hidden;
word-break: break-all;
}
}
.field-content-right {
border-left: none;
color: #9ea6b2;
border: 1px solid var(--TableBorderColor, #E6E6E6);
width: 0%;
max-width: 0%;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 0 0 0 0;
height: 100%;
} }
}
.field-content-right {
border-left: none;
color: #9ea6b2;
border: 1px solid var(--TableBorderColor, #E6E6E6);
width: 0%;
max-width: 0%;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 0 0 0 0;
height: 100%;
}
} }
} }
.filter-options-left { .filter-options-left {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 50px; height: 50px;
} }
.filter-options-right { .filter-options-right {
align-items: center; align-items: center;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-end; justify-content: flex-end;
flex-wrap: nowrap; flex-wrap: nowrap;
height: 50px; height: 50px;
} }
.filter-content { .filter-content {
height: calc(50vh - 120px); height: calc(50vh - 120px);
top: 160px; top: 160px;
} }
.filter-dialog-tabs { .filter-dialog-tabs {
border: 1px solid var(--TableBorderColor, #E6E6E6); border: 1px solid var(--TableBorderColor, #E6E6E6);
padding: 10px; padding: 10px;
height: 100%; height: 100%;
>>> div.el-tabs__content {
height: calc(100% - 55px); >>>div.el-tabs__content {
} height: calc(100% - 55px);
}
} }
.filter-common { .filter-common {
margin: 10px 5px; margin: 10px 5px;
} }
.component-header { .component-header {
margin: 5px 5px 15px; margin: 5px 5px 15px;
} }
.component-result-content { .component-result-content {
height: calc(50vh - 150px); height: calc(50vh - 150px);
overflow-y: auto; overflow-y: auto;
} }
.link-text { .link-text {
font-weight: 450 !important; font-weight: 450 !important;
color: #409EFF; color: #409EFF;
} }
.filter-db-row { .filter-db-row {
i { i {
color: #3685f2; color: #3685f2;
} }
// background-color: #3685f2; // background-color: #3685f2;
// color: #fff; // color: #fff;
} }
.filter-db-row:hover { .filter-db-row:hover {
background-color: var(--background-color-base, #f5f7fa) !important; background-color: var(--background-color-base, #f5f7fa) !important;
cursor: pointer; cursor: pointer;
} }
.filter-db-row-checked:hover { .filter-db-row-checked:hover {
background-color: var(--background-color-base, #f5f7fa) !important; background-color: var(--background-color-base, #f5f7fa) !important;
color: inherit; color: inherit;
cursor: pointer; cursor: pointer;
i {
background-color: inherit; i {
color: #3685f2; background-color: inherit;
} color: #3685f2;
}
} }
.filter-db-row-checked { .filter-db-row-checked {
background-color: #3685f2 !important; background-color: #3685f2 !important;
color: #fff; color: #fff;
i { i {
background-color: #3685f2; background-color: #3685f2;
color: #fff; color: #fff;
} }
} }
.draggable-group { .draggable-group {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: calc(100% - 6px); height: calc(100% - 6px);
} }
.box-card { .box-card {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.i-filter { .i-filter {
text-align: center; text-align: center;
margin-left: 5px; margin-left: 5px;
margin-top: 1px; margin-top: 1px;
} }
.i-filter-inactive { .i-filter-inactive {
color: #9ea6b2!important; color: #9ea6b2 !important;
cursor: not-allowed!important; cursor: not-allowed !important;
} }
.i-filter-active { .i-filter-active {
cursor: pointer!important; cursor: pointer !important;
} }
.view-container-class { .view-container-class {
min-height: 150px; min-height: 150px;
max-height: 200px; max-height: 200px;
width: 100%; width: 100%;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
word-break:break-all; word-break: break-all;
position: relative; position: relative;
>>> label {
width: 100%;
margin-left: 0px !important;
}
} }
.list-group:empty, .list-group:empty,
.list-group > div:empty { .list-group>div:empty {
display: inline-block; display: inline-block;
width: 100%; width: 100%;
height: calc(100% - 13px); height: calc(100% - 13px);
} }
.list-group:empty:before, .list-group:empty:before,
.list-group > div:empty:before { .list-group>div:empty:before {
content: attr(data-value); content: attr(data-value);
} }
.blackTheme .theme-drag { .blackTheme .theme-drag {
background-color: var(--MainBG, #fff); background-color: var(--MainBG, #fff);
}
.span-div {
width: 135px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
} }
</style> </style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论