Vue-角色管理

大G哥

于 2025-06-18 11:00:24 发布

阅读量461

点赞数 6

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.youkuaiyun.com/Java_fenxiang/article/details/148753625

❤ Vue-角色管理

使用场景

角色管理主要是给不同的用户赋予不同的角色，再给角色赋予菜单权限和按钮权限进行系统的访问

👉渲染数据

1、接口封装

封装相关的接口，还是跟我们之前差不多，但是这次我们新建文件src\api\system\role.js

import request from '@/utils/request.js'


const apiTypeurl='/api/role';
// 查询角色列表
export function getRoleList (n) {
    return request({
      url: apiTypeurl,
      method: 'get',
      params:n
    })
}

// 添加角色
export function addRole (n) {
    return request({
            url: apiTypeurl,
            method: 'post',
            data:n
    })
}

// 删除角色
export function delRole (id) {
    return request({
      url:apiTypeurl+ '/'+id,
      method: 'delete'
    })      
}

// 修改角色
export function editRole(n) {
    return request({
            url: apiTypeurl,
            method: 'put',
            data:n
    })
}

// 获取角色详情
export function getRole(id) {
    return request({
      url:apiTypeurl+ '/'+id,
      method: 'get'
    })
}
// 修改角色状态 
export function editRoleStatus (RoleId,status) {
    return request({
            url: apiTypeurl+'/status/'+RoleId,
            method: 'put',
            data:status
    })
}

2、页面路由的增加

在页面的路由之中添加相关页面的路由部分src\router\index.ts

// 这里我们先简单添加个固定的菜单
{
    path: '/system/role',
    name: 'role',
    meta: { title: '角色管理', icon: '<User/>', },
    children: [],
    component: () => import('@/views/system/role/index.vue'),
},

3、查询和页面搭建

整个页面的部分我们都写到这个里面 src\views\system\role.vue

先来搭建一个简单的页面列表,这部分没有什么代码逻辑，我们直接贴code即可

👉页面搭建

<div class="bcbox">
  <el-table v-loading="loading" :data="roleList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="角色编号" prop="roleId" width="120" />
      <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="权限字符" prop="roleKey" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="显示顺序" prop="roleSort"/>
      <el-table-column label="状态" align="center" width="100">
          <template #default="scope">
              <el-switch v-model="scope.row.status" active-value="0" inactive-value="1" @change="handleStatusChange(scope.row)"></el-switch>
          </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template #default="scope">
              <el-tooltip content="修改" placement="top" v-if="scope.row.roleId !== 1">
                  <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top" v-if="scope.row.roleId !== 1">
                  <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:role:remove']"></el-button>
              </el-tooltip>
              <el-tooltip content="数据权限" placement="top" v-if="scope.row.roleId !== 1">
                  <el-button link type="primary" icon="CircleCheck" @click="handleDataScope(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
              </el-tooltip>
              <el-tooltip content="分配用户" placement="top" v-if="scope.row.roleId !== 1">
                  <el-button link type="primary" icon="User" @click="handleAuthUser(scope.row)" v-hasPermi="['system:role:edit']"></el-button>
              </el-tooltip>
          </template>
      </el-table-column>
  </el-table>
  <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
</div>

<script setup name="Role">
import {getCurrentInstance,ref,reactive,toRefs } from 'vue';
import { listRole,addRole, delRole,  updateRole,getRole,changeRoleStatus } from "@/api/system/role";
const { proxy } = getCurrentInstance();
const router = proxy.$useRouter();
const sys_normal_disable = ref([
    {label:'禁用',value:1},
    {label:'启用',value:2},
]);
const roleList = ref([]);
const open = ref(false);
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const title = ref("");
const dateRange = ref([]);
const menuOptions = ref([]);
const menuExpand = ref(false);
const menuNodeAll = ref(false);
const deptExpand = ref(true);
const deptNodeAll = ref(false);
const deptOptions = ref([]);
const openDataScope = ref(false);
const menuRef = ref(null);
const deptRef = ref(null);

/** 数据范围选项*/
const dataScopeOptions = ref([]);

const data = reactive({
    form: {},
    queryParams: {
        pageNum: 1,
        pageSize: 10,
        roleName: undefined,
        roleKey: undefined,
        status: undefined
    },
    rules: {
        roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
        roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
        roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }]
    },
});

const { queryParams, form, rules } = toRefs(data);
</script>

表单引入，表单以及结构的搭建部分其实都差不多

//引入我们的角色相关的接口

import {getRoleList, addRole, delRole, editRole, getRole, editRoleStatus} from '@/api/system/role'; //角色接口

  useEffect(() => {
    handleQuery(); 
  }, [queryParams]);
  
   const handleQuery = () => {
    console.log('handleQuery');
    getList();
  }
  
// 获取用户
const getList = async () => {
try {
  const res:any = await getRoleList(queryForm); // 假设getUser函数能够正确返回Promise对象
  if(res.code == 200){
    message.success('查询成功！');
    setDatatable(res.data);
  }else{
    console.log('查询失败，请重试！',res, 'getUser');
    message.error(res.message);
  }
} catch (error) {
  console.log('查询失败，请重试！');
}
}

查看一下我们返回的数据,这个时候查询已经做好了。

👉核对一下我们表单的数据值即可

匹配一下相关的参数然后进行显示

搭建的效果

Vue-角色管理_数据

4、新增功能

接下来搭建我们的新增部分,跟我们之前用户部分的差不多

完善弹窗部分模块

<el-dialog :title="title" v-model="open" width="680px" append-to-body>
    <el-form ref="roleRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="角色名称" prop="roleName">
            <el-input v-model="form.roleName" placeholder="请输入角色名称" />
        </el-form-item>
        <el-form-item prop="roleKey">
            <template #label>
                <span>
                    <el-tooltip content="控制器中定义的权限字符，如：@PreAuthorize(`@ss.hasRole('admin')`)" placement="top">
                        <el-icon>
                            <question-filled />
                        </el-icon>
                    </el-tooltip>
                    权限字符
                </span>
            </template>
            <el-input v-model="form.roleKey" placeholder="请输入权限字符" />
        </el-form-item>
        <el-form-item label="角色顺序" prop="roleSort">
            <el-input-number v-model="form.roleSort" controls-position="right" :min="0" />
        </el-form-item>
        <el-form-item label="状态">
            <el-radio-group v-model="form.status">
                <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value">{{ dict.label }}</el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
            <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
        </el-form-item>
    </el-form>
    <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </template>
</el-dialog>

Vue-角色管理_封装_02

添加相关的按钮方面逻辑

/** 提交按钮 */
function submitForm() {
  proxy.$refs["roleRef"].validate(valid => {
      if (valid) {
          if (form.value.roleId != undefined) {
              form.value.menuIds = getMenuAllCheckedKeys();
              updateRole(form.value).then(response => {
                  proxy.$modal.msgSuccess("修改成功");
                  open.value = false;
                  getList();
              });
          } else {
              addRole(form.value).then(response => {
                  proxy.$modal.msgSuccess("新增成功");
                  open.value = false;
                  getList();
              });
          }
      }
  });
}

尝试一下，我们新增已经成功了

5、修改部分

<el-tooltip content="修改" placement="top">
    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"></el-button>
</el-tooltip>
  /**
 * 处理详情
 *
 * @param row 表格行数据
 * @returns 返回获取到的详情数据
 */
  const handleDetail = async (row) => {
    try {
      const response = await getRole(row.role_id);
      const data = response.data;
      return data;
    } catch (error) {
      message.error('获取数据详情失败，请重试！');
    }
  }

完善相关提交逻辑

尝试一下，修改已经好了

6、删除部分

<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"></el-button>

/** 删除按钮操作 */
function handleDelete(row) {
    const roleIds = row.roleId || ids.value;
    proxy.$modal.confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?').then(function() {
        return delRole(roleIds);
    }).then(() => {
        getList();
        proxy.$modal.msgSuccess("删除成功");
    }).catch(() => {});
}