1、路由配置
//布局页
{
path: '/layout',
name: 'Layout',
component: () => import('../views/Layout.vue'),
children: [
//首页
{
path: 'home',
name: 'Home',
component: () => import('../views/home/Home.vue')
},
//邮件
{
path: 'email',
name: 'Email',
component: () => import('../views/home/Email.vue')
},
//消息
{
path: 'message',
name: 'Message',
component: () => import('../views/home/Message.vue')
},
//个人中心
{
path: 'mine',
name: 'Mine',
component: () => import('../views/admin/Mine.vue')
},
//修改密码
{
path: 'resetPwd',
name: 'ResetPwd',
component: () => import('../views/admin/ResetPwd.vue')
},
//角色管理
{
path: 'role',
name: 'Role',
component: () => import('../views/role/Role.vue')
},
//账户管理
{
path: 'admin',
name: 'Admin',
component: () => import('../views/admin/Admin.vue')
},
//客户类型管理
{
path: 'roomType',
name: 'RoomType',
component: () => import('../views/roomType/RoomType.vue')
},
{
path: 'room',
name: 'Room',
component: () => import('../views/room/Room.vue')
},
{
path: 'guest',
name: 'Guest',
component: () => import('../views/guest/Guest.vue')
},
{
path: 'privage',
name: 'Privage',
component: () => import('../views/privage/Privage.vue')
}
]
}
2、el-menu组件启动路由模式
3、api/role.js 接口方法
//角色APi
import { $get, $post } from "../utils/request.js"
import { $msg_s, $msg_e, $confirm } from '../utils/msg.js'
//返回所有的角色信息
export let list = async () => {
// let data = await $get('Role/List')
let data = "[{'roleId':'1','roleName':'系统管理员'},{'roleId':'2','roleName':'普通管理员'}]"
return data
}
export let add = async (params) => {
if (!checkImput(params)) {
return false
}
let { success, message } = await $post('Role/Add', params)
if (success) {
$msg_s(message)
} else {
$msg_e(message)
}
return success
}
export let update = async (params) => {
if (!checkImput(params)) {
return false
}
let { success, message } = await $post('Role/Update', params)
if (success) {
$msg_s(message)
} else {
$msg_e(message)
}
return success
}
//验证方法
let checkImput = (params) => {
if (!params.roleName) {
$msg_e('请输入角色名称')
return false
} else {
return true
}
}
//删除角色
export let del = async (params) => {
//提示是否确认删除
await $confirm('确定是否删除')
let { success, message } = await $post('Role/Delete', params)
if (success) {
$msg_s(message)
} else {
$msg_e(message)
}
return success
}
4、Role.vue
<template>
<div class="search">
<el-button size="small" type="primary" @click="openDrawer = true">添加</el-button>
</div>
<el-table size="" :data="tableData" style="width: 100%">
<el-table-column prop="roleId" label="角色编号" width="180" />
<el-table-column prop="roleName" label="角色名称" width="180" />
<el-table-column fixed="right" label="操作" width="180">
<template #default="scope">
<el-button size="small" type="warning" @click="handleEdit(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-drawer v-model="openDrawer" :title="isAdd ? '添加角色' : '修改角色'" size="30%" direction="rtl" :before-close="drawerClose">
<div class="edititem">
<span>角色名称:</span>
<div><el-input v-model="formData.roleName" placeholder="请输入角色" /></div>
</div>
<div class="edititem">
<span></span>
<div>
<el-button size="small" type="primary" @click="editForm">{{ isAdd ? '添加' : '修改' }}</el-button>
<el-button size="small" type="default" @click="clearFormData">取消</el-button>
</div>
</div>
</el-drawer>
</template>
<script>
import { list, add, update, del } from '../../api/role'
import { reactive, toRefs, onBeforeMount, createHydrationRenderer } from 'vue'
export default {
name: 'Role',
setup() {
let data = reactive({
//表格数据
tableData: [],
//是否打开抽屉
openDrawer: false,
//表单数据
formData: {
roleName: '',
roleId: ''
},
//是否是添加操作
isAdd: true
})
data.tableData = [{ 'roleId': '1', 'roleName': '系统管理员' }, { 'roleId': '2', 'roleName': '普通管理员' }]
let loadTable = async () => {
// let r = await list()
// data.tableData = r
data.formData
console.log(data.formData)
}
//执行加载表格数据的方法
loadTable()
let editForm = async () => {
let r = false
//判断是执行添加还是修改
if (data.isAdd) {
r = await add(data.formData)
} else {
r = await update(data.formData)
}
if (r) {
loadTable();
}
}
//关闭抽屉
let drawerClose = () => {
data.openDrawer = false
add.isAdd = true
clearFormData()
}
//执行修改
let handleEdit = (row) => {
data.formData = { ...row }
data.isAdd = false
data.openDrawer = true
}
//执行删除
let handleDelete = async (row) => {
let { roleId } = row
let r = await del({ roleId })
//删除成功,刷新页面
if (r) {
loadTable
}
}
let clearFormData = () => {
data.formData = {
roleName: ''
}
}
return {
...toRefs(data),
editForm,
drawerClose,
handleEdit,
handleDelete,
clearFormData
}
}
}
</script>
<style lang="scss" scoped></style>