From 2b57bccf3f64ab31ecf17e97b9cfd126a1679350 Mon Sep 17 00:00:00 2001
From: qiuyuan <qiuyuan@yonyou.com>
Date: Fri, 20 Jun 2025 16:19:09 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BB=A3=E7=A0=81=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 config/useServer.js                           |   2 +-
 package-lock.json                             |   4 +-
 src/apis/modules/userManagement.js            |  13 +
 src/locales/lang/zh-CN/menu.js                |  28 ++
 src/locales/lang/zh-CN/pages.js               |  11 +
 src/router/routes/index.js                    |   6 +
 src/router/routes/integral.js                 |  41 +++
 src/router/routes/regional.js                 |  63 ++++
 src/router/routes/userManagement.js           |  75 +++++
 .../ integraList/components/Department.vue    | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../ integraList/components/EditDialog.vue    | 293 ++++++++++++++++++
 src/views/integral/ integraList/index.vue     | 241 ++++++++++++++
 .../components/Department.vue                 | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../components/EditDialog.vue                 | 293 ++++++++++++++++++
 src/views/integral/integraLevelList/index.vue | 241 ++++++++++++++
 .../hoseBookList/components/Department.vue    | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../hoseBookList/components/EditDialog.vue    | 293 ++++++++++++++++++
 src/views/regional/hoseBookList/index.vue     | 241 ++++++++++++++
 .../houseList/components/Department.vue       | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../houseList/components/EditDialog.vue       | 293 ++++++++++++++++++
 src/views/regional/houseList/index.vue        | 241 ++++++++++++++
 .../projectList/components/Department.vue     | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../projectList/components/EditDialog.vue     | 293 ++++++++++++++++++
 src/views/regional/projectList/index.vue      | 241 ++++++++++++++
 .../regionalList/components/Department.vue    | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../regionalList/components/EditDialog.vue    | 293 ++++++++++++++++++
 src/views/regional/regionalList/index.vue     | 241 ++++++++++++++
 .../allList/components/Department.vue         | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../allList/components/EditDialog.vue         | 293 ++++++++++++++++++
 src/views/userManagement/allList/index.vue    | 246 +++++++++++++++
 .../clientList/components/Department.vue      | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../clientList/components/EditDialog.vue      | 293 ++++++++++++++++++
 src/views/userManagement/clientList/index.vue | 241 ++++++++++++++
 src/views/userManagement/index.vue            |  16 +
 .../components/Department.vue                 | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../components/EditDialog.vue                 | 293 ++++++++++++++++++
 .../intermediaryAgentList/index.vue           | 241 ++++++++++++++
 .../components/Department.vue                 | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../components/EditDialog.vue                 | 293 ++++++++++++++++++
 .../potentialclientsList/index.vue            | 241 ++++++++++++++
 .../tourList/components/Department.vue        | 169 ++++++++++
 .../components/EditDepartmentDialog.vue       | 131 ++++++++
 .../tourList/components/EditDialog.vue        | 293 ++++++++++++++++++
 src/views/userManagement/tourList/index.vue   | 241 ++++++++++++++
 yarn.lock                                     |  11 +-
 55 files changed, 9443 insertions(+), 6 deletions(-)
 create mode 100644 src/apis/modules/userManagement.js
 create mode 100644 src/router/routes/integral.js
 create mode 100644 src/router/routes/regional.js
 create mode 100644 src/router/routes/userManagement.js
 create mode 100644 src/views/integral/ integraList/components/Department.vue
 create mode 100644 src/views/integral/ integraList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/integral/ integraList/components/EditDialog.vue
 create mode 100644 src/views/integral/ integraList/index.vue
 create mode 100644 src/views/integral/integraLevelList/components/Department.vue
 create mode 100644 src/views/integral/integraLevelList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/integral/integraLevelList/components/EditDialog.vue
 create mode 100644 src/views/integral/integraLevelList/index.vue
 create mode 100644 src/views/regional/hoseBookList/components/Department.vue
 create mode 100644 src/views/regional/hoseBookList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/regional/hoseBookList/components/EditDialog.vue
 create mode 100644 src/views/regional/hoseBookList/index.vue
 create mode 100644 src/views/regional/houseList/components/Department.vue
 create mode 100644 src/views/regional/houseList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/regional/houseList/components/EditDialog.vue
 create mode 100644 src/views/regional/houseList/index.vue
 create mode 100644 src/views/regional/projectList/components/Department.vue
 create mode 100644 src/views/regional/projectList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/regional/projectList/components/EditDialog.vue
 create mode 100644 src/views/regional/projectList/index.vue
 create mode 100644 src/views/regional/regionalList/components/Department.vue
 create mode 100644 src/views/regional/regionalList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/regional/regionalList/components/EditDialog.vue
 create mode 100644 src/views/regional/regionalList/index.vue
 create mode 100644 src/views/userManagement/allList/components/Department.vue
 create mode 100644 src/views/userManagement/allList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/userManagement/allList/components/EditDialog.vue
 create mode 100644 src/views/userManagement/allList/index.vue
 create mode 100644 src/views/userManagement/clientList/components/Department.vue
 create mode 100644 src/views/userManagement/clientList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/userManagement/clientList/components/EditDialog.vue
 create mode 100644 src/views/userManagement/clientList/index.vue
 create mode 100644 src/views/userManagement/index.vue
 create mode 100644 src/views/userManagement/intermediaryAgentList/components/Department.vue
 create mode 100644 src/views/userManagement/intermediaryAgentList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/userManagement/intermediaryAgentList/components/EditDialog.vue
 create mode 100644 src/views/userManagement/intermediaryAgentList/index.vue
 create mode 100644 src/views/userManagement/potentialclientsList/components/Department.vue
 create mode 100644 src/views/userManagement/potentialclientsList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/userManagement/potentialclientsList/components/EditDialog.vue
 create mode 100644 src/views/userManagement/potentialclientsList/index.vue
 create mode 100644 src/views/userManagement/tourList/components/Department.vue
 create mode 100644 src/views/userManagement/tourList/components/EditDepartmentDialog.vue
 create mode 100644 src/views/userManagement/tourList/components/EditDialog.vue
 create mode 100644 src/views/userManagement/tourList/index.vue

diff --git a/config/useServer.js b/config/useServer.js
index acb6a73..c6b2869 100644
--- a/config/useServer.js
+++ b/config/useServer.js
@@ -3,7 +3,7 @@ export default () => ({
     port: 8080,
     proxy: {
         '/api': {
-            target: 'http://101.42.232.163:8080/api',
+            target: 'http://10.10.1.6:8070/api',
             // target: 'http://127.0.0.1:8045/api',
             changeOrigin: true,
             rewrite: (path) => path.replace('/api', ''),
diff --git a/package-lock.json b/package-lock.json
index a3c1264..1363074 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-    "name": "gin-admin",
+    "name": "guxuan-admin",
     "version": "1.0.0",
     "lockfileVersion": 2,
     "requires": true,
     "packages": {
         "": {
-            "name": "gin-admin",
+            "name": "guxuan-admin",
             "version": "1.0.0",
             "dependencies": {
                 "@ant-design/colors": "^7.0.0",
diff --git a/src/apis/modules/userManagement.js b/src/apis/modules/userManagement.js
new file mode 100644
index 0000000..1284b07
--- /dev/null
+++ b/src/apis/modules/userManagement.js
@@ -0,0 +1,13 @@
+import request from '@/utils/request'
+
+// 获取客户列表
+export const getcustomers = (params) => request.basic.get('/api/v1/customers', params)
+// // 获取用户详情
+// export const getUserDetail = () => request.basic.get('/api/v1/current/user')
+// // 更新用户信息
+// export const updateUser = (_, params) => request.basic.put(`/api/v1/current/user`, params)
+
+// // 更新用户密码
+// export const updatePassword = (_, params) => request.basic.put(`/api/v1/current/password`, params)
+// // 用户权限菜单
+// export const getUserMenu = () => request.basic.get('/api/v1/current/menus')
diff --git a/src/locales/lang/zh-CN/menu.js b/src/locales/lang/zh-CN/menu.js
index 42d2e5b..4a5d06e 100644
--- a/src/locales/lang/zh-CN/menu.js
+++ b/src/locales/lang/zh-CN/menu.js
@@ -32,4 +32,32 @@ export default {
     account: '个人页',
     'account.trigger': '触发报错',
     'account.logout': '退出登录',
+    userManagement: '用户管理',
+    allList: '全部列表',
+    tourList: '游客列表',
+    clientList: '业主列表',
+    potentialclientsList: '意向客户',
+    intermediaryAgentList: '中介列表',
+    integral: '积分模块',
+    integraLevelList: '积分等级列表',
+    integraList: '积分列表',
+    equityCategory: '权益类别',
+    equityGoods: '权益商品',
+    regional: '区域模块',
+    regionalList: '区域列表 ',
+    projectList: '项目列表',
+    hoseBookList: '房刊列表',
+    houseList: '房源列表',
+    announcementList: '公告列表',
+    bannberTypeList: '轮播图分类列表',
+    bannberList: '轮播图列表',
+    activityType: '活动分类',
+    activityList: '活动列表',
+    campaignList: '参加活动列表',
+    confirmedOrder: '待确定订单',
+    writtenOrder: '待核销订单',
+    finishOrder: '已完成订单',
+    rejectOrder: '确定驳回订单',
+    paddOrder: '过期订单',
+    erCodeList: '二维码列表',
 }
diff --git a/src/locales/lang/zh-CN/pages.js b/src/locales/lang/zh-CN/pages.js
index 43d9a74..b8583a9 100644
--- a/src/locales/lang/zh-CN/pages.js
+++ b/src/locales/lang/zh-CN/pages.js
@@ -121,4 +121,15 @@ export default {
     'pages.user.profile.tab.security.form.confirm_password.placeholder': '请确认新密码',
     'pages.user.profile.tab.security.form.confirm_password.required': '确认密码是必填项！',
     'pages.user.profile.tab.security.form.confirm_password.validator': '两次输入的密码不匹配！',
+
+    // userManagement
+    'pages.system.userManagement.form.id': '用户编码',
+    'pages.system.userManagement.form.name': '用户名',
+    'pages.system.userManagement.form.phone': '联系方式',
+    'pages.system.userManagement.form.areaId': '区域',
+    'pages.system.userManagement.form.avatar': '头像',
+    'pages.system.userManagement.form.type': '类别',
+    'pages.system.userManagement.form.grade': '等级',
+    'pages.system.userManagement.form.balance': '余额',
+    'pages.system.userManagement.form.status': '状态',
 }
diff --git a/src/router/routes/index.js b/src/router/routes/index.js
index 5877eb6..26c810c 100644
--- a/src/router/routes/index.js
+++ b/src/router/routes/index.js
@@ -9,6 +9,9 @@ import system from './system'
 import link from './link'
 import iframe from './iframe'
 import other from './other'
+import userManagement from './userManagement'
+import integral from './integral'
+import regional from './regional'
 
 export default [
     ...home,
@@ -22,4 +25,7 @@ export default [
     ...link,
     ...iframe,
     ...other,
+    ...userManagement,
+    ...integral,
+    ...regional,
 ]
diff --git a/src/router/routes/integral.js b/src/router/routes/integral.js
new file mode 100644
index 0000000..b62ece2
--- /dev/null
+++ b/src/router/routes/integral.js
@@ -0,0 +1,41 @@
+import { TableOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'integral',
+        name: 'integral',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: TableOutlined,
+            title: '积分模块',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'integraLevelList',
+                name: 'integraLevelList',
+                component: 'integral/integraLevelList/index.vue',
+
+                meta: {
+                    title: '积分等级列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'integraList',
+                name: 'integraList',
+                component: 'integral/integraList/index.vue',
+                meta: {
+                    title: '积分列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]
diff --git a/src/router/routes/regional.js b/src/router/routes/regional.js
new file mode 100644
index 0000000..bb7c19c
--- /dev/null
+++ b/src/router/routes/regional.js
@@ -0,0 +1,63 @@
+import { TableOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'regional',
+        name: 'regional',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: TableOutlined,
+            title: '区域模块',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'regionalList',
+                name: 'regionalList',
+                component: 'regional/regionalList/index.vue',
+
+                meta: {
+                    title: '区域列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'projectList',
+                name: 'projectList',
+                component: 'regional/projectList/index.vue',
+                meta: {
+                    title: '项目列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'hoseBookList',
+                name: 'hoseBookList',
+                component: 'regional/hoseBookList/index.vue',
+                meta: {
+                    title: '房刊列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'houseList',
+                name: 'houseList',
+                component: 'regional/houseList/index.vue',
+                meta: {
+                    title: '房源列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]
diff --git a/src/router/routes/userManagement.js b/src/router/routes/userManagement.js
new file mode 100644
index 0000000..ccbed7e
--- /dev/null
+++ b/src/router/routes/userManagement.js
@@ -0,0 +1,75 @@
+import { TableOutlined } from '@ant-design/icons-vue'
+
+export default [
+    {
+        path: 'userManagement',
+        name: 'userManagement',
+        component: 'RouteViewLayout',
+        meta: {
+            icon: TableOutlined,
+            title: '用户管理',
+            isMenu: true,
+            keepAlive: true,
+            permission: '*',
+        },
+        children: [
+            {
+                path: 'allList',
+                name: 'allList',
+                component: 'userManagement/allList/index.vue',
+
+                meta: {
+                    title: '全部列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'tourList',
+                name: 'tourList',
+                component: 'userManagement/tourList/index.vue',
+
+                meta: {
+                    title: '游客列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'clientList',
+                name: 'clientList',
+                component: 'userManagement/clientList/index.vue',
+                meta: {
+                    title: '业主列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'potentialclientsList',
+                name: 'potentialclientsList',
+                component: 'userManagement/potentialclientsList/index.vue',
+                meta: {
+                    title: '意向客户',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+            {
+                path: 'intermediaryAgentList',
+                name: 'intermediaryAgentList',
+                component: 'userManagement/intermediaryAgentList/index.vue',
+                meta: {
+                    title: '中介列表',
+                    isMenu: true,
+                    keepAlive: true,
+                    permission: '*',
+                },
+            },
+        ],
+    },
+]
diff --git a/src/views/integral/ integraList/components/Department.vue b/src/views/integral/ integraList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/integral/ integraList/components/Department.vue	
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/integral/ integraList/components/EditDepartmentDialog.vue b/src/views/integral/ integraList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/integral/ integraList/components/EditDepartmentDialog.vue	
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/integral/ integraList/components/EditDialog.vue b/src/views/integral/ integraList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/integral/ integraList/components/EditDialog.vue	
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/integral/ integraList/index.vue b/src/views/integral/ integraList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/integral/ integraList/index.vue	
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/integral/integraLevelList/components/Department.vue b/src/views/integral/integraLevelList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/integral/integraLevelList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/integral/integraLevelList/components/EditDepartmentDialog.vue b/src/views/integral/integraLevelList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/integral/integraLevelList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/integral/integraLevelList/components/EditDialog.vue b/src/views/integral/integraLevelList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/integral/integraLevelList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/integral/integraLevelList/index.vue b/src/views/integral/integraLevelList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/integral/integraLevelList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/hoseBookList/components/Department.vue b/src/views/regional/hoseBookList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/regional/hoseBookList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/hoseBookList/components/EditDepartmentDialog.vue b/src/views/regional/hoseBookList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/regional/hoseBookList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/hoseBookList/components/EditDialog.vue b/src/views/regional/hoseBookList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/regional/hoseBookList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/hoseBookList/index.vue b/src/views/regional/hoseBookList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/regional/hoseBookList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/houseList/components/Department.vue b/src/views/regional/houseList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/regional/houseList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/houseList/components/EditDepartmentDialog.vue b/src/views/regional/houseList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/regional/houseList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/houseList/components/EditDialog.vue b/src/views/regional/houseList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/regional/houseList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/houseList/index.vue b/src/views/regional/houseList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/regional/houseList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/projectList/components/Department.vue b/src/views/regional/projectList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/regional/projectList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/projectList/components/EditDepartmentDialog.vue b/src/views/regional/projectList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/regional/projectList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/projectList/components/EditDialog.vue b/src/views/regional/projectList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/regional/projectList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/projectList/index.vue b/src/views/regional/projectList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/regional/projectList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/regionalList/components/Department.vue b/src/views/regional/regionalList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/regional/regionalList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/regionalList/components/EditDepartmentDialog.vue b/src/views/regional/regionalList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/regional/regionalList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/regionalList/components/EditDialog.vue b/src/views/regional/regionalList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/regional/regionalList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/regional/regionalList/index.vue b/src/views/regional/regionalList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/regional/regionalList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/allList/components/Department.vue b/src/views/userManagement/allList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/userManagement/allList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/allList/components/EditDepartmentDialog.vue b/src/views/userManagement/allList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/userManagement/allList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/allList/components/EditDialog.vue b/src/views/userManagement/allList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/userManagement/allList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/allList/index.vue b/src/views/userManagement/allList/index.vue
new file mode 100644
index 0000000..b7d059d
--- /dev/null
+++ b/src/views/userManagement/allList/index.vue
@@ -0,0 +1,246 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.userManagement.form.id'), dataIndex: 'id', width: 100 },
+    { title: t('pages.system.userManagement.form.name'), dataIndex: 'name', width: 200 },
+    { title: t('pages.system.userManagement.form.phone'), dataIndex: 'phone', key: 'phone', width: 200 },
+    { title: t('pages.system.userManagement.form.areaId'), dataIndex: 'areaId', width: 100 },
+    { title: t('pages.system.userManagement.form.avatar'), dataIndex: 'avatar', width: 120 },
+    { title: t('pages.system.userManagement.form.type'), dataIndex: 'type', width: 120 },
+    { title: t('pages.system.userManagement.form.grade'), dataIndex: 'areaId', width: 120 },
+    { title: t('pages.system.userManagement.form.balance'), dataIndex: 'balance', width: 120 },
+    { title: t('pages.system.userManagement.form.status'), dataIndex: 'status', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    console.log('searchFormData.value', searchFormData.value)
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.userManagement
+            .getcustomers({
+                pageSize,
+                current: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/clientList/components/Department.vue b/src/views/userManagement/clientList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/userManagement/clientList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/clientList/components/EditDepartmentDialog.vue b/src/views/userManagement/clientList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/userManagement/clientList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/clientList/components/EditDialog.vue b/src/views/userManagement/clientList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/userManagement/clientList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/clientList/index.vue b/src/views/userManagement/clientList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/userManagement/clientList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/index.vue b/src/views/userManagement/index.vue
new file mode 100644
index 0000000..91ca3a6
--- /dev/null
+++ b/src/views/userManagement/index.vue
@@ -0,0 +1,16 @@
+<template>
+    <div>2221112</div>
+</template>
+
+<script setup>
+defineOptions({
+    name: 'home2',
+})
+</script>
+
+<style lang="less" scoped>
+p {
+    box-shadow: 0 0 3px 3px #f9f9f9;
+    padding: 20px;
+}
+</style>
diff --git a/src/views/userManagement/intermediaryAgentList/components/Department.vue b/src/views/userManagement/intermediaryAgentList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/userManagement/intermediaryAgentList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/intermediaryAgentList/components/EditDepartmentDialog.vue b/src/views/userManagement/intermediaryAgentList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/userManagement/intermediaryAgentList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/intermediaryAgentList/components/EditDialog.vue b/src/views/userManagement/intermediaryAgentList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/userManagement/intermediaryAgentList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/intermediaryAgentList/index.vue b/src/views/userManagement/intermediaryAgentList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/userManagement/intermediaryAgentList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/potentialclientsList/components/Department.vue b/src/views/userManagement/potentialclientsList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/userManagement/potentialclientsList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/potentialclientsList/components/EditDepartmentDialog.vue b/src/views/userManagement/potentialclientsList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/userManagement/potentialclientsList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/potentialclientsList/components/EditDialog.vue b/src/views/userManagement/potentialclientsList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/userManagement/potentialclientsList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/potentialclientsList/index.vue b/src/views/userManagement/potentialclientsList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/userManagement/potentialclientsList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/tourList/components/Department.vue b/src/views/userManagement/tourList/components/Department.vue
new file mode 100644
index 0000000..efaefad
--- /dev/null
+++ b/src/views/userManagement/tourList/components/Department.vue
@@ -0,0 +1,169 @@
+<template>
+    <a-card
+        :body-style="{ height: 'calc(100% - 56px - 47px)', padding: 0 }"
+        :style="{
+            position: 'sticky',
+            top: appStore.mainOffsetTop,
+            height: appStore.mainHeight,
+        }">
+        <template #title>
+            <a-input-search placeholder="搜索部门"></a-input-search>
+        </template>
+        <x-scrollbar class="pa-8-2">
+            <a-spin :spinning="loading">
+                <a-tree
+                    block-node
+                    :selected-keys="selectedKeys"
+                    :tree-data="listData"
+                    :field-names="{ key: 'id', children: 'children' }"
+                    @select="onSelect">
+                    <template #title="{ title }">
+                        <span class="ant-tree-title__name">{{ title }}</span>
+                        <span class="ant-tree-title__actions">
+                            <a-dropdown
+                                :trigger="['click']"
+                                @click.stop>
+                                <x-action-button>
+                                    <more-outlined></more-outlined>
+                                </x-action-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            添加子部门
+                                        </a-menu-item>
+                                        <a-menu-item @click="$refs.editDepartmentDialogRef.handleEdit()">
+                                            编辑
+                                        </a-menu-item>
+                                        <a-menu-item @click="handleDelete">删除</a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
+                        </span>
+                    </template>
+                </a-tree>
+                <empty
+                    v-if="!listData.length"
+                    :image="Empty.PRESENTED_IMAGE_SIMPLE"></empty>
+            </a-spin>
+        </x-scrollbar>
+        <template #actions>
+            <span @click="$refs.editDepartmentDialogRef.handleCreate()">
+                <plus-outlined></plus-outlined>
+                新建部门
+            </span>
+        </template>
+    </a-card>
+
+    <edit-department-dialog
+        ref="editDepartmentDialogRef"
+        @ok="onOk"></edit-department-dialog>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+import { ref, watch } from 'vue'
+import { usePagination } from '@/hooks'
+import apis from '@/apis'
+import { Empty, Modal, message } from 'ant-design-vue'
+import { config } from '@/config'
+import { head, get, find } from 'lodash-es'
+import { MoreOutlined, PlusOutlined } from '@ant-design/icons-vue'
+import EditDepartmentDialog from './EditDepartmentDialog.vue'
+
+const props = defineProps({
+    value: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['change', 'update:value'])
+
+const appStore = useAppStore()
+const { listData, loading, showLoading, hideLoading } = usePagination()
+
+const editDepartmentDialogRef = ref()
+const selectedKeys = ref([props.value])
+
+watch(
+    () => props.value,
+    (val) => {
+        if (val === selectedKeys.value?.[0]) return
+        selectedKeys.value = [val]
+    }
+)
+
+getList()
+
+/**
+ * 获取列表
+ * @returns {Promise<void>}
+ */
+async function getList() {
+    try {
+        showLoading()
+        const { code, data } = await apis.common.getPageList().catch(() => {
+            throw new Error()
+        })
+        hideLoading()
+        if (config('http.code.success') === code) {
+            const { records } = data
+            listData.value = records
+            if (listData.value.length) {
+                selectedKeys.value = [get(head(listData.value), 'id')]
+                trigger()
+            }
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 删除
+ */
+function handleDelete({ id }) {
+    Modal.confirm({
+        title: '删除提示',
+        content: '确认删除？',
+        okText: '确认',
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { code } = await apis.common.del(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === code) {
+                            resolve()
+                            message.success('删除成功')
+                            await getList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+function onSelect(keys) {
+    if (!keys.length) return
+    selectedKeys.value = keys
+    trigger()
+}
+
+async function onOk() {
+    await getList()
+}
+
+function trigger() {
+    const value = head(selectedKeys.value)
+    const record = find(listData.value, { id: value })
+    emit('update:value', value)
+    emit('change', record)
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/tourList/components/EditDepartmentDialog.vue b/src/views/userManagement/tourList/components/EditDepartmentDialog.vue
new file mode 100644
index 0000000..e5a271f
--- /dev/null
+++ b/src/views/userManagement/tourList/components/EditDepartmentDialog.vue
@@ -0,0 +1,131 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="480"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-form-item
+                label="部门名称"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+            <a-form-item
+                label="上级部门"
+                name="parent_id">
+                <a-tree-select v-model:value="formData.parent_id"></a-tree-select>
+            </a-form-item>
+            <a-form-item
+                label="部门负责人"
+                name="name">
+                <a-input v-model:value="formData.name"></a-input>
+            </a-form-item>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+
+const emit = defineEmits(['ok'])
+
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref('取消')
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: '新建部门',
+    })
+}
+
+/**
+ * 编辑
+ */
+function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: '编辑部门',
+    })
+    formRecord.value = record
+    formData.value = cloneDeep(record)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+                const params = {
+                    ...values,
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.common.create(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.common.update(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.code) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    cancelText.value = '取消'
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/tourList/components/EditDialog.vue b/src/views/userManagement/tourList/components/EditDialog.vue
new file mode 100644
index 0000000..3f3aa09
--- /dev/null
+++ b/src/views/userManagement/tourList/components/EditDialog.vue
@@ -0,0 +1,293 @@
+<template>
+    <a-modal
+        :open="modal.open"
+        :title="modal.title"
+        :width="640"
+        :confirm-loading="modal.confirmLoading"
+        :after-close="onAfterClose"
+        :cancel-text="cancelText"
+        :ok-text="okText"
+        @ok="handleOk"
+        @cancel="handleCancel">
+        <a-form
+            ref="formRef"
+            :model="formData"
+            :rules="formRules"
+            :label-col="{ style: { width: '90px' } }">
+            <a-card class="mb-8-2">
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.username')"
+                            name="username">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.username.placeholder')"
+                                v-model:value="formData.username"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.password')"
+                            name="password">
+                            <a-input-password
+                                v-model:value="formData.password"
+                                :placeholder="$t('pages.system.user.form.password.placeholder')" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.name.placeholder')"
+                                v-model:value="formData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.roles')"
+                            name="roles">
+                            <a-select
+                                v-model:value="formData.roles"
+                                mode="multiple"
+                                style="width: 100%"
+                                :placeholder="$t('pages.system.user.form.roles.placeholder')"
+                                :options="roles"
+                                @change="handleChange"></a-select>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.phone')"
+                            type="tel"
+                            name="phone">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.phone.placeholder')"
+                                type="tel"
+                                v-model:value="formData.phone"></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.email')"
+                            type="email"
+                            name="email">
+                            <a-input
+                                :placeholder="$t('pages.system.user.form.email.placeholder')"
+                                type="email"
+                                v-model:value="formData.email"></a-input>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.remark')"
+                            name="remark">
+                            <a-textarea
+                                :placeholder="$t('pages.system.user.form.remark.placeholder')"
+                                v-model:value="formData.remark"></a-textarea>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+                <a-row :gutter="12">
+                    <a-col :span="24">
+                        <a-form-item
+                            :label="$t('pages.system.user.form.status')"
+                            name="status">
+                            <a-radio-group
+                                v-model:value="formData.status"
+                                :options="[
+                                    { label: $t('pages.system.user.form.status.activated'), value: 'activated' },
+                                    { label: $t('pages.system.user.form.status.freezed'), value: 'freezed' },
+                                ]"></a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-card>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup>
+import { cloneDeep } from 'lodash-es'
+import { ref } from 'vue'
+import { config } from '@/config'
+import apis from '@/apis'
+import { useForm, useModal } from '@/hooks'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+const emit = defineEmits(['ok'])
+const { t } = useI18n() // 解构出t方法
+const { modal, showModal, hideModal, showLoading, hideLoading } = useModal()
+const { formRecord, formData, formRef, formRules, resetForm } = useForm()
+const cancelText = ref(t('button.cancel'))
+const okText = ref(t('button.confirm'))
+const rolesValue = ref([])
+const roles = ref([])
+
+formRules.value = {
+    name: { required: true, message: t('pages.system.user.form.username.placeholder') },
+    username: { required: true, message: t('pages.system.user.form.code.placeholder') },
+    status: { required: true, message: t('pages.system.user.form.status') },
+    roles: [{ required: true, message: t('pages.system.user.form.roles.placeholder'), trigger: 'change' }],
+}
+
+/**
+ * 请求角色
+ */
+getRole()
+
+/**
+ * select 选择框
+ */
+const handleChange = (value) => {
+    rolesValue.value = value
+}
+
+/**
+ * 新建
+ */
+function handleCreate() {
+    showModal({
+        type: 'create',
+        title: t('pages.system.user.add'),
+    })
+}
+async function getRole() {
+    const { success, data } = await apis.role.getRoleList().catch(() => {
+        throw new Error()
+    })
+    if (!success) {
+        return message.error('当前角色信息错误')
+    }
+    let roleArr = []
+    if (data.length) {
+        data.forEach((item) => {
+            roleArr.push({
+                label: item.name,
+                value: item.id,
+            })
+        })
+    }
+    roles.value = roleArr
+}
+/**
+ * 编辑
+ */
+async function handleEdit(record = {}) {
+    showModal({
+        type: 'edit',
+        title: t('pages.system.user.edit'),
+    })
+    const { data, success } = await apis.users.getUsers(record.id).catch()
+    if (!success) {
+        hideModal()
+        return
+    }
+    let roles = []
+    if (data.roles) {
+        roles = formatArr(data.roles, 'edit')
+    }
+
+    data.roles = roles
+    formRecord.value = data
+    formData.value = cloneDeep(data)
+}
+
+/**
+ * 确定
+ */
+function handleOk() {
+    formRef.value
+        .validateFields()
+        .then(async (values) => {
+            try {
+                showLoading()
+
+                const params = {
+                    ...values,
+                    roles: formatArr(rolesValue.value),
+                }
+                let result = null
+                switch (modal.value.type) {
+                    case 'create':
+                        result = await apis.users.createUsers(params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                    case 'edit':
+                        result = await apis.users.updateUsers(formData.value.id, params).catch(() => {
+                            throw new Error()
+                        })
+                        break
+                }
+                hideLoading()
+                if (config('http.code.success') === result?.success) {
+                    hideModal()
+                    emit('ok')
+                }
+            } catch (error) {
+                hideLoading()
+            }
+        })
+        .catch(() => {
+            hideLoading()
+        })
+}
+
+/**
+ * 对权限组 过数据格式
+ */
+function formatArr(data, type = '') {
+    const rolesArr = []
+    data.forEach((item) => {
+        roles.value.forEach((r) => {
+            if (type === 'edit') {
+                if (item.role_id === r.value) {
+                    rolesArr.push({
+                        value: item.role_id,
+                        label: r.label,
+                    })
+                    return
+                }
+            } else if (r.value === item) {
+                rolesArr.push({
+                    role_id: item,
+                    role_name: r.label,
+                })
+                return
+            }
+        })
+    })
+    return rolesArr
+}
+
+/**
+ * 取消
+ */
+function handleCancel() {
+    hideModal()
+}
+
+/**
+ * 关闭后
+ */
+function onAfterClose() {
+    resetForm()
+    hideLoading()
+}
+
+defineExpose({
+    handleCreate,
+    handleEdit,
+})
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/userManagement/tourList/index.vue b/src/views/userManagement/tourList/index.vue
new file mode 100644
index 0000000..4d4deae
--- /dev/null
+++ b/src/views/userManagement/tourList/index.vue
@@ -0,0 +1,241 @@
+<template>
+    <x-search-bar class="mb-8-2">
+        <template #default="{ gutter, colSpan }">
+            <a-form
+                :label-col="{ style: { width: '100px' } }"
+                :model="searchFormData"
+                layout="inline">
+                <a-row :gutter="gutter">
+                    <a-col v-bind="colSpan">
+                        <a-form-item
+                            :label="$t('pages.system.role.form.name')"
+                            name="name">
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.name"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col v-bind="colSpan">
+                        <a-form-item name="code">
+                            <template #label>
+                                {{ $t('pages.system.role.form.code') }}
+                                <a-tooltip :title="$t('pages.system.role.form.code')">
+                                    <question-circle-outlined class="ml-4-1 color-placeholder" />
+                                </a-tooltip>
+                            </template>
+                            <a-input
+                                :placeholder="$t('pages.system.role.form.code.placeholder')"
+                                v-model:value="searchFormData.code"></a-input>
+                        </a-form-item>
+                    </a-col>
+
+                    <a-col
+                        class="align-right"
+                        v-bind="colSpan">
+                        <a-space>
+                            <a-button @click="handleResetSearch">{{ $t('button.reset') }}</a-button>
+                            <a-button
+                                ghost
+                                type="primary"
+                                @click="handleSearch">
+                                {{ $t('button.search') }}
+                            </a-button>
+                        </a-space>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </template>
+    </x-search-bar>
+    <a-row
+        :gutter="8"
+        :wrap="false">
+        <a-col flex="auto">
+            <a-card type="flex">
+                <x-action-bar class="mb-8-2">
+                    <a-button
+                        v-action="'add'"
+                        type="primary"
+                        @click="$refs.editDialogRef.handleCreate()">
+                        <template #icon>
+                            <plus-outlined></plus-outlined>
+                        </template>
+                        {{ $t('pages.system.role.add') }}
+                    </a-button>
+                </x-action-bar>
+                <a-table
+                    :columns="columns"
+                    :data-source="listData"
+                    :loading="loading"
+                    :pagination="paginationState"
+                    :scroll="{ x: 1000 }"
+                    @change="onTableChange">
+                    <template #bodyCell="{ column, record }">
+                        <template v-if="'statusType' === column.key">
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('enabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                            <!--状态-->
+                            <a-tag
+                                v-if="statusTypeEnum.is('disabled', record.status)"
+                                color="processing">
+                                {{ statusTypeEnum.getDesc(record.status) }}
+                            </a-tag>
+                        </template>
+
+                        <template v-if="'createAt' === column.key">
+                            {{ formatUtcDateTime(record.created_at) }}
+                        </template>
+
+                        <template v-if="'action' === column.key">
+                            <x-action-button @click="$refs.editDialogRef.handleEdit(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.role.edit') }}</template>
+                                    <edit-outlined />
+                                </a-tooltip>
+                            </x-action-button>
+                            <x-action-button @click="handleRemove(record)">
+                                <a-tooltip>
+                                    <template #title> {{ $t('pages.system.delete') }}</template>
+                                    <delete-outlined style="color: #ff4d4f" />
+                                </a-tooltip>
+                            </x-action-button>
+                        </template>
+                    </template>
+                </a-table>
+            </a-card>
+        </a-col>
+    </a-row>
+
+    <edit-dialog
+        ref="editDialogRef"
+        @ok="onOk"></edit-dialog>
+</template>
+
+<script setup>
+import { message, Modal } from 'ant-design-vue'
+import { ref } from 'vue'
+import apis from '@/apis'
+import { formatUtcDateTime } from '@/utils/util'
+import { config } from '@/config'
+import { statusTypeEnum } from '@/enums/system'
+import { usePagination, useForm } from '@/hooks'
+import EditDialog from './components/EditDialog.vue'
+import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'systemRole',
+})
+const { t } = useI18n() // 解构出t方法
+const columns = [
+    { title: t('pages.system.role.form.code'), dataIndex: 'code', width: 240 },
+    { title: t('pages.system.role.form.name'), dataIndex: 'name' },
+    { title: t('pages.system.role.form.status'), dataIndex: 'status', key: 'statusType', width: 80 },
+    { title: t('pages.system.role.form.sequence'), dataIndex: 'sequence', width: 100 },
+    { title: t('pages.system.role.form.created_at'), key: 'createAt', fixed: 'right', width: 120 },
+    { title: t('button.action'), key: 'action', fixed: 'right', width: 120 },
+]
+
+const { listData, loading, showLoading, hideLoading, paginationState, searchFormData, resetPagination } =
+    usePagination()
+const { resetForm } = useForm()
+const editDialogRef = ref()
+
+getPageList()
+
+/**
+ * 获取用户列表
+ * @returns {Promise<void>}
+ */
+async function getPageList() {
+    try {
+        showLoading()
+        const { pageSize, current } = paginationState
+        const { success, data, total } = await apis.role
+            .getRoleList({
+                pageSize,
+                page: current,
+                ...searchFormData.value,
+            })
+            .catch(() => {
+                throw new Error()
+            })
+        hideLoading()
+        if (config('http.code.success') === success) {
+            listData.value = data
+            paginationState.total = total
+        }
+    } catch (error) {
+        hideLoading()
+    }
+}
+
+/**
+ * 移除
+ */
+function handleRemove({ id }) {
+    Modal.confirm({
+        title: t('pages.system.role.delTip'),
+        content: t('button.confirm'),
+        okText: t('button.confirm'),
+        onOk: () => {
+            return new Promise((resolve, reject) => {
+                ;(async () => {
+                    try {
+                        const { success } = await apis.role.delRole(id).catch(() => {
+                            throw new Error()
+                        })
+                        if (config('http.code.success') === success) {
+                            resolve()
+                            message.success(t('component.message.success.delete'))
+                            await getPageList()
+                        }
+                    } catch (error) {
+                        reject()
+                    }
+                })()
+            })
+        },
+    })
+}
+
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetForm()
+    resetPagination()
+    getPageList()
+}
+
+/**
+ * 编辑完成
+ */
+async function onOk() {
+    await getPageList()
+}
+</script>
+
+<style lang="less" scoped></style>
diff --git a/yarn.lock b/yarn.lock
index f517404..46fe2a6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -215,10 +215,10 @@
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz"
   integrity sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==
 
-"@esbuild/win32-x64@0.18.20":
+"@esbuild/darwin-arm64@0.18.20":
   version "0.18.20"
-  resolved "https://registry.npmmirror.com/@esbuild/win32-x64/-/win32-x64-0.18.20.tgz"
-  integrity sha512-kTdfRcSiDfQca/y9QIkng02avJ+NCaQvrMejlsB3RRv5sE9rRoeBPISaZpKxHELzRxZyLvNts1P27W3wV+8geQ==
+  resolved "https://registry.npmmirror.com/@esbuild/darwin-arm64/-/darwin-arm64-0.18.20.tgz"
+  integrity sha512-bxRHW5kHU38zS2lPTPOyuyTm+S+eobPUnTNkdJEfAddYgEcll4xkT8DB9d2008DtTbl7uJag2HuE5NZAZgnNEA==
 
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
@@ -1323,6 +1323,11 @@ fs.realpath@^1.0.0:
   resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
+fsevents@~2.3.2:
+  version "2.3.2"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz"
+  integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
+
 get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"