修改菜单管理页面，角色管理页面，修改后台返回的路由数据适配项目

src/api/account/menu.ts

@@ -21,7 +21,7 @@ const MenuApi = {
     return request<any, MenuVO>({
       url: `${baseURL}/detail`,
       method: "get",
-      data: { id }
+      params: { id }
     });
   },
   add(data: addRequest) {
@@ -195,7 +195,7 @@ export interface editRequest {
   /**
    * 上级菜单，不传递则为顶级菜单
    */
-  pid?: number;
+  pid: number | string | null;
   title: string;
   [property: string]: any;
 }

src/api/account/role.ts

@@ -17,20 +17,29 @@ const RoleApi = {
       data,
     });
   },
-  update(data: editRequest) {
+  update(id: number | string | null, data: editRequest) {
-    return request<any, editResponse>({
+    const requestData = { ...data, id };
+    return request<any>({
       url: `${baseURL}`,
       method: "put",
-      data,
+      data: requestData,
     });
   },
   delete(data: delRequest) {
     return request<any, delResponse>({
       url: `${baseURL}`,
-      method: "put",
+      method: "delete",
       data,
     });
   },
+  // 获取角色对应的菜单id
+  getMenu(id: number) {
+    return request<any>({
+      url: `${baseURL}/menu`,
+      method: "get",
+      params: { id },
+    });
+  },
 };
 
 export default RoleApi;
@@ -226,3 +235,4 @@ export interface delResponse {
   [property: string]: any;
 }
 /** delete end */
+

src/api/system/user.ts

@@ -216,7 +216,7 @@ export default UserAPI;
 export interface UserInfo {
   /** 用户ID */
   userId?: number;
-
+  id?: number | string;
   /** 用户名 */
   username?: string;
 

src/store/modules/permission.ts

@@ -4,6 +4,7 @@ import { store } from "@/store";
 import router from "@/router";
 
 import MenuAPI, { type RouteVO } from "@/api/account/menu";
+const isTest = true//是否是本地调试
 const modules = import.meta.glob("../../views/**/**.vue");
 const Layout = () => import("@/layout/index.vue");
 
@@ -16,6 +17,8 @@ export const usePermissionStore = defineStore("permission", () => {
   // 路由是否加载完成
   const isRoutesLoaded = ref(false);
 
+
+
   /**
    * 获取后台动态路由数据，解析并注册到全局路由
    *
@@ -25,12 +28,18 @@ export const usePermissionStore = defineStore("permission", () => {
     return new Promise<RouteRecordRaw[]>((resolve, reject) => {
       MenuAPI.getRoutes()
         .then((data) => {
-          // const dynamicRoutes = parseDynamicRoutes(data);
+          if (!isTest) {
-          // routes.value = [...constantRoutes, ...dynamicRoutes];
+            const dynamicRoutes = parseDynamicRoutes(data.filter(v => v.type == 0));
-          // isRoutesLoaded.value = true;
+            routes.value = [...constantRoutes, ...dynamicRoutes];
-          // resolve(dynamicRoutes);
+            console.log(routes.value);
-          isRoutesLoaded.value = true;
+            isRoutesLoaded.value = true;
-          resolve(constantRoutes);
+            resolve(dynamicRoutes);
+          } else {
+
+            isRoutesLoaded.value = true;
+            resolve(constantRoutes);
+          }
+
         })
         .catch((error) => {
           reject(error);
@@ -55,7 +64,9 @@ export const usePermissionStore = defineStore("permission", () => {
    */
   const resetRouter = () => {
     // 清空本地存储的路由和菜单数据
-    // routes.value = [];
+    if (!isTest) {
+      routes.value = [];
+    }
     routes.value = constantRoutes;
     mixedLayoutLeftRoutes.value = [];
     // 从 Vue Router 中移除所有动态注册的路由
@@ -90,21 +101,33 @@ export const usePermissionStore = defineStore("permission", () => {
  */
 const parseDynamicRoutes = (rawRoutes: RouteVO[]): RouteRecordRaw[] => {
   const parsedRoutes: RouteRecordRaw[] = [];
-
   rawRoutes.forEach((route) => {
-    const normalizedRoute = { ...route } as RouteRecordRaw;
+    console.log(route.path)
+    const normalizedRoute = {
+      path: route.path,
+      meta: {
+        title: route.title,
+        icon: route.icon,
+        keepAlive: route.cache,
+        alwaysShow: route.path && route.path.startsWith('/') ? true : false,
+        hidden: route.hidden,
+      },
+      children: route.children,
+      component: route.component,
+    } as RouteRecordRaw;
 
     // 处理组件路径
     normalizedRoute.component =
-      normalizedRoute.component?.toString() === "Layout"
+      !normalizedRoute.component
         ? Layout
         : modules[`../../views/${normalizedRoute.component}.vue`] ||
-          modules["../../views/error-page/404.vue"];
+        modules["../../views/error-page/404.vue"];
-
     // 递归解析子路由
     if (normalizedRoute.children) {
+      // normalizedRoute.redirect = (!normalizedRoute.redirect && route.children.length <= 1) ? normalizedRoute.children[0].path : normalizedRoute.path
       normalizedRoute.children = parseDynamicRoutes(route.children);
     }
+    console.log(normalizedRoute)
 
     parsedRoutes.push(normalizedRoute);
   });

src/utils/request.ts

@@ -4,7 +4,6 @@ import { useUserStoreHook } from "@/store/modules/user";
 import { ResultEnum } from "@/enums/ResultEnum";
 import { getToken } from "@/utils/auth";
 import router from "@/router";
-
 // 创建 axios 实例
 const service = axios.create({
   baseURL: import.meta.env.VITE_APP_BASE_API,
@@ -23,6 +22,7 @@ service.interceptors.request.use(
     } else {
       delete config.headers.token;
     }
+    config.headers.shopId = useUserStoreHook().userInfo.id;
     return config;
   },
   (error) => Promise.reject(error)
@@ -37,6 +37,16 @@ service.interceptors.response.use(
     }
 
     const { code, data, msg } = response.data;
+    if (data) {
+      // 处理后台返回分页相关数据为字符串类型时，elementui组件警告
+      const kes = ['pageNumber', 'pageSize', 'totalPage', 'totalRow'];
+      const keys = Object.keys(data);
+      for (let i of kes) {
+        if (keys.includes(i)) {
+          data[i] = data[i] * 1;
+        }
+      }
+    }
     if (code === ResultEnum.SUCCESS || code === undefined || code === null) {
       return data ? data : response.data;
     }

src/views/admim/system/menu/index.vue

@@ -48,47 +48,67 @@
 
         <el-table-column label="图标" align="center" width="80">
           <template #default="scope">
-            <div v-if="scope.row.icon" :class="`i-svg:${scope.row.icon}`" />
+            <template v-if="scope.row.icon && scope.row.icon.startsWith('el-icon')">
+              <el-icon style="vertical-align: -0.15em">
+                <component :is="scope.row.icon.replace('el-icon-', '')" />
+              </el-icon>
+            </template>
+            <template v-else-if="scope.row.icon">
+              <svg-icon :icon-class="scope.row.icon" />
+            </template>
+          </template>
+        </el-table-column>
+        <el-table-column label="类型" align="center" width="80">
+          <template #default="scope">
+            <el-tag
+              v-if="scope.row.type === MenuTypeEnum.MENU && scope.row.path.startsWith('/')"
+              type="warning"
+            >
+              目录
+            </el-tag>
+            <el-tag
+              v-if="scope.row.type === MenuTypeEnum.MENU && !scope.row.path.startsWith('/')"
+              type="success"
+            >
+              菜单
+            </el-tag>
+            <el-tag v-if="scope.row.type === MenuTypeEnum.BUTTON" type="danger">按钮</el-tag>
+            <el-tag v-if="scope.row.type === MenuTypeEnum.EXTLINK" type="info">外链</el-tag>
           </template>
         </el-table-column>
         <el-table-column label="排序" align="left" width="150" prop="menuSort" />
-        <el-table-column label="权限标识" align="center" width="200" prop="perm" />
+        <el-table-column label="路由路径" align="left" width="250" prop="path" />
         <el-table-column label="组件路径" align="left" width="250" prop="component" />
         <el-table-column label="外链" align="left" width="80" prop="iFrame">
           <template #default="scope">
             {{ scope.row.iFrame ? "是" : "否" }}
           </template>
         </el-table-column>
-        <el-table-column label="缓存" align="left" width="80" prop="iFrame">
+        <el-table-column label="缓存" align="left" width="80" prop="cache">
           <template #default="scope">
-            {{ scope.row.iFrame ? "是" : "否" }}
+            {{ scope.row.cache ? "是" : "否" }}
           </template>
         </el-table-column>
         <el-table-column label="可见" align="left" width="80" prop="iFrame">
           <template #default="scope">
-            {{ scope.row.iFrame ? "是" : "否" }}
+            {{ scope.row.hidden ? "否" : "是" }}
           </template>
         </el-table-column>
-        <el-table-column label="商家可用" align="left" width="80" prop="iFrame">
+        <el-table-column label="创建日期" align="left" prop="createTime">
           <template #default="scope">
-            {{ scope.row.iFrame ? "是" : "否" }}
+            {{ scope.row.createTime }}
-          </template>
-        </el-table-column>
-        <el-table-column label="商家可用" align="left" width="80" prop="iFrame">
-          <template #default="scope">
-            {{ scope.row.iFrame ? "是" : "否" }}
           </template>
         </el-table-column>
         <el-table-column fixed="right" align="center" label="操作" width="220">
           <template #default="scope">
             <el-button
-              v-if="scope.row.type == 'MENU' || scope.row.type == 'MENU'"
+              v-if="scope.row.type == 0"
               v-hasPerm="['sys:menu:add']"
               type="primary"
               link
               size="small"
               icon="plus"
-              @click.stop="handleOpenDialog(scope.row.id)"
+              @click.stop="handleOpenDialog(scope.row.menuId)"
             >
               新增
             </el-button>
@@ -99,7 +119,7 @@
               link
               size="small"
               icon="edit"
-              @click.stop="handleOpenDialog(undefined, scope.row.id)"
+              @click.stop="handleOpenDialog(undefined, scope.row.menuId)"
             >
               编辑
             </el-button>
@@ -109,7 +129,7 @@
               link
               size="small"
               icon="delete"
-              @click.stop="handleDelete(scope.row.id)"
+              @click.stop="handleDelete(scope.row.menuId)"
             >
               删除
             </el-button>
@@ -144,10 +164,10 @@
         </el-form-item>
 
         <el-form-item v-if="formData.iFrame == 1" label="外链地址" prop="path">
-          <el-input v-model="formData.routePath" placeholder="请输入外链完整路径" />
+          <el-input v-model="formData.path" placeholder="请输入外链完整路径" />
         </el-form-item>
 
-        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="routeName">
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="name">
           <template #label>
             <div class="flex-y-center">
               路由名称
@@ -161,10 +181,10 @@
               </el-tooltip>
             </div>
           </template>
-          <el-input v-model="formData.routeName" placeholder="User" />
+          <el-input v-model="formData.name" placeholder="User" />
         </el-form-item>
 
-        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="routePath">
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="path">
           <template #label>
             <div class="flex-y-center">
               路由路径
@@ -181,10 +201,10 @@
           </template>
           <el-input
             v-if="formData.type == MenuTypeEnum.MENU"
-            v-model="formData.routePath"
+            v-model="formData.path"
             placeholder="system"
           />
-          <el-input v-else v-model="formData.routePath" placeholder="user" />
+          <el-input v-else v-model="formData.path" placeholder="user" />
         </el-form-item>
 
         <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="component">
@@ -208,85 +228,10 @@
           </el-input>
         </el-form-item>
 
-        <el-form-item v-if="formData.type == MenuTypeEnum.MENU">
-          <template #label>
-            <div class="flex-y-center">
-              路由参数
-              <el-tooltip placement="bottom" effect="light">
-                <template #content>
-                  组件页面使用 `useRoute().query.参数名` 获取路由参数值。
-                </template>
-                <el-icon class="ml-1 cursor-pointer">
-                  <QuestionFilled />
-                </el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-
-          <div v-if="!formData.params || formData.params.length === 0">
-            <el-button type="success" plain @click="formData.params = [{ key: '', value: '' }]">
-              添加路由参数
-            </el-button>
-          </div>
-
-          <div v-else>
-            <div v-for="(item, index) in formData.params" :key="index">
-              <el-input v-model="item.key" placeholder="参数名" style="width: 100px" />
-
-              <span class="mx-1">=</span>
-
-              <el-input v-model="item.value" placeholder="参数值" style="width: 100px" />
-
-              <el-icon
-                v-if="formData.params.indexOf(item) === formData.params.length - 1"
-                class="ml-2 cursor-pointer color-[var(--el-color-success)]"
-                style="vertical-align: -0.15em"
-                @click="formData.params.push({ key: '', value: '' })"
-              >
-                <CirclePlusFilled />
-              </el-icon>
-              <el-icon
-                class="ml-2 cursor-pointer color-[var(--el-color-danger)]"
-                style="vertical-align: -0.15em"
-                @click="formData.params.splice(formData.params.indexOf(item), 1)"
-              >
-                <DeleteFilled />
-              </el-icon>
-            </div>
-          </div>
-        </el-form-item>
-
         <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" prop="hidden" label="显示状态">
           <el-radio-group v-model="formData.hidden">
-            <el-radio :value="1">显示</el-radio>
+            <el-radio :value="1">隐藏</el-radio>
-            <el-radio :value="0">隐藏</el-radio>
+            <el-radio :value="0">显示</el-radio>
-          </el-radio-group>
-        </el-form-item>
-
-        <el-form-item
-          v-if="formData.type === MenuTypeEnum.MENU || formData.type === MenuTypeEnum.MENU"
-        >
-          <template #label>
-            <div class="flex-y-center">
-              始终显示
-              <el-tooltip placement="bottom" effect="light">
-                <template #content>
-                  选择“是”，即使目录或菜单下只有一个子节点，也会显示父节点。
-                  <br />
-                  选择“否”，如果目录或菜单下只有一个子节点，则只显示该子节点，隐藏父节点。
-                  <br />
-                  如果是叶子节点，请选择“否”。
-                </template>
-                <el-icon class="ml-1 cursor-pointer">
-                  <QuestionFilled />
-                </el-icon>
-              </el-tooltip>
-            </div>
-          </template>
-
-          <el-radio-group v-model="formData.alwaysShow">
-            <el-radio :value="1">是</el-radio>
-            <el-radio :value="0">否</el-radio>
           </el-radio-group>
         </el-form-item>
 
@@ -307,8 +252,12 @@
         </el-form-item>
 
         <!-- 权限标识 -->
-        <el-form-item v-if="formData.type == MenuTypeEnum.BUTTON" label="权限标识" prop="perm">
+        <el-form-item
-          <el-input v-model="formData.perm" placeholder="sys:user:add" />
+          v-if="formData.type == MenuTypeEnum.BUTTON"
+          label="权限标识"
+          prop="permission"
+        >
+          <el-input v-model="formData.permission" placeholder="sys:user:add" />
         </el-form-item>
 
         <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" label="图标" prop="icon">
@@ -360,7 +309,7 @@ const menuOptions = ref<OptionType[]>([]);
 }
 const initialeditRequestData = ref<editRequest>({
   id: "",
-  pid: 0,
+  pid: "",
   hidden: 0,
   menuSort: 1,
   type: 0, // 默认菜单
@@ -376,12 +325,12 @@ const initialeditRequestData = ref<editRequest>({
 const formData = ref({ ...initialeditRequestData.value });
 // 表单验证规则
 const rules = reactive({
-  pid: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
+  pid: [{ required: false, message: "请选择父级菜单", trigger: "blur" }],
   title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
   type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
-  routeName: [{ required: true, message: "请输入路由名称", trigger: "blur" }],
+  name: [{ required: false, message: "请输入路由名称", trigger: "blur" }],
-  routePath: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
+  path: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
-  component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
+  component: [{ required: false, message: "请输入组件路径", trigger: "blur" }],
   hidden: [{ required: true, message: "请选择显示状态", trigger: "change" }],
 });
 
@@ -440,10 +389,19 @@ function handleOpenDialog(pid?: string, menuId?: string) {
     .then(() => {
       dialog.visible = true;
       if (menuId) {
+        console.log(menuId);
         dialog.title = "编辑菜单";
         MenuAPI.get(menuId).then((data) => {
-          initialeditRequestData.value = { ...data };
+          console.log(data);
-          formData.value = data;
+          initialeditRequestData.value = {
+            ...data,
+          };
+          formData.value = {
+            ...data,
+            cache: data.cache ? 1 : 0,
+            hidden: data.hidden ? 1 : 0,
+            pid: !pid ? "0" : data.pid,
+          };
         });
       } else {
         dialog.title = "新增菜单";
@@ -462,7 +420,7 @@ function handleMenuTypeChange() {
         formData.value.component = "";
       } else {
         // 其他情况，保留原有的组件路径
-        formData.value.routePath = initialeditRequestData.value.routePath;
+        formData.value.path = initialeditRequestData.value.path;
         formData.value.component = initialeditRequestData.value.component;
       }
     }
@@ -475,20 +433,26 @@ function handleMenuTypeChange() {
 function handleSubmit() {
   editRequestRef.value.validate((isValid: boolean) => {
     if (isValid) {
-      const menuId = formData.value.id;
+      const menuId = formData.value.menuId;
+      const submitFormData = {
+        ...formData.value,
+        cache: formData.value.cache ? 1 : 0,
+        hidden: formData.value.hidden ? 1 : 0,
+        pid: formData.value.pid == 0 ? null : formData.value.pid,
+      };
       if (menuId) {
         //修改时父级菜单不能为当前菜单
         if (formData.value.pid == menuId) {
           ElMessage.error("父级菜单不能为当前菜单");
           return;
         }
-        MenuAPI.edit(menuId, formData.value).then(() => {
+        MenuAPI.edit(menuId, submitFormData).then(() => {
           ElMessage.success("修改成功");
           handleCloseDialog();
           handleQuery();
         });
       } else {
-        MenuAPI.add(formData.value).then(() => {
+        MenuAPI.add(submitFormData).then(() => {
           ElMessage.success("新增成功");
           handleCloseDialog();
           handleQuery();
@@ -532,7 +496,7 @@ function resetForm() {
   editRequestRef.value.clearValidate();
   formData.value = {
     id: "",
-    pid: 0,
+    pid: "",
     hidden: 0,
     menuSort: 1,
     type: 0, // 默认菜单

src/views/admim/system/role/components/menus.vue

@@ -0,0 +1,128 @@
+<template>
+  <div class="flex-x-between">
+    <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单菜单名称">
+      <template #prefix>
+        <Search />
+      </template>
+    </el-input>
+
+    <div class="flex-center ml-5">
+      <el-button type="primary" size="small" plain @click="togglePermTree">
+        <template #icon>
+          <Switch />
+        </template>
+        {{ isExpanded ? "收缩" : "展开" }}
+      </el-button>
+      <el-checkbox v-model="parentChildLinked" class="ml-5" @change="handleparentChildLinkedChange">
+        父子联动
+      </el-checkbox>
+
+      <el-tooltip placement="bottom">
+        <template #content>
+          如果只需勾选菜单菜单，不需要勾选子菜单或者按钮菜单，请关闭父子联动
+        </template>
+        <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
+          <QuestionFilled />
+        </el-icon>
+      </el-tooltip>
+    </div>
+  </div>
+
+  <el-tree
+    ref="permTreeRef"
+    node-key="value"
+    show-checkbox
+    :data="menuPermOptions"
+    :filter-node-method="handlePermFilter"
+    :default-expand-all="true"
+    :check-strictly="!parentChildLinked"
+    class="mt-5"
+  >
+    <template #default="{ data }">
+      {{ data.label }}
+    </template>
+  </el-tree>
+</template>
+
+<script setup>
+import MenuAPI from "@/api/account/menu";
+
+const modelValue = defineModel("modelValue", {
+  type: Array,
+  required: true,
+  default: () => [],
+});
+const permKeywords = ref("");
+const isExpanded = ref(true);
+const parentChildLinked = ref(true);
+const permTreeRef = ref();
+// 展开/收缩 菜单菜单树
+function togglePermTree() {
+  isExpanded.value = !isExpanded.value;
+  if (permTreeRef.value) {
+    Object.values(permTreeRef.value.store.nodesMap).forEach((node) => {
+      if (isExpanded.value) {
+        node.expand();
+      } else {
+        node.collapse();
+      }
+    });
+  }
+}
+function handlePermFilter(value, data) {
+  if (!value) return true;
+  return data.label.includes(value);
+}
+
+// 父子菜单节点是否联动
+function handleparentChildLinkedChange(val) {
+  parentChildLinked.value = val;
+}
+
+// 菜单菜单下拉
+const menuPermOptions = ref([]);
+
+function returnMenu(menu) {
+  return menu.map((v) => {
+    return {
+      ...v,
+      label: v.title,
+      value: v.menuId,
+      children: v.children ? returnMenu(v.children) : [],
+    };
+  });
+}
+// 获取所有的菜单
+async function getMenuPermOptions() {
+  let arr = await MenuAPI.getList();
+  menuPermOptions.value = returnMenu(arr);
+}
+getMenuPermOptions();
+
+onMounted(() => {
+  console.log(modelValue.value);
+});
+
+watch(
+  () => modelValue.value,
+  (newval) => {}
+);
+
+function getPerms() {
+  return permTreeRef.value.getCheckedKeys();
+}
+function reset() {
+  permTreeRef.value.setCheckedKeys([]);
+}
+function setChecked(checkedMenuIds) {
+  checkedMenuIds.forEach((menuId) => {
+    console.log(menuId);
+    permTreeRef.value.setChecked(menuId, true, false);
+  });
+}
+defineExpose({
+  getPerms,
+  setChecked,
+  reset,
+});
+</script>

src/views/admim/system/role/index.vue

@@ -35,18 +35,10 @@
         @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="name" />
-        <el-table-column label="角色编码" prop="code" width="150" />
+        <el-table-column label="角色级别" prop="level" />
-
+        <el-table-column label="描述" prop="description" />
-        <el-table-column label="状态" align="center" width="100">
+        <el-table-column label="创建日期" prop="createTime" />
-          <template #default="scope">
-            <el-tag v-if="scope.row.status === 1" 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 fixed="right" label="操作" width="220">
           <template #default="scope">
             <el-button
@@ -56,7 +48,7 @@
               icon="position"
               @click="handleOpenAssignPermDialog(scope.row)"
             >
-              分配权限
+              分配菜单
             </el-button>
             <el-button
               type="primary"
@@ -101,33 +93,24 @@
           <el-input v-model="formData.name" placeholder="请输入角色名称" />
         </el-form-item>
 
-        <el-form-item label="角色编码" prop="code">
+        <el-form-item label="角色等级" prop="level">
-          <el-input v-model="formData.code" placeholder="请输入角色编码" />
+          <el-input-number placeholder="角色等级" v-model="formData.level"></el-input-number>
         </el-form-item>
 
-        <el-form-item label="数据权限" prop="dataScope">
+        <!-- <el-form-item label="数据菜单" prop="dataScope">
           <el-select v-model="formData.dataScope">
             <el-option :key="0" label="全部数据" :value="0" />
             <el-option :key="1" label="部门及子部门数据" :value="1" />
             <el-option :key="2" label="本部门数据" :value="2" />
             <el-option :key="3" label="本人数据" :value="3" />
           </el-select>
+        </el-form-item> -->
+        <el-form-item label="描述" prop="description">
+          <el-input type="textarea" v-model="formData.description" placeholder="描述" />
         </el-form-item>
 
-        <el-form-item label="状态" prop="status">
+        <el-form-item label="菜单分配" prop="menuIdList">
-          <el-radio-group v-model="formData.status">
+          <menuSelect ref="refmenuSelect" v-model="formData.menuIdList"></menuSelect>
-            <el-radio :label="1">正常</el-radio>
-            <el-radio :label="0">停用</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>
 
@@ -139,14 +122,14 @@
       </template>
     </el-dialog>
 
-    <!-- 分配权限弹窗 -->
+    <!-- 分配菜单弹窗 -->
     <el-drawer
       v-model="assignPermDialogVisible"
-      :title="'【' + checkedRole.name + '】权限分配'"
+      :title="'【' + checkedRole.name + '】菜单分配'"
       size="500"
     >
       <div class="flex-x-between">
-        <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单权限名称">
+        <el-input v-model="permKeywords" clearable class="w-[150px]" placeholder="菜单菜单名称">
           <template #prefix>
             <Search />
           </template>
@@ -169,7 +152,7 @@
 
           <el-tooltip placement="bottom">
             <template #content>
-              如果只需勾选菜单权限，不需要勾选子菜单或者按钮权限，请关闭父子联动
+              如果只需勾选菜单菜单，不需要勾选子菜单或者按钮菜单，请关闭父子联动
             </template>
             <el-icon class="ml-1 color-[--el-color-primary] inline-block cursor-pointer">
               <QuestionFilled />
@@ -207,12 +190,13 @@ defineOptions({
   name: "Role",
   inheritAttrs: false,
 });
-
+import menuSelect from "./components/menus.vue";
 import RoleApi, { SysRole, addRequest, getListRequest } from "@/api/account/role";
 import MenuAPI, { type RouteVO } from "@/api/account/menu";
 
 const queryFormRef = ref();
 const addRequestRef = ref();
+const refmenuSelect = ref();
 const permTreeRef = ref();
 
 const loading = ref(false);
@@ -227,7 +211,7 @@ const queryParams = reactive<getListRequest>({
 
 // 角色表格数据
 const roleList = ref<SysRole[]>();
-// 菜单权限下拉
+// 菜单菜单下拉
 const menuPermOptions = ref<RouteVO[]>([]);
 
 // 弹窗
@@ -248,9 +232,7 @@ const formData = reactive<addRequest>({
 
 const rules = reactive({
   name: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
-  code: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
+  level: [{ required: false, message: "请输入角色等级", trigger: "blur" }],
-  dataScope: [{ required: true, message: "请选择数据权限", trigger: "blur" }],
-  status: [{ required: true, message: "请选择状态", trigger: "blur" }],
 });
 
 // 选中的角色
@@ -294,11 +276,19 @@ function handleSelectionChange(selection: any) {
 }
 
 // 打开角色弹窗
-function handleOpenDialog(row: SysRole) {
+async function handleOpenDialog(row: SysRole) {
   dialog.visible = true;
-  if (row.id) {
+  if (row && row.id) {
     dialog.title = "修改角色";
+    //获取角色菜单列表
+    const data = await RoleApi.getMenu(row.id);
     Object.assign(formData, row);
+    console.log(data);
+    formData.menuIdList = data;
+    setTimeout(() => {
+      refmenuSelect.value.setChecked(data);
+    }, 100);
+    console.log(formData);
   } else {
     dialog.title = "新增角色";
   }
@@ -308,10 +298,11 @@ function handleOpenDialog(row: SysRole) {
 function handleSubmit() {
   addRequestRef.value.validate((valid: any) => {
     if (valid) {
+      const checkedMenuIds: number[] = refmenuSelect.value.getPerms();
       loading.value = true;
       const roleId = formData.id;
       if (roleId) {
-        RoleApi.update({ ...formData, id: formData.id ?? null })
+        RoleApi.update(roleId, { ...formData, menuIdList: checkedMenuIds })
           .then(() => {
             ElMessage.success("修改成功");
             handleCloseDialog();
@@ -320,7 +311,8 @@ function handleSubmit() {
           .finally(() => (loading.value = false));
       } else {
         delete formData.id;
-        RoleApi.add(formData)
+
+        RoleApi.add({ ...formData, menuIdList: checkedMenuIds })
           .then(() => {
             ElMessage.success("新增成功");
             handleCloseDialog();
@@ -338,7 +330,7 @@ function handleCloseDialog() {
 
   addRequestRef.value.resetFields();
   addRequestRef.value.clearValidate();
-
+  refmenuSelect.value.reset();
   formData.id = undefined;
   formData.sort = 1;
   formData.status = 1;
@@ -378,7 +370,7 @@ interface typeRoute extends RouteVO {
   children: typeRoute[];
 }
 
-function returnMenu(menu: RouteVO[]): typeRoute[] {
+function returnMenu(menu) {
   return menu.map((v) => {
     return {
       ...v,
@@ -389,7 +381,13 @@ function returnMenu(menu: RouteVO[]): typeRoute[] {
   });
 }
 
-// 打开分配菜单权限弹窗
+// 获取所有的菜单
+async function getMenuPermOptions() {
+  let arr = await MenuAPI.getList({});
+  menuPermOptions.value = returnMenu(arr);
+}
+getMenuPermOptions();
+// 打开分配菜单菜单弹窗
 async function handleOpenAssignPermDialog(row: SysRole) {
   const roleId = row.id;
   if (roleId) {
@@ -399,34 +397,31 @@ async function handleOpenAssignPermDialog(row: SysRole) {
     checkedRole.value.id = roleId;
     checkedRole.value.name = row.name as string;
 
-    // 获取所有的菜单
-    let arr: RouteVO[] = await MenuAPI.getRoutes();
-    menuPermOptions.value = returnMenu(arr);
-
     // 回显角色已拥有的菜单
-    // RoleApi.getRoleMenuIds(roleId)
+    RoleApi.getMenu(roleId)
-    //   .then((data) => {
+      .then((data) => {
-    //     const checkedMenuIds = data;
+        const checkedMenuIds = data;
-    //     checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
+        checkedMenuIds.forEach((menuId) => permTreeRef.value!.setChecked(menuId, true, false));
-    //   })
+      })
-    //   .finally(() => {
+      .finally(() => {
-    //     loading.value = false;
+        loading.value = false;
-    //   });
+      });
   }
 }
 
-// 分配菜单权限提交
+// 分配菜单菜单提交
 function handleAssignPermSubmit() {
   const roleId = checkedRole.value.id;
+  const name = checkedRole.value.name;
   if (roleId) {
     const checkedMenuIds: number[] = permTreeRef
       .value!.getCheckedNodes(false, true)
       .map((node: any) => node.value);
 
     loading.value = true;
-    RoleApi.updateRoleMenus(roleId, checkedMenuIds)
+    RoleApi.update(roleId, { name, menuIdList: checkedMenuIds })
       .then(() => {
-        ElMessage.success("分配权限成功");
+        ElMessage.success("分配菜单成功");
         assignPermDialogVisible.value = false;
         handleResetQuery();
       })
@@ -436,7 +431,7 @@ function handleAssignPermSubmit() {
   }
 }
 
-// 展开/收缩 菜单权限树
+// 展开/收缩 菜单菜单树
 function togglePermTree() {
   isExpanded.value = !isExpanded.value;
   if (permTreeRef.value) {
@@ -449,8 +444,20 @@ function togglePermTree() {
     });
   }
 }
+function editTogglePermTree() {
+  isExpanded.value = !isExpanded.value;
+  if (permTreeRef.value) {
+    Object.values(permTreeRef.value.store.nodesMap).forEach((node: any) => {
+      if (isExpanded.value) {
+        node.expand();
+      } else {
+        node.collapse();
+      }
+    });
+  }
+}
 
-// 权限筛选
+// 菜单筛选
 watch(permKeywords, (val) => {
   permTreeRef.value!.filter(val);
 });

src/views/login/index.vue

@@ -1,7 +1,13 @@
 <template>
   <div class="login" :style="'background-image:url(' + Background + ');'">
-    <el-form ref="loginForm" :model="state.loginForm" :rules="state.loginRules" label-position="left" label-width="0px"
+    <el-form
-      class="login-form">
+      ref="loginForm"
+      :model="state.loginForm"
+      :rules="state.loginRules"
+      label-position="left"
+      label-width="0px"
+      class="login-form"
+    >
       <h3 class="title">银收客后台管理</h3>
       <el-form-item>
         <el-radio-group v-model="state.loginForm.loginType">
@@ -10,19 +16,39 @@
         </el-radio-group>
       </el-form-item>
       <el-form-item prop="merchantName" v-if="state.loginForm.loginType == 'staff'">
-        <el-input v-model="state.loginForm.merchantName" type="text" auto-complete="off" placeholder="商户号"></el-input>
+        <el-input
+          v-model="state.loginForm.merchantName"
+          type="text"
+          auto-complete="off"
+          placeholder="商户号"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="username">
-        <el-input v-model="state.loginForm.username" type="text" auto-complete="off" placeholder="账号"></el-input>
+        <el-input
+          v-model="state.loginForm.username"
+          type="text"
+          auto-complete="off"
+          placeholder="账号"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="password">
-        <el-input v-model="state.loginForm.password" type="password" auto-complete="off" placeholder="密码"
+        <el-input
-          @keyup.enter="handleLogin"></el-input>
+          v-model="state.loginForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter="handleLogin"
+        ></el-input>
       </el-form-item>
       <el-form-item prop="code">
         <div class="code_wrap">
-          <el-input v-model="state.loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%"
+          <el-input
-            @keyup.enter="handleLogin"></el-input>
+            v-model="state.loginForm.code"
+            auto-complete="off"
+            placeholder="验证码"
+            style="width: 63%"
+            @keyup.enter="handleLogin"
+          ></el-input>
           <div class="login-code">
             <img :src="state.codeUrl" @click="getCode" />
           </div>
@@ -30,8 +56,13 @@
       </el-form-item>
 
       <el-form-item style="width: 100%">
-        <el-button :loading="state.loading" size="default" type="primary" style="width: 100%"
+        <el-button
-          @click.prevent="handleLogin">
+          :loading="state.loading"
+          size="default"
+          type="primary"
+          style="width: 100%"
+          @click.prevent="handleLogin"
+        >
           <span v-if="!state.loading">登 录</span>
           <span v-else>登 录 中...</span>
         </el-button>
@@ -61,8 +92,8 @@ const state = reactive({
   codeUrl: "",
   cookiePass: "",
   loginForm: {
-    username: "",
+    username: "admin",
-    password: "",
+    password: "12345",
     // rememberMe: false,
     code: "",
     uuid: "",
@@ -152,7 +183,7 @@ function handleLogin() {
         .then(async (res) => {
           // await userStore.getUserInfo();
           const { path, queryParams } = parseRedirect();
-          console.log(res, 'Denglv返回');
+          console.log(res, "Denglv返回");
           router.push({ path: path, query: queryParams });
         })
         .catch(() => {