diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 321cb97..dac3b84 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,4 +1,5 @@
 import request from '../index'
+import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -48,7 +49,7 @@
 }
 
 // 重置用户密码
-export function resetPwd(data: object) {
+export function resetPwdApi(data: object) {
   return request({
     url: 'sys/mgr/reset',
     method: 'post',
@@ -57,16 +58,14 @@
 }
 
 // 分配角色
-// export function roleAssign(userId: string, ids: string[]) {
-//   return request({
-//     url: 'sys/mgr/roleAssign',
-//     method: 'post',
-//     data: {
-//       userId: userId,
-//       roleIds: ids
-//     },
-//     // paramsSerializer: params => {
-//     //   return qs.stringify(params, { indices: false })
-//     // }
-//   })
-// }
+export function roleAssign(userId: string, ids: string[]) {
+  return request({
+    url: 'sys/mgr/roleAssign',
+    method: 'post',
+    data: {
+      userId: userId,
+      roleIds: ids
+    },
+    // paramsSerializer: (params) => qs.stringify(params, { indices: false })
+  })
+}

diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 321cb97..dac3b84 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,4 +1,5 @@
 import request from '../index'
+import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -48,7 +49,7 @@
 }
 
 // 重置用户密码
-export function resetPwd(data: object) {
+export function resetPwdApi(data: object) {
   return request({
     url: 'sys/mgr/reset',
     method: 'post',
@@ -57,16 +58,14 @@
 }
 
 // 分配角色
-// export function roleAssign(userId: string, ids: string[]) {
-//   return request({
-//     url: 'sys/mgr/roleAssign',
-//     method: 'post',
-//     data: {
-//       userId: userId,
-//       roleIds: ids
-//     },
-//     // paramsSerializer: params => {
-//     //   return qs.stringify(params, { indices: false })
-//     // }
-//   })
-// }
+export function roleAssign(userId: string, ids: string[]) {
+  return request({
+    url: 'sys/mgr/roleAssign',
+    method: 'post',
+    data: {
+      userId: userId,
+      roleIds: ids
+    },
+    // paramsSerializer: (params) => qs.stringify(params, { indices: false })
+  })
+}
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
index f2875d2..3c8639a 100644
--- a/src/views/system/user/list.user.vue
+++ b/src/views/system/user/list.user.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup name="SystemDictListDict">
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQueryType, TreeStructure, userType } from './user_interface'
+import type { IlistQueryType, TreeStructure, userType, changePageType } from './user_interface'
 import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, unfreezeUser } from '@/api/system/user'
+import { delUser, freezeUserApi, getUserList, unfreezeUser, resetPwdApi } from '@/api/system/user'
 import { toTreeList } from '@/utils/structure'
+import { Menu, Plus, Delete, EditPen, Key, MagicStick } from '@element-plus/icons-vue'
+import { RSAencrypt } from '@/utils/security'
+import RoleAssignment from './role.assignment.vue'
+import AddUser from './user.add.vue'
 // 逻辑代码
 interface Tree {
   name: string
@@ -15,19 +19,20 @@
 const tagNames = { 已冻结: 'danger', 启用: 'success' }
 const btnNames = { 已冻结: '解冻', 启用: '冻结' }
 const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = [
-  { text: '账号', value: 'account' },
-  { text: '所在组织机构', value: 'deptName', width: 150 },
-  { text: '真实姓名', value: 'name' },
-  { text: '角色', value: 'roleName' },
-  { text: '手机号', value: 'phone' },
-  { text: '注册时间', value: 'createtime' },
-]
+const columns = ref([
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+])
+
 const list = ref([])
-const total = ref(20)
+const total = ref(0)
 const loadingTable = ref<boolean>(false)
 const loadingTree = ref<boolean>(false)
-
+const resetPwdFlag = ref<string>('111111')
 const logTypeList = ref(null)
 const listLoading = ref(true)
 const defaultProps = {
@@ -49,14 +54,7 @@
 // 获取列表数据
 const fetchData = (flag: string) => {
   loadingTable.value = true
-  if (flag === 'search') {
-    listQuery.deptId = ''
-  }
-  else if (flag === 'click') {
-    listQuery.keywords = ''
-    listQuery.beginTime = ''
-    listQuery.endTime = ''
-  }
+  select.value = ''
   getUserList(listQuery).then((res) => {
     list.value = res.data.rows
     total.value = res.data.total
@@ -85,6 +83,46 @@
 const search = () => {
   fetchData('search')
 }
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value)
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 删除用户
 const deleteUser = () => {
   if (select.value) {
@@ -134,6 +172,16 @@
     }
   }).catch(() => { })
 }
+const roleAssignmentRef = ref() //角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 改变每页条数
 const handleSizeChange = (val: number) => {
   listQuery.limit = val
@@ -144,6 +192,20 @@
   listQuery.offset = val
   fetchData('')
 }
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
 // 挂载
 onMounted(() => {
   // 获取树形结构数据
@@ -166,10 +228,8 @@
                 <span>组织机构</span>
               </div>
             </template>
-            <el-tree
-              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick"
-            />
+            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick" />
           </el-card>
         </div>
       </div>
@@ -181,88 +241,80 @@
             <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
+            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间" />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间"
-            />
+            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间" />
           </search-item>
         </search-area>
         <!-- 操作 -->
         <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" size="small" type="primary" icon="el-icon-plus">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
             新增
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" size="small" type="primary" icon="el-icon-edit">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
             修改
           </el-button>
-          <el-button
-            v-if="proxy.hasPerm('/sys/mgr/delete')" size="small" type="primary" icon="el-icon-delete"
-            @click="deleteUser"
-          >
+          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
             删除
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" size="small" type="primary" icon="el-icon-key">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
             重置密码
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" size="small" type="primary" icon="el-icon-magic-stick">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+            @click="assignmentRole">
             角色分配
           </el-button>
         </div>
-        <!-- 查询结果Table显示 -->
-        <div clss="title">
-          <div>
-            数据列表
+        <!-- 表头标题 -->
+        <!-- <div class="table-title">
+          <div class="title">
+            <el-icon :size="24">
+              <Menu />
+            </el-icon>
+            <span class="text">数据列表</span>
           </div>
-        </div>
-        <el-table v-loading="loadingTable" :data="list" style="width: 100%;" border>
-          <el-table-column label="选择" width="60" header-align="center">
-            <template #default="scope">
-              <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-            </template>
-          </el-table-column>
-          <el-table-column label="#" width="55" align="center">
-            <template #default="scope">
-              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="account" label="账号" align="center" show-overflow-tooltip />
-          <el-table-column prop="deptName" label="所在机构组织" align="center" width="110" show-overflow-tooltip />
-          <el-table-column prop="name" label="真实姓名" align="center" show-overflow-tooltip />
-          <el-table-column prop="roleName" label="角色" align="center" show-overflow-tooltip />
-          <el-table-column prop="phone" label="手机号" align="center" width="130" />
-          <el-table-column prop="createtime" label="注册时间" align="center" width="130" />
-          <el-table-column label="状态" align="center">
-            <template #default="scope">
-              <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                {{ scope.row.statusName }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template #default="scope">
-              <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                {{ (btnNames as any)[scope.row.statusName] }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination
-            :current-page="listQuery.offset" :page-sizes="[20, 30, 40]" :page-size="listQuery.limit"
-            :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-          <el-pagination />
-        </div>
+        </div> -->
+        <!-- 查询结果Table显示 -->
+        <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+          @change="changePage">
+          <template #preColumns>
+            <el-table-column label="选择" width="60" header-align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+            </el-table-column>
+            <el-table-column label="#" width="55" align="center">
+              <template #default="scope">
+                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+          </template>
+          <template #columns>
+            <el-table-column label="状态" align="center" width="80">
+              <template #default="scope">
+                <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                  {{ scope.row.statusName }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="80">
+              <template #default="scope">
+                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                  {{ (btnNames as any)[scope.row.statusName] }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </normal-table>
       </div>
     </div>
+    <!-- 角色分配 -->
+    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <AddUser ref="addUserRef" @reset-data="resetData" />
   </app-container>
 </template>
 
@@ -276,12 +328,22 @@
     width: 22%;
   }
 
-  .title {
-    padding: 5px 10px;
-    // background-color: ;
-    font-size: 15px;
-    line-height: 46px;
-    color: #fff;
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
   }
 
   .table {

diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 321cb97..dac3b84 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,4 +1,5 @@
 import request from '../index'
+import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -48,7 +49,7 @@
 }
 
 // 重置用户密码
-export function resetPwd(data: object) {
+export function resetPwdApi(data: object) {
   return request({
     url: 'sys/mgr/reset',
     method: 'post',
@@ -57,16 +58,14 @@
 }
 
 // 分配角色
-// export function roleAssign(userId: string, ids: string[]) {
-//   return request({
-//     url: 'sys/mgr/roleAssign',
-//     method: 'post',
-//     data: {
-//       userId: userId,
-//       roleIds: ids
-//     },
-//     // paramsSerializer: params => {
-//     //   return qs.stringify(params, { indices: false })
-//     // }
-//   })
-// }
+export function roleAssign(userId: string, ids: string[]) {
+  return request({
+    url: 'sys/mgr/roleAssign',
+    method: 'post',
+    data: {
+      userId: userId,
+      roleIds: ids
+    },
+    // paramsSerializer: (params) => qs.stringify(params, { indices: false })
+  })
+}
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
index f2875d2..3c8639a 100644
--- a/src/views/system/user/list.user.vue
+++ b/src/views/system/user/list.user.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup name="SystemDictListDict">
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQueryType, TreeStructure, userType } from './user_interface'
+import type { IlistQueryType, TreeStructure, userType, changePageType } from './user_interface'
 import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, unfreezeUser } from '@/api/system/user'
+import { delUser, freezeUserApi, getUserList, unfreezeUser, resetPwdApi } from '@/api/system/user'
 import { toTreeList } from '@/utils/structure'
+import { Menu, Plus, Delete, EditPen, Key, MagicStick } from '@element-plus/icons-vue'
+import { RSAencrypt } from '@/utils/security'
+import RoleAssignment from './role.assignment.vue'
+import AddUser from './user.add.vue'
 // 逻辑代码
 interface Tree {
   name: string
@@ -15,19 +19,20 @@
 const tagNames = { 已冻结: 'danger', 启用: 'success' }
 const btnNames = { 已冻结: '解冻', 启用: '冻结' }
 const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = [
-  { text: '账号', value: 'account' },
-  { text: '所在组织机构', value: 'deptName', width: 150 },
-  { text: '真实姓名', value: 'name' },
-  { text: '角色', value: 'roleName' },
-  { text: '手机号', value: 'phone' },
-  { text: '注册时间', value: 'createtime' },
-]
+const columns = ref([
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+])
+
 const list = ref([])
-const total = ref(20)
+const total = ref(0)
 const loadingTable = ref<boolean>(false)
 const loadingTree = ref<boolean>(false)
-
+const resetPwdFlag = ref<string>('111111')
 const logTypeList = ref(null)
 const listLoading = ref(true)
 const defaultProps = {
@@ -49,14 +54,7 @@
 // 获取列表数据
 const fetchData = (flag: string) => {
   loadingTable.value = true
-  if (flag === 'search') {
-    listQuery.deptId = ''
-  }
-  else if (flag === 'click') {
-    listQuery.keywords = ''
-    listQuery.beginTime = ''
-    listQuery.endTime = ''
-  }
+  select.value = ''
   getUserList(listQuery).then((res) => {
     list.value = res.data.rows
     total.value = res.data.total
@@ -85,6 +83,46 @@
 const search = () => {
   fetchData('search')
 }
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value)
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 删除用户
 const deleteUser = () => {
   if (select.value) {
@@ -134,6 +172,16 @@
     }
   }).catch(() => { })
 }
+const roleAssignmentRef = ref() //角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 改变每页条数
 const handleSizeChange = (val: number) => {
   listQuery.limit = val
@@ -144,6 +192,20 @@
   listQuery.offset = val
   fetchData('')
 }
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
 // 挂载
 onMounted(() => {
   // 获取树形结构数据
@@ -166,10 +228,8 @@
                 <span>组织机构</span>
               </div>
             </template>
-            <el-tree
-              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick"
-            />
+            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick" />
           </el-card>
         </div>
       </div>
@@ -181,88 +241,80 @@
             <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
+            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间" />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间"
-            />
+            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间" />
           </search-item>
         </search-area>
         <!-- 操作 -->
         <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" size="small" type="primary" icon="el-icon-plus">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
             新增
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" size="small" type="primary" icon="el-icon-edit">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
             修改
           </el-button>
-          <el-button
-            v-if="proxy.hasPerm('/sys/mgr/delete')" size="small" type="primary" icon="el-icon-delete"
-            @click="deleteUser"
-          >
+          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
             删除
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" size="small" type="primary" icon="el-icon-key">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
             重置密码
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" size="small" type="primary" icon="el-icon-magic-stick">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+            @click="assignmentRole">
             角色分配
           </el-button>
         </div>
-        <!-- 查询结果Table显示 -->
-        <div clss="title">
-          <div>
-            数据列表
+        <!-- 表头标题 -->
+        <!-- <div class="table-title">
+          <div class="title">
+            <el-icon :size="24">
+              <Menu />
+            </el-icon>
+            <span class="text">数据列表</span>
           </div>
-        </div>
-        <el-table v-loading="loadingTable" :data="list" style="width: 100%;" border>
-          <el-table-column label="选择" width="60" header-align="center">
-            <template #default="scope">
-              <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-            </template>
-          </el-table-column>
-          <el-table-column label="#" width="55" align="center">
-            <template #default="scope">
-              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="account" label="账号" align="center" show-overflow-tooltip />
-          <el-table-column prop="deptName" label="所在机构组织" align="center" width="110" show-overflow-tooltip />
-          <el-table-column prop="name" label="真实姓名" align="center" show-overflow-tooltip />
-          <el-table-column prop="roleName" label="角色" align="center" show-overflow-tooltip />
-          <el-table-column prop="phone" label="手机号" align="center" width="130" />
-          <el-table-column prop="createtime" label="注册时间" align="center" width="130" />
-          <el-table-column label="状态" align="center">
-            <template #default="scope">
-              <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                {{ scope.row.statusName }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template #default="scope">
-              <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                {{ (btnNames as any)[scope.row.statusName] }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination
-            :current-page="listQuery.offset" :page-sizes="[20, 30, 40]" :page-size="listQuery.limit"
-            :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-          <el-pagination />
-        </div>
+        </div> -->
+        <!-- 查询结果Table显示 -->
+        <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+          @change="changePage">
+          <template #preColumns>
+            <el-table-column label="选择" width="60" header-align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+            </el-table-column>
+            <el-table-column label="#" width="55" align="center">
+              <template #default="scope">
+                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+          </template>
+          <template #columns>
+            <el-table-column label="状态" align="center" width="80">
+              <template #default="scope">
+                <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                  {{ scope.row.statusName }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="80">
+              <template #default="scope">
+                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                  {{ (btnNames as any)[scope.row.statusName] }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </normal-table>
       </div>
     </div>
+    <!-- 角色分配 -->
+    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <AddUser ref="addUserRef" @reset-data="resetData" />
   </app-container>
 </template>
 
@@ -276,12 +328,22 @@
     width: 22%;
   }
 
-  .title {
-    padding: 5px 10px;
-    // background-color: ;
-    font-size: 15px;
-    line-height: 46px;
-    color: #fff;
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
   }
 
   .table {
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
new file mode 100644
index 0000000..03a3e1b
--- /dev/null
+++ b/src/views/system/user/role.assignment.vue
@@ -0,0 +1,92 @@
+<!-- 角色分配弹窗 -->ey
+<script lang="ts" setup name="roleAssigmentDialog">
+import { toTreeList, getShowItem } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+import { ElMessage } from 'element-plus'
+import type { userType } from './user_interface'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  }
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children'
+})
+const userId = ref('')  // 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.openedList
+      defaultChecked.value = temp.expandList
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+const treeRef = ref()
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then(response => {
+
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  emits('resetData')
+}
+</script>
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange" />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>

diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 321cb97..dac3b84 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,4 +1,5 @@
 import request from '../index'
+import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -48,7 +49,7 @@
 }
 
 // 重置用户密码
-export function resetPwd(data: object) {
+export function resetPwdApi(data: object) {
   return request({
     url: 'sys/mgr/reset',
     method: 'post',
@@ -57,16 +58,14 @@
 }
 
 // 分配角色
-// export function roleAssign(userId: string, ids: string[]) {
-//   return request({
-//     url: 'sys/mgr/roleAssign',
-//     method: 'post',
-//     data: {
-//       userId: userId,
-//       roleIds: ids
-//     },
-//     // paramsSerializer: params => {
-//     //   return qs.stringify(params, { indices: false })
-//     // }
-//   })
-// }
+export function roleAssign(userId: string, ids: string[]) {
+  return request({
+    url: 'sys/mgr/roleAssign',
+    method: 'post',
+    data: {
+      userId: userId,
+      roleIds: ids
+    },
+    // paramsSerializer: (params) => qs.stringify(params, { indices: false })
+  })
+}
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
index f2875d2..3c8639a 100644
--- a/src/views/system/user/list.user.vue
+++ b/src/views/system/user/list.user.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup name="SystemDictListDict">
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQueryType, TreeStructure, userType } from './user_interface'
+import type { IlistQueryType, TreeStructure, userType, changePageType } from './user_interface'
 import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, unfreezeUser } from '@/api/system/user'
+import { delUser, freezeUserApi, getUserList, unfreezeUser, resetPwdApi } from '@/api/system/user'
 import { toTreeList } from '@/utils/structure'
+import { Menu, Plus, Delete, EditPen, Key, MagicStick } from '@element-plus/icons-vue'
+import { RSAencrypt } from '@/utils/security'
+import RoleAssignment from './role.assignment.vue'
+import AddUser from './user.add.vue'
 // 逻辑代码
 interface Tree {
   name: string
@@ -15,19 +19,20 @@
 const tagNames = { 已冻结: 'danger', 启用: 'success' }
 const btnNames = { 已冻结: '解冻', 启用: '冻结' }
 const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = [
-  { text: '账号', value: 'account' },
-  { text: '所在组织机构', value: 'deptName', width: 150 },
-  { text: '真实姓名', value: 'name' },
-  { text: '角色', value: 'roleName' },
-  { text: '手机号', value: 'phone' },
-  { text: '注册时间', value: 'createtime' },
-]
+const columns = ref([
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+])
+
 const list = ref([])
-const total = ref(20)
+const total = ref(0)
 const loadingTable = ref<boolean>(false)
 const loadingTree = ref<boolean>(false)
-
+const resetPwdFlag = ref<string>('111111')
 const logTypeList = ref(null)
 const listLoading = ref(true)
 const defaultProps = {
@@ -49,14 +54,7 @@
 // 获取列表数据
 const fetchData = (flag: string) => {
   loadingTable.value = true
-  if (flag === 'search') {
-    listQuery.deptId = ''
-  }
-  else if (flag === 'click') {
-    listQuery.keywords = ''
-    listQuery.beginTime = ''
-    listQuery.endTime = ''
-  }
+  select.value = ''
   getUserList(listQuery).then((res) => {
     list.value = res.data.rows
     total.value = res.data.total
@@ -85,6 +83,46 @@
 const search = () => {
   fetchData('search')
 }
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value)
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 删除用户
 const deleteUser = () => {
   if (select.value) {
@@ -134,6 +172,16 @@
     }
   }).catch(() => { })
 }
+const roleAssignmentRef = ref() //角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 改变每页条数
 const handleSizeChange = (val: number) => {
   listQuery.limit = val
@@ -144,6 +192,20 @@
   listQuery.offset = val
   fetchData('')
 }
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
 // 挂载
 onMounted(() => {
   // 获取树形结构数据
@@ -166,10 +228,8 @@
                 <span>组织机构</span>
               </div>
             </template>
-            <el-tree
-              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick"
-            />
+            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick" />
           </el-card>
         </div>
       </div>
@@ -181,88 +241,80 @@
             <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
+            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间" />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间"
-            />
+            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间" />
           </search-item>
         </search-area>
         <!-- 操作 -->
         <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" size="small" type="primary" icon="el-icon-plus">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
             新增
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" size="small" type="primary" icon="el-icon-edit">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
             修改
           </el-button>
-          <el-button
-            v-if="proxy.hasPerm('/sys/mgr/delete')" size="small" type="primary" icon="el-icon-delete"
-            @click="deleteUser"
-          >
+          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
             删除
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" size="small" type="primary" icon="el-icon-key">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
             重置密码
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" size="small" type="primary" icon="el-icon-magic-stick">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+            @click="assignmentRole">
             角色分配
           </el-button>
         </div>
-        <!-- 查询结果Table显示 -->
-        <div clss="title">
-          <div>
-            数据列表
+        <!-- 表头标题 -->
+        <!-- <div class="table-title">
+          <div class="title">
+            <el-icon :size="24">
+              <Menu />
+            </el-icon>
+            <span class="text">数据列表</span>
           </div>
-        </div>
-        <el-table v-loading="loadingTable" :data="list" style="width: 100%;" border>
-          <el-table-column label="选择" width="60" header-align="center">
-            <template #default="scope">
-              <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-            </template>
-          </el-table-column>
-          <el-table-column label="#" width="55" align="center">
-            <template #default="scope">
-              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="account" label="账号" align="center" show-overflow-tooltip />
-          <el-table-column prop="deptName" label="所在机构组织" align="center" width="110" show-overflow-tooltip />
-          <el-table-column prop="name" label="真实姓名" align="center" show-overflow-tooltip />
-          <el-table-column prop="roleName" label="角色" align="center" show-overflow-tooltip />
-          <el-table-column prop="phone" label="手机号" align="center" width="130" />
-          <el-table-column prop="createtime" label="注册时间" align="center" width="130" />
-          <el-table-column label="状态" align="center">
-            <template #default="scope">
-              <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                {{ scope.row.statusName }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template #default="scope">
-              <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                {{ (btnNames as any)[scope.row.statusName] }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination
-            :current-page="listQuery.offset" :page-sizes="[20, 30, 40]" :page-size="listQuery.limit"
-            :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-          <el-pagination />
-        </div>
+        </div> -->
+        <!-- 查询结果Table显示 -->
+        <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+          @change="changePage">
+          <template #preColumns>
+            <el-table-column label="选择" width="60" header-align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+            </el-table-column>
+            <el-table-column label="#" width="55" align="center">
+              <template #default="scope">
+                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+          </template>
+          <template #columns>
+            <el-table-column label="状态" align="center" width="80">
+              <template #default="scope">
+                <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                  {{ scope.row.statusName }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="80">
+              <template #default="scope">
+                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                  {{ (btnNames as any)[scope.row.statusName] }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </normal-table>
       </div>
     </div>
+    <!-- 角色分配 -->
+    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <AddUser ref="addUserRef" @reset-data="resetData" />
   </app-container>
 </template>
 
@@ -276,12 +328,22 @@
     width: 22%;
   }
 
-  .title {
-    padding: 5px 10px;
-    // background-color: ;
-    font-size: 15px;
-    line-height: 46px;
-    color: #fff;
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
   }
 
   .table {
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
new file mode 100644
index 0000000..03a3e1b
--- /dev/null
+++ b/src/views/system/user/role.assignment.vue
@@ -0,0 +1,92 @@
+<!-- 角色分配弹窗 -->ey
+<script lang="ts" setup name="roleAssigmentDialog">
+import { toTreeList, getShowItem } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+import { ElMessage } from 'element-plus'
+import type { userType } from './user_interface'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  }
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children'
+})
+const userId = ref('')  // 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.openedList
+      defaultChecked.value = temp.expandList
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+const treeRef = ref()
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then(response => {
+
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  emits('resetData')
+}
+</script>
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange" />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/select.tree.vue b/src/views/system/user/select.tree.vue
new file mode 100644
index 0000000..9d0e751
--- /dev/null
+++ b/src/views/system/user/select.tree.vue
@@ -0,0 +1,183 @@
+<!-- 树状选择器 -->
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select v-model="value" clearable filterable ref="treeSelect" :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected">
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2 id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all @node-click="nodeClick" :expand-on-click-node="false"
+          :filter-method="treeFilter"></el-tree-v2>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+
+<script lang="ts">
+import { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import { defineComponent, nextTick, onMounted, PropType, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+// const TreeProps: PropsIter = {
+//   value: 'id',
+//   label: 'name',
+//   children: 'children'
+// }
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  name: 'tree select',
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px'
+    },
+    // 空占位字符
+    placeholder: String,
+    TreeProps: {
+      type: Object,
+      default: () => ({
+        value: 'id',
+        label: 'label',
+        children: 'children'
+      })
+    }
+  },
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: any = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: ''
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label
+      select.value = data.id;
+      (treeSelect.value as any).blur()
+      emit('update:modelValue', select.value)
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    const { TreeProps } = toRefs(props)
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected
+    }
+  }
+})
+</script>
+
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+

diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 321cb97..dac3b84 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,4 +1,5 @@
 import request from '../index'
+import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -48,7 +49,7 @@
 }
 
 // 重置用户密码
-export function resetPwd(data: object) {
+export function resetPwdApi(data: object) {
   return request({
     url: 'sys/mgr/reset',
     method: 'post',
@@ -57,16 +58,14 @@
 }
 
 // 分配角色
-// export function roleAssign(userId: string, ids: string[]) {
-//   return request({
-//     url: 'sys/mgr/roleAssign',
-//     method: 'post',
-//     data: {
-//       userId: userId,
-//       roleIds: ids
-//     },
-//     // paramsSerializer: params => {
-//     //   return qs.stringify(params, { indices: false })
-//     // }
-//   })
-// }
+export function roleAssign(userId: string, ids: string[]) {
+  return request({
+    url: 'sys/mgr/roleAssign',
+    method: 'post',
+    data: {
+      userId: userId,
+      roleIds: ids
+    },
+    // paramsSerializer: (params) => qs.stringify(params, { indices: false })
+  })
+}
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
index f2875d2..3c8639a 100644
--- a/src/views/system/user/list.user.vue
+++ b/src/views/system/user/list.user.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup name="SystemDictListDict">
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQueryType, TreeStructure, userType } from './user_interface'
+import type { IlistQueryType, TreeStructure, userType, changePageType } from './user_interface'
 import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, unfreezeUser } from '@/api/system/user'
+import { delUser, freezeUserApi, getUserList, unfreezeUser, resetPwdApi } from '@/api/system/user'
 import { toTreeList } from '@/utils/structure'
+import { Menu, Plus, Delete, EditPen, Key, MagicStick } from '@element-plus/icons-vue'
+import { RSAencrypt } from '@/utils/security'
+import RoleAssignment from './role.assignment.vue'
+import AddUser from './user.add.vue'
 // 逻辑代码
 interface Tree {
   name: string
@@ -15,19 +19,20 @@
 const tagNames = { 已冻结: 'danger', 启用: 'success' }
 const btnNames = { 已冻结: '解冻', 启用: '冻结' }
 const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = [
-  { text: '账号', value: 'account' },
-  { text: '所在组织机构', value: 'deptName', width: 150 },
-  { text: '真实姓名', value: 'name' },
-  { text: '角色', value: 'roleName' },
-  { text: '手机号', value: 'phone' },
-  { text: '注册时间', value: 'createtime' },
-]
+const columns = ref([
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+])
+
 const list = ref([])
-const total = ref(20)
+const total = ref(0)
 const loadingTable = ref<boolean>(false)
 const loadingTree = ref<boolean>(false)
-
+const resetPwdFlag = ref<string>('111111')
 const logTypeList = ref(null)
 const listLoading = ref(true)
 const defaultProps = {
@@ -49,14 +54,7 @@
 // 获取列表数据
 const fetchData = (flag: string) => {
   loadingTable.value = true
-  if (flag === 'search') {
-    listQuery.deptId = ''
-  }
-  else if (flag === 'click') {
-    listQuery.keywords = ''
-    listQuery.beginTime = ''
-    listQuery.endTime = ''
-  }
+  select.value = ''
   getUserList(listQuery).then((res) => {
     list.value = res.data.rows
     total.value = res.data.total
@@ -85,6 +83,46 @@
 const search = () => {
   fetchData('search')
 }
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value)
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 删除用户
 const deleteUser = () => {
   if (select.value) {
@@ -134,6 +172,16 @@
     }
   }).catch(() => { })
 }
+const roleAssignmentRef = ref() //角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 改变每页条数
 const handleSizeChange = (val: number) => {
   listQuery.limit = val
@@ -144,6 +192,20 @@
   listQuery.offset = val
   fetchData('')
 }
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
 // 挂载
 onMounted(() => {
   // 获取树形结构数据
@@ -166,10 +228,8 @@
                 <span>组织机构</span>
               </div>
             </template>
-            <el-tree
-              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick"
-            />
+            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick" />
           </el-card>
         </div>
       </div>
@@ -181,88 +241,80 @@
             <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
+            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间" />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间"
-            />
+            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间" />
           </search-item>
         </search-area>
         <!-- 操作 -->
         <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" size="small" type="primary" icon="el-icon-plus">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
             新增
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" size="small" type="primary" icon="el-icon-edit">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
             修改
           </el-button>
-          <el-button
-            v-if="proxy.hasPerm('/sys/mgr/delete')" size="small" type="primary" icon="el-icon-delete"
-            @click="deleteUser"
-          >
+          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
             删除
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" size="small" type="primary" icon="el-icon-key">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
             重置密码
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" size="small" type="primary" icon="el-icon-magic-stick">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+            @click="assignmentRole">
             角色分配
           </el-button>
         </div>
-        <!-- 查询结果Table显示 -->
-        <div clss="title">
-          <div>
-            数据列表
+        <!-- 表头标题 -->
+        <!-- <div class="table-title">
+          <div class="title">
+            <el-icon :size="24">
+              <Menu />
+            </el-icon>
+            <span class="text">数据列表</span>
           </div>
-        </div>
-        <el-table v-loading="loadingTable" :data="list" style="width: 100%;" border>
-          <el-table-column label="选择" width="60" header-align="center">
-            <template #default="scope">
-              <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-            </template>
-          </el-table-column>
-          <el-table-column label="#" width="55" align="center">
-            <template #default="scope">
-              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="account" label="账号" align="center" show-overflow-tooltip />
-          <el-table-column prop="deptName" label="所在机构组织" align="center" width="110" show-overflow-tooltip />
-          <el-table-column prop="name" label="真实姓名" align="center" show-overflow-tooltip />
-          <el-table-column prop="roleName" label="角色" align="center" show-overflow-tooltip />
-          <el-table-column prop="phone" label="手机号" align="center" width="130" />
-          <el-table-column prop="createtime" label="注册时间" align="center" width="130" />
-          <el-table-column label="状态" align="center">
-            <template #default="scope">
-              <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                {{ scope.row.statusName }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template #default="scope">
-              <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                {{ (btnNames as any)[scope.row.statusName] }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination
-            :current-page="listQuery.offset" :page-sizes="[20, 30, 40]" :page-size="listQuery.limit"
-            :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-          <el-pagination />
-        </div>
+        </div> -->
+        <!-- 查询结果Table显示 -->
+        <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+          @change="changePage">
+          <template #preColumns>
+            <el-table-column label="选择" width="60" header-align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+            </el-table-column>
+            <el-table-column label="#" width="55" align="center">
+              <template #default="scope">
+                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+          </template>
+          <template #columns>
+            <el-table-column label="状态" align="center" width="80">
+              <template #default="scope">
+                <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                  {{ scope.row.statusName }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="80">
+              <template #default="scope">
+                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                  {{ (btnNames as any)[scope.row.statusName] }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </normal-table>
       </div>
     </div>
+    <!-- 角色分配 -->
+    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <AddUser ref="addUserRef" @reset-data="resetData" />
   </app-container>
 </template>
 
@@ -276,12 +328,22 @@
     width: 22%;
   }
 
-  .title {
-    padding: 5px 10px;
-    // background-color: ;
-    font-size: 15px;
-    line-height: 46px;
-    color: #fff;
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
   }
 
   .table {
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
new file mode 100644
index 0000000..03a3e1b
--- /dev/null
+++ b/src/views/system/user/role.assignment.vue
@@ -0,0 +1,92 @@
+<!-- 角色分配弹窗 -->ey
+<script lang="ts" setup name="roleAssigmentDialog">
+import { toTreeList, getShowItem } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+import { ElMessage } from 'element-plus'
+import type { userType } from './user_interface'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  }
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children'
+})
+const userId = ref('')  // 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.openedList
+      defaultChecked.value = temp.expandList
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+const treeRef = ref()
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then(response => {
+
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  emits('resetData')
+}
+</script>
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange" />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/select.tree.vue b/src/views/system/user/select.tree.vue
new file mode 100644
index 0000000..9d0e751
--- /dev/null
+++ b/src/views/system/user/select.tree.vue
@@ -0,0 +1,183 @@
+<!-- 树状选择器 -->
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select v-model="value" clearable filterable ref="treeSelect" :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected">
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2 id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all @node-click="nodeClick" :expand-on-click-node="false"
+          :filter-method="treeFilter"></el-tree-v2>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+
+<script lang="ts">
+import { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import { defineComponent, nextTick, onMounted, PropType, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+// const TreeProps: PropsIter = {
+//   value: 'id',
+//   label: 'name',
+//   children: 'children'
+// }
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  name: 'tree select',
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px'
+    },
+    // 空占位字符
+    placeholder: String,
+    TreeProps: {
+      type: Object,
+      default: () => ({
+        value: 'id',
+        label: 'label',
+        children: 'children'
+      })
+    }
+  },
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: any = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: ''
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label
+      select.value = data.id;
+      (treeSelect.value as any).blur()
+      emit('update:modelValue', select.value)
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    const { TreeProps } = toRefs(props)
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected
+    }
+  }
+})
+</script>
+
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+
diff --git a/src/views/system/user/user.add.vue b/src/views/system/user/user.add.vue
index 9df400d..10b37e6 100644
--- a/src/views/system/user/user.add.vue
+++ b/src/views/system/user/user.add.vue
@@ -1,7 +1,14 @@
+<!-- 添加修改用户弹窗 -->
 <script lang="ts" setup name="SystemUserAddDialog">
 import type { FormInstance } from 'element-plus'
 import { toTreeList } from '@/utils/structure'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { addUser, updateUser } from '@/api/system/user'
+import { getRoleTreeList } from '@/api/system/role'
 import type { addInfo } from './user_interface'
+import { getDictByCode } from '@/api/system/dict'
+import { RSAencrypt } from '@/utils/security'
+import comTreeSelect from './select.tree.vue'
 const ruleFormRef = ref<FormInstance>()
 const dialogFormVisible = ref<boolean>(false)// 对话框是否显示
 const dialogStatus = ref<string>('')// 对话框类型：create,update
@@ -24,8 +31,9 @@
 const roleProps = reactive({
   parent: 'pid', value: 'id', label: 'name', children: 'children',
 })
+const emits = defineEmits(['resetData'])
 const roleTreeList = ref([])// 角色树列表数据
-const sexList = reactive([{ label: '男', value: '0' }, { label: '女', value: '1' }])// 性别选项
+const sexList = ref([])// 性别选项
 const textMap = reactive<{ update: string; create: string }>({
   update: '编辑用户',
   create: '新增用户',
@@ -35,7 +43,7 @@
     callback(new Error('密码不能为空'))
   } else {
     if (userForm.rePassword !== '') {
-      // ruleFormRef?.validateField('rePassword')
+      ruleFormRef.value.validateField('rePassword')
     }
     callback()
   }
@@ -61,23 +69,6 @@
 })// 前端校验规则
 let roleName = ref<string>()// 角色名，展示用
 const btnLoading = ref<boolean>(false)// 保存按钮的加载中状态
-const submitForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) { return }
-  formEl.validate((valid) => {
-    if (valid) {
-      console.log('submit!')
-    }
-    else {
-      console.log('error submit!')
-      return false
-    }
-  })
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) { return }
-  formEl.resetFields()
-}
 // 初始化对话框
 const initDialog = (dialogStatusflag: string, row: addInfo = {
   id: '', // 编号
@@ -92,118 +83,133 @@
   birthday: '',
   sex: '', // 性别
 }) => {
+  getDictByCode('sex').then((response) => {
+    sexList.value = response.data
+  })
+  fetchRoleTree()
   dialogStatus.value = dialogStatusflag
   dialogFormVisible.value = true
   btnLoading.value = false
   if (dialogStatus.value === 'create') { // 如果是新增，清除验证
-    // resetForm()
-    // $nextTick(() => {
-    //   $refs['dataForm'].clearValidate()
-    // })
+    userForm.account = row.account
+    userForm.id = row.id
+    userForm.name = row.name
+    userForm.email = row.email
+    userForm.phone = row.phone
+    userForm.deptId = row.deptId
+    userForm.sex = row.sex
+    userForm.birthday = row.birthday
+    userForm.roleid = row.roleid
+    roleName.value = row.roleName
+    resetForm1()
+    nextTick(() => {
+      ruleFormRef.value.clearValidate()
+    })
   } else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
-    userForm = {
-      id: row.id, // 编号
-      account: row.account, // 账号
-      name: row.name, // 姓名
-      email: row.email, // 邮箱，
-      phone: row.phone, // 手机号，
-      deptId: row.deptId, // 组织机构编号
-      roleid: row.roleid, // 角色
-      birthday: row.birthday, // 生日
-      sex: row.sex, // 性别
-    }
+    userForm.account = row.account
+    userForm.id = row.id
+    userForm.name = row.name
+    userForm.email = row.email
+    userForm.phone = row.phone
+    userForm.deptId = row.deptId
+    userForm.sex = row.sex
+    userForm.birthday = row.birthday
+    userForm.roleid = row.roleid
     roleName.value = row.roleName
     delete userForm['password']
     delete userForm['rePassword']
   }
 }
+defineExpose({ initDialog })
 // 加载角色树形下拉菜单
 const fetchRoleTree = () => {
-  // getRoleTreeList(listQuery).then((res) => {
-  //   if (res.data.list) { // 将列表转树结构
-  //     roleTreeList.value = toTreeList(res.data.list, '0', true)
-  //   }
-  // })
+  getRoleTreeList().then((res) => {
+    if (res.data.list) { // 将列表转树结构
+      roleTreeList.value = toTreeList(res.data.list, '0', true)
+    }
+  })
 }
 // 重置表单
 const resetForm1 = () => {
-  userForm = {
-    id: '', // 编号
-    account: '', // 账号
-    name: '', // 姓名
-    email: '', // 邮箱，
-    phone: '', // 手机号，
-    deptId: '', // 组织机构编号
-    roleid: '', // 角色
-    password: '', // 密码
-    rePassword: '' // 重复密码
-  }
+  userForm.account = ''
+  userForm.id = ''
+  userForm.name = ''
+  userForm.email = ''
+  userForm.phone = ''
+  userForm.deptId = ''
+  userForm.sex = ''
+  userForm.birthday = ''
+  userForm.roleid = ''
+  userForm.password = ''
+  userForm.rePassword = ''
 }
 // 保存数据
-const saveData = () => {
+const saveData = (formEl: FormInstance | undefined) => {
   if (dialogStatus.value === 'update') {
-    // updateData()
+    updateData()
   } else if (dialogStatus.value === 'create') {
-    // createData()
+    createData()
   }
 }
-// // 新增数据
-// createData: function() {
-//   this.$refs['dataForm'].validate((valid) => {
-//     console.log(this.userForm)
-//     const userForm = JSON.parse(JSON.stringify(this.userForm))
-//     userForm.password = RSAencrypt(userForm.password)
-//     userForm.rePassword = RSAencrypt(userForm.rePassword)
-//     if (valid) {
-//       this.btnLoading = true
-//       addUser(userForm).then(response => {
-//         if (response.code === 200) {
-//           this.$confirm('新增成功，是否继续新增?', '提示', {
-//             confirmButtonText: '是',
-//             cancelButtonText: '否',
-//             type: 'info'
-//           }).then(() => {
-//             this.btnLoading = false
-//             this.resetForm()
-//             this.$nextTick(() => {
-//               this.$refs['dataForm'].clearValidate()
-//             })
-//           }).catch(() => {
-//             this.$emit('watchChild')
-//             this.dialogFormVisible = false
-//           })
-//         }
-//       }).catch(_ => { // 异常情况，loading置为false
-//         this.btnLoading = false
-//       })
-//     }
-//   })
-// },
-// // 修改数据
-// updateData: function() {
-//   this.$refs['dataForm'].validate((valid) => {
-//     if (valid) {
-//       this.btnLoading = true
-//       updateUser(this.userForm).then(response => {
-//         if (response.code === 200) {
-//           this.$message.success('修改成功')
-//           this.$emit('watchChild')
-//           this.dialogFormVisible = false
-//         }
-//       }).catch(_ => { // 异常情况，loading置为false
-//         this.btnLoading = false
-//       })
-//     }
-//   })
-// },
-// cancel: function() {
-//   this.dialogFormVisible = false
-//   this.$emit('watchChild')
-// }
+// 新增数据
+const createData = () => {
+  ruleFormRef.value.validate(async (valid) => {
+    const userForm1 = JSON.parse(JSON.stringify(userForm))
+    userForm1.password = await RSAencrypt(userForm1.password)
+    userForm1.rePassword = await RSAencrypt(userForm1.rePassword)
+    if (valid) {
+      btnLoading.value = true
+      addUser(userForm1).then((response) => {
+        if (response.code === 200) {
+          ElMessageBox.confirm('新增成功，是否继续新增?', '提示', {
+            confirmButtonText: '是',
+            cancelButtonText: '否',
+            type: 'info'
+          }).then(() => {
+            btnLoading.value = false
+            resetForm1()
+            nextTick(() => {
+              ruleFormRef.value.clearValidate()
+            })
+          }).catch(() => {
+            dialogFormVisible.value = false
+            emits('resetData')
+          })
+        }
+      }).catch(() => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+// 修改数据
+const updateData = () => {
+  ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      btnLoading.value = true
+      updateUser(userForm).then((response) => {
+        if (response.code === 200) {
+          ElMessage.success('修改成功')
+          dialogFormVisible.value = false
+          emits('resetData')
+        }
+      }).catch(() => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+const cancel = (formEl: FormInstance | undefined) => {
+  dialogFormVisible.value = false
+  // resetForm1()
+  ruleFormRef.value.resetFields()
+  emits('resetData')
+}
 </script>
 
 <template>
-  <el-dialog v-model:visible="dialogFormVisible" :title="textMap[dialogStatus]" width="700" append-to-body>
+  <el-dialog v-model="dialogFormVisible" width="700" :title="textMap[dialogStatus]" append-to-body
+    v-if="dialogFormVisible">
     <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12">
@@ -221,14 +227,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="性别" prop="sex">
-            <el-select v-model="userForm.sex" placeholder="请选择">
-              <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value" />
+            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '240px' }">
+              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="出生日期" prop="birthday">
-            <el-date-picker v-model="userForm.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
+            <el-date-picker v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期"
               style="width: 100%;" />
           </el-form-item>
         </el-col>
@@ -248,8 +254,8 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item v-if="dialogStatus === 'create'" label="角色" prop="roleid">
-            <select-tree v-model="userForm.roleid" :default-expanded-keys="[userForm.roleid]" :options="roleTreeList"
-              :props="roleProps" />
+            <com-tree-select :options="roleTreeList" v-model="userForm.roleid" placeholder="选择角色"
+              :TreeProps="roleProps" />
           </el-form-item>
           <el-form-item v-else label="角色">
             <el-input v-model="roleName" :disabled="dialogStatus === 'update'" type="text" placeholder="无" />
@@ -275,11 +281,11 @@
         </el-col>
       </el-row>
     </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">
+    <div slot="footer" class="dialog-footer footer">
+      <el-button :loading="btnLoading" type="primary" @click="saveData(ruleFormRef)">
         保存
       </el-button>
-      <el-button @click="">
+      <el-button @click="cancel(ruleFormRef)">
         取消
       </el-button>
     </div>
@@ -287,5 +293,8 @@
 </template>
 
 <style lang="scss" scoped>
-
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>

diff --git a/src/api/system/user.ts b/src/api/system/user.ts
index 321cb97..dac3b84 100644
--- a/src/api/system/user.ts
+++ b/src/api/system/user.ts
@@ -1,4 +1,5 @@
 import request from '../index'
+import qs from 'qs'
 const prefix = 'sys/'
 // 修改密码
 export function changePwd(data: { oldPwd: string; newPwd: string }) {
@@ -48,7 +49,7 @@
 }
 
 // 重置用户密码
-export function resetPwd(data: object) {
+export function resetPwdApi(data: object) {
   return request({
     url: 'sys/mgr/reset',
     method: 'post',
@@ -57,16 +58,14 @@
 }
 
 // 分配角色
-// export function roleAssign(userId: string, ids: string[]) {
-//   return request({
-//     url: 'sys/mgr/roleAssign',
-//     method: 'post',
-//     data: {
-//       userId: userId,
-//       roleIds: ids
-//     },
-//     // paramsSerializer: params => {
-//     //   return qs.stringify(params, { indices: false })
-//     // }
-//   })
-// }
+export function roleAssign(userId: string, ids: string[]) {
+  return request({
+    url: 'sys/mgr/roleAssign',
+    method: 'post',
+    data: {
+      userId: userId,
+      roleIds: ids
+    },
+    // paramsSerializer: (params) => qs.stringify(params, { indices: false })
+  })
+}
diff --git a/src/views/system/user/list.user.vue b/src/views/system/user/list.user.vue
index f2875d2..3c8639a 100644
--- a/src/views/system/user/list.user.vue
+++ b/src/views/system/user/list.user.vue
@@ -1,9 +1,13 @@
 <script lang="ts" setup name="SystemDictListDict">
 import { ElMessage, ElMessageBox } from 'element-plus'
-import type { IlistQueryType, TreeStructure, userType } from './user_interface'
+import type { IlistQueryType, TreeStructure, userType, changePageType } from './user_interface'
 import { getDeptTreeList } from '@/api/system/dept'
-import { delUser, freezeUserApi, getUserList, unfreezeUser } from '@/api/system/user'
+import { delUser, freezeUserApi, getUserList, unfreezeUser, resetPwdApi } from '@/api/system/user'
 import { toTreeList } from '@/utils/structure'
+import { Menu, Plus, Delete, EditPen, Key, MagicStick } from '@element-plus/icons-vue'
+import { RSAencrypt } from '@/utils/security'
+import RoleAssignment from './role.assignment.vue'
+import AddUser from './user.add.vue'
 // 逻辑代码
 interface Tree {
   name: string
@@ -15,19 +19,20 @@
 const tagNames = { 已冻结: 'danger', 启用: 'success' }
 const btnNames = { 已冻结: '解冻', 启用: '冻结' }
 const btnStatus = { 已冻结: '', 启用: 'primary' }
-const columns = [
-  { text: '账号', value: 'account' },
-  { text: '所在组织机构', value: 'deptName', width: 150 },
-  { text: '真实姓名', value: 'name' },
-  { text: '角色', value: 'roleName' },
-  { text: '手机号', value: 'phone' },
-  { text: '注册时间', value: 'createtime' },
-]
+const columns = ref([
+  { text: '账号', value: 'account', align: 'center' },
+  { text: '所在组织机构', value: 'deptName', align: 'center' },
+  { text: '真实姓名', value: 'name', align: 'center' },
+  { text: '角色', value: 'roleName', align: 'center' },
+  { text: '手机号', value: 'phone', align: 'center' },
+  { text: '注册时间', value: 'createtime', align: 'center' },
+])
+
 const list = ref([])
-const total = ref(20)
+const total = ref(0)
 const loadingTable = ref<boolean>(false)
 const loadingTree = ref<boolean>(false)
-
+const resetPwdFlag = ref<string>('111111')
 const logTypeList = ref(null)
 const listLoading = ref(true)
 const defaultProps = {
@@ -49,14 +54,7 @@
 // 获取列表数据
 const fetchData = (flag: string) => {
   loadingTable.value = true
-  if (flag === 'search') {
-    listQuery.deptId = ''
-  }
-  else if (flag === 'click') {
-    listQuery.keywords = ''
-    listQuery.beginTime = ''
-    listQuery.endTime = ''
-  }
+  select.value = ''
   getUserList(listQuery).then((res) => {
     list.value = res.data.rows
     total.value = res.data.total
@@ -85,6 +83,46 @@
 const search = () => {
   fetchData('search')
 }
+const addUserRef = ref()
+// 新增用户
+const add = () => {
+  addUserRef.value.initDialog('create')
+}
+// 编辑用户
+const edit = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    addUserRef.value.initDialog('update', user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+
+}
+// 重置密码
+const resetPwd = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    ElMessageBox.confirm(
+      `确定要重置${user.name}的密码为${resetPwdFlag.value}吗？`,
+      '确认重置密码',
+      {
+        confirmButtonText: '确认',
+        cancelButtonText: '取消',
+        type: 'warning',
+      },
+    ).then(async () => {
+      const params = {
+        id: String(user.id),
+        newPwd: await RSAencrypt(resetPwdFlag.value)
+      }
+      resetPwdApi(params).then(() => {
+        ElMessage.success('操作成功')
+      })
+    }).catch(() => { })
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 删除用户
 const deleteUser = () => {
   if (select.value) {
@@ -134,6 +172,16 @@
     }
   }).catch(() => { })
 }
+const roleAssignmentRef = ref() //角色分配弹窗
+// 角色分配
+const assignmentRole = () => {
+  if (select.value) {
+    const user: userType = list.value[select.value - 1]
+    roleAssignmentRef.value.initDialog(user)
+  } else {
+    ElMessage.error('必须选中一项')
+  }
+}
 // 改变每页条数
 const handleSizeChange = (val: number) => {
   listQuery.limit = val
@@ -144,6 +192,20 @@
   listQuery.offset = val
   fetchData('')
 }
+// 页数发生变化后的操作，可能是页码变化，可能是每页容量变化，此函数必写
+const changePage = (val: changePageType) => {
+  if (val && val.size) {
+    listQuery.limit = val.size
+  }
+  if (val && val.page) {
+    listQuery.offset = val.page
+  }
+  fetchData('')
+}
+// 重置页面
+const resetData = () => {
+  fetchData('')
+}
 // 挂载
 onMounted(() => {
   // 获取树形结构数据
@@ -166,10 +228,8 @@
                 <span>组织机构</span>
               </div>
             </template>
-            <el-tree
-              v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
-              :expand-on-click-node="false" @node-click="handleNodeClick"
-            />
+            <el-tree v-loading="loadingTree" :data="treeData" :props="defaultProps" default-expand-all
+              :expand-on-click-node="false" @node-click="handleNodeClick" />
           </el-card>
         </div>
       </div>
@@ -181,88 +241,80 @@
             <el-input v-model.trim="listQuery.keywords" placeholder="账户/真实姓名/手机号" clearable />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择开始时间"
-            />
+            <el-date-picker v-model="listQuery.beginTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择开始时间" />
           </search-item>
           <search-item>
-            <el-date-picker
-              v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
-              placeholder="选择结束时间"
-            />
+            <el-date-picker v-model="listQuery.endTime" type="datetime" format="YYYY-MM-DD HH:mm:ss"
+              placeholder="选择结束时间" />
           </search-item>
         </search-area>
         <!-- 操作 -->
         <div style="margin-bottom: 10px;">
-          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" size="small" type="primary" icon="el-icon-plus">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/add')" type="primary" :icon="Plus" @click="add">
             新增
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" size="small" type="primary" icon="el-icon-edit">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/update')" type="primary" :icon="EditPen" @click="edit">
             修改
           </el-button>
-          <el-button
-            v-if="proxy.hasPerm('/sys/mgr/delete')" size="small" type="primary" icon="el-icon-delete"
-            @click="deleteUser"
-          >
+          <el-button v-if="proxy.hasPerm('/sys/mgr/delete')" type="primary" :icon="Delete" @click="deleteUser">
             删除
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" size="small" type="primary" icon="el-icon-key">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/reset')" type="primary" :icon="Key" @click="resetPwd">
             重置密码
           </el-button>
-          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" size="small" type="primary" icon="el-icon-magic-stick">
+          <el-button v-if="proxy.hasPerm('/sys/mgr/roleAssign')" type="primary" :icon="MagicStick"
+            @click="assignmentRole">
             角色分配
           </el-button>
         </div>
-        <!-- 查询结果Table显示 -->
-        <div clss="title">
-          <div>
-            数据列表
+        <!-- 表头标题 -->
+        <!-- <div class="table-title">
+          <div class="title">
+            <el-icon :size="24">
+              <Menu />
+            </el-icon>
+            <span class="text">数据列表</span>
           </div>
-        </div>
-        <el-table v-loading="loadingTable" :data="list" style="width: 100%;" border>
-          <el-table-column label="选择" width="60" header-align="center">
-            <template #default="scope">
-              <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
-            </template>
-          </el-table-column>
-          <el-table-column label="#" width="55" align="center">
-            <template #default="scope">
-              {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
-            </template>
-          </el-table-column>
-          <el-table-column prop="account" label="账号" align="center" show-overflow-tooltip />
-          <el-table-column prop="deptName" label="所在机构组织" align="center" width="110" show-overflow-tooltip />
-          <el-table-column prop="name" label="真实姓名" align="center" show-overflow-tooltip />
-          <el-table-column prop="roleName" label="角色" align="center" show-overflow-tooltip />
-          <el-table-column prop="phone" label="手机号" align="center" width="130" />
-          <el-table-column prop="createtime" label="注册时间" align="center" width="130" />
-          <el-table-column label="状态" align="center">
-            <template #default="scope">
-              <el-tag :type="(tagNames as any)[scope.row.statusName]">
-                {{ scope.row.statusName }}
-              </el-tag>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" align="center">
-            <template #default="scope">
-              <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
-                {{ (btnNames as any)[scope.row.statusName] }}
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-        <!-- 分页 -->
-        <div class="pagination">
-          <el-pagination
-            :current-page="listQuery.offset" :page-sizes="[20, 30, 40]" :page-size="listQuery.limit"
-            :total="total" layout="total, sizes, prev, pager, next" @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
-          <el-pagination />
-        </div>
+        </div> -->
+        <!-- 查询结果Table显示 -->
+        <normal-table :data="list" :total="total" :columns="columns" :query="listQuery" :list-loading="loadingTable"
+          @change="changePage">
+          <template #preColumns>
+            <el-table-column label="选择" width="60" header-align="center">
+              <template #default="scope">
+                <el-radio v-model="select" :label="scope.$index + 1" class="radio" />
+              </template>
+            </el-table-column>
+            <el-table-column label="#" width="55" align="center">
+              <template #default="scope">
+                {{ (listQuery.offset - 1) * listQuery.limit + scope.$index + 1 }}
+              </template>
+            </el-table-column>
+          </template>
+          <template #columns>
+            <el-table-column label="状态" align="center" width="80">
+              <template #default="scope">
+                <el-tag :type="(tagNames as any)[scope.row.statusName]">
+                  {{ scope.row.statusName }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="80">
+              <template #default="scope">
+                <el-button :type="(btnStatus as any)[scope.row.statusName]" size="small" @click="frozenUser(scope.row)">
+                  {{ (btnNames as any)[scope.row.statusName] }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </template>
+        </normal-table>
       </div>
     </div>
+    <!-- 角色分配 -->
+    <RoleAssignment ref="roleAssignmentRef" @reset-data="resetData" />
+    <!-- 添加或修改用户 -->
+    <AddUser ref="addUserRef" @reset-data="resetData" />
   </app-container>
 </template>
 
@@ -276,12 +328,22 @@
     width: 22%;
   }
 
-  .title {
-    padding: 5px 10px;
-    // background-color: ;
-    font-size: 15px;
-    line-height: 46px;
-    color: #fff;
+  .table-title {
+    background-color: #409eff;
+
+    .title {
+      padding: 5px 10px;
+      // background-color: ;
+      font-size: 15px;
+      line-height: 46px;
+      color: #fff;
+      display: flex;
+      align-items: center;
+
+      .text {
+        margin-left: 10px;
+      }
+    }
   }
 
   .table {
diff --git a/src/views/system/user/role.assignment.vue b/src/views/system/user/role.assignment.vue
new file mode 100644
index 0000000..03a3e1b
--- /dev/null
+++ b/src/views/system/user/role.assignment.vue
@@ -0,0 +1,92 @@
+<!-- 角色分配弹窗 -->ey
+<script lang="ts" setup name="roleAssigmentDialog">
+import { toTreeList, getShowItem } from '@/utils/structure'
+import { getRoleTreeListByUser } from '@/api/system/role'
+import { roleAssign } from '@/api/system/user'
+import { ElMessage } from 'element-plus'
+import type { userType } from './user_interface'
+const props = defineProps({
+  titleText: {
+    type: String,
+    default: '分配角色',
+  }
+})
+const emits = defineEmits(['resetData'])
+const dialogFormVisible = ref<boolean>(false)
+const loading = ref<boolean>(false) // 加载动态效果
+const roleTreeList = ref([])// 角色树列表数据
+const defaultProps = ref({
+  label: 'name',
+  children: 'children'
+})
+const userId = ref('')  // 用户id
+const userName = ref('') // 用户名称
+const ids = ref([]) // 选中项id
+const defaultExpanded = ref<string[]>([]) // 默认展开的项
+const defaultChecked = ref<string[]>([]) // 默认选中的树
+const defaultExpandAll = ref<boolean>(true)// 是否展开树
+const handleCheckChange = () => {
+
+}
+// 获取角色列表
+const fetchRoleTree = () => {
+  getRoleTreeListByUser(userId.value).then((response) => {
+    if (response.data) {
+      roleTreeList.value = toTreeList(response.data)
+      const temp = getShowItem(response.data) // 获取展开项和选中项
+      defaultExpanded.value = temp.openedList
+      defaultChecked.value = temp.expandList
+      loading.value = false
+    }
+  })
+}
+// 弹窗初始化
+const initDialog = (row: userType) => {
+  loading.value = true
+  userId.value = row.id
+  userName.value = row.name
+  dialogFormVisible.value = true
+  fetchRoleTree()
+}
+const treeRef = ref()
+defineExpose({ initDialog })
+const saveData = () => {
+  ids.value = treeRef.value.getCheckedKeys()
+  roleAssign(userId.value, ids.value).then(response => {
+
+    if (response.code === 200) {
+      ElMessage.success('角色分配成功')
+      dialogFormVisible.value = false
+      emits('resetData')
+    }
+  })
+}
+const cancel = () => {
+  dialogFormVisible.value = false
+  emits('resetData')
+}
+</script>
+<template>
+  <el-dialog v-model="dialogFormVisible" :title="titleText" width="330px" append-to-body>
+    <el-scrollbar>
+      <el-tree ref="treeRef" v-loading="loading" :props="defaultProps" :data="roleTreeList"
+        :default-expanded-keys="defaultExpanded" :default-checked-keys="defaultChecked"
+        :default-expand-all="defaultExpandAll" show-checkbox check-strictly node-key="id"
+        @check-change="handleCheckChange" />
+    </el-scrollbar>
+    <div slot="footer" class="dialog-footer footer">
+      <el-button type="primary" @click="saveData">
+        保存
+      </el-button>
+      <el-button @click="cancel">
+        取消
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+<style lang="scss" scoped>
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
+</style>
diff --git a/src/views/system/user/select.tree.vue b/src/views/system/user/select.tree.vue
new file mode 100644
index 0000000..9d0e751
--- /dev/null
+++ b/src/views/system/user/select.tree.vue
@@ -0,0 +1,183 @@
+<!-- 树状选择器 -->
+<template>
+  <div class="tree_box" :style="width && { width: width.includes('px') ? width : width }">
+    <el-select v-model="value" clearable filterable ref="treeSelect" :placeholder="placeholder || '请选择'"
+      :filter-method="selectFilter" @clear="clearSelected">
+      <el-option :value="currentNodeKey" :label="currentNodeLabel">
+        <el-tree-v2 id="tree_v2" ref="treeV2" :data="options" :props="keyProps || TreeProps"
+          :current-node-key="currentNodeKey" default-expand-all @node-click="nodeClick" :expand-on-click-node="false"
+          :filter-method="treeFilter"></el-tree-v2>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+
+<script lang="ts">
+import { TreeNode } from 'element-plus/es/components/tree-v2/src/types'
+import { TreeNodeData } from 'element-plus/es/components/tree/src/tree.type'
+import { defineComponent, nextTick, onMounted, PropType, reactive, ref, toRefs, watch } from 'vue'
+interface PropsIter {
+  value: string
+  label: string
+  children: string
+  disabled?: boolean
+}
+// const TreeProps: PropsIter = {
+//   value: 'id',
+//   label: 'name',
+//   children: 'children'
+// }
+interface TreeIter {
+  id: string
+  label: string
+  children?: TreeIter[]
+}
+export default defineComponent({
+  name: 'tree select',
+  props: {
+    // 组件绑定的options
+    options: {
+      type: Array as PropType<TreeIter[]>,
+      required: true
+    },
+    // 配置选项
+    keyProps: Object as PropType<PropsIter>,
+    // 双向绑定值
+    modelValue: [String, Number],
+    // 组件样式宽
+    width: {
+      type: String,
+      default: '240px'
+    },
+    // 空占位字符
+    placeholder: String,
+    TreeProps: {
+      type: Object,
+      default: () => ({
+        value: 'id',
+        label: 'label',
+        children: 'children'
+      })
+    }
+  },
+  setup(props, { emit }) {
+    // 解决 props道具变异
+    const { modelValue } = toRefs(props)
+    const select: any = reactive({
+      value: modelValue.value,
+      currentNodeKey: '',
+      currentNodeLabel: ''
+    })
+    const treeSelect = ref<HTMLElement | null>(null)
+    const nodeClick = (data: TreeNodeData, node: TreeNode) => {
+      select.currentNodeKey = data.id
+      select.currentNodeLabel = data.label
+      select.value = data.id;
+      (treeSelect.value as any).blur()
+      emit('update:modelValue', select.value)
+    }
+    // 筛选方法
+    const treeV2: any = ref<HTMLElement | null>(null)
+    const selectFilter = (query: string) => {
+      treeV2.value.filter(query)
+    }
+    // ztree-v2 筛选方法
+    const treeFilter = (query: string, node: TreeNode) => {
+      return node.label?.indexOf(query) !== -1
+    }
+    // 直接清空选择数据
+    const clearSelected = () => {
+      select.currentNodeKey = ''
+      select.currentNodeLabel = ''
+      select.value = ''
+      emit('update:modelValue', undefined)
+    }
+    // setCurrent通过select.value 设置下拉选择tree 显示绑定的v-model值
+    // 可能存在问题：当动态v-model赋值时 options的数据还没有加载完成就会失效，下拉选择时会警告 placeholder
+    const setCurrent = () => {
+      select.currentNodeKey = select.value
+      treeV2.value.setCurrentKey(select.value)
+      const data: TreeNodeData | undefined = treeV2.value.getCurrentNode(select.value)
+      select.currentNodeLabel = data?.label || data?.name
+    }
+    // 监听外部清空数据源 清空组件数据
+    watch(modelValue, (v) => {
+      if (v === undefined && select.currentNodeKey !== '') {
+        clearSelected()
+      }
+      // 动态赋值
+      if (v) {
+        select.value = v
+        setCurrent()
+      }
+    })
+    // 回显数据
+    onMounted(async () => {
+      await nextTick()
+      if (select.value) {
+        setCurrent()
+      }
+    })
+    const { TreeProps } = toRefs(props)
+    return {
+      treeSelect,
+      treeV2,
+      TreeProps,
+      ...toRefs(select),
+      nodeClick,
+      selectFilter,
+      treeFilter,
+      clearSelected
+    }
+  }
+})
+</script>
+
+
+<style lang="scss" scoped>
+.tree_box {
+  width: 214px;
+}
+
+.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
+  height: auto;
+  max-height: 274px;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+
+.el-select-dropdown__item.selected {
+  font-weight: normal;
+}
+
+ul li :deep(.el-tree .el-tree-node__content) {
+  height: auto;
+  padding: 0 20px;
+}
+
+.el-tree-node__label {
+  font-weight: normal;
+}
+
+.el-tree :deep(.is-current .el-tree-node__label) {
+  color: #409eff;
+  font-weight: 700;
+}
+
+.el-tree :deep(.is-current .el-tree-node__children .el-tree-node__label) {
+  color: #606266;
+  font-weight: normal;
+}
+
+.selectInput {
+  padding: 0 5px;
+  box-sizing: border-box;
+}
+
+.el-select {
+  width: 100% !important;
+}
+</style>
+
diff --git a/src/views/system/user/user.add.vue b/src/views/system/user/user.add.vue
index 9df400d..10b37e6 100644
--- a/src/views/system/user/user.add.vue
+++ b/src/views/system/user/user.add.vue
@@ -1,7 +1,14 @@
+<!-- 添加修改用户弹窗 -->
 <script lang="ts" setup name="SystemUserAddDialog">
 import type { FormInstance } from 'element-plus'
 import { toTreeList } from '@/utils/structure'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { addUser, updateUser } from '@/api/system/user'
+import { getRoleTreeList } from '@/api/system/role'
 import type { addInfo } from './user_interface'
+import { getDictByCode } from '@/api/system/dict'
+import { RSAencrypt } from '@/utils/security'
+import comTreeSelect from './select.tree.vue'
 const ruleFormRef = ref<FormInstance>()
 const dialogFormVisible = ref<boolean>(false)// 对话框是否显示
 const dialogStatus = ref<string>('')// 对话框类型：create,update
@@ -24,8 +31,9 @@
 const roleProps = reactive({
   parent: 'pid', value: 'id', label: 'name', children: 'children',
 })
+const emits = defineEmits(['resetData'])
 const roleTreeList = ref([])// 角色树列表数据
-const sexList = reactive([{ label: '男', value: '0' }, { label: '女', value: '1' }])// 性别选项
+const sexList = ref([])// 性别选项
 const textMap = reactive<{ update: string; create: string }>({
   update: '编辑用户',
   create: '新增用户',
@@ -35,7 +43,7 @@
     callback(new Error('密码不能为空'))
   } else {
     if (userForm.rePassword !== '') {
-      // ruleFormRef?.validateField('rePassword')
+      ruleFormRef.value.validateField('rePassword')
     }
     callback()
   }
@@ -61,23 +69,6 @@
 })// 前端校验规则
 let roleName = ref<string>()// 角色名，展示用
 const btnLoading = ref<boolean>(false)// 保存按钮的加载中状态
-const submitForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) { return }
-  formEl.validate((valid) => {
-    if (valid) {
-      console.log('submit!')
-    }
-    else {
-      console.log('error submit!')
-      return false
-    }
-  })
-}
-
-const resetForm = (formEl: FormInstance | undefined) => {
-  if (!formEl) { return }
-  formEl.resetFields()
-}
 // 初始化对话框
 const initDialog = (dialogStatusflag: string, row: addInfo = {
   id: '', // 编号
@@ -92,118 +83,133 @@
   birthday: '',
   sex: '', // 性别
 }) => {
+  getDictByCode('sex').then((response) => {
+    sexList.value = response.data
+  })
+  fetchRoleTree()
   dialogStatus.value = dialogStatusflag
   dialogFormVisible.value = true
   btnLoading.value = false
   if (dialogStatus.value === 'create') { // 如果是新增，清除验证
-    // resetForm()
-    // $nextTick(() => {
-    //   $refs['dataForm'].clearValidate()
-    // })
+    userForm.account = row.account
+    userForm.id = row.id
+    userForm.name = row.name
+    userForm.email = row.email
+    userForm.phone = row.phone
+    userForm.deptId = row.deptId
+    userForm.sex = row.sex
+    userForm.birthday = row.birthday
+    userForm.roleid = row.roleid
+    roleName.value = row.roleName
+    resetForm1()
+    nextTick(() => {
+      ruleFormRef.value.clearValidate()
+    })
   } else if (dialogStatus.value === 'update') { // 如果是修改，将row中数据填写到输入框中
-    userForm = {
-      id: row.id, // 编号
-      account: row.account, // 账号
-      name: row.name, // 姓名
-      email: row.email, // 邮箱，
-      phone: row.phone, // 手机号，
-      deptId: row.deptId, // 组织机构编号
-      roleid: row.roleid, // 角色
-      birthday: row.birthday, // 生日
-      sex: row.sex, // 性别
-    }
+    userForm.account = row.account
+    userForm.id = row.id
+    userForm.name = row.name
+    userForm.email = row.email
+    userForm.phone = row.phone
+    userForm.deptId = row.deptId
+    userForm.sex = row.sex
+    userForm.birthday = row.birthday
+    userForm.roleid = row.roleid
     roleName.value = row.roleName
     delete userForm['password']
     delete userForm['rePassword']
   }
 }
+defineExpose({ initDialog })
 // 加载角色树形下拉菜单
 const fetchRoleTree = () => {
-  // getRoleTreeList(listQuery).then((res) => {
-  //   if (res.data.list) { // 将列表转树结构
-  //     roleTreeList.value = toTreeList(res.data.list, '0', true)
-  //   }
-  // })
+  getRoleTreeList().then((res) => {
+    if (res.data.list) { // 将列表转树结构
+      roleTreeList.value = toTreeList(res.data.list, '0', true)
+    }
+  })
 }
 // 重置表单
 const resetForm1 = () => {
-  userForm = {
-    id: '', // 编号
-    account: '', // 账号
-    name: '', // 姓名
-    email: '', // 邮箱，
-    phone: '', // 手机号，
-    deptId: '', // 组织机构编号
-    roleid: '', // 角色
-    password: '', // 密码
-    rePassword: '' // 重复密码
-  }
+  userForm.account = ''
+  userForm.id = ''
+  userForm.name = ''
+  userForm.email = ''
+  userForm.phone = ''
+  userForm.deptId = ''
+  userForm.sex = ''
+  userForm.birthday = ''
+  userForm.roleid = ''
+  userForm.password = ''
+  userForm.rePassword = ''
 }
 // 保存数据
-const saveData = () => {
+const saveData = (formEl: FormInstance | undefined) => {
   if (dialogStatus.value === 'update') {
-    // updateData()
+    updateData()
   } else if (dialogStatus.value === 'create') {
-    // createData()
+    createData()
   }
 }
-// // 新增数据
-// createData: function() {
-//   this.$refs['dataForm'].validate((valid) => {
-//     console.log(this.userForm)
-//     const userForm = JSON.parse(JSON.stringify(this.userForm))
-//     userForm.password = RSAencrypt(userForm.password)
-//     userForm.rePassword = RSAencrypt(userForm.rePassword)
-//     if (valid) {
-//       this.btnLoading = true
-//       addUser(userForm).then(response => {
-//         if (response.code === 200) {
-//           this.$confirm('新增成功，是否继续新增?', '提示', {
-//             confirmButtonText: '是',
-//             cancelButtonText: '否',
-//             type: 'info'
-//           }).then(() => {
-//             this.btnLoading = false
-//             this.resetForm()
-//             this.$nextTick(() => {
-//               this.$refs['dataForm'].clearValidate()
-//             })
-//           }).catch(() => {
-//             this.$emit('watchChild')
-//             this.dialogFormVisible = false
-//           })
-//         }
-//       }).catch(_ => { // 异常情况，loading置为false
-//         this.btnLoading = false
-//       })
-//     }
-//   })
-// },
-// // 修改数据
-// updateData: function() {
-//   this.$refs['dataForm'].validate((valid) => {
-//     if (valid) {
-//       this.btnLoading = true
-//       updateUser(this.userForm).then(response => {
-//         if (response.code === 200) {
-//           this.$message.success('修改成功')
-//           this.$emit('watchChild')
-//           this.dialogFormVisible = false
-//         }
-//       }).catch(_ => { // 异常情况，loading置为false
-//         this.btnLoading = false
-//       })
-//     }
-//   })
-// },
-// cancel: function() {
-//   this.dialogFormVisible = false
-//   this.$emit('watchChild')
-// }
+// 新增数据
+const createData = () => {
+  ruleFormRef.value.validate(async (valid) => {
+    const userForm1 = JSON.parse(JSON.stringify(userForm))
+    userForm1.password = await RSAencrypt(userForm1.password)
+    userForm1.rePassword = await RSAencrypt(userForm1.rePassword)
+    if (valid) {
+      btnLoading.value = true
+      addUser(userForm1).then((response) => {
+        if (response.code === 200) {
+          ElMessageBox.confirm('新增成功，是否继续新增?', '提示', {
+            confirmButtonText: '是',
+            cancelButtonText: '否',
+            type: 'info'
+          }).then(() => {
+            btnLoading.value = false
+            resetForm1()
+            nextTick(() => {
+              ruleFormRef.value.clearValidate()
+            })
+          }).catch(() => {
+            dialogFormVisible.value = false
+            emits('resetData')
+          })
+        }
+      }).catch(() => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+// 修改数据
+const updateData = () => {
+  ruleFormRef.value.validate((valid) => {
+    if (valid) {
+      btnLoading.value = true
+      updateUser(userForm).then((response) => {
+        if (response.code === 200) {
+          ElMessage.success('修改成功')
+          dialogFormVisible.value = false
+          emits('resetData')
+        }
+      }).catch(() => { // 异常情况，loading置为false
+        btnLoading.value = false
+      })
+    }
+  })
+}
+const cancel = (formEl: FormInstance | undefined) => {
+  dialogFormVisible.value = false
+  // resetForm1()
+  ruleFormRef.value.resetFields()
+  emits('resetData')
+}
 </script>
 
 <template>
-  <el-dialog v-model:visible="dialogFormVisible" :title="textMap[dialogStatus]" width="700" append-to-body>
+  <el-dialog v-model="dialogFormVisible" width="700" :title="textMap[dialogStatus]" append-to-body
+    v-if="dialogFormVisible">
     <el-form ref="ruleFormRef" :rules="rules" :model="userForm" label-position="right" label-width="80px">
       <el-row :gutter="20">
         <el-col :span="12">
@@ -221,14 +227,14 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item label="性别" prop="sex">
-            <el-select v-model="userForm.sex" placeholder="请选择">
-              <el-option v-for="item in sexList" :key="item.value" :label="item.label" :value="item.value" />
+            <el-select v-model="userForm.sex" placeholder="请选择" :style="{ width: '240px' }">
+              <el-option v-for="item in sexList" :key="item.id" :label="item.name" :value="item.value" />
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="12">
           <el-form-item label="出生日期" prop="birthday">
-            <el-date-picker v-model="userForm.birthday" type="date" value-format="yyyy-MM-dd" placeholder="选择日期"
+            <el-date-picker v-model="userForm.birthday" type="date" format="YYYY-MM-DD" placeholder="选择日期"
               style="width: 100%;" />
           </el-form-item>
         </el-col>
@@ -248,8 +254,8 @@
       <el-row :gutter="20">
         <el-col :span="12">
           <el-form-item v-if="dialogStatus === 'create'" label="角色" prop="roleid">
-            <select-tree v-model="userForm.roleid" :default-expanded-keys="[userForm.roleid]" :options="roleTreeList"
-              :props="roleProps" />
+            <com-tree-select :options="roleTreeList" v-model="userForm.roleid" placeholder="选择角色"
+              :TreeProps="roleProps" />
           </el-form-item>
           <el-form-item v-else label="角色">
             <el-input v-model="roleName" :disabled="dialogStatus === 'update'" type="text" placeholder="无" />
@@ -275,11 +281,11 @@
         </el-col>
       </el-row>
     </el-form>
-    <div slot="footer" class="dialog-footer">
-      <el-button :loading="btnLoading" type="primary" @click="saveData">
+    <div slot="footer" class="dialog-footer footer">
+      <el-button :loading="btnLoading" type="primary" @click="saveData(ruleFormRef)">
         保存
       </el-button>
-      <el-button @click="">
+      <el-button @click="cancel(ruleFormRef)">
         取消
       </el-button>
     </div>
@@ -287,5 +293,8 @@
 </template>
 
 <style lang="scss" scoped>
-
+.footer {
+  display: flex;
+  justify-content: flex-end;
+}
 </style>
diff --git a/src/views/system/user/user_interface.ts b/src/views/system/user/user_interface.ts
index b312d97..e27a855 100644
--- a/src/views/system/user/user_interface.ts
+++ b/src/views/system/user/user_interface.ts
@@ -60,3 +60,7 @@
   version: string
 
 }
+export interface changePageType {
+  page?: number
+  size?: number
+}