<template> <div class="flex"> <el-card shadow="always" :body-style="{ padding: '10px' }"> <div class="flex justify-between items-center" style="width: 300px"> <div class="text-16px font-bold">角色列表</div> <el-button type="primary" style="padding: 0px" text @click="openForm('create')" v-hasPermi="['basic:role:add']" > 新增 </el-button> </div> <div class="border-top-1px mt-10px pt-10px"> <div class="flex justify-between items-center pl-10px pr-10px cursor-pointer pt-5px pb-5px" v-for="(item, index) in list" :key="index" :class="{ actived: libraryIndex == index }" @click="libraryIndex = index" > <div class="flex-1 text-14px">{{ item.name }}</div> <div class="ml-10px"> <el-button type="primary" style="padding: 0px" text v-hasPermi="['basic:role:update']" @click="openForm('update', item.id)" > 修改 </el-button> <el-button type="primary" class="ml-10px" style="padding: 0px" text v-hasPermi="['basic:role:delete']" @click="handleDelete(item.id)" > 删除 </el-button> </div> </div> <Pagination v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNo" layout="total, prev, pager, next" small :total="total" @pagination="getList" /> </div> </el-card> <el-card class="ml-20px" style="flex: 1" shadow="always" :body-style="{ padding: '10px' }"> <el-tabs v-if="list && list.length" v-model="roleOperateIndex" type="card"> <el-tab-pane label="角色用户" :name="1"> <RoleEmployee v-if="roleOperateIndex == 1" :roleId="list[libraryIndex].id" /> </el-tab-pane> <el-tab-pane label="菜单权限" :name="2"> <RoleAssignMenuForm v-if="roleOperateIndex == 2" ref="assignMenuFormRef" :roleId="list[libraryIndex].id" @success="getList" /> </el-tab-pane> <el-tab-pane label="数据权限" :name="3"> <RoleDataPermissionForm v-if="roleOperateIndex == 3" ref="dataPermissionFormRef" :roleId="list[libraryIndex].id" @success="getList" /> </el-tab-pane> </el-tabs> </el-card> <!-- 表单弹窗:添加/修改 --> <RoleForm ref="formRef" @success="getList" /> </div> </template> <script lang="ts" name="SystemRole" setup> import RoleForm from './RoleForm.vue' import RoleEmployee from './Comp/RoleEmployee.vue' import RoleAssignMenuForm from './RoleAssignMenuForm.vue' import RoleDataPermissionForm from './RoleDataPermissionForm.vue' import * as RoleApi from '@/api/system/role' const message = useMessage() // 消息弹窗 const { t } = useI18n() // 国际化 const total = ref(0) // 列表的总页数 const list = ref<any>([]) // 列表的数据 const libraryIndex = ref(0) const queryParams = reactive({ pageNo: 1, pageSize: 20 }) /** 查询角色列表 */ const getList = async () => { const data = await RoleApi.getRolePage(queryParams) list.value = data.list total.value = data.total } /** 添加/修改操作 */ const formRef = ref() const openForm = (type: string, id?: number) => { formRef.value.open(type, id) } /** 数据权限操作 */ const dataPermissionFormRef = ref() /** 菜单权限操作 */ const assignMenuFormRef = ref() /** 删除按钮操作 */ const handleDelete = async (id: number) => { try { // 删除的二次确认 await message.delConfirm() // 发起删除 await RoleApi.deleteRole(id) message.success(t('common.delSuccess')) // 刷新列表 await getList() } catch {} } const roleOperateIndex = ref(1) /** 初始化 **/ onMounted(() => { getList() }) </script> <style lang="scss" scoped> .actived { background-color: var(--el-color-primary-light-9); } </style>