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

package/src/components/authorization/AuthorizationRoleSystem.vue

@@ -0,0 +1,713 @@
+<template>
+  <div class="container">
+    <el-card class="box-card" shadow="never" :body-style="{padding:'10px 24px'}">
+        <template v-slot:header><div class="clearfix">
+            <span class="blue"></span><span>{{$component.title}}</span>
+        </div></template>
+        <div class="authorization-content" v-if="$configs.relationId==='role'">
+          <label class="epx-form-item__label epx-form-item__label--right" for="">授权角色：</label>
+          <ul class="authorization-list">
+            <li class="authorization-item" v-for="item in data" :key="item.id">
+              <span>{{item['ROLE#']}}</span>
+              <div class="authorization-item__modal">
+                <i class="el-icon-setting" @click="setRightScope(item.ROLE)"></i>
+                <span></span>
+                <i class="el-icon-close" @click="deleteAuthorizationRole(item.ID)"></i>
+              </div>
+            </li>
+          </ul>
+          <el-button type="primary" link size="default" @click="addAuthorization">+ 添加角色</el-button>
+        </div>
+          <div class="authorization-content" v-else>
+          <label class="epx-form-item__label epx-form-item__label--right" for="">授权系统：</label>
+          <ul class="authorization-list">
+            <li class="authorization-item" v-for="item in data" :key="item.id">
+              <span>{{item['TARGET_SYSTEM#']}}</span>
+              <i class="el-icon-close" @click="deleteAuthorizationRole(item.ID)"></i>
+            </li>
+          </ul>
+          <el-button type="primary" link size="default" @click="addAuthorization">+ 添加系统</el-button>
+        </div>
+    </el-card>
+    <el-dialog width="720px" append-to-body v-if="$configs.relationId==='role'" v-model="showRightScopeDialog" title="角色权限">
+      <div class="right-scope" v-if="showRightScopeDialog">
+        <div class="right-item">
+          <div class="right-item__header">数据权限</div>
+          <div class="right-item__content">
+            <div>
+              <template v-if="dataScope && dataScope['1']">
+                <!-- 是否相等 -->
+                <template v-if="isSameDataRight">
+                <!-- 获取第一个 -->
+                  {{ getRightText(dataScope['1'])  }}
+                </template>
+                <template v-else>
+                  <!-- 循环 -->
+                  <p v-for="(item, key) in dataScope" :key="item.id" class="right-item__sub"><font class="right-item__title">{{ key==='1'? '新增':key==='2'? '查询' : key==='3'? '删除': '修改' }}：</font> {{getRightText(item)}}</p>
+                </template>
+              </template>
+              <template v-else>/</template>
+            </div>
+            <i class="el-icon-setting" @click="editDataScope"></i>
+          </div>
+        </div>
+        <div class="right-item" >
+          <div class="right-item__header">字段权限</div>
+          <div class="right-item__content">
+            <div>
+              <template v-if="fieldScopes && fieldScopes['1']">
+                <!-- 是否相等 -->
+                <template v-if="isSameFieldRight">
+                <!-- 获取第一个 -->
+                  {{ getRightFieldText(fieldScopes['1'])  }}
+                </template>
+                <template v-else>
+                  <!-- 循环 -->
+                  <p v-for="(item, key) in fieldScopes" :key="item.id" class="right-item__sub"><font class="right-item__title">{{ key==='1'? '查看':'编辑' }}：</font>{{getRightFieldText(item)}}</p>
+                </template>
+              </template>
+              <template v-else>/</template>
+            </div>
+            <i class="el-icon-setting" @click="editFieldScope"></i>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+    <!-- 编辑字段弹窗 -->
+    <el-dialog width="800px" append-to-body v-model="editFieldDialog" destroy-on-close title="编辑字段权限">
+      <div class="scope-form">
+        <div class="scope-form__item">
+          <label for="">对象名称：</label>
+          <span>{{editItem.entityName}}</span>
+        </div>
+      </div>
+      <el-table class="scope-table" height="500px" border :data="allFields">
+        <el-table-column
+            width="80px"
+            :label="this.$t('numerical order')"
+            type="index"
+          >
+        </el-table-column>
+        <el-table-column label="字段名称" >
+          <template v-slot="scope">
+            {{scope.row.attriLabel}}
+          </template>
+        </el-table-column>
+        <el-table-column label="查看">
+          <template v-slot:header>
+            <span class="scope-table__title">查看</span>
+            <el-checkbox ref="detailSelectAll" :value="detailSelectAll" @change="v=>changeSelectAll(v, '1')">
+              <span></span>
+            </el-checkbox>
+          </template>
+          <template v-slot="scope">
+          <el-checkbox :label="scope.row.attribute.id" :value="detailSelection.includes(scope.row.attribute.id)" @change="changeSelect(scope.row, '1')">
+            <span></span>
+          </el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column label="编辑">
+          <template v-slot:header>
+            <span class="scope-table__title">编辑</span>
+            <el-checkbox  ref="editSelectAll" :value="editSelectAll" @change="v=>changeSelectAll(v, '2')">
+              <span></span>
+            </el-checkbox>
+          </template>
+          <template v-slot="scope">
+          <el-checkbox :label="scope.row.attribute.id" :value="editSelection.includes(scope.row.attribute.id)" @change="changeSelect(scope.row, '2')">
+            <span></span>
+          </el-checkbox>
+          </template>
+        </el-table-column>
+      </el-table>
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button @click="editFieldDialog = false">取 消</el-button>
+        <el-button type="primary" @click="submitFieldScope">确 定</el-button>
+      </div></template>
+    </el-dialog>
+    <!-- 编辑数据权限弹窗 -->
+    <el-dialog width="960px" append-to-body v-model="editDataDialog" title="编辑数据权限">
+      <div class="scope-form">
+        <div class="scope-form__item">
+          <label for="">对象名称：</label>
+          <span>{{editDataScopeForm.entityName}}</span>
+        </div>
+      </div>
+      <div class="scope-form__item">
+        <label for="">配置方式：</label>
+        <el-radio-group class="scope-radio__group" v-model="dataConfigWay">
+          <el-radio label="1" value="1">统一设置</el-radio>
+          <el-radio label="2" value="2">单个设置</el-radio>
+        </el-radio-group>
+      </div>
+      <div class="scope-form__item" v-show="dataConfigWay==='1'">
+        <label for="">统一配置方式：</label>
+        <el-radio-group class="scope-radio__group" v-model="dataAllConfigWay">
+          <el-radio v-for="item in dataScopeTypeList" :key="item.code" :label="item.code" :value="item.code">{{item.name}}</el-radio>
+        </el-radio-group>
+      </div>
+      <epx-form-scope v-if="dataConfigWay==='1' && dataAllConfigWay==='7'" v-model="dataAllConfig" :metaId="editDataScopeForm.entityId" :fieldConfigs="{state: 'EDIT'}" />
+      <epx-object class="scope-item__object"  v-if="dataConfigWay==='1' && dataAllConfigWay==='6'" v-model="dataAllConfigDeptId" :fieldConfigs="{attriLabel: '部门', codeKey: 'FM_DEPT', state:'EDIT',dataType: 'object', isTree: '1', isMultiple: '1' }"></epx-object>
+      <el-table class="scope-table" border :data="editDataScopeList">
+        <el-table-column label="数据操作" width="100px">
+          <template v-slot="scope">
+            {{scope.row.data.API_TYPE==='1' ? '新增':scope.row.data.API_TYPE==='2' ? '查询':scope.row.data.API_TYPE==='3' ? '删除': '修改'}}
+          </template>
+        </el-table-column>
+        <el-table-column label="权限范围">
+          <template v-slot="scope">
+            <template v-if="dataConfigWay==='1'">
+              {{ getRightText(scope.row) }}
+            </template>
+            <template v-else>
+              <el-radio-group class="scope-radio__group"  v-model="scope.row.data.TYPE">
+                <el-radio v-for="item in dataScopeTypeList" :key="item.code" :label="item.code" :value="item.code">{{item.name}}</el-radio>
+              </el-radio-group>
+              <epx-form-scope v-if="scope.row.data.TYPE==='7'" v-model="scope.row.data.DATA_SCOPE" :metaId="scope.row.data.ENTITY" :fieldConfigs="{state: 'EDIT'}" />
+              <epx-object class="scope-item__object" v-if="scope.row.data.TYPE==='6'" v-model="scope.row.data.DEPT_ID" :fieldConfigs="{attriLabel: '部门', codeKey: 'FM_DEPT', state:'EDIT',dataType: 'object', isTree: '1', isMultiple: '1' }"></epx-object>
+            </template>
+          </template>
+        </el-table-column>
+      </el-table>
+      <template v-slot:footer><div class="dialog-footer">
+        <el-button @click="editDataDialog = false">取 消</el-button>
+        <el-button type="primary" :loading="isSubmitDataLoading" @click="submitDataScope">确 定</el-button>
+      </div></template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import EntitySubList from '@epxing/components/src/entity-sub-list'
+export default {
+  name: 'epx-authorization-role-system',
+  extends: EntitySubList,
+  data () {
+    return {
+      showRightScopeDialog: false,
+      dataScope: {},
+      fieldScopes: {},
+      dataScopeTypeMap: {},
+      editFieldDialog: false,
+      allFields: [],
+      detailSelection: [],
+      editSelection: [],
+      editDataDialog: false,
+      editDataScopeForm: {},
+      editDataScopeList: [],
+      dataConfigWay: '2',
+      dataAllConfigWay: '1',
+      dataAllConfig: null,
+      dataAllConfigDeptId: null,
+      editItem: {},
+      isSubmitDataLoading: false
+    }
+  },
+  computed: {
+    isSameDataRight () {
+      if (this.dataScope && this.dataScope['1'] && this.dataScope['1'].data) {
+        const initData = this.dataScope['1'].data
+        return Object.values(this.dataScope).every(item => item.data && item.data.TYPE === initData.TYPE && item.data.DATA_SCOPE === initData.DATA_SCOPE && item.data.DEPT_ID === initData.DEPT_ID)
+      }
+      return true
+    },
+    getRightText () {
+      return data => {
+        if (!data || !data.data) return ''
+        const { TYPE, DATA_SCOPE } = data.data
+        if (TYPE === '7') {
+          if (DATA_SCOPE) {
+            let text = ''
+            const scope = JSON.parse(DATA_SCOPE)
+            if (scope.scopeParams) {
+              scope.scopeParams.map((item, index) => (
+                text += (item.text || '') + (index === scope.scopeParams.length - 1 ? '' : item.link === 'or' ? ' 或者 ' : ' 并且 ')
+              ))
+            }
+
+            return text
+          }
+          return ''
+        } else if (TYPE === '1') {
+          const { LEVEL } = this.roleInfo
+          return LEVEL === '1' ? '默认（个人）' : LEVEL === '2' ? '默认（所属部门）' : '默认（全部）'
+        } else {
+          return this.dataScopeTypeMap[TYPE]
+        }
+      }
+    },
+    isSameFieldRight () {
+      if (this.fieldScopes && this.fieldScopes['1'] && this.fieldScopes['1'].data) {
+        const initData = this.fieldScopes['1'].data
+        return Object.values(this.fieldScopes).every(item => item.data && item.data.TYPE === initData.TYPE && item.data.FIELD_SCOPE === initData.FIELD_SCOPE)
+      }
+      return true
+    },
+    getRightFieldText () {
+      return data => {
+        if (!data || !data.data) return ''
+        const { TYPE, 'FIELD_SCOPE#': fieldNames } = data.data
+        if (TYPE === '1') {
+          return '全部'
+        } else {
+          return fieldNames
+        }
+      }
+    },
+    detailSelectAll () {
+      return this.detailSelection.length === this.allFields.length
+    },
+    editSelectAll () {
+      return this.editSelection.length === this.allFields.length
+    }
+  },
+  watch: {
+    dataConfigWay (v) {
+      if (v === '1') {
+        const editDataScopeList = this.$_.cloneDeep(this.editDataScopeList)
+        editDataScopeList.forEach(item => {
+          item.data.TYPE = this.dataAllConfigWay
+          item.data.DATA_SCOPE = this.dataAllConfig ? JSON.stringify(this.dataAllConfig) : ''
+          item.data.DEPT_ID = Array.isArray(this.dataAllConfigDeptId) ? this.dataAllConfigDeptId.map(dept => dept.id).join(',') : this.dataAllConfigDeptId
+        })
+        this.editDataScopeList = editDataScopeList
+      }
+    },
+    dataAllConfigWay (v) {
+      const editDataScopeList = this.$_.cloneDeep(this.editDataScopeList)
+      editDataScopeList.forEach(item => {
+        item.data.TYPE = this.dataAllConfigWay
+        item.data.DATA_SCOPE = this.dataAllConfig ? JSON.stringify(this.dataAllConfig) : ''
+        item.data.DEPT_ID = Array.isArray(this.dataAllConfigDeptId) ? this.dataAllConfigDeptId.map(dept => dept.id).join(',') : this.dataAllConfigDeptId
+      })
+      this.editDataScopeList = editDataScopeList
+    },
+    dataAllConfig () {
+      const editDataScopeList = this.$_.cloneDeep(this.editDataScopeList)
+      editDataScopeList.forEach(item => {
+        item.data.TYPE = this.dataAllConfigWay
+        item.data.DATA_SCOPE = this.dataAllConfig
+        item.data.DEPT_ID = this.dataAllConfigDeptId
+      })
+      this.editDataScopeList = editDataScopeList
+    },
+    dataAllConfigDeptId () {
+      const editDataScopeList = this.$_.cloneDeep(this.editDataScopeList)
+      editDataScopeList.forEach(item => {
+        item.data.TYPE = this.dataAllConfigWay
+        item.data.DATA_SCOPE = this.dataAllConfig
+        item.data.DEPT_ID = Array.isArray(this.dataAllConfigDeptId) ? this.dataAllConfigDeptId.map(dept => dept.id).join(',') : this.dataAllConfigDeptId
+      })
+      this.editDataScopeList = editDataScopeList
+    }
+  },
+  methods: {
+    addRoleScope (item) {
+      const query = {
+        title: '设置数据范围',
+        component: 'add-role-scope',
+        metaId: this.$metaId,
+        entityId: this.$query.entityId,
+        openType: '2',
+        comType: this.$configs.relationId,
+        id: item.ID
+        // dataScope: item.DATA_SCOPE,
+        // fieldScopes: item.FIELD_SCOPE
+      }
+      this.$createPage(query)
+    },
+    deleteAuthorizationRole (id) {
+      this.$confirm(this.$t('Confirm the deletion') + '？')
+        .then(() => {
+          this.$http.removeMulti({
+            entityId: this.$metaId,
+            ids: id
+          })
+            .then(() => {
+              this.$message.success('删除成功')
+              this.selection = []
+              this.getData()
+            })
+            .catch(err => {
+              this.$message.error(err.message || '删除失败')
+            })
+        })
+        .catch(() => {})
+    },
+    switchHandler (value, item) {
+      let message = '确定停用'
+      if (value) {
+        message = '确定启用'
+      }
+      this.$confirm(message, {
+        confirmButtonText: this.$t('confirm'),
+        cancelButtonText: this.$t('cancel'),
+        type: 'warning'
+      }).then(() => {
+        this.$http.update({
+          entityId: this.$metaId,
+          'bean.ID': item.ID,
+          'bean.STATUS': value ? 'enable' : 'disable'
+        }).then(() => {
+          this.getData()
+          this.$message({
+            type: 'success',
+            message: '操作成功!'
+          })
+        })
+      })
+    },
+    addAuthorization () {
+      const query = {
+        component: 'add-authorization',
+        metaId: this.$metaId,
+        openType: '2',
+        comType: this.$configs.relationId,
+        apiId: this.parentId
+      }
+      if (this.$query.otherSystem) {
+        query.otherSystem = true
+        query.apiSystemId = this.$query.apiSystemId
+      }
+      this.$createPage(query)
+      //   this.$config.relationId
+
+    //   this.$createPage({
+    //     component: 'entity-add-page',
+    //     metaId: this.$metaId,
+    //     pageType: 'ADD',
+    //     isSub: true,
+    //     parentId: this.parentId,
+    //     callback: this.getData
+    //   })
+    },
+    setRightScope (roleId) {
+      Promise.all([this.getRoleInfo(roleId), this.getEntityRoleRightScope(roleId)])
+        .then(([roleInfo, data]) => {
+          this.showRightScopeDialog = true
+        })
+    },
+    getDataScopeType () {
+      this.$store.dispatch({
+        type: 'ADD_LIST',
+        key: 'FM_DATASCOPE_TYPE'
+      })
+        .then(data => {
+          this.dataScopeTypeList = data
+          const dataScopeTypeMap = {}
+          data.forEach(item => {
+            dataScopeTypeMap[item.code] = item.name
+          })
+          this.dataScopeTypeMap = dataScopeTypeMap
+        })
+    },
+    getRoleInfo (roleId) {
+      return this.$http.get({
+        entityId: 'FM_ROLE',
+        id: roleId
+      })
+        .then(data => {
+          this.roleInfo = data.data
+          return data.data
+        })
+    },
+    getEntityRoleRightScope (roleId) {
+      const params = {
+        action: 'getRoleLocalApiManagement',
+        entityId: 'FM_ENTITY_RIGHT_ROLE',
+        roleId: roleId,
+        metaId: this.formData.ENTITY
+      }
+      return this.$http.list(params)
+        .then(data => {
+          const scopeData = (data.entitys && data.entitys[0]) || {}
+          this.scopeData = scopeData
+          this.dataScope = scopeData.dataScopes || {}
+          this.fieldScopes = scopeData.fieldScopes || {}
+          return data
+        })
+    },
+    editFieldScope (scope) {
+      this.editFieldScopeForm = {
+        ...this.fieldScopes
+      }
+      this.editItem = this.scopeData
+      this.$store.dispatch({
+        type: 'ADD_META',
+        metaId: this.formData.ENTITY
+      })
+        .then(meta => {
+          this.allFields = meta.getAllFieldConfigs()
+          this.editFieldDialog = true
+          const fieldScopes = this.fieldScopes || {}
+          const detailData = fieldScopes['1']?.data || {}
+          const editData = fieldScopes['2']?.data || {}
+          if (detailData.TYPE === '1') {
+            this.detailSelection = this.allFields.map(item => item.attribute.id)
+          } else {
+            const selects = detailData.FIELD_SCOPE ? detailData.FIELD_SCOPE.split(',') : []
+            this.detailSelection = selects
+          }
+          if (editData.TYPE === '1') {
+            this.editSelection = this.allFields.map(item => item.attribute.id)
+          } else {
+            const selects = editData.FIELD_SCOPE ? editData.FIELD_SCOPE.split(',') : []
+            this.editSelection = selects
+          }
+        })
+    },
+    changeSelect (row, type) {
+      if (type === '1') {
+        const index = this.detailSelection.findIndex(item => item === row.attribute.id)
+        if (index !== -1) {
+          this.detailSelection.splice(index, 1)
+        } else {
+          this.detailSelection.push(row.attribute.id)
+        }
+      } else {
+        const index = this.editSelection.findIndex(item => item === row.attribute.id)
+        if (index !== -1) {
+          this.editSelection.splice(index, 1)
+        } else {
+          this.editSelection.push(row.attribute.id)
+        }
+      }
+    },
+    changeSelectAll (v, type) {
+      if (type === '1') {
+        if (!this.detailSelectAll) {
+          this.detailSelection = this.allFields.map(item => item.attribute.id)
+        } else {
+          this.detailSelection = []
+        }
+      } else {
+        if (!this.editSelectAll) {
+          this.editSelection = this.allFields.map(item => item.attribute.id)
+        } else {
+          this.editSelection = []
+        }
+      }
+    },
+    submitFieldScope () {
+      const entityList = Object.keys(this.editFieldScopeForm).filter(item => item === '1' || item === '2').map(item => {
+        const data = this.editFieldScopeForm[item].data
+        const fieldList = item === '1' ? this.detailSelection : this.editSelection
+        const type = fieldList.length === this.allFields.length ? '1' : '2'
+        return {
+          ID: data.ID,
+          TYPE: type,
+          FIELD_SCOPE: type === '1' ? '' : fieldList.join(',')
+        }
+      })
+      this.$http.save({
+        action: 'setRoleFieldScope',
+        entityId: 'FM_ROLE_FIELDSCOPE',
+        entityList: entityList
+      })
+        .then(data => {
+          this.$message.success('修改成功')
+          this.editFieldDialog = false
+          this.allFields = []
+          this.editFieldScopeForm = {}
+          this.editItem = {}
+          this.setRightScope(this.roleInfo.ID)
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+        })
+    },
+    editDataScope (scope, system) {
+      this.editDataDialog = true
+      this.editDataScopeForm = { ...this.scopeData }
+      const dataScope = this.dataScope || {}
+      this.editDataScopeList = Object.keys(dataScope).filter(item => item === '1' || item === '2' || item === '3' || item === '4').map(item => dataScope[item])
+      // 获取是否相同
+      if (this.isSameDataRight && this.editDataScopeList.length) {
+        this.dataConfigWay = '1'
+        this.dataAllConfigWay = this.editDataScopeList[0].data.TYPE || '1'
+        this.dataAllConfig = this.editDataScopeList[0].data.DATA_SCOPE
+        this.dataAllConfigDeptId = this.editDataScopeList[0].data.DEPT_ID
+      } else {
+        this.dataConfigWay = '2'
+      }
+    },
+    submitDataScope () {
+      this.isSubmitDataLoading = true
+      this.$http.save({
+        action: 'setRoleDataScope',
+        entityId: 'FM_ROLE_DATASCOPE',
+        entityList: this.editDataScopeList.map(item => ({
+          ID: item.data.ID,
+          TYPE: !item.data.DATA_SCOPE && item.data.TYPE === '7' ? '1' : item.data.TYPE,
+          DATA_SCOPE: item.data.DATA_SCOPE,
+          DEPT_ID: Array.isArray(item.data.DEPT_ID) ? item.data.DEPT_ID.map(item => item.id || item).join(',') : item.data.DEPT_ID
+        }))
+      })
+        .then(data => {
+          this.$message.success('修改成功')
+          this.editDataDialog = false
+          this.editDataScopeList = []
+          this.editDataScopeForm = {}
+          this.setRightScope(this.roleInfo.ID)
+          this.isSubmitDataLoading = false
+        })
+        .catch(err => {
+          this.$message.error(err.message)
+          this.isSubmitDataLoading = false
+        })
+    }
+
+  },
+  mounted () {
+    this.getDataScopeType()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.box-card{
+    border: none;
+
+        :deep(.el-card__header) {
+            padding: 10px 12px 16px;
+            font-size: var(--epx-font-size-l);
+        }
+
+}
+.blue{
+    border-left: 3px solid;
+    border-color: #1f82ef;
+    padding-left: 6px;
+}
+.list-item{
+    border-bottom: 1px solid var(--epx-border);
+    padding: 16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.item-gray{
+    background-color: var(--epx-bg);
+}
+.no-data{
+    color: var(--epx-text);
+    padding: 16px;
+    text-align: center;
+}
+.item-title{
+    font-size: var(--epx-font-size-l);
+    font-weight: 600;
+    color: var(--epx-text);
+}
+.item-info{
+    margin-bottom: 12px;
+    font-size: var(--epx-font-size-base);
+    color: var(--epx-text);
+}
+.item-label{
+    color: #444444;
+}
+.item-right{
+    // width: 130px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.enable{
+    color: #3F8FFF;
+    margin-left: 6px;
+}
+.disable{
+    color: var(--epx-text);
+    margin-right: 6px;
+}
+.item-switch{
+    line-height: 100%;
+}
+.delete-red{
+ color: #E40F0F;
+}
+.delete-red:hover{
+ color: #E40F0F;
+}
+.authorization-content {
+  display: flex;
+}
+.authorization-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.authorization-item {
+  margin: 4px 5px;
+  padding: 6px 12px;
+  @include bg_color_primary(.2);
+  border: 1px dashed;
+  @include border_color_primary;
+  position: relative;
+  >i {
+    color: var(--epx-text);
+    margin-left: 4px;
+    cursor: pointer;
+  }
+  &:hover {
+    .authorization-item__modal {
+      display: flex;
+    }
+  }
+}
+.authorization-item__modal {
+  display: none;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: rgba(0,0,0,.6);
+  color: #fff;
+  justify-content: center;
+  align-items: center;
+  >span {
+    height: 16px;
+    width: 1px;
+    background: var(--epx-bg-card);
+    margin: 0 6px;
+  }
+  >i {
+    cursor: pointer;
+  }
+}
+.right-scope {
+  display: flex;
+}
+.right-item {
+  border: 1px solid var(--epx-border);
+  flex: 1;
+  &:first-child {
+    border-right: 0;
+  }
+}
+.right-item__header {
+  padding: 0 15px;
+  line-height: 50px;
+  color: var(--epx-text);
+  border-bottom: 1px solid var(--epx-border);
+  background: rgba(0,0,0,0.02);
+  font-weight: 600;
+}
+.right-item__content {
+  height: 360px;
+  padding: 12px;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  >i {
+    cursor: pointer
+  }
+}
+.right-item__title {
+  color: var(--epx-text);
+  font-weight: 600;
+}
+</style>