feat: 完善前端用户管理功能

src/router/modules/auth.ts

@@ -11,6 +11,14 @@ export default {
     rank: 1
   },
   children: [
+    {
+      path: "/auth/backendUser",
+      name: "backendUser",
+      component: () => import("@/views/auth/backendUser/index.vue"),
+      meta: {
+        title: "管理端用户"
+      }
+    },
     {
       path: "/auth/company",
       name: "company",

src/views/auth/frontendUser/index.vue

@@ -37,13 +37,52 @@ const tableData = ref([]);
 const loading = ref(false);
 const total = ref(0);
 
+// 公司列表数据
+const companyOptions = ref([]);
+
+// 获取公司列表
+const getCompanyList = async () => {
+  try {
+    const res = await request(authApi("getCompanyPrimaryInfo"), {
+      method: "post"
+    });
+    console.info(res);
+    if (res.status === 200) {
+      companyOptions.value = res.data.map(item => ({
+        value: item.id,
+        label: item.companyName
+      }));
+    }
+  } catch (error) {
+    console.error("获取公司列表失败:", error);
+  }
+};
+
+// 角色列表数据
+const roleOptions = ref([]);
+// 获得角色列表
+const getRoleList = async () => {
+  try {
+    const res = await request(authApi("getRoles"), {
+      method: "post"
+    });
+    console.info(res);
+    if (res.status === 200) {
+      roleOptions.value = res.data.map(item => ({
+        value: item.id,
+        label: item.roleName
+      }));
+    }
+  } catch (error) {
+    console.error("获取角色列表失败:", error);
+  }
+};
+
 // 获得前端用户列表
 const getUserList = async () => {
   try {
     loading.value = true;
     const params = { ...queryParams.value };
-
-    console.info(params);
     const data = await request(authApi("frontendUserPage"), {
       method: "post",
       body: JSON.stringify(params)
@@ -99,48 +138,59 @@ const columns: TableColumnList = [
   {
     label: "账号",
     prop: "name",
-    width: "260",
+    width: "160",
     fixed: true
   },
   {
     label: "昵称",
     prop: "nickName",
-    width: "260"
+    width: "180"
   },
   {
     label: "电话",
     prop: "phoneNum",
-    width: "260"
+    width: "120"
   },
   {
     label: "邮件",
     prop: "email",
-    width: "260"
+    width: "200"
   },
   {
     label: "所属公司",
     prop: "companyId",
-    width: "260"
+    width: "150",
+    formatter: row => {
+      const company = companyOptions.value.find(
+        item => item.value === row.companyId
+      );
+      return company ? company.label : "";
+    }
   },
   {
     label: "角色",
     prop: "roleId",
-    width: "260"
-  },
-  {
-    label: "微信ID",
-    prop: "wxOpenid",
-    width: "260"
+    width: "150",
+    formatter: row => {
+      const role = roleOptions.value.find(item => item.value === row.roleId);
+      return role ? role.label : "";
+    }
   },
+  // {
+  //   label: "微信ID",
+  //   prop: "wxOpenid",
+  //   width: "260"
+  // },
   {
     label: "状态",
     prop: "status",
-    width: "100"
+    width: "100",
+    slot: "status"
   },
   {
     label: "上次登陆时间",
     prop: "createTime",
-    width: "260",
+    width: "155",
     formatter: row => {
       return row.createTime
         ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -150,7 +200,7 @@ const columns: TableColumnList = [
   {
     label: "创建时间",
     prop: "createTime",
-    width: "260",
+    width: "155",
     formatter: row => {
       return row.createTime
         ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
@@ -199,44 +249,85 @@ const handleDelete = row => {
 // 页面加载时获取数据
 onMounted(() => {
   getUserList();
+  getCompanyList(); // 获取公司列表数据
+  getRoleList(); // 获取角色列表数据
 });
 </script>
 
 <template>
   <div class="company-container">
     <div class="search-box">
-      <el-form ref="queryForm" :model="queryParams" :inline="true">
-        <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.nikeName"
-            placeholder="请输入昵称"
-            clearable
-            @keyup.enter="handleSearch"
-          />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-select
-            v-model="queryParams.status"
-            placeholder="请选择状态"
-            clearable
-            class="status-select"
-          >
-            <el-option label="正常" value="1" />
-            <el-option label="异常" value="0" />
-          </el-select>
-        </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
+        ref="queryForm"
+        :model="queryParams"
+        :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="nikeName">
+            <el-input
+              v-model="queryParams.nikeName"
+              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 label="所属公司" prop="companyId">
+            <el-select
+              v-model="queryParams.companyId"
+              placeholder="请选择公司"
+              clearable
+              class="company-select"
+            >
+              <el-option
+                v-for="item in companyOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="状态" prop="status">
+            <el-select
+              v-model="queryParams.status"
+              placeholder="请选择状态"
+              clearable
+              class="status-select"
+            >
+              <el-option label="正常" value="1" />
+              <el-option label="禁用" value="0" />
+            </el-select>
+          </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>
 
@@ -248,8 +339,8 @@ onMounted(() => {
       row-key="id"
     >
       <template #status="{ row }">
-        <el-tag :type="row.status === 1 ? 'success' : 'danger'" size="small">
-          {{ row.status === 1 ? "正常" : "异常" }}
+        <el-tag :type="row.status == '1' ? 'success' : 'danger'" size="small">
+          {{ row.status == "1" ? "正常" : "异常" }}
         </el-tag>
       </template>
 
@@ -276,3 +367,55 @@ onMounted(() => {
     </div>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.company-container {
+  padding: 20px;
+
+  .search-box {
+    padding: 20px;
+    margin-bottom: 20px;
+    background: #fff;
+    border-radius: 4px;
+
+    .search-form {
+      .form-row {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        margin-bottom: 10px;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+
+      :deep(.el-form-item) {
+        flex: 1;
+        min-width: 200px;
+        margin-right: 10px;
+        margin-bottom: 0;
+
+        // 调整输入框宽度
+        .el-input {
+          width: 100%;
+        }
+
+        &.search-buttons {
+          flex: 0 0 auto;
+          min-width: auto;
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  .status-select {
+    width: 80px;
+  }
+
+  .company-select {
+    width: 180px;
+  }
+}
+</style>