@epxing/designer 0.0.0-stage → 5.3.0-beta.2

package/src/page-designer/page-variable-panel/PageVariablePanel.vue

@@ -0,0 +1,781 @@
+<template>
+  <div class="epx-page-designer-page-variable">
+    <div class="epx-page-designer-page-variable__header">
+      <span>页面变量</span>
+      <i class="el-icon-close" @click="$emit('close')"></i>
+    </div>
+    <div class="epx-page-designer-page-variable__content">
+      <div class="epx-page-designer-page-variable__operates">
+        <el-button block type="primary" size="default" @click="addVariable">+新增页面变量</el-button>
+      </div>
+      <draggable tag="ul" v-model="variableSets" handle=".epx-page-designer-page-variable__drag-icon" class="epx-page-designer-page-variable__list">
+        <li class="epx-page-designer-page-variable__item" v-for="(item) in variableSets" :key="item.code">
+          <i class="epx-page-designer-page-variable__drag-icon epx-icon-tuozhuai"></i>
+          <div class="epx-page-designer-page-variable__item-content">
+            <div class="epx-page-designer-page-variable__title">
+              <span v-if="item.name">{{item.name}}</span>
+              <span>{{item.code}}</span>
+            </div>
+            <div class="epx-page-designer-page-variable__detail">
+              <div class="epx-page-designer-page-variable__detail-item">获取方式：{{typeOptions.find(t=>t.value===item.type).label}}</div>
+              <div class="epx-page-designer-page-variable__detail-item" v-if="item.value">变量值：{{item.value}}</div>
+            </div>
+          </div>
+          <div class="epx-page-designer-page-variable__extra">
+            <el-dropdown>
+              <span>
+                <i class="el-icon-more"></i>
+              </span>
+              <template v-slot:dropdown><el-dropdown-menu>
+                <el-dropdown-item command="view" @click="viewVariable(item)">查看</el-dropdown-item>
+                <el-dropdown-item command="edit" @click="editVariable(item)">编辑</el-dropdown-item>
+                <el-dropdown-item command="remove" @click="removeVariable(item)">删除</el-dropdown-item>
+              </el-dropdown-menu></template>
+            </el-dropdown>
+          </div>
+        </li>
+      </draggable>
+    </div>
+    <el-dialog
+      class="epx-page-designer-page-variable__variable-dialog"
+      :title="variableOperateType==='add'? '新增变量':variableOperateType==='detail'? '查看变量': '编辑变量'"
+      v-model="variableDialog"
+      width="600px"
+      append-to-body
+      :close-on-click-modal="false"
+    >
+      <div v-if="variableDialog">
+        <el-form ref="variableForm" class="epx-page-designer-page-variable__form" label-position="left" label-width="80px" :model="variableForm">
+          <el-form-item label="变量编号" required>
+            <span v-if="variableOperateType==='detail'">{{variableForm.code}}</span>
+            <el-input v-else v-model="variableForm.code" size="default" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item label="变量名">
+            <span v-if="variableOperateType==='detail'">{{variableForm.name}}</span>
+            <el-input v-else v-model="variableForm.name" size="default" placeholder="请输入"></el-input>
+          </el-form-item>
+          <el-form-item label="来源">
+            <span v-if="variableOperateType==='detail'">{{variableForm.type && typeOptions.find(item=>item.value===variableForm.type).label}}</span>
+            <el-radio-group v-else v-model="variableForm.type" @change="variableForm.value=''">
+              <el-radio v-for="type in typeOptions" :key="type.value" :label="type.value" :value="type.value">{{type.label}}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <template v-if="variableForm.type === 'request'">
+            <el-form-item label="请求对象">
+              <epx-visual-config-object
+                v-model="variableForm.metaId"
+                type="object"
+                label="请求对象"
+                object='FM_ENTITY'
+                :state="variableOperateType==='detail'? 'DETAIL': 'EDIT'"
+              ></epx-visual-config-object>
+            </el-form-item>
+            <el-form-item label="请求方式">
+              <el-radio-group v-model="interfaceType" >
+                <el-radio label="api" value="api">接口</el-radio>
+                <el-radio label="rule" value="rule">逻辑编排</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item v-if="interfaceType==='rule'" label="逻辑编排">
+              <el-select clearable v-model="variableForm.rule" size="default" placeholder="">
+                <el-option
+                  v-for="option in  ruleMap[variableForm.metaId || designer.page.metaId]"
+                  :key="option.value"
+                  :label="`${option.label}`"
+                  :value="option.value"
+                >
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item v-else label="请求接口">
+              <epx-visual-config-select
+                :value="variableForm.action"
+                :state="variableOperateType==='detail'? 'DETAIL': 'EDIT'"
+                :optionList="actionMap[variableForm.metaId || designer.page.metaId]"
+                placeholder="请选择"
+                @change-configs="v=>(variableForm['action'] = v)"
+              >
+              </epx-visual-config-select>
+            </el-form-item>
+          </template>
+          <el-form-item label="变量值" :required="variableForm.type!=='request'" v-if="variableForm.type!=='query'">
+            <span v-if="variableOperateType==='detail'">{{variableForm.type==='component' ? componentVariableShowLabel(variableForm.value):variableForm.value}}</span>
+            <template v-else>
+              <epx-page-variable-panel-json-editor class="epx-page-designer-page-variable__json-editor" v-if="variableForm.type==='fixed'" v-model="variableForm.value" placeholder="请输入字符串、数字、布尔值、对象{...}、数组[...]等类型"></epx-page-variable-panel-json-editor>
+              <el-input
+                v-else-if="variableForm.type==='component'"
+                type="text"
+                size="default"
+                placeholder="请选择组件变量"
+                suffix-icon="el-icon-search"
+                :model-value="componentVariableShowLabel(variableForm.value)"
+                @focus="openComponentVariableDialog" clearable
+                @clear="variableForm.value=''"
+              ></el-input>
+              <template v-else-if="variableForm.type==='request'">
+                <el-popover
+                  ref="popover"
+                  placement="bottom"
+                  width="200"
+                  trigger="focus"
+                >
+                 <el-tree ref="apiParamsTree" :data="apiOutParams" node-key="id" :props="{label: 'REMARK', children: 'children'}"
+                  :filter-node-method="apiParamsFilterNode"
+                  @node-click="selectApiParams"
+                 ></el-tree>
+                </el-popover>
+                <el-input v-model="apiParamsValue" :placeholder="apiParamsFocused?apiParamsValueLabel:'请选择'" size="default" v-popover:popover @focus="apiParamsFocused = true" @blur="apiParamsInputBlur" suffix-icon="el-icon-search"></el-input>
+              </template>
+              <el-input type="text" size="default" v-else v-model="variableForm.value"></el-input>
+            </template>
+          </el-form-item>
+          <template v-if="variableForm.type==='request'">
+            <el-form-item label="请求方式">
+              <span v-if="variableOperateType==='detail'">{{variableForm.requestType==='sync'? '同步':'异步'}}</span>
+              <el-radio-group v-else v-model="variableForm.requestType">
+                <el-radio label="async" value="async">异步</el-radio>
+                <el-radio label="sync" value="sync">同步</el-radio>
+              </el-radio-group>
+            </el-form-item>
+            <el-form-item label="请求参数">
+              <epx-visual-config-params
+                :state="variableOperateType==='detail'? 'DETAIL': 'EDIT'"
+                :value="variableForm.requestParams"
+                :metaId="variableForm.metaId || designer.page.metaId"
+                :treeFieldStore="treeFieldStore"
+                :paramList="apiInParams"
+                :pageParams="variableSets"
+                :showParamsType="['str', 'page']"
+                @change-configs="v=>(variableForm['requestParams'] = v)"
+              />
+            </el-form-item>
+            <el-form-item label="查询条件">
+              <epx-visual-config-scope
+                :state="variableOperateType==='detail'? 'DETAIL': 'EDIT'"
+                :value="variableForm.scopeParams"
+                :treeFieldStore="treeFieldStore"
+                :componentMetaId="variableForm.metaId || designer.page.metaId"
+                @change-configs="v=>(variableForm['scopeParams'] = v)"
+              />
+            </el-form-item>
+          </template>
+          <el-form-item label="数据加工">
+          <epx-rule
+              formulaType='web'
+              v-model="dataFormat"
+              :metaId="designer.page.metaId"
+              :variableList="variableTree"
+              :fieldConfigs="{state: 'EDIT', functionType: 'web' }"
+            >
+            </epx-rule>
+          </el-form-item>
+          <el-form-item label="变量说明">
+            <span v-if="variableOperateType==='detail'">{{variableForm.note}}</span>
+            <el-input v-else type="textarea" placeholder="请输入" v-model="variableForm.note"></el-input>
+          </el-form-item>
+        </el-form>
+      </div>
+      <template v-slot:footer><span v-if="variableOperateType!=='detail'" class="dialog-footer">
+        <el-button type="primary" @click="saveVariable" size="default">保 存</el-button>
+        <el-button @click="variableDialog = false" size="default">取 消</el-button>
+      </span></template>
+    </el-dialog>
+     <el-dialog
+      title="选择组件变量"
+      v-model="componentVariableDialog"
+      width="960px"
+      append-to-body
+      class="epx-page-designer-page-variable__component-dialog"
+    >
+      <div class="epx-page-designer-page-variable__component-variable">
+        <div class="epx-page-designer-page-variable__component-tree">
+          <el-input class="epx-page-designer-page-variable__component-search-input" size="small" suffix-icon="el-icon-search" v-model="componentVariableSearch" placeholder="输入变量名称查询"></el-input>
+          <el-tree ref="componentVariableTree" :data="widgetListWithInfo" :props="componentVariableTreeProps" @node-click="data=>selectedWidget=data" :filter-node-method="filterNode">
+            <template v-slot="{ data }"><span class="epx-page-designer-page-variable__component-node">
+              <span>
+                <i :class="[ data.data.ICON || 'el-icon-box']"></i>
+                <span>{{ data.title }}</span>
+              </span>
+              <i class="epx-icon-bianliang fr" v-if="data.data.variables"></i>
+            </span></template>
+          </el-tree>
+        </div>
+        <div class="epx-page-designer-page-variable__component-variable-content" v-if="selectedWidget">
+          <el-radio-group class="epx-page-designer-page-variable__component-variable-radio-group" v-if="selectedWidgetInfo.variables" v-model="variableForm.value">
+            <el-radio v-for="item in selectedWidgetInfo.variables" :key="item.data.CODE" :label="`${selectedWidget.id}.${item.data.CODE}`" :value="`${selectedWidget.id}.${item.data.CODE}`">{{item.data.NAME}}</el-radio>
+          </el-radio-group>
+          <div class="epx-page-designer-page-variable__null-data" v-else>
+            <i class="epx-icon-color-kong1"></i>
+            <span>暂无组件变量</span>
+          </div>
+        </div>
+      </div>
+     </el-dialog>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-page-designer-page-variable-panel',
+  components: {
+    draggable
+  },
+  props: {
+    designer: Object
+  },
+  data () {
+    return {
+      variableDialog: false,
+      variableOperateType: '',
+      interfaceType: 'api',
+      variableForm: {
+        type: 'fixed',
+        value: ''
+      },
+      componentVariableDialog: false,
+      selectVariableList: [],
+      typeOptions: [
+        {
+          label: '固定值',
+          value: 'fixed'
+        },
+        {
+          label: '组件变量',
+          value: 'component'
+        },
+        {
+          label: '请求获取',
+          value: 'request'
+        },
+        {
+          label: '页面传递',
+          value: 'query'
+        }
+      ],
+      actionMap: {},
+      ruleMap: {},
+      apiMap: {},
+      componentVariableTreeProps: {
+        children: 'items',
+        label: 'title'
+      },
+      selectedWidget: null,
+      apiParamsFilterText: '',
+      apiParamsFocused: false,
+      variableSets: [],
+      componentVariableSearch: ''
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaViewFields'
+    ]),
+    pageVariableSets: {
+      get () {
+        return this.designer.pageConfig.variableSets || []
+      }
+
+    },
+    treeFieldStore () {
+      return this.getMetaViewFields(this.variableForm.metaId || this.designer.page.metaId)
+    },
+    widgetList () {
+      return this.designer.widgetList || []
+    },
+    widgetListWithInfo () {
+      const widgetList = [...this.designer.widgetList]
+      const formatWidget = (widgetList) => {
+        return widgetList.map(widget => {
+          const newWidget = { ...widget }
+          const widgetInfo = this.designer.getWidgetByType(widget.contentType) || {}
+          newWidget.data = widgetInfo
+          if (newWidget.items) {
+            newWidget.items = formatWidget(newWidget.items)
+          }
+          return newWidget
+        })
+      }
+      return formatWidget(widgetList)
+    },
+    widgetInfo () {
+      return widget => {
+        return this.designer.getWidgetByType(this.selectedWidget.contentType) || {}
+      }
+    },
+    selectedWidgetInfo () {
+      if (this.selectedWidget) {
+        return this.designer.getWidgetByType(this.selectedWidget.contentType) || {}
+      }
+      return {}
+    },
+    componentVariableShowLabel () {
+      return v => {
+        if (!v) return ''
+        const widgetId = v.split('.')[0]
+        const variableCode = v.replace(`${widgetId}.`, '')
+        const widget = this.designer.getWidgetItemById(widgetId)
+        if (!widget) return ''
+        const widgetInfo = this.designer.getWidgetByType(widget.contentType) || {}
+        if (widgetInfo.variables) {
+          const variable = widgetInfo.variables.find(item => item.data.CODE === variableCode)
+          return `${widget.title}-${variable.data.NAME}`
+        }
+        return `${widget.title}-${variableCode}`
+      }
+    },
+    apiOutParams () {
+      let apiOutParams = []
+      const metaId = this.variableForm.metaId || this.designer.page.metaId
+      if (!metaId || !this.variableForm.action) {
+        apiOutParams = []
+      } else if (this.apiMap[metaId + '_' + this.variableForm.action]) {
+        apiOutParams = this.apiMap[metaId + '_' + this.variableForm.action].outParams
+      }
+      return apiOutParams
+    },
+    apiInParams () {
+      let apiInParams = []
+      const metaId = this.variableForm.metaId || this.designer.page.metaId
+      if (!metaId || !this.variableForm.action) {
+        apiInParams = []
+      } else if (this.apiMap[metaId + '_' + this.variableForm.action]) {
+        apiInParams = this.apiMap[metaId + '_' + this.variableForm.action].inParams
+      }
+      return apiInParams
+    },
+    apiParamsValue: {
+      get () {
+        if (this.apiParamsFocused) {
+          return this.apiParamsFilterText
+        } else {
+          return this.apiParamsValueLabel
+        }
+      },
+      set (v) {
+        this.apiParamsFilterText = v
+      }
+
+    },
+    apiParamsValueLabel () {
+      if (this.variableForm.value) {
+        const findItem = (arr) => {
+          for (const item of arr) {
+            if (item.NAME === this.variableForm.value) {
+              return item
+            } else if (item.children) {
+              const child = findItem(item.children)
+              if (child) return child
+            }
+          }
+        }
+        const item = findItem(this.apiOutParams)
+        return item?.REMARK || this.variableForm.value
+      }
+      return ''
+    },
+    variableTree () {
+      const variableList = this.variableSets.map(item => ({ ...item, type: 'variable', text: item.name || item.code, code: item.code }))
+      return [{
+        code: 'PAGE_VARIABLE',
+        text: '页面变量',
+        children: [{ type: 'variable', text: '当前变量', code: 'CURRENT_VALUE_' }, ...variableList]
+      }]
+    },
+    dataFormat: {
+      get () {
+        return this.variableForm.dataFormat
+      },
+      set (v) {
+        if (v) {
+          this.variableForm.dataFormat = JSON.parse(v).el
+        } else {
+          this.variableForm.dataFormat = ''
+        }
+      }
+    }
+  },
+  watch: {
+    componentVariableSearch (val) {
+      this.$refs.componentVariableTree.filter(val)
+    },
+    variableSets (v) {
+      this.designer.updatePageConfig({ variableSets: v })
+    },
+    'variableForm.metaId': {
+      handler (v) {
+        const metaId = v || this.designer.page.metaId
+        if (!this.actionMap[metaId]) {
+          this.getActionList(metaId)
+        }
+        if (!this.ruleMap[metaId]) {
+          this.getRuleList(metaId)
+        }
+      },
+      immediate: true
+    },
+    'variableForm.action': {
+      handler (v) {
+        if (v && this.variableForm.type === 'request') {
+          const metaId = this.variableForm.metaId || this.designer.page.metaId
+          if (!this.apiMap[metaId + '_' + v]) { this.getApiInfo(v) }
+        }
+      }
+    },
+    apiParamsFilterText (val) {
+      const node = this.$refs.apiParamsTree.getNode('custom')
+      if (node) this.$refs.apiParamsTree.remove(node)
+      if (val) {
+        const data = this.apiOutParams.find(item => item.NAME === val || item.REMARK === val)
+        if (!data) {
+          if (this.apiOutParams.length > 0) {
+            this.$refs.apiParamsTree.insertBefore({ id: 'custom', NAME: val, REMARK: val }, this.apiOutParams[0].id)
+          } else {
+            this.$refs.apiParamsTree.append({ id: 'custom', NAME: val, REMARK: val })
+          }
+        }
+      }
+
+      this.$refs.apiParamsTree.filter(val)
+    }
+  },
+  methods: {
+    filterNode (value, data) {
+      if (!value) return true
+      return (data.title).indexOf(value) !== -1
+    },
+    apiParamsFilterNode (value, data) {
+      if (!value) return true
+
+      return data.REMARK.indexOf(value) !== -1 || data.NAME.indexOf(value) !== -1
+    },
+    apiParamsInputBlur () {
+      setTimeout(() => {
+        this.apiParamsFocused = false
+        this.apiParamsFilterText = ''
+      }, 300)
+    },
+    selectApiParams (data) {
+      this.variableForm.value = data.NAME
+    },
+    addVariable () {
+      this.interfaceType = 'api'
+      this.variableForm = {
+        type: 'fixed',
+        requestType: 'async',
+        value: ''
+      }
+      this.variableOperateType = 'add'
+      this.variableDialog = true
+    },
+    editVariable (row) {
+      this.variableForm = { ...row }
+      if (this.variableForm.type === 'request' && this.variableForm.rule) {
+        this.interfaceType = 'rule'
+      } else {
+        this.interfaceType = 'api'
+      }
+      this.variableOperateType = 'edit'
+      this.variableDialog = true
+    },
+    viewVariable (row) {
+      this.variableForm = { ...row }
+      this.variableOperateType = 'detail'
+      this.variableDialog = true
+    },
+    openComponentVariableDialog () {
+      this.componentVariableDialog = true
+    },
+    removeVariable (row) {
+      const selected = [row.code]
+      if (selected.length === 0) {
+        this.$message.warning('请选择要删除的变量')
+        return
+      }
+      this.$confirm('确认删除?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.variableSets = [...this.variableSets.filter(item => !selected.includes(item.code))]
+      })
+    },
+    saveVariable () {
+      this.$refs.variableForm.validate(valid => {
+        if (valid) {
+          if (!this.variableForm.code) {
+            this.$message.error('请输入变量名')
+            return
+          }
+          if (!['request', 'query'].includes(this.variableForm.type) && !this.variableForm.value) {
+            this.$message.error('请输入变量值')
+            return
+          }
+          const variableSets = [...this.variableSets]
+          if (this.variableOperateType === 'edit') {
+            const index = variableSets.findIndex(item => item.code === this.variableForm.code)
+            variableSets.splice(index, 1, this.variableForm)
+          } else {
+            variableSets.push(this.variableForm)
+          }
+          if (variableSets.filter(item => item.code === this.variableForm.code).length > 1) {
+            this.$message.warning('变量名重复，请重新输入')
+            return
+          }
+          this.variableSets = variableSets
+          this.variableDialog = false
+        }
+      })
+    },
+    getActionList (v) {
+      this.$http.list({
+        action: 'getEntityAllApi',
+        entityId: 'FM_ENTITY_API',
+        metaId: v
+      })
+        .then(data => {
+          const actionList = data.entitys.map(item => ({ label: item.LABEL || item.NAME, value: item.NAME }))
+          this.actionMap[v] = actionList
+        })
+    },
+    getRuleList (id) {
+      if (this.ruleMap[id]) return
+      this.$http.list({
+        entityId: 'ACT_RE_MODEL',
+        'scope.ENTITY': id,
+        'scope.CATEGORY': '2'
+      })
+        .then(data => {
+          this.ruleMap[id] = data.entitys.map(item => ({ label: item.NAME || item.KEY, value: item.KEY }))
+        })
+    },
+    // 筛选条件字段
+    getAllFields  (v) {
+      if (!v) return []
+      if (!this.treeFieldStore) {
+        return this.$store.dispatch({
+          type: 'ADD_META_VIEW_FIELDS',
+          metaId: v
+        })
+      }
+      return this.treeFieldStore
+    },
+    getApiInfo (v) {
+      return this.$http.list({
+        action: 'getEntityApiInfo',
+        entityId: 'FM_ENTITY_API',
+        metaId: this.variableForm.metaId || this.designer.page.metaId,
+        api: v
+      })
+        .then(data => {
+          const metaId = this.variableForm.metaId || this.designer.page.metaId
+          this.apiMap[metaId + '_' + v] = data
+        })
+    }
+  },
+  mounted () {
+    if (this.pageVariableSets) {
+      this.variableSets = [...this.pageVariableSets]
+    }
+  }
+}
+</script>
+<style lang="scss">
+@include b(page-designer-page-variable) {
+  width: 360px;
+  position: absolute;
+  left: 51px;
+  background: var(--epx-bg-card);
+  z-index: 101;
+  height: 100%;
+  @include e(header) {
+    height: 48px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    border-bottom: 1px solid #e3e3e3;
+    >span {
+      font-size: var(--epx-font-size-l);
+      font-weight: 600;
+    }
+    >i {
+      color: rgba(0, 0, 0, 0.65);
+      cursor: pointer;
+    }
+  }
+  @include e(content) {
+    padding: 10px 20px;
+    height:calc(100% - 48px);
+    overflow-y: auto;
+  }
+  @include e(operates) {
+    padding: 12px 10px;
+    display: flex;
+    .el-button {
+      flex: 1;
+    }
+  }
+  @include e(form) {
+    .el-form-item__content {
+      .el-input,.edit-object, .el-select {
+        width: 200px;
+        .el-input, .el-input__inner {
+          width: 100%;
+        }
+      }
+    }
+  }
+  @include e(json-editor) {
+    .CodeMirror  {
+      border: 1px solid #e3e3e3;
+      border-radius: var(--epx-radius-base);
+      line-height: 28px;
+    }
+    .CodeMirror-gutters {
+      border-right: 1px solid transparent;
+      background-color: transparent;
+    }
+  }
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    background: #F5F7FA;
+    border-radius: var(--epx-radius-base);
+    padding: 16px 20px;
+    padding-left: 10px;
+    padding-right: 32px;
+    margin-bottom: 20px;
+    position: relative;
+    &:hover {
+      box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.15);
+      @include e(extra) {
+        display: block;
+      }
+    }
+  }
+  @include e(item-content) {
+    flex: 1;
+  }
+  @include e(drag-icon) {
+    cursor: move;
+    margin-right: 8px;
+    color: #999;
+  }
+  @include e(title) {
+    color: #222222;
+    font-weight: bold;
+    margin-bottom: 8px;
+    >span:nth-child(2){
+      font-weight: normal;
+      border-left: 1px solid #e3e3e3;
+      padding-left: 8px;
+      margin-left: 8px;
+    }
+  }
+   @include e(detail) {
+    color: #444;
+    word-break: break-all;
+   }
+  @include e(extra) {
+    display: none;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    margin-top: -7px;
+    cursor: pointer;
+  }
+  @include e(component-variable) {
+    display: flex;
+  }
+  @include e(component-tree) {
+    width: 360px;
+    border-right: 1px solid #e3e3e3;
+    .el-tree-node{
+      &.is-current {
+        >.el-tree-node__content  {
+          @include bg_color_primary(0.2);
+          @include font_color_primary;
+        }
+
+      }
+    }
+    .el-tree-node__content {
+      height: 48px;
+    }
+  }
+  @include e(component-search-input) {
+    margin: 10px;
+    width: calc(100% - 20px);
+  }
+  @include e(variable-dialog) {
+    .el-dialog__header {
+      padding: 10px 20px;
+      border-bottom: 1px solid #e3e3e3;
+    }
+    .el-dialog__headerbtn {
+      top: 10px;
+    }
+    .el-dialog__body {
+      max-height: 500px;
+      overflow: auto;
+    }
+    .el-dialog__footer {
+      border-top:1px solid #e3e3e3;
+      padding: 10px 20px;
+      text-align: center;
+    }
+  }
+  @include e(component-dialog) {
+    .el-dialog__header {
+      padding-bottom: 20px;
+      border-bottom: 1px solid #e3e3e3;
+    }
+    .el-dialog__body {
+      padding: 0;
+    }
+  }
+  @include e(component-node) {
+    line-height: 48px;
+    flex: 1;
+    >i {
+      margin-right: 12px;
+    }
+    >span {
+      flex: 1;
+      >i {
+        margin-right: 4px;
+      }
+    }
+    display: flex;
+    justify-content: space-between;
+  }
+  @include e(component-variable-content) {
+    flex: 1;
+    padding: 10px 20px;
+  }
+  @include e(component-variable-radio-group) {
+    display: block;
+    .el-radio {
+      display: block;
+      margin: 10px 0;
+      padding: 12px 20px;
+      background: #F5F7FA;
+    }
+  }
+  @include e(null-data) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 80%;
+    font-size: var(--epx-font-size-base);
+    color: #999;
+    >i {
+      font-size: 200px;
+      line-height: 1;
+      margin-bottom: 20px;
+    }
+  }
+}
+</style>