ele-usky-admin/src/views/systemManage/rolePermission/index.vue

<template>
  <div class="app-container page-nesting" style="position: relative">
    <!-- 左侧start -->
    <div class="grid-content treeDom roleLeft">
      <div style="" class="mb-20 addBox">
        <b>角色类型</b>
        <el-button type="success" @click="addRole()" :disabled="store.state.authorities.indexOf('新增')==-1">新增</el-button>
        <el-button type="primary" @click="editRole()" :disabled="store.state.authorities.indexOf('修改')==-1">修改</el-button>
      </div>
      <el-radio-group v-model="radio1">
        <el-radio-button
          @change="listTabsChange(radio1, item)"
          v-for="(item, index) in roleData"
          :label="item.roleId"
          :key="index"
        >
          <img src="@/assets/images/userIcon.svg" />
          {{ item.roleName }}
          <i v-if="store.state.authorities.indexOf('删除')!=-1" class="el-icon-delete" @click="deleteRoleItem(item)"></i>
        </el-radio-button>
      </el-radio-group>
    </div>
    <!-- 左侧end -->

    <!-- 右侧表格start -->
    <div class="grid-content nestingDom" style="width: calc(100% - 300px)">
      <role-info-com
        class="basicInfo"
        style="height: calc(100vh - 140px)"
        v-if="menuData.length > 0&&menuData2.length > 0"
        :menuData="menuData"
        :menuData2="menuData2"
        :checkedKeys="checkedKeys"
        :objItem="objItem"
        :radio1="radio1"
      ></role-info-com>
    </div>
    <!-- 右侧表格end -->

    <!-- 新建角色start -->
    <add-role-com
      :dialog-title="dialogTitle"
      :itemInfo="tableItem"
      @closeDialog="closeDialog"
      :flag="showDialog"
     
    ></add-role-com>
    <!-- 新建角色end -->
  </div>
</template>

<script>
import { defineComponent, ref, reactive, onMounted } from 'vue'
import * as api from '@/api/systemManage/rolePermission.js'
import { ElMessage } from 'element-plus'

import roleInfoCom from './roleInfoCom'
import addRoleCom from './addRoleCom'
import { useStore } from 'vuex'

export default defineComponent({
  components: { roleInfoCom, addRoleCom },
  setup() {
    const store = useStore()
    const radio1 = ref('1')
    const showDialog = ref(false)
    const roleData = ref([])
    const menuData = ref([])
    const menuData2 = ref([])
    const newMenuData = ref([])
    const checkedKeys = ref([])
    const objItem = ref({})

    const dialogTitle = ref('')

    // 删除左侧角色列表
    function deleteRoleItem(item) {
      // item
      // console.log(radio1.value)
      // console.log(item.roleId)
      // this.roleData.splice(params, 1)

      api.roleDelete({}, item.roleId).then((requset) => {
        if (requset.status === 'SUCCESS') {
          ElMessage.success({
            message: '删除成功',
            type: 'success',
          })
          roleList()
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    // 新增角色
    const tableItem = reactive([])

    function addRole() {
      // alert('新增')
      tableItem.value = {
        roleName: '',
        roleKey: '',
        status: '',
        roleSort: 1,
      }
      dialogTitle.value = '角色新增'
      showDialog.value = true
    }

    // 修改角色
    function editRole() {
      // alert('修改')
      // console.log(radio1.value)
      api.roleDetail({}, radio1.value).then((requset) => {
        if (requset.status === 'SUCCESS') {
          tableItem.value = {
            roleName: requset.data.roleName,
            roleKey: requset.data.roleKey,
            status: requset.data.status,
            roleSort: Number(requset.data.roleSort),
            roleId: requset.data.roleId,
          }

          dialogTitle.value = '角色修改'
          showDialog.value = true
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    const listTabsChange = (value, item) => {
      // console.log('value')
      console.log(radio1.value)
      radio1.value = value
      objItem.value = item
      // console.log('objItem.value')
      // console.log(objItem.value)
      roleMenuTreeselect()
      getAuthorityTable()

    }
    

    // 表格树结构渲染
    function roleMenuTreeselect() {
      menuData.value = []
      api.roleMenuTreeselect({}, radio1.value).then((requset) => {
        if (requset.code == 200) {
          menuData.value = requset.data.menus
          // getTreeData2(menuData.value) //对树结构返回值进行重组
          checkedKeys.value = requset.data.checkedKeys

          //当返回值没有选中菜单时,否
          if (!checkedKeys.value.length) {
            menuData.value.map((item) => {
              item.authority2 = '0'
            })

            if (radio1.value == 1) {
              menuData.value.map(function (item) {
                checkedKeys.value.push(item.id)
                checkedKeys.value.map(function (num) {
                  if (JSON.stringify(item).indexOf(num) != -1) {
                    item.authority2 = '1'
                  }
                })
              })
            }
          } else {
            menuData.value.map(function (item) {
              item.authority2 = '0'
              checkedKeys.value.map(function (num) {
                if (JSON.stringify(item).indexOf(num) != -1) {
                  item.authority2 = '1'
                }
              })
            })
          }
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

    //小吉新接口渲染右侧表格树数据
    function getAuthorityTable() {
      menuData2.value = []
      api.getAuthorityTable({roleId:radio1.value}).then((requset) => {
        if (requset.code == 200) {
          menuData2.value = requset.data
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }


    function getTreeData2(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].label == data[i].children[0].label) {
          // console.log(data[i].label)
          data[i].children = data[i].children[0].children
        }
      }
      return data
    }

    // 关闭弹框操作
    const closeDialog = () => {
      showDialog.value = false
      roleList()
      console.log('1111aaa'+radio1.value)
    }
    //角色列表
    function roleList() {

      api.roleList().then((requset) => {
        if (requset.code === 200) {
          roleData.value = requset.rows
          // var item = requset.rows[0]
          // objItem.value = {
          //   roleSort: item.roleSort,
          //   roleKey: item.roleKey,
          //   roleName: item.roleName,
          // }
        } else {
          ElMessage.error(requset.msg)
        }
      })
    }

 
    onMounted(() => {

      roleList()
      roleMenuTreeselect()
      getAuthorityTable()
    })

    return {
      radio1,
      showDialog,
      roleData,
      dialogTitle,
      tableItem,
      menuData,
      menuData2,
      newMenuData,
      checkedKeys,
      listTabsChange,
      roleMenuTreeselect,
      getAuthorityTable,
      deleteRoleItem,
      addRole,
      editRole,
      closeDialog,
      objItem,
      getTreeData2,
      store,
      
    }
  },
})
</script>

<style scoped lang="scss">
.el-button + .el-button {
  margin-left: 0;
}
.app-container.page-nesting {
  padding: 0;
  background: rgba(0, 0, 0, 0);
}
.grid-content {
  background: #fff;
  height: calc(100vh - 140px);
  overflow-y: auto;
}
.el-input__inner {
  border-radius: 20px !important;
}
.treeDom {
  width: 270px;
  position: absolute;
  left: 0;
  // margin-left: 20px;
  padding: 15px;
  // min-height: calc(100vh - 130px);
  height: calc(100vh - 140px);

}
.nestingDom {
  margin-left: 285px;
}
</style>