角色模块

src/api/system/role/index.ts

@@ -1,6 +1,5 @@
 import request from "@/utils/request";
 import { AxiosPromise } from "axios";
-import { RoleQuery, RolePageResult, RoleForm } from "./types";
 
 /**
  * 获取角色分页数据
@@ -8,12 +7,12 @@ import { RoleQuery, RolePageResult, RoleForm } from "./types";
  * @param queryParams
  */
 export function getRolePage(
-  queryParams?: RoleQuery
-): AxiosPromise<RolePageResult> {
+  queryParams?: any
+): AxiosPromise<any> {
   return request({
-    url: "/api/v1/roles/page",
-    method: "get",
-    params: queryParams,
+    url: "/api/v1/sys/role/page",
+    method: "post",
+    data: queryParams,
   });
 }
 
@@ -23,7 +22,7 @@ export function getRolePage(
  * @param queryParams
  */
 export function getRoleOptions(
-  queryParams?: RoleQuery
+  queryParams?: any
 ): AxiosPromise<OptionType[]> {
   return request({
     url: "/api/v1/roles/options",
@@ -37,9 +36,9 @@ export function getRoleOptions(
  *
  * @param queryParams
  */
-export function getRoleMenuIds(roleId: number): AxiosPromise<number[]> {
+export function getRoleMenuIds(roleId: number): AxiosPromise<any> {
   return request({
-    url: "/api/v1/roles/" + roleId + "/menuIds",
+    url: "/api/v1/sys/role/queryMenuIds/" + roleId,
     method: "get",
   });
 }
@@ -54,21 +53,9 @@ export function updateRoleMenus(
   data: number[]
 ): AxiosPromise<any> {
   return request({
-    url: "/api/v1/roles/" + roleId + "/menus",
-    method: "put",
-    data: data,
-  });
-}
-
-/**
- * 获取角色详情
- *
- * @param id
- */
-export function getRoleForm(id: number): AxiosPromise<RoleForm> {
-  return request({
-    url: "/api/v1/roles/" + id + "/form",
-    method: "get",
+    url: "/api/v1/sys/role/saveMenus",
+    method: "post",
+    data: {id: roleId,menuIds: data},
   });
 }
 
@@ -77,9 +64,9 @@ export function getRoleForm(id: number): AxiosPromise<RoleForm> {
  *
  * @param data
  */
-export function addRole(data: RoleForm) {
+export function addRole(data: any) {
   return request({
-    url: "/api/v1/roles",
+    url: "/api/v1/sys/role/add",
     method: "post",
     data: data,
   });
@@ -91,22 +78,22 @@ export function addRole(data: RoleForm) {
  * @param id
  * @param data
  */
-export function updateRole(id: number, data: RoleForm) {
+export function updateRole( data: any) {
   return request({
-    url: "/api/v1/roles/" + id,
-    method: "put",
+    url: "/api/v1/sys/role/update",
+    method: "post",
     data: data,
   });
 }
 
 /**
- * 批量删除角色，多个以英文逗号(,)分割
  *
  * @param ids
  */
-export function deleteRoles(ids: string) {
+export function deleteRoles(ids: any) {
   return request({
-    url: "/api/v1/roles/" + ids,
-    method: "delete",
+    url: "/api/v1/sys/role/batch-del",
+    method: "post",
+    data: {ids: ids}
   });
 }

src/api/system/role/types.ts

@@ -1,78 +0,0 @@
-/**
- * 角色查询参数
- */
-export interface RoleQuery extends PageQuery {
-  keywords?: string;
-}
-
-/**
- * 角色分页对象
- */
-export interface RolePageVO {
-  /**
-   * 角色编码
-   */
-  code?: string;
-
-  /**
-   * 角色ID
-   */
-  id?: number;
-  /**
-   * 角色名称
-   */
-  name?: string;
-  /**
-   * 排序
-   */
-  sort?: number;
-  /**
-   * 角色状态
-   */
-  status?: number;
-  /**
-   * 创建时间
-   */
-  createTime?: Date;
-  /**
-   * 修改时间
-   */
-  updateTime?: Date;
-}
-
-/**
- * 角色分页
- */
-export type RolePageResult = PageResult<RolePageVO[]>;
-
-/**
- * 角色表单对象
- */
-export interface RoleForm {
-  /**
-   * 角色ID
-   */
-  id?: number;
-
-  /**
-   * 角色编码
-   */
-  code: string;
-  /**
-   * 数据权限
-   */
-  dataScope?: number;
-
-  /**
-   * 角色名称
-   */
-  name: string;
-  /**
-   * 排序
-   */
-  sort?: number;
-  /**
-   * 角色状态(1-正常；0-停用)
-   */
-  status?: number;
-}

src/views/system/role/index.vue

@@ -2,7 +2,6 @@
 import {
   getRolePage,
   updateRole,
-  getRoleForm,
   addRole,
   deleteRoles,
   getRoleMenuIds,
@@ -10,8 +9,6 @@ import {
 } from "@/api/system/role";
 import { getMenuOptions } from "@/api/system/menu";
 
-import { RolePageVO, RoleForm, RoleQuery } from "@/api/system/role/types";
-
 defineOptions({
   name: "Role",
   inheritAttrs: false,
@@ -25,35 +22,35 @@ const loading = ref(false);
 const ids = ref<number[]>([]);
 const total = ref(0);
 
-const queryParams = reactive<RoleQuery>({
+const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
 });
 
-const roleList = ref<RolePageVO[]>();
+const roleList = ref<[]>();
 
 const dialog = reactive({
   title: "",
   visible: false,
 });
 
-const formData = reactive<RoleForm>({
-  sort: 1,
-  status: 1,
-  code: "",
-  name: "",
+const formData = ref({
+  scope: 0,
+  state: 0,
+  roleCode: "",
+  roleName: "",
 });
 
 const rules = reactive({
-  name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
-  dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
-  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
+  roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+  roleCode: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
+  scope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
+  state: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
 const menuDialogVisible = ref(false);
 
-const menuList = ref<OptionType[]>([]);
+const menuList = ref([]);
 
 interface CheckedRole {
   id?: number;
@@ -66,8 +63,8 @@ function handleQuery() {
   loading.value = true;
   getRolePage(queryParams)
     .then(({ data }) => {
-      roleList.value = data.list;
-      total.value = data.total;
+      roleList.value = data.records;
+      total.value = data.totalCount;
     })
     .finally(() => {
       loading.value = false;
@@ -86,15 +83,17 @@ function handleSelectionChange(selection: any) {
 }
 
 /** 打开角色表单弹窗 */
-function openDialog(roleId?: number) {
+function openDialog(row?: any) {
   dialog.visible = true;
-  if (roleId) {
+  if (row) {
     dialog.title = "修改角色";
-    getRoleForm(roleId).then(({ data }) => {
-      Object.assign(formData, data);
-    });
+    Object.assign(formData.value, row);
   } else {
     dialog.title = "新增角色";
+    formData.value.scope = 0
+    formData.value.state = 0
+    formData.value.roleCode = ""
+    formData.value.roleName = ""
   }
 }
 
@@ -103,9 +102,9 @@ function handleSubmit() {
   roleFormRef.value.validate((valid: any) => {
     if (valid) {
       loading.value = true;
-      const roleId = formData.id;
+      const roleId = formData.value.id;
       if (roleId) {
-        updateRole(roleId, formData)
+        updateRole(formData.value)
           .then(() => {
             ElMessage.success("修改成功");
             closeDialog();
@@ -113,7 +112,7 @@ function handleSubmit() {
           })
           .finally(() => (loading.value = false));
       } else {
-        addRole(formData)
+        addRole(formData.value)
           .then(() => {
             ElMessage.success("新增成功");
             closeDialog();
@@ -155,7 +154,7 @@ function handleDelete(roleId?: number) {
     type: "warning",
   }).then(() => {
     loading.value = true;
-    deleteRoles(roleIds)
+    deleteRoles(ids.value)
       .then(() => {
         ElMessage.success("删除成功");
         resetQuery();
@@ -165,12 +164,12 @@ function handleDelete(roleId?: number) {
 }
 
 /** 打开分配菜单弹窗 */
-function openMenuDialog(row: RolePageVO) {
+function openMenuDialog(row: any) {
   const roleId = row.id;
   if (roleId) {
     checkedRole = {
       id: roleId,
-      name: row.name,
+      name: row.roleName,
     };
     menuDialogVisible.value = true;
     loading.value = true;
@@ -199,7 +198,8 @@ function handleRoleMenuSubmit() {
   if (roleId) {
     const checkedMenuIds: number[] = menuRef.value
       .getCheckedNodes(false, true)
-      .map((node: any) => node.value);
+      .map((node: any) => {
+        return node.id});
 
     loading.value = true;
     updateRoleMenus(roleId, checkedMenuIds)
@@ -214,7 +214,7 @@ function handleRoleMenuSubmit() {
   }
 }
 
-onMounted(() => {
+onMounted?.(() => {
   handleQuery();
 });
 </script>
@@ -226,7 +226,7 @@ onMounted(() => {
         <el-form-item prop="keywords" label="关键字">
           <el-input
             v-model="queryParams.keywords"
-            placeholder="角色名称"
+            placeholder="编码/名称"
             clearable
             @keyup.enter="handleQuery"
           />
@@ -243,11 +243,12 @@ onMounted(() => {
 
     <el-card shadow="never" class="table-container">
       <template #header>
-        <el-button type="success" @click="openDialog()"
+        <el-button type="primary" v-hasPerm="['sys:role:add']" @click="openDialog()"
           ><i-ep-plus />新增</el-button
         >
         <el-button
           type="danger"
+          v-hasPerm="['sys:role:del']"
           :disabled="ids.length === 0"
           @click="handleDelete()"
           ><i-ep-delete />删除</el-button
@@ -263,24 +264,24 @@ onMounted(() => {
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
-        <el-table-column label="角色名称" prop="name" min-width="100" />
-        <el-table-column label="角色编码" prop="code" width="150" />
-
+        <el-table-column label="角色编码" prop="roleCode"/>
+        <el-table-column label="角色名称" prop="roleName"/>
         <el-table-column label="状态" align="center" width="100">
           <template #default="scope">
-            <el-tag v-if="scope.row.status === 1" type="success">正常</el-tag>
+            <el-tag v-if="scope.row.state === 0" type="success">正常</el-tag>
             <el-tag v-else type="info">禁用</el-tag>
           </template>
         </el-table-column>
 
-        <el-table-column label="排序" align="center" width="80" prop="sort" />
-
+        <el-table-column label="创建时间" align="center" prop="created" />
+        <el-table-column label="创建人" align="center" prop="creator" />
         <el-table-column fixed="right" label="操作" width="220">
           <template #default="scope">
             <el-button
               type="primary"
               size="small"
               link
+              v-hasPerm="['sys:role:dis']"
               @click="openMenuDialog(scope.row)"
             >
               <i-ep-position />分配权限
@@ -289,18 +290,19 @@ onMounted(() => {
               type="primary"
               size="small"
               link
-              @click="openDialog(scope.row.id)"
+              v-hasPerm="['sys:role:edit']"
+              @click="openDialog(scope.row)"
             >
               <i-ep-edit />编辑
             </el-button>
-            <el-button
+<!--            <el-button
               type="primary"
               size="small"
               link
               @click="handleDelete(scope.row.id)"
             >
               <i-ep-delete />删除
-            </el-button>
+            </el-button>-->
           </template>
         </el-table-column>
       </el-table>
@@ -328,15 +330,15 @@ onMounted(() => {
         label-width="100px"
       >
         <el-form-item label="角色名称" prop="name">
-          <el-input v-model="formData.name" placeholder="请输入角色名称" />
+          <el-input v-model="formData.roleName" placeholder="请输入角色名称" />
         </el-form-item>
 
         <el-form-item label="角色编码" prop="code">
-          <el-input v-model="formData.code" placeholder="请输入角色编码" />
+          <el-input v-model="formData.roleCode" placeholder="请输入角色编码" />
         </el-form-item>
 
         <el-form-item label="数据权限" prop="dataScope">
-          <el-select v-model="formData.dataScope">
+          <el-select v-model="formData.scope">
             <el-option :key="0" label="全部数据" :value="0" />
             <el-option :key="1" label="部门及子部门数据" :value="1" />
             <el-option :key="2" label="本部门数据" :value="2" />
@@ -345,20 +347,11 @@ onMounted(() => {
         </el-form-item>
 
         <el-form-item label="状态" prop="status">
-          <el-radio-group v-model="formData.status">
-            <el-radio :value="1">正常</el-radio>
-            <el-radio :value="0">停用</el-radio>
+          <el-radio-group v-model="formData.state">
+            <el-radio :value="0">正常</el-radio>
+            <el-radio :value="1">停用</el-radio>
           </el-radio-group>
         </el-form-item>
-
-        <el-form-item label="排序" prop="sort">
-          <el-input-number
-            v-model="formData.sort"
-            controls-position="right"
-            :min="0"
-            style="width: 100px"
-          />
-        </el-form-item>
       </el-form>
 
       <template #footer>
@@ -373,18 +366,19 @@ onMounted(() => {
     <el-dialog
       v-model="menuDialogVisible"
       :title="'【' + checkedRole.name + '】权限分配'"
-      width="800px"
+      width="550px"
     >
       <el-scrollbar v-loading="loading" max-height="600px">
         <el-tree
           ref="menuRef"
-          node-key="value"
+          node-key="id"
           show-checkbox
+          :props="{ children: 'childs', label: 'menuName',value: 'id', disabled: '' }"
           :data="menuList"
-          :default-expand-all="true"
+          :default-expand-all="false"
         >
           <template #default="{ data }">
-            {{ data.label }}
+            {{ data.menuName }}
           </template>
         </el-tree>
       </el-scrollbar>