用户管理、角色管理

src/components/common/commonTable.vue

@@ -15,8 +15,6 @@
       <el-table
         style="width: 100%"
         :data="tableData"
-        :height="computedTableHeight"
-        :max-height="maxHeight"
         :stripe="stripe"
         border
         :size="size"
@@ -72,6 +70,7 @@
           v-if="index"
           type="index"
           width="60"
+          align="center"
           :label="indexLabel"
           :index="indexMethod"
         />
@@ -299,7 +298,7 @@ const props = defineProps({
   // 索引列的标题
   indexLabel: {
     type: String,
-    default: "#",
+    default: "",
   },
   // 自定义索引的计算方法
   indexMethod: Function,
@@ -393,22 +392,22 @@ const tableData = computed(() => {
 });
 
 // 自动计算表格高度
-const computedTableHeight = computed(() => {
-  if (!props.autoHeight) {
-    return props.tableHeight;
-  }
+// const computedTableHeight = computed(() => {
+//   if (!props.autoHeight) {
+//     return props.tableHeight;
+//   }
   
-  const headerHeight = 50;
-  // const paginationHeight = props.pagination ? 50 : 0;
-  const noDataHeight = tableData.value.length ? 0 : 50;
-  const baseHeight = headerHeight + noDataHeight;
+//   const headerHeight = 50;
+//   // const paginationHeight = props.pagination ? 50 : 0;
+//   const noDataHeight = tableData.value.length ? 0 : 50;
+//   const baseHeight = headerHeight + noDataHeight;
   
-  // 如果数据超过最大行数，固定显示最大行数的高度；如果数据不超过最大行数，按实际行数计算高度
-  const actualRows = Math.min(tableData.value.length, props.maxRows);
-  const contentHeight = actualRows * props.rowHeight;
+//   // 如果数据超过最大行数，固定显示最大行数的高度；如果数据不超过最大行数，按实际行数计算高度
+//   const actualRows = Math.min(tableData.value.length, props.maxRows);
+//   const contentHeight = actualRows * props.rowHeight;
   
-  return `${baseHeight + contentHeight}px`;
-});
+//   return `${baseHeight + contentHeight}px`;
+// });
 
 // 监听器
 watch(
@@ -545,7 +544,14 @@ const handleNextClick = (val) => {
   }
 
   .table-container {
-    margin-bottom: 16px;
+    flex: 1;
+    height: 0;
+    display: flex;
+    flex-direction: column;
+    .el-table{
+        flex: 1;
+        height: 0;
+    }
   }
 
   .table-footer {

src/style.css

@@ -24,8 +24,8 @@ html, body {
 
 /* 自定义滚动条样式 */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  width: 4px;
+  height: 4px;
 }
 
 ::-webkit-scrollbar-track {
@@ -34,8 +34,8 @@ html, body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background: #c1c1c1;
-  border-radius: 3px;
+  background: rgba(37, 139, 248, 0.5);
+  border-radius: 2px;
 }
 
 ::-webkit-scrollbar-thumb:hover {

src/styles/manage.less

@@ -11,8 +11,30 @@
     justify-content: space-between;
     align-items: center;
     margin-bottom: 10px;
+    .header-left{
+        flex: 1;
+        width: 0;
+        .el-input{
+            width: 220px;
+        }
+    }
 }
 .manage-content{
     flex: 1;
     height: 0;
+    .common-table{
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        .table-container{
+            flex: 1;
+            height: 0;
+            display: flex;
+            flex-direction: column;
+            .el-table{
+                flex: 1;
+                height: 0;
+            }
+        }
+    }
 }
\ No newline at end of file

src/views/systemManage/roleManage.vue

 <template>
   <div class="user-manage" v-loading="loading">
-    <!-- search form moved into table header to align with 新增 button -->
-    <div class="table-container">
+    <div class="manage-header">
+      <div class="header-left">
+        <el-form :inline="true" :model="searchForm">
+          <el-form-item label="名称查询">
+            <el-input v-model="searchForm.name" clearable />
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="handleSearch">查询</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div class="header-right">
+        <el-form>
+          <el-form-item>
+            <el-button type="primary" @click="handleAdd">新增角色</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+    </div>
+    <div class="manage-content table-container">
       <common-table
         :autoHeight="true"
         :maxRows="10"
@@ -12,27 +30,16 @@
         :current-page="currentPage"
         :page-size="pageSize"
         title=""
+        :index="true"
         :border="true"
         @size-change="handleSizeChange"
         @current-page-change="handleCurrentPageChange"
       >
-        <template #header-left>
-          <div style="display:flex;align-items:center;gap:12px;">
-            <commonForm
-              v-model="searchForm"
-              :config="searchConfig"
-              :items="searchItems"
-              @submit="handleSearch"
-              @reset="handleReset"
-            />
-            <el-button type="primary" @click="handleAdd"> 新增 </el-button>
-          </div>
-        </template>
         <template #operations="{ row, index }">
-          <el-button type="text" size="small" @click="handleEdit(row, index)">
+          <el-button link type="primary" size="small" @click="handleEdit(row, index)">
             编辑
           </el-button>
-          <el-button type="text" size="small" @click="handleDelete(row, index)">
+          <el-button link type="danger" size="small" @click="handleDelete(row, index)">
             删除
           </el-button>
           <!-- <el-button type="text" size="small">数据权限 </el-button> -->
@@ -91,52 +98,20 @@
 <script setup>
 import { ref, reactive, onMounted, getCurrentInstance, computed, nextTick } 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 treeRef = ref(null);
 
-// 数据转换函数
-// const convertToTreeData = (apiData) => {
-//   return apiData.map((item) => ({
-//     value: item.id.toString(),
-//     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);
@@ -150,25 +125,25 @@ const tableColumns = [
     label: "角色名称",
     minWidth: 100,
   },
-  {
-    prop: "key",
-    label: "角色标识",
-    minWidth: 100,
-  },
-  {
-    prop: "createdAt",
-    label: "创建时间",
-    minWidth: 160,
-  },
-  {
-    prop: "updatedAt",
-    label: "更新时间",
-    minWidth: 160,
-  },
+  // {
+  //   prop: "key",
+  //   label: "角色标识",
+  //   minWidth: 100,
+  // },
+  // {
+  //   prop: "createdAt",
+  //   label: "创建时间",
+  //   minWidth: 160,
+  // },
+  // {
+  //   prop: "updatedAt",
+  //   label: "更新时间",
+  //   minWidth: 160,
+  // },
   {
     prop: "operations",
     label: "操作",
-    width: 310,
+    width: 100,
     slot: "operations",
     fixed: "right",
     align: "center",
@@ -211,10 +186,10 @@ const formItems = computed(() => [
     type: "input",
     prop: "key",
     label: "角色标识",
-    placeholder: "请输入角色英文标识",
+    placeholder: "请输入角色标识",
     span: 24,
     required: true,
-    rules: [{ required: true, message: "请输入角色英文标识", trigger: "blur" }],
+    rules: [{ required: true, message: "请输入角色标识", trigger: "blur" }],
   },
   {
     type: "slot",
@@ -233,16 +208,6 @@ 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;
@@ -254,13 +219,7 @@ const handleCurrentPageChange = (page) => {
   loadTableData();
 };
 
-// 树节点点击
-const handleNodeClick = (data, node, element) => {
-  // console.log(data, "data");
-  // console.log(node, "node");
-  // console.log(element, "element");
-};
-// 新增用户
+// 新增角色
 const handleAdd = () => {
   isEdit.value = false;
   dialogTitle.value = "新增角色";
@@ -310,7 +269,7 @@ const handleEdit = (row, index) => {
 // 删除
 const handleDelete = async (row, index) => {
   try {
-    await ElMessageBox.confirm(`确定要删除用户"${row.name}"吗？`, "提示", {
+    await ElMessageBox.confirm(`确定要删除角色"${row.name}"吗？`, "提示", {
       confirmButtonText: "确定",
       cancelButtonText: "取消",
       type: "warning",
@@ -447,6 +406,7 @@ onMounted(() => {
 </script>
 
 <style scoped lang="less">
+  @import "@/styles/manage.less";
 .user-manage {
   padding: 20px;
   background: rgba(157, 188, 218, 0.1);

src/views/systemManage/userManage.vue

@@ -22,13 +22,13 @@
     <div class="manage-content table-container">
       <common-table
         :autoHeight="true"
-        :maxRows="10"
         :data="tableData"
         :columns="tableColumns"
         :total="total"
         :current-page="currentPage"
         :page-size="pageSize"
         title=""
+        :index="true"
         :border="true"
         @size-change="handleSizeChange"
         @current-page-change="handleCurrentPageChange"
@@ -43,10 +43,10 @@
         </template>
 
         <template #operations="{ row, index }">
-          <el-button type="text" size="small" @click="handleEdit(row, index)">
+          <el-button link type="primary" size="small" @click="handleEdit(row, index)">
             编辑
           </el-button>
-          <el-button type="text" size="small" @click="handleDelete(row, index)">
+          <el-button link type="danger" size="small" @click="handleDelete(row, index)">
             删除
           </el-button>
         </template>
@@ -74,52 +74,17 @@
 <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 convertToTreeData = (apiData) => {
-//   return apiData.map((item) => ({
-//     value: item.id.toString(),
-//     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: 12,
-  }
-];
-
 // 表格数据
 const tableData = ref([]);
 const total = ref(0);
@@ -157,11 +122,11 @@ const tableColumns = [
     minWidth: 100,
     showOverflowTooltip: true,
   },
-  {
-    prop: "createdAt",
-    label: "创建时间",
-    minWidth: 160,
-  },
+  // {
+  //   prop: "createdAt",
+  //   label: "创建时间",
+  //   minWidth: 160,
+  // },
   {
     prop: "enable",
     label: "状态",
@@ -172,7 +137,7 @@ const tableColumns = [
   {
     prop: "operations",
     label: "操作",
-    width: 160,
+    width: 120,
     slot: "operations",
     fixed: "right",
     align: "center",
@@ -266,7 +231,7 @@ const formItems = computed(() => [
     checkStrictly: true,
     renderAfterExpand: true,
     showCheckbox: false,
-    multiple: false,
+    multiple: true,
     collapseTags: true,
     maxCollapseTags: 2,
     span: 24,
@@ -331,15 +296,6 @@ const handleSearch = (formData) => {
   loadTableData();
 };
 
-const handleReset = () => {
-  searchForm.value = {
-    name: "",
-    mobile: "",
-  };
-  currentPage.value = 1;
-  loadTableData();
-};
-
 const handleSizeChange = (size) => {
   pageSize.value = size;
   currentPage.value = 1;
@@ -355,13 +311,7 @@ const handleCurrentPageChange = (page) => {
 const handleAdd = () => {
   isEdit.value = false;
   dialogTitle.value = "新增用户";
-  userForm.value = {
-    name: "",
-    departs: [],
-    positions: [],
-    roles: [],
-    enable: "0",
-  };
+  userForm.value = {};
   loadDepartmentData();
   loadPositionsData();
   loadRolesData();