forked from github/dataease
feat: 仪表板条件过滤组件增加标题
This commit is contained in:
parent
aa99b45cf5
commit
dfd0f04698
@ -20,7 +20,7 @@
|
||||
"axios": "^0.21.1",
|
||||
"core-js": "^2.6.5",
|
||||
"echarts": "^5.0.1",
|
||||
"element-resize-detector": "^1.2.2",
|
||||
"element-resize-detector": "^1.2.3",
|
||||
"element-ui": "2.13.0",
|
||||
"file-save": "^0.2.0",
|
||||
"file-saver": "^2.0.5",
|
||||
|
@ -5,8 +5,7 @@
|
||||
class="component"
|
||||
@click="handleClick"
|
||||
>
|
||||
<component
|
||||
:is="config.component"
|
||||
<de-out-widget
|
||||
v-if="config.type==='custom'"
|
||||
:id="'component' + config.id"
|
||||
class="component-custom"
|
||||
@ -14,6 +13,7 @@
|
||||
:out-style="config.style"
|
||||
:element="config"
|
||||
/>
|
||||
|
||||
<component
|
||||
:is="config.component"
|
||||
v-else
|
||||
@ -31,8 +31,9 @@ import { getStyle } from '@/components/canvas/utils/style'
|
||||
import runAnimation from '@/components/canvas/utils/runAnimation'
|
||||
import { mixins } from '@/components/canvas/utils/events'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
import DeOutWidget from '@/components/dataease/DeOutWidget'
|
||||
export default {
|
||||
components: { DeOutWidget },
|
||||
mixins: [mixins],
|
||||
props: {
|
||||
config: {
|
||||
|
@ -44,6 +44,27 @@
|
||||
:active="item === curComponent"
|
||||
@input="handleInput"
|
||||
/>
|
||||
<!-- <out-widget
|
||||
:is="item.component"
|
||||
v-else-if="item.type==='custom'"
|
||||
:id="'component' + item.id"
|
||||
class="component"
|
||||
:style="getComponentStyleDefault(item.style)"
|
||||
:prop-value="item.propValue"
|
||||
:element="item"
|
||||
:out-style="getShapeStyleInt(item.style)"
|
||||
:active="item === curComponent"
|
||||
/> -->
|
||||
<de-out-widget
|
||||
v-else-if="item.type==='custom'"
|
||||
:id="'component' + item.id"
|
||||
class="component"
|
||||
:style="getComponentStyleDefault(item.style)"
|
||||
:prop-value="item.propValue"
|
||||
:element="item"
|
||||
:out-style="getShapeStyleInt(item.style)"
|
||||
:active="item === curComponent"
|
||||
/>
|
||||
<component
|
||||
:is="item.component"
|
||||
v-else-if="item.type==='other'"
|
||||
@ -127,9 +148,9 @@ import Grid from './Grid'
|
||||
import { changeStyleWithScale } from '@/components/canvas/utils/translate'
|
||||
import { deepCopy } from '@/components/canvas/utils/utils'
|
||||
import UserViewDialog from '@/components/canvas/custom-component/UserViewDialog'
|
||||
|
||||
import DeOutWidget from '@/components/dataease/DeOutWidget'
|
||||
export default {
|
||||
components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog },
|
||||
components: { Shape, ContextMenu, MarkLine, Area, Grid, DeDrag, UserViewDialog, DeOutWidget },
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
|
@ -26,7 +26,8 @@ const drawPanel = {
|
||||
type: 'custom',
|
||||
style: {
|
||||
width: 300,
|
||||
height: 47,
|
||||
// height: 47,
|
||||
height: 90,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
|
@ -22,7 +22,8 @@ const drawPanel = {
|
||||
type: 'custom',
|
||||
style: {
|
||||
width: 300,
|
||||
height: 45.5,
|
||||
// height: 45.5,
|
||||
height: 90,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
|
@ -27,7 +27,7 @@ const drawPanel = {
|
||||
type: 'custom',
|
||||
style: {
|
||||
width: 300,
|
||||
height: 38,
|
||||
height: 90,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
|
@ -24,7 +24,8 @@ const drawPanel = {
|
||||
type: 'custom',
|
||||
style: {
|
||||
width: 300,
|
||||
height: 47,
|
||||
// height: 47,
|
||||
height: 90,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
|
@ -22,7 +22,8 @@ const drawPanel = {
|
||||
type: 'custom',
|
||||
style: {
|
||||
width: 300,
|
||||
height: 47,
|
||||
// height: 47,
|
||||
height: 90,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
|
@ -22,7 +22,8 @@ const drawPanel = {
|
||||
type: 'custom',
|
||||
style: {
|
||||
width: 300,
|
||||
height: 47,
|
||||
// height: 47,
|
||||
height: 90,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
|
@ -22,7 +22,8 @@ const drawPanel = {
|
||||
type: 'custom',
|
||||
style: {
|
||||
width: 300,
|
||||
height: 47,
|
||||
// height: 47,
|
||||
height: 90,
|
||||
fontSize: 14,
|
||||
fontWeight: 500,
|
||||
lineHeight: '',
|
||||
|
@ -182,6 +182,22 @@
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="16"><div class="filter-options-right">
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="componentInfo.options.attrs.showTitle" @change="showTitleChange">显示标题</el-checkbox>
|
||||
<el-popover
|
||||
v-model="titlePopovervisible"
|
||||
placement="bottom-end"
|
||||
:disabled="!componentInfo.options.attrs.showTitle"
|
||||
width="200"
|
||||
>
|
||||
<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" />
|
||||
</el-popover>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span> {{ $t('panel.custom_scope') }} </span> </el-checkbox>
|
||||
|
||||
<el-popover
|
||||
@ -203,7 +219,7 @@
|
||||
|
||||
<i slot="reference" :class="{'i-filter-active': componentInfo.options.attrs.enableRange, 'i-filter-inactive': !componentInfo.options.attrs.enableRange}" class="el-icon-setting i-filter" />
|
||||
</el-popover>
|
||||
<!-- <el-checkbox disabled>备选项</el-checkbox> -->
|
||||
</el-col>
|
||||
</div>
|
||||
|
||||
</el-col>
|
||||
@ -301,7 +317,8 @@ export default {
|
||||
keyWord: '',
|
||||
timer: null,
|
||||
expandedArray: [],
|
||||
viewKeyWord: ''
|
||||
viewKeyWord: '',
|
||||
titlePopovervisible: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
@ -610,6 +627,12 @@ export default {
|
||||
}
|
||||
// this.componentInfo.options.attrs.enableRange = value
|
||||
this.$emit('re-fresh-component', this.componentInfo)
|
||||
},
|
||||
showTitleChange(value) {
|
||||
if (!value) {
|
||||
this.componentInfo.options.attrs.title = ''
|
||||
}
|
||||
this.$emit('re-fresh-component', this.componentInfo)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user