1.角色权限优化50%

loulijun2021

2023-08-03 f6ac203c915d7562aef51628a4ab3e601c3274f1

1.角色权限优化50%

 src/api/basicSettings.js

@@ -27,14 +27,33 @@
  })
}
// 角色权限提交
export function RolePermissionSava(data) {
export function RolePermissionSava(data, rolecode, type) {
  return request({
    url: 'BasicSetting/RolePermissionSava',
    url: 'BasicSetting/RolePermissionSava?rolecode=' + rolecode + '&type=' + type,
    method: 'post',
    headers: {
      // 'content-type': 'application/x-www-form-urlencoded'
      'content-type': 'application/json'
    },
    data
  })
}

// 按钮基础资料
export function ButtonData() {
  return request({
    url: 'BasicSetting/ButtonData',
    method: 'get'
  })
}
// 数据权限基础资料
export function DataPermissions() {
  return request({
    url: 'BasicSetting/DataPermissions',
    method: 'get'
  })
}

// 组织架构新增编辑
// export function AddUpdateOrganization(data) {
//   return request({

 src/layout/components/Navbar.vue

@@ -172,6 +172,8 @@
import RightPanel from '@/components/RightPanel'
import Settings from '../components/Settings/index'
import * as signalR from '@aspnet/signalr'
import { ButtonData } from '@/api/basicSettings'
import Vue from 'vue'

export default {
  components: {
@@ -236,10 +238,12 @@
    // this.$signalr.start()
    this.usercode = getCookie('navTabId')
    this.username = getCookie('username')
    this.stu_torgname = getCookie('stu_torgname') === '' ? '系统管理员' : getCookie('stu_torgname')
    this.stu_torgname = getCookie('stu_torgname')
  },
  mounted() {
    // this.getHubConnectionBuilder()

    this.getButtonData()
  },
  computed: {
    ...mapGetters([
@@ -271,6 +275,12 @@
    }
  },
  methods: {
    // 获取全局按钮键值对
    async  getButtonData() {
      const { data: res } = await ButtonData()
      Vue.prototype.$ButtonData = res // 用于全局
    },

    // 建立hub连接
    async getHubConnectionBuilder() {
      const url = 'http://121.196.36.24:8019/chatHub'
@@ -332,11 +342,11 @@
      this.$store.dispatch('app/toggleSideBar')
    },
    async logout() {
      localStorage.removeItem('token')
      await this.signalr.stop()
      this.signalr.off('SendCustomUserMessage')
      // await this.signalr.stop()
      // this.signalr.off('SendCustomUserMessage')
      await this.$store.dispatch('user/logout')
      this.$message.success('退出成功！')
      localStorage.removeItem('token')
      this.$notify.success('退出成功！')
      this.$router.push(`/login`)
    },
    editPassword() {

 src/permission.js

@@ -48,7 +48,7 @@
          await store.dispatch('permission/generateRoutes', menu)

          // eslint-disable-next-line require-atomic-updates
          store.state.settings.orgType = getCookie('description')
          // store.state.settings.orgType = getCookie('description')  //注释掉

          // 动态添加可访问路由表
          router.addRoutes(store.getters.addRouters)

 src/store/modules/user.js

@@ -109,36 +109,29 @@
  // user logout
  logout({ commit, state, dispatch }) {
    return new Promise((resolve, reject) => {
      const usercode = getCookie('navTabId')
      const username = getCookie('admin')
      const usertype = getCookie('usertype')
      const userid = getCookie('userid')
      const stu_torgcode = getCookie('stu_torgcode')
      const data = {
        usercode,
        username,
        usertype,
        userid,
        stu_torgcode
      }
      // const usercode = getCookie('navTabId')
      // const username = getCookie('admin')
      // const usertype = getCookie('usertype')
      // const userid = getCookie('userid')
      // const stu_torgcode = getCookie('stu_torgcode')
      // const data = {
      //   usercode,
      //   username,
      //   usertype,
      //   userid,
      //   stu_torgcode
      // }

      logout(data).then(res => {
      logout().then(res => {
        if (res.code === '200') {
          removeToken() // must remove  token  first
          resetRouter()

          removeCookie('ruleCode')
          removeCookie('username')
          removeCookie('admin')
          removeCookie('navTabId')
          removeCookie('usertype')
          removeCookie('userid')
          removeCookie('rediskey')
          removeCookie('code')
          removeCookie('stu_torgcode')
          removeCookie('usercode')
          removeCookie('stu_torgname')
          removeCookie('description')
          removeCookie('guid')
          removeCookie('code')

          // reset visited views and cached views
          dispatch('tagsView/delAllViews', null, { root: true })

 src/styles/global.css

@@ -3,8 +3,8 @@
  height: 100%;
  margin: 0;
  padding: 0;
  /*min-width: 1800px;*/
  /*overflow-y: hidden;*/
  min-width: 1200px;
  overflow-y: hidden;
  /*overflow-x: hidden;*/

  -moz-osx-font-smoothing: grayscale;

 src/utils/request.js

@@ -48,6 +48,11 @@
        })
      }
      if (res.code === '303') {
        Message({
          message: res.message || 'Error',
          type: 'error',
          duration: 5 * 1000
        })
        // Notification({
        //   message: res.Message || 'Error',
        //   type: 'error',

 src/views/basicSettings/roleList.vue

@@ -25,7 +25,7 @@

          <el-tree
            ref="treeLeftRef"
            style="padding: 10px;overflow: scroll"
            style="padding: 10px;overflow: auto"
            :style="{height:(tableHeight-20)+'px'}"
            :data="treeLeft"
            node-key="code"
@@ -33,6 +33,8 @@
            :props="defaultPropsLeft"
            :default-expand-all="true"
            :expand-on-click-node="false"
            draggable
            :allow-drop="treeLeftAllowDrop"
            @node-click="treeLeftNodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
@@ -47,7 +49,7 @@
                @keyup.enter="roleSave(data)"
              >

              <span v-if="!data.isEdit">
              <span v-if="!data.isEdit&&data.identifying!=='0'&&data.identifying!=='1'">
                <i
                  v-if="data.code!=='000'"
                  class="el-icon-edit"
@@ -73,10 +75,11 @@
            style="position: absolute;right: 15px;z-index:1;top:3px"
            type="primary"
            @click="saveClick"
          >保 存</el-button>
          >保 存
          </el-button>

          <el-tabs v-model="activeName" type="border-card">
            <el-tab-pane label="PC端" name="PC端">
            <el-tab-pane label="PC端" name="PC">
              <div style="display: flex;">

                <div
@@ -98,7 +101,7 @@
                    highlight-current
                    :props="defaultPropsCenter"
                    show-checkbox
                    node-key="code"
                    node-key="menucode"
                    :default-expand-all="true"
                    @check-change="handleTreeCenterCheckChange"
                    @check="handleTreeCenterCheck"
@@ -125,28 +128,30 @@
                  </el-checkbox>

                  <div v-if="treeCenter.length>0">
                    <div v-for="item in treeCenter[0].children" :key="item.code">
                    <div v-for="item in treeCenter[0].children" :key="item.menucode">

                      <div
                        v-if="item.display"
                        v-if="item.buttoncodelist ===null "
                        style="margin-left: 40px;height:26px;display: flex;"
                      />

                      <el-checkbox-group
                        v-for="it in item.children"
                        v-if="item.expanded"
                        :key="it.code"
                        v-model="it.checkedButton"
                        :key="it.menucode"
                        v-model="it.buttonChecked"
                        style="margin-left: 40px;height:26px;display: flex"
                        @change="val=>handleCheckedButtonChange(val,it.code)"
                        @change="val=>handleCheckedButtonChange(val,it.menucode)"
                      >

                        <el-checkbox
                          v-for="i in it.itemButton"
                          :key="i.code"
                          :label="i.name"
                          v-for="i in it.buttoncodelist"
                          :key="i"
                          :label="i"
                          style="display:flex;align-items: center"
                        />
                      </el-checkbox-group>

                    </div>

                  </div>
@@ -172,25 +177,25 @@
                  </el-checkbox>

                  <div v-if="treeCenter.length>0">
                    <div v-for="item in treeCenter[0].children" :key="item.code">
                    <div v-for="item in treeCenter[0].children" :key="item.menucode">
                      <div
                        v-if="item.display"
                        v-if="item.datacodelist ===null "
                        style="margin-left: 40px;height:26px;display: flex;"
                      />

                      <el-radio-group
                        v-for="it in item.children"
                        v-if="item.expanded"
                        :key="it.code"
                        v-model="it.checkedData"
                        :key="it.menucode"
                        v-model="it.dataChecked"
                        style="margin-left: 40px;height:26px;display: flex"
                        @change="val=>handleCheckedDataChange(val,it.code)"
                        @change="val=>handleCheckedDataChange(val,it.menucode)"
                      >
                        <el-radio
                          v-for="i in it.itemData"
                          :key="i.code"
                          v-for="i in it.datacodelist"
                          :key="i"
                          style="display:flex;align-items: center"
                          :label="i.name"
                          :label="i"
                        />
                      </el-radio-group>
                    </div>
@@ -201,7 +206,7 @@

              </div>
            </el-tab-pane>
            <el-tab-pane label="APP端" name="APP端">大大</el-tab-pane>
            <el-tab-pane label="APP端" name="APP">大大</el-tab-pane>
            <el-tab-pane label="工控端" name="工控端">工控端</el-tab-pane>
          </el-tabs>

@@ -217,6 +222,7 @@
<script>
import waves from '@/directive/waves'
import {
  DataPermissions,
  RolePermissionSava,
  RolePermissionSearchRole,
  RolePermissionSearchRoleMenu,
@@ -241,18 +247,20 @@
      },
      defaultPropsCenter: {
        children: 'children',
        label: 'name'
        label: 'menuname'
      },
      activeName: 'PC端',
      activeName: 'PC',

      buttonIsChecked: false,
      dataIsChecked: false,

      menuCheckedCodeArr: [], // 菜单权限数组选中的

      allButtonData: [], // 所有的按钮加权限
      allButtonData: [], // 所有菜单对应的按钮权限加数据权限

      isScroll: 'left'
      isScroll: 'left',

      dataKeyValue: []// 数据权限键值对

    }
  },
@@ -293,72 +301,86 @@
        this.$nextTick(() => { // 默认选中第一个
          this.$refs.treeLeftRef.setCurrentKey(res[0].roles[0].code) // 默认选中节点第一个
        })
        await this.getRolePermissionSearchRoleMenuButton(res[0].roles[0].code)
        await this.getRolePermissionSearchRoleMenu(res[0].roles[0].code)

        await this.getDataPermissions()// 获取数据权限键值对
        await this.getRolePermissionSearchRoleMenuButton(res[0].roles[0].code)// 用于数据回显

        await this.getRolePermissionSearchRoleMenu(res[0].roles[0].code)// 用于渲染页面
      } else {
        this.$notify.error('请先建相对应的角色！')
      }
    },
    async getDataPermissions() {
      const { data: res } = await DataPermissions()
      this.dataKeyValue = res
    },

    // 获取菜单权限对应的按钮
    async getRolePermissionSearchRoleMenuButton(rolecode) {
      const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode })
      this.allButtonData = res
      const { data: res } = await RolePermissionSearchRoleMenuButton({ rolecode, type: this.activeName })
      this.allButtonData = JSON.parse(res[0].jsondate)
    },
    // 获取菜单权限
    async getRolePermissionSearchRoleMenu(rolecode) {
      const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: 'PC' })
      const { data: res } = await RolePermissionSearchRoleMenu({ rolecode, type: this.activeName })

      // 拿到数组list转换成树形tree
      const result = arrayToTree(res, {
        parentProperty: 'parentid',
        customID: 'code',
        parentProperty: 'parent_id',
        customID: 'menucode',
        childrenProperty: 'children'
      })

      this.menuCheckedCodeArr = []

      result.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            // 按钮权限回显
            const buttonAll = this.allButtonData.tButton.filter(j => j.menucode === it.code)
            const buttonChecked = this.allButtonData.tButton.filter(j =>
              j.menucode === it.code && j.flag === 'Y'
            ).map(j => j.name)
            it.itemButton = buttonAll
            it.checkedButton = buttonChecked

            // 数据权限回显
            const dataAll = this.allButtonData.tData.filter(j => j.menucode === it.code)
            const dataChecked = this.allButtonData.tData.filter(j => j.menucode === it.code && j.flag === 'Y')

            it.itemData = dataAll
            it.checkedData = dataChecked.length > 0 ? dataChecked[0].name : []

            // 用作菜单勾选回显
            if (it.flag === 'Y') {
              this.menuCheckedCodeArr.push(it.code)
            }
          })
          item.display = true
          item.expanded = true
        }
      })

      // console.log(JSON.parse(JSON.stringify(result)), 8)

      this.treeCenter = [
        { code: '-1', name: '全部', flag: result.every(i => i.flag === 'Y') ? 'Y' : 'N', children: result }
      ]

      this.handleCheckedButtonChange('', '', true)
      this.handleCheckedDataChange('', '', true)

      this.menuCheckedCodeArr = this.allButtonData.map(i => i.menucode)
      this.$nextTick(() => {
        this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
      })

      this.$forceUpdate()
      result.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            it.buttoncodelist = it.buttoncodelist ? it.buttoncodelist.split(',') : []
            if (it.buttoncodelist && it.buttoncodelist.length > 0) {
              it.buttoncodelist = this.$ButtonData.filter(j =>
                it.buttoncodelist.includes(j.buttoncode)
              )

              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(',') : []
              console.log(temp, 7)

              it.buttonChecked = [] // 数据回显
              it.buttoncodelist.forEach(j => {
                if (temp.includes(j.buttoncode)) {
                  it.buttonChecked.push(j.buttonname)
                }
              })

              it.buttoncodelist = it.buttoncodelist.map(j => j.buttonname)
            }

            it.datacodelist = it.datacodelist ? it.datacodelist.split(',') : []
            if (it.datacodelist && it.datacodelist.length > 0) {
              it.datacodelist = this.dataKeyValue.filter(j =>
                it.datacodelist.includes(j.datacode)
              ).map(j => j.dataname)
            }
            const datacode = this.allButtonData.filter(j => j.menucode === it.menucode).length > 0 ? this.allButtonData.filter(j => j.menucode === it.menucode)[0].datacode : ''
            it.dataChecked = datacode ? this.dataKeyValue.find(j => j.datacode === datacode).dataname : '' // 数据回显
          })

          item.expanded = true
        }
      })

      this.treeCenter = [
        { menucode: '-1', menuname: '全部', children: result }
      ]

      this.handleCheckedButtonChange('', '', true)
      this.handleCheckedDataChange('', '', true)
      // this.$forceUpdate()
      console.log(JSON.parse(JSON.stringify(result)), 6)
    },

    // 左边滚动条滑动时
@@ -390,12 +412,12 @@
        this.treeCenter[0].children.forEach(item => {
          if (item.children && item.children.length) {
            item.children.forEach(it => {
              if (checkedKeys.includes(it.code)) {
              if (checkedKeys.includes(it.menucode)) {
                if (belong === 'button') {
                  it.checkedButton = it.itemButton.map(i => i.name)
                  it.buttonChecked = it.buttoncodelist
                }
                if (belong === 'data') {
                  it.checkedData = '全部'
                  it.dataChecked = '全部'
                }
              }
            })
@@ -405,12 +427,12 @@
        this.treeCenter[0].children.forEach(item => {
          if (item.children && item.children.length) {
            item.children.forEach(it => {
              if (checkedKeys.includes(it.code)) {
              if (checkedKeys.includes(it.menucode)) {
                if (belong === 'button') {
                  it.checkedButton = []
                  it.buttonChecked = []
                }
                if (belong === 'data') {
                  it.checkedData = undefined
                  it.dataChecked = ''
                }
              }
            })
@@ -420,6 +442,10 @@
    },
    // 单个按钮改变
    handleCheckedButtonChange(value, code, flag) {
      // console.log(value, code, flag, 1)

      // console.log(JSON.parse(JSON.stringify(this.treeCenter[0])), 2)

      // 判断是否包含在内
      if (!flag) {
        if (!this.menuCheckedCodeArr.includes(code) && value.length === 1) { // 否
@@ -436,13 +462,18 @@
      this.treeCenter[0].children.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            if (it.checkedButton.length === it.itemButton.length) {
            if (it.buttonChecked && it.buttonChecked.length === it.buttoncodelist.length && it.buttoncodelist.length > 0) {
              count++
            }

            if (it.buttoncodelist.length) {
            childrenLength++
            }
            console.log(count, childrenLength)
          })
        }
      })

      this.buttonIsChecked = count === childrenLength
      this.$forceUpdate()
    },
@@ -451,15 +482,12 @@
      // console.log(data, Node, VueComponent, 2221)
      // console.log(Node.expanded)
      this.treeCenter[0].children.forEach(item => {
        if (item.name === data.name) {
        if (item.menucode === data.menucode) {
          item.expanded = Node.expanded
        }
      })
      if (data.code === '-1') {
      if (data.menucode === '-1') {
        Node.expanded = true // 暂时先写成这个
        // this.treeCenter[0].children.forEach(item => {
        //   item.expanded = Node.expanded
        // })
      }
      this.$forceUpdate()
    },
@@ -472,10 +500,10 @@
        this.dataIsChecked = false
        this.menuCheckedCodeArr = []
      } else {
        if (checkedKeys.includes(obj.code)) { // 判断是否包含在内   //是
          this.menuCheckedCodeArr.push(obj.code)
        if (checkedKeys.includes(obj.menucode)) { // 判断是否包含在内   //是
          this.menuCheckedCodeArr.push(obj.menucode)
        } else { // 否
          this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.code)
          this.menuCheckedCodeArr = this.menuCheckedCodeArr.filter(i => i !== obj.menucode)
        }
      }
    },
@@ -488,9 +516,9 @@
          this.treeCenter[0].children.forEach(item => {
            if (item.children && item.children.length) {
              item.children.forEach(it => {
                if (it.code === obj.code) {
                  it.checkedButton = []
                  it.checkedData = undefined
                if (it.menucode === obj.menucode) {
                  it.buttonChecked = []
                  it.DataChecked = ''
                }
              })
            }
@@ -505,7 +533,6 @@
      if (!flag) {
        this.menuCheckedCodeArr.push(code)
        this.menuCheckedCodeArr = [...new Set(this.menuCheckedCodeArr)]

        this.$refs.treeCenterRef.setCheckedKeys(this.menuCheckedCodeArr)
      }
      // 这里是判断全选radio 是否选中
@@ -514,10 +541,10 @@
      this.treeCenter[0].children.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            if (it.checkedData.length > 0) {
            if (it.dataChecked.length > 0) {
              count++
            }
            if (it.itemData.length > 0) {
            if (it.datacodelist.length > 0) {
              childrenLength++
            }
          })
@@ -562,51 +589,40 @@
    }, 1000, true),

    // 页面勾选好保存事件
    saveClick() {
      // console.log(this.treeCenter)
    async saveClick() {
      // [{"menucode":"1010","buttoncode":"Add,Update","datacode":"ALL"},]
      const arr = []
      this.treeCenter[0].children.forEach(item => {
        if (item.children && item.children.length) {
          item.children.forEach(it => {
            if (it.dataChecked && it.dataChecked.toString().length > 0) { // 数据权限已勾选
              it.dataChecked = this.dataKeyValue.find(i => i.dataname === it.dataChecked).datacode
            }

            if (it.buttonChecked && it.buttonChecked.length > 0) { // 已选菜单
              it.buttonChecked = this.$ButtonData.filter(i =>
                it.buttonChecked.includes(i.buttonname)
              ).map(i => i.buttoncode)
            }
            arr.push({
              menucode: it.menucode,
              datacode: it.dataChecked,
              buttoncode: it.buttonChecked ? it.buttonChecked.join(',') : ''
            })
          })
        }
      })

      const rolecode = this.$refs.treeLeftRef.getCurrentKey()

      const roleMenu = []
      const roleButton = []
      const roleData = []

      this.treeCenter[0].children.forEach((item, index) => {
        if (item.children && item.children.length) {
          item.children.forEach((it, ind) => {
            if (it.flag === 'Y') {
              roleMenu.push({ rolecode, menucode: it.code })

              if (it.itemButton && it.itemButton.length && it.checkedButton.length > 0) {
                it.itemButton.forEach(i => {
                  if (it.checkedButton.includes(i.name)) {
                    roleButton.push({ rolecode, buttoncode: i.code })
                  }
                })
              }
              if (it.checkedData && it.checkedData.length) {
                roleData.push({ rolecode, datacode: it.itemData.find(i => i.name === it.checkedData).code })
              }
            }
          })
        }
      })
      // console.log(roleMenu)
      // console.log(roleButton)
      // console.log(roleData)
      const data = {
        roleMenu, roleButton, roleData
      }

      RolePermissionSava(data).then(res => {
      // console.log(JSON.stringify(arr).toString())
      const res = await RolePermissionSava(JSON.stringify(arr), rolecode, this.activeName)
        if (res.code === '200') {
          const rolename = this.treeLeft[0].roles.find(i => i.code === rolecode).name
          this.$notify.success(rolename + '的角色权限提交成功！')
          this.getRolePermissionSearchRoleMenuButton(rolecode)
          this.getRolePermissionSearchRoleMenu(rolecode)
        await this.getRolePermissionSearchRoleMenuButton(rolecode)
        await this.getRolePermissionSearchRoleMenu(rolecode)
        }
        this.$forceUpdate()
      })
    },
    // 获取页面高度
    getHeight() {
@@ -614,6 +630,17 @@
        this.mainHeight = window.innerHeight - 85
        this.tableHeight = this.mainHeight - 50
      })
    },
    // 左侧树形拖动处理
    treeLeftAllowDrop(draggingNode, dropNode, type) {
      // console.log(draggingNode, dropNode, type)
      // 注掉的是同级拖拽
      if (draggingNode.level === dropNode.level) {
        return type === 'prev' || type === 'next'
      } else {
        // 不同级进行处理
        return false
      }
    }
  }
}