按钮级别的新版本,多级别的组织架构
loulijun2021
2023-08-25 3fce634eeb56f9425d5e745b1d4333da962fc3d7
src/views/basicSettings/powerDivider.vue
@@ -46,6 +46,8 @@
          <el-button
            style="position: absolute;right: 15px;z-index:1;top:3px"
            type="primary"
            :loading="$store.state.app.buttonIsDisabled"
            :disabled="$store.state.app.buttonIsDisabled"
            @click="saveClick"
          >保 存
          </el-button>
@@ -55,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()"
@@ -81,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'"
@@ -178,12 +180,15 @@
      allButtonData: [], // 所有菜单对应的按钮权限加数据权限
      isScroll: 'left'
      isScroll: 'left',
      ButtonData: JSON.parse(localStorage.getItem('ButtonData'))
    }
  },
  created() {
  },
  mounted() {
    window.addEventListener('resize', this.getHeight)
@@ -198,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('请先建相对应的角色!')
      }
@@ -236,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)
              )
@@ -263,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)
              }
@@ -417,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)
              }
@@ -430,11 +440,14 @@
          })
        }
      })
      this.$store.state.app.buttonIsDisabled = true
      const res = await RolePermissionSava(JSON.stringify(arr), rolecode, this.activeName)
      if (res.code === '200') {
        const rolename = this.treeLeft.find(i => i.code === rolecode).name
        this.$notify.success(rolename + '的角色权限提交成功!')
        await this.getRolePermissionSearchRoleMenuButton(rolecode)
        this.$store.state.app.buttonIsDisabled = false
      }
    },
    // 获取页面高度
@@ -463,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>