From 02522561fc8e3599dac62461e5e1d829a5f6daf4 Mon Sep 17 00:00:00 2001
From: zhj <silent3035@163.com>
Date: Thu, 26 Dec 2024 17:56:46 +0800
Subject: [PATCH] style: temp modify

---
 src/views/auth/backendUser/index.vue  | 296 +++++++++++++++++++++++++-
 src/views/auth/frontendUser/index.vue |   4 +-
 2 files changed, 297 insertions(+), 3 deletions(-)

diff --git a/src/views/auth/backendUser/index.vue b/src/views/auth/backendUser/index.vue
index 05c57bd..24e28cf 100644
--- a/src/views/auth/backendUser/index.vue
+++ b/src/views/auth/backendUser/index.vue
@@ -1,9 +1,303 @@
 <script setup lang="ts">
+import dayjs from "dayjs";
+import { ref, onMounted } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { request, authApi } from "@/api/utils";
+
 defineOptions({
   name: "backendUser"
 });
+
+withDefaults(
+  defineProps<{
+    height?: string;
+  }>(),
+  {
+    height: null
+  }
+);
+
+// 定义查询参数
+const queryParams = ref({
+  pageNum: 1,
+  pageSize: 20,
+  name: "",
+  nickName: "",
+  phoneNum: "",
+  email: ""
+});
+
+// 定义数据列表
+const tableData = ref([]);
+const loading = ref(false);
+const total = ref(0);
+
+// 角色列表数据
+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 };
+    const data = await request(authApi("backendUserPage"), {
+      method: "post",
+      body: JSON.stringify(params)
+    });
+    console.log(data);
+
+    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;
+  getUserList();
+};
+// 重置方法
+const handleReset = () => {
+  queryParams.value = {
+    pageNum: 1,
+    pageSize: 20,
+    name: "",
+    nickName: "",
+    phoneNum: "",
+    email: ""
+  };
+  getUserList();
+};
+// 分页变化
+const handleSizeChange = (val: number) => {
+  queryParams.value.pageSize = val;
+  getUserList();
+};
+
+const handleCurrentChange = (val: number) => {
+  queryParams.value.pageNum = val;
+  getUserList();
+};
+
+const columns: TableColumnList = [
+  {
+    label: "账号",
+    prop: "name",
+    width: "160",
+    fixed: true
+  },
+  {
+    label: "昵称",
+    prop: "nickName",
+    width: "180"
+  },
+  {
+    label: "电话",
+    prop: "phoneNum",
+    width: "120"
+  },
+  {
+    label: "邮件",
+    prop: "email",
+    width: "200"
+  },
+  {
+    label: "角色",
+    prop: "roleId",
+    width: "150",
+    formatter: row => {
+      const role = roleOptions.value.find(item => item.value === row.roleId);
+      return role ? role.label : "";
+    }
+  },
+  {
+    label: "上次登陆时间",
+    prop: "createTime",
+    width: "155",
+    formatter: row => {
+      return row.createTime
+        ? dayjs(row.createTime).format("YYYY-MM-DD HH:mm:ss")
+        : "";
+    }
+  },
+  {
+    label: "创建时间",
+    prop: "createTime",
+    width: "155",
+    formatter: row => {
+      return row.createTime
+        ? dayjs(row.createTime).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("删除成功");
+        getUserList(); // 刷新列表
+      } catch (error) {
+        console.error("删除失败:", error);
+        ElMessage.error(error.message || "删除失败");
+      }
+    })
+    .catch(() => {
+      // 取消删除
+    });
+};
+
+// 页面加载时获取数据
+onMounted(() => {
+  getUserList();
+  getRoleList(); // 获取角色列表数据
+});
 </script>
 
 <template>
-  <h1>管理端用户</h1>
+  <div class="backendUser-container">
+    <div class="search-box">
+      <el-input v-model="queryParams.name" placeholder="请输入账号" />
+      <el-input v-model="queryParams.nickName" placeholder="请输入昵称" />
+      <el-input v-model="queryParams.phoneNum" placeholder="请输入电话" />
+      <el-input v-model="queryParams.email" placeholder="请输入邮件" />
+      <el-button type="primary" @click="handleSearch">搜索</el-button>
+      <el-button @click="handleReset">重置</el-button>
+    </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>
+.backendUser-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>
diff --git a/src/views/auth/frontendUser/index.vue b/src/views/auth/frontendUser/index.vue
index 08a7a9e..6e60744 100644
--- a/src/views/auth/frontendUser/index.vue
+++ b/src/views/auth/frontendUser/index.vue
@@ -255,7 +255,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="company-container">
+  <div class="frontendUser-container">
     <div class="search-box">
       <el-form
         ref="queryForm"
@@ -369,7 +369,7 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
-.company-container {
+.frontendUser-container {
   padding: 20px;
 
   .search-box {