epx-frame 3.5.0-shpgy.1

package/src/frame/packages/scope/ScopeItem.vue

@@ -0,0 +1,987 @@
+<template>
+ <li class="scope__item">
+    <!-- <div class="scope-item-main"> -->
+      <div class="scope-item-top">
+        <div class="scope-item-top-left">
+          <!-- 左括号 -->
+          <el-select size="medium" class="scope__brace" :placeholder="$t('brackets')" v-model="scope.lb" v-show="showBrace">
+            <el-option v-for="brace in leftBraces" :key="brace" :label="brace" :value="brace"></el-option>
+          </el-select>
+          <!-- 标签名 -->
+          <label class="scope__label">{{label}}：</label>
+          <!-- 子集运算 -->
+          <!-- scope.dataType==='num' -->
+          <template v-if="scope.relationSort==='1'">
+            <el-dropdown class="scope__operator" trigger="click" >
+              <span class="operator__select" >
+                {{fieldFubctionLabel(scope.field_function)}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item v-for="item in getLinkItem(scope.dataType)" :key="item.value" @click.native="updateScopeItem('field_function', item)">{{item.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+          <!-- 运算符 mode-->
+          <el-dropdown class="scope__operator" trigger="click" v-if="showOperator">
+            <span class="operator__select operator__select__noboder" >
+              {{operatoreLabel(scope.mode)}}<i class="el-icon-arrow-down el-icon--right"></i>
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="item in operatoreOptions" :key="item.value" @click.native="updateScopeItem('mode', item)">{{item.name}}</el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+          <!-- 字段 FIELD_OPTION_TYPE 指定值，动态值，用户信息，自定义-->
+          <template v-if="scope.mode!=='is_null'&& scope.mode!=='not_null'&&modeType">
+            <el-dropdown class="scope__operator" trigger="click" >
+              <span class="operator__select operator__select__noboder" >
+                {{valueTypeC}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <template v-for="item in valueOption">
+                  <el-dropdown-item v-if="item" :key="item.id" @click.native="updateScopeItemVT(item)">{{item.name}}</el-dropdown-item>
+                </template>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </template>
+        </div>
+        <div class="scope-item-top-right">
+          <!-- 逻辑运算符 link-->
+          <div class="scope__operator scope__operator--logical">
+            <el-dropdown trigger="click" >
+              <span class="operator__select">
+                {{operatoreLogicalLabel(scope.link)}}<i class="el-icon-arrow-down el-icon--right"></i>
+              </span>
+              <el-dropdown-menu slot="dropdown" >
+                <el-dropdown-item v-for="item in operatoreOptionLogicals" :key="item.value" @click.native="updateScopeItem('link', item)">{{item.name}}</el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
+          <!-- 竖线 -->
+          <div class="line-center" v-show="showBrace"></div>
+          <!-- 右括号 -->
+          <el-select size="medium" class="scope__brace" :placeholder="$t('brackets')" v-model="scope.rb" v-show="showBrace">
+            <el-option v-for="brace in rightBraces" :key="brace" :label="brace" :value="brace"></el-option>
+          </el-select>
+          <!-- 删除按钮 -->
+          <div class="filter-condition__delete">
+            <i class="el-icon-close" @click="deleteScopeItem"></i>
+          </div>
+        </div>
+      </div>
+      <div class="scope-item-bottom" v-if="scope.mode!=='is_null'&& scope.mode!=='not_null'">
+        <!-- 选择器 -->
+        <div class="scope__select">
+          <div v-if="scope.field_function && scope.field_function==='COUNT'">
+            <el-input class="select__input" v-model="scope.values" size="medium" placeholder=""></el-input>
+          </div>
+          <div class="select__inner" v-else-if="valueType==='FIXED_VALUE'">
+            <!-- <template v-if="scope.mode!=='is_null'&& scope.mode!=='not_null'"> -->
+              <el-input v-if="scope.inputMode==='express'" class="select__input" v-model="scope.values" size="medium" placeholder=""></el-input>
+                <!-- 下拉框/单选/多选 -->
+              <div :class="['select-checkbox', unfold ?'select-checkbox--all' : '']" v-else-if="scope.dataType==='list' || scope.dataType==='radio' || scope.dataType==='multibox'">
+                <el-checkbox-group class="select-checkbox__group" ref="checkbox" :value="values">
+                  <el-checkbox-button v-for="option in codeList" :key="option.id" :label="option.code" @change="clickCheckBtn(option.code)">{{option.name}}</el-checkbox-button>
+                </el-checkbox-group>
+                <span class="select-checkbox__switch" v-if="scope.showFoldBtn" @click="unfold=!unfold">{{ unfold?$t('pack up'):$t('on all')}}<i class="el-icon-arrow-down"></i></span>
+              </div>
+               <!-- 标签字段/多选 -->
+              <div :class="['select-checkbox', unfold ?'select-checkbox--all' : '']" v-else-if="scope.dataType==='tag'">
+                <el-checkbox-group class="select-checkbox__group" ref="checkbox" v-model="values">
+                  <el-checkbox-button v-for="tag in tagList" :key="tag" :label="tag">{{tag}}</el-checkbox-button>
+                </el-checkbox-group>
+                <span class="select-checkbox__switch" v-if="scope.showFoldBtn" @click="unfold=!unfold">{{ unfold?$t('pack up'):$t('on all')}}<i class="el-icon-arrow-down"></i></span>
+              </div>
+              <!-- 数字/货币 -->
+              <template v-else-if="scope.dataType==='num'">
+                <div class="select-number__scope" v-if="scope.mode==='in_scope' || scope.mode==='no_in_scope'">
+                  <el-input-number size="medium" v-model="scope.min" controls-position="right"></el-input-number>
+                  <span class="select-number__connect">-</span>
+                  <el-input-number size="medium" v-model="scope.max" controls-position="right" :min="scope.min" ></el-input-number>
+                </div>
+                <el-input-number size="medium" v-else v-model="scope.values" controls-position="right"></el-input-number>
+              </template>
+              <!-- 对象 -->
+              <!-- 切换到表达式模式 -->
+              <epx-object :value="values" @change="changeObject" v-else-if="scope.dataType==='object' || scope.dataType==='user' || scope.dataType==='dept' || scope.dataType==='treeList'" :fieldConfigs="{ ...scope, attriLabel: '',isMultiple:'1', state: 'SEARCH'}"></epx-object>
+              <!-- 日期 -->
+              <div v-else-if="scope.dataType==='date' || scope.dataType==='time'">
+                <el-select size="medium" v-model="scope.dateType" :placeholder="this.$t('please select')"
+                  v-if="scope.mode!=='in_scope'&&scope.mode!=='no_in_scope'"
+                  @change="dateTypeChange"
+                >
+                  <el-option
+                    v-for="item in dateTypeList"
+                    :key="item.value"
+                    :label="item.name"
+                    :value="item.value">
+                  </el-option>
+                </el-select>
+                <el-input
+                  v-if="scope.dateType==='aftertime' || scope.dateType==='past'"
+                  v-model="scope.values"
+                  size="medium"
+                  :style="{marginLeft: '10px'}"
+                >
+
+                </el-input>
+                <el-date-picker
+                  v-if="scope.dateType==='set_date'&&scope.mode!=='in_scope'&&scope.mode!=='no_in_scope'"
+                  v-model="scope.values"
+                  type="date"
+                  :placeholder="$t('option date')"
+                  :format="$t('yyyy Year MM month DD day')"
+                  value-format="yyyy-MM-dd">
+                </el-date-picker>
+                <el-date-picker
+                  v-if="scope.mode==='in_scope' || scope.mode==='no_in_scope'"
+                  v-model="scope.range"
+                  type="daterange"
+                  unlink-panels
+                  :range-separator="$t(to)"
+                  :start-placeholder="$t('start date')"
+                  :end-placeholder="$t('ending date')"
+                  :format="$t('yyyy Year MM month DD day')"
+                  value-format="yyyy-MM-dd">
+                </el-date-picker>
+              </div>
+
+              <!-- 照片/附件/编辑器 -->
+              <!-- 文本/文本区 -->
+              <el-input v-else class="filter-condition__input" v-model="scope.values" size="medium" placeholder=""></el-input>
+            <!-- </template> -->
+            <!-- <i v-if="['date', 'time', 'object', 'num', 'list', 'radio'].includes(scope.dataType)" class="el-icon-refresh select__transform" :title="scope.inputMode==='express'?'切换到普通模式': '切换到表达式模式'" @click="swicthMode()"></i> -->
+          </div>
+          <div v-else-if="valueType==='FIELD_VALUE'">
+            <el-popover
+              ref="popover"
+              trigger="click"
+              :preventOverflowOrder="['left', 'right', 'top', 'bottom']"
+              :tabindex="1"
+          >
+            <el-input class="select__input" slot="reference" suffix-icon="el-icon-search" :value="scope['values#'] || fieldLabelMap[scope.values]" size="medium" :placeholder="$t('Please select field values')"></el-input>
+              <div class="scope-opera__popper">
+                <el-tree
+                  :data="fieldValueTree"
+                  node-key="code"
+                  :props="{
+                    children: 'children',
+                    label: 'text'
+                  }"
+                  @node-click="selectFieldValue"
+                >
+                  <!-- <span v-html="node.label" slot-scope="{ node }"></span> -->
+                  <span v-html="data.text" slot-scope="{ data }"></span>
+                </el-tree>
+              </div>
+            </el-popover>
+          </div>
+          <div v-else-if="valueType==='DEFINED'">
+            <el-input class="select__input" v-model="scope.values" size="medium" placeholder=""></el-input>
+          </div>
+          <div v-else-if="valueType==='LIUCHENG_PARAMS'">
+            <el-popover
+              ref="popoverlc"
+              trigger="click"
+              :preventOverflowOrder="['left', 'right', 'top', 'bottom']"
+              :tabindex="1"
+          >
+            <el-input class="select__input" slot="reference" suffix-icon="el-icon-search" :value="scope['values#'] || LcParamsLabel" size="medium" :placeholder="$t('Please select field values')"></el-input>
+              <div class="scope-opera__popper">
+                <el-tree
+                  :data="liuchengParams"
+                  node-key="id"
+                  :props="{
+                    children: 'children',
+                    label: 'name'
+                  }"
+                  @node-click="selectLcValue"
+                >
+                  <!-- <span slot-scope="{ node }">{{node.label}}</span> -->
+                  <span slot-scope="{ data}">{{data.name}}</span>
+                </el-tree>
+              </div>
+            </el-popover>
+          </div>
+          <div v-else>
+            <!-- 高级模式下用户信息或动态值 -->
+            <el-select v-model="valueChildV" :placeholder="this.$t('please select')" @change="valueTypeChange">
+              <el-option
+                v-for="item in getValueTypeC"
+                :key="item.code"
+                :label="item.name"
+                :value="item.code+'-'+item.name">
+              </el-option>
+            </el-select>
+          </div>
+        </div>
+      </div>
+   <!-- </div> -->
+   <!-- <div :class="{'scope-item-content':true,'scope-item-content-quick':modelValue==='quick'}">
+   <div :class="{'scope-item-bottom':true,'scope-item-bottom-two':scope.dataType==='list' || scope.dataType==='radio'}">
+    </div>
+   </div> -->
+  <!-- 删除按钮 -->
+  <!-- <div class="filter-condition__delete">
+    <i class="el-icon-close" @click="deleteScopeItem"></i>
+  </div> -->
+</li>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { ADD_LIST } from '@/store/actions'
+export default {
+  name: 'epx-scope-item',
+  props: {
+    metaId: String,
+    scope: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    modeType: {
+      type: [Boolean, Array],
+      default: false
+    },
+    scopeConfig: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    allFields: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    fieldValueTree: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    liuchengParams: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    linkOption: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    valueOption: {
+      type: Array,
+      default () {
+        return []
+      }
+    },
+    showTransformBtn: {
+      type: Boolean,
+      default: false
+    },
+    showBrace: {
+      type: Boolean,
+      default: false
+    },
+    showOperator: {
+      type: Boolean,
+      default: true
+    },
+    last: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      unfold: false,
+      popoverObejct: false,
+      valueType: '',
+      valueTypeC: '',
+      valueChildV: '',
+      tagList: []
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getCodeById',
+      'getTreeById',
+      'getTreeCountById'
+    ]),
+    label () {
+      const { label } = this.scope
+      return label
+    },
+    values: {
+      get (v) {
+        const { dataType } = this.scope
+        if (dataType === 'list' || dataType === 'radio' || dataType === 'multibox' || dataType === 'object' || dataType === 'treeList' || dataType === 'tag') {
+          if (this.scope.values) {
+            const values = this.scope.values.split(',')
+            if (dataType === 'object' || dataType === 'treeList') {
+              const labels = (this.scope['values#'] || '').split(',')
+              return values.map((item, index) => ({ id: item, name: labels[index] }))
+            } else {
+              return values
+            }
+          }
+          return []
+        }
+        return this.scope.values
+      },
+      set (v) {
+        const { mode, dataType, valueType = 'FIXED_VALUE' } = this.scope
+        // 选项类型判断
+        if (valueType === 'FIXED_VALUE' && (dataType === 'list' || dataType === 'radio' || dataType === 'multibox' || dataType === 'treeList')) {
+          if (mode === 'equal' || mode === 'not_equal') {
+            if (v && v.length >= 2) {
+              return this.$message.error('等于或不等于只能选择一个选项')
+            }
+          }
+        }
+        this.scope.values = v.join(',')
+        if (dataType === 'list' || dataType === 'radio' || dataType === 'multibox' || dataType === 'tag') {
+          const name = this.checkChange(v)
+          this.updateScopeItem('values', { value: v.join(','), name })
+        }
+      }
+    },
+    fieldFubctionLabel () {
+      return (id) => {
+        const item = this.linkOption.find(item => item.value === id) || {}
+        return item.name || ''
+      }
+    },
+    getLinkItem () {
+      return (type) => {
+        let option = []
+        if (type === 'num') {
+          option = this.linkOption.filter(item => {
+            return item.value !== 'GROUP_CONCAT'
+          })
+        } else if (type === 'date' || type === 'time') {
+          option = this.linkOption.filter(item => {
+            return item.value === 'MIN' || item.value === 'MAX'
+          })
+        } else {
+          option = this.linkOption.filter(item => {
+            return item.value === 'GROUP_CONCAT' || item.value === 'COUNT'
+          })
+        }
+        return option
+      }
+    },
+    operatoreLabel () {
+      return (id) => {
+        let ids = id
+        const { dataType } = this.scope
+        let searchItem = this.scopeConfig[dataType] || {}
+        if (dataType === 'treeList') {
+          if (!ids) {
+            ids = 'equal'
+            this.$emit('update', { key: 'mode', name: this.$t('yes'), value: 'equal' })
+          }
+          searchItem = this.scopeConfig.object || {}
+        }
+        const options = searchItem.options || []
+        const item = options.find(item => item.value === ids) || {}
+        return item.name || ''
+      }
+    },
+    operatoreLogicalLabel () {
+      return (id) => {
+        const { dataType } = this.scope
+        const searchItem = this.scopeConfig[dataType] || {}
+        const options = searchItem.stOptions || []
+        const item = options.find(item => item.value === id) || {}
+        if (!this.scope['link#']) {
+          this.$set(this.scope, 'link#', item.name)
+        }
+        return item.name || ''
+      }
+    },
+    operatoreOptions () {
+      const { dataType } = this.scope
+      let item = this.scopeConfig[dataType] || {}
+      if (dataType === 'treeList') {
+        item = this.scopeConfig.object || {}
+      }
+      return item.options || []
+    },
+    getValueTypeC () {
+      let option = []
+      option = this.valueOption.find(item => item.code === this.valueType)
+      return (option && option.children) || []
+    },
+    operatoreOptionLogicals () {
+      const { dataType } = this.scope
+      const item = this.scopeConfig[dataType] || {}
+      return item.stOptions || []
+    },
+    dateTypeList () {
+      const item = this.scopeConfig.date || {}
+      const { options = [] } = item
+      const optionItem = options.find(item => item.value === this.scope.mode) || {}
+      return optionItem.valueType || []
+    },
+    codeList () {
+      const { codeKey } = this.scope
+      const code = this.getCodeById(codeKey)
+      if (!code && codeKey) {
+        this.$store.dispatch({
+          type: ADD_LIST,
+          key: codeKey,
+          dataType: 'list'
+        })
+      }
+      this.$nextTick(() => {
+        this.checkboxHeightListener()
+        // this.filterCheckboxHeightListener()
+      })
+      return code
+    },
+    fieldLabelMap () {
+      const obj = {}
+      const setFieldLabel = (fields, parent = {}) => {
+        fields.map(item => {
+          obj[`#[${item.field}]`] = parent.text ? parent.text + '.' + item.text : item.text
+          if (item.children) setFieldLabel(item.children, item)
+        })
+      }
+      setFieldLabel(this.fieldValueTree)
+      return obj
+    },
+    LcParamsLabel () {
+      const value = this.scope.values
+      if (value && value.includes(':')) {
+        const arr = value.split(':')
+        const parent = this.liuchengParams.find(item => {
+          return item.id === arr[0]
+        })
+        const child = parent.children.find(item => {
+          return item.id === arr[1]
+        })
+        if (child) return child.name
+      }
+      if (value && !value.includes(':')) {
+        const arr = value.split(':')
+        const parent = this.liuchengParams.find(item => {
+          return item.id === arr[0]
+        })
+        if (parent) return parent.name
+      }
+      return ''
+    }
+  },
+  watch: {
+    last: {
+      handler (v) {
+        const { link, dataType } = this.scope
+        if (v && link) {
+          this.updateScopeItem('link', { name: null, value: null })
+        }
+        if (!v && !link) {
+          const scopeConfigItem = this.scopeConfig[dataType] || {}
+          const { stOptions = [] } = scopeConfigItem
+          this.updateScopeItem('link', { name: stOptions && stOptions[0].name, value: stOptions && stOptions[0].value })
+        }
+      },
+      immediate: true
+    },
+    valueOption: {
+      handler (v) {
+        if (!this.valueType) this.valueType = this.scope.valueType
+        if (!this.valueType) {
+          this.valueType = v[0] && v[0].code
+          this.valueTypeC = v[0] && v[0].name
+        } else {
+          const valueItem = v.find(item => {
+            return item.code === this.valueType
+          })
+          if (!valueItem) return
+          this.valueTypeC = valueItem.name
+          if (this.scope.valueType) {
+            if (this.scope.valueType === 'DYNAMIC_VALUE') {
+              const value = this.scope.values
+              if (value.includes('$')) {
+                const setValue = value.replace(/^\$\[(.+)\]$/, '$1')
+                const item = valueItem.children.find(child => {
+                  return child.code === setValue
+                })
+                this.valueChildV = item.code + '-' + item.name
+              }
+            } else {
+              if (valueItem.children.length > 0) {
+                const item = valueItem.children.find(child => {
+                  return child.code === this.scope.values
+                })
+                this.valueChildV = item.code + '-' + item.name
+              }
+            }
+          }
+        }
+      },
+      immediate: true
+    },
+    'scope.valueType': {
+      handler (v) {
+        if (v) {
+          this.valueType = v
+        } else {
+          this.valueType = 'FIXED_VALUE'
+        }
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    clickCheckBtn (v, e) {
+      const values = [...this.values]
+      const index = values.indexOf(v)
+      if (index !== -1) {
+        values.splice(index, 1)
+      } else {
+        values.push(v)
+      }
+      this.values = values
+    },
+    dateTypeChange (value) {
+      const item = this.dateTypeList.find(item => {
+        return item.value === value
+      })
+      if (item) {
+        this.$set(this.scope, 'dateType#', item.name)
+      }
+      if (value !== 'set_date' && value !== 'aftertime' && value !== 'past') {
+        this.$set(this.scope, 'values', value)
+      } else {
+        this.$set(this.scope, 'values', '')
+      }
+    },
+    getTagList () {
+      const { field } = this.scope
+      this.$http.get({
+        action: 'getAttributeTagData',
+        entityId: 'FM_ATTRIBUTE',
+        fieldCode: field,
+        fieldEntityId: this.metaId
+      })
+        .then(data => {
+          this.tagList = data.entitys
+        })
+    },
+    checkChange (values) {
+      let valuesChinese = ''
+      const codeArr = []
+      values.forEach(item => {
+        const itemCon = this.codeList.find(codeItem => {
+          return codeItem.code === item
+        })
+        codeArr.push(itemCon)
+      })
+      valuesChinese = codeArr.map(item => item.name).join(',')
+      return valuesChinese
+      // this.$set(this.scope, 'values#', valuesChinese)
+    },
+    valueTypeChange (v) {
+      const arr = v.split('-')
+      const value = arr[0]
+      let values = value
+      const name = arr[1]
+      if (this.valueType === 'DYNAMIC_VALUE') {
+        values = '$[' + value + ']'
+      }
+      this.$set(this.scope, 'values', values)
+      this.$set(this.scope, 'values#', name)
+    },
+    deleteScopeItem () {
+      this.$emit('delete')
+    },
+    updateScopeItemVT ({ name, code }) {
+      this.valueType = code
+      this.valueTypeC = name
+      if (this.valueType === 'SYSTEM_VARIABLE' || this.valueType === 'DYNAMIC_VALUE') {
+        this.valueChildV = ''
+      }
+      this.$set(this.scope, 'valueType', this.valueType)
+    },
+    updateScopeItem (key, { name, value }) {
+      const { dataType, valueType = 'FIXED_VALUE', values = '' } = this.scope
+      // 选项类型判断
+      if (valueType === 'FIXED_VALUE' && (dataType === 'list' || dataType === 'radio' || dataType === 'multibox' || dataType === 'treeList')) {
+        if (key === 'mode') {
+          if (value === 'equal' || value === 'not_equal') {
+            if (values.split(',').length >= 2) {
+              return this.$message.error('等于或不等于只能选择一个选项')
+            }
+          }
+        }
+      }
+      if (key === 'mode' && (value === 'is_null' || value === 'not_null')) {
+        this.scope.values = ''
+      }
+      this.$emit('update', { key, value, 'value#': name })
+    },
+    checkboxHeightListener () {
+      const ref = this.$refs.checkbox
+      if (!ref) return
+      const el = ref.$el
+      if (el && el.offsetHeight > 100) {
+        this.$set(this.scope, 'showFoldBtn', true)
+      }
+    },
+    changeObject (v) {
+      if (v) {
+        // this.$set(this.scope, 'value', v)
+        this.$set(this.scope, 'values', v.map(item => item.id).join(','))
+        this.$set(this.scope, 'values#', v.map(item => item.name).join(','))
+      }
+    },
+    clearObject () {
+      this.$set(this.scope, 'value', '')
+      // this.$set(this.scope, 'label', '')
+    },
+    swicthMode () {
+      const { inputMode } = this.scope
+      this.$set(this.scope, 'inputMode', inputMode === 'express' ? '' : 'express')
+    },
+    selectFieldValue (data, node) {
+      if (!data.isMain || !data.isSub) {
+        this.$set(this.scope, 'values', `#[${data.field}]`)
+        this.$set(this.scope, 'values#', node.parent.data.text.replace(/<font\scolor=\w+>|<\/font>/g, '') + '.' + data.text)
+      }
+    },
+    selectLcValue (data) {
+      this.$set(this.scope, 'values', data.upId ? (data.upId + ':' + data.id) : data.id)
+      this.$set(this.scope, 'values#', data.name)
+    }
+  },
+  created () {
+    this.leftBraces = [
+      '',
+      '(',
+      '((',
+      '(((',
+      '((((',
+      '((((('
+    ]
+    this.rightBraces = [
+      '',
+      ')',
+      '))',
+      ')))',
+      '))))',
+      ')))))'
+    ]
+
+    if (this.scope.dataType === 'tag') {
+      this.getTagList()
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.scope__item {
+  // display: flex;
+  padding: 10px 20px;
+  // align-items: center;
+  // justify-content: space-between;
+  line-height: 36px;
+  position: relative;
+  &:last-child {
+    .scope__operator--logical {
+     opacity: 0;
+     pointer-events: none;
+    }
+    .line-center{
+      opacity: 0;
+    }
+  }
+  &:hover {
+    background-color: #f6f7f9;
+    .filter-condition__delete i {
+      display: inline;
+    }
+    .operator__select i {
+      display: inline;
+    }
+    // 括号
+    .scope__brace{
+      background-color: #f6f7f9;
+      &::v-deep {
+        .el-input__suffix{
+          display: inline;
+        }
+        .el-input, .el-input__inner {
+          background-color: #f6f7f9;
+        }
+      }
+    }
+    .select-checkbox {
+      &::v-deep {
+        .el-checkbox-button__inner {
+          background: #fff;
+        }
+      }
+    }
+  }
+}
+.scope-item-top{
+  display: flex;
+  justify-content: space-between;
+}
+.scope-item-top-left,.scope-item-top-right{
+  display: flex;
+}
+.scope-item-content{
+  width: 55%;
+  // margin-left: 33px;
+}
+.scope-item-content-quick{
+  width: 90%;
+}
+// 括号
+.scope__brace {
+  &::v-deep {
+    .el-input, .el-input__inner {
+      width: 80px;
+      border: none;
+    }
+    .el-input__suffix{
+      display: none;
+    }
+  }
+  // margin: 0 8px;
+}
+// .scope__item .scope__brace:hover{
+//    &::v-deep {
+//     .el-input, .el-input__inner {
+//      border: 1px solid #DCDFE6;
+//      border-radius: 4px;
+//     }
+//   }
+// }
+// 筛选标签
+.scope__label {
+  display: inline-block;
+  // width: 80px;
+  margin-right: 12px;
+  flex-shrink: 0;
+  font-weight: bold;
+}
+.scope-item-bottom{
+  display: flex;
+  margin: 16px 0;
+  // padding-left: 16px;
+}
+.scope-item-bottom-two{
+  margin-bottom: 0px;
+}
+// 选择符
+.scope__operator {
+  width: auto;
+  flex-shrink: 0;
+  &::v-deep {
+    .el-input {
+      width: auto;
+    }
+    .el-input__inner {
+      width: auto;
+      height: 32px;
+      line-height: 32px;
+      @include border_primary;
+      @include font_color_primary;
+    }
+   .el-input .el-select__caret {
+      @include font_color_primary;
+    }
+  }
+}
+.operator__select {
+  @include font_color_primary;
+  // @include border_primary;
+  padding: 0px 12px;
+  // border-radius: 4px;
+  cursor: pointer;
+  outline: none;
+  i{
+    display: none;
+  }
+}
+.operator__select__noboder{
+  border: none;
+  color: #666;
+  // margin-left: 10px;
+}
+.scope__operator--logical {
+  flex-shrink: 0;
+  // margin-right:12px;
+  .operator__select {
+    border: none;
+    color: #333;
+    width: 49px;
+    display: inline-block;
+    // border-right: 1px solid #e3e3e3;
+    padding-right: 6px;
+  }
+}
+
+// 筛选输入样式
+.scope__select {
+  margin-right: 8px;
+  flex: 1;
+  &::v-deep {
+    .el-input-number {
+      width: 140px;
+      // margin-left: 12px;
+      .el-input {
+        width: 100%;
+        margin-left: 0;
+      }
+    }
+    .el-input, .el-input__inner {
+      width: 140px;
+      // margin-left: 12px;
+    }
+    .el-date-editor{
+      margin-left: 10px;
+    }
+    .el-date-editor.el-input .el-input__inner{
+      width: 166px;
+      padding-right: 10px;
+    }
+    .el-range-editor.el-input__inner {
+      width: 230px;
+      margin-left: 12px;
+    }
+    .el-checkbox-group {
+      // margin-left: 12px;
+    }
+  }
+}
+
+.select__inner {
+  display: inline-block;
+  position: relative;
+}
+.select__transform {
+  position: absolute;
+  top: -10px;
+  right: -12px;
+  cursor: pointer;
+}
+
+.select-number__scope {
+   &::v-deep {
+    .el-input-number {
+      width: 90px;
+      margin-left: 12px;
+      &:last-child {
+        margin: 0;
+      }
+    }
+   }
+}
+.select-number__connect {
+  margin: 0 12px;
+}
+
+.select-checkbox {
+  flex: 1;
+  max-height: 86px;
+  overflow: hidden;
+  &::v-deep {
+    .el-checkbox-button__inner {
+      border-radius: 4px;
+      margin-right: 12px;
+      border: 0;
+      background-color: #f6f7f9;
+      margin-bottom: 6px;
+    }
+    .el-checkbox-button.is-checked {
+      .el-checkbox-button__inner {
+        @include bg_color_primary;
+      }
+    }
+  }
+}
+.select-checkbox--all {
+  max-height: none;
+  .select-checkbox__group {
+    max-height: 200px;
+    overflow: auto;
+  }
+  .select-checkbox__switch {
+    i {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+.select-checkbox__switch {
+  position: absolute;
+  right: -60px;
+  bottom: 7px;
+  @include font_color_primary;
+  cursor: pointer;
+  i {
+    transition: all .5s;
+    margin-left: 8px;
+  }
+}
+
+.filter-condition__delete {
+  width: 30px;
+  font-size: 18px;
+  color: #999;
+  i {
+    display: none;
+    cursor: pointer;
+  }
+}
+.object-popover {
+  max-width: 800px;
+}
+ div.find {
+    max-height: 400px;
+    max-width: 800px;
+    overflow-x: hidden;
+    overflow-y: auto;
+ }
+ .scope-option-right{
+   display: flex;
+   align-items: center;
+ }
+.line-center{
+   width: 1px;
+   height: 20px;
+   margin: auto;
+   background-color: #e3e3e3;
+}
+.scope-opera__popper {
+  min-width: 100px;
+  max-height: 500px;
+  overflow: auto;
+}
+@media screen and (min-width: 992px){
+ div.find {
+    &::v-deep {
+      .list {
+        width: 800px;
+      }
+      .search-container {
+        margin-bottom: 0;
+      }
+      .table-container {
+        padding: 0 16px 16px
+      }
+    }
+  }
+}
+</style>