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

package/src/components/RoleApplicationSet.vue

@@ -0,0 +1,845 @@
+<template>
+  <div class="container">
+    <el-card class="box-card">
+        <template v-slot:header><div class="clearfix">
+            <span>基本信息</span>
+        </div></template>
+        <div>
+            <span style="marginRight:190px">应用名称：{{baseInfo['MENU#']}}</span>
+            授予角色：{{baseInfo.NAME}}
+        </div>
+    </el-card>
+    <el-card class="box-card">
+        <template v-slot:header><div class="clearfix">
+            <span>功能菜单</span>
+        </div></template>
+        <div class="role-menu-container">
+            <div class="pc-menu">
+                <div class="menu-header">
+                    <div>
+                        <i class="el-icon-monitor"></i>
+                        PC菜单
+                    </div>
+                    <el-popover
+                        placement="bottom-end"
+                        width="240"
+                        trigger="manual"
+                        v-model:visible="pcVisible">
+                        <el-card class="tree-card" header="菜单设置" shadow="never" @click.stop>
+                            <div class="popover-menu-con">
+                                <el-tree
+                                ref="tree-pc"
+                                class="menu-tree"
+                                :props="props"
+                                :data="pcMemu"
+                                show-checkbox
+                                node-key="ID"
+                                :default-checked-keys="pcCheckMemu"
+                                >
+                                </el-tree>
+                            </div>
+                            <div class="card-body">
+                                <el-button type="primary" size="default" :loading="httpLoading.savePcMenu" @click="savePcMenu">保存</el-button>
+                                <el-button size="default" @click="pcVisible=false">取消</el-button>
+                            </div>
+                        </el-card>
+                        <template v-slot:reference><i class="el-icon-setting" @click.stop="pcVisible = !pcVisible"></i></template>
+                    </el-popover>
+                </div>
+                <div class="menu-content">
+                    <el-tree
+                        class="menu-tree"
+                        :props="props"
+                        default-expand-all
+                        :data="pcRoleMemu"
+                        node-key="ID"
+                        >
+                        <template v-slot="{ node, data }"><span class="tree-node">
+                            <!-- 图标 -->
+                            <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                            <!-- 文字 -->
+                            <span>{{ node.label }}</span>
+                        </span></template>
+                    </el-tree>
+                </div>
+            </div>
+            <div class="mobile-menu">
+                <div class="menu-header">
+                    <div>
+                        <i class="el-icon-mobile"></i>
+                        移动端菜单
+                    </div>
+                    <el-popover
+                        placement="bottom-end"
+                        width="240"
+                        trigger="manual"
+                        v-model:visible="mobileVisible">
+                        <el-card class="tree-card" header="菜单设置" shadow="never" @click.stop>
+                            <div class="popover-menu-con">
+                                <el-tree
+                                ref="tree-mobile"
+                                class="menu-tree"
+                                :props="props"
+                                :data="mobileMenu"
+                                show-checkbox
+                                node-key="ID"
+                                :default-checked-keys="mobileCheckMenu"
+                                >
+                                </el-tree>
+                            </div>
+                            <div class="card-body">
+                                <el-button type="primary" size="default" :loading="httpLoading.saveMobileMenu" @click="saveMobileMenu">保存</el-button>
+                                <el-button size="default" @click="mobileVisible=false">取消</el-button>
+                            </div>
+                        </el-card>
+                        <template v-slot:reference><i class="el-icon-setting" @click.stop="mobileVisible = !mobileVisible"></i></template>
+                    </el-popover>
+                </div>
+                <div class="menu-content">
+                    <el-tree
+                        class="menu-tree"
+                        :props="props"
+                        default-expand-all
+                        :data="mobileRoleMenu"
+                        node-key="ID"
+                        >
+                        <template v-slot="{ node, data }"><span class="tree-node">
+                            <!-- 图标 -->
+                            <i :class="data.children.length>0? 'el-icon-folder-opened' : 'el-icon-document'"></i>
+                            <!-- 文字 -->
+                            <span>{{ node.label }}</span>
+                        </span></template>
+                    </el-tree>
+                </div>
+            </div>
+        </div>
+    </el-card>
+    <el-card class="box-card">
+        <template v-slot:header><div class="clearfix">
+            <div class="search-inline">
+                <div class="button-group">
+                    <el-button type="primary" size="default" @click="addRightDialog=true">添加权限</el-button>
+                    <el-button size="default" @click="removeCheckedRightList">删除权限</el-button>
+                </div>
+                <div>
+                <el-input size="default" placeholder="请输入对象名称" v-model="seachEntityName" @change="seachEntityNameMethod" class="input-with-select" clearable suffix-icon="el-icon-search"></el-input>
+                </div>
+            </div>
+        </div></template>
+        <div>
+            <!-- :data="searchMethod(checkedRightMap[serviceId])" -->
+            <el-table
+            :data="checkedRightMap[serviceId]"
+            @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>
+    </el-card>
+     <!-- 每次重新加载，防止对象错乱 -->
+      <epx-scope-drawer ref="scopeDrawer" v-model:visible="filterDrawer" :metaId="dataScopeEntityId" :params="scopeParams">
+        <template v-slot:button><el-button class="scope-save-btn" type="primary" @click="saveScopeParams">保存</el-button></template>
+      </epx-scope-drawer>
+    <el-dialog class="right-dialog" :model-value="addRightDialog" title="添加操作权限" @close="addRightDialog = false">
+      <div class="dialog-right-input">
+        <el-input placeholder="请输入对象名称" v-model="searchKey" clearable></el-input>
+        <!-- <el-input placeholder="请输入对象名称" v-model="searchKey" @change="seachEntity" clearable></el-input> -->
+      </div>
+        <!-- <el-table :data="allRightList" style="width: 100%" height="480"> -->
+        <el-table :data="seachEntity" style="width: 100%" height="480">
+          <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>
+export default {
+  name: 'epx-role-application-set',
+  data () {
+    return {
+      baseInfo: {},
+      serviceId: '',
+      roleId: '',
+      checkedRightMap: {},
+      rightSelectionList: [],
+      dataScope: {},
+      dataScopeOperateRightId: null,
+      dataScopeEntityId: null,
+      fieldScopeOperateRightId: null,
+      checkFieldAll: false,
+      fieldScope: {},
+      fieldMap: {},
+      allRightList: [],
+      addRightDialog: false,
+      searchKey: '',
+      seachEntityName: '',
+      filterDrawer: false,
+      columnIndex: null,
+      rowSpanInfo: {},
+      scopeParams: [],
+      pcMemu: [],
+      mobileMenu: [],
+      pcRoleMemu: [],
+      mobileRoleMenu: [],
+      pcCheckMemu: [],
+      mobileCheckMenu: [],
+      pcVisible: false,
+      mobileVisible: false,
+      props: {
+        label: 'NAME',
+        children: 'children'
+        // isLeaf: 'leaf'
+      }
+    }
+  },
+  computed: {
+    getDataScopeText () {
+      return dataScope => {
+        if (dataScope) {
+          const scope = JSON.parse(dataScope)
+          return scope.scopeText || '无'
+        }
+      }
+    },
+    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
+      }
+    },
+    seachEntity () {
+      return this.allRightList.filter(item => {
+        return item.entityName.match(this.searchKey)
+      })
+    }
+  },
+  methods: {
+    savePcMenu () {
+      const modules = this.$refs['tree-pc'].getCheckedKeys()
+      const parent = this.$refs['tree-pc'].getHalfCheckedKeys()
+      const arr = [...modules, ...parent]
+      const str = arr.join(',')
+      const params = {
+        action: 'saveRoleModule',
+        entityId: 'FM_ROLE_MODULE',
+        roleId: this.roleId,
+        serviceId: this.serviceId,
+        mode: 'pc',
+        menuIds: str
+      }
+      this.httpLoading.savePcMenu = true
+      this.$http.$request(params)
+        .then(data => {
+          this.getRolePcMenu()
+          this.$message.success('保存成功')
+          this.pcVisible = false
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+          this.pcVisible = false
+        })
+        .finally(() => {
+          this.httpLoading.savePcMenu = false
+        })
+    },
+    saveMobileMenu () {
+      const modules = this.$refs['tree-mobile'].getCheckedKeys()
+      const parent = this.$refs['tree-mobile'].getHalfCheckedKeys()
+      const arr = [...modules, ...parent]
+      const str = arr.join(',')
+      const params = {
+        action: 'saveRoleModule',
+        entityId: 'FM_ROLE_MODULE',
+        roleId: this.roleId,
+        serviceId: this.serviceId,
+        mode: 'move',
+        menuIds: str
+      }
+      this.httpLoading.saveMobileMenu = true
+      this.$http.$request(params)
+        .then(data => {
+          this.getRoleMoveMenu()
+          this.$message.success('保存成功')
+          this.mobileVisible = false
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+          this.mobileVisible = false
+        })
+        .finally(() => {
+          this.httpLoading.saveMobileMenu = false
+        })
+    },
+    getBaseInfo () {
+      this.$http.get({
+        entityId: this.$metaId,
+        id: this.roleId
+      })
+        .then(data => {
+          this.baseInfo = data.data
+        })
+    },
+    seachEntityNameMethod () {
+      this.checkedRightMap[this.serviceId] = null
+      this.getCheckedRightList()
+    },
+    // seachEntity () {
+    //   this.getAllRightList()
+    // },
+    getAllRightList () {
+      this.$http.$request({
+        action: 'getRoleOperateInfos',
+        entityId: 'FM_ROLE_OPERATE',
+        roleId: this.roleId,
+        // name: this.searchKey,
+        serviceId: this.serviceId
+      })
+        .then(data => {
+          this.allRightList = data.eiList
+        })
+    },
+    getCheckedRightList () {
+      const serviceId = this.serviceId
+      if (this.checkedRightMap[serviceId]) return
+      const params = {
+        action: 'getRoleOperates',
+        entityId: 'FM_ROLE_OPERATE',
+        roleId: this.roleId,
+        name: this.seachEntityName,
+        serviceId
+      }
+      this.$http.$request(params)
+        .then(data => {
+          this.checkedRightMap[serviceId] = data.roiList
+        })
+    },
+    isRowChecked (row, index) {
+      return row.operateInfos.every(item => item.checked)
+    },
+    changeRowChecked (row, v) {
+      row.operateInfos.forEach(item => {
+        item.checked = v
+      })
+    },
+    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.serviceId] = null
+          this.getCheckedRightList(this.serviceId)
+          this.getAllRightList(this.serviceId)
+        })
+    },
+    rightSelectionChange (v) {
+      this.rightSelectionList = v
+    },
+    rightSpanMethod ({ row, column, rowIndex, columnIndex }) {
+      if (columnIndex === 1) {
+        const checkedRightList = this.checkedRightMap[this.serviceId]
+        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
+              }
+            }
+          }
+        }
+      }
+    },
+    editDataScope (row) {
+      this.dataScopeEntityId = null
+      //   if (row.dataScope) {
+      //     this.dataScope = JSON.parse(row.dataScope).data
+      //   }
+      const dataScope = row.dataScope ? JSON.parse(row.dataScope) : {}
+      this.scopeParams = dataScope.scopeParams ? dataScope.scopeParams : []
+      this.dataScopeEntityId = row.entityId
+      this.dataScopeOperateRightId = row.id
+      this.filterDrawer = true
+    },
+    // 保存数据范围
+    saveScopeParams () {
+      const scopeParams = this.$refs.scopeDrawer.scopeParams || []
+      let scopeText = ''
+      // 防止数据获取不到
+      const _scopeParmas = scopeParams.map(item => {
+        const { lb = '', field, mode, values, rb = '', link, label, 'model#': modelLabel = '是', 'values#': valueLabel, 'link#': linkLabel = '' } = item
+        const text = lb + label + modelLabel + (valueLabel || values) + rb + linkLabel
+        scopeText += text
+        return { lb, field, mode, values, rb, link }
+      })
+      const params = {
+        action: 'setDataScope',
+        entityId: 'FM_ROLE_OPERATE',
+        roleOperateId: this.dataScopeOperateRightId
+      }
+      const scopeInfo = JSON.stringify({
+        scopeParams: _scopeParmas,
+        scopeText
+      })
+      this.$http.save({
+        ...params,
+        scopeInfo: scopeInfo
+      })
+        .then(data => {
+          const checkedRightList = this.checkedRightMap[this.serviceId]
+          if (checkedRightList) {
+            const index = checkedRightList.findIndex(item => item.id === this.dataScopeOperateRightId)
+            if (index !== -1) {
+              const item = { ...checkedRightList[index], dataScope: scopeInfo }
+              checkedRightList.splice(index, 1, item)
+            }
+          }
+          this.filterDrawer = false
+          this.$message.success('保存成功')
+        })
+        .catch(err => {
+          this.$message.error(err.message || '保存失败')
+        })
+    },
+    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.serviceId]
+          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'
+          }
+        })
+    },
+    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 = []
+      }
+    },
+    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
+          }
+        })
+    },
+    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.$post({
+        action: 'saveRoleOperate',
+        entityId: 'FM_ROLE_OPERATE',
+        roleId: this.roleId,
+        serviceId: this.serviceId,
+        operateIds
+      })
+        .then(data => {
+          this.$message.success('保存成功')
+          this.checkedRightMap[this.serviceId] = null
+          this.getCheckedRightList(this.serviceId)
+          this.searchKey = ''
+          this.addRightDialog = false
+        })
+    },
+    closeFieldScope () {
+      this.fieldScopeOperateRightId = null
+      this.pcVisible = false
+      this.mobileVisible = false
+    },
+    getPcRoleList () {
+      this.$http.get({
+        action: 'getServiceMenu',
+        entityId: 'FM_MODULE',
+        serviceId: this.serviceId,
+        mode: 'pc'
+      })
+        .then(data => {
+          this.pcMemu = data
+        })
+    },
+    getMoveRoleList () {
+      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]
+      }
+
+      this.$http.get({
+        action: 'getServiceMenu',
+        entityId: 'FM_MODULE',
+        serviceId: this.serviceId,
+        mode: 'move',
+        roleId
+      })
+        .then(data => {
+          this.mobileMenu = data
+        })
+    },
+    getRolePcMenu () {
+      this.$http.get({
+        action: 'getRoleMenu',
+        entityId: 'FM_ROLE_MODULE',
+        serviceId: this.serviceId,
+        roleId: this.roleId,
+        mode: 'pc'
+      })
+        .then(data => {
+          this.pcRoleMemu = data
+          this.getRoleCheck(data)
+          this.$refs['tree-pc'].setCheckedKeys(this.pcCheckMemu)
+        })
+    },
+    getRoleCheck (arr) {
+      arr.forEach(item => {
+        if (item.children.length > 0) {
+          this.getRoleCheck(item.children)
+        // } else if (item.checked) {
+        } else {
+          this.pcCheckMemu.push(item.ID)
+        }
+      })
+    },
+    getRoleMCheck (arr) {
+      arr.forEach(item => {
+        if (item.children.length > 0) {
+          this.getRoleMCheck(item.children)
+        // } else if (item.checked) {
+        } else {
+          this.mobileCheckMenu.push(item.ID)
+        }
+      })
+    },
+    getRoleMoveMenu () {
+      this.$http.get({
+        action: 'getRoleMenu',
+        entityId: 'FM_ROLE_MODULE',
+        serviceId: this.serviceId,
+        roleId: this.roleId,
+        mode: 'move'
+      })
+        .then(data => {
+          this.mobileRoleMenu = data
+          this.getRoleMCheck(data)
+          this.$refs['tree-mobile'].setCheckedKeys(this.mobileCheckMenu)
+        })
+    }
+  },
+  created () {
+    window.addEventListener('click', this.closeFieldScope)
+    this.roleId = this.$query.roleId
+    this.serviceId = this.$query.serviceId
+    this.getBaseInfo()
+    this.getCheckedRightList()
+    this.getAllRightList()
+    // 获取当前角色应用菜单
+    this.getRolePcMenu()
+    this.getRoleMoveMenu()
+    // 获取应用菜单
+    this.getPcRoleList()
+    this.getMoveRoleList()
+  },
+  unmounted () {
+    window.removeEventListener('click', this.closeFieldScope)
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box-card{
+    margin-bottom: 16px;
+}
+.role-menu-container{
+    display: flex;
+}
+.pc-menu{
+    width: 594px;
+    border-radius: var(--epx-radius-base);
+    border: solid 1px #eaedf4;
+    margin-right: 46px;
+}
+.mobile-menu{
+    width: 291px;
+    border-radius: var(--epx-radius-base);
+    border: solid 1px #eaedf4;
+}
+.menu-header{
+    background-color: #f4f6f9;
+    height: 50px;
+    box-sizing: border-box;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: solid 1px #eaedf4;
+}
+.menu-content{
+    height: 393px;
+    overflow: auto;
+}
+.popover-menu-con{
+    max-height: 306px;
+    overflow: auto;
+}
+.menu-tree {
+  padding: 12px 8px;
+}
+.tree-node {
+  line-height: 32px;
+}
+.tree-node >i{
+  @include font_color_primary;
+  margin-right: 8px;
+  font-size: var(--epx-font-size-l);
+}
+.dialog-right-input{
+    width:260px;
+    // display: flex;
+    margin-bottom: 9px;
+    // justify-content: right;
+}
+.search-inline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+    :deep(.el-input) {
+      margin-right: 12px;
+    }
+
+}
+.tree-card {
+//   max-height: 400px;
+//   overflow: auto;
+      border: none;
+
+    :deep(.el-card__header) {
+      padding: 12px;
+    }
+    :deep(.el-card__body) {
+      padding: 0;
+    }
+
+}
+.el-icon-setting{
+    cursor: pointer;
+}
+.card-body {
+  display: flex;
+  padding: 12px 0;
+  justify-content: center;
+  border-top: 1px solid var(--epx-border);
+}
+// .button-group {
+//   padding-bottom: 16px;
+//   border-bottom: dashed 1px var(--epx-border);
+// }
+.add-scope {
+  cursor: pointer;
+  &:hover {
+    @include font_color_primary
+  }
+}
+.edit-scope {
+  cursor: pointer;
+  i {
+    margin-left: 8px;
+    @include font_color_primary
+  }
+}
+.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
+    }
+
+}
+.scope-save-btn {
+  display: block;
+  margin: 0 auto;
+  width: 120px;
+  margin-top: 20px;
+}
+</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>