角色管理

src/router/index.js

@@ -43,7 +43,6 @@ const routes = [
         path: '/systemManage',
         name: '系统管理',
         title: 'systemManage',
-        // component: () => import('@/views/systemManage/index.vue'),
         meta: { menuName: '系统管理', icon: 'tools' },
         children: [
           {
@@ -59,6 +58,13 @@ const routes = [
             title: 'userManage',
             component: () => import('@/views/systemManage/userManage.vue'),
             meta: { menuName: '用户管理',}
+          },
+          {
+            path: '/systemManage/roleManage',
+            name: '角色管理',
+            title: 'roleManage',
+            component: () => import('@/views/systemManage/roleManage.vue'),
+            meta: { menuName: '角色管理',}
           }
         ]
       },

src/views/systemManage/departManage.vue

@@ -121,14 +121,14 @@ const convertToTreeData = (apiData, type) => {
       id: item.id,
       label: item.name,
       parentId: item.parentId,
-      children: item.children ? convertToTreeData(item.children) : [],
+      children: item.children ? convertToTreeData(item.children, "id") : [],
     }));
   } else {
     return apiData.map((item) => ({
       parentId: item.parentId,
       value: item.id,
       label: item.name,
-      children: item.children ? convertToTreeData(item.children) : [],
+      children: item.children ? convertToTreeData(item.children, "value") : [],
     }));
   }
 };

src/views/systemManage/index.vue

-<template>
-  <div>系统管理 setting</div>
-</template>
-
-<script setup></script>
-
-<style scoped lang="less"></style>

src/views/systemManage/roleManage.vue

+<template>
+  <div class="user-manage" v-loading="loading">
+    <div class="search-form">
+      <commonForm
+        v-model="searchForm"
+        :config="searchConfig"
+        :items="searchItems"
+        @submit="handleSearch"
+        @reset="handleReset"
+      />
+    </div>
+    <div class="table-container">
+      <common-table
+        :tableHeight="tableHeight"
+        :data="tableData"
+        :columns="tableColumns"
+        :total="total"
+        :current-page="currentPage"
+        :page-size="pageSize"
+        title="角色管理"
+        :border="true"
+        @size-change="handleSizeChange"
+        @current-page-change="handleCurrentPageChange"
+      >
+        <template #header-actions>
+          <el-button type="primary" @click="handleAdd"> 新增 </el-button>
+        </template>
+        <template #operations="{ row, index }">
+          <el-button type="text" size="small" @click="handleEdit(row, index)">
+            编辑
+          </el-button>
+          <el-button type="text" size="small" @click="handleDelete(row, index)">
+            删除
+          </el-button>
+          <el-button type="text" size="small" @click="handleMenu(row, index)"
+            >菜单配置</el-button
+          >
+          <el-button type="text" size="small">数据权限 </el-button>
+        </template>
+      </common-table>
+    </div>
+
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogTitle"
+      width="400px"
+      @close="handleDialogClose"
+    >
+      <commonForm
+        v-model="userForm"
+        :config="formConfig"
+        :items="formItems"
+        :rules="formRules"
+        @submit="handleFormSubmit"
+        @reset="handleFormReset"
+      />
+    </el-dialog>
+    <el-dialog v-model="menuVisible" title="菜单配置">
+      <el-tree
+        :data="treeData"
+        show-checkbox
+        default-expand-all
+        node-key="id"
+        ref="tree"
+        highlight-current
+      >
+      </el-tree>
+      <template #footer>
+        <el-button type="primary" @click="hanldeSubmit">保存</el-button>
+        <el-button>取消</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, reactive, onMounted, getCurrentInstance, computed } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { Plus, Edit, Delete } from "@element-plus/icons-vue";
+import commonForm from "@/components/common/commonForm.vue";
+import CommonTable from "@/components/common/commonTable.vue";
+import { da } from "element-plus/es/locales.mjs";
+
+const { proxy } = getCurrentInstance();
+const loading = ref(false);
+const treeData = ref([]);
+
+// 计算表格高度
+const tableHeight = computed(() => {
+  const headerHeight = 50;
+  const paginationHeight = 50;
+  const rowHeight = 40;
+  const baseHeight = headerHeight + paginationHeight;
+  const maxRows = Math.min(tableData.value.length, 10);
+  const contentHeight = maxRows * rowHeight;
+  return `${baseHeight + contentHeight}px`;
+});
+
+// 数据转换函数
+const convertToTreeData = (apiData) => {
+  return apiData.map((item) => ({
+    id: item.id,
+    label: item.name,
+    children: item.children ? convertToTreeData(item.children) : [],
+  }));
+};
+
+// 查询表单数据
+const searchForm = ref({
+  name: "",
+  mobile: "",
+});
+
+// 查询表单配置
+const searchConfig = {
+  inline: true,
+  labelWidth: "80px",
+  showButtons: true,
+  submitText: "查询",
+  resetText: "重置",
+};
+
+// 查询表单项配置
+const searchItems = [
+  {
+    type: "input",
+    prop: "name",
+    label: "角色名称:",
+    placeholder: "请输入角色名称",
+    clearable: true,
+    span: 8,
+  },
+];
+
+// 表格数据
+const tableData = ref([]);
+const total = ref(0);
+const currentPage = ref(1);
+const pageSize = ref(10);
+
+// 表格列配置
+const tableColumns = [
+  {
+    prop: "name",
+    label: "角色名称",
+    minWidth: 100,
+  },
+  {
+    prop: "createdAt",
+    label: "创建时间",
+    minWidth: 160,
+  },
+  {
+    prop: "updatedAt",
+    label: "更新时间",
+    minWidth: 160,
+  },
+  {
+    prop: "operations",
+    label: "操作",
+    width: 310,
+    slot: "operations",
+    fixed: "right",
+    align: "center",
+  },
+];
+
+// 对话框相关
+const dialogVisible = ref(false);
+const menuVisible = ref(false);
+const dialogTitle = ref("新增角色");
+const isEdit = ref(false);
+const editIndex = ref(-1);
+
+// 用户表单数据
+const userForm = ref({
+  name: "",
+  createdAt: "",
+  updatedAt: "",
+});
+
+// 用户表单配置
+const formConfig = {
+  labelWidth: "100px",
+  showButtons: true,
+  submitText: "保存",
+  resetText: "取消",
+};
+
+// 用户表单项配置
+const formItems = computed(() => [
+  {
+    type: "input",
+    prop: "name",
+    label: "角色名称",
+    placeholder: "请输入角色名称",
+    span: 24,
+    required: true,
+    rules: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+  },
+  {
+    type: "date",
+    prop: "createdAt",
+    label: "创建时间",
+    placeholder: "请输入创建时间",
+    span: 24,
+  },
+  {
+    type: "date",
+    prop: "updatedAt",
+    label: "更新时间",
+    placeholder: "请输入更新时间",
+    span: 24,
+  },
+]);
+
+// 表单验证规则
+const formRules = {};
+
+// 事件处理函数
+const handleSearch = (formData) => {
+  currentPage.value = 1;
+  loadTableData();
+};
+
+const handleReset = () => {
+  searchForm.value = {
+    name: "",
+    mobile: "",
+  };
+  currentPage.value = 1;
+  loadTableData();
+};
+
+const handleSizeChange = (size) => {
+  pageSize.value = size;
+  currentPage.value = 1;
+  loadTableData();
+};
+
+const handleCurrentPageChange = (page) => {
+  currentPage.value = page;
+  loadTableData();
+};
+
+// 新增用户
+const handleAdd = () => {
+  isEdit.value = false;
+  dialogTitle.value = "新增用户";
+  userForm.value = {
+    name: "",
+    createdAt: "",
+    updatedAt: "",
+  };
+  dialogVisible.value = true;
+};
+let currentID = ref();
+// 编辑
+const handleEdit = (row, index) => {
+  isEdit.value = true;
+  dialogTitle.value = "编辑用户";
+  editIndex.value = index;
+  proxy.$post({
+    url: "/api/user/manage/getUserInfo",
+    data: { id: row.id },
+    callback: (data) => {
+      userForm.value = { ...data };
+      currentID.value = data.id;
+    },
+    error: (err) => {
+      ElMessage.error("编辑失败:", err);
+    },
+  });
+  dialogVisible.value = true;
+};
+
+// 删除
+const handleDelete = async (row, index) => {
+  try {
+    await ElMessageBox.confirm(`确定要删除用户"${row.name}"吗？`, "提示", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+      type: "warning",
+    });
+    proxy.$post({
+      url: "/api/user/role/deleteRole",
+      data: { id: row.id },
+      callback: (data) => {
+        dialogVisible.value = false;
+        loadTableData();
+        ElMessage.success("删除成功");
+      },
+      error: (err) => {
+        ElMessage.error("删除失败:", err);
+      },
+    });
+    loadTableData();
+  } catch {}
+};
+// 菜单配置
+const handleMenu = () => {
+  menuVisible.value = true;
+};
+
+const handleFormSubmit = (formData) => {
+  if (isEdit.value) {
+    // 编辑用户
+    const updateUser = {
+      ...formData,
+      id: currentID.value,
+    };
+    proxy.$post({
+      url: "/api/user/role/updateRole",
+      data: updateUser,
+      callback: (data) => {
+        dialogVisible.value = false;
+        loadTableData();
+        ElMessage.success("用户信息更新成功");
+      },
+      error: (err) => {
+        ElMessage.error("用户信息更新失败:", err);
+      },
+    });
+  } else {
+    // 新增角色
+    const newUser = {
+      ...formData,
+    };
+    proxy.$post({
+      url: "/api/user/role/createRole",
+      data: newUser,
+      callback: (data) => {
+        dialogVisible.value = false;
+        loadTableData();
+        ElMessage.success("角色添加成功");
+      },
+      error: (err) => {
+        ElMessage.error("角色添加失败:", err);
+      },
+    });
+  }
+};
+
+const handleFormReset = () => {
+  dialogVisible.value = false;
+};
+
+const handleDialogClose = () => {
+  dialogVisible.value = false;
+};
+
+const hanldeSubmit = () => {
+  menuVisible.value = false;
+};
+// 表格数据
+const loadTableData = () => {
+  loading.value = true;
+  proxy.$post({
+    url: "/api/user/role/listRole",
+    data: {
+      ...searchForm.value,
+      page: currentPage.value,
+      pageSize: pageSize.value,
+    },
+    callback: (data) => {
+      tableData.value = data.rows;
+      total.value = data.count;
+      loading.value = false;
+    },
+    error: (err) => {
+      loading.value = false;
+      ElMessage.error("加载数据失败");
+    },
+  });
+};
+
+const handleTreeData = () => {
+  proxy.$post({
+    url: "/api/user/depart/treeDepart",
+    data: {
+      page: currentPage.value,
+      pageSize: pageSize.value,
+    },
+    callback: (data) => {
+      console.log(data, "234234");
+      treeData.value = convertToTreeData(data);
+    },
+    error: (err) => {
+      ElMessage.error("加载数据失败");
+    },
+  });
+};
+
+onMounted(() => {
+  loadTableData();
+  handleTreeData();
+});
+</script>
+
+<style scoped lang="less">
+.user-manage {
+  padding: 20px;
+  background: rgba(157, 188, 218, 0.1);
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+
+  .search-form {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
+    padding: 20px;
+    margin-bottom: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
+  }
+
+  .table-container {
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
+    padding: 20px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+}
+</style>

src/views/systemManage/userManage.vue

@@ -120,7 +120,7 @@ const searchItems = [
   {
     type: "input",
     prop: "name",
-    label: "用户姓名",
+    label: "用户姓名:",
     placeholder: "请输入用户姓名",
     clearable: true,
     span: 8,
@@ -128,7 +128,7 @@ const searchItems = [
   {
     type: "input",
     prop: "mobile",
-    label: "手机号码",
+    label: "手机号码:",
     placeholder: "请输入手机号码",
     clearable: true,
     span: 8,
@@ -559,9 +559,6 @@ onMounted(() => {
     border-radius: 8px;
     padding: 20px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    // overflow: hidden;
-    // display: flex;
-    // flex-direction: column;
   }
 }
 </style>