1.用户权限配置页面。

src/api/user/index.ts

@@ -156,3 +156,21 @@ export function updateSystemMenuList(list: any[]) {
     data: list,
   });
 }
+
+// 综合管理平台用户菜单权限列表查询
+export function systemUserMenuList(id: string) {
+  return request({
+    url: "/api/v1/syn/user/menu/list",
+    method: "post",
+    data: { userId: id },
+  });
+}
+
+// 新增综合管理平台用户菜单权限
+export function addSystemUserMenu(obj: Object) {
+  return request({
+    url: "/api/v1/syn/user/menu/add",
+    method: "post",
+    data: obj,
+  });
+}

src/router/index.ts

@@ -46,6 +46,12 @@ export const constantRoutes: RouteRecordRaw[] = [
     name: "totalScreen",
     meta: { hidden: true },
   },
+  {
+    path: "/users",
+    component: () => import("@/views/sets/users.vue"),
+    name: "users",
+    meta: { hidden: true },
+  },
 
   {
     path: "/:pathMatch(.*)*", // 必备

src/views/main/set.vue

@@ -13,7 +13,9 @@
           class="sys-item-img"
           size="60"
         />
-        <h3 class="sys-item-title">{{ item.menuName }}</h3>
+        <h3 class="sys-item-title" @click="gotoUserPage">
+          {{ item.menuName }}
+        </h3>
         <h3 class="sys-item-title" @click="openDrawer">配置IP地址</h3>
       </div>
     </div>
@@ -44,6 +46,11 @@ const openDrawer = () => {
 const saveAddressFinish = () => {
   drawerVisible.value = false;
 };
+
+const router = useRouter();
+const gotoUserPage = () => {
+  router.push("/users");
+};
 </script>
 
 <style lang="scss" scoped>

src/views/sets/users.vue

@@ -0,0 +1,159 @@
+<template>
+  <div class="mainContentBox">
+    <avue-crud
+      ref="crudRef"
+      v-model="form"
+      v-model:page="page"
+      v-model:search="search"
+      :data="data"
+      :option="option"
+      @search-change="searchChange"
+      @search-reset="resetChange"
+      @size-change="dataList"
+      @current-change="dataList"
+    >
+      <template #menu="{ row }">
+        <el-button text type="primary" @click="editPermission(row)"
+          >编辑权限
+        </el-button>
+      </template>
+    </avue-crud>
+
+    <!-- 分配菜单弹窗  -->
+    <el-dialog v-model="menuDialogVisible" title="权限分配" width="700px">
+      <el-scrollbar v-loading="loading" max-height="600px">
+        <el-tree
+          ref="treeRef"
+          :data="menuList"
+          :default-expand-all="false"
+          :props="{
+            children: 'childs',
+            label: 'menuName',
+            value: 'id',
+            disabled: '',
+          }"
+          node-key="id"
+          show-checkbox
+        >
+          <template #default="{ data }">
+            {{ data.menuName }}
+          </template>
+        </el-tree>
+      </el-scrollbar>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleRoleMenuSubmit"
+            >确 定
+          </el-button>
+          <el-button @click="menuDialogVisible = false">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script setup>
+import { ref } from "vue";
+import { useCrud } from "@/hooks/userCrud";
+import {
+  addSystemUserMenu,
+  systemMenuList,
+  systemUserMenuList,
+} from "@/api/user/index";
+
+// 传入一个url，后面不带/
+const { form, data, option, search, page, toDeleteIds, Methords, Utils } =
+  useCrud({
+    src: "/api/v1/syn/user/info",
+  });
+const { dataList, createRow, updateRow, deleteRow, searchChange, resetChange } =
+  Methords; //增删改查
+const { selectionChange, multipleDelete } = Methords; //选中和批量删除事件
+const { checkBtnPerm, downloadTemplate, exportData } = Utils; //按钮权限等工具
+
+const crudRef = ref(null); //crudRef.value 获取avue-crud对象
+
+onMounted(() => {
+  dataList();
+});
+
+// 设置表格列或者其他自定义的option
+option.value = Object.assign(option.value, {
+  editBtn: false, //是否显示编辑按钮
+  delBtn: false, //是否显示删除按钮
+  addBtn: false, //是否显示新增按钮
+  viewBtn: false, //是否显示查看按钮
+  menu: false, //是否显示操作列
+  column: [
+    {
+      label: "昵称",
+      prop: "nickName",
+      search: true,
+    },
+    {
+      label: "账号",
+      prop: "userName",
+      search: true,
+    },
+
+    {
+      label: "性别",
+      prop: "sex",
+      search: true,
+      type: "select", //类型为单选框
+      dicData: [
+        {
+          label: "未知",
+          value: 0,
+        },
+        {
+          label: "男",
+          value: 1,
+        },
+        {
+          label: "女",
+          value: 2,
+        },
+      ],
+      value: 0,
+    },
+    {
+      label: "操作",
+      prop: "menu",
+      span: 24,
+    },
+  ],
+});
+
+// 编辑权限
+const currentUserId = ref("");
+const treeRef = ref(null);
+const menuDialogVisible = ref(false);
+const loading = ref(false);
+const menuList = ref([]);
+const editPermission = async (row) => {
+  currentUserId.value = row.id;
+  menuDialogVisible.value = true;
+  let allMenu = await systemMenuList();
+  menuList.value = allMenu.data ?? [];
+  let selectMenu = await systemUserMenuList(row.id);
+  if (selectMenu.data && selectMenu.data.length > 0) {
+    treeRef.value && treeRef.value.setCheckedKeys(selectMenu.data);
+  }
+};
+
+const handleRoleMenuSubmit = async () => {
+  loading.value = true;
+  addSystemUserMenu({
+    userId: currentUserId.value,
+    menuIds: treeRef.value.getCheckedKeys(),
+  })
+    .then(() => {
+      ElMessage.success("权限分配成功");
+    })
+    .finally(() => {
+      loading.value = false;
+      menuDialogVisible.value = false;
+    });
+};
+</script>