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

backend/src/main/java/io/dataease/controller/dataset/DataSetTableFieldController.java

@@ -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

@@ -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

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

frontend/src/components/widget/DeWidget/DeDate.vue

 <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

 <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

 <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

 <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

@@ -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

@@ -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

@@ -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

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

frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js

@@ -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

@@ -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

@@ -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

@@ -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

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

frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js

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

frontend/src/views/panel/edit/index.vue

@@ -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

+<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

+<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

+<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

+<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>