feat: ✨ 工作台页面和用户分页列表页面完善

src/pages/work/user/edit.vue

@@ -0,0 +1,13 @@
+<template>
+  <view> 编辑用户，ID:{{ id }} </view>
+</template>
+
+<script lang="ts" setup>
+// uniapp 获取url参数 id  不使用vue-router
+
+const pages = getCurrentPages();
+const currentPage = pages[pages.length - 1];
+const options = (currentPage as any).options;
+const id = ref(options.id);
+console.log("ID:", id);
+</script>

src/pages/work/user/index.vue

@@ -1,9 +1,97 @@
 <template>
   <view class="user">
-    <text class="text-cyan font-bold text-lg">用户</text>
+    <wd-table :data="dataList" @sort-method="handleSort">
+      <wd-table-col prop="username" label="用户名" :fixed="true" width="150rpx" :sortable="true" />
+      <wd-table-col prop="nickname" label="昵称" />
+      <wd-table-col prop="" label="性别" width="120rpx">
+        <template #value="{ row }">
+          <wd-tag v-if="row.gender == 1" type="primary" mark plain>男</wd-tag>
+          <wd-tag v-else-if="row.gender == 2" type="danger" mark plain>女</wd-tag>
+          <wd-tag v-else mark plain>未知</wd-tag>
+        </template>
+      </wd-table-col>
+      <wd-table-col prop="deptName" label="部门" />
+      <wd-table-col prop="mobile" width="220rpx" label="手机号码" />
+      <wd-table-col prop="" label="状态" width="120rpx">
+        <template #value="{ row }">
+          <wd-tag v-if="row.status == 1" type="success" mark plain>正常</wd-tag>
+          <wd-tag v-else type="danger" mark plain>停用</wd-tag>
+        </template>
+      </wd-table-col>
+      <wd-table-col prop="createTime" label="创建时间" />
+      <wd-table-col prop="" :fixed="true" label="操作">
+        <template #value="{ row }">
+          <wd-text type="primary" class="cursor-pointer" text="编辑" @click="handleEdit(row)" />
+          <wd-text
+            type="error"
+            class="ml-2 cursor-pointer"
+            text="删除"
+            @click="handleDelete(row)"
+          />
+        </template>
+      </wd-table-col>
+    </wd-table>
+
+    <wd-loadmore :state="state" @reload="loadmore" />
   </view>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import { LoadMoreState } from "wot-design-uni/components/wd-loadmore/types";
+import UserAPI, { type UserPageQuery, UserPageVO } from "@/api/system/user";
+
+const state = ref<LoadMoreState>("loading"); // 加载状态 loading, finished:, error
+const dataList = ref<Record<string, any>[]>([]);
+
+const queryParams: UserPageQuery = {
+  pageNum: 1,
+  pageSize: 10,
+};
+
+const total = ref(0); // 总数
+
+onReachBottom(() => {
+  if (queryParams.pageNum * queryParams.pageSize < total.value) {
+    loadmore();
+  } else if (queryParams.pageNum * queryParams.pageSize >= total.value) {
+    state.value = "finished";
+  }
+});
+
+function loadmore() {
+  state.value = "loading";
+  UserAPI.getPage(queryParams)
+    .then((data) => {
+      dataList.value = data.list;
+      total.value = data.total;
+      queryParams.pageNum++;
+    })
+    .finally(() => {
+      state.value = "finished";
+    });
+}
+
+/**
+ * 排序
+ */
+function handleSort() {
+  dataList.value = dataList.value?.reverse();
+}
+
+function handleEdit(row: UserPageVO) {
+  console.log("编辑", row);
+  uni.navigateTo({
+    url: `/pages/work/user/edit?id=${row.id}`,
+  });
+}
+
+function handleDelete(row: UserPageVO) {
+  console.log("删除", row);
+}
+
+onLoad(() => {
+  loadmore();
+});
+</script>
 
 <style lang="scss" scoped>
 /* stylelint-disable selector-type-no-unknown */
@@ -11,4 +99,12 @@ page {
   background: #f8f8f8;
 }
 /* stylelint-enable selector-type-no-unknown */
+
+.custom-class {
+  display: flex;
+  flex-direction: col;
+  align-items: center;
+  width: 220rpx;
+  height: 80rpx;
+}
 </style>