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

package/src/base/RoleAccredit.vue

@@ -0,0 +1,961 @@
+<template>
+  <div class="container">
+    <div class="left">
+      <div class="menu-keyword">
+          <el-input size="middle" v-model="searchRole" prefix-icon="el-icon-search" :placeholder="$t('keyword')"></el-input>
+        </div>
+      <ul class="menu-list">
+        <li :class="['menu-item', service.ID===activeService.ID && 'menu-item__active']" v-for="service in searchMethod" :key="service.ID" @click="switchService(service)">
+          {{service['SERVICE|NAME']}}
+        </li>
+      </ul>
+      <div class="add-client">
+        <el-button type="primary" link @click="addService">+ {{$t('Add application')}}</el-button>
+      </div>
+    </div>
+    <div class="right">
+      <div v-if="roleId&&serviceId">
+      <el-card class="box-card">
+        <template v-slot:header><div class="clearfix">
+            <span>{{$t('basic information')}}</span>
+        </div></template>
+        <div>
+            <span style="marginRight:190px">{{$t('Application Name')}}：{{activeService['SERVICE|NAME']}}</span>
+            {{$t('Grant role')}}：{{baseInfo.NAME}}
+        </div>
+      </el-card>
+      <el-card class="box-card">
+          <template v-slot:header><div class="clearfix">
+              <span>{{$t('menu function')}}</span>
+          </div></template>
+          <div class="role-menu-container">
+              <div class="pc-menu">
+                  <div class="menu-header">
+                      <div>
+                          <i class="el-icon-monitor"></i>
+                          {{$t('PC menu')}}
+                      </div>
+                      <el-popover
+                          placement="bottom-end"
+                          width="200"
+                          trigger="manual"
+                          v-model:visible="pcVisible">
+                          <el-card class="tree-card" :header="$t('menu settings')" 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" @click="savePcMenu">{{$t('save')}}</el-button>
+                                  <el-button size="default" @click="pcVisible=false">{{$t('cancel')}}</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>
+                          {{$t('mobile menu')}}
+                      </div>
+                      <el-popover
+                          placement="bottom-end"
+                          width="200"
+                          trigger="manual"
+                          v-model:visible="mobileVisible">
+                          <el-card class="tree-card" :header="$t('menu settings')" 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" @click="saveMobileMenu">{{$t('save')}}</el-button>
+                                  <el-button size="default" @click="mobileVisible=false">{{$t('cancel')}}</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">{{$t('add permission')}}</el-button>
+                      <el-button size="default" @click="removeCheckedRightList">{{$t('remove permissions')}}</el-button>
+                  </div>
+                  <div>
+                  <el-input size="default" :placeholder="$t('please enter an object name')" 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="$t('object name')"
+                  min-width="160">
+                  </el-table-column>
+                  <el-table-column
+                  prop="operateName"
+                  :label="$t('object operation')"
+                  min-width="160">
+                  </el-table-column>
+                  <el-table-column
+                  prop="dataScope"
+                  :label="$t('scope of data')"
+                  min-width="160">
+                      <template v-slot="{row}">
+                      <span class="add-scope" v-if="!row.dataScope" @click="editDataScope(row)">+ {{$t('select range')}}</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="$t('range of fields')"
+                  min-width="160">
+                      <template v-slot="{row}">
+                      <el-popover
+                          popper-class="role-app-field-scope-popover"
+                          :value="fieldScopeOperateRightId===row.id"
+                          ref="popover"
+                          :title="$t('setting field ranges')"
+                          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">{{$t('include')}}</el-radio-button>
+                              <el-radio-button label="0" value="0">{{$t('exclusive')}}</el-radio-button>
+                          </el-radio-group>
+                          <el-checkbox class="check-field-all" :indeterminate="isCheckFieldIndeterminate(row.entityId, fieldScope)" v-model="checkFieldAll" @change="checkFieldAllChange(row.entityId)">{{$t('check all')}}</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)">{{$t('determine')}}</el-button>
+                              <el-button size="default" @click="fieldScopeOperateRightId=null">{{$t('cancel')}}</el-button>
+                          </div>
+                          </div>
+                          <template v-slot:reference>
+                          <span class="add-scope" @click.stop="editFieldScope(row)" v-if="!row.fieldScope" >+ {{$t('select range')}}</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>
+      </div>
+    </div>
+     <!-- 每次重新加载，防止对象错乱 -->
+      <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">{{$t('save')}}</el-button></template>
+      </epx-scope-drawer>
+    <el-dialog class="right-dialog" :model-value="addRightDialog" :title="$t('adding operation rights')" @close="addRightDialog = false">
+      <div class="dialog-right-input">
+        <el-input :placeholder="$t('please enter an object name')" 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="$t('object name')" prop="entityName"></el-table-column>
+          <el-table-column
+            :label="$t('check all')"
+          >
+            <template v-slot="{row}">
+              <el-checkbox :value="isRowChecked(row)" @change="v=>changeRowChecked(row, v)"></el-checkbox>
+            </template>
+          </el-table-column>
+          <el-table-column :label="$t('object operation')" 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">{{$t('determine')}}</el-button>
+        <el-button @click="addRightDialog=false">{{$t('cancel')}}</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-role-accredit',
+  mixins: [component],
+  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'
+      },
+      service: [],
+      activeService: {},
+      searchRole: ''
+    }
+  },
+  computed: {
+    searchMethod () {
+      return this.service.filter(item => {
+        return item['SERVICE|NAME'].match(this.searchRole)
+      })
+    },
+    getDataScopeText () {
+      return dataScope => {
+        if (dataScope) {
+          const scope = JSON.parse(dataScope)
+          return scope.scopeText || this.$t('not')
+        }
+      }
+    },
+    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: {
+    addService () {
+      const query = {
+        title: this.$t('application of new'),
+        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.getService
+      }
+      this.$createPage(query)
+    },
+    switchService (service) {
+      this.activeService = service
+      this.roleId = service.ROLE
+      this.serviceId = service.SERVICE
+      this.getBaseInfo()
+      this.getCheckedRightList()
+      this.getAllRightList()
+      // 获取当前角色应用菜单
+      this.getRolePcMenu()
+      this.getRoleMoveMenu()
+      // 获取应用菜单
+      this.getPcRoleList()
+      this.getMoveRoleList()
+    },
+    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.$http.$request(params)
+        .then(data => {
+          this.getRolePcMenu()
+          this.$message.success(this.$t('save successfully'))
+          this.pcVisible = false
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('deal with failure'))
+          this.pcVisible = 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.$http.$request(params)
+        .then(data => {
+          this.getRoleMoveMenu()
+          this.$message.success(this.$t('save successfully'))
+          this.mobileVisible = false
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('deal with failure'))
+          this.mobileVisible = false
+        })
+    },
+    getBaseInfo () {
+      this.$http.get({
+        entityId: 'FM_ROLE',
+        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.$t('deleted successfully'))
+          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, 'mode#': modelLabel = this.$t('yes'), '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(this.$t('save successfully'))
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$t('fail to save'))
+        })
+    },
+    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' ? this.$t('include') + '：' : this.$t('exclusive') + '：') + fieldNames.join(',')
+      // 更新当前设置对象
+      this.$http.$request({
+        ...params,
+        type,
+        fields: fieldStr,
+        fieldNames: fieldNameStr
+      })
+        .then(data => {
+          this.$message.success(this.$t('save successfully'))
+          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.$t('save successfully'))
+          this.checkedRightMap[this.serviceId] = null
+          this.getCheckedRightList(this.serviceId)
+          this.getAllRightList()
+          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 () {
+      this.$http.get({
+        action: 'getServiceMenu',
+        entityId: 'FM_MODULE',
+        serviceId: this.serviceId,
+        mode: 'move'
+      })
+        .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)
+        })
+    },
+    getService () {
+      this.$http.list({
+        action: 'getRoleService',
+        entityId: 'FM_ROLE_SERVICE',
+        roleId: this.roleId
+      })
+        .then(data => {
+          this.service = data.entitys
+          this.activeService = this.service.find(item => {
+            return item.SERVICE === this.$query.serviceId
+          })
+        })
+    }
+  },
+  created () {
+    window.addEventListener('click', this.closeFieldScope)
+    this.roleId = this.$query.roleId
+    this.serviceId = this.$query.serviceId
+    this.getService()
+    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>
+.container{
+  display: flex;
+  height: 100%;
+}
+.left{
+  box-sizing: border-box;
+  width: 280px;
+  height: 100%;
+  overflow: auto;
+  border-right: solid 1px #ededed;
+}
+.right{
+  background-color: var(--epx-bg-card);
+  height: 100%;
+  width: calc(100% - 280px);
+  overflow: auto;
+}
+.menu-keyword {
+  padding:16px;
+}
+.add-client {
+  line-height: 45px;
+  // text-align: center;
+  padding-left: 40px;
+  min-height: 20px;
+}
+.menu-item {
+  line-height: 45px;
+  color: var(--epx-text);
+  padding-left: 40px;
+  cursor: pointer;
+  &:hover {
+    @include bg_color_primary(.1);
+    @include font_color_primary;
+    // .menu-item-operate {
+    //   display: block;
+    // }
+  }
+  &.menu-item__active {
+    @include bg_color_primary(.1);
+    @include font_color_primary;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      left: 0;
+      width: 4px;
+      height: 100%;
+      @include bg_color_primary
+    }
+  }
+}
+// .menu-item-operate {
+//   display: none;
+//   float: right;
+//   margin-right: 12px;
+//   font-size: 18px;
+// }
+.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>