dongjunchuan/de
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #1454 from dataease/pr@dev@refactor_filter_default_value

Browse Source 
feat: 新增时间控件动态默认值
This commit is contained in:
fit2cloud-chenyw 2021-12-16 18:20:15 +08:00 committed by GitHub
commit b3caf75aab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
25 changed files with 1248 additions and 819 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
View File

@ -12,6 +12,7 @@ import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
import java.util.List;
import java.util.stream.Collectors;
/**
* @Author gin
@ -75,4 +76,11 @@ public class DataSetTableFieldController {
public List<Object> fieldValues(@PathVariable String fieldId) {
return dataSetFieldService.fieldValues(fieldId);
}
@ApiOperation("多字段值枚举")
@PostMapping("multFieldValues")
public List<Object> multFieldValues(@RequestBody List<String> fieldIds) {
List<Object> results = fieldIds.stream().map(fieldId -> dataSetFieldService.fieldValues(fieldId)).flatMap(list -> list.stream()).distinct().collect(Collectors.toList());
return results;
}
}

9
frontend/src/api/dataset/dataset.js
View File

@ -138,6 +138,15 @@ export function fieldValues(fieldId) {
})
}
export function multFieldValues(data) {
return request({
url: '/dataset/field/multFieldValues',
method: 'post',
loading: true,
data
})
}
export function isKettleRunning(showLoading = true) {
return request({
url: '/dataset/group/isKettleRunning',

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

@ -40,7 +40,7 @@ export default {
props: {
element: {
type: Object,
default: null
default: () => {}
},
inDraw: {
type: Boolean,

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

@ -1,13 +1,13 @@
<template>
<el-date-picker
v-if="options!== null && options.attrs!==null"
v-if="element.options!== null && element.options.attrs!==null"
ref="dateRef"
v-model="values"
:type="options.attrs.type"
:range-separator="$t(options.attrs.rangeSeparator)"
:start-placeholder="$t(options.attrs.startPlaceholder)"
:end-placeholder="$t(options.attrs.endPlaceholder)"
:placeholder="$t(options.attrs.placeholder)"
:type="element.options.attrs.type"
:range-separator="$t(element.options.attrs.rangeSeparator)"
:start-placeholder="$t(element.options.attrs.startPlaceholder)"
:end-placeholder="$t(element.options.attrs.endPlaceholder)"
:placeholder="$t(element.options.attrs.placeholder)"
:append-to-body="inScreen"
value-format="timestamp"
:size="size"
@ -17,6 +17,7 @@
</template>
<script>
import { ApplicationContext } from '@/utils/ApplicationContext'
import { timeSection } from '@/utils'
export default {
@ -38,20 +39,53 @@ export default {
},
data() {
return {
options: null,
operator: 'between',
values: null
}
},
created() {
this.options = this.element.options
if (this.options.value) {
if (this.options.attrs.type !== 'daterange') {
this.values = Array.isArray(this.options.value) ? this.options.value[0] : this.options.value
} else {
this.values = this.options.value
computed: {
defaultoptions() {
if (!this.element || !this.element.options || !this.element.options.attrs.default) return ''
return JSON.stringify(this.element.options.attrs.default)
}
},
watch: {
'element.options.value': function(value, old) {
if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
// 如果设置了动态时间 不做任何操作
return
}
if (value === old) return
this.values = this.fillValueDerfault()
this.dateChange(value)
},
'defaultoptions': function(val, old) {
// console.log('default chaneg')
if (this.element.serviceName !== 'timeDateWidget') {
if (!this.element.options.attrs.default.isDynamic) {
this.values = this.fillValueDerfault()
this.dateChange(this.values)
return
}
}
if (val === old) return
const widget = ApplicationContext.getService(this.element.serviceName)
this.values = widget.dynamicDateFormNow(this.element)
this.dateChange(this.values)
}
},
created() {
if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
if (this.element.options.attrs.default) {
const widget = ApplicationContext.getService(this.element.serviceName)
this.values = widget.dynamicDateFormNow(this.element)
this.dateChange(this.values)
}
return
}
if (this.element.options.value) {
this.values = this.fillValueDerfault()
this.dateChange(this.values)
}
},
methods: {
@ -59,32 +93,35 @@ export default {
this.setCondition()
},
setCondition() {
if (this.values) {
if (this.options.attrs.type !== 'daterange') {
this.options.value = Array.isArray(this.values) ? this.values[0] : this.values
} else {
this.options.value = this.values
}
} else {
this.options.value = []
}
const param = {
component: this.element,
value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
value: this.formatFilterValue(),
operator: this.operator
}
param.value = this.formatValues(param.value)
this.inDraw && this.$store.commit('addViewFilter', param)
},
dateChange(value) {
if (!this.inDraw) {
if (value === null) {
this.element.options.value = ''
} else {
this.element.options.value = Array.isArray(value) ? value.join() : value.toString()
}
}
this.setCondition()
this.styleChange()
},
formatFilterValue() {
if (this.values === null) return []
if (Array.isArray(this.values)) return this.values
return [this.values]
},
formatValues(values) {
if (!values || values.length === 0) {
return []
}
if (this.options.attrs.type === 'daterange') {
if (this.element.options.attrs.type === 'daterange') {
if (values.length !== 2) {
return null
}
@ -96,11 +133,21 @@ export default {
return results
} else {
const value = values[0]
return timeSection(value, this.options.attrs.type)
return timeSection(parseFloat(value), this.element.options.attrs.type)
}
},
styleChange() {
this.$store.commit('recordStyleChange')
},
fillValueDerfault() {
const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
if (this.element.options.attrs.type === 'daterange') {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
return defaultV.split(',').map(item => parseFloat(item))
} else {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
return parseFloat(defaultV.split(',')[0])
}
}
}
}

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

@ -1,10 +1,11 @@
<template>
<el-input
v-if="options!== null && options.attrs!==null"
v-if="element.options!== null && element.options.attrs!==null"
v-model="value"
resize="vertical"
:placeholder="$t(options.attrs.placeholder)"
:placeholder="$t(element.options.attrs.placeholder)"
@input="valueChange"
@keypress.enter.native="search"
@dblclick="setEdit"
:size="size"
@ -31,38 +32,46 @@ export default {
},
data() {
return {
options: null,
operator: 'like',
value: null,
canEdit: false
}
},
watch: {
'element.options.value': function(value, old) {
if (value === old) return
this.value = value
this.search()
}
},
created() {
this.options = this.element.options
if (this.inDraw && this.options.value && this.options.value.length > 0) {
this.value = this.options.value[0]
if (this.element.options.value) {
this.value = this.element.options.value
this.search()
}
},
methods: {
search() {
// this.options.value && this.setCondition()
this.options.value = []
if (this.inDraw && this.value) {
this.options.value = [this.value]
if (!this.inDraw) {
this.element.options.value = this.value
}
this.setCondition()
},
setCondition() {
const param = {
component: this.element,
value: !this.options.value ? [] : Array.isArray(this.options.value) ? this.options.value : [this.options.value],
value: !this.value ? [] : [this.value],
operator: this.operator
}
this.inDraw && this.$store.commit('addViewFilter', param)
},
setEdit() {
this.canEdit = true
},
valueChange(val) {
if (!this.inDraw) {
this.element.options.value = val
}
}
}
}

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

@ -1,13 +1,13 @@
<template>
<el-form v-if="options!== null && options.attrs!==null" ref="form" style="max-height:34px" :model="form" :rules="rules">
<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(options.attrs.placeholder_min)" :size="size" @change="handleMinChange" />
<el-input v-model="form.min" :placeholder="$t(element.options.attrs.placeholder_min)" @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(options.attrs.placeholder_max)" :size="size" @change="handleMaxChange" />
<el-input v-model="form.max" :placeholder="$t(element.options.attrs.placeholder_max)" @input="inputChange" @change="handleMaxChange" />
</el-form-item>
</div>
</el-form>
@ -27,13 +27,11 @@ export default {
inDraw: {
type: Boolean,
default: true
},
size: String
}
},
data() {
return {
options: null,
operator: 'between',
values: null,
canEdit: false,
@ -55,7 +53,24 @@ export default {
timeMachine: null
}
},
computed: {
defaultvalues() {
if (!this.element.options.value) {
return JSON.stringify([])
}
return JSON.stringify(this.element.options.value)
}
},
watch: {
'defaultvalues': function(value, old) {
if (value === old) return
const values = this.element.options.value
this.form.min = values[0]
if (values.length > 1) {
this.form.max = values[1]
}
this.search()
},
form: {
handler(value) {
this.destryTimeMachine()
@ -66,12 +81,13 @@ export default {
}
},
created() {
this.options = this.element.options
if (this.inDraw && this.options.value && this.options.value.length > 0) {
this.form.min = this.options.value[0]
if (this.options.value.length > 1) {
this.form.max = this.options.value[1]
if (this.element.options.value && this.element.options.value.length > 0) {
const values = this.element.options.value
this.form.min = values[0]
if (values.length > 1) {
this.form.max = values[1]
}
this.search()
}
},
methods: {
@ -137,13 +153,15 @@ export default {
},
search() {
this.$refs.form.validate(valid => {
if (!valid) {
return false
}
this.$nextTick(() => {
this.$refs.form.validate(valid => {
if (!valid) {
return false
}
this.setCondition()
this.$store.commit('recordStyleChange')
this.setCondition()
this.$store.commit('recordStyleChange')
})
})
},
setCondition() {
@ -154,7 +172,6 @@ export default {
operator: this.operator
}
this.inDraw && (this.options.value = param.value)
if (this.form.min && this.form.max) {
this.inDraw && this.$store.commit('addViewFilter', param)
return
@ -179,6 +196,13 @@ export default {
},
styleChange() {
this.$store.commit('recordStyleChange')
},
inputChange(val) {
if (!this.inDraw) {
const values = [this.form.min, this.form.max]
this.element.options.value = values
}
}
}
}
@ -187,7 +211,6 @@ export default {
<style lang="scss" scoped>
.de-number-range-container {
display: inline;
max-height: 40px;
>>>div.el-form-item {
width: calc(50% - 10px) !important;
display: inline-block;

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

@ -1,39 +1,39 @@
<template>
<el-select
v-if="options!== null && options.attrs!==null"
v-if="element.options!== null && element.options.attrs!==null && show"
ref="deSelect"
v-model="options.value"
v-model="value"
:collapse-tags="showNumber"
:clearable="!options.attrs.multiple"
:multiple="options.attrs.multiple"
:placeholder="$t(options.attrs.placeholder)"
:clearable="!element.options.attrs.multiple"
:multiple="element.options.attrs.multiple"
:placeholder="$t(element.options.attrs.placeholder)"
:popper-append-to-body="inScreen"
:size="size"
@change="changeValue"
@focus="setOptionWidth"
>
<el-option
v-for="item in options.attrs.datas"
:key="item[options.attrs.key]"
v-for="item in datas"
:key="item[element.options.attrs.key]"
:style="{width:selectOptionWidth}"
:label="item[options.attrs.label]"
:value="item[options.attrs.value]"
:label="item[element.options.attrs.label]"
:value="item[element.options.attrs.value]"
>
<span :title="item[options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[options.attrs.label] }}</span>
<span :title="item[element.options.attrs.label]" style="display:inline-block;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;">{{ item[element.options.attrs.label] }}</span>
</el-option>
</el-select>
</template>
<script>
import { fieldValues } from '@/api/dataset/dataset'
import { multFieldValues } from '@/api/dataset/dataset'
export default {
props: {
element: {
type: Object,
default: null
default: () => {}
},
inDraw: {
type: Boolean,
@ -48,54 +48,80 @@ export default {
},
data() {
return {
options: null,
showNumber: false,
selectOptionWidth: 0
selectOptionWidth: 0,
show: true,
value: null,
datas: []
}
},
computed: {
operator() {
return this.options.attrs.multiple ? 'in' : 'eq'
return this.element.options.attrs.multiple ? 'in' : 'eq'
}
},
watch: {
'options.attrs.multiple': function(value) {
const sourceValue = this.options.value
const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
if (value) {
!sourceValid && (this.options.value = [])
sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
!this.inDraw && (this.options.value = [])
} else {
!sourceValid && (this.options.value = null)
sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
!this.inDraw && (this.options.value = null)
'element.options.value': function(value, old) {
if (value === old) return
this.value = this.fillValueDerfault()
this.changeValue(value)
},
'element.options.attrs.fieldId': function(value, old) {
if (typeof value === 'undefined' || value === old) return
this.datas = []
this.element.options.attrs.fieldId &&
this.element.options.attrs.fieldId.length > 0 &&
multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
this.datas = this.optionDatas(res.data)
}) || (this.element.options.value = '')
},
'element.options.attrs.multiple': function(value, old) {
if (typeof old === 'undefined' || value === old) return
if (!this.inDraw) {
this.value = value ? [] : null
this.element.options.value = ''
}
}
},
created() {
this.options = this.element.options
if (this.options.attrs.fieldId) {
fieldValues(this.options.attrs.fieldId).then(res => {
this.options.attrs.datas = this.optionDatas(res.data)
this.show = false
this.$nextTick(() => {
this.show = true
})
}
// this.setCondition()
},
mounted() {
// this.$nextTick(() => {
// this.options && this.options.value && this.changeValue(this.options.value)
// })
this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.changeValue(this.options.value)
created() {
this.initLoad()
},
methods: {
initLoad() {
this.value = this.fillValueDerfault()
this.datas = []
if (this.element.options.attrs.fieldId) {
multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
this.datas = this.optionDatas(res.data)
})
}
if (this.element.options.value) {
this.value = this.fillValueDerfault()
this.changeValue(this.value)
}
},
changeValue(value) {
if (!this.inDraw) {
if (value === null) {
this.element.options.value = ''
} else {
this.element.options.value = Array.isArray(value) ? value.join() : value
}
}
this.setCondition()
this.styleChange()
this.showNumber = false
this.$nextTick(() => {
if (!this.$refs.deSelect.$refs.tags || !this.options.attrs.multiple) {
if (!this.element.options.attrs.multiple || !this.$refs.deSelect || !this.$refs.deSelect.$refs.tags) {
return
}
const kids = this.$refs.deSelect.$refs.tags.children[0].children
@ -110,11 +136,26 @@ export default {
setCondition() {
const param = {
component: this.element,
value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
value: this.formatFilterValue(),
operator: this.operator
}
this.inDraw && this.$store.commit('addViewFilter', param)
},
formatFilterValue() {
if (this.value === null) return []
if (Array.isArray(this.value)) return this.value
return this.value.split(',')
},
fillValueDerfault() {
const defaultV = this.element.options.value === null ? '' : this.element.options.value.toString()
if (this.element.options.attrs.multiple) {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
return defaultV.split(',')
} else {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
return defaultV.split(',')[0]
}
},
styleChange() {
this.$store.commit('recordStyleChange')
},

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

@ -1,40 +1,24 @@
<template>
<div v-if="options!== null && options.attrs!==null" 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">
<el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable :size="size" />
<el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable />
</div>
<div class="list">
<el-tree
v-if="options!== null && options.attrs!==null"
ref="deSelectGrid"
:data="(options.attrs.multiple ? [allNode, ...options.attrs.datas] : options.attrs.datas).filter(node => node.text.includes(keyWord))"
:props="defaultProp"
:indent="0"
class="de-filter-tree"
:size="size"
default-expand-all
>
<span slot-scope="{ node, data }" class="custom-tree-node-list father">
<span style="display: flex;flex: 1;width: 0;">
<el-radio v-if="!options.attrs.multiple" v-model="options.value" :label="data.id" @change="changeRadioBox"><span> {{ node.label }} </span></el-radio>
<el-checkbox v-if="options.attrs.multiple && data.id !== allNode.id" v-model="data.checked" :label="data.id" @change="changeCheckBox(data)"><span> {{ node.label }} </span></el-checkbox>
<el-checkbox v-if="options.attrs.multiple && data.id === allNode.id" v-model="data.checked" :indeterminate="data.indeterminate" :label="data.id" @change="allCheckChange(data)"><span> {{ node.label }} </span></el-checkbox>
</span>
<span v-if="!options.attrs.multiple && options.value && options.value === data.id" class="child">
<span style="margin-left: 12px;" @click.stop>
<span class="el-dropdown-link">
<el-button
icon="el-icon-circle-close"
type="text"
size="small"
@click="cancelRadio(data)"
/>
</span>
</span>
</span>
</span>
</el-tree>
<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-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-group>
</div>
<div v-else class="radio-group-container">
<el-radio-group v-model="value" @change="changeRadioBox">
<el-radio v-for="(item, index) in datas" :key="index" :label="item.id">{{ item.id }}</el-radio>
</el-radio-group>
</div>
</div>
@ -43,7 +27,7 @@
</template>
<script>
import { fieldValues } from '@/api/dataset/dataset'
import { multFieldValues } from '@/api/dataset/dataset'
export default {
props: {
@ -59,13 +43,11 @@ export default {
type: Boolean,
required: false,
default: true
},
size: String
}
},
data() {
return {
options: null,
// value: null,
value: null,
checked: null,
defaultProp: {
id: 'id',
@ -78,157 +60,109 @@ export default {
text: this.$t('commons.all'),
checked: false,
indeterminate: false
}
},
show: true,
datas: [],
isIndeterminate: false,
checkAll: false
}
},
computed: {
operator() {
return this.options.attrs.multiple ? 'in' : 'eq'
return this.element.options.attrs.multiple ? 'in' : 'eq'
}
},
watch: {
'options.attrs.multiple': function(value) {
const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
this.options.attrs.datas = []
this.options.attrs.datas = datas
const sourceValue = this.options.value
const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
if (value) {
!sourceValid && (this.options.value = [])
sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
!this.inDraw && (this.options.value = [])
if (!this.inDraw) {
this.options.value = []
this.allNode.indeterminate = false
this.allNode.checked = false
}
// this.setMutiBox()
} else {
!sourceValid && (this.options.value = null)
sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
!this.inDraw && (this.options.value = null)
'element.options.value': function(value, old) {
if (value === old) return
this.value = this.fillValueDerfault()
this.changeValue(value)
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
}
},
'element.options.attrs.fieldId': function(value, old) {
if (typeof value === 'undefined' || value === old) return
this.datas = []
this.element.options.attrs.fieldId &&
this.element.options.attrs.fieldId.length > 0 &&
multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
this.datas = this.optionDatas(res.data)
}) || (this.element.options.value = '')
},
'element.options.attrs.multiple': function(value, old) {
if (typeof old === 'undefined' || value === old) return
if (!this.inDraw) {
this.value = value ? [] : null
this.element.options.value = ''
}
this.show = false
this.$nextTick(() => {
this.show = true
})
}
// keyWord(val) {
// console.log(val)
// this.$refs.deSelectGrid.filter(val)
// }
},
created() {
this.options = this.element.options
if (this.options.attrs.fieldId) {
fieldValues(this.options.attrs.fieldId).then(res => {
this.options.attrs.datas = this.optionDatas(res.data)
this.setMutiBox()
this.setRadioBox()
})
} else {
this.setMutiBox()
this.setRadioBox()
}
},
mounted() {
// this.$nextTick(() => {
// this.options && this.options.value && this.changeValue(this.options.value)
// })
this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.initValue(this.options.value)
this.initLoad()
},
methods: {
initValue(value) {
// this.options.value = [value]
this.setCondition()
},
setMutiBox() {
if (this.options && this.options.attrs.multiple) {
this.options.attrs.datas.forEach(data => {
data.checked = (this.options.value && this.options.value.includes(data.id))
initLoad() {
this.value = this.element.options.attrs.multiple ? [] : null
if (this.element.options.attrs.fieldId) {
multFieldValues(this.element.options.attrs.fieldId.split()).then(res => {
this.datas = this.optionDatas(res.data)
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
}
})
this.setAllNodeStatus()
}
if (this.element.options.value) {
this.value = this.fillValueDerfault()
this.changeValue(this.value)
}
},
setRadioBox() {
if (this.options && !this.options.attrs.multiple) {
if (Array.isArray(this.options.value) && this.options.value.length > 0) {
// this.value = this.options.value.length[0]
changeValue(value) {
if (!this.inDraw) {
if (value === null) {
this.element.options.value = ''
} else {
this.element.options.value = Array.isArray(value) ? value.join() : value
}
}
this.setCondition()
this.styleChange()
},
setCondition() {
const param = {
component: this.element,
value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
value: this.formatFilterValue(),
operator: this.operator
}
this.inDraw && this.$store.commit('addViewFilter', param)
},
changeCheckBox(data) {
const values = Array.isArray(this.options.value) ? this.options.value : this.options.value ? [this.options.value] : []
const index = values.indexOf(data.id)
if (index < 0 && data.checked) {
values.push(data.id)
}
if (index >= 0 && !data.checked) {
values.splice(index, 1)
}
const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
this.options.attrs.datas = []
datas.forEach(item => {
if (item.id === data.id) {
item.checked = data.checked
}
})
this.options.attrs.datas = datas
this.setAllNodeStatus()
this.options.value = values
this.setCondition()
this.styleChange()
formatFilterValue() {
if (this.value === null) return []
if (Array.isArray(this.value)) return this.value
return this.value.split(',')
},
// 勾选数据项 会影响全选节点的状态
setAllNodeStatus() {
const nodeSize = this.options.attrs.datas.length
const checkedSize = this.options.attrs.datas.filter(item => item.checked).length
if (nodeSize === checkedSize) {
this.allNode.checked = true
this.allNode.indeterminate = false
} else if (checkedSize === 0) {
this.allNode.checked = false
this.allNode.indeterminate = false
fillValueDerfault() {
const defaultV = this.element.options.value
if (this.element.options.attrs.multiple) {
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
return defaultV.split(',')
} else {
this.allNode.checked = false
this.allNode.indeterminate = true
if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
return defaultV.split(',')[0]
}
},
allCheckChange(data) {
data.indeterminate = false
const values = []
this.options.value = []
const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
this.options.attrs.datas = []
datas.forEach(item => {
item.checked = data.checked
// data.checked && this.options.value.push(item.id)
data.checked && values.push(item.id)
})
this.options.attrs.datas = datas
this.options.value = values
this.setCondition()
},
changeRadioBox(value) {
// this.options.value = []
// if (this.value) this.options.value = [this.value]
this.setCondition()
},
cancelRadio(data) {
this.options.value = null
this.changeRadioBox()
},
// filterNode(value, data) {
// if (!value) return true
// return data[this.defaultProp.label].indexOf(value) !== -1
// },
styleChange() {
this.$store.commit('recordStyleChange')
},
@ -240,6 +174,20 @@ export default {
text: item
}
})
},
changeRadioBox(value) {
this.changeValue(value)
},
handleCheckAllChange(val) {
this.value = val ? this.datas.map(item => item.id) : []
this.isIndeterminate = false
this.changeValue(this.value)
},
handleCheckedChange(values) {
const checkedCount = values.length
this.checkAll = checkedCount === this.datas.length
this.isIndeterminate = checkedCount > 0 && checkedCount < this.datas.length
this.changeValue(values)
}
}
@ -247,28 +195,7 @@ export default {
</script>
<style lang="scss" scoped>
.custom-tree-node-list {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding:0 8px;
}
.father .child {
/*display: none;*/
visibility: hidden;
}
.father:hover .child {
/*display: inline;*/
visibility: visible;
}
.de-filter-tree {
>>>span.is-leaf {
width: 5px !important;
padding: 6px 0 !important;
}
}
.de-select-grid-search {
>>>input {
border-radius: 0px;
@ -283,4 +210,23 @@ export default {
bottom: 0;
}
}
.radio-group-container > .el-radio-group > label {
display: block !important;
margin: 10px !important;
}
.checkbox-group-container{
label.el-checkbox {
display: block !important;
margin: 10px !important;
}
.el-checkbox-group > label {
display: block !important;
margin: 10px !important;
}
}
</style>

4
frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
View File

@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
placeholder_min: 'denumberrange.please_key_min',
placeholder_max: 'denumberrange.please_key_max',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},

4
frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
View File

@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},

5
frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
View File

@ -13,9 +13,12 @@ const dialogPanel = {
multiple: false,
placeholder: 'denumberselect.placeholder',
datas: [],
viewIds: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},

4
frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
View File

@ -10,7 +10,9 @@ const dialogPanel = {
options: {
attrs: {
placeholder: 'deinputsearch.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''

4
frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
View File

@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},

4
frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
View File

@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},

4
frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
View File

@ -13,7 +13,9 @@ const dialogPanel = {
rangeSeparator: 'dedaterange.split_placeholder',
startPlaceholder: 'dedaterange.from_placeholder',
endPlaceholder: 'dedaterange.to_placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},

74
frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
View File

@ -11,7 +11,16 @@ const dialogPanel = {
attrs: {
type: 'date',
placeholder: 'dedate.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: [],
default: {
isDynamic: false,
dkey: 0,
dynamicPrefix: 1,
dynamicInfill: 'day',
dynamicSuffix: 'before'
}
},
value: ''
},
@ -62,6 +71,69 @@ class TimeDateServiceImpl extends WidgetService {
return field['deType'] === 1
})
}
dynamicDateFormNow(element) {
if (element.options.attrs.default === null || typeof element.options.attrs.default === 'undefined' || !element.options.attrs.default.isDynamic) return null
if (element.options.attrs.default.dkey === 0) {
return Date.now()
}
if (element.options.attrs.default.dkey === 1) {
const oneday = 24 * 3600 * 1000
return Date.now() - oneday
}
if (element.options.attrs.default.dkey === 2) {
const now = new Date()
const nowMonth = now.getMonth()
var nowYear = now.getFullYear()
return new Date(nowYear, nowMonth, 1).getTime()
}
if (element.options.attrs.default.dkey === 3) {
const dynamicPrefix = element.options.attrs.default.dynamicPrefix
const dynamicInfill = element.options.attrs.default.dynamicInfill
const dynamicSuffix = element.options.attrs.default.dynamicSuffix
if (dynamicInfill === 'day') {
const oneday = 24 * 3600 * 1000
const step = oneday * dynamicPrefix
return dynamicSuffix === 'before' ? (Date.now() - step) : (Date.now() + step)
}
if (dynamicInfill === 'week') {
const oneday = 24 * 3600 * 1000
const step = oneday * dynamicPrefix * 7
return dynamicSuffix === 'before' ? (Date.now() - step) : (Date.now() + step)
}
if (dynamicInfill === 'month') {
const now = new Date()
const nowMonth = now.getMonth()
const nowYear = now.getFullYear()
const nowDate = now.getDate()
const tarYear = nowYear
if (dynamicSuffix === 'before') {
const deffMonth = nowMonth - dynamicPrefix
let diffYear = deffMonth / 12
if (deffMonth < 0) {
diffYear -= 1
}
return new Date(tarYear + diffYear, nowMonth - dynamicPrefix % 12, nowDate).getTime()
} else {
const deffMonth = nowMonth + dynamicPrefix
const diffYear = deffMonth / 12
return new Date(tarYear + diffYear, deffMonth % 12, nowDate).getTime()
}
}
if (dynamicInfill === 'year') {
const now = new Date()
const nowMonth = now.getMonth()
const nowYear = now.getFullYear()
const nowDate = now.getDate()
return new Date(nowYear - 1, nowMonth, nowDate).getTime()
}
}
}
}
const timeDateServiceImpl = new TimeDateServiceImpl({ name: 'timeDateWidget' })
export default timeDateServiceImpl

4
frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
View File

@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
type: 'month',
placeholder: 'deyearmonth.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},

4
frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
View File

@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
type: 'year',
placeholder: 'deyear.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},

317
frontend/src/styles/index.scss
View File

@ -1,4 +1,3 @@
/* $--font-path: '~element-ui/lib/theme-chalk/fonts'; */
@ -149,17 +148,20 @@ div:focus {
.el-tabs__header {
margin: 0 0 0 0 !important;
}
.el-tabs__content {
height: calc(100% - 55px) !important;
.el-tab-pane {
height: 100% !important;
height: 100% !important;
}
}
}
.de-search-header {
.el-tabs__header {
display: none !important;;
display: none !important;
;
}
}
@ -205,7 +207,7 @@ div:focus {
}
.de-filter-data-table {
.el-table__body-wrapper > table > {
.el-table__body-wrapper>table> {
tbody {
.el-table__row {
:hover {
@ -221,7 +223,7 @@ div:focus {
}
.de-msg-data-table {
.el-table__body-wrapper > table > {
.el-table__body-wrapper>table> {
tbody {
.el-table__row {
:hover {
@ -247,13 +249,14 @@ div:focus {
.custom-component-class {
width: 100%;
div:not(.de-number-range-container ) {
div:not(.de-number-range-container) {
width: 100% !important;
}
div.el-input-group__append {
width: 10% !important;
}
.de-select-grid-class {
.list {
position: relative !important;
@ -340,7 +343,7 @@ div:focus {
margin: 0 2px 0 0;
}
.ds-icon-union{
.ds-icon-union {
width: 14px;
height: 14px;
color: #a479e7;
@ -389,58 +392,63 @@ div:focus {
}
.el-color-dropdown__link-btn {
display: none!important;
display: none !important;
}
.el-table {
background-color: var(--TableBG) !important;
tr {
background-color: var(--TableBG) !important;
tr {
background-color: var(--TableBG) !important;
}
th {
background-color: var(--TableBG) !important;
}
}
th {
background-color: var(--TableBG) !important;
}
}
.blackTheme .el-textarea__inner {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
.blackTheme .el-textarea__inner:not(:focus) {
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
.blackTheme .el-input__inner {
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
}
.blackTheme .el-input__inner:not(:focus) {
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
.blackTheme .el-input-number__decrease {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
}
.blackTheme .el-input-number__increase {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
border: none !important;
}
.blackTheme .el-picker-panel__footer {
background-color: var(--MainBG) !important;
background-color: var(--MainBG) !important;
}
.el-pagination {
button:disabled {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
button:disabled {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
}
/* .blackTheme .el-pager li {
@ -453,26 +461,29 @@ div:focus {
} */
.fu-search-bar-button {
background-color: var(--Main) !important;
background-color: var(--Main) !important;
}
.blackTheme .fu-quick-search input {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
.blackTheme .vue-treeselect__single-value {
color: var(--TableColor) !important;
color: var(--TableColor) !important;
}
.blackTheme .el-tag.el-tag--info {
background-color: var(--ContentBG);
border-color: var(--TableBorderColor);
color: var(--TableColor) !important; ;
background-color: var(--ContentBG);
border-color: var(--TableBorderColor);
color: var(--TableColor) !important;
;
}
.blackTheme .vue-treeselect__control {
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
background-color: var(--MainBG) !important;
color: var(--TableColor) !important;
border-color: var(--border-color-input) !important;
}
/* .blackTheme .el-popover {
@ -480,93 +491,105 @@ div:focus {
} */
.blackTheme .main-area-input {
input.el-input__inner {
color: var(--TableColor) !important;
background-color: var(--ContentBG) !important;
}
.el-input-group__append {
background-color: var(--ContentBG) !important;
border-color: var(--ContentBG) !important;
}
input.el-input__inner {
color: var(--TableColor) !important;
background-color: var(--ContentBG) !important;
}
.el-input-group__append {
background-color: var(--ContentBG) !important;
border-color: var(--ContentBG) !important;
}
}
.blackTheme .el-tree {
background-color: var(--SiderBG) !important;
background-color: var(--SiderBG) !important;
}
.blackTheme .el-tree-node__content:hover {
background-color: var(--MenuHovorBG) !important;
background-color: var(--MenuHovorBG) !important;
}
.blackTheme .is-current > .el-tree-node__content {
background-color: var(--MenuActiveBG) !important;
.blackTheme .is-current>.el-tree-node__content {
background-color: var(--MenuActiveBG) !important;
}
.blackTheme .el-collapse-item__header {
background-color: var(--ContentBG) !important;
color: var(--TextPrimary) !important;
border: none !important;
background-color: var(--ContentBG) !important;
color: var(--TextPrimary) !important;
border: none !important;
}
.blackTheme .el-collapse-item__wrap {
background-color: var(--ContentBG) !important;
border: none !important;
background-color: var(--ContentBG) !important;
border: none !important;
}
.blackTheme .content-container__header {
color: var(--TextPrimary);
color: var(--TextPrimary);
}
.blackTheme .el-button--default {
background-color: var(--MainBG) !important;
color: var(--Main) !important;
background-color: var(--MainBG) !important;
color: var(--Main) !important;
}
/* .blackTheme .el-dialog {
background: var(--ContentBG) !important;
color: var(--TextPrimary) !important;
}
*/
.blackTheme .el-dialog__title {
color: #ffffff !important;
color: #ffffff !important;
}
.blackTheme .title-text {
color: var(--TextPrimary) !important;
color: var(--TextPrimary) !important;
}
.blackTheme .el-tabs__item:not(.is-active) {
color: var(--TextPrimary) !important;
color: var(--TextPrimary) !important;
}
.blackTheme .el-tabs__item:hover{
color: var(--Main) !important;
.blackTheme .el-tabs__item:hover {
color: var(--Main) !important;
}
.blackTheme:not(.in-panel) .elx-table--main-wrapper {
.body--wrapper {
background-color: var(--TableBG) !important;
}
.body--wrapper {
background-color: var(--TableBG) !important;
}
}
.blackTheme:not(.in-panel) .elx-table {
color: var(--TableColor) !important;
color: var(--TableColor) !important;
}
.blackTheme:not(.in-panel) .elx-body--column {
background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
background-image: linear-gradient(var(--TableBorderColor), var(--TableBorderColor)), linear-gradient(var(--TableBorderColor), var(--TableBorderColor)) !important;
}
.blackTheme:not(.in-panel) .elx-header--column {
background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
background-image: linear-gradient(--TableBorderColor, --TableBorderColor), linear-gradient(--TableBorderColor, --TableBorderColor) !important;
}
.blackTheme:not(.in-panel) tr.row--current {
background-color: var(--MainBG) !important;
background-color: var(--MainBG) !important;
}
.blackTheme:not(.in-panel) tr.elx-body--row:hover {
background-color: var(--TableBG) !important;
background-color: var(--TableBG) !important;
}
.blackTheme:not(.in-panel) .elx-table--header-border-line {
border-color: var(--TableBorderColor) !important;
border-color: var(--TableBorderColor) !important;
}
.el-collapse-item__content {
padding-bottom: 0!important;
padding-bottom: 0 !important;
}
.el-collapse-item__header {
height: 34px !important;
line-height: 34px !important;
@ -576,105 +599,110 @@ div:focus {
}
.blackTheme .el-submenu__title {
color: var(--TextPrimary) ;
color: var(--TextPrimary);
}
.blackTheme .el-drawer__body {
background-color: var(--ContentBG);
background-color: var(--ContentBG);
}
.blackTheme .el-select-dropdown__item.hover {
background-color: #171B22 !important;
background-color: #171B22 !important;
}
.blackTheme .el-select-dropdown__item:hover {
background-color: #171B22 !important;
background-color: #171B22 !important;
}
.blackTheme .el-dropdown-menu__item:not(.is-disabled):hover {
background-color: #171B22 !important;
background-color: #171B22 !important;
}
.blackTheme .el-dropdown-menu__item:focus {
background-color: #171B22 !important;
background-color: #171B22 !important;
}
.blackTheme .el-dropdown-menu__item--divided:before {
background-color: #000000 !important;
background-color: #000000 !important;
}
.blackTheme .el-card__header {
border-color: var(--TableBorderColor) !important;
border-color: var(--TableBorderColor) !important;
}
.blackTheme .CodeMirror {
background-color: #000000 ;
color: #ffffff;
background-color: #000000;
color: #ffffff;
}
.blackTheme .CodeMirror-code {
background-color: transparent;
background-color: transparent;
}
.blackTheme .CodeMirror-gutters {
background-color: #000000 ;
background-color: #000000;
}
.blackTheme .CodeMirror-line {
background-color: #000000 !important;
background-color: #000000 !important;
}
.blackTheme .el-radio-button__inner {
background-color: var(--TableBG);
color: var(--TableColor);
border: var(--TableBorder);
background-color: var(--TableBG);
color: var(--TableColor);
border: var(--TableBorder);
}
.blackTheme .el-loading-mask {
background-color: rgb(135 131 131 / 70%);
background-color: rgb(135 131 131 / 70%);
}
.blackTheme >>> ::-webkit-scrollbar-thumb {
background: #38393a !important;
.blackTheme>>> ::-webkit-scrollbar-thumb {
background: #38393a !important;
}
.blackTheme .el-message-box__content {
color:#F2F6FC;
color: #F2F6FC;
}
.blackTheme .el-message-box__btns {
.el-button--default:not(.el-button--primary) {
background-color: #171b22 ;
color: #2681ff;
}
.el-button--primary {
color: #21333b;
background-color: #2681ff;
border-color: #2681ff;
}
.el-button--default:not(.el-button--primary) {
background-color: #171b22;
color: #2681ff;
}
.el-button--primary {
color: #21333b;
background-color: #2681ff;
border-color: #2681ff;
}
}
.blackTheme .vue-treeselect__menu {
border: 1px solid var(--TableBorderColor, #cfcfcf);
background: var(--MainBG, #fff);
border: 1px solid var(--TableBorderColor, #cfcfcf);
background: var(--MainBG, #fff);
}
.blackTheme .vue-treeselect__option:not(.vue-treeselect__option--highlight) {
color: #606266;
}
.blackTheme .vue-treeselect__option--highlight {
color: #2681ff;
background-color: #000000;
color: #606266;
}
.blackTheme .el-table__body tr.current-row > td {
background-color: #324f62;
.blackTheme .vue-treeselect__option--highlight {
color: #2681ff;
background-color: #000000;
}
.blackTheme .el-table__body tr.current-row>td {
background-color: #324f62;
}
.blue-color {
color: var(--Main, #0000ff);
color: var(--Main, #0000ff);
}
.link-date-picker-class > .el-picker-panel__footer > .el-button--text:first-child{
.link-date-picker-class>.el-picker-panel__footer>.el-button--text:first-child {
display: none;
}
@ -684,41 +712,48 @@ div:focus {
.el-color-svpanel__black {
background: linear-gradient(to top, #000, rgba(0,0,0,0)) !important;
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0)) !important;
}
.el-color-svpanel__white {
background: linear-gradient(to right, #fff, rgba(255,255,255,0)) !important;
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0)) !important;
}
.rate-date-class > .el-picker-panel__footer > .el-button--text:first-child{
.rate-date-class>.el-picker-panel__footer>.el-button--text:first-child {
display: none;
}
.rate-date-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
.rate-date-class>.el-picker-panel__body-wrapper>.el-picker-panel__body {
>.el-date-picker__header {
display: none;
}
>.el-picker-panel__content{
>table > tbody {
>.el-picker-panel__content {
>table>tbody {
>tr:first-child {
display: none;
}
>tr >td.prev-month,td.next-month {
>tr>td.prev-month,
td.next-month {
display: none;
}
}
}
}
.rate-day-class > .el-picker-panel__footer > .el-button--text:first-child{
.rate-day-class>.el-picker-panel__footer>.el-button--text:first-child {
display: none;
}
.rate-day-class > .el-picker-panel__body-wrapper > .el-picker-panel__body {
.rate-day-class>.el-picker-panel__body-wrapper>.el-picker-panel__body {
>.el-date-picker__header {
display: none;
}
>.el-picker-panel__content{
>table > tbody {
>.el-picker-panel__content {
>table>tbody {
>tr:not(:nth-child(3)) {
display: none;
}
@ -726,30 +761,36 @@ div:focus {
}
}
.chart-type .el-radio__input{
display: none!important;
.chart-type .el-radio__input {
display: none !important;
}
.chart-type .el-radio__label{
padding-left: 0!important;
.chart-type .el-radio__label {
padding-left: 0 !important;
}
.chart-type .radio-row .radio-style{
.chart-type .radio-row .radio-style {
width: 80px;
height: 60px;
padding: 0;
}
.el-color-predefine__color-selector{
border: 1px solid #999999!important;
margin: 0 0 6px 6px!important;
.el-color-predefine__color-selector {
border: 1px solid #999999 !important;
margin: 0 0 6px 6px !important;
}
.de-checkbox {
width: 100%;
margin-left: 0px !important;
.el-checkbox__input {
padding: 0 0 8px 0 !important;
}
}
.no-label-item {
.el-form-item__content {
margin-left: 10px !important;
}
}

46
frontend/src/views/panel/edit/index.vue
View File

@ -146,20 +146,18 @@
custom-class="de-filter-dialog"
@close="cancelFilter"
>
<filter-dialog v-if="filterVisible && currentWidget" :widget-info="currentWidget" :component-info="currentFilterCom" @re-fresh-component="reFreshComponent">
<component
:is="currentFilterCom.component"
:id="'component' + currentFilterCom.id"
class="component"
:style="currentFilterCom.style"
:element="currentFilterCom"
:in-draw="false"
/>
</filter-dialog>
<filter-dialog
v-if="filterVisible && currentWidget"
:ref="'filter-setting-' + currentFilterCom.id"
:widget-info="currentWidget"
:element="currentFilterCom"
@sure-button-status="sureStatusChange"
@re-fresh-component="reFreshComponent"
/>
<div style="text-align: end !important;margin: 0 15px 10px !important;">
<span slot="footer">
<el-button size="mini" @click="cancelFilter">{{ $t('commons.cancel') }}</el-button>
<el-button :disabled="!currentFilterCom.options.attrs.fieldId" type="primary" size="mini" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
<el-button :disabled="!enableSureButton" type="primary" size="mini" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
</span>
</div>
</el-dialog>
@ -217,9 +215,7 @@ import { uuid } from 'vue-uuid'
import Toolbar from '@/components/canvas/components/Toolbar'
import { findOne } from '@/api/panel/panel'
import { getPanelAllLinkageInfo } from '@/api/panel/linkage'
import PreviewFullScreen from '@/components/canvas/components/Editor/PreviewFullScreen'
import Preview from '@/components/canvas/components/Editor/Preview'
import AttrList from '@/components/canvas/components/AttrList'
import AttrListExtend from '@/components/canvas/components/AttrListExtend'
import elementResizeDetectorMaker from 'element-resize-detector'
import AssistComponent from '@/views/panel/AssistComponent'
@ -234,9 +230,7 @@ import FilterDialog from '../filter/filterDialog'
import toast from '@/components/canvas/utils/toast'
import { commonStyle, commonAttr } from '@/components/canvas/custom-component/component-list'
import generateID from '@/components/canvas/utils/generateID'
import RectangleAttr from '@/components/canvas/components/RectangleAttr'
import TextAttr from '@/components/canvas/components/TextAttr'
import FilterTextAttr from '@/components/canvas/components/FilterTextAttr'
import { queryPanelJumpInfo } from '@/api/panel/linkJump'
import ComponentWait from '@/views/panel/edit/ComponentWait'
@ -253,16 +247,12 @@ export default {
Toolbar,
FilterDialog,
SubjectSetting,
PreviewFullScreen,
Preview,
AttrList,
AttrListExtend,
AssistComponent,
PanelTextEditor,
RectangleAttr,
TextAttr,
ChartGroup,
FilterTextAttr
ChartGroup
},
data() {
return {
@ -295,7 +285,6 @@ export default {
width: null,
height: null
},
beforeDialogValue: [],
styleDialogVisible: false,
currentDropElement: null,
adviceGroupId: null,
@ -312,7 +301,8 @@ export default {
'rect-shape',
'de-show-date',
'de-video'
]
],
enableSureButton: false
}
},
@ -674,11 +664,9 @@ export default {
}
},
openFilterDialog() {
this.beforeDialogValue = []
this.filterVisible = true
},
closeFilter() {
this.beforeDialogValue = []
this.filterVisible = false
this.currentWidget = null
this.clearCurrentInfo()
@ -688,9 +676,10 @@ export default {
bus.$emit('onRemoveLastItem')
},
sureFilter() {
this.currentFilterCom.options.value = []
this.currentFilterCom = this.$refs['filter-setting-' + this.currentFilterCom.id].getElementInfo()
this.$store.commit('setComponentWithId', this.currentFilterCom)
this.$store.commit('recordSnapshot', 'sureFilter')
this.$store.commit('setCurComponent', { component: this.currentFilterCom, index: this.curComponentIndex })
this.closeFilter()
},
reFreshComponent(component) {
@ -701,9 +690,9 @@ export default {
if (this.curComponent && this.curComponent.serviceName) {
const serviceName = this.curComponent.serviceName
this.currentWidget = ApplicationContext.getService(serviceName)
this.currentFilterCom = this.curComponent
this.openFilterDialog()
}
this.currentFilterCom = this.curComponent
this.openFilterDialog()
},
closeLeftPanel() {
this.show = false
@ -880,6 +869,9 @@ export default {
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
this.$refs.canvasEditor.handleDragOver(e)
},
sureStatusChange(status) {
this.enableSureButton = status
}
}
}

129
frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<div v-if="element">
<el-form ref="form" :model="element.options.attrs.default" label-width="100px">
<el-form-item label="设定默认值">
<el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
<el-radio :label="false">固定时间</el-radio>
<el-radio :label="true">动态时间</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="element.options.attrs.default.isDynamic" label="相对当前时间">
<el-select v-model="element.options.attrs.default.dkey" placeholder="" class="relative-time" @change="dkeyChange">
<el-option label="今天" :value="0" />
<el-option label="昨天" :value="1" />
<el-option label="本月首日" :value="2" />
<el-option label="自定义" :value="3" />
</el-select>
</el-form-item>
<div class="inline">
<el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="">
<el-input v-model="element.options.attrs.default.dynamicPrefix" type="number" size="mini" :min="1" :max="10" @input="dynamicPrefixChange" />
</el-form-item>
<el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
<el-select v-model="element.options.attrs.default.dynamicInfill" size="mini" placeholder="" @change="dynamicInfillChange">
<el-option label="天" value="day" />
<el-option label="周" value="week" />
<el-option label="月" value="month" />
<el-option label="年" value="year" />
</el-select>
</el-form-item>
<el-form-item v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 3" label="" class="no-label-item">
<el-select v-model="element.options.attrs.default.dynamicSuffix" size="mini" placeholder="" @change="dynamicSuffixChange">
<el-option label="前" value="before" />
<el-option label="后" value="after" />
</el-select>
</el-form-item>
</div>
<el-form-item v-if="element.options.attrs.default.isDynamic" label="预览">
<el-date-picker
v-model="dval"
type="date"
disabled
placeholder=""
class="relative-time"
/>
</el-form-item>
<el-form-item v-else label="设置">
<component
:is="element.component"
:id="'component' + element.id"
class="relative-time"
:style="element.style"
:element="element"
:in-draw="false"
/>
</el-form-item>
</el-form>
</div>
</template>
<script>
import { ApplicationContext } from '@/utils/ApplicationContext'
export default {
name: 'DeDateDefault',
props: {
element: {
type: Object,
default: null
}
},
data() {
return {
dval: null
}
},
created() {
this.setDval()
},
methods: {
dynamicChange(value) {
this.setDval()
},
dkeyChange(value) {
this.setDval()
},
dynamicPrefixChange(value) {
this.setDval()
},
dynamicInfillChange(value) {
this.setDval()
},
dynamicSuffixChange(value) {
this.setDval()
},
setDval() {
const widget = ApplicationContext.getService(this.element.serviceName)
const time = widget.dynamicDateFormNow(this.element)
this.dval = time
}
}
}
</script>
<style lang="scss" scoped>
.inline {
display: flex;
>>>.el-input--mini {
min-width: 70px;
}
}
.relative-time {
width: 100%;
}
</style>

422
frontend/src/views/panel/filter/filterDialog.vue
View File

@ -40,7 +40,6 @@
@node-click="handleNodeClick"
>
<div slot-scope="{ node, data }" class="custom-tree-node">
<!-- <el-button v-if="data.type === 'db'" icon="el-icon-s-data" type="text" size="mini" /> -->
<span>
<svg-icon v-if="data.type === 'db'" icon-class="ds-db" class="ds-icon-db" />
<svg-icon v-if="data.type === 'sql'" icon-class="ds-sql" class="ds-icon-sql" />
@ -59,19 +58,17 @@
<div v-if="showDomType === 'field'">
<draggable
v-model="fieldDatas"
:disabled="selectField.length !== 0"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
class="drag-list"
@end="end1"
@start="start1"
@end="end"
>
<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="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
class="filter-db-row"
>
<i class="el-icon-s-data" />
@ -134,19 +131,17 @@
<div v-else-if="comShowDomType === 'field'">
<draggable
v-model="comFieldDatas"
:disabled="selectField.length !== 0"
:options="{group:{name: 'dimension',pull:'clone'},sort: true}"
animation="300"
:move="onMove"
class="drag-list"
@end="end1"
@start="start1"
@end="end"
>
<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="myAttrs && myAttrs.fieldId && myAttrs.fieldId.includes(item.id) ? 'filter-db-row-checked' : 'filter-db-row'"
class="filter-db-row"
>
<i class="el-icon-s-data" />
@ -163,138 +158,13 @@
</de-aside-container>
<de-main-container class="ms-main-container">
<div>
<el-row>
<el-col :span="24">
<div class="filter-field">
<div class="field-content">
<!-- <div class="field-content-left">
<div class="field-content-text">{{ $t('panel.field') }} </div>
</div> -->
<div v-if="currentElement.options && currentElement.options.attrs">
<filter-head :element="currentElement" />
<div class="field-content-right">
<el-row style="display:flex;height: 32px;">
<draggable
v-model="selectField"
group="dimension"
animation="300"
:move="onMove"
class="theme-drag"
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
@end="end2"
>
<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"
/>
</transition-group>
</draggable>
</el-row>
</div>
</div>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<div class="filter-options-left">
<el-switch
v-if="widget.showSwitch"
v-model="componentInfo.options.attrs.multiple"
:active-text="$t('panel.multiple_choice')"
:inactive-text="$t('panel.single_choice')"
@change="multipleChange"
/>
</div>
</el-col>
<el-col :span="16">
<div class="filter-options-right">
<span style="padding-right: 10px;">
<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>
<filter-control :element="currentElement" :widget="widget" :control-attrs="myAttrs" :child-views="childViews" />
<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>
</span>
<span style="padding-left: 10px;">
<el-checkbox v-model="componentInfo.options.attrs.enableRange" @change="enableRangeChange"><span>
{{ $t('panel.custom_scope') }} </span> </el-checkbox>
<filter-foot :element="currentElement" />
<el-popover
v-model="popovervisible"
placement="bottom-end"
:disabled="!componentInfo.options.attrs.enableRange"
width="200"
>
<div class="view-container-class">
<el-checkbox-group v-model="componentInfo.options.attrs.viewIds" @change="checkedViewsChange">
<el-checkbox v-for="(item ) in viewInfos" :key="item.id" :label="item.id" class="de-checkbox">
<div class="span-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"
/>
</el-popover>
</span>
</div>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<div class="filter-content">
<el-card class="box-card">
<div style="margin-bottom: 10px;">
<span> {{ widget.label }}</span>
</div>
<div class="custom-component-class">
<slot />
</div>
</el-card>
</div>
</el-col>
</el-row>
</div>
</de-main-container>
</de-container>
@ -305,15 +175,16 @@ import DeMainContainer from '@/components/dataease/DeMainContainer'
import DeContainer from '@/components/dataease/DeContainer'
import DeAsideContainer from '@/components/dataease/DeAsideContainer'
import draggable from 'vuedraggable'
import DragItem from '@/components/DragItem'
import FilterHead from './filterMain/FilterHead'
import FilterControl from './filterMain/FilterControl'
import FilterFoot from './filterMain/FilterFoot'
import {
mapState
} from 'vuex'
// import { ApplicationContext } from '@/utils/ApplicationContext'
import {
groupTree,
fieldList,
fieldValues,
post
} from '@/api/dataset/dataset'
import {
@ -329,7 +200,9 @@ export default {
DeContainer,
DeAsideContainer,
draggable,
DragItem
FilterHead,
FilterControl,
FilterFoot
},
props: {
@ -337,9 +210,10 @@ export default {
type: Object,
default: null
},
componentInfo: {
element: {
type: Object,
default: null
default: () => {}
}
},
@ -370,7 +244,6 @@ export default {
id: 'id',
parentId: 'pid'
},
selectField: [],
widget: null,
fieldValues: [],
popovervisible: false,
@ -390,48 +263,36 @@ export default {
expandedArray: [],
viewKeyWord: '',
titlePopovervisible: false,
fieldsParent: null
fieldsParent: null,
myAttrs: null,
childViews: {
viewInfos: []
},
currentElement: null
}
},
computed: {
panelInfo() {
return this.$store.state.panel.panelInfo
},
...mapState([
'componentData',
'curComponent',
'isClickComponent',
'canvasStyleData',
'curComponentIndex'
'componentData'
])
},
watch: {
selectField(values) {
'myAttrs.dragItems'(values) {
if (values && values.length > 0) {
const value = values[0]
const fieldId = value.id
if (this.widget && this.widget.optionDatas) {
fieldValues(fieldId).then(res => {
this.componentInfo.options.attrs.datas = this.widget.optionDatas(res.data)
this.componentInfo.options.attrs.fieldId = fieldId
this.componentInfo.options.attrs.dragItems = values
this.componentInfo.options.attrs.activeName = this.activeName
this.componentInfo.options.attrs.fieldsParent = this.fieldsParent
this.$emit('re-fresh-component', this.componentInfo)
})
} else {
this.componentInfo.options.attrs.fieldId = fieldId
this.componentInfo.options.attrs.dragItems = values
this.componentInfo.options.attrs.activeName = this.activeName
this.componentInfo.options.attrs.fieldsParent = this.fieldsParent
this.$emit('re-fresh-component', this.componentInfo)
}
} else if (this.componentInfo && this.componentInfo.options.attrs.fieldId) {
this.componentInfo.options.attrs.fieldId = null
this.componentInfo.options.attrs.activeName = null
this.$emit('re-fresh-component', this.componentInfo)
const fieldIds = values.map(val => val.id)
this.myAttrs.fieldId = fieldIds.join()
// this.myAttrs.dragItems = values
this.myAttrs.activeName = this.activeName
this.myAttrs.fieldsParent = this.fieldsParent
} else if (this.myAttrs && this.myAttrs.fieldId) {
this.myAttrs.fieldId = null
this.myAttrs.activeName = null
}
this.enableSureButton()
},
keyWord(val) {
this.expandedArray = []
@ -447,12 +308,13 @@ export default {
}
},
created() {
// this.widget = ApplicationContext.getService(this.widgetId)
this.widget = this.widgetInfo
this.currentElement = JSON.parse(JSON.stringify(this.element))
this.myAttrs = this.currentElement.options.attrs
this.treeNode(this.groupForm)
if (this.componentInfo && this.componentInfo.options.attrs.dragItems) {
this.selectField = this.componentInfo.options.attrs.dragItems
if (this.myAttrs && this.myAttrs.dragItems) {
this.enableSureButton()
}
this.initWithField()
this.loadViews()
@ -460,10 +322,10 @@ export default {
methods: {
initWithField() {
if (this.componentInfo && this.componentInfo.options.attrs.activeName) {
this.activeName = this.componentInfo.options.attrs.activeName
if (this.componentInfo.options.attrs.fieldsParent) {
this.fieldsParent = this.componentInfo.options.attrs.fieldsParent
if (this.myAttrs && this.myAttrs.activeName) {
this.activeName = this.myAttrs.activeName
if (this.myAttrs.fieldsParent) {
this.fieldsParent = this.myAttrs.fieldsParent
this.$nextTick(() => {
this.activeName === 'dataset' && this.showFieldDatas(this.fieldsParent)
this.activeName !== 'dataset' && this.comShowFieldDatas(this.fieldsParent)
@ -525,6 +387,7 @@ export default {
viewIds && viewIds.length > 0 && viewsWithIds(viewIds).then(res => {
const datas = res.data
this.viewInfos = datas
this.childViews.viewInfos = datas
})
},
handleNodeClick(data) {
@ -598,19 +461,12 @@ export default {
return
}
}
// this.dataSetBreads = this.dataSetBreads.slice(0, this.dataSetBreads.length - 1)
// this.dataSetBreads[this.dataSetBreads.length - 1]['link'] = false
},
comRemoveTail() {
this.componentSetBreads = this.componentSetBreads.slice(0, this.componentSetBreads.length - 1)
this.componentSetBreads[this.componentSetBreads.length - 1]['link'] = false
},
backToLink(bread) {
// if (bread.type === 'field') {
// this.showDomType = 'db'
// } else {
// this.showDomType = 'tree'
// }
this.showDomType = 'tree'
this.removeTail(bread)
@ -626,14 +482,6 @@ export default {
this.viewKeyWord = ''
this.comRemoveTail()
},
// loadTable(sceneId) {
// loadTable({ sceneId: sceneId, sort: 'type asc,create_time desc,name asc' }).then(res => {
// res && res.data && (this.sceneDatas = res.data.map(tb => {
// tb.type = 'db'
// return tb
// }))
// })
// },
loadField(tableId) {
fieldList(tableId).then(res => {
@ -673,20 +521,12 @@ export default {
this.moveId = e.draggedContext.element.id
return true
},
start1() {
},
end1(e) {
end(e) {
this.refuseMove(e)
this.removeCheckedKey(e)
this.save()
},
save() {
},
end2(e) {
this.refuseMove(e)
},
refuseMove(e) {
const that = this
const xItems = this.fieldDatas.filter(function(m) {
@ -699,43 +539,25 @@ export default {
},
removeCheckedKey(e) {
const that = this
const xItems = this.selectField.filter(function(m) {
if (!this.currentElement.options.attrs.dragItems) return
const xItems = this.currentElement.options.attrs.dragItems.filter(function(m) {
return m.id === that.moveId
})
if (xItems && xItems.length > 1) {
this.selectField.splice(e.newDraggableIndex, 1)
this.currentElement.options.attrs.dragItems.splice(e.newDraggableIndex, 1)
}
},
closeItem(tag) {
const index = tag.index
this.selectField.splice(index, 1)
},
multipleChange(value) {
// this.componentInfo.options.attrs.multiple = value
// this.componentInfo.options.value = null
this.$emit('re-fresh-component', this.componentInfo)
enableSureButton() {
const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems.length > 0
this.$emit('sure-button-status', enable)
},
checkedViewsChange(values) {
// this.componentInfo.options.attrs.viewIds = values
this.$emit('re-fresh-component', this.componentInfo)
},
enableRangeChange(value) {
if (!value) {
this.componentInfo.options.attrs.viewIds = []
}
// this.componentInfo.options.attrs.enableRange = value
this.$emit('re-fresh-component', this.componentInfo)
},
showTitleChange(value) {
if (!value) {
this.componentInfo.options.attrs.title = ''
this.componentInfo.style.backgroundColor = ''
}
this.$emit('re-fresh-component', this.componentInfo)
getElementInfo() {
return this.currentElement
}
}
}
@ -768,81 +590,6 @@ export default {
padding: 5px 10px;
}
.filter-field {
// background: #99a9bf;
border-radius: 4px;
height: 45px;
.field-content {
position: relative;
display: table;
width: 100%;
height: 100%;
white-space: nowrap;
.field-content-left {
width: 50px;
max-width: 50px;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 8px;
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%;
}
}
}
.filter-options-left {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
height: 50px;
}
.filter-options-right {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: nowrap;
height: 50px;
}
.filter-content {
height: calc(50vh - 120px);
top: 160px;
}
.filter-dialog-tabs {
border: 1px solid var(--TableBorderColor, #E6E6E6);
padding: 10px;
@ -913,59 +660,4 @@ export default {
height: calc(100% - 6px);
}
.box-card {
width: 100%;
height: 100%;
}
.i-filter {
text-align: center;
margin-left: 5px;
margin-top: 1px;
}
.i-filter-inactive {
color: #9ea6b2 !important;
cursor: not-allowed !important;
}
.i-filter-active {
cursor: pointer !important;
}
.view-container-class {
min-height: 150px;
max-height: 200px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
word-break: break-all;
position: relative;
}
.list-group:empty,
.list-group>div:empty {
display: inline-block;
width: 100%;
height: calc(100% - 13px);
}
.list-group:empty:before,
.list-group>div:empty:before {
content: attr(data-value);
}
.blackTheme .theme-drag {
background-color: var(--MainBG, #fff);
}
.span-div {
width: 135px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>

183
frontend/src/views/panel/filter/filterMain/FilterControl.vue Normal file
View File

@ -0,0 +1,183 @@
<template>
<el-row>
<el-col :span="8">
<div class="filter-options-left">
<el-switch
v-if="widget.showSwitch"
v-model="attrs.multiple"
:active-text="$t('panel.multiple_choice')"
:inactive-text="$t('panel.single_choice')"
@change="multipleChange"
/>
</div>
</el-col>
<el-col :span="16">
<div class="filter-options-right">
<span style="padding-right: 10px;">
<el-checkbox v-model="attrs.showTitle" @change="showTitleChange">显示标题
</el-checkbox>
<el-popover v-model="titlePopovervisible" placement="bottom-end" :disabled="!attrs.showTitle" width="200">
<div style="width: 100%;overflow-y: auto;overflow-x: hidden;word-break: break-all;position: relative;">
<el-input v-model="attrs.title" placeholder="请输入标题" type="textarea" maxlength="15" show-word-limit />
</div>
<i
slot="reference"
:class="{'i-filter-active': attrs.showTitle, 'i-filter-inactive': !attrs.showTitle}"
class="el-icon-setting i-filter"
/>
</el-popover>
</span>
<span style="padding-left: 10px;">
<el-checkbox v-model="attrs.enableRange" @change="enableRangeChange"><span>
{{ $t('panel.custom_scope') }} </span> </el-checkbox>
<el-popover v-model="popovervisible" placement="bottom-end" :disabled="!attrs.enableRange" width="200">
<div class="view-container-class">
<el-checkbox-group v-model="attrs.viewIds" @change="checkedViewsChange">
<el-checkbox
v-for="(item ) in childViews.viewInfos"
:key="item.id"
:label="item.id"
class="de-checkbox"
>
<div class="span-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': attrs.enableRange, 'i-filter-inactive': !attrs.enableRange}"
class="el-icon-setting i-filter"
/>
</el-popover>
</span>
</div>
</el-col>
</el-row>
</template>
<script>
export default {
name: 'FilterControl',
props: {
widget: {
type: Object,
default: null
},
controlAttrs: {
type: Object,
default: null
},
childViews: {
type: Object,
default: () => {}
},
element: {
type: Object,
default: null
}
},
data() {
return {
attrs: null,
titlePopovervisible: false,
popovervisible: false
}
},
created() {
this.attrs = this.controlAttrs
},
methods: {
multipleChange(value) {
this.fillAttrs2Filter()
},
checkedViewsChange(values) {
this.fillAttrs2Filter()
},
enableRangeChange(value) {
if (!value) {
this.attrs.viewIds = []
}
this.fillAttrs2Filter()
},
showTitleChange(value) {
if (!value) {
this.attrs.title = ''
// this.componentInfo.style.backgroundColor = ''
}
this.fillAttrs2Filter()
},
fillAttrs2Filter() {}
}
}
</script>
<style lang="scss" scoped>
.filter-options-left {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-start;
flex-wrap: nowrap;
height: 50px;
}
.filter-options-right {
align-items: center;
display: flex;
flex-direction: row;
justify-content: flex-end;
flex-wrap: nowrap;
height: 50px;
}
.i-filter {
text-align: center;
margin-left: 5px;
margin-top: 1px;
}
.i-filter-inactive {
color: #9ea6b2 !important;
cursor: not-allowed !important;
}
.i-filter-active {
cursor: pointer !important;
}
.view-container-class {
min-height: 150px;
max-height: 200px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
word-break: break-all;
position: relative;
}
.span-div {
width: 135px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
</style>

71
frontend/src/views/panel/filter/filterMain/FilterFoot.vue Normal file
View File

@ -0,0 +1,71 @@
<template>
<el-row>
<el-col :span="24">
<div class="filter-content">
<el-card v-if="element.serviceName && element.serviceName !== 'timeDateWidget'" class="box-card">
<div style="margin-bottom: 10px;">
<span>默认值设置</span>
</div>
<div class="custom-component-class">
<component
:is="element.component"
:id="'component' + element.id"
class="component"
:style="element.style"
:element="element"
:in-draw="false"
/>
</div>
</el-card>
<el-card v-if="element.serviceName && element.serviceName === 'timeDateWidget'" class="box-card">
<de-date-default v-if="element.serviceName && element.serviceName === 'timeDateWidget'" :element="element" />
</el-card>
</div>
</el-col>
</el-row>
</template>
<script>
import DeDateDefault from '@/views/panel/filter/defaultValue/DeDateDefault'
export default {
name: 'FilterFoot',
components: {
DeDateDefault
},
props: {
element: {
type: Object,
default: null
}
},
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="scss" scoped>
.filter-content {
height: calc(50vh - 120px);
top: 160px;
}
.box-card {
width: 100%;
height: 100%;
}
</style>

147
frontend/src/views/panel/filter/filterMain/FilterHead.vue Normal file
View File

@ -0,0 +1,147 @@
<template>
<el-row>
<el-col :span="24">
<div class="filter-field">
<div class="field-content">
<div class="field-content-right">
<el-row style="display:flex;height: 32px;">
<draggable
v-model="element.options.attrs.dragItems"
group="dimension"
animation="300"
:move="onMove"
class="theme-drag"
style="width:100%;height: 100%;margin:0 10px;border-radius: 4px;overflow-x: auto;display: flex;align-items: center;"
@end="end2"
>
<div class="list-group-container">
<drag-item
v-for="(item,index) in element.options.attrs.dragItems"
:key="item.id"
:item="item"
:index="index"
@closeItem="closeItem"
/>
</div>
<transition-group class="list-group" :data-value="$t('panel.drag_here')" />
</draggable>
</el-row>
</div>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
import draggable from 'vuedraggable'
import DragItem from '@/components/DragItem'
export default {
name: 'FilterHead',
components: {
draggable,
DragItem
},
props: {
element: {
type: Object,
default: () => {}
}
},
data() {
return {
targets: []
}
},
watch: {
},
created() {
},
methods: {
onMove(e, originalEvent) {
// this.moveId = e.draggedContext.element.id
return true
},
end2(e) {},
closeItem(tag) {
const index = tag.index
this.element.options.attrs.dragItems.splice(index, 1)
}
}
}
</script>
<style lang="scss" scoped>
.filter-field {
border-radius: 4px;
height: 45px;
.field-content {
position: relative;
display: table;
width: 100%;
height: 100%;
white-space: nowrap;
.field-content-left {
width: 50px;
max-width: 50px;
position: relative;
display: table-cell;
vertical-align: middle;
margin: 0px;
padding: 8px;
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%;
}
}
}
.list-group-container:empty,.list-group-container>div:empty {
display: none;
}
.list-group:empty,
.list-group>div:empty {
display: inline-block;
width: 100%;
height: calc(100% - 13px);
}
.list-group:empty:before,
.list-group>div:empty:before {
content: attr(data-value);
}
.blackTheme .theme-drag {
background-color: var(--MainBG, #fff);
}
</style>