refactor(用户管理): 重构用户管理页面代码结构

- 移除关联账户卡片注释代码
- 调整用户表格列名与后端字段匹配
- 添加分页功能并优化表格高度
- 修改用户状态显示为映射值
- 优化样式布局
- 对接用户列表API接口

src/views/Logistics/UserManagement/index.vue

@@ -49,7 +49,7 @@
                 </el-card>
 
                 <!-- 关联账户 -->
-                <el-card class="account-card" shadow="hover" style="margin-top: 20px;">
+                <!-- <el-card class="account-card" shadow="hover" style="margin-top: 20px;">
                     <template #header>
                         <span>关联账户</span>
                     </template>
@@ -68,7 +68,7 @@
                     </el-table>
                     <el-pagination layout="prev, pager, next" :total="25" :page-size="10" :current-page="1"
                         class="float-right" />
-                </el-card>
+                </el-card> -->
             </el-col>
         </el-row>
         <!--  账户列表 -->
@@ -80,12 +80,16 @@
                         <el-button type="primary" icon="Plus" class="float-right" size="small"
                             @click="handleAddUserClick">新建账户</el-button>
                     </template>
-                    <el-table :data="accountList" border height="300px">
+                    <el-table :data="accountList" border height="350px">
-                        <el-table-column prop="accountName" label="账户名" />
+                        <el-table-column prop="userName" label="账户名" />
-                        <el-table-column prop="realName" label="姓名" />
+                        <el-table-column prop="nickName" label="姓名" />
-                        <el-table-column prop="unit" label="所属单位" />
+                        <el-table-column prop="deptName" label="所属单位" >
-                        <el-table-column prop="phone" label="联系电话" />
+                            <template #default="{ row }">
-                        <el-table-column prop="role" label="角色" />
+                                {{ row.dept.deptName || '-' }}
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="phonenumber" label="联系电话" />
+                        <el-table-column prop="remark" label="角色" />
                         <el-table-column prop="status" label="状态">
                             <template #default="{ row }">
                                 <el-tag :type="getStatusTagType(row.status)">{{ row.status }}</el-tag>
@@ -98,8 +102,11 @@
                             </template>
                         </el-table-column>
                     </el-table>
-                    <el-pagination layout="prev, pager, next" :total="25" :page-size="10" :current-page="1"
+                    <div class="PageBox">
-                        class="float-right" />
+                          <el-pagination :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total"
+                layout="total, prev, pager, next" @current-change="handleCurrentChange" />
+                    </div>
+                   
                 </el-card>
             </el-col>
         </el-row>
@@ -111,11 +118,27 @@
 <script setup>
 import { ref, onMounted, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
 import { listDept } from '@/api/treeRatingManagement'
+import { listUser } from '@/api/system/user.js'
 import UserDialog from "./UserDialog.vue";
 const { proxy } = getCurrentInstance()
 
+// 用户状态对照表
+const statusMap = {
+    '0': '待审核',
+    '1': '已通过',
+    '2': '已驳回',
+    '3': '已禁用',
+}
+
 const dialogShow = ref(false); // 新增账户弹窗显示状态
 
+// 分页信息
+const pageInfo = reactive({
+    total: 10,
+    pageSize: 10,
+    pageNum: 1,
+})
+
 // 加载状态
 const loading = ref(false)
 
@@ -130,41 +153,16 @@ const treeProps = {
 
 // 节点表单数据
 const JDformData = ref({
-    deptName: '江苏省电力公司',
+    deptName: '',
-    deptId: 'JS001',
+    deptId: '',
-    parentName: '-',
+    parentName: '',
-    parentId: '-',
+    parentId: '',
-    createTime: '2023-05-15'
+    createTime: ''
 })
 
 
 // 账户列表数据
-const accountList = ref([
+const accountList = ref([])
-    {
-        accountName: 'NJGD_ZH',
-        realName: '赵华',
-        unit: '南京市供电公司 - 城东片区 - A办公楼',
-        phone: '138****1234',
-        role: '项目经理',
-        status: '已生效'
-    },
-    {
-        accountName: 'NJGD_LW',
-        realName: '李伟',
-        unit: '南京市供电公司 - 城西片区 - C办公楼',
-        phone: '139****5678',
-        role: '审核人',
-        status: '待审核'
-    },
-    {
-        accountName: 'SZDL_WX',
-        realName: '王霞',
-        unit: '苏州市供电公司 - 城南片区 - B办公楼',
-        phone: '137****9876',
-        role: '物业管理员',
-        status: '已禁用'
-    }
-])
 
 /** 将接口数据转换为树形结构格式 */
 function convertToTreeData(data) {
@@ -185,6 +183,7 @@ function convertToTreeData(data) {
 
 onMounted(() => {
     getDeptTree()
+    getUserList()
 })
 
 // 获取组织架构树
@@ -243,6 +242,31 @@ const getDeptTree = async () => {
     }
 }
 
+// 获取用户列表
+const getUserList = async () => {
+    loading.value = true;
+    try {
+        const response = await listUser({
+            pageNum: pageInfo.pageNum,
+            pageSize: pageInfo.pageSize,
+            deptId: JDformData.value.deptId || '',
+        })
+        if (response.code === 200) {
+            accountList.value = response.rows || []
+            pageInfo.total = response.total || 0
+        }
+    } catch (error) {
+        console.error('获取用户列表失败:', error)
+    } finally {
+        loading.value = false;
+    }
+}
+
+// 分页改变事件
+const handleCurrentChange = (val) => {
+    pageInfo.pageNum = val
+    getUserList()
+}
 
 
 // 树形结构点击事件
@@ -256,6 +280,8 @@ const handleTreeChange = (data) => {
         createTime: data.originalData.createTime || '-'
     }
     console.log(data,'获取当前节点', JDformData.value)
+    // 刷新用户列表
+    getUserList()
 }
 
 // 获取状态标签类型
@@ -286,7 +312,7 @@ const handleCancel = () => {
 }
 
 .CardBox {
-    height: 570px;
+    height: 240px;
     display: flex;
     padding: 0px 26px;
     background: #fff;
@@ -319,6 +345,13 @@ const handleCancel = () => {
 .account-card {
     position: relative;
 }
+.PageBox {
+    padding: 20px;
+    margin-top: 20px;
+    height: 40px;
+    display: flex;
+    justify-content: flex-end;
+}
 
 .float-right {
     position: absolute;