feat(用户管理): 新增账户审核功能并完善用户管理模块

添加用户审核页面及接口，实现账户审批操作完善用户管理模块的编辑、删除功能优化用户状态显示和表单验证逻辑
2026-01-27 18:00:27 +08:00 · 2026-01-27 18:00:27 +08:00 · 0767228b64
parent 6cbac2d533
commit 0767228b64
5 changed files with 322 additions and 52 deletions
--- a/src/api/system/user.js
+++ b/src/api/system/user.js
@ -134,3 +134,13 @@ export function deptTreeSelect() {
    method: 'get'
  })
 }
+
+
+// 账户审批操作
+export function FetchUserReview(params) {
+  return request({
+    url: '/system/user/audit/' + params.userId,
+    method: 'put',
+    data: params
+  })
+}
--- a/src/router/index.js
+++ b/src/router/index.js
@ -319,6 +319,19 @@ export const constantRoutes = [
      },
    ],
  },
+  {
+    path: "",
+    component: Layout,
+    redirect: "/index",
+    children: [
+      {
+        path: "/logistics/UserReview",
+        component: () => import("@/views/Logistics/UserReview/index.vue"),
+        name: "UserReview",
+        meta: { title: "账户审核", icon: "table" },
+      },
+    ],
+  },
  {
    path: "",
    component: Layout,
--- a/src/views/Logistics/UserManagement/UserDialog.vue
+++ b/src/views/Logistics/UserManagement/UserDialog.vue
@ -1,17 +1,17 @@
 <!-- 后勤模块-账户管理-账户【新增/编辑/查看】弹窗详情 -->
 <template>
-    <el-dialog title="新建账户" v-model="props.show" @close="handleClose" width="600px">
+    <el-dialog :title="userId ? '编辑账户' : '新建账户'" v-model="props.show" @close="handleClose" width="600px">
        <div class="Cneter-box">
            <el-form :model="formData" label-width="120px" class="user-form" label-position="top">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item label="账户名">
-                            <el-input v-model="formData.account" placeholder="如: NJGD_ZH" />
+                            <el-input v-model="formData.userName" placeholder="如: NJGD_ZH" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="姓名">
-                            <el-input v-model="formData.realName" placeholder="请输入姓名" />
+                            <el-input v-model="formData.nickName" placeholder="请输入姓名" />
                        </el-form-item>
                    </el-col>
                </el-row>
@ -23,7 +23,7 @@
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="联系电话">
-                            <el-input v-model="formData.phone" placeholder="请输入手机号" />
+                            <el-input v-model="formData.phonenumber" placeholder="请输入手机号" />
                        </el-form-item>
                    </el-col>
                </el-row>
@ -36,16 +36,15 @@
                <el-form-item label="所属单位">
                    <div class="TreeBox">
                        <el-tree :data="unitTreeData" :props="treeProps" show-line highlight-current default-expand-all
-                            @current-change="handleUnitChange" class="unit-tree" />
+                            @current-change="handleUnitChange" :expand-on-click-node="false" class="unit-tree" />
                    </div>

                </el-form-item>

                <el-form-item label="角色">
-                    <el-select v-model="formData.role" placeholder="请选择角色">
-                        <el-option label="项目经理" value="projectManager" />
-                        <el-option label="审核人" value="auditor" />
-                        <el-option label="物业管理员" value="propertyManager" />
+                    <el-select v-model="formData.roleId" placeholder="请选择角色" @change="handleRoleChange">
+                        <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
+                            :value="item.roleId" />
                    </el-select>
                </el-form-item>

@ -64,8 +63,16 @@
 </template>

 <script setup>
-import { ref } from 'vue'
+import { getUser, deptTreeSelect, addUser } from '@/api/system/user.js'
+import { listRole } from '@/api/system/role.js'
+import { ElMessage } from 'element-plus'
+
+import { ref, onBeforeMount } from 'vue'
 const props = defineProps({
+    userId: {
+        type: Number || String,
+        default: ''
+    },
    show: {
        type: Boolean,
        default: false
@ -78,44 +85,77 @@ const props = defineProps({

 // 表单数据
 const formData = ref({
-    account: '',
-    realName: '',
-    password: '',
-    phone: '',
-    email: '',
-    role: '',
+    userName: '', // 账户名
+    nickName: '', // 姓名
+    password: '', // 初始密码
+    phonenumber: '', // 联系电话
+    email: '', // 邮箱
+    roleId: '', // 角色
+    roleName: '', // 角色名称
+    deptName: '', // 所属单位
+    deptId: '', // 所属单位ID
    expiry: '永久有效'
 })

+// 角色列表
+const roleList = ref([])
+
 // 所属单位树形数据
-const unitTreeData = ref([
-    {
-        label: '江苏省电力公司',
-        children: [
-            {
-                label: '南京市供电公司',
-                children: [
-                    {
-                        label: '城东片区',
-                        children: [
-                            { label: 'A办公楼' }
-                        ]
-                    }
-                ]
-            }
-        ]
-    }
-])
+const unitTreeData = ref([])

 // 树形结构配置
 const treeProps = {
    children: 'children',
    label: 'label'
 }
+onBeforeMount(() => {
+    getRoleList()
+    getUnitTree()
+})
+
+// 查询角色
+const getRoleList = async () => {
+    let res = await listRole()
+    if (res.code === 200) {
+        roleList.value = res.rows
+    }
+}
+
+// 查询单位树
+const getUnitTree = async () => {
+    let res = await deptTreeSelect()
+    if (res.code === 200) {
+        console.log("单位树:", res.data)
+        unitTreeData.value = res.data
+    }
+}
+
+// 查询用户详情
+
+const getUserDetail = async () => {
+    let res = await getUser({
+        account: formData.value.account
+    })
+    if (res.code === 200) {
+        formData.value = res.data
+    }
+}
+
+// 角色选择事件
+const handleRoleChange = (roleId) => {
+    console.log('Selected roleId:', roleId)
+    let role = roleList.value.find(item => item.roleId === roleId)
+    if (role) {
+        formData.value.roleName = role.roleName
+    }
+}

 // 所属单位选择事件
 const handleUnitChange = (data) => {
    console.log('Selected unit:', data)
+    formData.value.deptName = data.label
+    formData.value.deptId = data.id
+    console.log('Selected unit:', data)
 }

 // 关闭弹窗
@ -123,9 +163,44 @@ const handleClose = () => {
    props.CloseDialog()
 }

+// 提交表单
 const handleSubmit = () => {
+    console.log('提交数据:', formData.value)
+    // 校验表单
+    if (!formData.value.roleId) {
+        ElMessage.warning('请选择角色')
+        return
+    }
+    if (!formData.value.deptId) {
+        ElMessage.warning('请选择所属单位')
+        return
+    }
+    if (!formData.value.userName) {
+        ElMessage.warning('请输入账户名')
+        return
+    }
+    if (!formData.value.nickName) {
+        ElMessage.warning('请输入姓名')
+        return
+    }
+    if (!formData.value.phonenumber) {
+        ElMessage.warning('请输入联系电话')
+        return
+    }
+
+
+    addUser(formData.value).then(res => {
+        if (res.code === 200) {
+            ElMessage.success('添加成功')
+            props.CloseDialog()
+        } else {
+            ElMessage.error(res.msg || '添加失败')
+        }
+    })
+    
+
    // 提交逻辑
-    props.CloseDialog()
+    // props.CloseDialog()
 }

 </script>
--- a/src/views/Logistics/UserManagement/index.vue
+++ b/src/views/Logistics/UserManagement/index.vue
@ -83,7 +83,7 @@
                    <el-table :data="accountList" border height="350px">
                        <el-table-column prop="userName" label="账户名" />
                        <el-table-column prop="nickName" label="姓名" />
-                        <el-table-column prop="deptName" label="所属单位" >
+                        <el-table-column prop="deptName" label="所属单位">
                            <template #default="{ row }">
                                {{ row.dept.deptName || '-' }}
                            </template>
@ -92,19 +92,20 @@
                        <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>
+                                <el-tag :type="getStatusTagType(row.status)">{{ statusMap[row.status] }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template #default="{ row }">
-                                <el-button type="text" icon="Edit">编辑</el-button>
-                                <el-button type="text" icon="Delete">删除</el-button>
+                                <el-button type="text" icon="Edit" @click="handleEditUser(row)">编辑</el-button>
+                                <el-button type="text" icon="Delete" @click="handleDeleteUser(row)">删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="PageBox">
-                          <el-pagination :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total"
-                layout="total, prev, pager, next" @current-change="handleCurrentChange" />
+                        <el-pagination :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"
+                            :total="pageInfo.total" layout="total, prev, pager, next"
+                            @current-change="handleCurrentChange" />
                    </div>

                </el-card>
@ -112,22 +113,22 @@
        </el-row>

        <!-- 账户【新增/编辑/查看】弹窗 -->
-        <UserDialog v-if="dialogShow" :show="dialogShow" :CloseDialog="handleCancel" />
+        <UserDialog v-if="dialogShow" :show="dialogShow" :userId="userId" :CloseDialog="handleCancel" />
    </div>
 </template>
 <script setup>
 import { ref, onMounted, getCurrentInstance, reactive, toRefs, nextTick } from 'vue'
 import { listDept } from '@/api/treeRatingManagement'
-import { listUser } from '@/api/system/user.js'
+import { listUser, delUser } from '@/api/system/user.js'
 import UserDialog from "./UserDialog.vue";
+import { ElMessage, ElMessageBox } from 'element-plus'
 const { proxy } = getCurrentInstance()

 // 用户状态对照表
 const statusMap = {
-    '0': '待审核',
-    '1': '已通过',
-    '2': '已驳回',
-    '3': '已禁用',
+    '0': '已生效',
+    '1': '已停用',
+    '2': '待审核',
 }

 const dialogShow = ref(false); // 新增账户弹窗显示状态
@ -139,6 +140,9 @@ const pageInfo = reactive({
    pageNum: 1,
 })

+// 当前操作的用户ID
+const userId = ref('')
+
 // 加载状态
 const loading = ref(false)

@ -279,27 +283,59 @@ const handleTreeChange = (data) => {
        parentId: data.originalData.parentId || '-',
        createTime: data.originalData.createTime || '-'
    }
-    console.log(data,'获取当前节点', JDformData.value)
+    console.log(data, '获取当前节点', JDformData.value)
    // 刷新用户列表
    getUserList()
 }

 // 获取状态标签类型
 const getStatusTagType = (status) => {
-    if (status === '已生效') return 'success'
-    if (status === '待审核') return 'warning'
-    if (status === '已禁用') return 'danger'
+    if (status === '0') return 'success'
+    if (status === '1') return 'info'
+    if (status === '2') return 'primary'
    return 'info'
 }

 // 新增账户弹窗显示
 const handleAddUserClick = () => {
    dialogShow.value = true;
+    userId.value = ''
 }

 // 新增账户弹窗关闭
 const handleCancel = () => {
    dialogShow.value = false;
+    userId.value = ''
+    getUserList()
+}
+
+// 编辑账户弹窗显示
+const handleEditUser = (user) => {
+    dialogShow.value = true;
+    userId.value = user.userId
+}
+
+// 删除账户
+const handleDeleteUser = async (user) => {
+    // 确认删除
+    const confirm = await ElMessageBox.confirm('确定删除账户 ' + user.userName + ' 吗？', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+    })
+    if (!confirm) return
+    try {
+        const response = await delUser(user.userId)
+        if (response.code === 200) {
+            ElMessage.success('删除成功')
+            getUserList()
+        } else {
+            ElMessage.error(response.msg || '删除失败')
+        }
+    } catch (error) {
+        console.error('删除账户失败:', error)
+        ElMessage.error('删除账户失败')
+    }
 }

 </script>
@ -345,6 +381,7 @@ const handleCancel = () => {
 .account-card {
    position: relative;
 }
+
 .PageBox {
    padding: 20px;
    margin-top: 20px;
--- a/src/views/Logistics/UserReview/index.vue
+++ b/src/views/Logistics/UserReview/index.vue
@ -0,0 +1,135 @@
+<!-- 后勤模块-账户审核-列表 -->
+<template>
+    <div class="MainBox">
+        <div class="FormBox card-box">
+            <el-form :model="formData" inline ref="formRef">
+                <el-form-item label="用户名" prop="username">
+                    <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
+                </el-form-item>
+                <el-form-item label="时间范围" prop="timeRange">
+                    <el-date-picker v-model="formData.timeRange" type="daterange" value-format="yyyy-MM-dd"
+                        range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
+                </el-form-item>
+            </el-form>
+            <div class="ButtonBox">
+                <el-button type="primary" @click="handleSearch">查询</el-button>
+                <el-button type="primary" @click="handleSearch">重置</el-button>
+            </div>
+        </div>
+        <div class="card-box">
+            <div class="TableBox">
+                <el-table :data="tableData" v-loading="loading">
+                    <el-table-column prop="userName" label="账户名" />
+                    <el-table-column prop="nickName" label="姓名" />
+                    <el-table-column prop="deptName" label="所属单位">
+                        <template #default="{ row }">
+                            {{ 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="状态" />
+                    <el-table-column prop="operation" label="操作" width="100">
+                        <template #default="scope">
+                            <div class="FlexBox">
+                                <el-button type="text"  size="mini" @click="handleApprove(scope.row)">审批</el-button>
+                            </div>
+                        </template>
+                    </el-table-column>
+                </el-table>
+            </div>
+            <div class="PageBox">
+                <el-pagination layout="total, prev, pager, next" :total="pageInfo.total"
+                    :page-size.sync="pageInfo.pageSize" :current-page.sync="pageInfo.pageNum"
+                    @current-change="handleCurrentChange" />
+            </div>
+        </div>
+
+
+    </div>
+</template>
+<script setup>
+import dayjs from "dayjs";
+import { ref, onBeforeMount } from "vue";
+import { listUser } from "@/api/system/user";
+
+// 查询表单
+const formData = ref({
+    username: "",
+    timeRange: [],
+});
+
+// 加载状态
+const loading = ref(false);
+
+// 分页
+const pageInfo = ref({
+    pageNum: 1,
+    pageSize: 10,
+    total: 0,
+});
+
+// 表格数据
+const tableData = ref([]);
+
+onBeforeMount(() => {
+    getinit();
+});
+
+
+// 初始化查询用户列表
+const getinit = async () => {
+    let query = {
+        username: formData.value.username,
+        startTime: formData.value.timeRange[0] ? dayjs(formData.value.timeRange[0]).format('YYYY-MM-DD') : '',
+        endTime: formData.value.timeRange[1] ? dayjs(formData.value.timeRange[1]).format('YYYY-MM-DD') : '',
+        pageNum: pageInfo.value.pageNum,
+        pageSize: pageInfo.value.pageSize,  
+    };
+    loading.value = true;
+    let res = await listUser(query);
+    loading.value = false;
+    if (res.code === 200) {
+        tableData.value = res.rows;
+        pageInfo.value.total = res.total;
+    }
+};
+
+</script>
+<style scoped lang="scss">
+.MainBox {
+    padding: 20px;
+    height: 100%;
+    background: #F9FAFB;
+}
+
+.FlexBox {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: 10px;
+}
+
+.card-box {
+    background: #fff;
+    padding: 16px;
+    border-radius: 4px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
+}
+
+.FormBox {
+    display: flex;
+}
+
+.TableBox {
+    height: 400px;
+}
+
+.PageBox {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    margin-top: 20px;
+}
+</style>