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

package/src/components/RoleApplicationList.vue

@@ -0,0 +1,766 @@
+<template>
+  <div class="applicaiton-container">
+    <div class="button-group">
+      <el-button size="default" type="primary" @click="addEntity">添加应用</el-button>
+      <el-button size="default" @click="removeEntity">删除</el-button>
+    </div>
+    <!-- 表格 -->
+    <el-table
+      :data="applicationList"
+       @selection-change="selectionChange"
+      style="width: 100%"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+      >
+      </el-table-column>
+       <el-table-column
+          width="55"
+          label="序号"
+          type="index"
+        >
+        </el-table-column>
+      <el-table-column
+        prop="SERVICE|ICON"
+        label="图标"
+        width="160">
+        <template v-slot="scope">
+          <i v-if="scope.row['SERVICE|ICON']" :class="['fa', scope.row['SERVICE|ICON']]"></i>
+        </template>
+      </el-table-column>
+      <el-table-column
+        prop="SERVICE|NAME"
+        label="应用名称"
+        width="160">
+      </el-table-column>
+      <el-table-column
+        label="应用菜单"
+        min-width="240">
+        <template v-slot="{row}">
+          <!-- 当前角色应用菜单数量 / 应用菜单数量 -->
+          <el-popover
+            width="200"
+            popper-class="role-app-menu-popper"
+            trigger="manual"
+            v-model:visible="popoverVisble[row.SERVICE]"
+          >
+            <el-card class="tree-card" :header="row['SERVICE|NAME']" @click.stop>
+              <el-tree
+                :ref="`tree-${row.SERVICE}`"
+                v-loading="!treeDataList[row.SERVICE]"
+                class="menu-tree"
+                :props="props"
+                :data="treeDataList[row.SERVICE]"
+                show-checkbox
+                node-key="ID"
+                :default-checked-keys="checkTreeIdList[row.SERVICE]"
+                @check-change="(data, checked)=>treeDataCheckChange(row, data, checked)"
+              >
+              </el-tree>
+              <div class="card-body">
+                <el-button type="primary" size="default" @click="savecheckedTreeIds(row.SERVICE, row['SERVICE|MODULE'])">保存</el-button>
+                <el-button size="default" @click="popoverVisble[row.SERVICE] = false">取消</el-button>
+              </div>
+            </el-card>
+            <template v-slot:reference><span :class="['count', {active: popoverVisble[row.SERVICE]}]" @click.stop="loadTreeData(row)">
+              <font >{{row.MENU_USED}}</font>
+              <i class="el-icon-edit"></i>
+            </span></template>
+          </el-popover>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="操作权限"
+        min-width="240">
+        <template v-slot="{row}">
+          <span :class="['count']" @click="showRight(row.SERVICE)">
+            <font>{{row.OPERATE_USED}}</font>
+            <i class="el-icon-setting"></i>
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="设置"
+        min-width="160">
+        <template v-slot="{row}">
+          <el-button type="primary" link @click="roleSetting(row)">设置</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+     <transition name="fade">
+      <div v-show="!!rightVisble" class="right-container">
+        <el-page-header class="right-header" title="权限设置" @back="rightVisble=false" content=""></el-page-header>
+        <div class="button-group" :style="{margin: '0 16px'}">
+          <el-button type="primary" size="default" @click="addRightDialog=true">添加权限</el-button>
+          <el-button size="default" @click="removeCheckedRightList">删除权限</el-button>
+        </div>
+        <el-table
+          :data="checkedRightMap[rightVisble]"
+          @selection-change="rightSelectionChange"
+          border
+          :span-method="rightSpanMethod"
+          style="width: 100%"
+        >
+            <el-table-column
+              type="selection"
+              width="55"
+            />
+              <el-table-column
+              prop="entityName"
+              label="对象名称"
+              min-width="160">
+              </el-table-column>
+              <el-table-column
+              prop="operateName"
+              label="对象操作"
+              min-width="160">
+              </el-table-column>
+              <el-table-column
+              prop="dataScope"
+              label="数据范围"
+              min-width="160">
+                <template v-slot="{row}">
+                  <span class="add-scope" v-if="!row.dataScope" @click="editDataScope(row)">+ 选择范围</span>
+                  <span class="edit-scope" v-else @click="editDataScope(row)">{{getDataScopeText(row.dataScope)}} <i class="el-icon-edit"></i></span>
+                </template>
+              </el-table-column>
+              <el-table-column
+              prop="fieldScope"
+              label="字段范围"
+              min-width="160">
+                <template v-slot="{row}">
+                  <el-popover
+                    popper-class="role-app-field-scope-popover"
+                    :value="fieldScopeOperateRightId===row.id"
+                    ref="popover"
+                    title="设置字段范围"
+                    width="400"
+                    trigger="manual"
+                  >
+                    <div class="field-scope-setting" @click.stop>
+                      <el-radio-group class="field-radio-group" v-model="fieldScope.type" size="default">
+                        <el-radio-button label="1" value="1">包含</el-radio-button>
+                        <el-radio-button label="0" value="0">不包含</el-radio-button>
+                      </el-radio-group>
+                      <el-checkbox class="check-field-all" :indeterminate="isCheckFieldIndeterminate(row.entityId, fieldScope)" v-model="checkFieldAll" @change="checkFieldAllChange(row.entityId)">全选</el-checkbox>
+                      <el-checkbox-group class="field-checkbox-group" v-model="fieldScope.fields" v-if="fieldMap[row.entityId]">
+                        <el-checkbox v-for="field in fieldMap[row.entityId]" :label="field.code" :value="field.code" :key="field.code">{{field.text}}</el-checkbox>
+                      </el-checkbox-group>
+                      <div class="field-scope-operate">
+                        <el-button type="primary" size="default" @click.stop="saveFieldScope(row.entityId)">确定</el-button>
+                        <el-button size="default" @click="fieldScopeOperateRightId=null">取消</el-button>
+                      </div>
+                    </div>
+                    <template v-slot:reference>
+                      <span class="add-scope" @click.stop="editFieldScope(row)" v-if="!row.fieldScope" >+ 选择范围</span>
+                      <span class="edit-scope" @click.stop="editFieldScope(row)" v-else>{{getFieldScopeText(row.fieldScope)}}<i class="el-icon-edit"></i></span>
+                    </template>
+                  </el-popover>
+                </template>
+              </el-table-column>
+        </el-table>
+      </div>
+    </transition>
+     <el-drawer
+      class="table-container__drawer"
+      :model-value="!!dataScopeEntityId"
+      size="600px"
+      direction="rtl"
+      @close="dataScopeEntityId=null"
+    >
+      <epx-filter v-if="!!dataScopeEntityId" ref="filter" :showFilter="false" :metaId="dataScopeEntityId" v-model="dataScope">
+        <template v-slot:button="{condition}"><div class="filter-button">
+          <el-button type="primary"  @click="saveDataScope(condition)">保存</el-button>
+        </div></template>
+      </epx-filter>
+    </el-drawer>
+    <el-dialog class="right-dialog" :model-value="addRightDialog" title="添加操作权限" @close="addRightDialog = false">
+      <div>
+        <el-input placeholder="请输入对象名称" v-model="searchKey" @change="seachEntity" clearable></el-input>
+      </div>
+        <el-table :data="allRightList" style="width: 100%" height="490">
+          <el-table-column label="对象名称" prop="entityName"></el-table-column>
+          <el-table-column
+            label="全选"
+          >
+            <template v-slot="{row}">
+              <el-checkbox :value="isRowChecked(row)" @change="v=>changeRowChecked(row, v)"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column label="对象操作" min-width="240">
+            <template v-slot="{row}">
+              <el-checkbox v-for="operate in (row.operateInfos || [])" v-model="operate.checked" :key="operate.operateId">{{operate.operateName}}</el-checkbox>
+            </template>
+          </el-table-column>
+        </el-table>
+      <div :style="{marginTop: '24px', textAlign:'center'}">
+        <el-button type="primary" @click="saveRoleRight">确定</el-button>
+        <el-button @click="addRightDialog=false">取消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-role-application-list',
+  mixins: [component],
+  data () {
+    return {
+      applicationList: [],
+      selectionList: [],
+      props: {
+        label: 'NAME',
+        isLeaf: 'leaf'
+      },
+      treeDataList: {},
+      checkTreeIdList: {},
+      popoverVisble: {},
+      rightVisble: false,
+      checkedRightMap: {},
+      rightSelectionList: [],
+      dataScope: {},
+      dataScopeOperateRightId: null,
+      dataScopeEntityId: null,
+      fieldScopeOperateRightId: null,
+      checkFieldAll: false,
+      fieldScope: {},
+      fieldMap: {},
+      allRightList: [],
+      addRightDialog: false,
+      searchKey: ''
+    }
+  },
+  computed: {
+    getDataScopeText () {
+      return dataScope => {
+        if (dataScope) {
+          const scope = JSON.parse(dataScope)
+          return scope.optionText
+        }
+      }
+    },
+    getFieldScopeText () {
+      return fieldScope => {
+        if (fieldScope) {
+          const scope = JSON.parse(fieldScope)
+          return scope.fieldNames
+        }
+      }
+    },
+    isCheckFieldIndeterminate () {
+      return (entityId, { fields = [] }) => {
+        return this.fieldMap[entityId] && this.fieldMap[entityId].length > fields.length
+      }
+    }
+  },
+  methods: {
+    roleSetting (row) {
+      const query = {
+        // title: '角色应用新增',
+        metaId: this.$metaId,
+        component: 'role-application-set',
+        roleId: row.ROLE,
+        serviceId: row.SERVICE
+      }
+      this.$createPage(query)
+    },
+    getApplicationList () {
+      this.$http.list({
+        action: 'getRoleService',
+        link: 'service',
+        entityId: 'FM_ROLE_SERVICE',
+        roleId: this.$query.id
+      })
+        .then(data => {
+          this.applicationList = data.entitys
+        })
+    },
+    addEntity () {
+      const query = {
+        title: '角色应用新增',
+        metaId: 'FM_ROLE_SERVICE',
+        flag: 'v_sub_add',
+        component: 'entity-add-page',
+        pageType: 'ADD',
+        submitParams: {
+          'bean.ROLE': this.$query.id
+        },
+        fieldConfigs: {
+          ROLE: { state: 'HIDDEN' }
+        },
+        parentId: this.$query.id,
+        openType: this.$isMobile ? null : 2,
+        callback: this.closeSubAdd
+      }
+      this.$createPage(query)
+    },
+    removeEntity () {
+      const sessionList = this.selectionList.map(item => item.ID)
+      this.$http.removeMulti({
+        entityId: 'FM_ROLE_SERVICE',
+        ids: sessionList.join(',')
+      })
+        .then(data => {
+          this.$message.success('删除成功')
+          this.getApplicationList()
+        })
+    },
+    closeSubAdd () {
+      this.getApplicationList()
+    },
+    selectionChange (v) {
+      this.selectionList = v
+    },
+    rightSelectionChange (v) {
+      this.rightSelectionList = v
+    },
+    loadTreeData (data) {
+      if (!data) return
+      let { roleId, role } = this.$route.params
+      if (!roleId) {
+        const { roles = {} } = this.user
+        const currentRole = Object.entries(roles).find(([key, item]) => item.CODE === role) || []
+        roleId = currentRole[0]
+      }
+
+      const serviceId = data.SERVICE
+      const treeData = this.treeDataList[serviceId]
+      const moduleId = data['SERVICE|MODULE']
+      this.popoverVisble[serviceId] = true
+      if (!treeData && moduleId) {
+        // 获取应用菜单
+        this.$http.get({
+          action: 'getServiceMenu',
+          entityId: 'FM_MODULE',
+          roleId,
+          serviceId: serviceId
+        })
+          .then(data => {
+            this.treeDataList[serviceId] = data
+          })
+        // 获取当前角色应用菜单
+        this.getCheckedList(serviceId, moduleId)
+      }
+    },
+    getCheckedList (serviceId, moduleId) {
+      this.$http.list({
+        action: 'getModuleIds',
+        entityId: 'FM_ROLE_MODULE',
+        roleId: this.$query.id,
+        moduleId
+      })
+        .then(data => {
+          this.checkTreeIdList[serviceId] = data.moduleIds
+        })
+    },
+    treeDataCheckChange (row, data, checked) {
+      const checkTreeIds = this.checkTreeIdList[row.serviceId] || []
+      if (checked) {
+        checkTreeIds.push(data.Id)
+        this.checkTreeIdList[row.serviceId] = checkTreeIds
+      } else {
+        const index = checkTreeIds.findIndex(id => id === data.ID)
+        if (index !== -1) {
+          checkTreeIds.splice(index, 1)
+          this.checkTreeIdList[row.serviceId] = checkTreeIds
+        }
+      }
+    },
+    savecheckedTreeIds (serviceId, moduleId) {
+      const tree = this.$refs[`tree-${serviceId}`]
+      const checkedKeys = tree.getCheckedKeys()
+      this.$http.save({
+        action: 'saveRoleModule',
+        entityId: 'FM_ROLE_MODULE',
+        roleId: this.$query.id,
+        moduleId,
+        menuIds: checkedKeys
+      })
+        .then(data => {
+          this.$message.success('保存成功')
+          this.popoverVisble[serviceId] = false
+          this.checkTreeIdList[serviceId] = checkedKeys
+          this.getApplicationList()
+        })
+    },
+    showRight (serviceId) {
+      this.rightVisble = serviceId
+      this.getCheckedRightList(serviceId)
+      this.getAllRightList(serviceId)
+    },
+    seachEntity () {
+      this.getAllRightList(this.rightVisble)
+    },
+    getAllRightList (serviceId) {
+      this.$http.$request({
+        action: 'getRoleOperateInfos',
+        entityId: 'FM_ROLE_OPERATE',
+        roleId: this.$query.id,
+        name: this.searchKey,
+        serviceId
+      })
+        .then(data => {
+          this.allRightList = data.eiList
+        })
+    },
+    getCheckedRightList (serviceId) {
+      if (this.checkedRightMap[serviceId]) return
+      const params = {
+        action: 'getRoleOperates',
+        entityId: 'FM_ROLE_OPERATE',
+        roleId: this.$query.id,
+        serviceId
+      }
+      this.$http.$request(params)
+        .then(data => {
+          this.checkedRightMap[serviceId] = data.roiList
+        })
+    },
+    removeCheckedRightList () {
+      const sessionList = this.rightSelectionList.map(item => item.id)
+      this.$http.removeMulti({
+        entityId: 'FM_ROLE_OPERATE',
+        ids: sessionList.join(',')
+      })
+        .then(data => {
+          this.$message.success('删除成功')
+          this.checkedRightMap[this.rightVisble] = null
+          this.getCheckedRightList(this.rightVisble)
+          this.getAllRightList(this.rightVisble)
+        })
+    },
+    rightSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        const checkedRightList = this.checkedRightMap[this.rightVisble]
+        if (checkedRightList) {
+          // 获取当前对象重复数量
+          const index = checkedRightList.findIndex(item => item.entityName === row.entityName)
+          const repetList = checkedRightList.filter(item => item.entityName === row.entityName)
+          if (repetList.length > 1) {
+            if (index === rowIndex) {
+              return {
+                rowspan: repetList.length,
+                colspan: 1
+              }
+            } else {
+              return {
+                rowspan: 0,
+                colspan: 0
+              }
+            }
+          }
+        }
+      }
+    },
+    isRowChecked (row, index) {
+      return row.operateInfos.every(item => item.checked)
+    },
+    changeRowChecked (row, v) {
+      row.operateInfos.forEach(item => {
+        item.checked = v
+      })
+    },
+    saveRoleRight () {
+      const operates = this.allRightList.reduce((operates, item) => operates.concat(item.operateInfos.filter(oItem => oItem.checked)), [])
+      const operateIds = operates.map(item => item.operateId).join(',')
+      this.$http.$request({
+        action: 'saveRoleOperate',
+        entityId: 'FM_ROLE_OPERATE',
+        roleId: this.$query.id,
+        serviceId: this.rightVisble,
+        operateIds
+      })
+        .then(data => {
+          this.$message.success('保存成功')
+          this.checkedRightMap[this.rightVisble] = null
+          this.getCheckedRightList(this.rightVisble)
+          this.addRightDialog = false
+        })
+    },
+    editDataScope (row) {
+      this.dataScopeEntityId = null
+      if (row.dataScope) {
+        this.dataScope = JSON.parse(row.dataScope).data
+      }
+      this.dataScopeEntityId = row.entityId
+      this.dataScopeOperateRightId = row.id
+    },
+    saveDataScope (condition) {
+      const scope = []
+      let scopeText = ''
+      condition.forEach((item, index) => {
+        scope.push({
+          attriName: item.attriName,
+          relation: item.operatore,
+          value: item.value,
+          dateType: item.dateType,
+          link: item.operatoreLogical
+        })
+        scopeText += item.attriLabel + ' ' + item.operatoreC + ' ' + (item.label || item.dateType || item.value) + ' ' +
+         (index < condition.length - 1 ? (item.operatoreLogical === 'and' ? '并且' : item.operatoreLogical === 'or' ? '或者' : '') : '')
+      })
+      // 提交
+      const params = {
+        action: 'setDataScope',
+        entityId: 'FM_ROLE_OPERATE',
+        id: this.dataScopeOperateRightId,
+        targetMetaId: this.dataScopeEntityId
+      }
+      if (condition.length > 0) {
+        params.searchMode = 'advance'
+        this.dataScope.forEach((item, i) => {
+          params[`search.leftBrace${i + 1}`] = item.leftBrace || ''
+          params[`search.field${i + 1}`] = ''
+          params[`search.value${i + 1}`] = item.value
+          if (item.dateType) params[`search.dateType${i + 1}`] = item.dateType
+          params[`search.attriName${i + 1}`] = (item.field || item.attriName).replace('#', '').replace(/\|/g, '.')
+          params[`search.relation${i + 1}`] = item.relation
+          params[`search.realRelation${i + 1}`] = item.relation
+          params[`search.realValue${i + 1}`] = item.realValue || item.value
+          params[`search.rightBrace${i + 1}`] = item.rightBrace || ''
+          params[`search.metaId${i + 1}`] = this.$metaId
+        })
+        params.size = this.dataScope.length
+        params.optionText = scopeText
+      }
+      this.$http.$request(params)
+        .then(data => {
+          const checkedRightList = this.checkedRightMap[this.rightVisble]
+          if (checkedRightList) {
+            const index = checkedRightList.findIndex(item => item.id === this.dataScopeOperateRightId)
+            if (index !== -1) {
+              const item = { ...checkedRightList[index], dataScope: JSON.stringify({ data: scope, optionText: scopeText }) }
+              checkedRightList.splice(index, 1, item)
+            }
+          }
+          this.dataScopeEntityId = null
+          this.$message.success('保存成功')
+        })
+        .catch(err => {
+          this.$message.error(err.message || '保存失败')
+        })
+    },
+    getEntityFieldList (entityId) {
+      const fieldList = this.fieldMap[entityId]
+      if (fieldList) return
+      this.$http.entityFieldTreeStore({
+        metaId: entityId,
+        allSub: false,
+        node: 'root'
+      })
+        .then(data => {
+          // eslint-disable-next-line no-eval
+          const jsonData = eval('(' + data + ')')
+          if (jsonData) {
+            this.fieldMap[entityId] = jsonData[0].children
+          }
+        })
+    },
+    editFieldScope (row) {
+      // 获取当前对象字段
+      this.getEntityFieldList(row.entityId)
+      this.fieldScope = {
+        type: '1',
+        fields: []
+      }
+      this.fieldScopeOperateRightId = row.id
+      if (row.fieldScope) {
+        const scope = JSON.parse(row.fieldScope)
+        const { fields = '', type = '1' } = scope
+        this.fieldScope = {
+          type,
+          fields: fields.split(',')
+        }
+      }
+    },
+    checkFieldAllChange (entityId) {
+      const fieldList = this.fieldMap[entityId] || []
+      if (this.checkFieldAll) {
+        this.fieldScope.fields = fieldList.map(item => item.code)
+      } else {
+        this.fieldScope.fields = []
+      }
+    },
+    saveFieldScope (entityId) {
+      const params = {
+        action: 'setFieldScope',
+        entityId: 'FM_ROLE_OPERATE',
+        id: this.fieldScopeOperateRightId
+      }
+      const { type = '1', fields } = this.fieldScope
+      const fieldList = this.fieldMap[entityId] || []
+      const fieldNames = fields.map(item => {
+        const fieldItem = fieldList.find(fieldItem => fieldItem.code === item) || {}
+        return fieldItem.text
+      })
+      const fieldStr = fields.join(',')
+      const fieldNameStr = (type === '1' ? '包含：' : '不包含：') + fieldNames.join(',')
+      // 更新当前设置对象
+      this.$http.$request({
+        ...params,
+        type,
+        fields: fieldStr,
+        fieldNames: fieldNameStr
+      })
+        .then(data => {
+          this.$message.success('保存成功')
+          const checkedRightList = this.checkedRightMap[this.rightVisble]
+          if (checkedRightList) {
+            const index = checkedRightList.findIndex(item => item.id === this.fieldScopeOperateRightId)
+            if (index !== -1) {
+              const item = { ...checkedRightList[index], fieldScope: JSON.stringify({ fields: fieldStr, fieldNames: fieldNameStr, type }) }
+              checkedRightList.splice(index, 1, item)
+            }
+          }
+          this.fieldScopeOperateRightId = null
+          this.fieldScope = {
+            fields: [],
+            type: '1'
+          }
+        })
+    },
+    closeFieldScope () {
+      this.fieldScopeOperateRightId = null
+      this.popoverVisble = {}
+    }
+  },
+  created () {
+    window.addEventListener('click', this.closeFieldScope)
+    this.getApplicationList()
+  },
+  unmounted () {
+    window.removeEventListener('click', this.closeFieldScope)
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.applicaiton-container {
+  height: 100%;
+  box-sizing: border-box;
+  background: var(--epx-bg-card);
+  overflow: hidden;
+  padding: 0 16px;
+  position: relative;
+}
+.right-container {
+  width: 100%;
+  min-height: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--epx-bg-card);
+  z-index: 1;
+  overflow: auto;
+}
+.right-header {
+  padding: 10px;
+  border-bottom: 1px solid var(--epx-border);
+
+    :deep(.el-page-header__left::after) {
+      display: none;
+    }
+
+}
+.button-group {
+  padding: 16px 0;
+  border-bottom: dashed 1px var(--epx-border);
+}
+.tree-card {
+  max-height: 400px;
+  overflow: auto;
+
+    :deep(.el-card__header) {
+      padding: 12px;
+    }
+    :deep(.el-card__body) {
+      padding: 0;
+    }
+
+}
+.card-body {
+  display: flex;
+  padding: 12px 0;
+  justify-content: center;
+  border-top: 1px solid var(--epx-border);
+}
+.menu-tree {
+  padding: 12px 8px;
+}
+.count {
+  i {
+    margin-left: 8px;
+  }
+  cursor: pointer;
+  &.active, &:hover {
+    @include font_color_primary;
+  }
+}
+.fade-enter-active, .fade-leave-active {
+  transition: transform .3s;
+}
+
+.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+  transform: translateX(100%);
+}
+.add-scope {
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary
+  }
+}
+.edit-scope {
+  cursor: pointer;
+  i {
+    margin-left: 8px;
+    @include font_color_primary
+  }
+}
+.filter-button {
+  text-align: center;
+}
+.field-scope-setting {
+  padding: 16px;
+}
+.field-radio-group {
+  display: block;
+  margin-bottom: 16px;
+}
+.field-checkbox-group {
+  display: inline;
+}
+.check-field-all {
+  margin-right: 30px;
+}
+.field-scope-operate {
+  margin-top: 16px;
+}
+.right-dialog {
+
+    :deep(.el-dialog__body) {
+      // max-height: 400px;
+      height: 600px;
+      overflow: auto;
+      padding: 10px 20px 24px
+    }
+
+}
+</style>
+<style lang="scss">
+.role-app-menu-popper.el-popper {
+  padding: 0;
+}
+.role-app-field-scope-popover.el-popper {
+  padding: 0;
+  .el-popover__title {
+    margin: 0;
+    padding: 16px;
+    border-bottom: 1px solid var(--epx-border);
+  }
+}
+
+</style>