<!--
  @description: 系统设置->角色管理
  @author: change by sunxinman
  @routerPath: /systemManagement/roleManagement
  @date:  2019/11/15-23:33
-->
<template>
  <div>
    <table-crud
      ref="tableCrud"
      :search-form="listQuery"
      :menu="true"
      search-label-width="80px"
      @on-load="getList"
    >
      <template v-slot:header>
        角色管理
      </template>
      <template v-slot:search="search">
        <el-form-item label="角色名称">
          <el-input
            v-model="listQuery.roleName"
            placeholder="请输入角色名称"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
        <el-form-item label="角色编码">
          <el-input
            v-model="listQuery.roleCode"
            placeholder="请输入角色编码"
            @keyup.enter.native="search.onSearch"
          />
        </el-form-item>
      </template>
      <template v-slot:menuLeft>
        <el-button type="primary" plain @click="handleCreate">
          新增角色
        </el-button>
      </template>
      <template v-slot:GXTable>
        <el-table
          ref="smallTable"
          v-loading="listLoading"
          :data="list"
        >
          <el-table-column type="index" label="序号" align="center" />
          <el-table-column
            label="角色名称"
            prop="roleName"
          />
          <el-table-column
            label="角色编码"
            prop="roleCode"
          />
          <el-table-column
            align="center"
            label="是否可用"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.roleType == 1 ? "是" : "否" }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" fixed="right" width="400">
            <template slot-scope="scope">
              <el-link type="primary" @click.stop="handleUpdate(scope.row)">
                [编辑]
              </el-link>
              <el-link type="primary" @click.stop="handleDelete(scope.row)">
                [删除]
              </el-link>
              <el-link type="primary" @click.stop="toSetMenu(scope.row.id)">
                [菜单权限]
              </el-link>
              <el-link type="primary" @click.stop="toSetButton(scope.row.id)">
                [按钮权限]
              </el-link>
              <el-link type="primary" @click.stop="handleUser(scope.row.id)">
                [用户]
              </el-link>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </table-crud>
    <!--新增/编辑角色弹框-->
    <roleAddDialog ref="roleAdd" @getList="callBack" />
    <!--设置权限弹框-->
    <setAccessDialog ref="setAccess" @getList="callBack" />
    <!--用户-->
    <userListByRoleDialog ref="userListByRole" />
    <!--设置按钮权限弹框-->
    <btnJurisdicSelectDialog ref="setButtonAccess" />
  </div>
</template>
<script>
import { fetchList, deleteRole } from '@/api/rolemanagment/role'
/* 组件*/
import setAccessDialog from './setAccess-dialog'
import roleAddDialog from './roleAdd-dialog'
import userListByRoleDialog from './userListByRole-dialog'
import btnJurisdicSelectDialog from '../buttonMgmt/buttonJurisdictionSelect-dialog'
export default {
  name: 'SysRoleList',
  components: {
    setAccessDialog, // 设置权限
    roleAddDialog, // 角色编辑/新增
    userListByRoleDialog, // 用户列表
    btnJurisdicSelectDialog // 设置按钮权限
  },
  data() {
    return {
      list: [], // 角色列表数据
      listLoading: true, // 表格loading
      // 搜索条件
      listQuery: {
        roleName: '',
        roleCode: ''
      }
    }
  },
  methods: {
    // 页面列表展示
    getList(params, callback) {
      fetchList(params).then(response => {
        this.listLoading = false
        this.list = Object.freeze(response.data.results)
        callback(response.data.total)
      }).catch(() => {
        this.listLoading = false
      })
    },
    // 操作回调
    callBack() {
      this.$refs.tableCrud.onSearchChange()
    },
    // 点击添加 新增角色
    handleCreate() {
      this.$refs.roleAdd.handleUpdateOrCreate('create')
    },
    // 编辑角色
    handleUpdate(row) {
      this.$refs.roleAdd.handleUpdateOrCreate('update', row)
    },
    // 点击设置菜单权限按钮
    toSetMenu(id) {
      this.$refs.setAccess.getRoleMenus(id) // 触发设置权限弹框组件getRoleMenus 方法
    },
    // 点击设置按钮权限按钮
    toSetButton(id) {
      this.$refs.setButtonAccess.open(id) // 触发设置按钮权限弹框组件open 方法
    },
    // 查看用户
    handleUser(id) {
      this.$refs.userListByRole.openUserListDialog(id)
    },
    // 删除事件
    handleDelete(row) {
      this.$confirm('确认要删除角色吗?', '提示', {
        confirmButtonText: '确 定',
        cancelButtonText: '取 消',
        confirmButtonClass: 'confirmBtn',
        cancelButtonClass: 'cancelBtn',
        type: 'warning'
      }).then(() => {
        deleteRole(row.id).then((res) => {
          this.$message.success(res.header.msg)
          this.callBack()
        })
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
