123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189 |
- <template>
- <div class="main-contain">
- <div class="position">
- <bread-crumb :crumbs='crumbs'></bread-crumb>
- <el-button type="primary" size="small" icon="el-icon-circle-plus" style="float:right;" @click="addRoleAction">新增</el-button>
- </div>
- <div class="app-container">
- <el-table :data="roles" v-loading="loading_roles" border :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}">
- <el-table-column label="角色名称" prop="name" min-width="20%" align="center"></el-table-column>
- <el-table-column label="角色描述" prop="intro" min-width="25%" align="center"></el-table-column>
- <el-table-column label="状态" min-width="15%" align="center">
- <template slot-scope="scope">
- <div v-if="scope.row.status == 1" style="color: #67C23A; font-size:20px;">
- <li class="el-icon-success"></li>
- </div>
- <div v-else style="color: #F56C6C; font-size:20px;">
- <li class="el-icon-error"></li>
- </div>
- </template>
- </el-table-column>
- <el-table-column label="操作" width="180" align="center">
- <template slot-scope="scope">
- <router-link :to='{ path:"/role/perview", query:{ id:scope.row.id }}'>
- <el-tooltip class="item" effect="dark" content="权限设置" placement="top">
- <el-button type="warning" icon="el-icon-setting" size="small"></el-button>
- </el-tooltip>
- </router-link>
- <el-tooltip class="item" effect="dark" content="编辑" placement="top">
- <el-button type="primary" size="small" icon="el-icon-edit-outline" @click="modifyRoleAction(scope.row)"></el-button>
- </el-tooltip>
-
- <el-tooltip class="item" effect="dark" content="移除" placement="top">
- <el-button type="danger" size="small" icon="el-icon-delete" v-if="scope.row.status === 1" @click="disableRoleAction(scope.row)"></el-button>
- </el-tooltip>
-
- <el-tooltip class="item" effect="dark" content="恢复" placement="top">
- <el-button type="info" size="small" icon="el-icon-refresh" v-if="scope.row.status !== 1" @click="recoverRoleAction(scope.row)"></el-button>
- </el-tooltip>
-
- </template>
- </el-table-column>
- </el-table>
-
- <el-row style="margin-top: 15px;" v-if="role_total_count > 10">
- <el-col :span="24">
- <el-pagination :total="role_total_count" :current-page.sync="current_page" @current-change="pageChange" :page-size="10" layout="total, prev, pager, next, jumper"></el-pagination>
- </el-col>
- </el-row>
-
- <edit-role ref="edit_role" @did-add-role="didAddRole" @did-edit-role="didModifyRole"></edit-role>
- </div>
- </div>
- </template>
-
- <script>
- import EditRole from './components/EditRole.vue'
- import { getRoles, setRoleStatus } from '@/api/role/role'
- import BreadCrumb from '@/scrm_pages/components/bread-crumb'
-
- export default {
- components: {
- EditRole,
- BreadCrumb
- },
- data: function() {
- return {
- crumbs: [
- { path: false, name: '权限管理' },
- { path: false, name: '角色管理' }
- ],
- loading_roles: true,
- roles: [],
- role_total_count: 0,
- current_page: 1
- }
- },
- created: function() {
- this.requestRoleWithPage(1)
- },
- methods: {
- requestRoleWithPage: function(page) {
- this.roles.splice(0, this.roles.length)
- this.loading_roles = true
- getRoles(page).then(rs => {
- this.loading_roles = false
- const resp = rs.data
- if (resp.state === 1) {
- this.roles.push(...resp.data.roles)
- this.role_total_count = resp.data.total_count
- } else {
- this.$message.error(resp.msg)
- }
- }).catch(err => {
- this.loading_roles = false
- this.$message.error(err)
- })
- },
- addRoleAction: function() {
- // 父组件调用子组件方法 https://segmentfault.com/a/1190000009525355
- this.$refs.edit_role.show()
- },
- modifyRoleAction: function(row) {
- this.$refs.edit_role.modify(row.id, row.name, row.intro)
- },
- disableRoleAction: function(row) {
- this.$msgbox({
- title: '提示',
- message: '是否确定要移除该角色',
- showCancelButton: true,
- confirmButtonText: '确定',
- cancelButtonText: '取消',
- type: 'warning',
- beforeClose: (action, instance, done) => {
- if (action === 'confirm') {
- instance.confirmButtonLoading = true
- instance.confirmButtonText = '移除中...'
-
- setRoleStatus(row.id, false).then(rs => {
- done()
- instance.confirmButtonLoading = false
-
- const resp = rs.data
- if (resp.state === 1) {
- row.status = 0
- } else {
- this.$message.error(resp.msg)
- }
- }).catch(err => {
- done()
- this.$message.error(err)
- instance.confirmButtonLoading = false
- })
- } else {
- done()
- }
- }
- })
- },
- recoverRoleAction: function(row) {
- const loading = this.$loading({
- lock: true,
- text: '正在恢复角色...',
- spinner: 'el-icon-loading',
- background: 'rgba(0, 0, 0, 0.7)'
- })
-
- setRoleStatus(row.id, true).then(rs => {
- loading.close()
-
- const resp = rs.data
- if (resp.state === 1) {
- row.status = 1
- } else {
- this.$message.error(resp.msg)
- }
- }).catch(err => {
- loading.close()
- this.$message.error(err)
- })
- },
- didAddRole: function(id, name, intro, status) {
- this.roles.push({ id: id, name: name, intro: intro, status: status })
- },
- didModifyRole: function(id, name, intro) {
- this.roles.forEach(role => {
- if (role.id === id) {
- role.name = name
- role.intro = intro
- return false
- }
- })
- },
- pageChange: function(nextPage) {
- this.requestRoleWithPage(nextPage)
- }
- }
- }
- </script>
- <style rel="stylesheet/scss" lang="scss" scoped>
-
- .el-button+.el-button{
- margin-left:0!important;
- }
-
- </style>
-
-
-
|