From 11f5414a149e47e5e1d2ee81876b8fe624133c5b Mon Sep 17 00:00:00 2001
From: liangzhou <594755172@qq.com>
Date: Fri, 1 Nov 2024 16:58:55 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=A2=9E=E5=8A=A0=EF=BC=9A?=
 =?UTF-8?q?=201.=20=E5=A2=9E=E5=8A=A0=E6=9D=83=E9=99=90=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/user.js                | 162 +++++++++++---
 src/http/request.js            |   2 +-
 src/layout/role_permission.vue | 388 +++++++++++++++++++++++++++++++++
 src/layout/role_user.vue       | 376 ++++++++++++++++++++++++++++++++
 src/router/index.js            |   3 +
 5 files changed, 894 insertions(+), 37 deletions(-)
 create mode 100644 src/layout/role_permission.vue
 create mode 100644 src/layout/role_user.vue

diff --git a/src/api/user.js b/src/api/user.js
index 60ade8c..0ccf645 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -1,59 +1,149 @@
 import request from "@/http/request";
 
-// 登录方法
-export function login(username, password, code, uuid) {
-    const data = {
-        username,
-        password,
-        code,
-        uuid
-    }
+// // 登录方法
+// export function login(username, password, code, uuid) {
+//     const data = {
+//         username,
+//         password,
+//         code,
+//         uuid
+//     }
+//     return request({
+//         url: '/login',
+//         headers: {
+//             isToken: false
+//         },
+//         method: 'post',
+//         data: data
+//     })
+// }
+
+// // 注册方法
+// export function register(data) {
+//     return request({
+//         url: '/register',
+//         headers: {
+//             isToken: false
+//         },
+//         method: 'post',
+//         data: data
+//     })
+// }
+
+// // 获取用户详细信息
+// export function getInfo() {
+//     return request({
+//         url: '/getInfo',
+//         method: 'get'
+//     })
+// }
+
+// // 退出方法
+// export function logout() {
+//     return request({
+//         url: '/logout',
+//         method: 'post'
+//     })
+// }
+
+// // 获取验证码
+// export function getCodeImg() {
+//     return request({
+//         url: '/captchaImage',
+//         headers: {
+//             isToken: false
+//         },
+//         method: 'get',
+//         timeout: 20000
+//     })
+// }
+
+export function getUserList(params) {
     return request({
-        url: '/login',
-        headers: {
-            isToken: false
-        },
+        url: '/user/getUserList',
         method: 'post',
-        data: data
+        data: params,
+        timeout: 5000
     })
 }
 
-// 注册方法
-export function register(data) {
+export function getRoleList(params) {
     return request({
-        url: '/register',
-        headers: {
-            isToken: false
-        },
+        url: '/user/getRoleList',
         method: 'post',
-        data: data
+        data: params,
+        timeout: 5000
     })
 }
 
-// 获取用户详细信息
-export function getInfo() {
+export function getPermissionList(params) {
     return request({
-        url: '/getInfo',
-        method: 'get'
+        url: '/user/getPermissionList',
+        method: 'post',
+        data: params,
+        timeout: 5000
     })
 }
 
-// 退出方法
-export function logout() {
+export function updateRoleInfo(params) {
     return request({
-        url: '/logout',
-        method: 'post'
+        url: '/user/updateRoleInfo',
+        method: 'post',
+        data: params,
+        timeout: 5000
     })
 }
 
-// 获取验证码
-export function getCodeImg() {
+export function deleteRoleInfo(params) {
     return request({
-        url: '/captchaImage',
-        headers: {
-            isToken: false
-        },
-        method: 'get',
-        timeout: 20000
+        url: '/user/deleteRoleInfo',
+        method: 'post',
+        data: params,
+        timeout: 5000
+    })
+}
+
+export function addRoleInfo(params) {
+    return request({
+        url: '/user/addRoleInfo',
+        method: 'post',
+        data: params,
+        timeout: 5000
+    })
+}
+
+export function getRoleOptions(params) {
+    return request({
+        url: '/user/getRoleOptions',
+        method: 'post',
+        data: params,
+        timeout: 5000
+    })
+}
+
+export function updateUserInfo(params) {
+    return request({
+        url: '/user/updateUserInfo',
+        method: 'post',
+        data: params,
+        timeout: 5000
+    })
+}
+
+export function addUserInfo(params) {
+    return request({
+        url: '/user/addUserInfo',
+        method: 'post',
+        data: params,
+        timeout: 5000
+    })
+}
+
+export function deleteUserInfo(params) {
+    return request({
+        url: '/user/deleteUserInfo',
+        method: 'post',
+        data: params,
+        timeout: 5000
     })
 }
\ No newline at end of file
diff --git a/src/http/request.js b/src/http/request.js
index cc5035b..fa9eae5 100644
--- a/src/http/request.js
+++ b/src/http/request.js
@@ -1,7 +1,7 @@
 import axios from 'axios'
 
 const request = axios.create({
-    baseURL: 'http://localhost:12315/wms',
+    baseURL: 'https://csclasrs.ecorp.cat.com/wmsServer/wms',
     timeout: 5000
 })
 
diff --git a/src/layout/role_permission.vue b/src/layout/role_permission.vue
new file mode 100644
index 0000000..f422f23
--- /dev/null
+++ b/src/layout/role_permission.vue
@@ -0,0 +1,388 @@
+<template>
+    <div style="margin-bottom: 10px; height: 100%; padding-left: 1%; padding-right: 1%;">
+        <el-config-provider :locale="zhCn">
+            <div style="display: flex;justify-content: space-between;">
+                <el-row>
+                    <el-input v-model="roleNameQuery" style="width: 216px; margin-right: 10px;" placeholder="角色名"
+                        :suffix-icon="Search" />
+                    <el-button type="primary" @click="search()">搜索</el-button>
+                    <el-button type="warning" @click="reset()">重置</el-button>
+                </el-row>
+                <el-row>
+                    <el-button type="success" @click="openAddRoleDialog()">新增角色</el-button>
+                </el-row>
+            </div>
+            <br />
+            <el-table :data="roleList" stripe border v-loading="loading" class="table-class" highlight-current-row
+                max-height="650px" @row-click="getCurrentRow" :header-cell-style="{ 'text-align': 'center' }"
+                :cell-style="{ 'text-align': 'center' }">
+                <el-table-column width="65px" fixed="left">
+                    <template v-slot="scope">
+                        <el-radio :label="scope.row.roleId" v-model="roleId">&nbsp;</el-radio>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="roleId" label="id" fixed="left" min-width="120px" show-overflow-tooltip />
+                <el-table-column prop="roleName" label="角色名" min-width="120px" show-overflow-tooltip />
+                <el-table-column fixed="right" label="操作" width="216px">
+                    <template v-slot="scope">
+                        <div style="display: flex;justify-content: space-between;">
+                            <el-button plain type="primary" @click="editCurrentRow(scope.row)">编辑角色</el-button>
+                            <el-button plain type="danger" @click="deleteCurrentRow(scope.row)">删除角色</el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <br />
+            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
+                :small="false" :disabled="false" :background="false" :default-page-size="10"
+                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
+                @current-change="search" />
+            <el-dialog v-model="dialogVisible" title="编辑角色信息" width="40%" draggable :show-close="false">
+                <div
+                    style="max-width: 100%; max-height: 350px; overflow: auto; display: flex; justify-content: center;">
+                    <el-form ref="roleFormRef" :model="roleFormEntity" :label-position="labelPosition"
+                        label-width="100px" style="width: 95%;" :rules="rules" status-icon>
+                        <el-row :gutter="16">
+                            <el-col :span="12" :offset="0">
+                                <el-form-item label="角色id" prop="roleId">
+                                    <el-input v-model="roleFormEntity.roleId" disabled />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="角色名" prop="roleName">
+                                    <el-input v-model="roleFormEntity.roleName" clearable />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row :gutter="16">
+                            <el-col :span="12" :offset="0">
+                                <el-form-item label="权限" prop="permission">
+                                    <el-tree ref="permissionRef" style="max-width: 600px"
+                                        :data="roleFormEntity.permissionTreeData" show-checkbox default-expand-all
+                                        node-key="id" highlight-current :props="defaultProps" />
+                                </el-form-item></el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="dialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="submitInfo(roleFormEntity)">
+                            确认更新
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+            <el-dialog v-model="addRoleDialogVisible" title="添加角色信息" width="40%" draggable :show-close="false">
+                <div
+                    style="max-width: 100%; max-height: 350px; overflow: auto; display: flex; justify-content: center;">
+                    <el-form ref="addRoleFormRef" :model="addRoleFormEntity" :label-position="labelPosition"
+                        label-width="100px" style="width: 95%;" :rules="rules" status-icon>
+                        <el-row :gutter="16">
+                            <el-col :span="12" :offset="0">
+                                <el-form-item label="角色id" prop="roleId">
+                                    <el-input v-model="addRoleFormEntity.roleId" disabled />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="角色名" prop="roleName">
+                                    <el-input v-model="addRoleFormEntity.roleName" clearable />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row :gutter="16">
+                            <el-col :span="12" :offset="0">
+                                <el-form-item label="权限" prop="permission">
+                                    <el-tree ref="addRolePermissionRef" style="max-width: 600px"
+                                        :data="addRoleFormEntity.permissionTreeData" show-checkbox default-expand-all
+                                        node-key="id" highlight-current :props="defaultProps" />
+                                </el-form-item></el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="addRoleDialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="submitAddRole(addRoleFormEntity)">
+                            确认添加
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </el-config-provider>
+    </div>
+</template>
+
+<script setup>
+import store from '@/store'
+import { getRoleList, getPermissionList, updateRoleInfo, deleteRoleInfo, addRoleInfo } from '@/api/user.js'
+import { errorBox } from '@/utils/myMessageBox.js'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { ref, reactive } from 'vue'
+import { dateFormatter, timeFormatter } from '@/utils/formatter.js'
+import { Search } from '@element-plus/icons-vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+</script>
+<script>
+export default {
+    name: 'role_permission',
+    data() {
+        return {
+            roleList: [],
+            currentPage: 1,
+            pageSize: 10,
+            total: 0,
+            roleNameQuery: '',
+            loading: true,
+            dialogVisible: false,
+            roleId: '',
+            roleFormEntity: reactive({}),
+            roleFormRef: ref(),
+            labelPosition: 'top',
+            rules: reactive({}),
+            defaultProps: {
+                children: 'children',
+                label: 'label'
+            },
+            addRoleDialogVisible: false,
+            addRoleFormEntity: reactive({}),
+            addRoleFormRef: ref(),
+        }
+    },
+    mounted() {
+        this.search()
+    },
+    methods: {
+        search() {
+            this.loading = true
+            const request = {
+                pageNo: this.currentPage,
+                pageSize: this.pageSize,
+                userName: store.getters.getUserName,
+                roleId: store.getters.getUser.roleId,
+                roleName: this.roleNameQuery.trim()
+            }
+            getRoleList(request).then(res => {
+                const tableResponse = res.data
+                if (tableResponse.code == 0) {
+                    this.roleList = tableResponse.returnData.lists
+                    this.total = tableResponse.returnData.total
+                } else {
+                    errorBox(tableResponse.message)
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('查询角色列表错误')
+            })
+            this.loading = false
+        },
+        dateFormat: (row, column, cellValue, index) => {
+            return dateFormatter(cellValue)
+        },
+        timeFormat: (row, column, cellValue, index) => {
+            return timeFormatter(cellValue)
+        },
+        reset() {
+            this.standIdQuery = ''
+            this.standTypeQuery = -99
+            this.search()
+        },
+        editCurrentRow(row) {
+            this.roleId = row.roleId
+            if (store.getters.getUser.roleId != 1) {
+                errorBox("操作人必须是管理员级别。")
+                return
+            }
+            // 获取权限
+            this.loading = true
+            const request = {
+                roleId1: store.getters.getUser.roleId,
+                roleId2: row.roleId,
+                userName: store.getters.getUserName
+            }
+            getPermissionList(request).then(res => {
+                const response = res.data
+                if (response.code == 0) {
+                    this.roleFormEntity = {
+                        roleId: row.roleId,
+                        roleName: row.roleName,
+                        permissionTreeData: response.returnData.menu
+                    }
+                    // 设置选中
+                    this.$refs.permissionRef.setCheckedKeys(response.returnData.menuIds, false)
+                } else {
+                    errorBox(response.message)
+                    this.dialogVisible = false
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('查询权限列表错误')
+                this.dialogVisible = false
+            })
+            this.loading = false
+            this.dialogVisible = true
+        },
+        openAddRoleDialog() {
+            if (store.getters.getUser.roleId != 1) {
+                errorBox("操作人必须是管理员级别。")
+                return
+            }
+            // 获取权限
+            this.loading = true
+            const request = {
+                roleId1: store.getters.getUser.roleId,
+                roleId2: null,
+                userName: store.getters.getUserName
+            }
+            getPermissionList(request).then(res => {
+                const response = res.data
+                if (response.code == 0) {
+                    this.addRoleFormEntity = {
+                        roleId: '',
+                        roleName: '',
+                        permissionTreeData: response.returnData.menu
+                    }
+                    // 设置选中
+                    this.$refs.addRolePermissionRef.setCheckedKeys([], false)
+                } else {
+                    errorBox(response.message)
+                    this.addRoleDialogVisible = false
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('查询权限列表错误')
+                this.addRoleDialogVisible = false
+            })
+            this.loading = false
+            this.addRoleDialogVisible = true
+        },
+        submitInfo(formData) {
+            const params = {
+                roleId1: store.getters.getUser.roleId,
+                roleId2: formData.roleId,
+                role2Name: formData.roleName,
+                menuIds: this.$refs.permissionRef.getCheckedKeys(false),
+                userName: store.getters.getUserName
+            }
+            updateRoleInfo(params).then(res => {
+                if (res.data.code == 0) {
+                    this.dialogVisible = false
+                    ElMessage.success('更新角色信息成功。')
+                    this.search()
+                } else {
+                    errorBox(res.data.message)
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('更新角色信息失败。')
+            })
+        },
+        submitAddRole(formData) {
+            const params = {
+                roleId1: store.getters.getUser.roleId,
+                roleId2: formData.roleId,
+                role2Name: formData.roleName,
+                menuIds: this.$refs.addRolePermissionRef.getCheckedKeys(false),
+                userName: store.getters.getUserName
+            }
+            addRoleInfo(params).then(res => {
+                if (res.data.code == 0) {
+                    this.addRoleDialogVisible = false
+                    ElMessage.success('添加角色信息成功。')
+                    this.search()
+                } else {
+                    errorBox(res.data.message)
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('添加角色信息失败。')
+            })
+        },
+        deleteCurrentRow(row) {
+            this.roleId = row.roleId
+            if (store.getters.getUser.roleId != 1) {
+                errorBox("操作人员必须是管理员级别。")
+                return
+            }
+            ElMessageBox.confirm(
+                '该操作会从数据库中删除角色。\n是否继续',
+                '警告',
+                {
+                    confirmButtonText: '确认',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                }
+            ).then(() => {
+                const params = {
+                    roleId1: store.getters.getUser.roleId,
+                    roleId2: row.roleId,
+                    userName: store.getters.getUserName
+                }
+                deleteRoleInfo(params).then(res => {
+                    if (res.data.code == 0) {
+                        ElMessage.success('删除角色信息成功。')
+                        this.search()
+                    } else {
+                        errorBox(res.data.message)
+                    }
+                }).catch(err => {
+                    console.log(err)
+                    errorBox('删除角色信息失败。')
+                })
+            }).catch(() => {
+                ElMessage.info('操作取消')
+            })
+        },
+        getCurrentRow(row) {
+            this.roleId = row.roleId
+        },
+    },
+}
+</script>
+
+<style scoped>
+.el-pagination {
+    padding-left: 5px;
+}
+
+.el-row .el-button {
+    width: 72px;
+    margin-left: 0px;
+    margin-right: 5px;
+}
+
+.table-class {
+    width: 100%;
+}
+
+.el-row .el-form-item {
+    width: 10% inherit;
+    justify-content: center;
+}
+
+.el-row .el-form-item .el-select-v2 {
+    width: 100% !important;
+}
+
+.el-row .el-form-item .el-input-number {
+    width: 100% !important;
+}
+
+.el-row .el-form-item .el-button {
+    margin: auto;
+}
+
+.title-area {
+    display: flex;
+    /* min-height: 10%; */
+    max-height: max-content;
+    margin-bottom: 10px;
+    min-width: inherit;
+    border: solid 1px;
+    border-radius: 10px;
+    box-shadow: 0px 15px 10px -15px #000;
+    overflow: auto;
+    flex-direction: column;
+    padding: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/layout/role_user.vue b/src/layout/role_user.vue
new file mode 100644
index 0000000..6ced147
--- /dev/null
+++ b/src/layout/role_user.vue
@@ -0,0 +1,376 @@
+<template>
+    <div style="margin-bottom: 10px; height: 100%; padding-left: 1%; padding-right: 1%;">
+        <el-config-provider :locale="zhCn">
+            <div style="display: flex;justify-content: space-between;">
+                <el-row>
+                    <el-input v-model="userNameQuery" style="width: 216px; margin-right: 10px;" placeholder="用户名"
+                        :suffix-icon="Search" />
+                    <el-button type="primary" @click="search()">搜索</el-button>
+                    <el-button type="warning" @click="reset()">重置</el-button>
+                </el-row>
+                <el-row>
+                    <el-button type="success" @click="addOneUser()">新增用户</el-button>
+                </el-row>
+            </div>
+            <br />
+            <el-table :data="userList" stripe border v-loading="loading" class="table-class" highlight-current-row
+                max-height="650px" @row-click="getCurrentRow" :header-cell-style="{ 'text-align': 'center' }"
+                :cell-style="{ 'text-align': 'center' }">
+                <el-table-column width="65px" fixed="left">
+                    <template v-slot="scope">
+                        <el-radio :label="scope.row.userId" v-model="userId">&nbsp;</el-radio>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="userId" label="id" fixed="left" min-width="120px" show-overflow-tooltip />
+                <el-table-column prop="userName" label="用户名" min-width="120px" show-overflow-tooltip />
+                <el-table-column prop="roleId" label="角色" :formatter="roleFormat" min-width="120px"
+                    show-overflow-tooltip />
+                <el-table-column prop="loginAccount" label="登录账户" min-width="120px" show-overflow-tooltip />
+                <el-table-column prop="addTime" label="增加时间" :formatter="timeFormat" show-overflow-tooltip
+                    min-width="120px" />
+                <el-table-column prop="updateTime" label="更新时间" :formatter="timeFormat" min-width="120px"
+                    show-overflow-tooltip />
+                <el-table-column prop="addUser" label="添加用户" min-width="120px" show-overflow-tooltip />
+                <el-table-column fixed="right" label="操作" min-width="120px">
+                    <template v-slot="scope">
+                        <div style="display: flex;justify-content: space-between;">
+                            <el-button plain type="primary" @click="editCurrentRow(scope.row)">编辑</el-button>
+                            <el-button plain type="danger" @click="deleteCurrentRow(scope.row)">删除</el-button>
+                        </div>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <br />
+            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 25, 50]"
+                :small="false" :disabled="false" :background="false" :default-page-size="10"
+                layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search"
+                @current-change="search" />
+            <el-dialog v-model="dialogVisible" title="编辑用户信息" width="40%" draggable :show-close="false">
+                <div
+                    style="max-width: 100%; max-height: 500px; overflow: auto; display: flex; justify-content: center;">
+                    <el-form ref="userFormRef" :model="userFormEntity" :label-position="labelPosition"
+                        label-width="100px" style="width: 95%;" :rules="rules" status-icon>
+                        <el-row :gutter="16">
+                            <el-col :span="12" :offset="0">
+                                <el-form-item label="用户id" prop="userId">
+                                    <el-input v-model="userFormEntity.userId" disabled />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="用户名" prop="userName">
+                                    <el-input v-model="userFormEntity.userName" clearable />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row :gutter="16">
+                            <el-col :span="12" :offset="0">
+                                <el-form-item label="登录账户" prop="loginAccount">
+                                    <el-input v-model="userFormEntity.loginAccount" clearable />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="角色" prop="roleId">
+                                    <el-select-v2 v-model="userFormEntity.roleId" placeholder="请选择角色"
+                                        :options="roleOptions"></el-select-v2>
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="dialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="submitInfo(userFormEntity)">
+                            确定
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+            <el-dialog v-model="addUserDialogVisible" title="添加用户信息" width="40%" draggable :show-close="false">
+                <div
+                    style="max-width: 100%; max-height: 350px; overflow: auto; display: flex; justify-content: center;">
+                    <el-form ref="addUserFormRef" :model="addUserFormEntity" :label-position="labelPosition"
+                        label-width="100px" style="width: 95%;" :rules="rules" status-icon>
+                        <el-row :gutter="16">
+                            <el-col :span="12" :offset="0">
+                                <el-form-item label="角色" prop="roleIdUpdate">
+                                    <el-select-v2 v-model="addUserFormEntity.roleIdUpdate" placeholder="请选择角色"
+                                        :options="roleOptions"></el-select-v2>
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="用户名" prop="userNameUpdate">
+                                    <el-input v-model="addUserFormEntity.userNameUpdate" clearable />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                        <el-row :gutter="16">
+                            <el-col :span="12" :offset="0">
+                                <el-form-item label="登录账户" prop="loginAccountUpdate">
+                                    <el-input v-model="addUserFormEntity.loginAccountUpdate" clearable />
+                                </el-form-item>
+                            </el-col>
+                            <el-col :span="12">
+                                <el-form-item label="登录密码" prop="loginPasswordUpdate">
+                                    <el-input v-model="addUserFormEntity.loginPasswordUpdate" show-password clearable />
+                                </el-form-item>
+                            </el-col>
+                        </el-row>
+                    </el-form>
+                </div>
+                <template #footer>
+                    <span class="dialog-footer">
+                        <el-button @click="addUserDialogVisible = false">取消</el-button>
+                        <el-button type="primary" @click="submitAddUser(addUserFormEntity)">
+                            确认添加
+                        </el-button>
+                    </span>
+                </template>
+            </el-dialog>
+        </el-config-provider>
+    </div>
+</template>
+
+<script setup>
+import store from '@/store'
+import { getUserList, getRoleOptions, updateUserInfo, addUserInfo, deleteUserInfo } from '@/api/user.js'
+import { errorBox } from '@/utils/myMessageBox.js'
+import { ElMessageBox, ElMessage } from 'element-plus'
+import { ref, reactive } from 'vue'
+import { dateFormatter, timeFormatter } from '@/utils/formatter.js'
+import { Search } from '@element-plus/icons-vue'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+</script>
+<script>
+export default {
+    name: 'role_user',
+    data() {
+        return {
+            userList: [],
+            currentPage: 1,
+            pageSize: 10,
+            total: 0,
+            userNameQuery: '',
+            loading: true,
+            dialogVisible: false,
+            userId: '',
+            userFormEntity: reactive({}),
+            userFormRef: ref(),
+            labelPosition: 'top',
+            rules: reactive({}),
+            roleOptions: [],
+            addUserDialogVisible: false,
+            addUserFormEntity: reactive({}),
+            addUserFormRef: ref(),
+        }
+    },
+    mounted() {
+        this.getRoleOptions()
+        this.search()
+    },
+    methods: {
+        getRoleOptions() {
+            const request = {
+                roleId: store.getters.getUser.roleId,
+            }
+            getRoleOptions(request).then(res => {
+                const tableResponse = res.data
+                if (tableResponse.code == 0) {
+                    this.roleOptions = tableResponse.returnData
+                } else {
+                    this.roleOptions = []
+                }
+            }).catch(err => {
+                console.log(err)
+                this.roleOptions = []
+            })
+        },
+        search() {
+            this.loading = true
+            const request = {
+                pageNo: this.currentPage,
+                pageSize: this.pageSize,
+                userName: this.userNameQuery.trim(),
+                roleId: store.getters.getUser.roleId,
+            }
+            getUserList(request).then(res => {
+                const tableResponse = res.data
+                if (tableResponse.code == 0) {
+                    this.userList = tableResponse.returnData.lists
+                    this.total = tableResponse.returnData.total
+                } else {
+                    errorBox(tableResponse.message)
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('查询用户列表错误')
+            })
+            this.loading = false
+        },
+        dateFormat: (row, column, cellValue, index) => {
+            return dateFormatter(cellValue)
+        },
+        timeFormat: (row, column, cellValue, index) => {
+            return timeFormatter(cellValue)
+        },
+        roleFormat(row, column, cellValue, index) {
+            const roleOptionInfo = this.roleOptions.find(item => {
+                return item.value == cellValue
+            })
+            return roleOptionInfo == null|undefined ? '未知角色' : roleOptionInfo.label
+        },
+        reset() {
+            this.userNameQuery = ''
+            this.search()
+        },
+        editCurrentRow(row) {
+            this.userId = row.userId
+            this.userFormEntity = {
+                userId: row.userId,
+                userName: row.userName,
+                loginAccount: row.loginAccount,
+                roleId: row.roleId,
+            }
+            this.dialogVisible = true
+        },
+        deleteCurrentRow(row) {
+            this.userId = row.userId
+            if (store.getters.getUser.roleId != 1) {
+                errorBox("操作人员必须是管理员级别。")
+                return
+            }
+            ElMessageBox.confirm(
+                '该操作会从数据库中删除用户。\n是否继续',
+                '警告',
+                {
+                    confirmButtonText: '确认',
+                    cancelButtonText: '取消',
+                    type: 'warning',
+                }
+            ).then(() => {
+                const params = {
+                    userIdUpdate: row.userId,
+                    roleId1: store.getters.getUser.roleId,
+                    userName: store.getters.getUserName
+                }
+                deleteUserInfo(params).then(res => {
+                    if (res.data.code == 0) {
+                        ElMessage.success('删除用户信息成功。')
+                        this.search()
+                    } else {
+                        errorBox(res.data.message)
+                    }
+                }).catch(err => {
+                    console.log(err)
+                    errorBox('删除用户信息失败。')
+                })
+            }).catch(() => {
+                ElMessage.info('操作取消')
+            })
+        },
+        addOneUser() {
+            this.addUserFormEntity = {
+                roleIdUpdate: null,
+                userNameUpdate: '',
+                loginAccountUpdate: '',
+                loginPasswordUpdate: '',
+            }
+            this.addUserDialogVisible = true
+        },
+        submitInfo(formData) {
+            const params = {
+                roleIdUpdate: formData.roleId,
+                userIdUpdate: formData.userId,
+                userNameUpdate: formData.userName,
+                loginAccountUpdate: formData.loginAccount,
+                roleId1: store.getters.getUser.roleId,
+                userName: store.getters.getUserName
+            }
+            updateUserInfo(params).then(res => {
+                if (res.data.code == 0) {
+                    this.dialogVisible = false
+                    ElMessage.success('更新用户信息成功。')
+                    this.search()
+                } else {
+                    errorBox(res.data.message)
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('更新用户信息失败。')
+            })
+        },
+        submitAddUser(formData) {
+            const params = {
+                roleIdUpdate: formData.roleIdUpdate,
+                userNameUpdate: formData.userNameUpdate,
+                loginAccountUpdate: formData.loginAccountUpdate,
+                loginPasswordUpdate: formData.loginPasswordUpdate,
+                roleId1: store.getters.getUser.roleId,
+                userName: store.getters.getUserName
+            }
+            addUserInfo(params).then(res => {
+                if (res.data.code == 0) {
+                    this.addUserDialogVisible = false
+                    ElMessage.success('添加用户信息成功。')
+                    this.search()
+                } else {
+                    errorBox(res.data.message)
+                }
+            }).catch(err => {
+                console.log(err)
+                errorBox('添加用户信息失败。')
+            })
+        },
+        getCurrentRow(row) {
+            this.userId = row.userId
+        },
+    },
+}
+</script>
+
+<style scoped>
+.el-pagination {
+    padding-left: 5px;
+}
+
+.el-row .el-button {
+    width: 72px;
+    margin-left: 0px;
+    margin-right: 5px;
+}
+
+.table-class {
+    width: 100%;
+}
+
+.el-row .el-form-item {
+    width: 10% inherit;
+    justify-content: center;
+}
+
+.el-row .el-form-item .el-select-v2 {
+    width: 100% !important;
+}
+
+.el-row .el-form-item .el-input-number {
+    width: 100% !important;
+}
+
+.el-row .el-form-item .el-button {
+    margin: auto;
+}
+
+.title-area {
+    display: flex;
+    /* min-height: 10%; */
+    max-height: max-content;
+    margin-bottom: 10px;
+    min-width: inherit;
+    border: solid 1px;
+    border-radius: 10px;
+    box-shadow: 0px 15px 10px -15px #000;
+    overflow: auto;
+    flex-direction: column;
+    padding: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index f39074e..ac7696b 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -42,6 +42,9 @@ const routes = [
       { path: '/clcKanban', component: () => import('@/layout/clcKanban.vue') },// 需求看板
       { path: '/goodsInQR', component: () => import('@/layout/goodsInQR.vue') },// 二维码入库
       { path: '/stockUpdateRecord', component: () => import('@/layout/stockUpdateRecord.vue') },// 库存更新记录
+      { path: '/roleUser', component: () => import('@/layout/role_user.vue') },// 角色——用户列表
+      { path: '/rolePermission', component: () => import('@/layout/role_permission.vue') },// 角色——权限列表
+      
     ]
   },
   {