Merge branch 'dev' of github.com:dataease/dataease into dev

backend/src/main/java/io/dataease/base/mapper/ext/ExtVAuthModelMapper.xml

@@ -98,9 +98,6 @@
 				#{item}
 			</foreach>
 		</if>
-		<if test='record.modelType != null and record.modelType == "dataset"'>
-			or (v_auth_model.`model_inner_type` = 'group' and v_auth_model.model_type = 'dataset')
-		</if>
 		ORDER BY v_auth_model.node_type desc, CONVERT(v_auth_model.label using gbk) asc
   </select>
 

backend/src/main/java/io/dataease/service/dataset/DataSetTableService.java

@@ -456,12 +456,12 @@ public class DataSetTableService {
         RowPermissionService rowPermissionService = SpringContextUtil.getBean(RowPermissionService.class);
         CurrentUserDto user = AuthUtils.getUser();
         userId = user != null ? user.getUserId() : userId;
-        List<Long> roleIds ;
+        List<Long> roleIds;
-        Long deptId ;
+        Long deptId;
-        if(user != null){
+        if (user != null) {
             deptId = user.getDeptId();
             roleIds = user.getRoles().stream().map(CurrentRoleDto::getId).collect(Collectors.toList());
-        }else {
+        } else {
             deptId = authUserService.getUserById(userId).getDeptId();
             roleIds = authUserService.roles(userId).stream().map(r -> Long.valueOf(r)).collect(Collectors.toList());
         }
@@ -491,20 +491,24 @@ public class DataSetTableService {
 
     public List<ChartFieldCustomFilterDTO> getCustomFilters(List<DatasetTableField> fields, DatasetTable datasetTable, Long user) {
         List<ChartFieldCustomFilterDTO> customFilter = new ArrayList<>();
-        for (DatasetRowPermissions datasetRowPermissions : rowPermissions(datasetTable.getId(), user)){
+        for (DatasetRowPermissions datasetRowPermissions : rowPermissions(datasetTable.getId(), user)) {
             ChartFieldCustomFilterDTO dto = new ChartFieldCustomFilterDTO();
             DatasetTableField field = getFieldById(fields, datasetRowPermissions.getDatasetFieldId());
-            if(field == null){continue;}
+            if (field == null) {
+                continue;
+            }
             dto.setField(field);
             dto.setId(field.getId());
             dto.setFilterType(datasetRowPermissions.getFilterType());
-            if(datasetRowPermissions.getFilterType().equalsIgnoreCase("logic")){
+            if (datasetRowPermissions.getFilterType().equalsIgnoreCase("logic")) {
                 List<ChartCustomFilterItemDTO> lists = JSONObject.parseArray(datasetRowPermissions.getFilter(), ChartCustomFilterItemDTO.class);
-                lists.forEach(chartCustomFilterDTO -> { chartCustomFilterDTO.setFieldId(field.getId()); });
+                lists.forEach(chartCustomFilterDTO -> {
+                    chartCustomFilterDTO.setFieldId(field.getId());
+                });
                 dto.setFilter(lists);
                 dto.setLogic(datasetRowPermissions.getLogic());
                 customFilter.add(dto);
-            }else {
+            } else {
                 dto.setEnumCheckField(Arrays.asList(datasetRowPermissions.getEnumCheckField().split(",").clone()));
                 customFilter.add(dto);
             }
@@ -1308,9 +1312,9 @@ public class DataSetTableService {
                     DatasetTableField parentField = dataSetTableFieldsService.get(unionItemDTO.getParentField().getId());
                     DatasetTableField currentField = dataSetTableFieldsService.get(unionItemDTO.getCurrentField().getId());
 
-                    join.append(String.format(keyword, parentTableName)).append(".").append(parentField.getOriginName())
+                    join.append(String.format(keyword, parentTableName)).append(".").append(String.format(keyword, parentField.getOriginName()))
                             .append(" = ")
-                            .append(String.format(keyword, currentTableName)).append(".").append(currentField.getOriginName());
+                            .append(String.format(keyword, currentTableName)).append(".").append(String.format(keyword, currentField.getOriginName()));
                     if (i < unionParamDTO.getUnionFields().size() - 1) {
                         join.append(" AND ");
                     }

frontend/src/components/canvas/components/Editor/ComponentWrapper.vue

@@ -15,6 +15,7 @@
       :out-style="config.style"
       :element="config"
       :in-screen="inScreen"
+      :edit-mode="'preview'"
       :h="config.style.height"
     />
     <component

frontend/src/components/canvas/utils/utils.js

@@ -1,4 +1,7 @@
-import { BASE_MOBILE_STYLE, HYPERLINKS } from '@/components/canvas/custom-component/component-list'
+import {
+  BASE_MOBILE_STYLE,
+  HYPERLINKS
+} from '@/components/canvas/custom-component/component-list'
 
 export function deepCopy(target) {
   if (typeof target === 'object') {
@@ -61,7 +64,7 @@ export function mobile2MainCanvas(mainSource, mobileSource) {
 export function panelInit(componentDatas) {
   componentDatas.forEach(item => {
     if (item.component && item.component === 'de-date') {
-      if (item.options.attrs && !item.options.attrs.default) {
+      if (item.serviceName === 'timeDateWidget' && item.options.attrs && !item.options.attrs.default) {
         item.options.attrs.default = {
           isDynamic: false,
           dkey: 0,
@@ -70,6 +73,18 @@ export function panelInit(componentDatas) {
           dynamicSuffix: 'before'
         }
       }
+      if (item.serviceName === 'timeDateRangeWidget' && item.options.attrs && !item.options.attrs.default) {
+        item.options.attrs.default = {
+          isDynamic: false,
+          dkey: 0,
+          sDynamicPrefix: 1,
+          sDynamicInfill: 'day',
+          sDynamicSuffix: 'before',
+          eDynamicPrefix: 1,
+          eDynamicInfill: 'day',
+          eDynamicSuffix: 'after'
+        }
+      }
     }
     if (item.filters && item.filters.length > 0) {
       item.filters = []

frontend/src/components/dataease/DeOutWidget.vue

@@ -44,6 +44,7 @@
 
 <script>
 import elementResizeDetectorMaker from 'element-resize-detector'
+import { mapState } from 'vuex'
 export default {
   name: 'DeOutWidget',
   props: {
@@ -63,6 +64,11 @@ export default {
     h: {
       type: Number,
       default: 50
+    },
+    editMode: {
+      type: String,
+      require: false,
+      default: 'edit'
     }
   },
   data() {
@@ -70,26 +76,30 @@ export default {
       inputMaxSize: 46,
       inputLargeSize: 42,
       inputSmallSize: 38,
-      inputMiniSize: 34,
+      inputMiniSize: 32,
       options: null,
       showNumber: false,
-      mainClass: ''
+      mainClass: '',
+      mainHeight: 75,
+      duHeight: 46
     }
   },
   computed: {
     sizeInfo() {
       let size
-      if (this.h > this.inputMaxSize) {
+      if (this.duHeight > this.inputMaxSize) {
-        return size
+      } else if (this.duHeight > this.inputLargeSize) {
-      } else if (this.h > this.inputLargeSize) {
         size = 'medium'
-      } else if (this.h > this.inputSmallSize) {
+      } else if (this.duHeight > this.inputSmallSize) {
         size = 'small'
       } else {
         size = 'mini'
       }
       return size
-    }
+    },
+    ...mapState([
+      'curCanvasScale'
+    ])
   },
   mounted() {
     this.watchSize()
@@ -102,12 +112,16 @@ export default {
     watchSize() {
       const erd = elementResizeDetectorMaker()
       erd.listenTo(this.$refs.myContainer, ele => {
+        const deContentContainer = this.$refs.deContentContainer
+        const height = ele.offsetHeight
+        this.mainHeight = height
         if (!this.element.options.attrs.title) {
+          this.duHeight = this.mainHeight
+          deContentContainer.style.marginLeft = '0px'
           return
         }
-        const height = ele.offsetHeight
         const titleWidth = this.$refs.deTitle.offsetWidth
-        const deContentContainer = this.$refs.deContentContainer
+        this.duHeight = height - titleWidth
         this.$nextTick(() => {
           let min = this.element.style.fontSize * 2 + 50
           if (this.element.component === 'de-number-range') {

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

@@ -72,7 +72,8 @@ export default {
       this.setCondition()
     },
     'defaultValueStr': function(value, old) {
-      if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
+      if ((this.element.serviceName === 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') &&
+          this.element.options.attrs.default.isDynamic) {
         // 如果设置了动态时间 不做任何操作
         return
       }
@@ -82,7 +83,7 @@ export default {
     },
     'defaultoptions': function(val, old) {
       // console.log('default chaneg')
-      if (this.element.serviceName !== 'timeDateWidget') {
+      if (this.element.serviceName !== 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') {
         if (!this.element.options.attrs.default.isDynamic) {
           this.values = this.fillValueDerfault()
           this.dateChange(this.values)
@@ -96,7 +97,8 @@ export default {
     }
   },
   created() {
-    if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default && this.element.options
+    if ((this.element.serviceName === 'timeDateWidget' || this.element.serviceName === 'timeDateRangeWidget') && this
+      .element.options.attrs.default && this.element.options
       .attrs.default.isDynamic) {
       if (this.element.options.attrs.default) {
         const widget = ApplicationContext.getService(this.element.serviceName)
@@ -177,10 +179,16 @@ export default {
     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 === '' || defaultV === '[object Object]') { return [] }
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+            '[object Object]') {
+          return []
+        }
         return defaultV.split(',').map(item => parseFloat(item))
       } else {
-        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV === '[object Object]') { return null }
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '' || defaultV ===
+            '[object Object]') {
+          return null
+        }
         return parseFloat(defaultV.split(',')[0])
       }
     }

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

@@ -1,4 +1,6 @@
-import { WidgetService } from '../service/WidgetService'
+import {
+  WidgetService
+} from '../service/WidgetService'
 
 const leftPanel = {
   icon: 'iconfont icon-riqi',
@@ -15,7 +17,17 @@ const dialogPanel = {
       endPlaceholder: 'dedaterange.to_placeholder',
       viewIds: [],
       fieldId: '',
-      dragItems: []
+      dragItems: [],
+      default: {
+        isDynamic: false,
+        dkey: 0,
+        sDynamicPrefix: 1,
+        sDynamicInfill: 'day',
+        sDynamicSuffix: 'before',
+        eDynamicPrefix: 1,
+        eDynamicInfill: 'day',
+        eDynamicSuffix: 'after'
+      }
     },
     value: ''
   },
@@ -40,7 +52,9 @@ const drawPanel = {
 
 class TimeDateRangeServiceImpl extends WidgetService {
   constructor(options = {}) {
-    Object.assign(options, { name: 'timeDateRangeWidget' })
+    Object.assign(options, {
+      name: 'timeDateRangeWidget'
+    })
     super(options)
     this.filterDialog = true
     this.showSwitch = false
@@ -66,6 +80,150 @@ class TimeDateRangeServiceImpl extends WidgetService {
       return field['deType'] === 1
     })
   }
+  getStartDayOfWeek() {
+    var now = new Date() // 当前日期
+    var nowDayOfWeek = now.getDay()
+    var nowDay = now.getDate() // 当前日
+    var nowMonth = now.getMonth() // 当前月
+    var day = nowDayOfWeek || 7
+    return new Date(now.getFullYear(), nowMonth, nowDay + 1 - day)
+  }
+  getEndDayOfWeek() {
+    var now = new Date() // 当前日期
+    var nowDayOfWeek = now.getDay()
+    var nowDay = now.getDate() // 当前日
+    var nowMonth = now.getMonth() // 当前月
+    var day = nowDayOfWeek || 7
+    return new Date(now.getFullYear(), nowMonth, nowDay + 7 - day)
+  }
+  getStartDayOfMonth() {
+    var now = new Date()
+    var nowMonth = now.getMonth() // 当前月
+    var monthStartDate = new Date(now.getFullYear(), nowMonth, 1)
+    return monthStartDate
+  }
+  getEndDayOfMonth() {
+    var now = new Date()
+    var nowMonth = now.getMonth() // 当前月
+    var monthEndDate = new Date(now.getFullYear(), nowMonth, this.getMonthDays())
+    return monthEndDate
+  }
+  getStartQuarter() {
+    var now = new Date()
+    var nowMonth = now.getMonth()
+    const startMonth = Math.floor((nowMonth / 3)) * 3
+    return new Date(now.getFullYear(), startMonth, 1)
+  }
+  getEndQuarter() {
+    var now = new Date()
+    var nowMonth = now.getMonth()
+    const endMonth = Math.floor((nowMonth / 3)) * 3 + (nowMonth % 3)
+    const days = (endMonth === 5 || endMonth === 8) ? 30 : 31
+    return new Date(now.getFullYear(), endMonth, days)
+  }
+  getStartYear() {
+    var now = new Date()
+    return new Date(now.getFullYear(), 0, 1)
+  }
+  getEndYear() {
+    var now = new Date()
+    return new Date(now.getFullYear(), 11, 31)
+  }
+  /**
+   * 获得本月天数
+   *
+   * @returns
+   */
+  getMonthDays() {
+    var now = new Date()
+    var nowMonth = now.getMonth() // 当前月
+    var monthStartDate = new Date(now.getFullYear(), nowMonth, 1)
+    var monthEndDate = new Date(now.getFullYear(), nowMonth + 1, 1)
+    var days = (monthEndDate - monthStartDate) / (1000 * 60 * 60 * 24)
+    return days
+  }
+  customTime(dynamicPrefix, dynamicInfill, 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(dynamicSuffix === 'before' ? (nowYear - dynamicPrefix) : (nowYear + dynamicPrefix), nowMonth, nowDate).getTime()
+    }
+  }
+  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 [this.getStartDayOfWeek().getTime(), this.getEndDayOfWeek().getTime()]
+    }
+
+    if (element.options.attrs.default.dkey === 1) {
+      return [this.getStartDayOfMonth().getTime(), this.getEndDayOfMonth().getTime()]
+    }
+
+    if (element.options.attrs.default.dkey === 2) {
+      return [this.getStartQuarter().getTime(), this.getEndQuarter().getTime()]
+    }
+    if (element.options.attrs.default.dkey === 3) {
+      return [this.getStartYear().getTime(), this.getEndYear().getTime()]
+    }
+
+    if (element.options.attrs.default.dkey === 4) {
+      const sDynamicPrefix = parseInt(element.options.attrs.default.sDynamicPrefix)
+      const sDynamicInfill = element.options.attrs.default.sDynamicInfill
+      const sDynamicSuffix = element.options.attrs.default.sDynamicSuffix
+
+      const eDynamicPrefix = parseInt(element.options.attrs.default.eDynamicPrefix)
+      const eDynamicInfill = element.options.attrs.default.eDynamicInfill
+      const eDynamicSuffix = element.options.attrs.default.eDynamicSuffix
+      const startTime = this.customTime(sDynamicPrefix, sDynamicInfill, sDynamicSuffix)
+      const endTime = this.customTime(eDynamicPrefix, eDynamicInfill, eDynamicSuffix)
+      return [startTime, endTime]
+    }
+  }
+  validDynamicValue(element) {
+    if (!element.options.attrs.default.isDynamic) return true
+    if (element.options.attrs.default.dkey !== 4) return true
+    try {
+      const arr = this.dynamicDateFormNow(element)
+      return arr[0] < arr[1]
+    } catch (error) {
+      return false
+    }
+  }
 }
 const timeDateRangeServiceImpl = new TimeDateRangeServiceImpl()
 export default timeDateRangeServiceImpl

frontend/src/lang/en.js

@@ -1729,5 +1729,28 @@ export default {
     complex_repeat: 'Complex repeat',
     pixel_tip: 'Please code custom pixel(such as 2560 * 1600) or select'
 
+  },
+  dynamic_time: {
+    set_default: 'Set Default',
+    fix: 'Fixed Time',
+    dynamic: 'Dynamic Time',
+    relative: 'Relative Current',
+    today: 'Today',
+    yesterday: 'Yesterday',
+    firstOfMonth: 'Month Beginning',
+    custom: 'Custom',
+    date: 'date',
+    week: 'week',
+    month: 'Month',
+    year: 'Year',
+    before: 'Before',
+    after: 'After',
+    preview: 'Preview',
+    set: 'Set',
+
+    cweek: 'This Week',
+    cmonth: 'This Month',
+    cquarter: 'This Quarter',
+    cyear: 'This Year'
   }
 }

frontend/src/lang/tw.js

@@ -1741,5 +1741,28 @@ export default {
     complex_repeat: '複雜重複',
     pixel_tip: '可直接輸入分辨率(例如:2560 * 1600)或者選擇'
 
+  },
+  dynamic_time: {
+    set_default: '設置默認值',
+    fix: '固定時間',
+    dynamic: '動態時間',
+    relative: '相對當前',
+    today: '今天',
+    yesterday: '昨天',
+    firstOfMonth: '月初',
+    custom: '自定義',
+    date: '日',
+    week: '周',
+    month: '月',
+    year: '年',
+    before: '前',
+    after: '後',
+    preview: '預覽',
+    set: '設置',
+
+    cweek: '本周',
+    cmonth: '本月',
+    cquarter: '本季',
+    cyear: '本年'
   }
 }

frontend/src/lang/zh.js

@@ -1751,5 +1751,28 @@ export default {
     complex_repeat: '复杂重复',
     pixel_tip: '可直接输入自定义分辨率(例如:2560 * 1600)或选择'
 
+  },
+  dynamic_time: {
+    set_default: '设置默认值',
+    fix: '固定时间',
+    dynamic: '动态时间',
+    relative: '相对当前',
+    today: '今天',
+    yesterday: '昨天',
+    firstOfMonth: '月初',
+    custom: '自定义',
+    date: '日',
+    week: '周',
+    month: '月',
+    year: '年',
+    before: '前',
+    after: '后',
+    preview: '预览',
+    set: '设置',
+
+    cweek: '本周',
+    cmonth: '本月',
+    cquarter: '本季',
+    cyear: '本年'
   }
 }

frontend/src/styles/index.scss

@@ -94,7 +94,7 @@ div:focus {
 
 .de-filter-dialog {
   min-width: 500px !important;
-  width: 50% !important;
+  width: 55% !important;
 
   .el-dialog__header {
     // background-color: #f4f4f5;

frontend/src/views/panel/filter/defaultValue/DeDateDefault.vue

@@ -2,20 +2,20 @@
   <div v-if="element">
     <el-form ref="form" :model="element.options.attrs.default" label-width="100px">
 
-      <el-form-item label="设定默认值">
+      <el-form-item :label="$t('dynamic_time.set_default')">
         <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
-          <el-radio :label="false">固定时间</el-radio>
+          <el-radio :label="false">{{ $t('dynamic_time.fix') }}</el-radio>
-          <el-radio :label="true">动态时间</el-radio>
+          <el-radio :label="true">{{ $t('dynamic_time.dynamic') }}</el-radio>
         </el-radio-group>
       </el-form-item>
 
-      <el-form-item v-if="element.options.attrs.default.isDynamic" label="相对当前时间">
+      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.relative')">
 
         <el-select v-model="element.options.attrs.default.dkey" placeholder="" class="relative-time" @change="dkeyChange">
-          <el-option label="今天" :value="0" />
+          <el-option :label="$t('dynamic_time.today')" :value="0" />
-          <el-option label="昨天" :value="1" />
+          <el-option :label="$t('dynamic_time.yesterday')" :value="1" />
-          <el-option label="本月首日" :value="2" />
+          <el-option :label="$t('dynamic_time.firstOfMonth')" :value="2" />
-          <el-option label="自定义" :value="3" />
+          <el-option :label="$t('dynamic_time.custom')" :value="3" />
         </el-select>
 
       </el-form-item>
@@ -28,24 +28,24 @@
 
         <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="$t('dynamic_time.date')" value="day" />
-            <el-option label="周" value="week" />
+            <el-option :label="$t('dynamic_time.week')" value="week" />
-            <el-option label="月" value="month" />
+            <el-option :label="$t('dynamic_time.month')" value="month" />
-            <el-option label="年" value="year" />
+            <el-option :label="$t('dynamic_time.year')" 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="$t('dynamic_time.before')" value="before" />
-            <el-option label="后" value="after" />
+            <el-option :label="$t('dynamic_time.after')" value="after" />
           </el-select>
         </el-form-item>
 
       </div>
 
-      <el-form-item v-if="element.options.attrs.default.isDynamic" label="预览">
+      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
         <el-date-picker
           v-model="dval"
           type="date"
@@ -55,7 +55,7 @@
         />
       </el-form-item>
 
-      <el-form-item v-else label="设置">
+      <el-form-item v-else :label="$t('dynamic_time.set')">
         <component
           :is="element.component"
           :id="'component' + element.id"

frontend/src/views/panel/filter/defaultValue/DeDateRangeDefault.vue

@@ -0,0 +1,243 @@
+<template>
+  <div v-if="element">
+    <el-form ref="form" :model="element.options.attrs.default" label-width="100px">
+
+      <el-form-item :label="$t('dynamic_time.set_default')">
+        <el-radio-group v-model="element.options.attrs.default.isDynamic" @change="dynamicChange">
+          <el-radio :label="false">{{ $t('dynamic_time.fix') }}</el-radio>
+          <el-radio :label="true">{{ $t('dynamic_time.dynamic') }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+
+      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.relative')">
+
+        <el-select
+          v-model="element.options.attrs.default.dkey"
+          placeholder=""
+          class="relative-time"
+          @change="dkeyChange"
+        >
+          <el-option :label="$t('dynamic_time.cweek')" :value="0" />
+          <el-option :label="$t('dynamic_time.cmonth')" :value="1" />
+          <el-option :label="$t('dynamic_time.cquarter')" :value="2" />
+          <el-option :label="$t('dynamic_time.cyear')" :value="3" />
+
+          <el-option :label="$t('dynamic_time.custom')" :value="4" />
+        </el-select>
+
+      </el-form-item>
+
+      <div class="inline-first">
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          :label="$t('dataset.start_time')"
+        >
+          <el-input
+            v-model="element.options.attrs.default.sDynamicPrefix"
+            type="number"
+            size="mini"
+            :min="1"
+            :max="10"
+            @input="sDynamicPrefixChange"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          label=""
+          class="no-label-item"
+        >
+          <el-select
+            v-model="element.options.attrs.default.sDynamicInfill"
+            size="mini"
+            placeholder=""
+            @change="dynamicInfillChange"
+          >
+            <el-option :label="$t('dynamic_time.date')" value="day" />
+            <el-option :label="$t('dynamic_time.week')" value="week" />
+            <el-option :label="$t('dynamic_time.month')" value="month" />
+            <el-option :label="$t('dynamic_time.year')" value="year" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          label=""
+          class="no-label-item"
+        >
+
+          <el-select
+            v-model="element.options.attrs.default.sDynamicSuffix"
+            size="mini"
+            placeholder=""
+            @change="dynamicSuffixChange"
+          >
+            <el-option :label="$t('dynamic_time.before')" value="before" />
+            <el-option :label="$t('dynamic_time.after')" value="after" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+
+      <div class="inline-first">
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          :label="$t('dataset.end_time')"
+        >
+          <el-input
+            v-model="element.options.attrs.default.eDynamicPrefix"
+            type="number"
+            size="mini"
+            :min="1"
+            :max="10"
+            @input="eDynamicPrefixChange"
+          />
+        </el-form-item>
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          label=""
+          class="no-label-item"
+        >
+          <el-select
+            v-model="element.options.attrs.default.eDynamicInfill"
+            size="mini"
+            placeholder=""
+            @change="dynamicInfillChange"
+          >
+            <el-option :label="$t('dynamic_time.date')" value="day" />
+            <el-option :label="$t('dynamic_time.week')" value="week" />
+            <el-option :label="$t('dynamic_time.month')" value="month" />
+            <el-option :label="$t('dynamic_time.year')" value="year" />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item
+          v-if="element.options.attrs.default.isDynamic && element.options.attrs.default.dkey === 4"
+          label=""
+          class="no-label-item"
+        >
+
+          <el-select
+            v-model="element.options.attrs.default.eDynamicSuffix"
+            size="mini"
+            placeholder=""
+            @change="dynamicSuffixChange"
+          >
+            <el-option :label="$t('dynamic_time.before')" value="before" />
+            <el-option :label="$t('dynamic_time.after')" value="after" />
+          </el-select>
+        </el-form-item>
+
+      </div>
+
+      <el-form-item v-if="element.options.attrs.default.isDynamic" :label="$t('dynamic_time.preview')">
+        <el-date-picker
+          v-model="dval"
+          :type="element.options.attrs.type"
+          disabled
+          class="relative-time"
+          placeholder=""
+        />
+      </el-form-item>
+
+      <el-form-item v-else :label="$t('dynamic_time.set')">
+        <component
+          :is="element.component"
+          :id="'component' + element.id"
+          :style="element.style"
+          :element="element"
+          class="relative-time"
+          :in-draw="false"
+        />
+      </el-form-item>
+
+    </el-form>
+  </div>
+</template>
+
+<script>
+import {
+  ApplicationContext
+} from '@/utils/ApplicationContext'
+import bus from '@/utils/bus'
+export default {
+  name: 'DeDateRangeDefault',
+  props: {
+
+    element: {
+      type: Object,
+      default: null
+    }
+  },
+  data() {
+    return {
+      dval: null
+    }
+  },
+  created() {
+    this.setDval()
+  },
+  methods: {
+    dynamicChange(value) {
+      this.setDval()
+    },
+    dkeyChange(value) {
+      this.setDval()
+    },
+
+    sDynamicPrefixChange(value) {
+      if (value < 1) {
+        value = 1
+        this.element.options.attrs.default.sDynamicPrefix = 1
+      }
+      this.setDval()
+    },
+    eDynamicPrefixChange(value) {
+      if (value < 1) {
+        value = 1
+        this.element.options.attrs.default.eDynamicPrefix = 1
+      }
+      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
+      bus.$emit('valid-values-change', (!time || time.length === 0 || time[1] > time[0]))
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+  .inline-first,
+  .inline {
+    display: flex;
+
+    >>>.el-input--mini {
+      min-width: 70px;
+    }
+
+  }
+
+  .inline-first {
+    .el-form-item {
+      margin-bottom: 5px !important;
+    }
+  }
+
+  .relative-time {
+    width: 100%;
+  }
+
+</style>

frontend/src/views/panel/filter/filterDialog.vue

@@ -178,7 +178,7 @@ import draggable from 'vuedraggable'
 import FilterHead from './filterMain/FilterHead'
 import FilterControl from './filterMain/FilterControl'
 import FilterFoot from './filterMain/FilterFoot'
-
+import bus from '@/utils/bus'
 import {
   mapState
 } from 'vuex'
@@ -319,6 +319,11 @@ export default {
     this.initWithField()
     this.loadViews()
   },
+  mounted() {
+    bus.$on('valid-values-change', valid => {
+      this.validateFilterValue(valid)
+    })
+  },
 
   methods: {
     initWithField() {
@@ -550,12 +555,23 @@ export default {
     },
 
     enableSureButton() {
-      const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems.length > 0
+      let valid = true
-      this.$emit('sure-button-status', enable)
+      const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems
+        .length > 0
+      if (this.widget.validDynamicValue) {
+        valid = this.widget.validDynamicValue(this.currentElement)
+      }
+      this.$emit('sure-button-status', enable && valid)
     },
 
     getElementInfo() {
       return this.currentElement
+    },
+
+    validateFilterValue(valid) {
+      const enable = this.currentElement.options.attrs.dragItems && this.currentElement.options.attrs.dragItems
+        .length > 0
+      this.$emit('sure-button-status', enable && valid)
     }
 
   }

frontend/src/views/panel/filter/filterMain/FilterControl.vue

@@ -67,6 +67,8 @@
 </template>
 
 <script>
+import {mapState} from "vuex";
+
 export default {
   name: 'FilterControl',
   props: {
@@ -116,7 +118,7 @@ export default {
     showTitleChange(value) {
       if (!value) {
         this.attrs.title = ''
-        // this.componentInfo.style.backgroundColor = ''
+        this.element.style.backgroundColor = ''
       }
       this.fillAttrs2Filter()
     },

frontend/src/views/panel/filter/filterMain/FilterFoot.vue

@@ -2,7 +2,10 @@
   <el-row>
     <el-col :span="24">
       <div class="filter-content">
-        <el-card v-if="element.serviceName && element.serviceName !== 'timeDateWidget'" class="box-card">
+        <el-card
+          v-if="element.serviceName && element.serviceName !== 'timeDateWidget' && element.serviceName !== 'timeDateRangeWidget'"
+          class="box-card"
+        >
           <div style="margin-bottom: 10px;">
             <span>默认值设置</span>
           </div>
@@ -23,6 +26,13 @@
           <de-date-default v-if="element.serviceName && element.serviceName === 'timeDateWidget'" :element="element" />
         </el-card>
 
+        <el-card v-if="element.serviceName && element.serviceName === 'timeDateRangeWidget'" class="box-card">
+          <de-date-range-default
+            v-if="element.serviceName && element.serviceName === 'timeDateRangeWidget'"
+            :element="element"
+          />
+        </el-card>
+
       </div>
     </el-col>
   </el-row>
@@ -31,10 +41,12 @@
 
 <script>
 import DeDateDefault from '@/views/panel/filter/defaultValue/DeDateDefault'
+import DeDateRangeDefault from '@/views/panel/filter/defaultValue/DeDateRangeDefault'
 export default {
   name: 'FilterFoot',
   components: {
-    DeDateDefault
+    DeDateDefault,
+    DeDateRangeDefault
   },
   props: {