n20-project-component 1.0.1 → 1.0.5

package/src/components/ProFilterView/AdvancedFilter/index.vue

@@ -0,0 +1,895 @@
+<template>
+  <div :class="prefixCls">
+    <el-form v-show="visible" ref="advancedFilter" :class="prefixCls + '-body'" @submit.native.prevent="() => {}">
+      <slot name="prefix"></slot>
+      <el-form-item
+        v-for="item in GroupData"
+        :key="getOnlyKey(item)"
+        :class="[prefixCls + '-item', activeClassMap[item.value || item[onlyKey]] || '']"
+        :label="item.label"
+        :required="!!item.required"
+        :disabled="item.props && item.props.disabled"
+      >
+        <div :class="prefixCls + '-content'">
+          <slot v-if="item.slotName && $scopedSlots[item.slotName]" :name="item.slotName"></slot>
+          <formItemRender
+            v-else
+            :form="model"
+            :item="item"
+            @blur="$emit('blur')"
+            @clean="$emit('clean')"
+            @enter="$emit('enter')"
+            @filter="$emit('filter', model)"
+            @change="$emit('change', $event)"
+          />
+        </div>
+        <i
+          v-if="!item.isNotClose && !filterReadonly"
+          :key="getOnlyKey(item)"
+          :class="['filter_remove', 'n20-icon-yichu']"
+          @click="handleClose(item)"
+        ></i>
+      </el-form-item>
+      <slot name="suffix"></slot>
+      <el-form-item :class="prefixCls + '-add'">
+        <el-button v-show="!filterReadonly" v-popover:advanced_popover onlyicon plain>
+          <i class="v3-icon-plus"></i>
+          {{ $lc('添加条件') }}
+        </el-button>
+        <el-popover ref="advanced_popover" placement="bottom-start" trigger="click">
+          <el-input v-model="keyword" clearable class="input-w m-b-s" :placeholder="$lc('搜索筛选条件')" />
+          <div class="flex-box flex-lr">
+            <el-button type="text" @click="allCheck">{{
+              isAllNonFixedChecked ? $lc('取消全选') : $lc('全选')
+            }}</el-button>
+            <el-button v-if="filterId" type="text" @click="defaultCheck">{{ $lc('恢复默认') }}</el-button>
+          </div>
+          <filterItem
+            :filter-list="filterListS"
+            :max-length="maxLength"
+            :check-array.sync="checkList"
+            @checked="check"
+          />
+          <div class="flex-box flex-c m-t-m">
+            <el-button size="mini" type="primary" @click="savaCheck">{{ $lc('确认') }}</el-button>
+            <el-button plain type="primary" @click="cancel">{{ $lc('取消') }}</el-button>
+          </div>
+        </el-popover>
+        <span v-if="filterId" class="m-l-s color-primary" :underline="false" @click="$emit('search')">
+          <i class="v3-icon-search"></i>
+          {{ '查询' | $lc }}</span
+        >
+        <span
+          v-if="bussId && !filterReadonly"
+          class="m-l-s"
+          style="
+            display: inline-block;
+            border-radius: 4px;
+            background: var(--fill-1, #f7f8fa);
+            padding: 3px 12px;
+            height: 24px;
+            line-height: 24px;
+          "
+          @click="addView"
+        >
+          <i class="v3-icon-folder-add"></i>
+          {{ '另存为视图' | $lc }}
+        </span>
+        <span v-if="filterId" class="m-l-s color-primary" :underline="false" @click="cleared">
+          <i class="v3-icon-delete"></i>
+          {{ '清空条件' | $lc }}</span
+        >
+      </el-form-item>
+    </el-form>
+    <cl-dialog
+      v-drag
+      :visible.sync="stVisible"
+      :title="$lc('另存为视图')"
+      width="400px"
+      :destroy-on-close="true"
+      :close-on-click-modal="false"
+    >
+      <el-form ref="stform" :model="form" label-width="80px" :inline="false" size="normal" label-position="top">
+        <el-form-item
+          :label="$lc('视图名称')"
+          prop="viewName"
+          :rules="[{ required: true, message: '请输入', trigger: 'blur' }]"
+        >
+          <el-input v-model="form.viewName" maxlength="30" show-word-limit />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="flex-box flex-c flex-v page-button-shadow">
+        <el-button type="primary" @click="saveSt">{{ $lc('确认') }}</el-button>
+        <el-button plain @click="stVisible = false">{{ $lc('取消') }}</el-button>
+      </div>
+    </cl-dialog>
+  </div>
+</template>
+
+<script>
+import XEUtils from 'xe-utils'
+
+import filterItem from './filterItem.vue'
+import formItemRender from './formItemRender.vue'
+
+import axios from 'n20-common-lib/src/utils/axios.js'
+import ClDialog from 'n20-common-lib/src/components/Dialog/index.vue'
+import InputSearch from 'n20-common-lib/src/components/InputSearch/index.vue'
+
+const getOnlyKeys = (key, data) => (key ? data[key] : Date.now().toString(36) + Math.random().toString(36).slice(2, 7))
+
+const prefixCls = 'n20-advanced-filter'
+export default {
+  name: 'AdvancedFilter',
+  components: {
+    ClDialog,
+    // formItemInput,
+    formItemRender,
+    InputSearch,
+    // FormItem,
+    filterItem
+  },
+  provide() {
+    return {
+      prefixCls,
+      nFilter: this
+    }
+  },
+  props: {
+    maxLength: {
+      type: Number
+    },
+    removeLoad: {
+      type: Boolean,
+      default: true
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    filterList: {
+      type: Array,
+      default: () => []
+    },
+    onlyKey: {
+      type: String,
+      default: ''
+    },
+    model: {
+      type: Object,
+      default: () => ({})
+    },
+    filterId: {
+      type: String,
+      default: ''
+    },
+    // 选中的Id数据
+    checkIds: {
+      type: Array,
+      default: () => []
+    },
+    bussId: {
+      type: String,
+      default: ''
+    },
+    // 视图模式下只读，隐藏“添加条件”按钮和字段移除图标
+    filterReadonly: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      keyword: '',
+      prefixCls,
+      remoteList: [],
+      GroupData: [],
+      checkList: [],
+      defineCheckList: [],
+      cancelCheck: [],
+      userNo: sessionStorage.getItem('userNo'),
+      form: {
+        userNo: sessionStorage.getItem('userNo'),
+        pageNo: this.filterId,
+        name: ''
+      },
+      stVisible: false,
+      optionsMap: {}
+    }
+  },
+  computed: {
+    filterListS: {
+      get() {
+        if (!this.keyword) {
+          return this.filterList
+        } else {
+          const keywordLowerCase = this.keyword
+          return this.filterList.filter((item) => item.label.includes(keywordLowerCase))
+        }
+      },
+      set(v) {
+        return v
+      }
+    },
+    // 判断所有非固定（非static、非isNotClose）项目是否都已选中
+    isAllNonFixedChecked() {
+      const nonFixedItems = this.filterListS.filter((res) => !res.static && !res.isNotClose)
+      if (nonFixedItems.length === 0) return false
+
+      const nonFixedItemIds = nonFixedItems.map((item) => item[this.onlyKey])
+      return nonFixedItemIds.every((id) => this.checkList.includes(id))
+    },
+    // 通过深度遍历 model 所有属性触发 getter，建立完整响应式依赖
+    // 同时收集对象级 __ob__.dep，确保 $set 新增属性时也能触发重算
+    _modelValues() {
+      const model = this.model
+      // 遍历所有自有属性触发 getter（收集属性级 dep）
+      // Object.keys 在 Vue 2 内部会触发对象级 dep 收集
+      const keys = Object.keys(model)
+      const values = []
+      for (let i = 0; i < keys.length; i++) {
+        values.push(model[keys[i]])
+      }
+      return values
+    },
+    activeClassMap() {
+      // 访问 _modelValues 建立深度依赖，确保 model 任何值变化都能触发重算
+      void this._modelValues
+
+      const model = this.model
+      const hasValue = (val) => {
+        if (Array.isArray(val)) return val.length > 0
+        return val !== null && val !== undefined && val !== ''
+      }
+      const hasRange = (start, end) => hasValue(model[start]) && hasValue(model[end])
+      const rangeTypes = ['daterange', 'datetimerange', 'monthrange']
+
+      const map = {}
+      this.GroupData.forEach((item) => {
+        const key = item.value || item[this.onlyKey]
+        let isActive = false
+        if (item.type === 'numberrange') {
+          isActive = hasRange(item.startValue, item.endValue)
+        } else if (rangeTypes.includes(item.type)) {
+          isActive = hasRange(item.startDate, item.endDate)
+        } else if (item.slotFields && item.slotFields.length > 0) {
+          isActive = item.slotFields.some((field) => hasValue(model[field]))
+        } else {
+          isActive = hasValue(model[item.value])
+        }
+        map[key] = isActive ? this.prefixCls + '-active' : ''
+      })
+      return map
+    }
+  },
+  watch: {
+    // visible: {
+    //   handler(val) {
+    //     val && this.getFilterList()
+    //   }
+    // },
+    // 当 filterList 中某几项的 options 异步更新后，同步到 GroupData 保证渲染更新
+    filterList: {
+      handler(newList) {
+        if (!this.GroupData || this.GroupData.length === 0) return
+        this.GroupData.forEach((groupItem) => {
+          const filterItem = newList.find((f) => f[this.onlyKey] === groupItem[this.onlyKey])
+          // 仅在 options 引用确实发生变化时才同步，避免：
+          // 1. mackData 排序 filterList 后重复更新 GroupData（两者引用相同）
+          // 2. 用 filterList 中的空数组覆盖 reqOptions 已获取的正确数据
+          if (filterItem && filterItem.options !== undefined && filterItem.options !== groupItem.options) {
+            this.$set(groupItem, 'options', filterItem.options)
+          }
+        })
+      },
+      deep: true
+    }
+  },
+  created() {
+    this.getFilterList()
+    this.getDefaultCheck()
+  },
+  beforeDestroy() {
+    this.optionsMap = {}
+  },
+  methods: {
+    // 保存视图
+    saveSt() {
+      this.$refs.stform.validate(async (valid) => {
+        if (valid) {
+          // 如果没有 bussId，不保存视图
+          if (!this.bussId) {
+            this.$message.warning('缺少业务ID，无法保存视图')
+            return
+          }
+
+          // 保存筛选视图
+          const obj = {
+            viewName: this.form.viewName,
+            viewType: '0',
+            bussId: this.bussId,
+            viewConfig: JSON.stringify(this.model),
+            keyIds: JSON.stringify(this.checkList)
+          }
+          const { code } = await axios.post(`/bems/query/viewColumn/saveOrUpdateViewInfo`, obj)
+          if (code === 200) {
+            this.stVisible = false
+            this.$message.success('保存成功')
+            this.$emit('refresh')
+          }
+        }
+      })
+    },
+    // 另存为视图
+    addView() {
+      this.stVisible = true
+      this.form.type = 1
+      this.form.keyIds = this.checkList
+    },
+    getDefaultCheck() {
+      let _checkList = this.filterList
+        .filter((item) => {
+          if (item.isDefault) {
+            return item
+          }
+        })
+        .map((item) => item[this.onlyKey])
+      this.defineCheckList = XEUtils.clone(_checkList, true)
+    },
+    getOnlyKey(data) {
+      return getOnlyKeys(this.onlyKey, data)
+    },
+    setOptions(id, opts) {
+      this.optionsMap[id] = opts
+      this.setChoices(id, opts)
+    },
+    setChoices(id, data) {
+      let item = this.GroupData.find((f) => f[this.onlyKey] === id)
+      if (item) {
+        item.options = data || []
+      } else {
+        item = this.GroupData.find((f) => f.value === id)
+        if (item) {
+          item.options = data || []
+        }
+      }
+    },
+    filter() {
+      return this.model
+    },
+
+    handleClose(item) {
+      const key = item[this.onlyKey] || item.value
+      if (this.optionsMap[key]) {
+        delete this.optionsMap[key]
+      }
+
+      switch (item.type) {
+        case 'select':
+          this.$set(this.model, item.value, item.multiple ? [] : null)
+          break
+        case 'text':
+        case 'search':
+        case 'number':
+        case 'date':
+        case 'datetime':
+        case 'year':
+        case 'month':
+        case 'radio':
+        case 'week':
+          this.$set(this.model, item.value, null)
+
+          break
+        case 'checkbox':
+          this.$set(this.model, item.value, [])
+          break
+        case 'numberrange':
+          this.$set(this.model, item.startValue, null)
+          this.$set(this.model, item.endValue, null)
+
+          break
+        case 'daterange':
+        case 'datetimerange':
+        case 'monthrange':
+          this.$set(this.model, item.startDate, null)
+          this.$set(this.model, item.endDate, null)
+          break
+        case 'slot': {
+          this.$set(this.model, item.value, null)
+          // 清空 slotFields 中定义的所有字段
+          if (item.slotFields?.length) {
+            item.slotFields.forEach((field) => {
+              this.$set(this.model, field, null)
+            })
+          }
+          break
+        }
+      }
+      let data = this.GroupData.filter((s) => {
+        return s.id !== item.id
+      })
+      this.saveFilter(data).then(({ code }) => {
+        if (code === 200) {
+          this.getFilterList()
+        }
+      })
+      this.$emit('clean', this.model)
+    },
+    cleared() {
+      this.$emit('clear')
+    },
+    setModelData(list) {
+      // 收集当前选中列表中的所有字段
+      const selectedFields = new Set()
+      list.forEach((res) => {
+        if (res.value) selectedFields.add(res.value)
+        if (res.startDate) selectedFields.add(res.startDate)
+        if (res.endDate) selectedFields.add(res.endDate)
+        if (res.startValue) selectedFields.add(res.startValue)
+        if (res.endValue) selectedFields.add(res.endValue)
+        if (res.type === 'slot' && Array.isArray(res?.slotFields)) {
+          res?.slotFields.forEach((field) => {
+            if (field) selectedFields.add(field)
+          })
+        }
+      })
+
+      // 收集 filterList 中定义的所有字段
+      const allDefinedFields = new Set()
+      this.filterList.forEach((item) => {
+        if (item.value) allDefinedFields.add(item.value)
+        if (item.startDate) allDefinedFields.add(item.startDate)
+        if (item.endDate) allDefinedFields.add(item.endDate)
+        if (item.startValue) allDefinedFields.add(item.startValue)
+        if (item.endValue) allDefinedFields.add(item.endValue)
+        if (item.type === 'slot' && Array.isArray(item?.slotFields)) {
+          item?.slotFields.forEach((field) => {
+            if (field) allDefinedFields.add(field)
+          })
+        }
+      })
+
+      // 只清除：在 filterList 中定义但不在选中列表中的字段
+      for (const key in this.model) {
+        if (Object.hasOwnProperty.call(this.model, key)) {
+          // 仅当该字段在 filterList 中定义且未被选中时才清除
+          if (allDefinedFields.has(key) && !selectedFields.has(key)) {
+            this.$delete(this.model, key)
+          }
+        }
+      }
+    },
+    allCheck() {
+      // 获取非固定（非static、非isNotClose）的项目
+      const nonFixedItems = this.filterListS.filter((res) => !res.static && !res.isNotClose)
+      const nonFixedItemIds = nonFixedItems.map((item) => item[this.onlyKey])
+
+      // 检查所有非固定项目是否都已选中
+      const allNonFixedChecked =
+        nonFixedItemIds.length > 0 && nonFixedItemIds.every((id) => this.checkList.includes(id))
+
+      // 获取固定项目的ID
+      const fixedItemIds = this.filterListS
+        .filter((res) => res.static || res.isNotClose)
+        .map((item) => item[this.onlyKey])
+
+      if (allNonFixedChecked) {
+        // 取消全选：只保留固定项目
+        this.checkList = [...fixedItemIds]
+      } else {
+        // 全选：选中所有项目
+        if (this.maxLength) {
+          this.checkList = this.filterListS.slice(0, this.maxLength)?.map((res) => res[this.onlyKey])
+        } else {
+          this.checkList = this.filterListS?.map((res) => res[this.onlyKey])
+        }
+      }
+    },
+    defaultCheck() {
+      this.checkList = this.defineCheckList
+    },
+    cancel() {
+      this.checkList = this.cancelCheck
+      this.$refs.advanced_popover.showPopper = false
+    },
+    savaCheck() {
+      let saveCheckArr = []
+      // 如果keys数组不为空
+      if (this.checkList.length > 0) {
+        this.filterList.forEach((item) => {
+          if (this.checkList.includes(item[this.onlyKey])) {
+            saveCheckArr.push(item)
+          }
+        })
+      }
+      this.setModelData(saveCheckArr)
+      this.saveFilter(saveCheckArr).then(({ code }) => {
+        // 如果保存成功
+        if (code === 200) {
+          // 重新获取过滤条件列表
+          this.getFilterList()
+        }
+      })
+      this.$refs.advanced_popover.showPopper = false
+      this.$emit('check', saveCheckArr)
+    },
+    check(keys) {
+      this.checkList = keys
+    },
+    /**
+     * 保存筛选条件
+     * @param data
+     */
+    saveFilter(data) {
+      return new Promise((resolve) => {
+        if (!this.filterId) {
+          this.mackData(data)
+          this.$refs.advanced_popover.showPopper = false
+          this.$emit('saveCheckData', data)
+          resolve({ code: 500 }) // 返回一个成功状态的 Promise
+          return
+        }
+
+        axios
+          .post(
+            `/bems/prod_1.0/user/pageHabit?t=${Date.now()}`,
+            {
+              userNo: this.userNo,
+              pageId: this.filterId,
+              showStructure: JSON.stringify(data)
+            },
+            { loading: false }
+          )
+          .then((res) => {
+            resolve(res)
+          })
+      })
+    },
+    /**
+     * 获取筛选条件
+     */
+    getFilterList() {
+      if (!this.filterId) {
+        if (this.checkIds.length === 0) {
+          this.GroupData = []
+        } else {
+          // 按照 checkIds 的顺序过滤和排序
+          const sortedList = this.filterList
+            .filter((item) => this.checkIds.includes(item[this.onlyKey]))
+            .sort((a, b) => {
+              const indexA = this.checkIds.indexOf(a[this.onlyKey])
+              const indexB = this.checkIds.indexOf(b[this.onlyKey])
+              return indexA - indexB
+            })
+          this.mackData(sortedList)
+        }
+
+        return false
+      }
+      axios
+        .post(
+          `/bems/prod_1.0/user/pageHabit/list?t=${Date.now()}`,
+          {
+            userNo: this.userNo,
+            pageId: this.filterId
+          },
+          { loading: false, noMsg: true }
+        )
+        .then(({ data }) => {
+          let _data = JSON.parse(data)
+          this.mackData(_data)
+        })
+        .finally(() => {
+          for (const key in this.optionsMap) {
+            if (Object.hasOwnProperty.call(this.optionsMap, key)) {
+              const data = this.optionsMap[key]
+              this.setChoices(key, data)
+            }
+          }
+        })
+    },
+    // 处理数据
+    mackData(data) {
+      let _data = data
+      if (_data && _data.length > 0) {
+        // 先过滤出在 filterList 中存在的项目，避免使用已删除的筛选条件
+        _data = _data.filter((item) => {
+          return this.filterList.some((filterItem) => filterItem[this.onlyKey] === item[this.onlyKey])
+        })
+
+        // 如果过滤后没有有效数据，使用默认逻辑
+        if (_data.length === 0) {
+          if (this.removeLoad) {
+            this.GroupData = this.filterList.filter((item) => {
+              if (item.isDefault) {
+                return item
+              }
+            })
+          } else {
+            this.GroupData = []
+          }
+        } else {
+          // 更新有效数据的 label 和 options
+          this.GroupData = _data.map((item) => {
+            const originItem = this.filterList.find((filter) => filter[this.onlyKey] === item[this.onlyKey])
+            if (originItem) {
+              item.label = originItem.label
+              if (originItem.options) {
+                item.options = originItem.options
+              }
+            }
+            return item
+          })
+        }
+      } else {
+        if (this.removeLoad) {
+          this.GroupData = this.filterList.filter((item) => {
+            if (item.isDefault) {
+              return item
+            }
+          })
+        } else {
+          this.GroupData = []
+        }
+      }
+
+      // ✨ 确保 static: true 的项目自动添加并勾选
+      const staticItemsInFilterList = this.filterList.filter((item) => item.static)
+      const existingIds = this.GroupData.map((item) => item[this.onlyKey])
+
+      // 找出不在 GroupData 中的 static 项目
+      const missingStaticItems = staticItemsInFilterList.filter((item) => !existingIds.includes(item[this.onlyKey]))
+
+      // 将缺失的 static 项目添加到 GroupData 开头
+      if (missingStaticItems.length > 0) {
+        const staticItemsToAdd = missingStaticItems.map((item) => ({ ...item }))
+        this.GroupData = [...staticItemsToAdd, ...this.GroupData]
+      }
+
+      // ✨ 强制将所有 static: true 的项目移到最前面
+      if (this.GroupData && this.GroupData.length > 0) {
+        const staticItems = this.GroupData.filter((item) => item.static)
+        const otherItems = this.GroupData.filter((item) => !item.static)
+        this.GroupData = [...staticItems, ...otherItems]
+      }
+
+      this.checkList = this.GroupData.map((res) => res.id)
+      console.log(this.checkList)
+      this.cancelCheck = XEUtils.clone(this.checkList, true)
+      // 查找排序，在this.filterList中查找this.checkList中的每一项，并将其排在前面
+      this.filterList = this.filterList.sort((a, b) => {
+        const indexA = this.checkList.indexOf(a[this.onlyKey])
+        const indexB = this.checkList.indexOf(b[this.onlyKey])
+
+        // 如果两个都在 checkList 中，按照 checkList 的顺序
+        if (indexA !== -1 && indexB !== -1) {
+          return indexA - indexB
+        }
+        // 如果只有 a 在 checkList 中，a 排在前面
+        if (indexA !== -1) {
+          return -1
+        }
+        // 如果只有 b 在 checkList 中，b 排在前面
+        if (indexB !== -1) {
+          return 1
+        }
+        // 如果都不在 checkList 中，保持原有顺序
+        return 0
+      })
+
+      console.log(this.filterList)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+$--border-color-base: #dcdfe6;
+$--color-primary: #409eff;
+
+.n20-advanced-filter {
+  box-sizing: border-box;
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1;
+  padding: 8px 0;
+
+  &-item.n20-advanced-filter-active {
+    border-color: #b3d0ff;
+    background: #e9f2ff !important;
+  }
+
+  &-body {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 6px 0px;
+
+    .el-form-item,
+    .el-form-item--small.el-form-item {
+      margin-bottom: 8px;
+    }
+
+    .el-form-item__content {
+      display: inline-block;
+      vertical-align: middle;
+    }
+  }
+
+  &-item {
+    box-sizing: border-box;
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 426px !important;
+    min-width: 120px;
+    margin-right: 8px;
+    border: 1px solid $--border-color-base;
+    padding: 0 0 0 8px;
+    border-radius: 4px;
+    white-space: nowrap;
+    cursor: pointer;
+
+    .el-form-item__label {
+      padding: 0;
+      max-width: 168px;
+      display: inline-block;
+      vertical-align: middle;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      margin-right: 4px;
+    }
+
+    .el-range-editor.el-input__inner {
+      min-width: 168px;
+      max-width: 224px;
+
+      .el-range-input {
+        background-color: transparent;
+      }
+    }
+
+    .n20-date-editor.el-date-editor--datetimerange.el-range-editor--small.has-value {
+      min-width: 168px;
+      max-width: 380px;
+    }
+
+    .n20-date-editor .el-input__prefix {
+      display: none;
+    }
+
+    .el-input,
+    .el-input__inner {
+      padding-left: 0;
+      border: none;
+      width: 100%;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      background-color: transparent;
+    }
+
+    .el-select__input.is-small {
+      margin-left: 0;
+    }
+
+    .el-input__inner:active,
+    .el-input__inner:focus {
+      box-shadow: none;
+      border: none;
+      border-color: #fff;
+    }
+
+    .el-checkbox-group {
+      height: 32px;
+      line-height: 32px;
+      vertical-align: middle;
+      padding: 0 10px;
+    }
+
+    .el-radio-group {
+      padding: 0 10px;
+    }
+
+    .el-date-editor .el-range-separator {
+      padding: 0;
+    }
+
+    .n20-num-w {
+      .el-input,
+      .el-input__inner {
+        padding-left: 0;
+      }
+
+      .el-input--suffix .el-input__inner {
+        padding-right: 25px;
+      }
+    }
+
+    .n20-numberRange {
+      padding-right: 8px;
+    }
+
+    .filter_remove {
+      display: none;
+      position: absolute;
+      height: 13px;
+      width: 13px;
+      background: #f1f1f1;
+      right: -5px;
+      top: -7px;
+      font-size: 14px;
+      z-index: 1;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+
+  &-item:hover {
+    .filter_remove {
+      display: block;
+    }
+  }
+
+  &-item.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
+    font-size: 16px;
+  }
+
+  &-item.el-form-item[disabled] {
+    background-color: #f5f5f5 !important;
+    border-color: #e4e7ed !important;
+    color: #333333 !important;
+    cursor: not-allowed;
+  }
+
+  &-item.el-form-item.is-error {
+    border-color: #f56c6c !important;
+
+    input::placeholder {
+      color: #f56c6c !important;
+    }
+  }
+
+  &-content {
+    display: inline-block;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    line-height: 1;
+
+    .el-select.el-select--small {
+      .el-select__tags {
+        max-width: 88px !important;
+        display: flex;
+        flex-wrap: nowrap;
+      }
+    }
+
+    .n20-date-editor.el-date-editor--datetimerange.el-range-editor--small.has-value {
+      min-width: 168px;
+      max-width: 380px;
+    }
+
+    .el-range-editor.el-input__inner {
+      padding: 3px 30px 3px 0px;
+    }
+
+    .el-select .el-tag.el-tag--info {
+      background: #e1f0ff;
+    }
+  }
+
+  :hover {
+    border-color: $--color-primary;
+    cursor: pointer;
+  }
+
+  &-add {
+    display: inline-block;
+    vertical-align: middle;
+  }
+}
+
+.popover-check-box .el-checkbox.is-checked .el-checkbox__label {
+  color: inherit !important;
+}
+</style>