From d54328e82106ba46803e809fdebd72e0d063f1bd Mon Sep 17 00:00:00 2001
From: dataeaseShu <tong.shu@fit2cloud.com>
Date: Tue, 6 Aug 2024 14:15:48 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E4=BB=AA=E8=A1=A8=E6=9D=BF):=20=E5=9B=BE?=
 =?UTF-8?q?=E8=A1=A8=E8=BF=87=E6=BB=A4=E5=99=A8=E6=97=A5=E6=9C=9F=E7=B1=BB?=
 =?UTF-8?q?=E5=9E=8B=E5=AD=97=E6=AE=B5=E6=94=AF=E6=8C=81=E5=8A=A8=E6=80=81?=
 =?UTF-8?q?=E6=97=A5=E6=9C=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../v-query/DynamicTimeForViewFilter.vue      |  135 ++
 .../components/editor/filter/FilterTree.vue   |    2 +-
 .../components/editor/filter/TimeDialog.vue   |  308 +++++
 .../editor/filter/auth-tree/AuthTree.vue      |  244 ++++
 .../editor/filter/auth-tree/FilterFiled.vue   | 1192 +++++++++++++++++
 .../editor/filter/auth-tree/RowAuth.vue       |  375 ++++++
 de-xpack                                      |    2 +-
 7 files changed, 2256 insertions(+), 2 deletions(-)
 create mode 100644 core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue
 create mode 100644 core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
 create mode 100644 core/core-frontend/src/views/chart/components/editor/filter/auth-tree/AuthTree.vue
 create mode 100644 core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
 create mode 100644 core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue

diff --git a/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue b/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue
new file mode 100644
index 0000000000..367ffff853
--- /dev/null
+++ b/core/core-frontend/src/custom-component/v-query/DynamicTimeForViewFilter.vue
@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { toRefs, PropType, ref, onBeforeMount, watch, computed } from 'vue'
+import { type DatePickType } from 'element-plus-secondary'
+import {
+  getThisYear,
+  getLastYear,
+  getThisMonth,
+  getLastMonth,
+  getToday,
+  getYesterday,
+  getMonthBeginning,
+  getYearBeginning,
+  getCustomTime
+} from './time-format'
+interface SelectConfig {
+  relativeToCurrent: string
+  timeNum: number
+  relativeToCurrentType: string
+  around: string
+  arbitraryTime: Date
+  timeGranularity: DatePickType
+}
+
+const props = defineProps({
+  config: {
+    type: Object as PropType<SelectConfig>,
+    default: () => {
+      return {
+        relativeToCurrent: 'custom',
+        timeNum: 0,
+        relativeToCurrentType: 'year',
+        around: 'f',
+        arbitraryTime: new Date(),
+        timeGranularity: 'year'
+      }
+    }
+  }
+})
+const selectValue = ref()
+
+const { config } = toRefs(props)
+
+const timeConfig = computed(() => {
+  const {
+    relativeToCurrent,
+    timeNum,
+    relativeToCurrentType,
+    around,
+    arbitraryTime,
+    timeGranularity
+  } = config.value
+  return {
+    relativeToCurrent,
+    timeNum,
+    relativeToCurrentType,
+    around,
+    arbitraryTime,
+    timeGranularity
+  }
+})
+
+watch(
+  () => timeConfig.value,
+  () => {
+    init()
+  },
+  {
+    deep: true
+  }
+)
+
+const init = () => {
+  const {
+    relativeToCurrent,
+    timeNum,
+    relativeToCurrentType,
+    around,
+    arbitraryTime,
+    timeGranularity
+  } = timeConfig.value
+  if (relativeToCurrent === 'custom') {
+    selectValue.value = getCustomTime(
+      timeNum,
+      relativeToCurrentType,
+      timeGranularity,
+      around,
+      timeGranularity === 'datetime' ? arbitraryTime : null
+    )
+  } else {
+    switch (relativeToCurrent) {
+      case 'thisYear':
+        selectValue.value = getThisYear()
+        break
+      case 'lastYear':
+        selectValue.value = getLastYear()
+        break
+      case 'thisMonth':
+        selectValue.value = getThisMonth()
+        break
+      case 'lastMonth':
+        selectValue.value = getLastMonth()
+        break
+      case 'today':
+        selectValue.value = getToday()
+        break
+      case 'yesterday':
+        selectValue.value = getYesterday()
+        break
+      case 'monthBeginning':
+        selectValue.value = getMonthBeginning()
+        break
+      case 'yearBeginning':
+        selectValue.value = getYearBeginning()
+        break
+
+      default:
+        break
+    }
+  }
+}
+
+onBeforeMount(() => {
+  init()
+})
+</script>
+
+<template>
+  <el-date-picker
+    disabled
+    :key="config.timeGranularity"
+    v-model="selectValue"
+    :type="config.timeGranularity"
+    :placeholder="$t('commons.date.select_date_time')"
+  />
+</template>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue b/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
index 9ff39d2afd..6b063baa82 100644
--- a/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
+++ b/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { ElMessage } from 'element-plus-secondary'
 import { inject, computed, ref, nextTick, provide } from 'vue'
-import RowAuth from '@/views/visualized/data/dataset/auth-tree/RowAuth.vue'
+import RowAuth from '@/views/chart/components/editor/filter/auth-tree/RowAuth.vue'
 
 const emits = defineEmits(['filter-data'])
 const filedList = inject('filedList', () => [])
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue b/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
new file mode 100644
index 0000000000..67a50d9c26
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/filter/TimeDialog.vue
@@ -0,0 +1,308 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import DynamicTime from '@/custom-component/v-query/DynamicTimeForViewFilter.vue'
+import { type DatePickType } from 'element-plus-secondary'
+export interface SelectConfig {
+  relativeToCurrent: string
+  timeNum: number
+  relativeToCurrentType: string
+  around: string
+  arbitraryTime: Date
+  timeGranularity: DatePickType
+}
+
+const defaultValue: SelectConfig = {
+  relativeToCurrent: 'custom', //相对当前 thisYear ｜ lastYear ｜ thisMonth ｜ lastMonth ｜ today ｜ yesterday ｜ monthBeginning ｜ yearBeginning
+  timeGranularity: 'year', //时间粒度 year ｜ month ｜ date ｜ datetime
+  timeNum: 0, // 数值
+  relativeToCurrentType: 'year', // year ｜ month ｜ date
+  around: 'b', // 前 b ｜ 后 f
+  arbitraryTime: new Date() //timeGranularity = datetime时 取时分秒
+}
+const curComponent = ref<SelectConfig>({ ...defaultValue })
+
+const init = (val: SelectConfig) => {
+  curComponent.value = {
+    ...defaultValue,
+    ...val
+  }
+}
+
+const aroundList = [
+  {
+    label: '前',
+    value: 'f'
+  },
+  {
+    label: '后',
+    value: 'b'
+  }
+]
+const relativeToCurrentList = computed(() => {
+  let list = []
+  if (!curComponent.value) return list
+  switch (curComponent.value.timeGranularity) {
+    case 'year':
+      list = [
+        {
+          label: '今年',
+          value: 'thisYear'
+        },
+        {
+          label: '去年',
+          value: 'lastYear'
+        }
+      ]
+      break
+    case 'month':
+      list = [
+        {
+          label: '本月',
+          value: 'thisMonth'
+        },
+        {
+          label: '上月',
+          value: 'lastMonth'
+        }
+      ]
+      break
+    case 'date':
+      list = [
+        {
+          label: '今天',
+          value: 'today'
+        },
+        {
+          label: '昨天',
+          value: 'yesterday'
+        },
+        {
+          label: '月初',
+          value: 'monthBeginning'
+        },
+        {
+          label: '年初',
+          value: 'yearBeginning'
+        }
+      ]
+      break
+    case 'datetime':
+      list = [
+        {
+          label: '今天',
+          value: 'today'
+        },
+        {
+          label: '昨天',
+          value: 'yesterday'
+        },
+        {
+          label: '月初',
+          value: 'monthBeginning'
+        },
+        {
+          label: '年初',
+          value: 'yearBeginning'
+        }
+      ]
+      break
+
+    default:
+      break
+  }
+
+  return [
+    ...list,
+    {
+      label: '自定义',
+      value: 'custom'
+    }
+  ]
+})
+
+const relativeToCurrentTypeList = computed(() => {
+  if (!curComponent.value) return []
+  let index = ['year', 'month', 'date', 'datetime'].indexOf(curComponent.value.timeGranularity) + 1
+  return [
+    {
+      label: '年',
+      value: 'year'
+    },
+    {
+      label: '月',
+      value: 'month'
+    },
+    {
+      label: '日',
+      value: 'date'
+    }
+  ].slice(0, index)
+})
+
+const timeGranularityChange = (val: string) => {
+  if (
+    ['year', 'month', 'date', 'datetime'].indexOf(val) <
+    ['year', 'month', 'date'].indexOf(curComponent.value.relativeToCurrentType)
+  ) {
+    curComponent.value.relativeToCurrentType = 'year'
+  }
+  if (curComponent.value.relativeToCurrent !== 'custom') {
+    curComponent.value.relativeToCurrent = relativeToCurrentList.value[0]?.value
+  }
+}
+
+const timeList = [
+  {
+    label: '年',
+    value: 'year'
+  },
+  {
+    label: '年月',
+    value: 'month'
+  },
+  {
+    label: '年月日',
+    value: 'date'
+  },
+  {
+    label: '年月日时分秒',
+    value: 'datetime'
+  }
+]
+
+defineExpose({
+  init,
+  curComponent
+})
+</script>
+
+<template>
+  <div class="time-dialog">
+    <div class="setting">
+      <div class="setting-label">时间粒度</div>
+      <div class="setting-value select">
+        <el-select
+          @change="timeGranularityChange"
+          placeholder="请选择时间粒度"
+          v-model="curComponent.timeGranularity"
+        >
+          <el-option
+            v-for="ele in timeList"
+            :key="ele.value"
+            :label="ele.label"
+            :value="ele.value"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div class="setting">
+      <div class="setting-label">相对当前</div>
+      <div class="setting-value select">
+        <el-select v-model="curComponent.relativeToCurrent">
+          <el-option
+            v-for="item in relativeToCurrentList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </div>
+    </div>
+    <div class="setting" v-if="curComponent.relativeToCurrent === 'custom'">
+      <div
+        class="setting-input"
+        :class="curComponent.timeGranularity === 'datetime' && 'with-date'"
+      >
+        <el-input-number v-model="curComponent.timeNum" :min="0" controls-position="right" />
+        <el-select v-model="curComponent.relativeToCurrentType">
+          <el-option
+            v-for="item in relativeToCurrentTypeList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-select v-model="curComponent.around">
+          <el-option
+            v-for="item in aroundList"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-time-picker
+          style="width: 146px; margin-left: 8px"
+          v-if="curComponent.timeGranularity === 'datetime'"
+          v-model="curComponent.arbitraryTime"
+        />
+      </div>
+    </div>
+    <div class="setting">
+      <div class="setting-label">预览</div>
+      <div class="setting-value">
+        <component :config="curComponent" isConfig ref="inputCom" :is="DynamicTime"></component>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.time-dialog {
+  .setting {
+    &.setting {
+      margin-top: 8px;
+    }
+    &.parameters {
+      width: 100%;
+      padding-left: 24px;
+      .ed-date-editor {
+        width: 325px !important;
+      }
+    }
+    margin-left: auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .setting-label {
+      width: 80px;
+      margin-right: 8px;
+    }
+
+    .setting-value {
+      margin: 8px 0;
+      &.select {
+        margin-top: 0;
+        .ed-select {
+          width: 325px;
+        }
+      }
+    }
+
+    .setting-input {
+      display: flex;
+      padding-left: 86px;
+      justify-content: flex-end;
+      align-items: center;
+      &.range {
+        padding-left: 0px;
+      }
+      & > div + div {
+        margin-left: 8px;
+      }
+
+      &.with-date {
+        .ed-input-number {
+          width: 71px;
+        }
+        .ed-select {
+          width: 62px;
+        }
+
+        .ed-date-editor.ed-input {
+          width: 106px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/AuthTree.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/AuthTree.vue
new file mode 100644
index 0000000000..2b71a5a76a
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/AuthTree.vue
@@ -0,0 +1,244 @@
+<script lang="ts">
+export default {
+  name: 'logic-relation'
+}
+</script>
+<script lang="ts" setup>
+import { useI18n } from '@/hooks/web/useI18n'
+import { PropType, computed, toRefs } from 'vue'
+import FilterFiled from './FilterFiled.vue'
+import type { Item } from './FilterFiled.vue'
+export type Logic = 'or' | 'and'
+export type Relation = {
+  child?: Relation[]
+  logic: Logic
+  x: number
+} & Item
+const { t } = useI18n()
+
+const props = defineProps({
+  relationList: {
+    type: Array as PropType<Relation[]>,
+    default: () => []
+  },
+  x: {
+    type: Number,
+    default: 0
+  },
+  logic: {
+    type: String as PropType<Logic>,
+    default: 'or'
+  }
+})
+
+const marginLeft = computed(() => {
+  return {
+    marginLeft: props.x ? '20px' : 0
+  }
+})
+
+const emits = defineEmits([
+  'addCondReal',
+  'changeAndOrDfs',
+  'update:logic',
+  'removeRelationList',
+  'del'
+])
+
+const { relationList } = toRefs(props)
+
+const handleCommand = type => {
+  emits('update:logic', type)
+  emits('changeAndOrDfs', type)
+}
+
+const removeRelationList = index => {
+  relationList.value.splice(index, 1)
+}
+const addCondReal = type => {
+  emits('addCondReal', type, props.logic === 'or' ? 'and' : 'or')
+}
+const add = (type, child, logic) => {
+  child.push(
+    type === 'condition'
+      ? {
+          fieldId: '',
+          value: '',
+          enumValue: '',
+          term: '',
+          filterType: 'logic',
+          name: '',
+          filterTypeTime: 'dateValue',
+          timeValue: '',
+          dynamicTimeSetting: {},
+          deType: ''
+        }
+      : { child: [], logic }
+  )
+}
+const del = (index, child) => {
+  child.splice(index, 1)
+}
+</script>
+
+<template>
+  <div class="logic" :style="marginLeft">
+    <div class="logic-left">
+      <div class="operate-title">
+        <span style="color: #bfbfbf" class="mrg-title" v-if="x">
+          {{ logic === 'or' ? 'OR' : 'AND' }}
+        </span>
+        <el-dropdown @command="handleCommand" trigger="click" v-else>
+          <span style="color: rgba(0 0 0 / 65%)" class="mrg-title fir">
+            {{ logic === 'or' ? 'OR' : 'AND' }}
+            <el-icon>
+              <Icon name="icon_down_outlined"></Icon>
+            </el-icon>
+          </span>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="and">AND</el-dropdown-item>
+              <el-dropdown-item command="or">OR</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </div>
+      <span class="operate-icon" v-if="x">
+        <el-icon @click="emits('removeRelationList')">
+          <Icon name="icon_delete-trash_outlined"></Icon>
+        </el-icon>
+      </span>
+    </div>
+    <div class="logic-right">
+      <template :key="index" v-for="(item, index) in relationList">
+        <logic-relation
+          v-if="item.child"
+          :x="item.x"
+          @del="idx => del(idx, item.child)"
+          @addCondReal="(type, logic) => add(type, item.child, logic)"
+          :logic="item.logic"
+          @removeRelationList="removeRelationList(index)"
+          :relationList="item.child"
+        >
+        </logic-relation>
+        <filter-filed v-else :item="item" @del="emits('del', index)" :index="index"></filter-filed>
+      </template>
+      <div class="logic-right-add">
+        <button @click="addCondReal('condition')" class="operand-btn">
+          + {{ t('auth.add_condition') }}
+        </button>
+        <button v-if="x < 2" @click="addCondReal('relation')" class="operand-btn">
+          + {{ t('auth.add_relationship') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.logic {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  .logic-left {
+    box-sizing: border-box;
+    width: 48px;
+    display: flex;
+    position: relative;
+    align-items: center;
+    z-index: 10;
+
+    .operate-title {
+      font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      word-wrap: break-word;
+      box-sizing: border-box;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      display: inline-block;
+      white-space: nowrap;
+      margin: 0;
+      padding: 0;
+      width: 65px;
+      background-color: #f8f8fa;
+      line-height: 28px;
+      position: relative;
+      z-index: 1;
+      height: 28px;
+
+      .mrg-title {
+        text-align: left;
+        box-sizing: border-box;
+        position: relative;
+        display: block;
+        margin-left: 11px;
+        margin-right: 11px;
+        line-height: 28px;
+        height: 28px;
+      }
+    }
+
+    &:hover {
+      .operate-icon {
+        display: inline-block;
+      }
+
+      .operate-title {
+        .mrg-title:not(.fir) {
+          margin: 0 5px;
+        }
+      }
+    }
+
+    .operate-icon {
+      width: 40px;
+      height: 28px;
+      line-height: 28px;
+      background-color: #f8f8fa;
+      z-index: 1;
+      display: none;
+
+      i {
+        font-size: 12px;
+        font-style: normal;
+        display: unset;
+        padding: 5px 3px;
+        cursor: pointer;
+        position: relative;
+        z-index: 10;
+      }
+    }
+  }
+
+  .logic-right-add {
+    display: flex;
+    height: 41.4px;
+    align-items: center;
+    padding-left: 26px;
+
+    .operand-btn {
+      box-sizing: border-box;
+      font-weight: 400;
+      text-align: center;
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      outline: 0;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      cursor: pointer;
+      height: 28px;
+      padding: 0 10px;
+      margin-right: 10px;
+      font-size: 12px;
+      color: #246dff;
+      background: #fff;
+      border: 1px solid #246dff;
+      border-radius: 2px;
+    }
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
new file mode 100644
index 0000000000..ff5e4e35b6
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/FilterFiled.vue
@@ -0,0 +1,1192 @@
+<script lang="ts" setup>
+import { ref, inject, computed, watch, onBeforeMount, toRefs, nextTick } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { SelectConfig } from '../TimeDialog.vue'
+import TimeDialog from '@/views/chart/components/editor/filter/TimeDialog.vue'
+import { multFieldValuesForPermissions } from '@/api/dataset'
+import {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  textOptionsForSysParams,
+  sysParamsIlns,
+  fieldEnums
+} from '@/views/visualized/data/dataset/options.js'
+export interface Item {
+  term: string
+  fieldId: string
+  filterType: string
+  deType: number
+  enumValue: string
+  name: string
+  value: number
+  filterTypeTime?: string
+  timeValue: string
+  dynamicTimeSetting?: SelectConfig
+}
+
+type Props = {
+  index: number
+  item: Item
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  index: 0,
+  item: () => ({
+    term: '',
+    fieldId: '',
+    filterType: '',
+    deType: 0,
+    enumValue: '',
+    name: '',
+    filterTypeTime: 'dateValue',
+    value: null,
+    dynamicTimeSetting: null,
+    timeValue: ''
+  })
+})
+
+const { t } = useI18n()
+const enumInput = ref()
+const deElDropdownMenuFixed = ref()
+const showDel = ref(false)
+const keywords = ref('')
+const activeName = ref('')
+const filterFiled = ref('')
+const enumList = ref([])
+const showTextArea = ref()
+const keydownCanceled = ref(false)
+const checklist = ref([])
+const filterList = ref([])
+const textareaValue = ref('')
+
+const { item } = toRefs(props)
+
+const getAuthTargetType = inject('getAuthTargetType')
+const filedList = inject('filedList')
+
+const checkListWithFilter = computed(() => {
+  if (!filterFiled.value) return enumList.value
+  return enumList.value.filter(ele => ele.includes(filterFiled.value))
+})
+const checkResult = computed(() => {
+  return checklist.value.join(',')
+})
+const computedWidth = computed(() => {
+  const { term, fieldId, filterType } = item.value
+  const isNull = ['null', 'empty', 'not_null', 'not_empty'].includes(term) && filterType === 'logic'
+  return {
+    width: !fieldId ? '270px' : isNull ? '670px' : '750px'
+  }
+})
+
+const sysParamsIln = computed(() => {
+  if (['in', 'not in'].includes(item.value.term)) {
+    return [
+      {
+        value: '${sysParams.roles}',
+        label: t('auth.sysParams_type.role')
+      }
+    ]
+  } else {
+    return sysParamsIlns
+  }
+})
+const operators = computed(() => {
+  const { deType } = item.value
+  if (authTargetType.value === 'sysParams') {
+    return textOptionsForSysParams
+  }
+  if ([0, 5].includes(deType)) {
+    return textOptions
+  } else if (deType === 1) {
+    return dateOptions
+  } else {
+    return valueOptions
+  }
+})
+const dimensions = computed(() => {
+  if (!keywords.value) return computedFiledList.value
+  return computedFiledList.value.filter(ele => ele.name.includes(keywords.value))
+})
+const computedFiledList = computed(() => {
+  return Object.values(filedList.value || {})
+})
+
+watch(checkResult, () => {
+  cancelfixValue()
+})
+
+const authTargetType = ref('')
+
+watch(
+  () => getAuthTargetType?.authTargetType,
+  value => {
+    if (authTargetType.value === value || !value) return
+    authTargetType.value = value
+  },
+  {
+    immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  initNameEnumName()
+  filterListInit(item.value.deType)
+})
+
+const confirm = () => {
+  enumInput.value.$el.click()
+}
+const initNameEnumName = () => {
+  const { name, enumValue, fieldId } = item.value
+  const arr = enumValue.trim() ? enumValue.split(',') : []
+  if (!name && fieldId) {
+    checklist.value = arr
+  }
+  if (!name && !fieldId) return
+  initEnumOptions()
+  activeName.value = item.value.name
+  checklist.value = arr
+}
+const cancelKeyDow = () => {
+  if (!showTextArea.value && !keydownCanceled.value) {
+    keydownCanceled.value = true
+  }
+  showTextArea.value = true
+}
+const filterTypeChange = () => {
+  item.value.term = ''
+  item.value.value = null
+  initEnumOptions()
+}
+
+const filterTypeChangeTime = () => {
+  item.value.term = ''
+  item.value.timeValue = null
+}
+const initEnumOptions = () => {
+  // 查找枚举值
+  if (authTargetType.value === 'sysParams') {
+    return
+  }
+  const { deType, filterType, fieldId } = item.value
+  // 查找枚举值
+  if (filterType === 'enum' && [0, 5].includes(deType)) {
+    multFieldValuesForPermissions({ fieldIds: [fieldId] }).then(res => {
+      enumList.value = optionData(res.data)
+    })
+  }
+}
+
+const dialogVisible = ref(false)
+const timeDialog = ref()
+const handleClick = () => {
+  dialogVisible.value = true
+  nextTick(() => {
+    timeDialog.value.init(item.value.dynamicTimeSetting || {})
+  })
+}
+
+const relativeToCurrentTypeMap = {
+  year: '年',
+  month: '月',
+  date: '日',
+  datetime: '日'
+}
+
+const confirmTimeSelect = () => {
+  item.value.dynamicTimeSetting = { ...timeDialog.value.curComponent }
+  const { timeGranularity, timeNum, relativeToCurrentType, around, arbitraryTime } =
+    item.value.dynamicTimeSetting
+  item.value.timeValue = `${timeNum}${relativeToCurrentTypeMap[relativeToCurrentType]}${
+    around === 'f' ? '前' : '后'
+  }`
+  if (timeGranularity === 'datetime') {
+    item.value.timeValue += new Date(arbitraryTime).toLocaleString().split(' ')[1]
+  }
+  dialogVisible.value = false
+}
+
+const optionData = data => {
+  if (!data) return null
+  return data.filter(item => !!item)
+}
+const cancel = () => {
+  item.value.name = activeName.value || ''
+}
+const cancelfixValue = () => {
+  item.value.enumValue = checkResult.value || ''
+}
+const delChecks = idx => {
+  checklist.value.splice(idx, 1)
+}
+
+const selectItem = ({ name, id, deType }) => {
+  activeName.value = name
+  Object.assign(item.value, {
+    fieldId: id,
+    name,
+    deType,
+    filterType: 'logic',
+    enumValue: '',
+    value: '',
+    term: '',
+    filterTypeTime: 'dateValue',
+    timeValue: '',
+    dynamicTimeSetting: {}
+  })
+  filterListInit(deType)
+  checklist.value = []
+}
+const filterListInit = deType => {
+  filterList.value = [
+    {
+      value: 'logic',
+      label: t('deDataset.logic_filter')
+    },
+    {
+      value: 'enum',
+      label: t('deDataset.enum_filter')
+    }
+  ]
+  if (authTargetType.value === 'sysParams' || [1, 2, 3].includes(deType)) {
+    filterList.value = [filterList.value[0]]
+  }
+}
+
+const filterListTime = [
+  {
+    value: 'dateValue',
+    label: '日期值'
+  },
+  {
+    value: 'dynamicDate',
+    label: '动态日期'
+  }
+]
+const clearAll = () => {
+  checklist.value = []
+}
+const selectAll = () => {
+  checkListWithFilter.value.forEach(ele => {
+    if (!checklist.value.includes(ele)) {
+      checklist.value.push(ele)
+    }
+  })
+}
+const addFields = () => {
+  const list = textareaValue.value.split('\n').reduce((pre, next) => {
+    const str = next.trim()
+    if (!str) return pre
+    pre.add(str)
+    return pre
+  }, new Set([]))
+  if (list.size) {
+    checklist.value = [...new Set([...checklist.value, ...Array.from(list)])]
+  }
+  showTextArea.value = false
+}
+const checkItem = i => {
+  const index = checklist.value.findIndex(ele => ele === i)
+  if (index === -1) {
+    checklist.value.push(i)
+  } else {
+    delChecks(index)
+  }
+}
+
+const emits = defineEmits(['update:item', 'del'])
+</script>
+
+<template>
+  <div class="white-nowrap">
+    <div
+      class="filed"
+      :style="computedWidth"
+      @mouseover="showDel = true"
+      @mouseleave="showDel = false"
+    >
+      <span class="filed-title">{{ t('auth.filter_fields') }}</span>
+
+      <el-dropdown trigger="click" :hide-on-click="false">
+        <el-input
+          :placeholder="t('auth.select_filter_fields')"
+          v-model="item.name"
+          size="small"
+          @input="cancel"
+        >
+        </el-input>
+        <template #dropdown>
+          <el-dropdown-menu class="de-el-dropdown-menu">
+            <el-input
+              @keydown.stop
+              :placeholder="t('auth.enter_keywords')"
+              size="small"
+              v-model="keywords"
+            >
+              <template #prefix>
+                <el-icon>
+                  <Icon name="icon_search-outline_outlined"></Icon>
+                </el-icon>
+              </template>
+            </el-input>
+            <ul class="dimension">
+              <li
+                @click="selectItem(ele)"
+                :style="{
+                  backgroundColor: activeName === ele.name ? '#f0f7ff' : ''
+                }"
+                :key="ele.id"
+                v-for="ele in dimensions"
+              >
+                <el-icon>
+                  <Icon
+                    :name="`field_${fieldEnums[ele.deType]}`"
+                    :className="`field-icon-${fieldEnums[ele.deType]}`"
+                  ></Icon>
+                </el-icon>
+                <span>{{ ele.name }}</span>
+              </li>
+            </ul>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+      <div class="white-nowrap flex-align-center" style="position: relative" v-if="item.fieldId">
+        <template v-if="item.deType !== 1">
+          <span class="filed-title">{{ t('auth.screen_method') }}</span>
+          <el-select
+            size="small"
+            @change="filterTypeChange"
+            v-model="item.filterType"
+            :placeholder="t('auth.select')"
+          >
+            <el-option
+              v-for="ele in filterList"
+              :key="ele.value"
+              :label="ele.label"
+              :value="ele.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <template v-else>
+          <span class="filed-title">时间类型</span>
+          <el-select
+            size="small"
+            @change="filterTypeChangeTime"
+            v-model="item.filterTypeTime"
+            :placeholder="t('auth.select')"
+          >
+            <el-option
+              v-for="ele in filterListTime"
+              :key="ele.value"
+              :label="ele.label"
+              :value="ele.value"
+            >
+            </el-option>
+          </el-select>
+        </template>
+        <span class="filed-title">{{ t('auth.fixed_value') }}</span>
+        <template v-if="item.filterType === 'logic'">
+          <el-select
+            class="w100"
+            size="small"
+            v-model="item.term"
+            :placeholder="t('auth.default_method')"
+          >
+            <el-option
+              v-for="ele in operators"
+              :key="ele.value"
+              :label="t(ele.label)"
+              :value="ele.value"
+            >
+            </el-option>
+          </el-select>
+
+          <template v-if="authTargetType === 'sysParams'">
+            <el-select class="w70 mar5" size="small" v-model="item.value">
+              <el-option
+                v-for="itx in sysParamsIln"
+                :key="itx.value"
+                :label="t(itx.label)"
+                :value="itx.value"
+              >
+              </el-option>
+            </el-select>
+          </template>
+          <template
+            v-else-if="
+              [2, 3].includes(item.deType) &&
+              !['null', 'empty', 'not_null', 'not_empty'].includes(item.term)
+            "
+          >
+            <el-input-number
+              class="w70 mar5"
+              size="small"
+              effect="plain"
+              v-model="item.value"
+              controls-position="right"
+            ></el-input-number>
+            <div class="bottom-line"></div>
+          </template>
+          <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input
+              @click="handleClick"
+              v-if="item.deType === 1 && item.filterTypeTime === 'dynamicDate'"
+              readonly
+              class="w70 mar5"
+              size="small"
+              v-model="item.timeValue"
+            />
+            <el-input v-else class="w70 mar5" size="small" v-model="item.value" />
+            <div class="bottom-line"></div>
+          </template>
+        </template>
+
+        <el-popover
+          popper-class="de-el-dropdown-menu-fixed"
+          v-else
+          width="360px"
+          trigger="click"
+          ref="deElDropdownMenuFixed"
+          :hide-on-click="false"
+        >
+          <template #reference>
+            <el-input
+              v-model="item.enumValue"
+              ref="enumInput"
+              size="small"
+              @input="cancelfixValue"
+              clearable
+              @clear="clearAll"
+            >
+            </el-input>
+          </template>
+          <div class="de-panel clearfix">
+            <div class="mod-left">
+              <el-input :placeholder="t('auth.enter_keywords')" v-model="filterFiled"> </el-input>
+              <ul class="infinite-list autochecker-list" style="height: 231px; overflow: auto">
+                <li
+                  :key="i"
+                  v-for="i in checkListWithFilter"
+                  class="infinite-list-item"
+                  @click="checkItem(i)"
+                >
+                  <i class="el-icon-check" :style="{ opacity: checklist.includes(i) ? 1 : 0 }"></i>
+                  <label>{{ i }}</label>
+                  <span>+</span>
+                </li>
+              </ul>
+              <button class="select-all" @click="selectAll">
+                {{ t('auth.select_all') }}
+              </button>
+            </div>
+            <div class="mod-left right-de">
+              <div class="right-top clearfix">
+                {{ t('auth.added') }}{{ checklist.length }}
+                <div class="right-btn">
+                  <span @click="cancelKeyDow">
+                    <i class="el-icon-edit"></i>
+                    {{ t('auth.manual_input') }}
+                  </span>
+                  <transition name="el-zoom-in-top">
+                    <div v-if="showTextArea" class="de-el-dropdown-menu-manu">
+                      <div class="text-area">
+                        <textarea
+                          :placeholder="t('auth.please_fill')"
+                          class="input"
+                          v-model="textareaValue"
+                        ></textarea>
+                        <div class="text-area-btn">
+                          <button type="button" @click="showTextArea = false" class="btn">
+                            <span>{{ t('auth.close') }}</span>
+                          </button>
+                          <button type="button" @click="addFields" class="btn right-add">
+                            <span>{{ t('auth.add') }}</span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </transition>
+                </div>
+              </div>
+              <ul class="infinite-list autochecker-list" style="overflow: auto">
+                <li :key="i" v-for="(i, idx) in checklist" class="infinite-list-item">
+                  <el-tooltip
+                    class="item"
+                    effect="light"
+                    :content="i"
+                    placement="top"
+                    :open-delay="1000"
+                  >
+                    <label>{{ i }}</label>
+                  </el-tooltip>
+                  <el-icon @click="delChecks(idx)" style="opacity: 1">
+                    <Icon name="icon_delete-trash_outlined"></Icon>
+                  </el-icon>
+                </li>
+              </ul>
+              <div class="right-menu-foot">
+                <div class="footer-left">&nbsp;</div>
+                <div class="confirm-btn" @click="confirm">
+                  {{ t('auth.sure') }}
+                </div>
+                <div class="footer-right">
+                  <el-icon @click="clearAll">
+                    <Icon name="icon_delete-trash_outlined"></Icon>
+                  </el-icon>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-popover>
+      </div>
+      <el-icon v-if="showDel" class="font12" @click="emits('del')">
+        <Icon name="icon_delete-trash_outlined"></Icon>
+      </el-icon>
+    </div>
+    <el-dialog append-to-body v-model="dialogVisible" title="日期设置" width="500">
+      <TimeDialog ref="timeDialog"></TimeDialog>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="confirmTimeSelect"> 确定 </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.white-nowrap {
+  white-space: nowrap;
+}
+.filed {
+  height: 41.4px;
+  padding: 1px 3px 1px 10px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  margin-left: 20px;
+  min-width: 200px;
+  justify-content: left;
+  position: relative;
+  white-space: nowrap;
+  :deep(.ed-input-number.is-controls-right .ed-input__wrapper) {
+    padding-left: 1px !important;
+    padding-right: 1px !important;
+  }
+
+  .filed-title {
+    word-wrap: break-word;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: nowrap;
+    box-sizing: border-box;
+    margin-right: 5px;
+    display: inline-block;
+    min-width: 50px;
+    text-align: right;
+  }
+
+  .font12 {
+    font-size: 12px;
+    margin: 0 10px;
+    cursor: pointer;
+  }
+
+  .ed-input {
+    width: 170px;
+  }
+
+  .w100.ed-select {
+    width: 100px;
+  }
+
+  .w70 {
+    width: 70px;
+  }
+
+  .mar5 {
+    margin-left: -5px;
+  }
+
+  :deep(.ed-input-number__decrease:not(.is-disabled)),
+  :deep(.ed-input-number__increase:not(.is-disabled)) {
+    &:hover {
+      z-index: 10;
+      &::after {
+        display: block;
+      }
+      & ~ .ed-input:not(.is-disabled) .ed-input__wrapper {
+        box-shadow: 0 0 0 0 #000 inset !important;
+      }
+    }
+  }
+  :deep(.ed-input-number__decrease),
+  :deep(.ed-input-number__increase) {
+    width: 20px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: height 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+    display: none;
+  }
+
+  :deep(.ed-input-number__decrease:hover) {
+    height: 16px;
+    & + .ed-input-number__increase {
+      height: 8px;
+    }
+  }
+  :deep(.ed-input-number__increase:hover) {
+    height: 16px;
+    & + .ed-input-number__decrease {
+      height: 8px;
+    }
+  }
+
+  .bottom-line {
+    font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    font-variant: tabular-nums;
+    font-feature-settings: 'tnum';
+    word-wrap: break-word;
+    text-align: left;
+    line-height: 28px;
+    color: #7e7e7e;
+    font-size: 12px;
+    white-space: pre;
+    box-sizing: border-box;
+    height: 1px;
+    background-color: #000;
+    opacity: 0.3;
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    width: 70px;
+    z-index: 10;
+  }
+
+  :deep(.ed-input-number.is-controls-right .ed-input__inner) {
+    padding-right: 20px;
+  }
+
+  .ed-input-number {
+    line-height: 26px;
+    height: 26px;
+  }
+
+  :deep(.ed-select) {
+    :deep(.ed-input__suffix-inner) {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .ed-input__icon {
+        height: auto;
+      }
+    }
+  }
+
+  :deep(.ed-input__wrapper) {
+    background-color: #f8f8fa;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+    height: 26px;
+    font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    word-wrap: break-word;
+    text-align: left;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    list-style: none;
+    user-select: none;
+    cursor: pointer;
+    line-height: 26px;
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    opacity: 1;
+  }
+  :deep(.ed-select .ed-input.is-focus .ed-input__wrapper),
+  :deep(.ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper),
+  :deep(.ed-select .ed-input__wrapper.is-focus) {
+    box-shadow: none !important;
+  }
+
+  i {
+    margin-left: 5px;
+    color: #7e7e7e;
+  }
+}
+.filed:hover {
+  background-color: #e9eaef;
+  :deep(.ed-input-number__decrease),
+  :deep(.ed-input-number__increase) {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="less">
+.de-el-dropdown-menu {
+  .dimension {
+    max-height: 200px;
+    padding: 0;
+    overflow-y: auto;
+    li {
+      list-style: none;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+      cursor: pointer;
+      transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        border-color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+        padding 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
+      position: relative;
+      overflow: hidden;
+      font-size: 12px;
+      text-overflow: ellipsis;
+      padding: 0 16px 0 28px;
+      line-height: 32px;
+      height: 32px;
+      margin: 0;
+      padding-left: 16px;
+      color: rgba(0, 0, 0, 0.65);
+      .ed-icon {
+        margin-right: 5px;
+      }
+    }
+    li:hover {
+      color: #2e74ff;
+      background-color: #f0f7ff;
+    }
+  }
+
+  .ed-input {
+    font-family: inherit;
+    overflow: visible;
+    box-sizing: border-box;
+    margin: 0;
+    font-variant: tabular-nums;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    display: inline-block;
+    width: 100%;
+    height: 28px;
+    padding: 4px 7px;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    line-height: 28px;
+    background-color: #fff;
+    background-image: none;
+    transition: all 0.3s;
+    touch-action: manipulation;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: inherit;
+    min-height: 100%;
+    border: 0;
+    border-radius: 0;
+    padding-left: 26px;
+
+    .ed-input__wrapper {
+      box-shadow: none;
+      border-bottom: 1px solid #e5e5e5;
+      &:focus {
+        box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+        border-right-width: 1px !important;
+        outline: 0;
+        border-color: none;
+      }
+    }
+  }
+
+  .ed-input {
+    font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+      '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    box-sizing: border-box;
+    margin: 0;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    list-style: none;
+    font-feature-settings: 'tnum';
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    text-align: start;
+    padding: 0 6px;
+  }
+}
+
+.de-el-dropdown-menu-fixed {
+  padding: 0 !important;
+  border: none !important;
+  .de-panel {
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    box-sizing: border-box;
+    position: relative;
+    padding: 0;
+    width: 360px;
+    max-width: 600px;
+    min-height: 30px;
+    background-color: #fff;
+    box-shadow: none;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    .mod-left {
+      font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      vertical-align: top;
+      padding: 5px;
+      width: 50%;
+      height: 300px;
+      float: left;
+      box-sizing: border-box;
+      .ed-input__wrapper {
+        font-family: inherit;
+        overflow: visible;
+        box-sizing: border-box;
+        margin: 0;
+        position: relative;
+        display: inline-block;
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        line-height: 28px;
+        background-color: #fff;
+        background-image: none;
+        border-radius: 2px;
+        transition: all 0.3s;
+        -webkit-appearance: none;
+        touch-action: manipulation;
+        text-overflow: ellipsis;
+        width: 100%;
+        border-bottom: 1px solid hsla(0, 0%, 59%, 0.1);
+        border: 1px solid hsla(0, 0%, 59%, 0.1);
+        height: 30px;
+        padding: 0 8px;
+        outline: 0;
+
+        &:focus {
+          box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+          border-right-width: 1px !important;
+          outline: 0;
+          border-color: none;
+        }
+      }
+    }
+
+    .right-de {
+      border-left: 1px solid hsla(0, 0%, 59%, 0.1);
+    }
+    .autochecker-list {
+      font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      color: rgba(0, 0, 0, 0.65);
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+      overflow-y: auto;
+      height: 221px;
+      position: relative;
+      padding: 0;
+
+      li {
+        direction: ltr;
+        padding: 0 5px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        color: #333;
+        white-space: nowrap;
+        list-style: none;
+        line-height: 28px;
+        height: 28px;
+        width: 100%;
+        position: relative;
+        box-sizing: border-box;
+
+        &:hover {
+          background-color: #f8f8fa;
+          color: #2153d4;
+          opacity: 1;
+          span {
+            display: block;
+          }
+        }
+
+        i {
+          color: #333;
+          font-size: 12px;
+          cursor: pointer;
+          vertical-align: top;
+          line-height: 28px;
+          height: 28px;
+          display: inline-block;
+          opacity: 0;
+        }
+
+        label {
+          font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei,
+            sans-serif;
+          font-size: 12px;
+          direction: ltr;
+          color: #333;
+          box-sizing: border-box;
+          touch-action: manipulation;
+          width: 87%;
+          height: 28px;
+          line-height: 14px;
+          padding: 8px 20px;
+          cursor: pointer;
+          display: inline-block;
+          position: relative;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+
+        span {
+          display: none;
+          position: absolute;
+          width: 14px;
+          height: 14px;
+          line-height: 11px;
+          top: 6px;
+          right: 5px;
+          font-size: 15px;
+          cursor: pointer;
+          background: #2153d4;
+          color: #fff;
+          text-align: center;
+          border-radius: 999px;
+        }
+      }
+    }
+
+    .select-all {
+      box-sizing: border-box;
+      margin: 0;
+      overflow: visible;
+      position: relative;
+      font-weight: 400;
+      white-space: nowrap;
+      border: 1px solid transparent;
+      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+      user-select: none;
+      touch-action: manipulation;
+      padding: 0 15px;
+      font-size: 12px;
+      outline: 0;
+      color: #fff;
+      border-color: #2e74ff;
+      text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+      box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+      align-items: center;
+      justify-content: center;
+      line-height: 1;
+      -webkit-appearance: button;
+      cursor: pointer;
+      border-radius: 0;
+      background: #2153d4;
+      padding-left: 5px;
+      text-align: center;
+      display: inline-block;
+      width: 100%;
+      height: 25px;
+
+      &:hover {
+        border: 1px solid transparent;
+        background: #4794ff;
+        color: #fff;
+      }
+    }
+
+    .right-top {
+      color: rgba(0, 0, 0, 0.65);
+      text-align: left;
+      box-sizing: border-box;
+      zoom: 1;
+      border-bottom: 1px solid #f8f8fa;
+      height: 30px;
+      width: 100%;
+      font-size: 12px;
+      line-height: 35px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      .right-btn {
+        color: rgba(0, 0, 0, 0.65);
+        font-size: 12px;
+        box-sizing: border-box;
+        position: relative;
+        z-index: 10;
+        float: right;
+        cursor: pointer;
+        line-height: 25px;
+        padding: 0 5px;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        background: rgba(70, 140, 255, 0.1);
+        width: 75px;
+      }
+    }
+
+    .right-menu-foot {
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      box-sizing: border-box;
+      height: 30px;
+      text-align: right;
+      line-height: 30px;
+      margin-top: 5px;
+      border-top: 1px solid hsla(0, 0%, 59%, 0.1);
+
+      .footer-left {
+        box-sizing: border-box;
+        float: left;
+      }
+
+      .footer-right {
+        float: right;
+        padding-left: 10px;
+        cursor: pointer;
+      }
+
+      .confirm-btn {
+        box-sizing: border-box;
+        position: relative;
+        font-weight: 400;
+        white-space: nowrap;
+        text-align: center;
+        background-image: none;
+        border: 1px solid transparent;
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        border-radius: 2px;
+        outline: 0;
+        color: #fff;
+        background-color: #2e74ff;
+        border-color: #2e74ff;
+        text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.de-el-dropdown-menu-manu {
+  padding: 0;
+  margin: 5px 0;
+  background-color: #fff;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+  margin-top: 12px;
+  position: absolute;
+  top: 20px;
+  width: 150px;
+  box-sizing: border-box;
+  right: 0;
+  .text-area {
+    box-sizing: border-box;
+    height: 220px;
+    position: relative;
+    .input {
+      touch-action: manipulation;
+      overflow: auto;
+      resize: vertical;
+      box-sizing: border-box;
+      position: relative;
+      display: inline-block;
+      color: rgba(0, 0, 0, 0.65);
+      font-size: 12px;
+      background-color: #fff;
+      background-image: none;
+      max-width: 100%;
+      min-height: 28px;
+      line-height: 1.5;
+      vertical-align: bottom;
+      transition: all 0.3s, height 0s;
+      text-overflow: ellipsis;
+      outline: 0;
+      padding: 5px 5px 28px;
+      width: 100%;
+      height: 220px;
+      border-radius: 0;
+      border: none;
+      box-shadow: 0 2px 6px 0 rgba(130, 150, 183, 0.72);
+    }
+
+    .text-area-btn {
+      position: absolute;
+      width: 100%;
+      text-align: center;
+      background: #fff;
+      bottom: -1px;
+      padding-bottom: 4px;
+
+      .btn {
+        font-weight: 400;
+        text-align: center;
+        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
+        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+        user-select: none;
+        touch-action: manipulation;
+        height: 28px;
+        padding: 0 15px;
+        font-size: 12px;
+        color: rgba(0, 0, 0, 0.65);
+        background-color: #fff;
+        outline: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        line-height: 1;
+        -webkit-appearance: button;
+        cursor: pointer;
+        border-radius: 0;
+        width: 70px;
+        border: 1px solid rgba(33, 83, 212, 0.9);
+      }
+
+      .right-add {
+        background: #2153d4;
+        color: #fff;
+      }
+    }
+  }
+}
+
+.clearfix:after {
+  content: '020';
+  display: block;
+  height: 0;
+  clear: both;
+  visibility: hidden;
+}
+
+.clearfix {
+  /* 触发 hasLayout */
+  zoom: 1;
+}
+</style>
diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue
new file mode 100644
index 0000000000..540af3aa56
--- /dev/null
+++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree/RowAuth.vue
@@ -0,0 +1,375 @@
+<script lang="ts" setup>
+import { ref, computed } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import AuthTree from './AuthTree.vue'
+
+const { t } = useI18n()
+
+const errorMessage = ref('')
+const logic = ref<'or' | 'and'>('or')
+const relationList = ref([])
+
+const svgRealinePath = computed(() => {
+  const lg = relationList.value.length
+  let a = { x: 0, y: 0, child: relationList.value }
+  a.y = Math.floor(dfsXY(a, 0) / 2)
+  if (!lg) return ''
+  let path = calculateDepth(a)
+  return path
+})
+
+const svgDashinePath = computed(() => {
+  const lg = relationList.value.length
+  let a = { x: 0, y: 0, child: relationList.value }
+  a.y = Math.floor(dfsXY(a, 0) / 2)
+  if (!lg) return `M48 20 L68 20`
+  let path = calculateDepthDash(a)
+  return path
+})
+
+const init = expressionTree => {
+  const { items } = expressionTree
+  logic.value = expressionTree.logic || 'or'
+  relationList.value = dfsInit(items || [])
+}
+const submit = () => {
+  errorMessage.value = ''
+  emits('save', {
+    logic: logic.value,
+    items: dfsSubmit(relationList.value),
+    errorMessage: errorMessage.value
+  })
+}
+const errorDetected = ({ enumValue, deType, filterType, term, value, name, timeValue }) => {
+  if (!name) {
+    errorMessage.value = t('data_set.cannot_be_empty_')
+    return
+  }
+  if (filterType === 'logic') {
+    if (!term) {
+      errorMessage.value = t('data_set.cannot_be_empty_de_ruler')
+      return
+    }
+    if (
+      !term.includes('null') &&
+      !term.includes('empty') &&
+      ['', null, undefined].includes(value) &&
+      deType !== 1
+    ) {
+      errorMessage.value = t('chart.filter_value_can_null')
+      return
+    }
+
+    if (
+      !term.includes('null') &&
+      !term.includes('empty') &&
+      ['', null, undefined].includes(timeValue) &&
+      deType === 1
+    ) {
+      errorMessage.value = t('chart.filter_value_can_null')
+      return
+    }
+    if ([2, 3].includes(deType)) {
+      if (parseFloat(value).toString() === 'NaN') {
+        errorMessage.value = t('chart.filter_value_can_not_str')
+        return
+      }
+    }
+  }
+  if (filterType === 'enum') {
+    if (enumValue.length < 1) {
+      errorMessage.value = t('chart.enum_value_can_not_null')
+      return
+    }
+  }
+}
+const dfsInit = arr => {
+  const elementList = []
+  arr.forEach(ele => {
+    const { subTree } = ele
+    if (subTree) {
+      const { items = [], logic } = subTree
+      const child = dfsInit(items)
+      elementList.push({ logic, child })
+    } else {
+      const {
+        enumValue,
+        timeValue,
+        filterTypeTime,
+        dynamicTimeSetting,
+        fieldId,
+        filterType,
+        term,
+        value,
+        field
+      } = ele
+      const { name, deType } = field || {}
+      elementList.push({
+        enumValue: enumValue.join(','),
+        fieldId,
+        filterType,
+        term,
+        timeValue,
+        filterTypeTime,
+        dynamicTimeSetting,
+        value,
+        name,
+        deType
+      })
+    }
+  })
+  return elementList
+}
+const dfsSubmit = arr => {
+  const items = []
+  arr.forEach(ele => {
+    const { child = [] } = ele
+    if (child.length) {
+      const { logic } = ele
+      const subTree = dfsSubmit(child)
+      items.push({
+        enumValue: [],
+        fieldId: '',
+        filterType: '',
+        term: '',
+        type: 'tree',
+        value: '',
+        filterTypeTime: 'dateValue',
+        timeValue: '',
+        dynamicTimeSetting: {},
+        subTree: { logic, items: subTree }
+      })
+    } else {
+      const {
+        enumValue,
+        filterTypeTime,
+        dynamicTimeSetting,
+        fieldId,
+        filterType,
+        deType,
+        term,
+        value,
+        name,
+        timeValue
+      } = ele
+      errorDetected({ deType, enumValue, filterType, term, value, name, timeValue })
+      if (fieldId) {
+        items.push({
+          enumValue: enumValue ? enumValue.split(',') : [],
+          fieldId,
+          timeValue,
+          filterType,
+          filterTypeTime,
+          dynamicTimeSetting,
+          term,
+          value,
+          type: 'item',
+          subTree: null
+        })
+      }
+    }
+  })
+  return items
+}
+const removeRelationList = () => {
+  relationList.value = []
+}
+const getY = arr => {
+  const [a] = arr
+  if (a.child?.length) {
+    return getY(a.child)
+  }
+  return a.y
+}
+const calculateDepthDash = obj => {
+  const lg = obj.child?.length
+  let path = ''
+  if (!lg && Array.isArray(obj.child)) {
+    const { x, y } = obj
+    path += `M${48 + x * 68} ${y * 41.4 + 20} L${88 + x * 68} ${y * 41.4 + 20}`
+  } else if (obj.child?.length) {
+    let y = Math.max(dfsY(obj, 0), dfs(obj.child, 0) + getY(obj.child) - 1)
+    let parent = (dfs(obj.child, 0) * 41.4) / 2 + (getY(obj.child) || 0) * 41.4
+    const { x } = obj
+    path += `M${24 + x * 68} ${parent} L${24 + x * 68} ${y * 41.4 + 20} L${64 + x * 68} ${
+      y * 41.4 + 20
+    }`
+    obj.child.forEach(item => {
+      path += calculateDepthDash(item)
+    })
+  }
+
+  return path
+}
+const calculateDepth = obj => {
+  const lg = obj.child.length
+  if (!lg) return ''
+  let path = ''
+  const { x: depth, y } = obj
+  obj.child.forEach((item, index) => {
+    const { y: sibingLg, z } = item
+    if (item.child?.length) {
+      let parent = (dfs(obj.child, 0) * 41.4) / 2 + (getY(obj.child) || 0) * 41.4
+      let children = (dfs(item.child, 0) * 41.4) / 2 + getY(item.child) * 41.4
+      let path1 = 0
+      let path2 = 0
+      if (parent < children) {
+        path1 = parent
+        path2 = children
+      } else {
+        ;[path1, path2] = [children, parent]
+      }
+      if (y >= sibingLg) {
+        path1 = parent
+        path2 = children
+      }
+      path += `M${24 + depth * 68} ${path1} L${24 + depth * 68} ${path2} L${
+        68 + depth * 68
+      } ${path2}`
+      path += calculateDepth(item)
+    }
+    if (!item.child?.length) {
+      if (sibingLg >= y) {
+        path += `M${24 + depth * 68} ${y * 40} L${24 + depth * 68} ${
+          (sibingLg + 1) * 41.4 - 20.69921875
+        } L${68 + depth * 68} ${(sibingLg + 1) * 41.4 - 20.69921875}`
+      } else {
+        path += `M${24 + depth * 68} ${
+          (sibingLg +
+            (lg === 1 && index === 0 ? 0 : 1) +
+            (obj.child[index + 1]?.child?.length ? y - sibingLg - 1 : 0)) *
+            41.4 +
+          20 +
+          (lg === 1 && index === 0 ? 26 : 0)
+        } L${24 + depth * 68} ${
+          (sibingLg + 1) * 41.4 - 20.69921875 - (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+        } L${68 + depth * 68} ${
+          (sibingLg + 1) * 41.4 - 20.69921875 - (lg === 1 && index === 0 ? (z || 0) * 1.4 : 0)
+        }`
+      }
+    }
+  })
+  return path
+}
+const changeAndOrDfs = (arr, logic) => {
+  arr.forEach(ele => {
+    if (ele.child) {
+      ele.logic = logic === 'and' ? 'or' : 'and'
+      changeAndOrDfs(ele.child, ele.logic)
+    }
+  })
+}
+const dfs = (arr, count) => {
+  arr.forEach(ele => {
+    if (ele.child?.length) {
+      count = dfs(ele.child, count)
+    } else {
+      count += 1
+    }
+  })
+  count += 1
+  return count
+}
+const dfsY = (obj, count) => {
+  obj.child.forEach(ele => {
+    if (ele.child?.length) {
+      count = dfsY(ele, count)
+    } else {
+      count = Math.max(count, ele.y, obj.y)
+    }
+  })
+  return count
+}
+const dfsXY = (obj, count) => {
+  obj.child.forEach(ele => {
+    ele.x = obj.x + 1
+    if (ele.child?.length) {
+      let l = dfs(ele.child, 0)
+      ele.y = Math.floor(l / 2) + count
+      count = dfsXY(ele, count)
+    } else {
+      count += 1
+      ele.y = count - 1
+    }
+  })
+  count += 1
+  return count
+}
+const addCondReal = (type, logic) => {
+  relationList.value.push(
+    type === 'condition'
+      ? {
+          fieldId: '',
+          value: '',
+          enumValue: '',
+          term: '',
+          filterType: 'logic',
+          name: '',
+          timeValue: '',
+          filterTypeTime: 'dateValue',
+          dynamicTimeSetting: {},
+          deType: ''
+        }
+      : { child: [], logic }
+  )
+}
+const del = index => {
+  relationList.value.splice(index, 1)
+}
+
+defineExpose({
+  init,
+  submit
+})
+const emits = defineEmits(['save'])
+</script>
+
+<template>
+  <div class="rowAuth">
+    <auth-tree
+      @del="idx => del(idx)"
+      @addCondReal="addCondReal"
+      @removeRelationList="removeRelationList"
+      @changeAndOrDfs="type => changeAndOrDfs(relationList, type)"
+      :relationList="relationList"
+      v-model:logic="logic"
+    />
+    <svg width="388" height="100%" class="real-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgRealinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+      ></path>
+    </svg>
+    <svg width="388" height="100%" class="dash-line">
+      <path
+        stroke-linejoin="round"
+        stroke-linecap="round"
+        :d="svgDashinePath"
+        fill="none"
+        stroke="#CCCCCC"
+        stroke-width="0.5"
+        stroke-dasharray="4,4"
+      ></path>
+    </svg>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.rowAuth {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  text-align: center;
+  color: #2c3e50;
+  position: relative;
+}
+.real-line,
+.dash-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  user-select: none;
+}
+</style>
diff --git a/de-xpack b/de-xpack
index 11b651cfa7..11240f0a32 160000
--- a/de-xpack
+++ b/de-xpack
@@ -1 +1 @@
-Subproject commit 11b651cfa73e22195c36887672539a6a7ee0dddc
+Subproject commit 11240f0a32fc1916409c82580e79fb17bb7988eb