Skip to content

D
dataease
Unverified 提交 b3caf75a authored 作者: fit2cloud-chenyw's avatar fit2cloud-chenyw 提交者： GitHub
浏览文件
操作

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

feat: 新增时间控件动态默认值
上级 1fba59cc 21e5624c
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 886 行增加 和 136 行删除
backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java
浏览文件 @ b3caf75a
......@@ -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;
}
}
frontend/src/api/dataset/dataset.js
浏览文件 @ b3caf75a
......@@ -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',
......
frontend/src/components/dataease/DeOutWidget.vue
浏览文件 @ b3caf75a
......@@ -40,7 +40,7 @@ export default {
props: {
element: {
type: Object,
default: null
default: () => {}
},
inDraw: {
type: Boolean,
......
frontend/src/components/widget/DeWidget/DeDate.vue
浏览文件 @ b3caf75a
<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
}
},
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() {
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
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])
}
}
}
}
......
frontend/src/components/widget/DeWidget/DeInputSearch.vue
浏览文件 @ b3caf75a
<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
}
}
}
}
......
frontend/src/components/widget/DeWidget/DeNumberRange.vue
浏览文件 @ b3caf75a
<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;
......
frontend/src/components/widget/DeWidget/DeSelect.vue
浏览文件 @ b3caf75a
<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')
},
......
frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
浏览文件 @ b3caf75a
......@@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
placeholder_min: 'denumberrange.please_key_min',
placeholder_max: 'denumberrange.please_key_max',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},
......
frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
浏览文件 @ b3caf75a
......@@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},
......
frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
浏览文件 @ b3caf75a
......@@ -13,9 +13,12 @@ const dialogPanel = {
multiple: false,
placeholder: 'denumberselect.placeholder',
datas: [],
viewIds: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},
......
frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
浏览文件 @ b3caf75a
......@@ -10,7 +10,9 @@ const dialogPanel = {
options: {
attrs: {
placeholder: 'deinputsearch.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
......
frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
浏览文件 @ b3caf75a
......@@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},
......
frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
浏览文件 @ b3caf75a
......@@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},
......
frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
浏览文件 @ b3caf75a
......@@ -13,7 +13,9 @@ const dialogPanel = {
rangeSeparator: 'dedaterange.split_placeholder',
startPlaceholder: 'dedaterange.from_placeholder',
endPlaceholder: 'dedaterange.to_placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},
......
frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
浏览文件 @ b3caf75a
......@@ -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
frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
浏览文件 @ b3caf75a
......@@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
type: 'month',
placeholder: 'deyearmonth.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},
......
frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
浏览文件 @ b3caf75a
......@@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
type: 'year',
placeholder: 'deyear.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},
......
frontend/src/views/panel/edit/index.vue
浏览文件 @ b3caf75a
......@@ -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
}
}
}
......
frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue 0 → 100644
浏览文件 @ b3caf75a
<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>
frontend/src/views/panel/filter/filterMain/FilterControl.vue 0 → 100644
浏览文件 @ b3caf75a
<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>
frontend/src/views/panel/filter/filterMain/FilterFoot.vue 0 → 100644
浏览文件 @ b3caf75a
<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>
frontend/src/views/panel/filter/filterMain/FilterHead.vue 0 → 100644
浏览文件 @ b3caf75a
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论