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

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

feat: 新增时间控件动态默认值
......@@ -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;
}
}
......@@ -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',
......
......@@ -40,7 +40,7 @@ export default {
props: {
element: {
type: Object,
default: null
default: () => {}
},
inDraw: {
type: Boolean,
......
<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])
}
}
}
}
......
<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
}
}
}
}
......
<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,6 +153,7 @@ export default {
},
search() {
this.$nextTick(() => {
this.$refs.form.validate(valid => {
if (!valid) {
return false
......@@ -145,6 +162,7 @@ export default {
this.setCondition()
this.$store.commit('recordStyleChange')
})
})
},
setCondition() {
const param = {
......@@ -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;
......
<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)
},
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)
'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
})
}
// 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')
},
......
......@@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
placeholder_min: 'denumberrange.please_key_min',
placeholder_max: 'denumberrange.please_key_max',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},
......
......@@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},
......
......@@ -13,9 +13,12 @@ const dialogPanel = {
multiple: false,
placeholder: 'denumberselect.placeholder',
datas: [],
viewIds: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},
......
......@@ -10,7 +10,9 @@ const dialogPanel = {
options: {
attrs: {
placeholder: 'deinputsearch.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
......
......@@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},
......
......@@ -16,7 +16,9 @@ const dialogPanel = {
datas: [],
key: 'id',
label: 'text',
value: 'id'
value: 'id',
fieldId: '',
dragItems: []
},
value: ''
},
......
......@@ -13,7 +13,9 @@ const dialogPanel = {
rangeSeparator: 'dedaterange.split_placeholder',
startPlaceholder: 'dedaterange.from_placeholder',
endPlaceholder: 'dedaterange.to_placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},
......
......@@ -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
......@@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
type: 'month',
placeholder: 'deyearmonth.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},
......
......@@ -11,7 +11,9 @@ const dialogPanel = {
attrs: {
type: 'year',
placeholder: 'deyear.placeholder',
viewIds: []
viewIds: [],
fieldId: '',
dragItems: []
},
value: ''
},
......
/* $--font-path: '~element-ui/lib/theme-chalk/fonts'; */
......@@ -149,8 +148,10 @@ 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;
}
......@@ -159,7 +160,8 @@ div:focus {
.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,14 +392,16 @@ 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;
}
th {
background-color: var(--TableBG) !important;
}
......@@ -406,6 +411,7 @@ div:focus {
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;
......@@ -415,6 +421,7 @@ div:focus {
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;
......@@ -425,6 +432,7 @@ div:focus {
background-color: var(--MainBG) !important;
border: none !important;
}
.blackTheme .el-input-number__increase {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
......@@ -460,13 +468,16 @@ div:focus {
color: var(--TableColor) !important;
background-color: var(--MainBG) !important;
}
.blackTheme .vue-treeselect__single-value {
color: var(--TableColor) !important;
}
.blackTheme .el-tag.el-tag--info {
background-color: var(--ContentBG);
border-color: var(--TableBorderColor);
color: var(--TableColor) !important; ;
color: var(--TableColor) !important;
;
}
.blackTheme .vue-treeselect__control {
......@@ -484,6 +495,7 @@ div:focus {
color: var(--TableColor) !important;
background-color: var(--ContentBG) !important;
}
.el-input-group__append {
background-color: var(--ContentBG) !important;
border-color: var(--ContentBG) !important;
......@@ -498,25 +510,30 @@ div:focus {
background-color: var(--MenuHovorBG) !important;
}
.blackTheme .is-current > .el-tree-node__content {
.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;
}
.blackTheme .el-collapse-item__wrap {
background-color: var(--ContentBG) !important;
border: none !important;
}
.blackTheme .content-container__header {
color: var(--TextPrimary);
}
.blackTheme .el-button--default {
background-color: var(--MainBG) !important;
color: var(--Main) !important;
}
/* .blackTheme .el-dialog {
background: var(--ContentBG) !important;
color: var(--TextPrimary) !important;
......@@ -533,7 +550,8 @@ div:focus {
.blackTheme .el-tabs__item:not(.is-active) {
color: var(--TextPrimary) !important;
}
.blackTheme .el-tabs__item:hover{
.blackTheme .el-tabs__item:hover {
color: var(--Main) !important;
}
......@@ -543,6 +561,7 @@ div:focus {
background-color: var(--TableBG) !important;
}
}
.blackTheme:not(.in-panel) .elx-table {
color: var(--TableColor) !important;
}
......@@ -550,12 +569,15 @@ div:focus {
.blackTheme:not(.in-panel) .elx-body--column {
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;
}
.blackTheme:not(.in-panel) tr.row--current {
background-color: var(--MainBG) !important;
}
.blackTheme:not(.in-panel) tr.elx-body--row:hover {
background-color: var(--TableBG) !important;
}
......@@ -565,8 +587,9 @@ div:focus {
}
.el-collapse-item__content {
padding-bottom: 0!important;
padding-bottom: 0 !important;
}
.el-collapse-item__header {
height: 34px !important;
line-height: 34px !important;
......@@ -576,8 +599,9 @@ div:focus {
}
.blackTheme .el-submenu__title {
color: var(--TextPrimary) ;
color: var(--TextPrimary);
}
.blackTheme .el-drawer__body {
background-color: var(--ContentBG);
}
......@@ -585,6 +609,7 @@ div:focus {
.blackTheme .el-select-dropdown__item.hover {
background-color: #171B22 !important;
}
.blackTheme .el-select-dropdown__item:hover {
background-color: #171B22 !important;
}
......@@ -608,15 +633,16 @@ div:focus {
}
.blackTheme .CodeMirror {
background-color: #000000 ;
background-color: #000000;
color: #ffffff;
}
.blackTheme .CodeMirror-code {
background-color: transparent;
}
.blackTheme .CodeMirror-gutters {
background-color: #000000 ;
background-color: #000000;
}
.blackTheme .CodeMirror-line {
......@@ -633,19 +659,20 @@ div:focus {
background-color: rgb(135 131 131 / 70%);
}
.blackTheme >>> ::-webkit-scrollbar-thumb {
.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 ;
background-color: #171b22;
color: #2681ff;
}
.el-button--primary {
color: #21333b;
background-color: #2681ff;
......@@ -661,12 +688,13 @@ div:focus {
.blackTheme .vue-treeselect__option:not(.vue-treeselect__option--highlight) {
color: #606266;
}
.blackTheme .vue-treeselect__option--highlight {
color: #2681ff;
background-color: #000000;
}
.blackTheme .el-table__body tr.current-row > td {
.blackTheme .el-table__body tr.current-row>td {
background-color: #324f62;
}
......@@ -674,7 +702,7 @@ div:focus {
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;
}
}
......@@ -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"
<filter-dialog
v-if="filterVisible && currentWidget"
:ref="'filter-setting-' + currentFilterCom.id"
:widget-info="currentWidget"
:element="currentFilterCom"
:in-draw="false"
@sure-button-status="sureStatusChange"
@re-fresh-component="reFreshComponent"
/>
</filter-dialog>
<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()
}
},
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
}
}
}
......
<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>
<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>
<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>
<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 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论