Vue3实战三：角色管理

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>