style: 界面管理

src/router/modules/auth.ts

@@ -34,6 +34,14 @@ export default {
       meta: {
         title: "用户管理"
       }
+    },
+    {
+      path: "/auth/role",
+      name: "role",
+      component: () => import("@/views/auth/role/index.vue"),
+      meta: {
+        title: "角色管理"
+      }
     }
   ]
 } satisfies RouteConfigsTable;

src/views/auth/backendUser/index.vue

@@ -206,12 +206,55 @@ onMounted(() => {
 <template>
   <div class="backendUser-container">
     <div class="search-box">
-      <el-input v-model="queryParams.name" placeholder="请输入账号" />
+      <el-form
-      <el-input v-model="queryParams.nickName" placeholder="请输入昵称" />
+        ref="queryForm"
-      <el-input v-model="queryParams.phoneNum" placeholder="请输入电话" />
+        :model="queryParams"
-      <el-input v-model="queryParams.email" placeholder="请输入邮件" />
+        :inline="true"
+        class="search-form"
+      >
+        <div class="form-row">
+          <el-form-item label="账号" prop="name">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入账号"
+              clearable
+              @keyup.enter="handleSearch"
+            />
+          </el-form-item>
+
+          <el-form-item label="昵称" prop="nickName">
+            <el-input
+              v-model="queryParams.nickName"
+              placeholder="请输入昵称"
+              clearable
+              @keyup.enter="handleSearch"
+            />
+          </el-form-item>
+
+          <el-form-item label="电话" prop="phoneNum">
+            <el-input
+              v-model="queryParams.phoneNum"
+              placeholder="请输入电话"
+              clearable
+              @keyup.enter="handleSearch"
+            />
+          </el-form-item>
+
+          <el-form-item label="邮箱" prop="email">
+            <el-input
+              v-model="queryParams.email"
+              placeholder="请输入邮箱"
+              clearable
+              @keyup.enter="handleSearch"
+            />
+          </el-form-item>
+
+          <el-form-item class="search-buttons">
             <el-button type="primary" @click="handleSearch">搜索</el-button>
             <el-button @click="handleReset">重置</el-button>
+          </el-form-item>
+        </div>
+      </el-form>
     </div>
     <pure-table
       v-loading="loading"
@@ -292,12 +335,10 @@ onMounted(() => {
     }
   }
 
-  .status-select {
+  .pagination-container {
-    width: 80px;
+    display: flex;
-  }
+    justify-content: flex-end;
-
+    margin-top: 20px;
-  .company-select {
-    width: 180px;
   }
 }
 </style>

src/views/auth/role/index.vue

@@ -0,0 +1,256 @@
+<script setup lang="ts">
+import dayjs from "dayjs";
+import { ref, onMounted } from "vue";
+import { clone } from "@pureadmin/utils";
+import PureTableBar from "@/components/RePureTableBar/src/bar";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { request, authApi } from "@/api/utils";
+import { getToken } from "@/utils/auth";
+
+defineOptions({
+  name: "company"
+});
+
+withDefaults(
+  defineProps<{
+    height?: string;
+  }>(),
+  {
+    height: null
+  }
+);
+
+// 定义查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 20,
+  roleName: ""
+});
+
+// 定义表格数据
+const tableData = ref([]);
+const loading = ref(false);
+const total = ref(0);
+
+// 获取公司列表数据
+const getRoleList = async () => {
+  try {
+    loading.value = true;
+    const params = { ...queryParams.value };
+
+    console.log(params);
+
+    const data = await request(authApi("rolePage"), {
+      method: "POST",
+      body: JSON.stringify(params)
+    });
+    console.log(data);
+
+    /* tableData.value = data.data.records;
+    total.value = data.data.total; */
+    if (data.status === 200) {
+      tableData.value = data.data.rows;
+      total.value = data.data.records;
+    } else {
+      ElMessage.error(data.msg || "获取数据失败");
+    }
+  } catch (error) {
+    console.error("获取公司列表失败:", error);
+    ElMessage.error(error.message || "获取数据失败");
+  } finally {
+    loading.value = false;
+  }
+};
+
+// 搜索方法
+const handleSearch = () => {
+  queryParams.value.pageNum = 1;
+  getRoleList();
+};
+
+// 重置方法
+const handleReset = () => {
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 20,
+    roleName: ""
+  };
+  getRoleList();
+};
+
+// 分页改变
+const handleSizeChange = (val: number) => {
+  queryParams.value.pageSize = val;
+  getRoleList();
+};
+
+const handleCurrentChange = (val: number) => {
+  queryParams.value.pageNum = val;
+  getRoleList();
+};
+
+const columns: TableColumnList = [
+  {
+    label: "名称",
+    prop: "roleName",
+    width: "260",
+    fixed: true
+  },
+  {
+    label: "创建者",
+    prop: "createUserId",
+    width: "260"
+  },
+  {
+    label: "描述",
+    prop: "description",
+    width: "260"
+  },
+  {
+    label: "创建时间",
+    prop: "createTime",
+    width: "260",
+    formatter: row => {
+      return row.createTime
+        ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  },
+  {
+    label: "更新时间",
+    prop: "updateTime",
+    width: "260",
+    formatter: row => {
+      return row.updateTime
+        ? dayjs(row.updateTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  },
+  {
+    label: "操作",
+    fixed: "right",
+    width: "160",
+    slot: "operation"
+  }
+];
+
+function handleClick(row) {
+  console.log(row);
+}
+
+// 添加编辑和删除方法
+const handleEdit = row => {
+  console.log("编辑", row);
+  // TODO: 实现编辑逻辑
+};
+
+const handleDelete = row => {
+  ElMessageBox.confirm("确认删除该记录?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning"
+  })
+    .then(async () => {
+      try {
+        // TODO: 调用删除接口
+        ElMessage.success("删除成功");
+        getRoleList(); // 刷新列表
+      } catch (error) {
+        console.error("删除失败:", error);
+        ElMessage.error(error.message || "删除失败");
+      }
+    })
+    .catch(() => {
+      // 取消删除
+    });
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+  getRoleList();
+});
+</script>
+
+<template>
+  <div class="company-container">
+    <div class="search-box">
+      <el-form ref="queryForm" :model="queryParams" :inline="true">
+        <el-form-item label="角色名称" prop="roleName">
+          <el-input
+            v-model="queryParams.roleName"
+            placeholder="请输入角色名称"
+            clearable
+            @keyup.enter="handleSearch"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <pure-table
+      v-loading="loading"
+      :data="tableData"
+      :columns="columns"
+      :height="height"
+      row-key="id"
+    >
+      <template #status="{ row }">
+        <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
+          {{ row.status === 1 ? "正常" : "异常" }}
+        </el-tag>
+      </template>
+
+      <template #operation="{ row }">
+        <el-button link type="primary" size="small" @click="handleEdit(row)">
+          编辑
+        </el-button>
+        <el-button link type="danger" size="small" @click="handleDelete(row)">
+          删除
+        </el-button>
+      </template>
+    </pure-table>
+
+    <div class="pagination-container">
+      <el-pagination
+        v-model:current-page="queryParams.pageNum"
+        v-model:page-size="queryParams.pageSize"
+        :page-sizes="[10, 20, 30, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.company-container {
+  padding: 20px;
+
+  .search-box {
+    padding: 20px;
+    margin-bottom: 20px;
+    background: #fff;
+    border-radius: 4px;
+
+    // 取消 el-form-item 的底部边距
+    :deep(.el-form-item) {
+      margin-bottom: 0;
+    }
+  }
+
+  .pagination-container {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+
+  .status-select {
+    width: 90px;
+  }
+}
+</style>

vite.config.ts

@@ -41,7 +41,7 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
         "/biz": {
           target: "http://127.0.0.1:8089",
           changeOrigin: true,
-          rewrite: path => path.replace(/^\/biz/, "")
+          rewrite: path => path.replace(/^\/biz/, "/biz/rd")
         },
         // auth 接口
         "/auth": {