按钮级别的新版本,多级别的组织架构
loulijun2021
2023-08-25 3fce634eeb56f9425d5e745b1d4333da962fc3d7
src/views/basicSettings/powerDivider.vue
@@ -57,7 +57,7 @@
              <div style="display: flex;">
                <div
                  ref="scrollLeft"
                  style="border-right: 1px solid rgba(0,0,0,0.2);width: 220px;
                  style="border-right: 1px solid rgba(0,0,0,0.2);width:260px;
                  overflow-y: auto;overflow-x:hidden;"
                  :style="{height:(tableHeight-40)+'px'}"
                  @scroll="scrollLeftScroll()"
@@ -83,7 +83,7 @@
                </div>
                <div
                  ref="scrollCenter"
                  style="width: 660px;padding-left: 10px;overflow-y: auto"
                  style="width: calc(100% - 260px );padding-left: 10px;overflow-y: auto"
                  :style="{height:(tableHeight-40)+'px'}"
                  @scroll="scrollCenterScroll()"
                  @mouseover="isScroll='center'"
@@ -180,12 +180,15 @@
      allButtonData: [], // 所有菜单对应的按钮权限加数据权限
      isScroll: 'left'
      isScroll: 'left',
      ButtonData: JSON.parse(localStorage.getItem('ButtonData'))
    }
  },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
@@ -200,14 +203,19 @@
      const { data: res } = await RolePermissionSearchRole()
      this.treeLeft = res
      let rolecode = ''
      if (window.location.hash.indexOf('?') !== -1) {
        rolecode = window.location.hash.split('?')[1].split('=')[1]
      }
      if (res && res.length > 0) {
        this.$nextTick(() => { // 默认选中第一个
          this.$refs.treeLeftRef.setCurrentKey(res[0].code) // 默认选中节点第一个
          this.$refs.treeLeftRef.setCurrentKey(rolecode || res[0].code) // 默认选中节点第一个
        })
        await this.getRolePermissionSearchRoleMenuButton(res[0].code)// 用于数据回显
        await this.getRolePermissionSearchRoleMenuButton(rolecode || res[0].code)// 用于数据回显
        await this.getRolePermissionSearchRoleMenu(res[0].code)// 用于渲染页面
        await this.getRolePermissionSearchRoleMenu(rolecode || res[0].code)// 用于渲染页面
      } else {
        this.$notify.error('请先建相对应的角色!')
      }
@@ -238,7 +246,7 @@
          item.children.forEach(it => {
            it.buttoncodelist = it.buttoncodelist !== '' && it.buttoncodelist !== null ? it.buttoncodelist.split(',') : []
            if (it.buttoncodelist && it.buttoncodelist.length > 0) {
              it.buttoncodelist = this.$ButtonData.filter(j =>
              it.buttoncodelist = this.ButtonData.filter(j =>
                it.buttoncodelist.includes(j.buttoncode)
              )
@@ -265,7 +273,7 @@
            let temp = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].buttoncode : []
            temp = temp.length > 0 ? temp.split(',') : []
            it.buttonChecked = [] // 数据回显
            this.$ButtonData.forEach(j => {
            this.ButtonData.forEach(j => {
              if (temp.includes(j.buttoncode)) {
                it.buttonChecked.push(j.buttonname)
              }
@@ -419,7 +427,7 @@
          item.children.forEach(it => {
            if (menuKeyArr.includes(it.menucode)) {
              if (it.buttonChecked && it.buttonChecked.length > 0) { // 已选菜单
                it.buttonCheckedCode = this.$ButtonData.filter(i =>
                it.buttonCheckedCode = this.ButtonData.filter(i =>
                  it.buttonChecked.includes(i.buttonname)
                ).map(i => i.buttoncode)
              }
@@ -468,4 +476,13 @@
::v-deep .el-checkbox__label {
  width: 55px;
}
.el-checkbox-group {
  margin-left: 0 !important;
  padding-left: 40px;
}
.el-checkbox-group:hover {
  background: #f0f7ff;
}
</style>