admin/src/pages/system/systemSet/roleManager/index.vue

<template>
  <div class="subPage">
    <div class="system-table-search">
      <div class="flex-h">
        <div class="flex-item flex-h">
          <el-button size="mini" type="success" @click='addRole'>新增角色</el-button>
        </div>
        <tableSearch value='角色名称' @exportSearchKey="searchList"></tableSearch>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box">
      <el-table :data="roles.list" stripe style="width: 100%">
        <el-table-column prop="RoleName" label="角色名">
        </el-table-column>
        <el-table-column label="创建时间" width="300">
          <template slot-scope="scope">
            <label>{{FormatDate(scope.row.CreateDate)}}</label>
          </template>
        </el-table-column>
        <el-table-column fixed='right' label="操作" width="300">
          <template slot-scope="scope">
            <el-button size="mini" type="warning" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            <el-button size="mini" type="success" @click="handlePermission(scope.$index, scope.row)">分配权限</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page.sync="currentPage"
    :page-size="10"
    layout="prev, pager, next, jumper"
    :total="roles.pagenum">
    </el-pagination>
    <el-dialog title="请选择菜单" :visible.sync="dialogTableVisible">
      <el-tree
        v-if="dialogTableVisible"
        class="flxe-h"
        :data="menus"
        :default-expand-all="true"
        :expand-on-click-node="false"
        :default-checked-keys="defaultChecked"
        ref="tree"
        show-checkbox
        @node-click="handleNodeClick"></el-tree>
        <div class="flex-h" style="justify-content: flex-end;margin-top: 1rem">
          <el-button type='success' @click="getCheckedNodes">确定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { createNamespacedHelpers, mapState } from 'vuex'
import tableSearch from '@/components/tableSearch/index'

const { mapState: mapRoleState, mapActions: mapRoleActions } = createNamespacedHelpers('role')

export default {
  name: '',
  data () {
    return {
      currentPage: 0, // 当前页码
      key: '',
      selid: '',
      dialogTableVisible: false,
    }
  },
  computed: {
    ...mapRoleState({
      roles: x => x.roleList,
      selmenus: x => x.roleMenus,
    }),
    ...mapState({
      menus: x => x.app.menus
    }),
    defaultChecked: {
      get () {
        console.log(this.selmenus)
        // const sels = (this.selmenus || []).map(x => x.MenuId)
        return []
      },
    },
  },
  components: {
    tableSearch
  },
  methods: {
    ...mapRoleActions([
      'GetRolesList',
      'DelRole',
      'SaveRoleMenus',
      'GetRoleMenu',
    ]),
    FormatDate (date) {
      console.log()
      return this.toolClass.dateFormat(date)
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleEdit (index, row) {
      // 编辑
      this.$router.push({ name: 'editRole', query: { id: row.RoleId } })
    },
    handleDelete (index, row) {
      // 删除
      console.log(index, row)
      this.$confirm('确认删除此角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.DelRole({id: row.RoleId, callback: this.delCallBack})
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    delCallBack () {
      this.$message({
        type: 'success',
        message: '删除成功!'
      })
      this.GetRolesList({name: this.key})
    },
    handlePermission (index, row) {
      this.selid = row.RoleId
      this.GetRoleMenu(this.selid)
      this.dialogTableVisible = true
      console.log(index)
    },
    handleNodeClick (node) {
      console.log(node)
    },
    searchList (key) {
      this.key = key
      this.GetRolesList({name: this.key})
    },
    addRole () {
      this.$router.push({ name: 'editRole' })
    },
    getCheckedNodes () { // 获取选中的节点
      const menuids = this.$refs.tree.getCheckedNodes().map(x => x.id).join(',')
      this.SaveRoleMenus({
        id: this.selid,
        menuids: menuids,
        callback: this.hideDialog,
      })
    },
    hideDialog () {
      this.$message({
        type: 'success',
        message: '操作成功!'
      })
      this.dialogTableVisible = false
    },
  },
  beforeMount () {
    this.GetRolesList()
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
</style>