datang-admin/src/views/privilegeManagement/role/index.vue

<template>
    <div class="roles">
        <form-container label="名称" @submit="submitForm"></form-container>
        <div class="role">
            <el-row>
                <el-col :span="4" :xs="6" :md="5">
                    <div class="grid-content bg-purple">
                        <router-link :to="`/privilegeManagement/role/permissions?add=true`">
                            <el-button type="primary"  v-if="$store.state.user.showBtnList.add">
                                新增角色
                            </el-button>
                        </router-link>
                        <el-table @row-click="openDetails" :data="lists" style="width: 100%">
                            <el-table-column label="名称">
                                <template slot-scope="role">
                                   <span :class="{'select':role.row.isSel}" type="text" size="small">
                                        {{role.row.roleName}}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column
                                fixed="right"
                                label="操作"
                            >
                                <template slot-scope="lists">
                                   <span  v-if="$store.state.user.showBtnList.delete" :class="{'select':lists.row.isSel}" type="text" size="small" class="option-span" @click="removeItem(lists.row.roleId)">
                                        删除
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="pagination">
                            <el-pagination
                                background
                                :page-size="params.pageSize"
                                layout="prev, pager, next"
                                :total="count"
                                @current-change="currentChange"
                            >
                            </el-pagination>
                        </div>
                    </div>
                </el-col>
                <el-col :span="20" :xs="18" :md="19" style="border-left: 1px solid #d9d9d9">
                    <Permissions :roleId="roleId" :roleName="roleName" @success="success" @getList="getList"></Permissions>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script>
    const FormContainer = () => import('./form.vue');
    const Permissions = () => import('./permissions.vue');
    import { GET_ROLE_LIST, DELETE_ROLE } from '@/api/jurisdiction'
    import Alert from "@/utils/alert";

    export default {
        name: "index",
        components: {
            FormContainer,
            Permissions
        },
        data() {
            return {
                roleId: '',
                roleName: '',
                index: 0,
                params: {
                    roleName: '',
                    pageNum: 1,
                    pageSize: 10,
                },
                lists: [],
                count: 0,
            }
        },
        mounted() {
            this.getList()
        },
        methods: {

            /**
             * 获取列表数据
             */
            getList(showData) {
                GET_ROLE_LIST(this.params).then(res => {
                    if(res.code === 200) {
                        this.lists = res.data.list;
                        this.count = res.data.total - 0;
                        if(showData && showData.roleId) {
                            this.openDetails(showData)
                        }
                    } else {
                        Alert.fail('查询角色列表失败,请重试')
                    }
                });
            },

            // 角色列表分页
            currentChange(res) {
                this.params = {
                    ...this.params,
                    pageSize: res,
                }
                this.getList()
            },

            success() {
                this.getList()
            },

            /**
             * 表格行事件
             */
            openDetails(row) {
                let lists = this.lists.map((item, index) => {
                    item.isSel = false;
                    if (row.roleId == item.roleId) {
                        item.isSel = true;
                        this.index = index;
                    }
                    return item
                });
                this.roleId = row.roleId;
                this.roleName = row.roleName;
                this.lists = lists;
            },

            removeItem(roleId) {
                let params = { roleId };
                this.$confirm('确定删除此角色嘛？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    DELETE_ROLE(params).then((res) => {
                        let lists = [];
                        this.lists.map((item) => {
                            if (item.roleId != roleId) {
                                lists.push(item);
                            }
                            return item;
                        });
                        this.lists = lists;
                    });
                    Alert.success("删除成功");
                    this.getList()
                })
            },

            /**
             * 查询
             */
            submitForm(res) {
                this.params = {
                    ...this.params,
                    roleName: res.roleName
                };
                this.getList()
            },
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .roles {
        height: 100%;

        .option-span {
            color: #a90500;
            cursor: pointer;
        }

        .role {
            margin-top: 20px;
        }

        > .grid-content {
            background: #fff;
            padding: 20px;
            border-right: 1px solid #d9d9d9;

            .option-span {
                color: #a90500;
                cursor: pointer;
            }
        }

        .detail {
            padding: 15px 10px;
            position: relative;
            border-bottom: 1px solid #d9d9d9;

            span {
                font-weight: bold;
            }

            div {
                position: absolute;
                top: 0px;
                right: 0;
            }


        }

        .grid-content {
            background: #fff;
            padding: 12px;

            .rowBg:nth-child(2n+1) .bg-purple-dark {
                background: rgba(233, 233, 233, 1);
                padding: 12px;
            }

            .bg-purple-dark {
                > .el-switch {
                    min-width: 134px;
                }
            }
        }

        .child-item {
            display: inline-block;
            margin: 0 35px;
        }

        .cell .select {
            font-size: 18px;
            font-weight: bold;
        }
    }

</style>