From e28b80f302d91b4772e7d4ea0b0b7eca4f85e652 Mon Sep 17 00:00:00 2001
From: dataeaseShu <106045316+dataeaseShu@users.noreply.github.com>
Date: Tue, 8 Nov 2022 18:12:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=95=B0=E6=8D=AE=E9=9B=86=E5=AF=BC?=
 =?UTF-8?q?=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/views/dataset/data/ViewTable.vue |   51 +-
 .../dataset/data/components/filterFiled.vue   | 1060 +++++++++++++++++
 .../views/dataset/data/components/rowAuth.vue |  350 ++++++
 .../dataset/data/components/rowAuthTree.vue   |  251 ++++
 frontend/src/views/dataset/data/options.js    |   24 +
 5 files changed, 1725 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/views/dataset/data/components/filterFiled.vue
 create mode 100644 frontend/src/views/dataset/data/components/rowAuth.vue
 create mode 100644 frontend/src/views/dataset/data/components/rowAuthTree.vue
 create mode 100644 frontend/src/views/dataset/data/options.js

diff --git a/frontend/src/views/dataset/data/ViewTable.vue b/frontend/src/views/dataset/data/ViewTable.vue
index b78ea0c3d2..bc40625337 100644
--- a/frontend/src/views/dataset/data/ViewTable.vue
+++ b/frontend/src/views/dataset/data/ViewTable.vue
@@ -190,7 +190,7 @@
       v-dialogDrag
       :visible.sync="showExport"
       width="600px"
-      class="de-dialog-form"
+      class="de-dialog-form form-tree-cont"
       :title="$t('dataset.export_dataset')"
       append-to-body
     >
@@ -216,11 +216,9 @@
           :label="$t('dataset.export_filter')"
           prop="expressionTree"
         >
-          <!--TODO 下面的input需用行权限的树形过滤组件替换-->
-          <el-input
-            v-model.trim="exportForm.expressionTree"
-            placeholder="请输入筛选条件"
-          />
+          <div class="tree-cont">
+            <rowAuth ref="rowAuth" />
+          </div>
         </el-form-item>
       </el-form>
       <span class="tip">提示：最多支持导出10万条数据</span>
@@ -251,6 +249,8 @@ import FieldEdit from './FieldEdit'
 import { pluginLoaded } from '@/api/user'
 import PluginCom from '@/views/system/plugin/PluginCom'
 import UpdateRecords from './UpdateRecords'
+import rowAuth from './components/rowAuth.vue'
+
 export default {
   name: 'ViewTable',
   components: {
@@ -259,8 +259,14 @@ export default {
     UpdateInfo,
     TabDataPreview,
     UpdateRecords,
+    rowAuth,
     PluginCom
   },
+  provide() {
+    return {
+      filedList: () => this.filedList
+    }
+  },
   props: {
     param: {
       type: Object,
@@ -273,6 +279,7 @@ export default {
         name: ''
       },
       fields: [],
+      filedList: [],
       data: [],
       syncStatus: '',
       lastRequestComplete: true,
@@ -289,8 +296,7 @@ export default {
       isPluginLoaded: false,
       showExport: false,
       exportForm: {
-        name: '',
-        expressionTree: ''
+        name: ''
       },
       exportFormRules: {
         name: [
@@ -345,6 +351,13 @@ export default {
     this.initTable(this.param.id)
   },
   methods: {
+    fetchFiledList() {
+      this.filedList = []
+      post('dataset/field/listForPermissionSeting/' + this.param.id,
+        {}).then((res) => {
+        this.filedList = res.data
+      })
+    },
     initTable(id) {
       this.resetPage()
       this.tableViewRowForm.row = 1000
@@ -455,8 +468,8 @@ export default {
 
     exportDataset() {
       this.showExport = true
+      this.fetchFiledList()
       this.exportForm.name = this.table.name
-      this.exportForm.expressionTree = ''
     },
     closeExport() {
       this.showExport = false
@@ -467,7 +480,16 @@ export default {
           if (this.table.id) {
             this.table.row = 100000
             this.table.filename = this.exportForm.name
-            this.table.expressionTree = this.exportForm.expressionTree
+            const { logic, items, errorMessage } = this.$refs.rowAuth.submit()
+            if (errorMessage) {
+              this.$message({
+                message: errorMessage,
+                type: 'error',
+                showClose: true
+              })
+              return
+            }
+            this.table.expressionTree = JSON.stringify({ items, logic })
             exportDataset(this.table).then((res) => {
               const blob = new Blob([res], { type: 'application/vnd.ms-excel' })
               const link = document.createElement('a')
@@ -488,7 +510,14 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss">
+.form-tree-cont {
+  .tree-cont {
+    height: 200px;
+    width: 100%;
+    overflow-x: auto;
+  }
+}
 .icon-class {
   color: #6c6c6c;
 }
diff --git a/frontend/src/views/dataset/data/components/filterFiled.vue b/frontend/src/views/dataset/data/components/filterFiled.vue
new file mode 100644
index 0000000000..d8c6cbbb1c
--- /dev/null
+++ b/frontend/src/views/dataset/data/components/filterFiled.vue
@@ -0,0 +1,1060 @@
+<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
+          v-model="item.name"
+          :placeholder="$t('auth.selct_filter_fields')"
+          size="mini"
+          @input="cancel"
+        />
+        <el-dropdown-menu
+          slot="dropdown"
+          class="de-el-dropdown-menu"
+        >
+          <el-input
+            v-model="keywords"
+            :placeholder="$t('auth.enter_keywords')"
+            prefix-icon="el-icon-search"
+            size="mini"
+          />
+          <ul class="dimension">
+            <li
+              v-for="ele in dimensions"
+              :key="ele.id"
+              :style="{
+                backgroundColor: activeName === ele.name ? '#f0f7ff' : '',
+              }"
+              @click="selectItem(ele)"
+            >
+              <svg-icon
+                :icon-class="`field_${fieldEnum[ele.deType]}`"
+                :class="`field-icon-${fieldEnum[ele.deType]}`"
+              />
+              <span>{{ ele.name }}</span>
+            </li>
+          </ul>
+        </el-dropdown-menu>
+      </el-dropdown>
+      <div
+        v-if="item.fieldId"
+        class="white-nowrap"
+        style="position: relative"
+      >
+        <span class="filed-title">{{ $t("auth.screen_method") }}</span>
+        <el-select
+          v-model="item.filterType"
+          size="mini"
+          :placeholder="$t('auth.select')"
+          @change="filterTypeChange"
+        >
+          <el-option
+            v-for="ele in filterList"
+            :key="ele.value"
+            :label="ele.label"
+            :value="ele.value"
+          />
+        </el-select>
+        <span class="filed-title">{{ $t("auth.fixed_value") }}</span>
+        <template v-if="item.filterType === 'logic'">
+          <el-select
+            v-model="item.term"
+            class="w100"
+            size="mini"
+            :placeholder="$t('auth.default_method')"
+            @change="onOptionsChange"
+          >
+            <el-option
+              v-for="ele in operators"
+              :key="ele.value"
+              :label="$t(ele.label)"
+              :value="ele.value"
+            />
+          </el-select>
+          <template v-if="[2 ,3].includes(item.deType) && !['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input-number
+              v-model="item.value"
+              class="w70 mar5"
+              size="mini"
+              controls-position="right"
+            />
+            <div class="de-bottom-line" />
+          </template>
+          <template v-else-if="!['null', 'empty', 'not_null', 'not_empty'].includes(item.term)">
+            <el-input
+              v-model="item.value"
+              class="w70 mar5"
+              size="mini"
+            />
+            <div class="de-bottom-line" />
+          </template>
+        </template>
+
+        <el-dropdown
+          v-else
+          ref="deElDropdownMenuFixed"
+          trigger="click"
+          :hide-on-click="false"
+        >
+          <el-input
+            ref="enumInput"
+            v-model="item.enumValue"
+            size="mini"
+            clearable
+            @input="cancelfixValue"
+            @clear="clearAll"
+          />
+          <el-dropdown-menu
+            slot="dropdown"
+            class="de-el-dropdown-menu-fixed"
+          >
+            <div class="de-panel clearfix">
+              <div class="mod-left">
+                <el-input
+                  v-model="filterFiled"
+                  :placeholder="$t('auth.enter_keywords')"
+                />
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto"
+                >
+                  <li
+                    v-for="i in checkListWithFilter"
+                    :key="i"
+                    class="infinite-list-item"
+                    @click="checkItem(i)"
+                  >
+                    <i
+                      class="el-icon-check"
+                      :style="{ opacity: checklist.includes(i) ? 1 : 0 }"
+                    />
+                    <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" />
+                      {{ $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
+                            v-model="textareaValue"
+                            :placeholder="$t('auth.please_fill')"
+                            class="input"
+                          />
+                          <div class="text-area-btn">
+                            <button
+                              type="button"
+                              class="btn"
+                              @click="showTextArea = false"
+                            >
+                              <span>{{ $t("auth.close") }}</span>
+                            </button>
+                            <button
+                              type="button"
+                              class="btn right-add"
+                              @click="addFields"
+                            >
+                              <span>{{ $t("auth.add") }}</span>
+                            </button>
+                          </div>
+                        </div>
+                      </div>
+                    </transition>
+                  </div>
+                </div>
+                <ul
+                  class="infinite-list autochecker-list"
+                  style="overflow: auto"
+                >
+                  <li
+                    v-for="(i, idx) in checklist"
+                    :key="i"
+                    class="infinite-list-item"
+                  >
+                    <el-tooltip
+                      class="item"
+                      effect="light"
+                      :content="i"
+                      placement="top"
+                      :open-delay="1000"
+                    >
+                      <label>{{ i }}</label>
+                    </el-tooltip>
+                    <i
+                      class="el-icon-delete"
+                      style="opacity: 1"
+                      @click="delChecks(idx)"
+                    />
+                  </li>
+                </ul>
+                <div class="right-menu-foot">
+                  <div class="footer-left">
+                    {{ $t("auth.added") }} {{ checklist.length }}
+                  </div>
+                  <div
+                    class="confirm-btn"
+                    @click="confirm"
+                  >
+                    {{ $t("auth.sure") }}
+                  </div>
+                  <div class="footer-right">
+                    <i
+                      class="el-icon-delete"
+                      @click="clearAll"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <i
+        v-if="showDel"
+        class="el-icon-delete font12"
+        @click="$emit('del', index)"
+      />
+    </div>
+  </div>
+</template>
+
+<script>
+import { post } from '@/api/dataset/dataset'
+
+import {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum
+} from '../options'
+export default {
+  inject: ['filedList'],
+  props: {
+    index: {
+      type: Number,
+      default: 0
+    },
+    item: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      showDel: false,
+      keywords: '',
+      activeName: '',
+      fieldEnum,
+      filterFiled: '',
+      enumList: [],
+      showTextArea: false,
+      keydownCanceled: false,
+      checklist: [],
+      filterList: [],
+      textareaValue: ''
+    }
+  },
+  computed: {
+    checkListWithFilter() {
+      if (!this.filterFiled) return this.enumList
+      return this.enumList.filter((ele) => ele.includes(this.filterFiled))
+    },
+    checkResult() {
+      return this.checklist.join(',')
+    },
+    computedWidth() {
+      const { term, fieldId, filterType } = this.item
+      const isNull = ['null', 'empty', 'not_null', 'not_empty'].includes(term) && filterType === 'logic'
+      return {
+        width: !fieldId ? '270px' : isNull ? '670px' : '750px'
+      }
+    },
+    operators() {
+      const { deType } = this.item
+      if ([0, 5].includes(deType)) {
+        return textOptions
+      } else if (deType === 1) {
+        return dateOptions
+      } else {
+        return valueOptions
+      }
+    },
+    dimensions() {
+      if (!this.keywords) return this.computedFiledList
+      return this.computedFiledList.filter((ele) =>
+        ele.name.includes(this.keywords)
+      )
+    },
+    computedFiledList() {
+      return this.filedList()
+    }
+  },
+  watch: {
+    checkResult() {
+      this.cancelfixValue()
+    }
+  },
+  created() {
+    this.initNameEnumName()
+    this.filterListInit(this.item.deType)
+  },
+  methods: {
+    confirm() {
+      this.$refs.enumInput.$el.click()
+    },
+    initNameEnumName() {
+      const { name, enumValue, fieldId } = this.item
+      if (!name && fieldId) {
+        this.checklist = enumValue.split(',')
+      }
+      if (!name && !fieldId) return
+      this.initEnumOptions()
+      this.activeName = this.item.name
+      this.checklist = enumValue.split(',')
+    },
+    cancelKeyDow() {
+      if (!this.showTextArea && !this.keydownCanceled) {
+        this.keydownCanceled = true
+        const { dropdownElm, handleItemKeyDown } =
+          this.$refs.deElDropdownMenuFixed
+        dropdownElm.removeEventListener('keydown', handleItemKeyDown, true)
+      }
+      this.showTextArea = true
+    },
+    filterTypeChange() {
+      this.item.term = ''
+      this.item.value = ''
+      this.initEnumOptions()
+    },
+    initEnumOptions() {
+      const { deType, filterType, fieldId } = this.item
+      // 查找枚举值
+      if (filterType === 'enum' && [0, 5].includes(deType)) {
+        post('dataset/field/multFieldValuesForPermissions', { fieldIds: [fieldId] }).then(res => {
+          this.enumList = this.optionData(res.data)
+        })
+      }
+    },
+    onOptionsChange(term) {
+      this.item.value = ''
+    },
+    optionData(data) {
+      if (!data) return null
+      return data.filter((item) => !!item)
+    },
+    cancel() {
+      this.item.name = this.activeName || ''
+    },
+    cancelfixValue() {
+      this.item.enumValue = this.checkResult || ''
+    },
+    delChecks(idx) {
+      this.checklist.splice(idx, 1)
+    },
+    selectItem({ name, id, deType }) {
+      this.activeName = name
+      Object.assign(this.item, {
+        fieldId: id,
+        name,
+        deType,
+        filterType: 'logic',
+        enumValue: '',
+        value: '',
+        term: ''
+      })
+      this.filterListInit(deType)
+      this.checklist = []
+    },
+    filterListInit(deType) {
+      this.filterList = [
+        {
+          value: 'logic',
+          label: '条件筛选'
+        },
+        {
+          value: 'enum',
+          label: '枚举筛选'
+        }
+      ]
+      if ([1, 2, 3].includes(deType)) {
+        this.filterList = [this.filterList[0]]
+      }
+    },
+    clearAll() {
+      this.checklist = []
+    },
+    selectAll() {
+      this.checkListWithFilter.forEach((ele) => {
+        if (!this.checklist.includes(ele)) {
+          this.checklist.push(ele)
+        }
+      })
+    },
+    addFields() {
+      const list = this.textareaValue.split('\n').reduce((pre, next) => {
+        const str = next.trim()
+        if (!str) return pre
+        pre.add(str)
+        return pre
+      }, new Set([]))
+      if (list.size) {
+        this.checklist = [...this.checklist, ...list]
+      }
+      this.showTextArea = false
+    },
+    checkItem(i) {
+      const index = this.checklist.findIndex((ele) => ele === i)
+      if (index === -1) {
+        this.checklist.push(i)
+      } else {
+        this.delChecks(index)
+      }
+    },
+    handleClickOutside() {
+      this.showTextArea = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" 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;
+
+  ::v-deep.el-input--mini {
+    height: 26px;
+  }
+
+  >>>.el-input--mini {
+    height: 26px;
+  }
+
+  .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;
+  }
+
+  .el-input {
+    width: 170px;
+  }
+
+  .w100.el-select {
+    width: 100px;
+  }
+
+  .w70 {
+    width: 70px;
+  }
+
+  .mar5 {
+    margin-left: -5px;
+  }
+  ::v-deep.el-input-number__decrease,
+  ::v-deep.el-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;
+  }
+
+  ::v-deep.el-input-number__decrease:hover {
+    height: 16px;
+    & + .el-input-number__increase {
+      height: 8px;
+    }
+  }
+  ::v-deep.el-input-number__increase:hover {
+    height: 16px;
+    & + .el-input-number__decrease {
+      height: 8px;
+    }
+  }
+
+  .de-bottom-line {
+    font-family: PingFang SC, 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: 9px;
+    width: 70px;
+    z-index: 10;
+  }
+
+  ::v-deep.el-input-number.is-controls-right .el-input__inner {
+    padding-right: 20px;
+  }
+
+  .el-input-number {
+    line-height: 26px;
+    height: 27px;
+  }
+
+  ::v-deep.el-select {
+    >>> .el-input__suffix-inner {
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .el-input__icon {
+        height: auto;
+      }
+    }
+  }
+
+  ::v-deep.el-input__inner {
+    background-color: #f8f8fa;
+    border: none;
+    border-radius: 0;
+    height: 26px;
+
+    font-family: PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+    word-wrap: break-word;
+    text-align: left;
+    color: rgba(0, 0, 0, 0.65);
+    font-size: 12px;
+    font-variant: tabular-nums;
+    font-feature-settings: "tnum";
+    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;
+  }
+
+  i {
+    margin-left: 5px;
+    color: #7e7e7e;
+  }
+}
+.filed:hover {
+  background-color: #e9eaef;
+  ::v-deep.el-input-number__decrease,
+  ::v-deep.el-input-number__increase {
+    display: flex;
+  }
+}
+</style>
+
+<style lang="scss">
+.de-el-dropdown-menu {
+  .dimension {
+    padding: 0;
+    li {
+      font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+        PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
+      font-variant: tabular-nums;
+      font-feature-settings: "tnum";
+      list-style: none;
+      box-sizing: border-box;
+      display: block;
+      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);
+    }
+    li:hover {
+      color: #2e74ff;
+      background-color: #f0f7ff;
+    }
+  }
+  .el-input__inner {
+    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;
+    -webkit-appearance: none;
+    touch-action: manipulation;
+    text-overflow: ellipsis;
+    position: relative;
+    text-align: inherit;
+    min-height: 100%;
+    border: 0;
+    border-bottom: 1px solid #e5e5e5;
+    border-radius: 0;
+    padding-left: 26px;
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgb(46 116 255 / 20%);
+      border-right-width: 1px !important;
+      outline: 0;
+      border-color: none;
+    }
+  }
+
+  .el-input {
+    font-family: Alibaba-PuHuiTi-Regular, Helvetica Neue, Helvetica, Arial,
+      PingFang SC, 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 {
+  .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: PingFang SC, 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;
+      .el-input__inner {
+        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: PingFang SC, 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: PingFang SC, 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;
+      // overflow: hidden;
+      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;
+        // overflow: hidden;
+        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 {
+  zoom: 1;
+}
+</style>
diff --git a/frontend/src/views/dataset/data/components/rowAuth.vue b/frontend/src/views/dataset/data/components/rowAuth.vue
new file mode 100644
index 0000000000..e480e91405
--- /dev/null
+++ b/frontend/src/views/dataset/data/components/rowAuth.vue
@@ -0,0 +1,350 @@
+<template>
+  <div class="rowAuth">
+    <rowAuthTree
+      :relation-list="relationList"
+      :logic.sync="logic"
+      @del="(idx) => del(idx)"
+      @addCondReal="addCondReal"
+      @removeRelationList="removeRelationList"
+      @changeAndOrDfs="(type) => changeAndOrDfs(relationList, type)"
+    />
+    <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"
+      />
+    </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"
+      />
+    </svg>
+  </div>
+</template>
+
+<script>
+import rowAuthTree from './rowAuthTree.vue'
+
+export default {
+  name: 'RowAuth',
+  components: {
+    rowAuthTree
+  },
+  data() {
+    return {
+      relationList: [],
+      logic: 'or',
+      errorMessage: ''
+    }
+  },
+  computed: {
+    svgRealinePath() {
+      const lg = this.relationList.length
+      const a = { x: 0, y: 0, child: this.relationList }
+      a.y = Math.floor(this.dfsXY(a, 0) / 2)
+      if (!lg) return ''
+      const path = this.calculateDepth(a)
+      return path
+    },
+    svgDashinePath() {
+      const lg = this.relationList.length
+      const a = { x: 0, y: 0, child: this.relationList }
+      a.y = Math.floor(this.dfsXY(a, 0) / 2)
+      if (!lg) return `M48 20 L68 20`
+      const path = this.calculateDepthDash(a)
+      return path
+    }
+  },
+  methods: {
+    init(expressionTree) {
+      const { logic = 'or', items = [] } = expressionTree
+      this.logic = logic
+      this.relationList = this.dfsInit(items)
+    },
+    submit() {
+      this.errorMessage = ''
+      return {
+        logic: this.logic,
+        items: this.dfsSubmit(this.relationList),
+        errorMessage: this.errorMessage
+      }
+    },
+    errorDetected({ enumValue, deType, filterType, term, value }) {
+      if (filterType === 'logic') {
+        if (
+          !term.includes('null') &&
+          !term.includes('empty') &&
+          (value === '')
+        ) {
+          this.errorMessage = this.$t('chart.filter_value_can_null')
+          return
+        }
+        if ([2, 3].includes(deType)) {
+          if (parseFloat(value).toString() === 'NaN') {
+            this.errorMessage = this.$t('chart.filter_value_can_not_str')
+            return
+          }
+        }
+      }
+      if (filterType === 'enum') {
+        if (enumValue.length < 1) {
+          this.errorMessage = this.$t('chart.enum_value_can_not_null')
+          return
+        }
+      }
+    },
+    dfsInit(arr) {
+      const elementList = []
+      arr.forEach((ele) => {
+        const { subTree } = ele
+        if (subTree) {
+          const { items, logic } = subTree
+          const child = this.dfsInit(items)
+          elementList.push({ logic, child })
+        } else {
+          const {
+            enumValue,
+            fieldId,
+            filterType,
+            term,
+            value,
+            field
+          } = ele
+          const { name, deType } = (field || {})
+          elementList.push({
+            enumValue: enumValue.join(','),
+            fieldId,
+            filterType,
+            term,
+            value,
+            name,
+            deType
+          })
+        }
+      })
+      return elementList
+    },
+    dfsSubmit(arr) {
+      const items = []
+      arr.forEach((ele) => {
+        const { child = [] } = ele
+        if (child.length) {
+          const { logic } = ele
+          const subTree = this.dfsSubmit(child)
+          items.push({
+            enumValue: [],
+            fieldId: '',
+            filterType: '',
+            term: '',
+            type: 'tree',
+            value: '', subTree: { logic, items: subTree }})
+        } else {
+          const { enumValue, fieldId, filterType, deType, term, value } = ele
+          this.errorDetected({ deType, enumValue, filterType, term, value })
+          if (fieldId) {
+            items.push({
+              enumValue: enumValue ? enumValue.split(',') : [],
+              fieldId,
+              filterType,
+              term,
+              value,
+              type: 'item',
+              subTree: null
+            })
+          }
+        }
+      })
+      return items
+    },
+    removeRelationList() {
+      this.relationList = []
+    },
+    getY(arr) {
+      const [a] = arr
+      if (a.child?.length) {
+        return this.getY(a.child)
+      }
+      return a.y
+    },
+    getLastY(arr) {
+      const a = arr[arr.length]
+      if (a.child?.length) {
+        return this.getLastY(a.child)
+      }
+      return a.y
+    },
+    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) {
+        const y = Math.max(
+          this.dfsY(obj, 0),
+          this.dfs(obj.child, 0) + this.getY(obj.child) - 1
+        )
+        const parent =
+          (this.dfs(obj.child, 0) * 41.4) / 2 +
+          (this.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 += this.calculateDepthDash(item)
+        })
+      }
+
+      return path
+    },
+    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) {
+          const parent =
+            (this.dfs(obj.child, 0) * 41.4) / 2 +
+            (this.getY(obj.child) || 0) * 41.4
+          const children =
+            (this.dfs(item.child, 0) * 41.4) / 2 + this.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 += this.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
+    },
+    changeAndOrDfs(arr, logic) {
+      arr.forEach((ele) => {
+        if (ele.child) {
+          ele.logic = logic === 'and' ? 'or' : 'and'
+          this.changeAndOrDfs(ele.child, ele.logic)
+        }
+      })
+    },
+    dfs(arr, count) {
+      arr.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfs(ele.child, count)
+        } else {
+          count += 1
+        }
+      })
+      count += 1
+      return count
+    },
+    dfsY(obj, count) {
+      obj.child.forEach((ele) => {
+        if (ele.child?.length) {
+          count = this.dfsY(ele, count)
+        } else {
+          count = Math.max(count, ele.y, obj.y)
+        }
+      })
+      return count
+    },
+    dfsXY(obj, count) {
+      obj.child.forEach((ele) => {
+        ele.x = obj.x + 1
+        if (ele.child?.length) {
+          const l = this.dfs(ele.child, 0)
+          ele.y = Math.floor(l / 2) + count
+          count = this.dfsXY(ele, count)
+        } else {
+          count += 1
+          ele.y = count - 1
+        }
+      })
+      count += 1
+      return count
+    },
+    addCondReal(type, logic) {
+      this.relationList.push(
+        type === 'condition'
+          ? { fieldId: '', value: '', enumValue: '', term: '', filterType: 'logic', name: '', deType: '' }
+          : { child: [], logic }
+      )
+    },
+    del(index) {
+      this.relationList.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style>
+.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/frontend/src/views/dataset/data/components/rowAuthTree.vue b/frontend/src/views/dataset/data/components/rowAuthTree.vue
new file mode 100644
index 0000000000..d57c4dc971
--- /dev/null
+++ b/frontend/src/views/dataset/data/components/rowAuthTree.vue
@@ -0,0 +1,251 @@
+<template>
+  <div
+    class="logic"
+    :style="marginLeft"
+  >
+    <div class="logic-left">
+      <div class="operate-title">
+        <span
+          v-if="x"
+          style="
+             {
+              color: '#bfbfbf';
+            }
+          "
+          class="mrg-title"
+        >
+          {{ logic === 'or' ? "OR" : "AND" }}
+        </span>
+        <el-dropdown
+          v-else
+          trigger="click"
+          @command="handleCommand"
+        >
+          <span
+            style="
+               {
+                color: 'rgba(0,0,0,.65)';
+              }
+            "
+            class="mrg-title"
+          >
+            {{ logic === 'or' ? "OR" : "AND" }}<i class="el-icon-arrow-down" />
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item command="and">AND</el-dropdown-item>
+            <el-dropdown-item command="or">OR</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+      <span
+        v-if="x"
+        class="operate-icon"
+      >
+        <i
+          class="el-icon-delete"
+          @click="$emit('removeRelationList')"
+        />
+      </span>
+    </div>
+    <div class="logic-right">
+      <template v-for="(item, index) in relationList">
+        <logic-relation
+          v-if="item.child"
+          :key="index"
+          :x="item.x"
+          :logic="item.logic"
+          :relation-list="item.child"
+          @del="(idx) => del(idx, item.child)"
+          @addCondReal="(type, logic) => add(type, item.child, logic)"
+          @removeRelationList="removeRelationList(index)"
+        />
+        <filter-filed
+          v-else
+          :key="index"
+          :item="item"
+          :index="index"
+          @del="$emit('del', index)"
+        />
+      </template>
+      <div class="logic-right-add">
+        <button
+          class="operand-btn"
+          @click="addCondReal('condition')"
+        >
+          + {{ $t('auth.add_condition') }}
+        </button>
+        <button
+          v-if="x < 2"
+          class="operand-btn"
+          @click="addCondReal('relation')"
+        >
+          + {{ $t('auth.add_relationship') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import filterFiled from './filterFiled'
+export default {
+  name: 'LogicRelation',
+  components: {
+    filterFiled
+  },
+  props: {
+    relationList: {
+      type: Array,
+      default: () => []
+    },
+    x: {
+      type: Number,
+      default: 0
+    },
+    logic: {
+      type: String,
+      default: 'or'
+    }
+  },
+  computed: {
+    marginLeft() {
+      return {
+        marginLeft: this.x ? '20px' : 0
+      }
+    }
+  },
+  methods: {
+    handleCommand(type) {
+      this.$emit('update:logic', type)
+      this.$emit('changeAndOrDfs', type)
+    },
+    removeRelationList(index) {
+      this.relationList.splice(index, 1)
+    },
+    addCondReal(type) {
+      this.$emit('addCondReal', type, this.logic === 'or' ? 'and' : 'or')
+    },
+    add(type, child, logic) {
+      child.push(type === 'condition' ? { fieldId: '', value: '', enumValue: '', term: '', filterType: 'logic', name: '', deType: '' } : { child: [], logic })
+    },
+    del(index, child) {
+      child.splice(index, 1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scope>
+.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;
+    flex-direction: row;
+    z-index: 10;
+
+    .operate-title {
+      font-family: PingFang SC, 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;
+
+        i {
+        font-size: 12px;
+      }
+      }
+    }
+
+    &:hover {
+      .operate-icon {
+        display: flex;
+        align-items: center;
+      }
+
+      .operate-title {
+          .mrg-title {
+            margin-right: 0 !important;
+          }
+      }
+
+    }
+
+    .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;
+      -webkit-appearance: button;
+      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/frontend/src/views/dataset/data/options.js b/frontend/src/views/dataset/data/options.js
new file mode 100644
index 0000000000..36a1f426bc
--- /dev/null
+++ b/frontend/src/views/dataset/data/options.js
@@ -0,0 +1,24 @@
+function formatEnum(ele) {
+  return {
+    value: ele,
+    label: `chart.filter_${ele.replace(' ', '_')}`
+  }
+}
+
+const textEnum = ['eq', 'not_eq', 'like', 'not like', 'null', 'not_null', 'empty', 'not_empty']
+const textOptions = textEnum.map(formatEnum)
+
+const dateEnum = ['eq', 'not_eq', 'lt', 'gt', 'le', 'ge']
+const dateOptions = dateEnum.map(formatEnum)
+
+const valueEnum = [...dateEnum]
+const valueOptions = valueEnum.map(formatEnum)
+
+const fieldEnum = ['text', 'time', 'value', 'value', '', 'location']
+
+export {
+  textOptions,
+  dateOptions,
+  valueOptions,
+  fieldEnum
+}