feat: 新增时间控件动态默认值

2026-05-24 06:18:10 +08:00 · 2021-12-16 18:16:24 +08:00
parent 37cb956213
commit 3a3055280f
25 changed files with 1245 additions and 812 deletions
--- a/frontend/src/components/widget/DeWidget/DeDate.vue
+++ b/frontend/src/components/widget/DeWidget/DeDate.vue
@@ -1,13 +1,13 @@
 <template>
  <el-date-picker
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null"
    ref="dateRef"
    v-model="values"
-    :type="options.attrs.type"
-    :range-separator="$t(options.attrs.rangeSeparator)"
-    :start-placeholder="$t(options.attrs.startPlaceholder)"
-    :end-placeholder="$t(options.attrs.endPlaceholder)"
-    :placeholder="$t(options.attrs.placeholder)"
+    :type="element.options.attrs.type"
+    :range-separator="$t(element.options.attrs.rangeSeparator)"
+    :start-placeholder="$t(element.options.attrs.startPlaceholder)"
+    :end-placeholder="$t(element.options.attrs.endPlaceholder)"
+    :placeholder="$t(element.options.attrs.placeholder)"
    :append-to-body="inScreen"
    style="min-height: 36px;"
    value-format="timestamp"
@@ -16,6 +16,7 @@
 </template>

 <script>
+import { ApplicationContext } from '@/utils/ApplicationContext'
 import { timeSection } from '@/utils'
 export default {

@@ -36,20 +37,53 @@ export default {
  },
  data() {
    return {
-      options: null,
      operator: 'between',
      values: null
    }
  },
-  created() {
-    this.options = this.element.options
-
-    if (this.options.value) {
-      if (this.options.attrs.type !== 'daterange') {
-        this.values = Array.isArray(this.options.value) ? this.options.value[0] : this.options.value
-      } else {
-        this.values = this.options.value
+  computed: {
+    defaultoptions() {
+      if (!this.element || !this.element.options || !this.element.options.attrs.default) return ''
+      return JSON.stringify(this.element.options.attrs.default)
+    }
+  },
+  watch: {
+    'element.options.value': function(value, old) {
+      if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
+        // 如果设置了动态时间 不做任何操作
+        return
      }
+      if (value === old) return
+      this.values = this.fillValueDerfault()
+      this.dateChange(value)
+    },
+    'defaultoptions': function(val, old) {
+      // console.log('default chaneg')
+      if (this.element.serviceName !== 'timeDateWidget') {
+        if (!this.element.options.attrs.default.isDynamic) {
+          this.values = this.fillValueDerfault()
+          this.dateChange(this.values)
+          return
+        }
+      }
+      if (val === old) return
+      const widget = ApplicationContext.getService(this.element.serviceName)
+      this.values = widget.dynamicDateFormNow(this.element)
+      this.dateChange(this.values)
+    }
+  },
+  created() {
+    if (this.element.serviceName === 'timeDateWidget' && this.element.options.attrs.default.isDynamic) {
+      if (this.element.options.attrs.default) {
+        const widget = ApplicationContext.getService(this.element.serviceName)
+        this.values = widget.dynamicDateFormNow(this.element)
+        this.dateChange(this.values)
+      }
+      return
+    }
+    if (this.element.options.value) {
+      this.values = this.fillValueDerfault()
+      this.dateChange(this.values)
    }
  },
  methods: {
@@ -57,32 +91,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
        }
@@ -94,11 +131,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])
+      }
    }
  }
 }
--- a/frontend/src/components/widget/DeWidget/DeInputSearch.vue
+++ b/frontend/src/components/widget/DeWidget/DeInputSearch.vue
@@ -1,10 +1,11 @@
 <template>

  <el-input
-    v-if="options!== null && options.attrs!==null"
+    v-if="element.options!== null && element.options.attrs!==null"
    v-model="value"
    resize="vertical"
-    :placeholder="$t(options.attrs.placeholder)"
+    :placeholder="$t(element.options.attrs.placeholder)"
+    @input="valueChange"
    @keypress.enter.native="search"
    @dblclick="setEdit"
  >
@@ -29,38 +30,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
+      }
    }
  }
 }
--- a/frontend/src/components/widget/DeWidget/DeNumberRange.vue
+++ b/frontend/src/components/widget/DeWidget/DeNumberRange.vue
@@ -1,13 +1,13 @@
 <template>

-  <el-form v-if="options!== null && options.attrs!==null" ref="form" :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)" @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)" @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>
@@ -32,7 +32,6 @@ export default {

  data() {
    return {
-      options: null,
      operator: 'between',
      values: null,
      canEdit: false,
@@ -54,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()
@@ -65,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: {
@@ -136,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() {
@@ -153,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
@@ -178,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
+      }
    }
  }
 }
--- a/frontend/src/components/widget/DeWidget/DeSelect.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelect.vue
@@ -1,38 +1,38 @@
 <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"
    @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,
@@ -46,54 +46,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
@@ -108,11 +134,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')
    },
--- a/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
+++ b/frontend/src/components/widget/DeWidget/DeSelectGrid.vue
@@ -1,39 +1,24 @@
 <template>

-  <div v-if="options!== null && options.attrs!==null" class="de-select-grid-class">
+  <div v-if="element.options!== null && element.options.attrs!==null && show" class="de-select-grid-class">
    <div class="de-select-grid-search">
      <el-input v-model="keyWord" :placeholder="$t('deinputsearch.placeholder')" size="mini" prefix-icon="el-icon-search" clearable />
    </div>
    <div class="list">
-      <el-tree
-        v-if="options!== null && options.attrs!==null"
-        ref="deSelectGrid"
-        :data="(options.attrs.multiple ? [allNode, ...options.attrs.datas] : options.attrs.datas).filter(node => node.text.includes(keyWord))"
-        :props="defaultProp"
-        :indent="0"
-        class="de-filter-tree"
-        default-expand-all
-      >
-        <span slot-scope="{ node, data }" class="custom-tree-node-list father">
-          <span style="display: flex;flex: 1;width: 0;">
-            <el-radio v-if="!options.attrs.multiple" v-model="options.value" :label="data.id" @change="changeRadioBox"><span> {{ node.label }} </span></el-radio>
-            <el-checkbox v-if="options.attrs.multiple && data.id !== allNode.id" v-model="data.checked" :label="data.id" @change="changeCheckBox(data)"><span> {{ node.label }} </span></el-checkbox>
-            <el-checkbox v-if="options.attrs.multiple && data.id === allNode.id" v-model="data.checked" :indeterminate="data.indeterminate" :label="data.id" @change="allCheckChange(data)"><span> {{ node.label }} </span></el-checkbox>
-          </span>
-          <span v-if="!options.attrs.multiple && options.value && options.value === data.id" class="child">
-            <span style="margin-left: 12px;" @click.stop>
-              <span class="el-dropdown-link">
-                <el-button
-                  icon="el-icon-circle-close"
-                  type="text"
-                  size="small"
-                  @click="cancelRadio(data)"
-                />
-              </span>
-            </span>
-          </span>
-        </span>
-      </el-tree>
+
+      <div v-if="element.options.attrs.multiple" class="checkbox-group-container">
+        <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">{{ $t('commons.all') }}</el-checkbox>
+
+        <el-checkbox-group v-model="value" @change="handleCheckedChange">
+          <el-checkbox v-for="item in datas" :key="item.id" :label="item.id">{{ item.id }}</el-checkbox>
+        </el-checkbox-group>
+      </div>
+
+      <div v-else class="radio-group-container">
+        <el-radio-group v-model="value" @change="changeRadioBox">
+          <el-radio v-for="(item, index) in datas" :key="index" :label="item.id">{{ item.id }}</el-radio>
+        </el-radio-group>
+      </div>

    </div>

@@ -42,7 +27,7 @@
 </template>

 <script>
-import { fieldValues } from '@/api/dataset/dataset'
+import { multFieldValues } from '@/api/dataset/dataset'
 export default {

  props: {
@@ -62,8 +47,7 @@ export default {
  },
  data() {
    return {
-      options: null,
-      // value: null,
+      value: null,
      checked: null,
      defaultProp: {
        id: 'id',
@@ -76,157 +60,109 @@ export default {
        text: this.$t('commons.all'),
        checked: false,
        indeterminate: false
-      }
+      },
+      show: true,
+      datas: [],
+      isIndeterminate: false,
+      checkAll: false
    }
  },
  computed: {
    operator() {
-      return this.options.attrs.multiple ? 'in' : 'eq'
+      return this.element.options.attrs.multiple ? 'in' : 'eq'
    }
  },
  watch: {
-    'options.attrs.multiple': function(value) {
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
-      this.options.attrs.datas = []
-      this.options.attrs.datas = datas
-      const sourceValue = this.options.value
-      const sourceValid = !!sourceValue && Object.keys(sourceValue).length > 0
-      if (value) {
-        !sourceValid && (this.options.value = [])
-        sourceValid && !Array.isArray(sourceValue) && (this.options.value = sourceValue.split(','))
-        !this.inDraw && (this.options.value = [])
-        if (!this.inDraw) {
-          this.options.value = []
-          this.allNode.indeterminate = false
-          this.allNode.checked = false
-        }
-        // this.setMutiBox()
-      } else {
-        !sourceValid && (this.options.value = null)
-        sourceValid && Array.isArray(sourceValue) && (this.options.value = sourceValue[0])
-        !this.inDraw && (this.options.value = null)
+
+    'element.options.value': function(value, old) {
+      if (value === old) return
+      this.value = this.fillValueDerfault()
+      this.changeValue(value)
+
+      if (this.element.options.attrs.multiple) {
+        this.checkAll = this.value.length === this.datas.length
+        this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
      }
+    },
+    'element.options.attrs.fieldId': function(value, old) {
+      if (typeof value === 'undefined' || value === old) return
+      this.datas = []
+      this.element.options.attrs.fieldId &&
+      this.element.options.attrs.fieldId.length > 0 &&
+      multFieldValues(this.element.options.attrs.fieldId.split(',')).then(res => {
+        this.datas = this.optionDatas(res.data)
+      }) || (this.element.options.value = '')
+    },
+    'element.options.attrs.multiple': function(value, old) {
+      if (typeof old === 'undefined' || value === old) return
+      if (!this.inDraw) {
+        this.value = value ? [] : null
+        this.element.options.value = ''
+      }
+
+      this.show = false
+      this.$nextTick(() => {
+        this.show = true
+      })
    }
-    // keyWord(val) {
-    //   console.log(val)
-    //   this.$refs.deSelectGrid.filter(val)
-    // }
  },
  created() {
-    this.options = this.element.options
-    if (this.options.attrs.fieldId) {
-      fieldValues(this.options.attrs.fieldId).then(res => {
-        this.options.attrs.datas = this.optionDatas(res.data)
-        this.setMutiBox()
-        this.setRadioBox()
-      })
-    } else {
-      this.setMutiBox()
-      this.setRadioBox()
-    }
-  },
-  mounted() {
-    // this.$nextTick(() => {
-    //   this.options && this.options.value && this.changeValue(this.options.value)
-    // })
-    this.options && this.options.value && Object.keys(this.options.value).length > 0 && this.initValue(this.options.value)
+    this.initLoad()
  },
+
  methods: {
-    initValue(value) {
-      // this.options.value = [value]
-      this.setCondition()
-    },
-    setMutiBox() {
-      if (this.options && this.options.attrs.multiple) {
-        this.options.attrs.datas.forEach(data => {
-          data.checked = (this.options.value && this.options.value.includes(data.id))
+    initLoad() {
+      this.value = this.element.options.attrs.multiple ? [] : null
+      if (this.element.options.attrs.fieldId) {
+        multFieldValues(this.element.options.attrs.fieldId.split()).then(res => {
+          this.datas = this.optionDatas(res.data)
+          if (this.element.options.attrs.multiple) {
+            this.checkAll = this.value.length === this.datas.length
+            this.isIndeterminate = this.value.length > 0 && this.value.length < this.datas.length
+          }
        })
-        this.setAllNodeStatus()
+      }
+      if (this.element.options.value) {
+        this.value = this.fillValueDerfault()
+        this.changeValue(this.value)
      }
    },
-    setRadioBox() {
-      if (this.options && !this.options.attrs.multiple) {
-        if (Array.isArray(this.options.value) && this.options.value.length > 0) {
-          // this.value = this.options.value.length[0]
+    changeValue(value) {
+      if (!this.inDraw) {
+        if (value === null) {
+          this.element.options.value = ''
+        } else {
+          this.element.options.value = Array.isArray(value) ? value.join() : value
        }
      }
+      this.setCondition()
+      this.styleChange()
    },

    setCondition() {
      const param = {
        component: this.element,
-        value: Array.isArray(this.options.value) ? this.options.value : [this.options.value],
+        value: this.formatFilterValue(),
        operator: this.operator
      }
      this.inDraw && this.$store.commit('addViewFilter', param)
    },
-    changeCheckBox(data) {
-      const values = Array.isArray(this.options.value) ? this.options.value : this.options.value ? [this.options.value] : []
-      const index = values.indexOf(data.id)
-      if (index < 0 && data.checked) {
-        values.push(data.id)
-      }
-      if (index >= 0 && !data.checked) {
-        values.splice(index, 1)
-      }
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
-      this.options.attrs.datas = []
-      datas.forEach(item => {
-        if (item.id === data.id) {
-          item.checked = data.checked
-        }
-      })
-      this.options.attrs.datas = datas
-
-      this.setAllNodeStatus()
-
-      this.options.value = values
-      this.setCondition()
-      this.styleChange()
+    formatFilterValue() {
+      if (this.value === null) return []
+      if (Array.isArray(this.value)) return this.value
+      return this.value.split(',')
    },
-    // 勾选数据项 会影响全选节点的状态
-    setAllNodeStatus() {
-      const nodeSize = this.options.attrs.datas.length
-      const checkedSize = this.options.attrs.datas.filter(item => item.checked).length
-      if (nodeSize === checkedSize) {
-        this.allNode.checked = true
-        this.allNode.indeterminate = false
-      } else if (checkedSize === 0) {
-        this.allNode.checked = false
-        this.allNode.indeterminate = false
+    fillValueDerfault() {
+      const defaultV = this.element.options.value
+      if (this.element.options.attrs.multiple) {
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return []
+        return defaultV.split(',')
      } else {
-        this.allNode.checked = false
-        this.allNode.indeterminate = true
+        if (defaultV === null || typeof defaultV === 'undefined' || defaultV === '') return null
+        return defaultV.split(',')[0]
      }
    },
-    allCheckChange(data) {
-      data.indeterminate = false
-      const values = []
-      this.options.value = []
-      const datas = JSON.parse(JSON.stringify(this.options.attrs.datas))
-      this.options.attrs.datas = []
-      datas.forEach(item => {
-        item.checked = data.checked
-        // data.checked && this.options.value.push(item.id)
-        data.checked && values.push(item.id)
-      })
-      this.options.attrs.datas = datas
-      this.options.value = values
-      this.setCondition()
-    },
-    changeRadioBox(value) {
-      // this.options.value = []
-      // if (this.value) this.options.value = [this.value]
-      this.setCondition()
-    },
-    cancelRadio(data) {
-      this.options.value = null
-      this.changeRadioBox()
-    },
-    // filterNode(value, data) {
-    //   if (!value) return true
-    //   return data[this.defaultProp.label].indexOf(value) !== -1
-    // },
+
    styleChange() {
      this.$store.commit('recordStyleChange')
    },
@@ -238,6 +174,20 @@ export default {
          text: item
        }
      })
+    },
+    changeRadioBox(value) {
+      this.changeValue(value)
+    },
+    handleCheckAllChange(val) {
+      this.value = val ? this.datas.map(item => item.id) : []
+      this.isIndeterminate = false
+      this.changeValue(this.value)
+    },
+    handleCheckedChange(values) {
+      const checkedCount = values.length
+      this.checkAll = checkedCount === this.datas.length
+      this.isIndeterminate = checkedCount > 0 && checkedCount < this.datas.length
+      this.changeValue(values)
    }

  }
@@ -245,28 +195,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-.custom-tree-node-list {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-size: 14px;
-    padding:0 8px;
-  }
-  .father .child {
-    /*display: none;*/
-    visibility: hidden;
-  }
-  .father:hover .child {
-    /*display: inline;*/
-    visibility: visible;
-  }
-.de-filter-tree {
-  >>>span.is-leaf {
-    width: 5px !important;
-    padding: 6px 0 !important;
-  }
-}
+
 .de-select-grid-search {
  >>>input {
    border-radius: 0px;
@@ -281,4 +210,23 @@ export default {
    bottom: 0;
  }
 }
+
+.radio-group-container > .el-radio-group > label {
+    display: block !important;
+    margin: 10px !important;
+}
+
+.checkbox-group-container{
+  label.el-checkbox {
+    display: block !important;
+    margin: 10px !important;
+  }
+
+  .el-checkbox-group > label {
+    display: block !important;
+    margin: 10px !important;
+  }
+
+}
+
 </style>
--- a/frontend/src/components/widget/serviceImpl/NumberRangeServiceImpl.js
+++ b/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: ''
  },
--- a/frontend/src/components/widget/serviceImpl/NumberSelectGridServiceImpl.js
+++ b/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: ''
  },
--- a/frontend/src/components/widget/serviceImpl/NumberSelectServiceImpl.js
+++ b/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: ''
  },
--- a/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TextInputServiceImpl.js
@@ -10,7 +10,9 @@ const dialogPanel = {
  options: {
    attrs: {
      placeholder: 'deinputsearch.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []

    },
    value: ''
--- a/frontend/src/components/widget/serviceImpl/TextSelectGridServiceImpl.js
+++ b/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: ''
  },
--- a/frontend/src/components/widget/serviceImpl/TextSelectServiceImpl.js
+++ b/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: ''
  },
--- a/frontend/src/components/widget/serviceImpl/TimeDateRangeServiceImpl.js
+++ b/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: ''
  },
--- a/frontend/src/components/widget/serviceImpl/TimeDateServiceImpl.js
+++ b/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
--- a/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeMonthServiceImpl.js
@@ -11,7 +11,9 @@ const dialogPanel = {
    attrs: {
      type: 'month',
      placeholder: 'deyearmonth.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
    },
    value: ''
  },
--- a/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
+++ b/frontend/src/components/widget/serviceImpl/TimeYearServiceImpl.js
@@ -11,7 +11,9 @@ const dialogPanel = {
    attrs: {
      type: 'year',
      placeholder: 'deyear.placeholder',
-      viewIds: []
+      viewIds: [],
+      fieldId: '',
+      dragItems: []
    },
    value: ''
  },