admin/src/pages/system/systemSet/characterManger/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">新增角色</el-button>
        </div>
        <tableSearch value='分配权限' @exportSearchKey="searchList"></tableSearch>
      </div>
      <div class="moreFilter"></div>
    </div>
    <div class="system-table-box">
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column fixed='left' prop="role" label="角色标识" width="150">
        </el-table-column>
        <el-table-column prop="roleName" label="角色名" width="150">
        </el-table-column>
        <el-table-column prop="disable" label="是否禁用角色" width="150">
        </el-table-column>
        <el-table-column prop="permission" label="数据权限">
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="200">
        </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="100">
    </el-pagination>
  </div>
</template>

<script>
import tableSearch from '@/components/tableSearch/index'

export default {
  name: '',
  data () {
    return {
      currentPage: 0, // 当前页码
      tableSearch: {
        // 表格搜索条件
        key: '111' // 搜索关键字
      },
      tableData: [
        {
          role: '赵日天',
          roleName: '赵日天',
          disable: '赵日地',
          permission: '赵日天',
          createTime: '赵爸爸'
        }, {
          role: '赵日天',
          roleName: '赵日天',
          disable: '赵日地',
          permission: '赵日天',
          createTime: '赵爸爸'
        }, {
          role: '赵日天',
          roleName: '赵日天',
          disable: '赵日地',
          permission: '赵日天',
          createTime: '赵爸爸'
        }, {
          role: '赵日天',
          roleName: '赵日天',
          disable: '赵日地',
          permission: '赵日天',
          createTime: '赵爸爸'
        }, {
          role: '赵日天',
          roleName: '赵日天',
          disable: '赵日地',
          permission: '赵日天',
          createTime: '赵爸爸'
        }, {
          role: '赵日天',
          roleName: '赵日天',
          disable: '赵日地',
          permission: '赵日天',
          createTime: '赵爸爸'
        }, {
          role: '赵日天',
          roleName: '赵日天',
          disable: '赵日地',
          permission: '赵日天',
          createTime: '赵爸爸'
        }, {
          role: '赵日天',
          roleName: '赵日天',
          disable: '赵日地',
          permission: '赵日天',
          createTime: '赵爸爸'
        }
      ]
    }
  },
  components: {
    tableSearch
  },
  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
    },
    handleEdit (index, row) {
      // 编辑
      console.log(index, row)
    },
    handleDelete (index, row) {
      // 删除
      console.log(index, row)
      this.$confirm('确认删除此用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    handlePermission (index, row) {
      console.log(index)
    },
    searchList (key) {
      // 搜索列表
      console.log(key)
    }
  }
}
</script>

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