diff --git a/.history/src/api/system/SysSpeedingDept_20250829150502.js b/.history/src/api/system/SysSpeedingDept_20250829150502.js
new file mode 100644
index 0000000..b6033e6
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829150502.js
@@ -0,0 +1,83 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get'
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDept(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions() {
+  return request({
+    url: '/system/levelOptions',
+    method: 'get'
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829150652.js b/.history/src/api/system/SysSpeedingDept_20250829150652.js
new file mode 100644
index 0000000..a17adcc
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829150652.js
@@ -0,0 +1,83 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get'
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDept(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions() {
+  return request({
+    url: '/system/levelOptions',
+    method: 'get'
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829150957.js b/.history/src/api/system/SysSpeedingDept_20250829150957.js
new file mode 100644
index 0000000..a17adcc
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829150957.js
@@ -0,0 +1,83 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get'
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDept(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions() {
+  return request({
+    url: '/system/levelOptions',
+    method: 'get'
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829151054.js b/.history/src/api/system/SysSpeedingDept_20250829151054.js
new file mode 100644
index 0000000..760d878
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829151054.js
@@ -0,0 +1,83 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get'
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions() {
+  return request({
+    url: '/system/levelOptions',
+    method: 'get'
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829151102.js b/.history/src/api/system/SysSpeedingDept_20250829151102.js
new file mode 100644
index 0000000..782981f
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829151102.js
@@ -0,0 +1,83 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get'
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDeptspeedingdept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions() {
+  return request({
+    url: '/system/levelOptions',
+    method: 'get'
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829153002.js b/.history/src/api/system/SysSpeedingDept_20250829153002.js
new file mode 100644
index 0000000..51d29a3
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829153002.js
@@ -0,0 +1,84 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId,data) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get',
+    params:data
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDeptspeedingdept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions() {
+  return request({
+    url: '/system/levelOptions',
+    method: 'get'
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829155141.js b/.history/src/api/system/SysSpeedingDept_20250829155141.js
new file mode 100644
index 0000000..9289516
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829155141.js
@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId,data) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get',
+    params:data
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDeptspeedingdept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    data: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions(data) {
+  return request({
+    url: '/system/parentOptionsByLevel',
+    method: 'get',
+      data: data
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829155224.js b/.history/src/api/system/SysSpeedingDept_20250829155224.js
new file mode 100644
index 0000000..17446aa
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829155224.js
@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId,data) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get',
+    params:data
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDeptspeedingdept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    method: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    method: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions(data) {
+  return request({
+    url: '/system/parentOptionsByLevel',
+    method: 'get',
+    method: data
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829155312.js b/.history/src/api/system/SysSpeedingDept_20250829155312.js
new file mode 100644
index 0000000..a0d459b
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829155312.js
@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId,data) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get',
+    params:data
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDeptspeedingdept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    params: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    params: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions(data) {
+  return request({
+    url: '/system/parentOptionsByLevel',
+    method: 'get',
+    params: data
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829155431.js b/.history/src/api/system/SysSpeedingDept_20250829155431.js
new file mode 100644
index 0000000..ef0e665
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829155431.js
@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId,data) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get',
+    params:data
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDeptspeedingdept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    params: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    params: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions(data) {
+  return request({
+    url: '/system/speedingdept/parentOptionsByLevel',
+    method: 'get',
+    params: data
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/api/system/SysSpeedingDept_20250829155948.js b/.history/src/api/system/SysSpeedingDept_20250829155948.js
new file mode 100644
index 0000000..bfa6e2e
--- /dev/null
+++ b/.history/src/api/system/SysSpeedingDept_20250829155948.js
@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId,data) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get',
+    params:data
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDeptspeedingdept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    params: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions(data) {
+  return request({
+    url: '/system/speedingdept/parentOptionsByLevel',
+    method: 'get',
+    params: data
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/.history/src/views/system/addUser/index_20250828122217.vue b/.history/src/views/system/addUser/index_20250828122217.vue
new file mode 100644
index 0000000..a177da4
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250828122217.vue
@@ -0,0 +1,424 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+           <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node.label)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "label",
+  class: "custtree",
+};
+const data = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+function screen(item) {
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+</script>
+
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171633.vue b/.history/src/views/system/addUser/index_20250829171633.vue
new file mode 100644
index 0000000..2ee0623
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171633.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171658.vue b/.history/src/views/system/addUser/index_20250829171658.vue
new file mode 100644
index 0000000..a177da4
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171658.vue
@@ -0,0 +1,424 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+           <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node.label)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "label",
+  class: "custtree",
+};
+const data = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+function screen(item) {
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+</script>
+
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171705.vue b/.history/src/views/system/addUser/index_20250829171705.vue
new file mode 100644
index 0000000..2ee0623
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171705.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171723.vue b/.history/src/views/system/addUser/index_20250829171723.vue
new file mode 100644
index 0000000..2ee0623
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171723.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171749.vue b/.history/src/views/system/addUser/index_20250829171749.vue
new file mode 100644
index 0000000..84cd7e5
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171749.vue
@@ -0,0 +1,480 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            />
+
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171756.vue b/.history/src/views/system/addUser/index_20250829171756.vue
new file mode 100644
index 0000000..a1de8b7
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171756.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171805.vue b/.history/src/views/system/addUser/index_20250829171805.vue
new file mode 100644
index 0000000..da90317
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171805.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171815.vue b/.history/src/views/system/addUser/index_20250829171815.vue
new file mode 100644
index 0000000..6e3224a
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171815.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171850.vue b/.history/src/views/system/addUser/index_20250829171850.vue
new file mode 100644
index 0000000..6307624
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171850.vue
@@ -0,0 +1,473 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171924.vue b/.history/src/views/system/addUser/index_20250829171924.vue
new file mode 100644
index 0000000..ead7e62
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171924.vue
@@ -0,0 +1,473 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829171954.vue b/.history/src/views/system/addUser/index_20250829171954.vue
new file mode 100644
index 0000000..ead7e62
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829171954.vue
@@ -0,0 +1,473 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829172315.vue b/.history/src/views/system/addUser/index_20250829172315.vue
new file mode 100644
index 0000000..c4fd0d4
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829172315.vue
@@ -0,0 +1,481 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    重置密码
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829172355.vue b/.history/src/views/system/addUser/index_20250829172355.vue
new file mode 100644
index 0000000..521c74c
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829172355.vue
@@ -0,0 +1,489 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                   <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    分配角色
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    重置密码
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829172410.vue b/.history/src/views/system/addUser/index_20250829172410.vue
new file mode 100644
index 0000000..521c74c
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829172410.vue
@@ -0,0 +1,489 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                   <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    分配角色
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    重置密码
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829172419.vue b/.history/src/views/system/addUser/index_20250829172419.vue
new file mode 100644
index 0000000..46ca874
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829172419.vue
@@ -0,0 +1,489 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="240"
+                align="center"
+              >
+                <template #default="scope">
+                   <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    分配角色
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    重置密码
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829173314.vue b/.history/src/views/system/addUser/index_20250829173314.vue
new file mode 100644
index 0000000..7c635ec
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829173314.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="240"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829173318.vue b/.history/src/views/system/addUser/index_20250829173318.vue
new file mode 100644
index 0000000..5d74482
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829173318.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829173543.vue b/.history/src/views/system/addUser/index_20250829173543.vue
new file mode 100644
index 0000000..34527cb
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829173543.vue
@@ -0,0 +1,480 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+  
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+     
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829174415.vue b/.history/src/views/system/addUser/index_20250829174415.vue
new file mode 100644
index 0000000..0e3d490
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829174415.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829174946.vue b/.history/src/views/system/addUser/index_20250829174946.vue
new file mode 100644
index 0000000..13963b1
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829174946.vue
@@ -0,0 +1,483 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getDeptlist() {
+  loading.value = true
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false
+    userList.value = res.rows
+    total.value = res.total
+  })
+}
+
+
+
+
+
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829174955.vue b/.history/src/views/system/addUser/index_20250829174955.vue
new file mode 100644
index 0000000..0f0886e
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829174955.vue
@@ -0,0 +1,483 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getDeptlist() {
+  loading.value = true
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false
+    tableData.value = res.rows
+    total.value = res.total
+  })
+}
+
+
+
+
+
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829175038.vue b/.history/src/views/system/addUser/index_20250829175038.vue
new file mode 100644
index 0000000..38d2afc
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829175038.vue
@@ -0,0 +1,485 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const loading=ref(false)
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getDeptlist() {
+  loading.value = true
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false
+    tableData.value = res.rows
+    total.value = res.total
+  })
+}
+
+
+
+
+
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829175142.vue b/.history/src/views/system/addUser/index_20250829175142.vue
new file mode 100644
index 0000000..a19b551
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829175142.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const loading=ref(false)
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getDeptlist() {
+  loading.value = true
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false
+    tableData.value = res.rows
+    total.value = res.total
+  })
+}
+
+
+
+
+
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829175309.vue b/.history/src/views/system/addUser/index_20250829175309.vue
new file mode 100644
index 0000000..f23bd30
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829175309.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined
+  },
+  rules: {
+    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
+    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(userdata)
+
+const loading=ref(false)
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getDeptlist() {
+  loading.value = true
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false
+    tableData.value = res.rows
+    total.value = res.total
+  })
+}
+
+
+
+
+
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829175438.vue b/.history/src/views/system/addUser/index_20250829175438.vue
new file mode 100644
index 0000000..72fbfae
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829175438.vue
@@ -0,0 +1,481 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getusertlist" />
+
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined
+  },
+  rules: {
+    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
+    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(userdata)
+
+const loading=ref(false)
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false
+    tableData.value = res.rows
+    total.value = res.total
+  })
+}
+
+
+
+
+
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829175622.vue b/.history/src/views/system/addUser/index_20250829175622.vue
new file mode 100644
index 0000000..dd8c0cc
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829175622.vue
@@ -0,0 +1,481 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+              <el-date-picker
+              v-model="dateRange" 
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getusertlist" />
+
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+      <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { changeUserStatus, listUser, resetUserPwd, delUser, getUser, updateUser, addUser, deptTreeSelect } from "@/api/system/user"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance()
+const { sys_normal_disable, sys_user_sex } = proxy.useDict("sys_normal_disable", "sys_user_sex")
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined
+  },
+  rules: {
+    userName: [{ required: true, message: "用户名称不能为空", trigger: "blur" }, { min: 2, max: 20, message: "用户名称长度必须介于 2 和 20 之间", trigger: "blur" }],
+    nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
+    password: [{ required: true, message: "用户密码不能为空", trigger: "blur" }, { min: 5, max: 20, message: "用户密码长度必须介于 5 和 20 之间", trigger: "blur" }, { pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\\ |", trigger: "blur" }],
+    email: [{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }],
+    phonenumber: [{ pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur" }]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(userdata)
+
+const loading=ref(false)
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([])
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(res => {
+    loading.value = false
+    tableData.value = res.rows
+    total.value = res.total
+  })
+}
+
+
+
+
+
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829175639.vue b/.history/src/views/system/addUser/index_20250829175639.vue
new file mode 100644
index 0000000..2a7db77
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829175639.vue
@@ -0,0 +1,527 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (pageNum - 1) * pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829175905.vue b/.history/src/views/system/addUser/index_20250829175905.vue
new file mode 100644
index 0000000..7e27df7
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829175905.vue
@@ -0,0 +1,528 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (pageNum - 1) * pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  // listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+  //   (res) => {
+  //     console.log()
+  //     loading.value = false;
+  //     tableData.value = res.rows;
+  //     total.value = res.total;
+  //   }
+  // );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829175926.vue b/.history/src/views/system/addUser/index_20250829175926.vue
new file mode 100644
index 0000000..96ffdc9
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829175926.vue
@@ -0,0 +1,527 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (pageNum - 1) * pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  // listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+  //   (res) => {
+  //     console.log()
+  //     loading.value = false;
+  //     tableData.value = res.rows;
+  //     total.value = res.total;
+  //   }
+  // );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180003.vue b/.history/src/views/system/addUser/index_20250829180003.vue
new file mode 100644
index 0000000..0c25c49
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180003.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (pageNum - 1) * pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  // listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+  //   (res) => {
+  //     console.log()
+  //     loading.value = false;
+  //     tableData.value = res.rows;
+  //     total.value = res.total;
+  //   }
+  // );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180023.vue b/.history/src/views/system/addUser/index_20250829180023.vue
new file mode 100644
index 0000000..cdaa264
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180023.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (pageNum - 1) * pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180115.vue b/.history/src/views/system/addUser/index_20250829180115.vue
new file mode 100644
index 0000000..a689216
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180115.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (pageNum - 1) * pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180156.vue b/.history/src/views/system/addUser/index_20250829180156.vue
new file mode 100644
index 0000000..cc90213
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180156.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180226.vue b/.history/src/views/system/addUser/index_20250829180226.vue
new file mode 100644
index 0000000..eeb166f
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180226.vue
@@ -0,0 +1,518 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180249.vue b/.history/src/views/system/addUser/index_20250829180249.vue
new file mode 100644
index 0000000..2c4fb05
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180249.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="deptName" label="姓名" />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180341.vue b/.history/src/views/system/addUser/index_20250829180341.vue
new file mode 100644
index 0000000..263ec32
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180341.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180405.vue b/.history/src/views/system/addUser/index_20250829180405.vue
new file mode 100644
index 0000000..90d4014
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180405.vue
@@ -0,0 +1,519 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180518.vue b/.history/src/views/system/addUser/index_20250829180518.vue
new file mode 100644
index 0000000..82c653e
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180518.vue
@@ -0,0 +1,520 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180548.vue b/.history/src/views/system/addUser/index_20250829180548.vue
new file mode 100644
index 0000000..caee3d9
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180548.vue
@@ -0,0 +1,520 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180932.vue b/.history/src/views/system/addUser/index_20250829180932.vue
new file mode 100644
index 0000000..e0c8817
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180932.vue
@@ -0,0 +1,521 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829180949.vue b/.history/src/views/system/addUser/index_20250829180949.vue
new file mode 100644
index 0000000..e0c8817
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829180949.vue
@@ -0,0 +1,521 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829181113.vue b/.history/src/views/system/addUser/index_20250829181113.vue
new file mode 100644
index 0000000..b1c1b90
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829181113.vue
@@ -0,0 +1,521 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="选择部门">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829181343.vue b/.history/src/views/system/addUser/index_20250829181343.vue
new file mode 100644
index 0000000..bfe63a9
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829181343.vue
@@ -0,0 +1,524 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+       <el-form-item v-if="form.userId == undefined" label="用户名称" prop="userName">
+              <el-input v-model="form.userName" placeholder="请输入用户名称" maxlength="30" />
+            </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="选择部门">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829181359.vue b/.history/src/views/system/addUser/index_20250829181359.vue
new file mode 100644
index 0000000..f9ed371
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829181359.vue
@@ -0,0 +1,524 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{ (queryParams.pageNum - 1) * queryParams.pageSize + $index + 1 }}
+                </template>
+              </el-table-column>
+              <el-table-column label="用户编号" align="center" key="userId" prop="userId" />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+               <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+       <el-form-item v-if="form.userId == undefined" label="用户密码" prop="password">
+              <el-input v-model="form.password" placeholder="请输入用户密码" type="password" maxlength="20" show-password />
+            </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="选择部门">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0)
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log()
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829181444.vue b/.history/src/views/system/addUser/index_20250829181444.vue
new file mode 100644
index 0000000..12b3d85
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829181444.vue
@@ -0,0 +1,540 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+        <el-select v-model="form.region" placeholder="选择部门">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829181753.vue b/.history/src/views/system/addUser/index_20250829181753.vue
new file mode 100644
index 0000000..1c5fc79
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829181753.vue
@@ -0,0 +1,548 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">普通角色</el-radio>
+          <el-radio :value="2">管理员</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182056.vue b/.history/src/views/system/addUser/index_20250829182056.vue
new file mode 100644
index 0000000..b3860cd
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182056.vue
@@ -0,0 +1,549 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+          
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182115.vue b/.history/src/views/system/addUser/index_20250829182115.vue
new file mode 100644
index 0000000..a81e64b
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182115.vue
@@ -0,0 +1,549 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" @change="elradiogroup">
+
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+          
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182122.vue b/.history/src/views/system/addUser/index_20250829182122.vue
new file mode 100644
index 0000000..f7fed87
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182122.vue
@@ -0,0 +1,547 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" @change="elradiogroup">
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182128.vue b/.history/src/views/system/addUser/index_20250829182128.vue
new file mode 100644
index 0000000..4ecb0f4
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182128.vue
@@ -0,0 +1,547 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182406.vue b/.history/src/views/system/addUser/index_20250829182406.vue
new file mode 100644
index 0000000..fe9941a
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182406.vue
@@ -0,0 +1,561 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182427.vue b/.history/src/views/system/addUser/index_20250829182427.vue
new file mode 100644
index 0000000..25135b0
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182427.vue
@@ -0,0 +1,578 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182521.vue b/.history/src/views/system/addUser/index_20250829182521.vue
new file mode 100644
index 0000000..4476ffb
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182521.vue
@@ -0,0 +1,578 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182547.vue b/.history/src/views/system/addUser/index_20250829182547.vue
new file mode 100644
index 0000000..5392927
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182547.vue
@@ -0,0 +1,579 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182653.vue b/.history/src/views/system/addUser/index_20250829182653.vue
new file mode 100644
index 0000000..0f99fb8
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182653.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182740.vue b/.history/src/views/system/addUser/index_20250829182740.vue
new file mode 100644
index 0000000..495481e
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182740.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="name">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="name">
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="deptLevel">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182815.vue b/.history/src/views/system/addUser/index_20250829182815.vue
new file mode 100644
index 0000000..f971f77
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182815.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="userName">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="phonenumber" >
+        <el-input v-model="form.phonenumber" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182919.vue b/.history/src/views/system/addUser/index_20250829182919.vue
new file mode 100644
index 0000000..ef12fd9
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182919.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="userName">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182926.vue b/.history/src/views/system/addUser/index_20250829182926.vue
new file mode 100644
index 0000000..588217f
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182926.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829182937.vue b/.history/src/views/system/addUser/index_20250829182937.vue
new file mode 100644
index 0000000..9682998
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829182937.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829183037.vue b/.history/src/views/system/addUser/index_20250829183037.vue
new file mode 100644
index 0000000..dde6528
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829183037.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829183245.vue b/.history/src/views/system/addUser/index_20250829183245.vue
new file mode 100644
index 0000000..d8295b6
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829183245.vue
@@ -0,0 +1,592 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829183334.vue b/.history/src/views/system/addUser/index_20250829183334.vue
new file mode 100644
index 0000000..c137762
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829183334.vue
@@ -0,0 +1,593 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829183339.vue b/.history/src/views/system/addUser/index_20250829183339.vue
new file mode 100644
index 0000000..c137762
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829183339.vue
@@ -0,0 +1,593 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptLevel = 1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829183439.vue b/.history/src/views/system/addUser/index_20250829183439.vue
new file mode 100644
index 0000000..90925ae
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829183439.vue
@@ -0,0 +1,589 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829183614.vue b/.history/src/views/system/addUser/index_20250829183614.vue
new file mode 100644
index 0000000..d71060c
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829183614.vue
@@ -0,0 +1,597 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829183823.vue b/.history/src/views/system/addUser/index_20250829183823.vue
new file mode 100644
index 0000000..8c3ca18
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829183823.vue
@@ -0,0 +1,597 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829183932.vue b/.history/src/views/system/addUser/index_20250829183932.vue
new file mode 100644
index 0000000..f4a2652
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829183932.vue
@@ -0,0 +1,597 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184011.vue b/.history/src/views/system/addUser/index_20250829184011.vue
new file mode 100644
index 0000000..e0d7f6c
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184011.vue
@@ -0,0 +1,599 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+              @keydown="listSearch"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184149.vue b/.history/src/views/system/addUser/index_20250829184149.vue
new file mode 100644
index 0000000..f71579f
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184149.vue
@@ -0,0 +1,600 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+              @keydown="listSearch"
+              @blur="listSearch"
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184237.vue b/.history/src/views/system/addUser/index_20250829184237.vue
new file mode 100644
index 0000000..f47150e
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184237.vue
@@ -0,0 +1,600 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184411.vue b/.history/src/views/system/addUser/index_20250829184411.vue
new file mode 100644
index 0000000..ddfbeab
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184411.vue
@@ -0,0 +1,601 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184606.vue b/.history/src/views/system/addUser/index_20250829184606.vue
new file mode 100644
index 0000000..7ab87e5
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184606.vue
@@ -0,0 +1,615 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="handleUpdate(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          dialogVisible.value = false
+          getList()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          dialogVisible.value = false
+          getList()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId || ids.value
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    dialogVisible.value = true
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184615.vue b/.history/src/views/system/addUser/index_20250829184615.vue
new file mode 100644
index 0000000..2ce25f8
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184615.vue
@@ -0,0 +1,615 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="handleUpdate(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId || ids.value
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    dialogVisible.value = true
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184737.vue b/.history/src/views/system/addUser/index_20250829184737.vue
new file mode 100644
index 0000000..9b216ba
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184737.vue
@@ -0,0 +1,625 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="phonenumber"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="handleUpdate(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                   @click="handleDelete(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId || ids.value
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    dialogVisible.value = true
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184801.vue b/.history/src/views/system/addUser/index_20250829184801.vue
new file mode 100644
index 0000000..1b711b4
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184801.vue
@@ -0,0 +1,625 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="userName"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="userName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="handleUpdate(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                   @click="handleDelete(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId || ids.value
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    dialogVisible.value = true
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184822.vue b/.history/src/views/system/addUser/index_20250829184822.vue
new file mode 100644
index 0000000..cc780ed
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184822.vue
@@ -0,0 +1,625 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="userName"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="nickName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="handleUpdate(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                   @click="handleDelete(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId || ids.value
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    dialogVisible.value = true
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184904.vue b/.history/src/views/system/addUser/index_20250829184904.vue
new file mode 100644
index 0000000..690d131
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184904.vue
@@ -0,0 +1,626 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="userName"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="nickName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="handleUpdate(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                   @click="handleDelete(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId || ids.value
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    dialogVisible.value = true
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829184954.vue b/.history/src/views/system/addUser/index_20250829184954.vue
new file mode 100644
index 0000000..73f027d
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829184954.vue
@@ -0,0 +1,626 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="userName"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="nickName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="handleUpdate(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                   @click="handleDelete(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  changeUserStatus,
+  listUser,
+  resetUserPwd,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId || ids.value
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    dialogVisible.value = true
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185227.vue b/.history/src/views/system/addUser/index_20250829185227.vue
new file mode 100644
index 0000000..293a373
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185227.vue
@@ -0,0 +1,624 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+               @clear="listSearch"
+               @change="listSearch"
+               show-confirm="true"
+              
+            />
+            <el-button
+              type="primary"
+              @click="handleAdd"
+              :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes :horizontal="appStore.device === 'mobile'" class="container">
+          <pane size="16">
+                  <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              v-loading="loading"
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+                <template #default="{ row, $index }">
+                  {{
+                    (queryParams.pageNum - 1) * queryParams.pageSize +
+                    $index +
+                    1
+                  }}
+                </template>
+              </el-table-column>
+              <el-table-column
+                label="用户编号"
+                align="center"
+                key="userId"
+                prop="userId"
+              />
+              <el-table-column
+                prop="userName"
+                label="账号"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="nickName" label="姓名" />
+              <el-table-column prop="dept.deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="handleUpdate(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                   @click="handleDelete(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="queryParams.pageNum"
+              v-model:limit="queryParams.pageSize"
+              @pagination="getusertlist"
+            />
+          </div>
+          </pane>
+        </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName" >
+        <el-input v-model="form.userName"  autocomplete="off"/>
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+         <el-tree-select v-model="form.deptId" :data="enabledDeptOptions" :props="{ value: 'id', label: 'label', children: 'children' }" value-key="id" placeholder="请选择归属部门" clearable check-strictly />
+         
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds" >
+           <el-radio  :key="item.roleId"  :value="item.roleId" :disabled="item.status == 1" v-for="item in roleOptions">{{ item.roleName }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from '@/store/modules/app'
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore()
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl=ref()
+const loading = ref(false);
+const roleOptions = ref([])
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title=ref("")
+const tableData = ref([]);
+const deptOptions = ref(undefined)
+const enabledDeptOptions = ref(undefined)
+const postOptions=ref([])
+const initPassword = ref(undefined)
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      } else {
+        addUser(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          dialogVisible.value = false
+          getusertlist()
+        })
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+ getDeptTree()
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then(response => {
+    deptOptions.value = response.data
+    enabledDeptOptions.value = filterDisabledDept(JSON.parse(JSON.stringify(response.data)))
+  })
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter(dept => {
+    if (dept.disabled) {
+      return false
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children)
+    }
+    return true
+  })
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+
+  reset()
+  getUser().then(response => {
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    dialogVisible.value = true
+    title.value = "添加用户"
+    form.value.password = initPassword.value
+  })
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: []
+  }
+  proxy.resetForm("userRef")
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e &&  e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const userId = row.userId || ids.value
+  getUser(userId).then(response => {
+    form.value = response.data
+    postOptions.value = response.posts
+    roleOptions.value = response.roles
+    form.value.postIds = response.postIds
+    form.value.roleIds = response.roleIds
+    dialogVisible.value = true
+    title.value = "修改用户"
+    form.password = ""
+  })
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value
+  proxy.$modal.confirm('是否确认删除用户编号为"' + userIds + '"的数据项？').then(function () {
+    return delUser(userIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+onMounted(() => {
+  getDeptTree()
+  getusertlist()
+  proxy.getConfigKey("sys.user.initPassword").then(response => {
+    initPassword.value = response.msg
+  })
+})
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185253.vue b/.history/src/views/system/addUser/index_20250829185253.vue
new file mode 100644
index 0000000..a0eb5cb
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185253.vue
@@ -0,0 +1,639 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="enabledDeptOptions"
+          :props="{ value: 'id', label: 'label', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185556.vue b/.history/src/views/system/addUser/index_20250829185556.vue
new file mode 100644
index 0000000..e0c49c3
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185556.vue
@@ -0,0 +1,640 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="enabledDeptOptions"
+          :props="{ value: 'id', label: 'label', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185652.vue b/.history/src/views/system/addUser/index_20250829185652.vue
new file mode 100644
index 0000000..a13136b
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185652.vue
@@ -0,0 +1,640 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="enabledDeptOptions"
+          :props="{ value: 'id', label: 'label', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185734.vue b/.history/src/views/system/addUser/index_20250829185734.vue
new file mode 100644
index 0000000..95d39f7
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185734.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="enabledDeptOptions"
+          :props="{ value: 'id', label: 'label', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185839.vue b/.history/src/views/system/addUser/index_20250829185839.vue
new file mode 100644
index 0000000..11f5e62
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185839.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'label', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185913.vue b/.history/src/views/system/addUser/index_20250829185913.vue
new file mode 100644
index 0000000..883ac8b
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185913.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185924.vue b/.history/src/views/system/addUser/index_20250829185924.vue
new file mode 100644
index 0000000..28798a8
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185924.vue
@@ -0,0 +1,642 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        {{  form.deptId}}
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829185928.vue b/.history/src/views/system/addUser/index_20250829185928.vue
new file mode 100644
index 0000000..883ac8b
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829185928.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser(form.value).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190124.vue b/.history/src/views/system/addUser/index_20250829190124.vue
new file mode 100644
index 0000000..6712a74
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190124.vue
@@ -0,0 +1,642 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190137.vue b/.history/src/views/system/addUser/index_20250829190137.vue
new file mode 100644
index 0000000..cec27ee
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190137.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190333.vue b/.history/src/views/system/addUser/index_20250829190333.vue
new file mode 100644
index 0000000..484c396
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190333.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190435.vue b/.history/src/views/system/addUser/index_20250829190435.vue
new file mode 100644
index 0000000..a886211
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190435.vue
@@ -0,0 +1,640 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == node.label && deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190525.vue b/.history/src/views/system/addUser/index_20250829190525.vue
new file mode 100644
index 0000000..dc460dd
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190525.vue
@@ -0,0 +1,640 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: name == queryParams.deptId == data.deptId
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190603.vue b/.history/src/views/system/addUser/index_20250829190603.vue
new file mode 100644
index 0000000..5e3c8fe
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190603.vue
@@ -0,0 +1,641 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                    
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190831.vue b/.history/src/views/system/addUser/index_20250829190831.vue
new file mode 100644
index 0000000..78e15a8
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190831.vue
@@ -0,0 +1,647 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                    
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      res.rows=res.rows.map(r=>{
+        if(r.roles && r.roles.length){
+          r.roles=r.roles[0]
+        }
+        return r;
+      })
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190913.vue b/.history/src/views/system/addUser/index_20250829190913.vue
new file mode 100644
index 0000000..2b270ee
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190913.vue
@@ -0,0 +1,648 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                    
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                      {{ scope.row }}
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      res.rows=res.rows.map(r=>{
+        if(r.roles && r.roles.length){
+          r.roles=r.roles[0]
+        }
+        return r;
+      })
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829190938.vue b/.history/src/views/system/addUser/index_20250829190938.vue
new file mode 100644
index 0000000..8faec30
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829190938.vue
@@ -0,0 +1,648 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                    
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                      {{ scope.row.roles }}
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("修改成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      } else {
+        addUser({...form.value,roleIds:[form.value.roleIds]}).then((response) => {
+          proxy.$modal.msgSuccess("新增成功");
+          dialogVisible.value = false;
+          getusertlist();
+        });
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+      console.log();
+      res.rows=res.rows.map(r=>{
+        if(r.roles && r.roles.length){
+          r.roles=r.roles[0]
+        }
+        return r;
+      })
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191109.vue b/.history/src/views/system/addUser/index_20250829191109.vue
new file mode 100644
index 0000000..3a164a9
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191109.vue
@@ -0,0 +1,633 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                      {{ scope.row.roles }}
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes";
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds;
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191127.vue b/.history/src/views/system/addUser/index_20250829191127.vue
new file mode 100644
index 0000000..1434a2b
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191127.vue
@@ -0,0 +1,633 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                      {{ scope.row.roles }}
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes";
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191153.vue b/.history/src/views/system/addUser/index_20250829191153.vue
new file mode 100644
index 0000000..356a4a5
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191153.vue
@@ -0,0 +1,632 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes";
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191224.vue b/.history/src/views/system/addUser/index_20250829191224.vue
new file mode 100644
index 0000000..573c3ec
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191224.vue
@@ -0,0 +1,633 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <el-table-column prop="dept.deptName" label="角色" />
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes";
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191314.vue b/.history/src/views/system/addUser/index_20250829191314.vue
new file mode 100644
index 0000000..7a1a825
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191314.vue
@@ -0,0 +1,633 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes";
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191517.vue b/.history/src/views/system/addUser/index_20250829191517.vue
new file mode 100644
index 0000000..801c68c
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191517.vue
@@ -0,0 +1,634 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191600.vue b/.history/src/views/system/addUser/index_20250829191600.vue
new file mode 100644
index 0000000..e4eb834
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191600.vue
@@ -0,0 +1,634 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+
+
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191655.vue b/.history/src/views/system/addUser/index_20250829191655.vue
new file mode 100644
index 0000000..168e7e4
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191655.vue
@@ -0,0 +1,634 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+import useAppStore from "@/store/modules/app";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import { ElMessageBox } from "element-plus";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+
+
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829191925.vue b/.history/src/views/system/addUser/index_20250829191925.vue
new file mode 100644
index 0000000..7832c89
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829191925.vue
@@ -0,0 +1,636 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import { ElMessageBox } from "element-plus";
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+
+
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829192120.vue b/.history/src/views/system/addUser/index_20250829192120.vue
new file mode 100644
index 0000000..6061d0a
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829192120.vue
@@ -0,0 +1,638 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import { ElMessageBox } from "element-plus";
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: [],
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+
+
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829192239.vue b/.history/src/views/system/addUser/index_20250829192239.vue
new file mode 100644
index 0000000..d245763
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829192239.vue
@@ -0,0 +1,638 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import { ElMessageBox } from "element-plus";
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: "",
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+
+
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/addUser/index_20250829192602.vue b/.history/src/views/system/addUser/index_20250829192602.vue
new file mode 100644
index 0000000..36339a0
--- /dev/null
+++ b/.history/src/views/system/addUser/index_20250829192602.vue
@@ -0,0 +1,642 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">成员</div>
+          <div class="r">
+            <el-input
+              style="width: 240px"
+              placeholder="输入姓名/电话"
+              :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-date-picker
+              v-model="dateRange"
+              type="daterange"
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
+            />
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
+              >添加成员</el-button
+            >
+          </div>
+        </div>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
+                  </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
+      </el-form-item>
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
+      </el-form-item>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
+      </el-form-item>
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import { ElMessageBox } from "element-plus";
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
+
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
+  },
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
+      {
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
+      },
+      {
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
+      },
+    ],
+    email: [
+      {
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      },
+    ],
+  },
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
+
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: "",
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+
+
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+       .el-tree-node.is-current > .el-tree-node__content{
+        color: inherit;
+        background-color: inherit !important;
+      }
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250828121307.vue b/.history/src/views/system/departmentManagement/index_20250828121307.vue
new file mode 100644
index 0000000..1d54862
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250828121307.vue
@@ -0,0 +1,419 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node.label)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "label",
+  class: "custtree",
+};
+const data = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+function screen(item) {
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829150829.vue b/.history/src/views/system/departmentManagement/index_20250829150829.vue
new file mode 100644
index 0000000..d63ea5f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829150829.vue
@@ -0,0 +1,432 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node.label)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree } from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "label",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829150932.vue b/.history/src/views/system/departmentManagement/index_20250829150932.vue
new file mode 100644
index 0000000..d63ea5f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829150932.vue
@@ -0,0 +1,432 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node.label)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree } from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "label",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829151213.vue b/.history/src/views/system/departmentManagement/index_20250829151213.vue
new file mode 100644
index 0000000..93bc4c8
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829151213.vue
@@ -0,0 +1,432 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node.label)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree } from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829151303.vue b/.history/src/views/system/departmentManagement/index_20250829151303.vue
new file mode 100644
index 0000000..4251ad9
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829151303.vue
@@ -0,0 +1,432 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node.label)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829151317.vue b/.history/src/views/system/departmentManagement/index_20250829151317.vue
new file mode 100644
index 0000000..155bd50
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829151317.vue
@@ -0,0 +1,432 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829151334.vue b/.history/src/views/system/departmentManagement/index_20250829151334.vue
new file mode 100644
index 0000000..88240ad
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829151334.vue
@@ -0,0 +1,433 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  console.log(item)
+  name.value = item;
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829151442.vue b/.history/src/views/system/departmentManagement/index_20250829151442.vue
new file mode 100644
index 0000000..9a7c800
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829151442.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(node)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  console.log(item)
+
+  name.value = item;
+  getDept(item.id)
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829151537.vue b/.history/src/views/system/departmentManagement/index_20250829151537.vue
new file mode 100644
index 0000000..f8af9ac
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829151537.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  console.log(item)
+
+  name.value = item;
+  getDept(item.id)
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829151622.vue b/.history/src/views/system/departmentManagement/index_20250829151622.vue
new file mode 100644
index 0000000..21e6f1f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829151622.vue
@@ -0,0 +1,435 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  console.log(item)
+
+  name.value = item.deptName;
+  getDept(item.deptId)
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829151647.vue b/.history/src/views/system/departmentManagement/index_20250829151647.vue
new file mode 100644
index 0000000..1409c49
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829151647.vue
@@ -0,0 +1,433 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data1 = [
+  {
+    label: "内蒙总队",
+    children: [
+      {
+        label:
+          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
+        children: [
+          {
+            label: "Level two 1-1",
+            children: [
+              {
+                label: "Level three 1-1-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 2",
+        children: [
+          {
+            label: "Level two 2-1",
+            children: [
+              {
+                label: "Level three 2-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 2-2",
+            children: [
+              {
+                label: "Level three 2-2-1",
+              },
+            ],
+          },
+        ],
+      },
+      {
+        label: "Level one 3",
+        children: [
+          {
+            label: "Level two 3-1",
+            children: [
+              {
+                label: "Level three 3-1-1",
+              },
+            ],
+          },
+          {
+            label: "Level two 3-2",
+            children: [
+              {
+                label: "Level three 3-2-1",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  getDept(item.deptId)
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+   })
+}
+
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829152124.vue b/.history/src/views/system/departmentManagement/index_20250829152124.vue
new file mode 100644
index 0000000..7bf8ca0
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829152124.vue
@@ -0,0 +1,382 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = [
+  {
+    date: "2016-05-03",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-02",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-04",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+  {
+    date: "2016-05-01",
+    name: "Tom",
+    address: "No. 189, Grove St, Los Angeles",
+  },
+];
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+
+function getDeptlist(){
+  getDept(deptId.value)
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829152219.vue b/.history/src/views/system/departmentManagement/index_20250829152219.vue
new file mode 100644
index 0000000..8242530
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829152219.vue
@@ -0,0 +1,363 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+
+
+
+
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+
+function getDeptlist(){
+  getDept(deptId.value).then(res=>{
+    tableData.values=res.data;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829152241.vue b/.history/src/views/system/departmentManagement/index_20250829152241.vue
new file mode 100644
index 0000000..c042d2a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829152241.vue
@@ -0,0 +1,358 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="Zone one" value="shanghai" />
+          <el-option label="Zone two" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value).then(res=>{
+    tableData.values=res.data;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829152431.vue b/.history/src/views/system/departmentManagement/index_20250829152431.vue
new file mode 100644
index 0000000..5db7a48
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829152431.vue
@@ -0,0 +1,360 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">Sponsor</el-radio>
+          <el-radio value="Venue">Venue</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value).then(res=>{
+    tableData.values=res.data;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829152537.vue b/.history/src/views/system/departmentManagement/index_20250829152537.vue
new file mode 100644
index 0000000..7aa92f8
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829152537.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value).then(res=>{
+    tableData.values=res.data;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829152700.vue b/.history/src/views/system/departmentManagement/index_20250829152700.vue
new file mode 100644
index 0000000..6f4e83a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829152700.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value).then(res=>{
+    tableData.values=res.data;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829152722.vue b/.history/src/views/system/departmentManagement/index_20250829152722.vue
new file mode 100644
index 0000000..6f4e83a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829152722.vue
@@ -0,0 +1,362 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getList"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value).then(res=>{
+    tableData.values=res.data;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153050.vue b/.history/src/views/system/departmentManagement/index_20250829153050.vue
new file mode 100644
index 0000000..07cd705
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153050.vue
@@ -0,0 +1,363 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(90);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.values=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153126.vue b/.history/src/views/system/departmentManagement/index_20250829153126.vue
new file mode 100644
index 0000000..25a685a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153126.vue
@@ -0,0 +1,363 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.values=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153407.vue b/.history/src/views/system/departmentManagement/index_20250829153407.vue
new file mode 100644
index 0000000..bb17bea
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153407.vue
@@ -0,0 +1,363 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.values=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153408.vue b/.history/src/views/system/departmentManagement/index_20250829153408.vue
new file mode 100644
index 0000000..ebd4ebe
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153408.vue
@@ -0,0 +1,363 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.values=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153422.vue b/.history/src/views/system/departmentManagement/index_20250829153422.vue
new file mode 100644
index 0000000..abe9ecd
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153422.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          {{ tableData }}
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.values=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153441.vue b/.history/src/views/system/departmentManagement/index_20250829153441.vue
new file mode 100644
index 0000000..1196f0f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153441.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index" sortable label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153506.vue b/.history/src/views/system/departmentManagement/index_20250829153506.vue
new file mode 100644
index 0000000..9498a21
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153506.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="name" label="部门ID" width="120" align="center" />
+              <el-table-column prop="address" label="部门名称" />
+               <el-table-column  prop="date" label="添加时间" sortable align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153534.vue b/.history/src/views/system/departmentManagement/index_20250829153534.vue
new file mode 100644
index 0000000..1e60c68
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153534.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="140" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153546.vue b/.history/src/views/system/departmentManagement/index_20250829153546.vue
new file mode 100644
index 0000000..81440ce
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153546.vue
@@ -0,0 +1,364 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829153742.vue b/.history/src/views/system/departmentManagement/index_20250829153742.vue
new file mode 100644
index 0000000..e5b3c1f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829153742.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.name" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.resource" @change="">
+          <el-radio value="Sponsor">总队</el-radio>
+          <el-radio value="Venue">支队</el-radio>
+          <el-radio value="Venue">大队</el-radio>
+          <el-radio value="Venue">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154109.vue b/.history/src/views/system/departmentManagement/index_20250829154109.vue
new file mode 100644
index 0000000..960e934
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154109.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154228.vue b/.history/src/views/system/departmentManagement/index_20250829154228.vue
new file mode 100644
index 0000000..6e0974a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154228.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154246.vue b/.history/src/views/system/departmentManagement/index_20250829154246.vue
new file mode 100644
index 0000000..d413844
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154246.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154307.vue b/.history/src/views/system/departmentManagement/index_20250829154307.vue
new file mode 100644
index 0000000..d413844
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154307.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(10);
+const pageSize = ref(1);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154322.vue b/.history/src/views/system/departmentManagement/index_20250829154322.vue
new file mode 100644
index 0000000..8d61722
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154322.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.desc" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154408.vue b/.history/src/views/system/departmentManagement/index_20250829154408.vue
new file mode 100644
index 0000000..f6d6cca
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154408.vue
@@ -0,0 +1,365 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154439.vue b/.history/src/views/system/departmentManagement/index_20250829154439.vue
new file mode 100644
index 0000000..35fcf67
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154439.vue
@@ -0,0 +1,369 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+  
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154541.vue b/.history/src/views/system/departmentManagement/index_20250829154541.vue
new file mode 100644
index 0000000..fa49c57
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154541.vue
@@ -0,0 +1,374 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:"",
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154819.vue b/.history/src/views/system/departmentManagement/index_20250829154819.vue
new file mode 100644
index 0000000..4c977ac
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154819.vue
@@ -0,0 +1,378 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    name:{
+        required: true,
+         message: 'Please select Activity zone',
+      trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+
+  levelOptions(form.value.deptLevel).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154922.vue b/.history/src/views/system/departmentManagement/index_20250829154922.vue
new file mode 100644
index 0000000..4b8127f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154922.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="name">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+
+  levelOptions(form.value.deptLevel).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829154951.vue b/.history/src/views/system/departmentManagement/index_20250829154951.vue
new file mode 100644
index 0000000..ad83b4e
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829154951.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio value="1">总队</el-radio>
+          <el-radio value="2">支队</el-radio>
+          <el-radio value="3">大队</el-radio>
+          <el-radio value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+
+  levelOptions(form.value.deptLevel).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155010.vue b/.history/src/views/system/departmentManagement/index_20250829155010.vue
new file mode 100644
index 0000000..0c0a7aa
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155010.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="please select your zone">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+
+  levelOptions(form.value.deptLevel).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155018.vue b/.history/src/views/system/departmentManagement/index_20250829155018.vue
new file mode 100644
index 0000000..5b2bfa5
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155018.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+
+  levelOptions(form.value.deptLevel).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155050.vue b/.history/src/views/system/departmentManagement/index_20250829155050.vue
new file mode 100644
index 0000000..e8fda68
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155050.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+
+  levelOptions(form.value.deptLevel).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155114.vue b/.history/src/views/system/departmentManagement/index_20250829155114.vue
new file mode 100644
index 0000000..dae440e
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155114.vue
@@ -0,0 +1,383 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel} ).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155155.vue b/.history/src/views/system/departmentManagement/index_20250829155155.vue
new file mode 100644
index 0000000..89ccffc
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155155.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel} ).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155206.vue b/.history/src/views/system/departmentManagement/index_20250829155206.vue
new file mode 100644
index 0000000..14e381a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155206.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155346.vue b/.history/src/views/system/departmentManagement/index_20250829155346.vue
new file mode 100644
index 0000000..14e381a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155346.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155633.vue b/.history/src/views/system/departmentManagement/index_20250829155633.vue
new file mode 100644
index 0000000..c9fd22d
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155633.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+          <el-option label="总队" value="shanghai" />
+          <el-option label="支队" value="beijing" />
+          <el-option label="大队" value="beijing" />
+          <el-option label="中队" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155738.vue b/.history/src/views/system/departmentManagement/index_20250829155738.vue
new file mode 100644
index 0000000..e1eaf7e
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155738.vue
@@ -0,0 +1,381 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829155905.vue b/.history/src/views/system/departmentManagement/index_20250829155905.vue
new file mode 100644
index 0000000..7dc3fb7
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829155905.vue
@@ -0,0 +1,385 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160035.vue b/.history/src/views/system/departmentManagement/index_20250829160035.vue
new file mode 100644
index 0000000..31c701d
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160035.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1">
+        <el-select v-model="form.region" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160133.vue b/.history/src/views/system/departmentManagement/index_20250829160133.vue
new file mode 100644
index 0000000..03a653d
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160133.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160234.vue b/.history/src/views/system/departmentManagement/index_20250829160234.vue
new file mode 100644
index 0000000..d523dfe
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160234.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160310.vue b/.history/src/views/system/departmentManagement/index_20250829160310.vue
new file mode 100644
index 0000000..d523dfe
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160310.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160320.vue b/.history/src/views/system/departmentManagement/index_20250829160320.vue
new file mode 100644
index 0000000..d523dfe
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160320.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160321.vue b/.history/src/views/system/departmentManagement/index_20250829160321.vue
new file mode 100644
index 0000000..d523dfe
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160321.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160350.vue b/.history/src/views/system/departmentManagement/index_20250829160350.vue
new file mode 100644
index 0000000..c462560
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160350.vue
@@ -0,0 +1,387 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="deptName" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160405.vue b/.history/src/views/system/departmentManagement/index_20250829160405.vue
new file mode 100644
index 0000000..b32aa75
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160405.vue
@@ -0,0 +1,387 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+            
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160421.vue b/.history/src/views/system/departmentManagement/index_20250829160421.vue
new file mode 100644
index 0000000..fbb5089
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160421.vue
@@ -0,0 +1,386 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="handleClick">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160527.vue b/.history/src/views/system/departmentManagement/index_20250829160527.vue
new file mode 100644
index 0000000..2d0f8ce
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160527.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default>
+                        <el-button link type="primary" size="small" @click="editshow()">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+
+// 编辑
+function editshow(item){
+
+}
+
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160606.vue b/.history/src/views/system/departmentManagement/index_20250829160606.vue
new file mode 100644
index 0000000..dfc95fe
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160606.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="editshow(scope.rows)">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+
+// 编辑
+function editshow(item){
+
+}
+
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160618.vue b/.history/src/views/system/departmentManagement/index_20250829160618.vue
new file mode 100644
index 0000000..221158c
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160618.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="editshow(scope.row)">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove(scope.row)">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+
+// 编辑
+function editshow(item){
+
+}
+
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160646.vue b/.history/src/views/system/departmentManagement/index_20250829160646.vue
new file mode 100644
index 0000000..8817c4f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160646.vue
@@ -0,0 +1,392 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="editshow(scope.row)">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove(scope.row)">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    title="添加部门"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+
+// 编辑
+function editshow(item){
+  console.log(item)
+}
+
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160820.vue b/.history/src/views/system/departmentManagement/index_20250829160820.vue
new file mode 100644
index 0000000..2bb946d
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160820.vue
@@ -0,0 +1,393 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="editshow(scope.row)">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove(scope.row)">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title='form.id?"编辑部门":"添加部门"'
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id:"",
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+
+const deptId=ref("")
+
+
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+
+// 编辑
+function editshow(item){
+  console.log(item)
+}
+
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160835.vue b/.history/src/views/system/departmentManagement/index_20250829160835.vue
new file mode 100644
index 0000000..c3a0bcc
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160835.vue
@@ -0,0 +1,389 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="editshow(scope.row)">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove(scope.row)">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title='form.id?"编辑部门":"添加部门"'
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id:"",
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+const deptId=ref("")
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+
+// 编辑
+function editshow(item){
+  console.log(item)
+}
+
+getthreedata()
+
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160843.vue b/.history/src/views/system/departmentManagement/index_20250829160843.vue
new file mode 100644
index 0000000..434dada
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160843.vue
@@ -0,0 +1,384 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="editshow(scope.row)">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove(scope.row)">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title='form.id?"编辑部门":"添加部门"'
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id:"",
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+const deptId=ref("")
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+          formEl.resetFields()
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+// 编辑
+function editshow(item){
+  console.log(item)
+}
+getthreedata()
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160918.vue b/.history/src/views/system/departmentManagement/index_20250829160918.vue
new file mode 100644
index 0000000..132db3d
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160918.vue
@@ -0,0 +1,385 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="editshow(scope.row)">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove(scope.row)">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title='form.id?"编辑部门":"添加部门"'
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id:"",
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+const deptId=ref("")
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+        formEl.resetFields()
+        form.value.id="";
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+// 编辑
+function editshow(item){
+  console.log(item)
+}
+getthreedata()
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829160932.vue b/.history/src/views/system/departmentManagement/index_20250829160932.vue
new file mode 100644
index 0000000..4954de3
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829160932.vue
@@ -0,0 +1,388 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: (name == node.label && deptId==data.deptId) }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+      
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column type="index"  label="序号" width="120" align="center" />
+              <el-table-column prop="deptId" label="部门ID" width="120" align="center" />
+              <el-table-column prop="deptName" label="部门名称" />
+               <el-table-column prop="remark" label="备注" />
+               <el-table-column  prop="createTime" label="添加时间" sortable align="center" width="180" />
+               <el-table-column fixed="right" label="操作" width="120" align="center" >
+                    <template #default="scope">
+                        <el-button link type="primary" size="small" @click="editshow(scope.row)">
+                        编辑
+                        </el-button>
+                        <el-button link type="primary" size="small" @click="remove(scope.row)">删除</el-button>
+                    </template>
+                    </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title='form.id?"编辑部门":"添加部门"'
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="选择上级部门" v-if="form.deptLevel!=1" prop="parentId">
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+           <el-option :label="item.deptName" :value="item.deptId" v-for="item in Options" />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" placeholder="请填写备注" />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)">
+          确认
+        </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { listDepttree,getDept,levelOptions,addDept} from "@/api/system/SysSpeedingDept.js"
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+
+const formEl=ref()
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id:"",
+  parentId:"",
+  deptName:"",
+  deptLevel:1,
+  remark:"",
+});
+const dialogVisible = ref(false);
+const deptId=ref("")
+const rules={
+    deptName:{
+        required: true,
+         message: '请填写部门名称',
+      trigger: 'change',
+    },
+    deptLevel:{
+        required: true,
+         message: '请选择部门类型',
+        trigger: 'change',
+    }
+}
+const Options=ref([]);
+const tableData = ref([])
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data =ref([])
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value=item.deptId;
+  getDeptlist()
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return
+  dialogVisible.value=false;
+  formEl.resetFields()
+}
+const submitForm = async (formEl) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value=false;
+      addDept(form.value).then(res=>{
+        getthreedata()
+        formEl.resetFields()
+        form.value.id="";
+      })
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(){
+   listDepttree().then(res=>{
+    data.value=res.data;
+    if(res.data.length){
+      deptId.value=res.data[0].deptId;
+      name.value=res.data[0].deptName
+    }
+    getDeptlist()
+   })
+}
+function getDeptlist(){
+  getDept(deptId.value,{pageNum:pageNum.value,pageSize:pageSize.value}).then(res=>{
+    tableData.value=res.rows;
+    total.value=res.total;
+  })
+}
+// 编辑
+function editshow(item){
+  console.log(item)
+  
+  elradiogroup()
+
+}
+getthreedata()
+// 获取相关部门
+elradiogroup()
+function elradiogroup(){
+
+  levelOptions({level:form.value.deptLevel}).then(res=>{
+    form.value.parentId="";
+    Options.value=res.data;
+  })
+}
+</script>
+<style lang="scss" scoped>
+
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161115.vue b/.history/src/views/system/departmentManagement/index_20250829161115.vue
new file mode 100644
index 0000000..b2a729c
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161115.vue
@@ -0,0 +1,444 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove() {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      userStore.logOut().then(() => {
+        location.href = "/index";
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item);
+
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161214.vue b/.history/src/views/system/departmentManagement/index_20250829161214.vue
new file mode 100644
index 0000000..8c904fa
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161214.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus,delDept } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.d)
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item);
+
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161230.vue b/.history/src/views/system/departmentManagement/index_20250829161230.vue
new file mode 100644
index 0000000..f5ae255
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161230.vue
@@ -0,0 +1,444 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus,delDept } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.d).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item);
+
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161248.vue b/.history/src/views/system/departmentManagement/index_20250829161248.vue
new file mode 100644
index 0000000..0ddee0d
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161248.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.d).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item);
+
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161304.vue b/.history/src/views/system/departmentManagement/index_20250829161304.vue
new file mode 100644
index 0000000..4ef89f3
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161304.vue
@@ -0,0 +1,445 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item);
+
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161452.vue b/.history/src/views/system/departmentManagement/index_20250829161452.vue
new file mode 100644
index 0000000..b01bf29
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161452.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+
+  form.value={
+      id: item.deptId,
+    parentId: item.parentId,
+    deptName:  item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  }
+   dialogVisible.value = true;
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161548.vue b/.history/src/views/system/departmentManagement/index_20250829161548.vue
new file mode 100644
index 0000000..bc0cb92
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161548.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+
+  form.value={
+      id: item.deptId,
+    parentId: item.parentId,
+    deptName:  item.deptName,
+    deptLevel: JSON.stringify(item.deptLevel),
+    remark: item.remark,
+  }
+   dialogVisible.value = true;
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161622.vue b/.history/src/views/system/departmentManagement/index_20250829161622.vue
new file mode 100644
index 0000000..4f45cd8
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161622.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+
+  form.value={
+      id: item.deptId,
+    parentId:JSON.stringify(item.parentId) ,
+    deptName:  item.deptName,
+    deptLevel:item.deptLevel ,
+    remark: item.remark,
+  }
+   dialogVisible.value = true;
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161649.vue b/.history/src/views/system/departmentManagement/index_20250829161649.vue
new file mode 100644
index 0000000..419ca91
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161649.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId)
+  form.value={
+      id: item.deptId,
+    parentId:JSON.stringify(item.parentId) ,
+    deptName:  item.deptName,
+    deptLevel:item.deptLevel ,
+    remark: item.remark,
+  }
+   dialogVisible.value = true;
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161750.vue b/.history/src/views/system/departmentManagement/index_20250829161750.vue
new file mode 100644
index 0000000..b7a9681
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161750.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId)
+  form.value={
+      id: item.deptId,
+    parentId:item.parentId,
+    deptName:  item.deptName,
+    deptLevel:item.deptLevel ,
+    remark: item.remark,
+  }
+   dialogVisible.value = true;
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    form.value.parentId = "";
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161839.vue b/.history/src/views/system/departmentManagement/index_20250829161839.vue
new file mode 100644
index 0000000..e8ee3f4
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161839.vue
@@ -0,0 +1,455 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then(r=>{
+           getDeptlist();
+      })
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId)
+  form.value={
+      id: item.deptId,
+    parentId:item.parentId,
+    deptName:  item.deptName,
+    deptLevel:item.deptLevel ,
+    remark: item.remark,
+  }
+   dialogVisible.value = true;
+   elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+   
+    if(type){
+ form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161847.vue b/.history/src/views/system/departmentManagement/index_20250829161847.vue
new file mode 100644
index 0000000..6e39ffc
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161847.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getDeptlist();
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829161914.vue b/.history/src/views/system/departmentManagement/index_20250829161914.vue
new file mode 100644
index 0000000..a73577c
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829161914.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getDeptlist();
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup();
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup() {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (!form.value.id) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829162155.vue b/.history/src/views/system/departmentManagement/index_20250829162155.vue
new file mode 100644
index 0000000..e1e5034
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829162155.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getDeptlist();
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+        max-width: fit-content;
+        min-width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: fit-content;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829162307.vue b/.history/src/views/system/departmentManagement/index_20250829162307.vue
new file mode 100644
index 0000000..135f9b6
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829162307.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getDeptlist();
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829162322.vue b/.history/src/views/system/departmentManagement/index_20250829162322.vue
new file mode 100644
index 0000000..8008b12
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829162322.vue
@@ -0,0 +1,452 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getDeptlist();
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829162334.vue b/.history/src/views/system/departmentManagement/index_20250829162334.vue
new file mode 100644
index 0000000..98f4a36
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829162334.vue
@@ -0,0 +1,453 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getDeptlist();
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829162447.vue b/.history/src/views/system/departmentManagement/index_20250829162447.vue
new file mode 100644
index 0000000..ee27f00
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829162447.vue
@@ -0,0 +1,454 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getDeptlist();
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata() {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829163120.vue b/.history/src/views/system/departmentManagement/index_20250829163120.vue
new file mode 100644
index 0000000..013dfe3
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829163120.vue
@@ -0,0 +1,457 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getDeptlist();
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    if(type){
+getDeptlist();
+    }
+    
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829163132.vue b/.history/src/views/system/departmentManagement/index_20250829163132.vue
new file mode 100644
index 0000000..c8e6a1a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829163132.vue
@@ -0,0 +1,457 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    if(type){
+      getDeptlist();
+    }
+    
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829163229.vue b/.history/src/views/system/departmentManagement/index_20250829163229.vue
new file mode 100644
index 0000000..9e09d00
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829163229.vue
@@ -0,0 +1,455 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="name"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+    
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829163723.vue b/.history/src/views/system/departmentManagement/index_20250829163723.vue
new file mode 100644
index 0000000..b92e3da
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829163723.vue
@@ -0,0 +1,457 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey=ref("")
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    serchKey.value="";
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+    
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829163809.vue b/.history/src/views/system/departmentManagement/index_20250829163809.vue
new file mode 100644
index 0000000..32bd3f5
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829163809.vue
@@ -0,0 +1,458 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey=ref("")
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+    serchKey.value="";
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+    
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829163845.vue b/.history/src/views/system/departmentManagement/index_20250829163845.vue
new file mode 100644
index 0000000..d523af4
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829163845.vue
@@ -0,0 +1,459 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey=ref("")
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+    serchKey.value="";
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+    
+  });
+}
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey:serchKey.value
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829163956.vue b/.history/src/views/system/departmentManagement/index_20250829163956.vue
new file mode 100644
index 0000000..e5cd29e
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829163956.vue
@@ -0,0 +1,461 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey=ref("")
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+    serchKey.value="";
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+    
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey:serchKey.value
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829164138.vue b/.history/src/views/system/departmentManagement/index_20250829164138.vue
new file mode 100644
index 0000000..418b8b0
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829164138.vue
@@ -0,0 +1,469 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey=ref("")
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+    serchKey.value="";
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+    
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey:serchKey.value
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e){
+  console.log(e)
+  // getDeptlist()
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829164316.vue b/.history/src/views/system/departmentManagement/index_20250829164316.vue
new file mode 100644
index 0000000..60f5def
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829164316.vue
@@ -0,0 +1,471 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey=ref("")
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+    serchKey.value="";
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type=true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+    
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey:serchKey.value
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type=true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e){
+  if((e.keyCode && e.keyCode==13) || !e){
+    pageNum.value=1;
+    getDeptlist()
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+       width: fit-content;
+       min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829164333.vue b/.history/src/views/system/departmentManagement/index_20250829164333.vue
new file mode 100644
index 0000000..522c011
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829164333.vue
@@ -0,0 +1,471 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+function handleNodeClick(node) {
+  console.log(node);
+}
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829164424.vue b/.history/src/views/system/departmentManagement/index_20250829164424.vue
new file mode 100644
index 0000000..46ac5c4
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829164424.vue
@@ -0,0 +1,469 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829164730.vue b/.history/src/views/system/departmentManagement/index_20250829164730.vue
new file mode 100644
index 0000000..51aa82a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829164730.vue
@@ -0,0 +1,469 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+
+    // if (res.data.length && type) {
+    //   deptId.value = res.data[0].deptId;
+    //   name.value = res.data[0].deptName;
+    // }
+    getDeptlist();
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829164742.vue b/.history/src/views/system/departmentManagement/index_20250829164742.vue
new file mode 100644
index 0000000..46ac5c4
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829164742.vue
@@ -0,0 +1,469 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+
+    if (res.data.length && type) {
+      deptId.value = res.data[0].deptId;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829164823.vue b/.history/src/views/system/departmentManagement/index_20250829164823.vue
new file mode 100644
index 0000000..51aa82a
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829164823.vue
@@ -0,0 +1,469 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+
+    // if (res.data.length && type) {
+    //   deptId.value = res.data[0].deptId;
+    //   name.value = res.data[0].deptName;
+    // }
+    getDeptlist();
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829164957.vue b/.history/src/views/system/departmentManagement/index_20250829164957.vue
new file mode 100644
index 0000000..ac97190
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829164957.vue
@@ -0,0 +1,469 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+
+    if (res.data.length && type) {
+      deptId.value = '000';
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829165018.vue b/.history/src/views/system/departmentManagement/index_20250829165018.vue
new file mode 100644
index 0000000..9d14a2b
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829165018.vue
@@ -0,0 +1,469 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+getthreedata();
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829165129.vue b/.history/src/views/system/departmentManagement/index_20250829165129.vue
new file mode 100644
index 0000000..08e8e0f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829165129.vue
@@ -0,0 +1,471 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829165220.vue b/.history/src/views/system/departmentManagement/index_20250829165220.vue
new file mode 100644
index 0000000..d2465b7
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829165220.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829165225.vue b/.history/src/views/system/departmentManagement/index_20250829165225.vue
new file mode 100644
index 0000000..ec58e14
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829165225.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  id: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.id) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.id = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    id: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829165646.vue b/.history/src/views/system/departmentManagement/index_20250829165646.vue
new file mode 100644
index 0000000..3fd7047
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829165646.vue
@@ -0,0 +1,472 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829165929.vue b/.history/src/views/system/departmentManagement/index_20250829165929.vue
new file mode 100644
index 0000000..25ca516
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829165929.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(10);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829170025.vue b/.history/src/views/system/departmentManagement/index_20250829170025.vue
new file mode 100644
index 0000000..9ecd5c0
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829170025.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829170032.vue b/.history/src/views/system/departmentManagement/index_20250829170032.vue
new file mode 100644
index 0000000..4e7387b
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829170032.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(17);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829170036.vue b/.history/src/views/system/departmentManagement/index_20250829170036.vue
new file mode 100644
index 0000000..9ecd5c0
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829170036.vue
@@ -0,0 +1,474 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              />
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829170227.vue b/.history/src/views/system/departmentManagement/index_20250829170227.vue
new file mode 100644
index 0000000..368c003
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829170227.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="scope">
+                 {{ scope.row }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171223.vue b/.history/src/views/system/departmentManagement/index_20250829171223.vue
new file mode 100644
index 0000000..05c2a0c
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171223.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,index}">
+                 {{ row }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171229.vue b/.history/src/views/system/departmentManagement/index_20250829171229.vue
new file mode 100644
index 0000000..6ff51b4
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171229.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,index}">
+                 {{ row }}{{ index }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171234.vue b/.history/src/views/system/departmentManagement/index_20250829171234.vue
new file mode 100644
index 0000000..fa77a82
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171234.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,index}">
+                 {{ index }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171244.vue b/.history/src/views/system/departmentManagement/index_20250829171244.vue
new file mode 100644
index 0000000..29e43e8
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171244.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,index}">
+                 {{ row.index }}{{ index }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171246.vue b/.history/src/views/system/departmentManagement/index_20250829171246.vue
new file mode 100644
index 0000000..6ff51b4
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171246.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,index}">
+                 {{ row }}{{ index }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171348.vue b/.history/src/views/system/departmentManagement/index_20250829171348.vue
new file mode 100644
index 0000000..22fe41c
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171348.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                {{ index }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171354.vue b/.history/src/views/system/departmentManagement/index_20250829171354.vue
new file mode 100644
index 0000000..3253f3e
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171354.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                {{ $index }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171358.vue b/.history/src/views/system/departmentManagement/index_20250829171358.vue
new file mode 100644
index 0000000..f41e62c
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171358.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                {{ $index+1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171433.vue b/.history/src/views/system/departmentManagement/index_20250829171433.vue
new file mode 100644
index 0000000..699d496
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171433.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                {{ ($index+1)* pageNum}}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171533.vue b/.history/src/views/system/departmentManagement/index_20250829171533.vue
new file mode 100644
index 0000000..2ee0623
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171533.vue
@@ -0,0 +1,478 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171736.vue b/.history/src/views/system/departmentManagement/index_20250829171736.vue
new file mode 100644
index 0000000..dbb3828
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171736.vue
@@ -0,0 +1,486 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+             <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="To"
+              start-placeholder="Start date"
+              end-placeholder="End date"
+             
+            />
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829171742.vue b/.history/src/views/system/departmentManagement/index_20250829171742.vue
new file mode 100644
index 0000000..65d3b14
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829171742.vue
@@ -0,0 +1,479 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829183949.vue b/.history/src/views/system/departmentManagement/index_20250829183949.vue
new file mode 100644
index 0000000..e32af79
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829183949.vue
@@ -0,0 +1,479 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829191803.vue b/.history/src/views/system/departmentManagement/index_20250829191803.vue
new file mode 100644
index 0000000..f796dff
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829191803.vue
@@ -0,0 +1,481 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+        <div class="container">
+          <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+
+          <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+        </div>
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829191849.vue b/.history/src/views/system/departmentManagement/index_20250829191849.vue
new file mode 100644
index 0000000..df0e42e
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829191849.vue
@@ -0,0 +1,488 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829191930.vue b/.history/src/views/system/departmentManagement/index_20250829191930.vue
new file mode 100644
index 0000000..90cac97
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829191930.vue
@@ -0,0 +1,489 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829191959.vue b/.history/src/views/system/departmentManagement/index_20250829191959.vue
new file mode 100644
index 0000000..335e26b
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829191959.vue
@@ -0,0 +1,490 @@
+<template>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+     height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829192306.vue b/.history/src/views/system/departmentManagement/index_20250829192306.vue
new file mode 100644
index 0000000..4c84e7f
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829192306.vue
@@ -0,0 +1,492 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 350px;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+     height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829192333.vue b/.history/src/views/system/departmentManagement/index_20250829192333.vue
new file mode 100644
index 0000000..7a4c5f8
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829192333.vue
@@ -0,0 +1,492 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+     height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829192454.vue b/.history/src/views/system/departmentManagement/index_20250829192454.vue
new file mode 100644
index 0000000..22a9101
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829192454.vue
@@ -0,0 +1,496 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .el-tree-node.is-current > .el-tree-node__content{
+        color: initial;
+        background: initial;
+      }
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+     height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829192529.vue b/.history/src/views/system/departmentManagement/index_20250829192529.vue
new file mode 100644
index 0000000..e918d1e
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829192529.vue
@@ -0,0 +1,496 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .el-tree-node.is-current > .el-tree-node__content{
+        color: inherit;
+        background: inherit;
+      }
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+     height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829192535.vue b/.history/src/views/system/departmentManagement/index_20250829192535.vue
new file mode 100644
index 0000000..572f3ec
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829192535.vue
@@ -0,0 +1,496 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .el-tree-node.is-current > .el-tree-node__content{
+        color: inherit;
+        background-color: inherit;
+      }
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+     height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/src/views/system/departmentManagement/index_20250829192550.vue b/.history/src/views/system/departmentManagement/index_20250829192550.vue
new file mode 100644
index 0000000..e282dfb
--- /dev/null
+++ b/.history/src/views/system/departmentManagement/index_20250829192550.vue
@@ -0,0 +1,496 @@
+<template>
+  <div>
+  <div class="app-container">
+    <el-card>
+      <div class="cardbox">
+        <div class="top">
+          <div class="l">部门列表</div>
+          <div class="r">
+            <el-input
+              v-model="serchKey"
+              style="width: 240px"
+              placeholder="输入部门名称/ID"
+              :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
+            />
+            
+            <el-button
+              type="primary"
+              @click="dialogVisible = true"
+              :icon="CirclePlus"
+              >添加部门</el-button
+            >
+          </div>
+        </div>
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
+            <el-tree
+              :data="data"
+              :props="defaultProps"
+              class="tree"
+              :check-on-click-leaf="false"
+              :default-expand-all="true"
+            
+            >
+              <template #default="{ node, data }">
+                <div class="treeitem">
+                  <div
+                    class="icon"
+                    v-if="data.children && data.children.length"
+                  >
+                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                  </div>
+                  <div
+                    class="title"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
+                  >
+                    {{ node.label }}
+                  </div>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+          </pane>
+          <pane size="84">
+              <div class="r">
+            <el-table
+              :data="tableData"
+              class="table"
+              border
+              style="width: 100%"
+            >
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
+            </el-table>
+            <pagination
+              v-show="total > 0"
+              :total="total"
+              v-model:page="pageNum"
+              v-model:limit="pageSize"
+              @pagination="getDeptlist"
+            />
+          </div>
+          </pane>
+          </splitpanes>
+       
+      </div>
+    </el-card>
+  </div>
+  <!-- 添加弹框 -->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500"
+    :title="form.id ? '编辑部门' : '添加部门'"
+    header-class="dialogheader"
+    :align-center="true"
+    center
+  >
+    <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
+      </el-form-item>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="resetForm(formEl)">取消</el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
+      </div>
+    </template>
+  </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
+import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
+import { ref } from "vue";
+
+import { ElMessageBox } from "element-plus";
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
+const name = ref("");
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
+const dialogVisible = ref(false);
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
+  },
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
+  },
+};
+const Options = ref([]);
+const tableData = ref([]);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(item) {
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
+}
+
+const resetForm = (formEl) => {
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
+const submitForm = async (formEl) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
+    } else {
+      console.log("error submit!", fields);
+    }
+  });
+};
+function remove(item) {
+  ElMessageBox.confirm("确定删除该部门？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
+      });
+    })
+    .catch(() => {});
+}
+
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
+</script>
+<style lang="scss" scoped>
+.top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 15px;
+  .l {
+    font-weight: 500;
+    font-size: 16px;
+    color: #333333;
+  }
+  .r {
+    display: flex;
+    gap: 20px;
+  }
+}
+.cardbox {
+  height: calc(100vh - 84px - 30px - 30px - 30px);
+}
+
+.container {
+  border-top: 1px solid #eee;
+  height: calc(100% - 47px);
+  display: flex;
+  .l {
+    width: 100%;
+    padding: 15px;
+    overflow: auto;
+    flex-shrink: 0;
+    height: 100%;
+    :deep(.tree) {
+      --el-tree-node-content-height: 35px;
+      height: 100%;
+      overflow: auto;
+      .el-tree-node.is-current > .el-tree-node__content{
+        color: inherit;
+        background-color: inherit !important;
+      }
+      .is-focusable .el-tree-node__content {
+        background: transparent;
+      }
+      .el-tree-node > .el-tree-node__children {
+        overflow: inherit;
+      }
+      .custtree {
+        .custtree {
+          padding-left: 25px;
+          position: relative;
+          &::before {
+            content: "";
+            position: absolute;
+            height: calc(100% + 12px);
+            width: 1px;
+            top: 0px;
+            left: 7px;
+            border-right: 1px dashed #979797;
+          }
+
+          .el-tree-node__content {
+            padding: 0px !important;
+            position: relative;
+            &::after {
+              content: "";
+              position: absolute;
+              height: 1px;
+              width: 10px;
+              top: 13px;
+              left: -15px;
+              border-top: 1px dashed #979797;
+            }
+            &::before {
+              content: "";
+              position: absolute;
+              height: 14px;
+              width: 1px;
+              top: 0px;
+              left: -18px;
+              border-left: 1px dashed #979797;
+            }
+          }
+
+          &:nth-last-of-type(1) {
+            &::before {
+              display: none;
+            }
+          }
+        }
+
+        & > .el-tree-node__content {
+          .el-tree-node__expand-icon {
+            display: none;
+          }
+          .icon .iocnPlus {
+            display: block;
+          }
+          .icon .iocnMinus {
+            display: none;
+          }
+        }
+      }
+      .is-expanded {
+        & > .el-tree-node__content {
+          .icon .iocnPlus {
+            display: none !important;
+          }
+          .icon .iocnMinus {
+            display: block !important;
+          }
+        }
+      }
+    }
+    .tree {
+      width: fit-content;
+      min-width: 100%;
+      .treeitem {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+      .icon {
+        color: #4d7bff;
+        border: 1px solid;
+        padding: 2px;
+        border-radius: 2px;
+        margin-right: 10px;
+      }
+      .title {
+        white-space: nowrap;
+        padding: 5px 3px;
+        width: 100%;
+
+        display: block;
+        &.on {
+          background: #ecf1ff;
+          color: #000;
+        }
+      }
+    }
+  }
+  .r {
+    flex: 1;
+     height: 100%;
+    .table {
+      height: calc(100% - 60px);
+    }
+  }
+}
+</style>
diff --git a/.history/vite.config_20250828100205.js b/.history/vite.config_20250828100205.js
new file mode 100644
index 0000000..6f318ee
--- /dev/null
+++ b/.history/vite.config_20250828100205.js
@@ -0,0 +1,78 @@
+import { defineConfig, loadEnv } from 'vite'
+import path from 'path'
+import createVitePlugins from './vite/plugins'
+const baseUrl = 'http://192.168.1.6:8777' // 后端接口
+// const baseUrl = 'https://api.huafurenjia.cn'
+// https://vitejs.dev/config/
+export default defineConfig(({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd())
+  const { VITE_APP_ENV } = env
+  return {
+    // 部署生产环境和开发环境下的URL。
+    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
+    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+    base: VITE_APP_ENV === 'production' ? '/' : '/',
+    plugins: createVitePlugins(env, command === 'build'),
+    resolve: {
+      // https://cn.vitejs.dev/config/#resolve-alias
+      alias: {
+        // 设置路径
+        '~': path.resolve(__dirname, './'),
+        // 设置别名
+        '@': path.resolve(__dirname, './src')
+      },
+      // https://cn.vitejs.dev/config/#resolve-extensions
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    },
+    // 打包配置
+    build: {
+      // https://vite.dev/config/build-options.html
+      sourcemap: command === 'build' ? false : 'inline',
+      outDir: 'dist',
+      assetsDir: 'assets',
+      chunkSizeWarningLimit: 2000,
+      rollupOptions: {
+        output: {
+          chunkFileNames: 'static/js/[name]-[hash].js',
+          entryFileNames: 'static/js/[name]-[hash].js',
+          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
+        }
+      }
+    },
+    // vite 相关配置
+    server: {
+      port: 80,
+      host: true,
+      open: true,
+      proxy: {
+        // https://cn.vitejs.dev/config/#server-proxy
+        '/dev-api': {
+          target: baseUrl,
+          changeOrigin: true,
+          rewrite: (p) => p.replace(/^\/dev-api/, '')
+        },
+         // springdoc proxy
+         '^/v3/api-docs/(.*)': {
+          target: baseUrl,
+          changeOrigin: true,
+        }
+      }
+    },
+    css: {
+      postcss: {
+        plugins: [
+          {
+            postcssPlugin: 'internal:charset-removal',
+            AtRule: {
+              charset: (atRule) => {
+                if (atRule.name === 'charset') {
+                  atRule.remove()
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+})
diff --git a/.history/vite.config_20250829142319.js b/.history/vite.config_20250829142319.js
new file mode 100644
index 0000000..159ed81
--- /dev/null
+++ b/.history/vite.config_20250829142319.js
@@ -0,0 +1,78 @@
+import { defineConfig, loadEnv } from 'vite'
+import path from 'path'
+import createVitePlugins from './vite/plugins'
+const baseUrl = 'http://192.168.1.6:8566' // 后端接口
+// const baseUrl = 'https://api.huafurenjia.cn'
+// https://vitejs.dev/config/
+export default defineConfig(({ mode, command }) => {
+  const env = loadEnv(mode, process.cwd())
+  const { VITE_APP_ENV } = env
+  return {
+    // 部署生产环境和开发环境下的URL。
+    // 默认情况下，vite 会假设你的应用是被部署在一个域名的根路径上
+    // 例如 https://www.ruoyi.vip/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在 https://www.ruoyi.vip/admin/，则设置 baseUrl 为 /admin/。
+    base: VITE_APP_ENV === 'production' ? '/' : '/',
+    plugins: createVitePlugins(env, command === 'build'),
+    resolve: {
+      // https://cn.vitejs.dev/config/#resolve-alias
+      alias: {
+        // 设置路径
+        '~': path.resolve(__dirname, './'),
+        // 设置别名
+        '@': path.resolve(__dirname, './src')
+      },
+      // https://cn.vitejs.dev/config/#resolve-extensions
+      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue']
+    },
+    // 打包配置
+    build: {
+      // https://vite.dev/config/build-options.html
+      sourcemap: command === 'build' ? false : 'inline',
+      outDir: 'dist',
+      assetsDir: 'assets',
+      chunkSizeWarningLimit: 2000,
+      rollupOptions: {
+        output: {
+          chunkFileNames: 'static/js/[name]-[hash].js',
+          entryFileNames: 'static/js/[name]-[hash].js',
+          assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
+        }
+      }
+    },
+    // vite 相关配置
+    server: {
+      port: 80,
+      host: true,
+      open: true,
+      proxy: {
+        // https://cn.vitejs.dev/config/#server-proxy
+        '/dev-api': {
+          target: baseUrl,
+          changeOrigin: true,
+          rewrite: (p) => p.replace(/^\/dev-api/, '')
+        },
+         // springdoc proxy
+         '^/v3/api-docs/(.*)': {
+          target: baseUrl,
+          changeOrigin: true,
+        }
+      }
+    },
+    css: {
+      postcss: {
+        plugins: [
+          {
+            postcssPlugin: 'internal:charset-removal',
+            AtRule: {
+              charset: (atRule) => {
+                if (atRule.name === 'charset') {
+                  atRule.remove()
+                }
+              }
+            }
+          }
+        ]
+      }
+    }
+  }
+})
diff --git a/src/api/system/SpeedingAlertSettings.js b/src/api/system/SpeedingAlertSettings.js
new file mode 100644
index 0000000..b42db9a
--- /dev/null
+++ b/src/api/system/SpeedingAlertSettings.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询预警设备设置列表
+export function listSpeedingAlertSettings(query) {
+  return request({
+    url: '/system/SpeedingAlertSettings/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询预警设备设置详细
+export function getSpeedingAlertSettings(id) {
+  return request({
+    url: '/system/SpeedingAlertSettings/' + id,
+    method: 'get'
+  })
+}
+
+// 新增预警设备设置
+export function addSpeedingAlertSettings(data) {
+  return request({
+    url: '/system/SpeedingAlertSettings',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改预警设备设置
+export function updateSpeedingAlertSettings(data) {
+  return request({
+    url: '/system/SpeedingAlertSettings',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除预警设备设置
+export function delSpeedingAlertSettings(id) {
+  return request({
+    url: '/system/SpeedingAlertSettings/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/system/SpeedingEquipmentManagement.js b/src/api/system/SpeedingEquipmentManagement.js
new file mode 100644
index 0000000..b6eb443
--- /dev/null
+++ b/src/api/system/SpeedingEquipmentManagement.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询设备管理列表
+export function listSpeedingEquipmentManagement(query) {
+  return request({
+    url: '/system/SpeedingEquipmentManagement/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询设备管理详细
+export function getSpeedingEquipmentManagement(id) {
+  return request({
+    url: '/system/SpeedingEquipmentManagement/' + id,
+    method: 'get'
+  })
+}
+
+// 新增设备管理
+export function addSpeedingEquipmentManagement(data) {
+  return request({
+    url: '/system/SpeedingEquipmentManagement',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改设备管理
+export function updateSpeedingEquipmentManagement(data) {
+  return request({
+    url: '/system/SpeedingEquipmentManagement',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除设备管理
+export function delSpeedingEquipmentManagement(id) {
+  return request({
+    url: '/system/SpeedingEquipmentManagement/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/system/SpeedingPush.js b/src/api/system/SpeedingPush.js
new file mode 100644
index 0000000..e1ee9ad
--- /dev/null
+++ b/src/api/system/SpeedingPush.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询超速推送列表
+export function listSpeedingPush(query) {
+  return request({
+    url: '/system/SpeedingPush/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询超速推送详细
+export function getSpeedingPush(id) {
+  return request({
+    url: '/system/SpeedingPush/' + id,
+    method: 'get'
+  })
+}
+
+// 新增超速推送
+export function addSpeedingPush(data) {
+  return request({
+    url: '/system/SpeedingPush',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改超速推送
+export function updateSpeedingPush(data) {
+  return request({
+    url: '/system/SpeedingPush',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除超速推送
+export function delSpeedingPush(id) {
+  return request({
+    url: '/system/SpeedingPush/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/system/SpeedingVehicleInformation.js b/src/api/system/SpeedingVehicleInformation.js
new file mode 100644
index 0000000..1e24d76
--- /dev/null
+++ b/src/api/system/SpeedingVehicleInformation.js
@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询过车信息列表
+export function listSpeedingVehicleInformation(query) {
+  return request({
+    url: '/system/SpeedingVehicleInformation/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询过车信息详细
+export function getSpeedingVehicleInformation(id) {
+  return request({
+    url: '/system/SpeedingVehicleInformation/' + id,
+    method: 'get'
+  })
+}
+
+// 新增过车信息
+export function addSpeedingVehicleInformation(data) {
+  return request({
+    url: '/system/SpeedingVehicleInformation',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改过车信息
+export function updateSpeedingVehicleInformation(data) {
+  return request({
+    url: '/system/SpeedingVehicleInformation',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除过车信息
+export function delSpeedingVehicleInformation(id) {
+  return request({
+    url: '/system/SpeedingVehicleInformation/' + id,
+    method: 'delete'
+  })
+}
diff --git a/src/api/system/SysSpeedingDept.js b/src/api/system/SysSpeedingDept.js
new file mode 100644
index 0000000..bfa6e2e
--- /dev/null
+++ b/src/api/system/SysSpeedingDept.js
@@ -0,0 +1,85 @@
+import request from '@/utils/request'
+
+// 查询部门树状结构
+export function listDepttree(query) {
+  return request({
+    url: '/system/speedingdept/tree',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询部门列表（根据父部门ID查询子部门）
+export function listDept(query) {
+  return request({
+    url: '/system/speedingdept/list',
+    method: 'get',
+    params: query
+  })
+}
+
+
+
+// 根据父部门ID查询子部门列表
+export function getDept(parentId,data) {
+  return request({
+    url: '/system/speedingdept/listByParent/' + parentId,
+    method: 'get',
+    params:data
+  })
+}
+
+
+
+// 查询部门层级信息
+export function getDeptlevel(deptId) {
+  return request({
+    url: '/system/speedingdept/level/' + deptId,
+    method: 'get'
+  })
+}
+
+
+// 查询部门详细数据
+export function getDeptspeedingdept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'get'
+  })
+}
+
+// 新增部门
+export function addDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改部门
+export function updateDept(data) {
+  return request({
+    url: '/system/speedingdept',
+    method: 'put',
+    params: data
+  })
+}
+
+// 获取部门层级选项（用于新增/编辑时的父部门选择）
+export function levelOptions(data) {
+  return request({
+    url: '/system/speedingdept/parentOptionsByLevel',
+    method: 'get',
+    params: data
+  })
+}
+
+
+// 删除部门
+export function delDept(deptId) {
+  return request({
+    url: '/system/speedingdept/' + deptId,
+    method: 'delete'
+  })
+}
diff --git a/src/views/system/SpeedingAlertSettings/index.vue b/src/views/system/SpeedingAlertSettings/index.vue
new file mode 100644
index 0000000..ba44854
--- /dev/null
+++ b/src/views/system/SpeedingAlertSettings/index.vue
@@ -0,0 +1,525 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="编码" prop="encoding">
+        <el-input
+          v-model="queryParams.encoding"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="开始设备id" prop="startDeviceId">
+        <el-input
+          v-model="queryParams.startDeviceId"
+          placeholder="请输入开始设备id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="开始设备基础信息" prop="startDeviceJson">
+        <el-input
+          v-model="queryParams.startDeviceJson"
+          placeholder="请输入开始设备基础信息"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="结束设备id" prop="endDeviceId">
+        <el-input
+          v-model="queryParams.endDeviceId"
+          placeholder="请输入结束设备id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="结束设备基础信息" prop="endDeviceJson">
+        <el-input
+          v-model="queryParams.endDeviceJson"
+          placeholder="请输入结束设备基础信息"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备之间距离" prop="distance">
+        <el-input
+          v-model="queryParams.distance"
+          placeholder="请输入设备之间距离"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设置区间速度" prop="speed">
+        <el-input
+          v-model="queryParams.speed"
+          placeholder="请输入设置区间速度"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="超速时速--00" prop="speeding">
+        <el-input
+          v-model="queryParams.speeding"
+          placeholder="请输入超速时速--00"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="预警级别  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....." prop="warningLevel">
+        <el-input
+          v-model="queryParams.warningLevel"
+          placeholder="请输入预警级别  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....."
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="预警速度--00" prop="warningSpeed">
+        <el-input
+          v-model="queryParams.warningSpeed"
+          placeholder="请输入预警速度--00"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备归属父级id" prop="fid">
+        <el-input
+          v-model="queryParams.fid"
+          placeholder="请输入设备归属父级id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备归属父级名称" prop="fname">
+        <el-input
+          v-model="queryParams.fname"
+          placeholder="请输入设备归属父级名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="creatData">
+        <el-date-picker clearable
+          v-model="queryParams.creatData"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择创建时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="修改时间" prop="updateData">
+        <el-date-picker clearable
+          v-model="queryParams.updateData"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择修改时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="创建人id" prop="creatId">
+        <el-input
+          v-model="queryParams.creatId"
+          placeholder="请输入创建人id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建人姓名" prop="creatName">
+        <el-input
+          v-model="queryParams.creatName"
+          placeholder="请输入创建人姓名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="修改人id" prop="updateId">
+        <el-input
+          v-model="queryParams.updateId"
+          placeholder="请输入修改人id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="修改人姓名" prop="updateName">
+        <el-input
+          v-model="queryParams.updateName"
+          placeholder="请输入修改人姓名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:SpeedingAlertSettings:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:SpeedingAlertSettings:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:SpeedingAlertSettings:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:SpeedingAlertSettings:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="SpeedingAlertSettingsList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="id" align="center" prop="id" />
+      <el-table-column label="编码" align="center" prop="encoding" />
+      <el-table-column label="开始设备id" align="center" prop="startDeviceId" />
+      <el-table-column label="开始设备基础信息" align="center" prop="startDeviceJson" />
+      <el-table-column label="结束设备id" align="center" prop="endDeviceId" />
+      <el-table-column label="结束设备基础信息" align="center" prop="endDeviceJson" />
+      <el-table-column label="设备之间距离" align="center" prop="distance" />
+      <el-table-column label="设置区间速度" align="center" prop="speed" />
+      <el-table-column label="超速时速--00" align="center" prop="speeding" />
+      <el-table-column label="预警级别  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....." align="center" prop="warningLevel" />
+      <el-table-column label="预警速度--00" align="center" prop="warningSpeed" />
+      <el-table-column label="设备归属父级id" align="center" prop="fid" />
+      <el-table-column label="设备归属父级名称" align="center" prop="fname" />
+      <el-table-column label="设备归属父级基本信息" align="center" prop="fjson" />
+      <el-table-column label="创建时间" align="center" prop="creatData" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.creatData, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="修改时间" align="center" prop="updateData" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.updateData, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建人id" align="center" prop="creatId" />
+      <el-table-column label="创建人姓名" align="center" prop="creatName" />
+      <el-table-column label="修改人id" align="center" prop="updateId" />
+      <el-table-column label="修改人姓名" align="center" prop="updateName" />
+      <el-table-column label="数据状态  1正常  2隐藏" align="center" prop="delStatus" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:SpeedingAlertSettings:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:SpeedingAlertSettings:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改预警设备设置对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="SpeedingAlertSettingsRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="编码" prop="encoding">
+          <el-input v-model="form.encoding" placeholder="请输入编码" />
+        </el-form-item>
+        <el-form-item label="开始设备id" prop="startDeviceId">
+          <el-input v-model="form.startDeviceId" placeholder="请输入开始设备id" />
+        </el-form-item>
+        <el-form-item label="开始设备基础信息" prop="startDeviceJson">
+          <el-input v-model="form.startDeviceJson" placeholder="请输入开始设备基础信息" />
+        </el-form-item>
+        <el-form-item label="结束设备id" prop="endDeviceId">
+          <el-input v-model="form.endDeviceId" placeholder="请输入结束设备id" />
+        </el-form-item>
+        <el-form-item label="结束设备基础信息" prop="endDeviceJson">
+          <el-input v-model="form.endDeviceJson" placeholder="请输入结束设备基础信息" />
+        </el-form-item>
+        <el-form-item label="设备之间距离" prop="distance">
+          <el-input v-model="form.distance" placeholder="请输入设备之间距离" />
+        </el-form-item>
+        <el-form-item label="设置区间速度" prop="speed">
+          <el-input v-model="form.speed" placeholder="请输入设置区间速度" />
+        </el-form-item>
+        <el-form-item label="超速时速--00" prop="speeding">
+          <el-input v-model="form.speeding" placeholder="请输入超速时速--00" />
+        </el-form-item>
+        <el-form-item label="预警级别  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....." prop="warningLevel">
+          <el-input v-model="form.warningLevel" placeholder="请输入预警级别  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....." />
+        </el-form-item>
+        <el-form-item label="预警速度--00" prop="warningSpeed">
+          <el-input v-model="form.warningSpeed" placeholder="请输入预警速度--00" />
+        </el-form-item>
+        <el-form-item label="设备归属父级id" prop="fid">
+          <el-input v-model="form.fid" placeholder="请输入设备归属父级id" />
+        </el-form-item>
+        <el-form-item label="设备归属父级名称" prop="fname">
+          <el-input v-model="form.fname" placeholder="请输入设备归属父级名称" />
+        </el-form-item>
+        <el-form-item label="设备归属父级基本信息" prop="fjson">
+          <el-input v-model="form.fjson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="创建时间" prop="creatData">
+          <el-date-picker clearable
+            v-model="form.creatData"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择创建时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="修改时间" prop="updateData">
+          <el-date-picker clearable
+            v-model="form.updateData"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择修改时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="创建人id" prop="creatId">
+          <el-input v-model="form.creatId" placeholder="请输入创建人id" />
+        </el-form-item>
+        <el-form-item label="创建人姓名" prop="creatName">
+          <el-input v-model="form.creatName" placeholder="请输入创建人姓名" />
+        </el-form-item>
+        <el-form-item label="修改人id" prop="updateId">
+          <el-input v-model="form.updateId" placeholder="请输入修改人id" />
+        </el-form-item>
+        <el-form-item label="修改人姓名" prop="updateName">
+          <el-input v-model="form.updateName" placeholder="请输入修改人姓名" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="SpeedingAlertSettings">
+import { listSpeedingAlertSettings, getSpeedingAlertSettings, delSpeedingAlertSettings, addSpeedingAlertSettings, updateSpeedingAlertSettings } from "@/api/system/SpeedingAlertSettings"
+
+const { proxy } = getCurrentInstance()
+
+const SpeedingAlertSettingsList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    encoding: null,
+    startDeviceId: null,
+    startDeviceJson: null,
+    endDeviceId: null,
+    endDeviceJson: null,
+    distance: null,
+    speed: null,
+    speeding: null,
+    warningLevel: null,
+    warningSpeed: null,
+    fid: null,
+    fname: null,
+    fjson: null,
+    creatData: null,
+    updateData: null,
+    creatId: null,
+    creatName: null,
+    updateId: null,
+    updateName: null,
+    delStatus: null
+  },
+  rules: {
+    encoding: [
+      { required: true, message: "编码不能为空", trigger: "blur" }
+    ],
+    startDeviceId: [
+      { required: true, message: "开始设备id不能为空", trigger: "blur" }
+    ],
+    startDeviceJson: [
+      { required: true, message: "开始设备基础信息不能为空", trigger: "blur" }
+    ],
+    endDeviceId: [
+      { required: true, message: "结束设备id不能为空", trigger: "blur" }
+    ],
+    endDeviceJson: [
+      { required: true, message: "结束设备基础信息不能为空", trigger: "blur" }
+    ],
+    distance: [
+      { required: true, message: "设备之间距离不能为空", trigger: "blur" }
+    ],
+    speed: [
+      { required: true, message: "设置区间速度不能为空", trigger: "blur" }
+    ],
+    speeding: [
+      { required: true, message: "超速时速--00不能为空", trigger: "blur" }
+    ],
+    warningLevel: [
+      { required: true, message: "预警级别  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%.....不能为空", trigger: "blur" }
+    ],
+    warningSpeed: [
+      { required: true, message: "预警速度--00不能为空", trigger: "blur" }
+    ],
+    delStatus: [
+      { required: true, message: "数据状态  1正常  2隐藏不能为空", trigger: "change" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询预警设备设置列表 */
+function getList() {
+  loading.value = true
+  listSpeedingAlertSettings(queryParams.value).then(response => {
+    SpeedingAlertSettingsList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    encoding: null,
+    startDeviceId: null,
+    startDeviceJson: null,
+    endDeviceId: null,
+    endDeviceJson: null,
+    distance: null,
+    speed: null,
+    speeding: null,
+    warningLevel: null,
+    warningSpeed: null,
+    fid: null,
+    fname: null,
+    fjson: null,
+    creatData: null,
+    updateData: null,
+    creatId: null,
+    creatName: null,
+    updateId: null,
+    updateName: null,
+    delStatus: null
+  }
+  proxy.resetForm("SpeedingAlertSettingsRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加预警设备设置"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getSpeedingAlertSettings(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改预警设备设置"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["SpeedingAlertSettingsRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateSpeedingAlertSettings(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addSpeedingAlertSettings(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除预警设备设置编号为"' + _ids + '"的数据项？').then(function() {
+    return delSpeedingAlertSettings(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/SpeedingAlertSettings/export', {
+    ...queryParams.value
+  }, `SpeedingAlertSettings_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>
diff --git a/src/views/system/SpeedingEquipmentManagement/index.vue b/src/views/system/SpeedingEquipmentManagement/index.vue
new file mode 100644
index 0000000..a489e80
--- /dev/null
+++ b/src/views/system/SpeedingEquipmentManagement/index.vue
@@ -0,0 +1,429 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="设备编码" prop="encoding">
+        <el-input
+          v-model="queryParams.encoding"
+          placeholder="请输入设备编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入设备名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="位置" prop="position">
+        <el-input
+          v-model="queryParams.position"
+          placeholder="请输入位置"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="经度" prop="longitude">
+        <el-input
+          v-model="queryParams.longitude"
+          placeholder="请输入经度"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="纬度" prop="latitude">
+        <el-input
+          v-model="queryParams.latitude"
+          placeholder="请输入纬度"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="设备分组id" prop="fid">
+        <el-input
+          v-model="queryParams.fid"
+          placeholder="请输入设备分组id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建时间" prop="creatData">
+        <el-date-picker clearable
+          v-model="queryParams.creatData"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择创建时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="修改时间" prop="updateData">
+        <el-date-picker clearable
+          v-model="queryParams.updateData"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择修改时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="创建人id" prop="creatId">
+        <el-input
+          v-model="queryParams.creatId"
+          placeholder="请输入创建人id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建人姓名" prop="creatName">
+        <el-input
+          v-model="queryParams.creatName"
+          placeholder="请输入创建人姓名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="修改人id" prop="updateId">
+        <el-input
+          v-model="queryParams.updateId"
+          placeholder="请输入修改人id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="修改人姓名" prop="updateName">
+        <el-input
+          v-model="queryParams.updateName"
+          placeholder="请输入修改人姓名"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:SpeedingEquipmentManagement:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:SpeedingEquipmentManagement:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:SpeedingEquipmentManagement:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:SpeedingEquipmentManagement:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="SpeedingEquipmentManagementList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键id" align="center" prop="id" />
+      <el-table-column label="设备编码" align="center" prop="encoding" />
+      <el-table-column label="设备名称" align="center" prop="name" />
+      <el-table-column label="位置" align="center" prop="position" />
+      <el-table-column label="经度" align="center" prop="longitude" />
+      <el-table-column label="纬度" align="center" prop="latitude" />
+      <el-table-column label="设备网络连接地址及参数" align="center" prop="networkAddressJson" />
+      <el-table-column label="设备分组id" align="center" prop="fid" />
+      <el-table-column label="创建时间" align="center" prop="creatData" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.creatData, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="修改时间" align="center" prop="updateData" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.updateData, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建人id" align="center" prop="creatId" />
+      <el-table-column label="创建人姓名" align="center" prop="creatName" />
+      <el-table-column label="修改人id" align="center" prop="updateId" />
+      <el-table-column label="修改人姓名" align="center" prop="updateName" />
+      <el-table-column label="数据状态  1正常  2隐藏" align="center" prop="delStatus" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:SpeedingEquipmentManagement:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:SpeedingEquipmentManagement:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改设备管理对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="SpeedingEquipmentManagementRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="设备编码" prop="encoding">
+          <el-input v-model="form.encoding" placeholder="请输入设备编码" />
+        </el-form-item>
+        <el-form-item label="设备名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入设备名称" />
+        </el-form-item>
+        <el-form-item label="位置" prop="position">
+          <el-input v-model="form.position" placeholder="请输入位置" />
+        </el-form-item>
+        <el-form-item label="经度" prop="longitude">
+          <el-input v-model="form.longitude" placeholder="请输入经度" />
+        </el-form-item>
+        <el-form-item label="纬度" prop="latitude">
+          <el-input v-model="form.latitude" placeholder="请输入纬度" />
+        </el-form-item>
+        <el-form-item label="设备网络连接地址及参数" prop="networkAddressJson">
+          <el-input v-model="form.networkAddressJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="设备分组id" prop="fid">
+          <el-input v-model="form.fid" placeholder="请输入设备分组id" />
+        </el-form-item>
+        <el-form-item label="创建时间" prop="creatData">
+          <el-date-picker clearable
+            v-model="form.creatData"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择创建时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="修改时间" prop="updateData">
+          <el-date-picker clearable
+            v-model="form.updateData"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择修改时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="创建人id" prop="creatId">
+          <el-input v-model="form.creatId" placeholder="请输入创建人id" />
+        </el-form-item>
+        <el-form-item label="创建人姓名" prop="creatName">
+          <el-input v-model="form.creatName" placeholder="请输入创建人姓名" />
+        </el-form-item>
+        <el-form-item label="修改人id" prop="updateId">
+          <el-input v-model="form.updateId" placeholder="请输入修改人id" />
+        </el-form-item>
+        <el-form-item label="修改人姓名" prop="updateName">
+          <el-input v-model="form.updateName" placeholder="请输入修改人姓名" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="SpeedingEquipmentManagement">
+import { listSpeedingEquipmentManagement, getSpeedingEquipmentManagement, delSpeedingEquipmentManagement, addSpeedingEquipmentManagement, updateSpeedingEquipmentManagement } from "@/api/system/SpeedingEquipmentManagement"
+
+const { proxy } = getCurrentInstance()
+
+const SpeedingEquipmentManagementList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    encoding: null,
+    name: null,
+    position: null,
+    longitude: null,
+    latitude: null,
+    networkAddressJson: null,
+    fid: null,
+    creatData: null,
+    updateData: null,
+    creatId: null,
+    creatName: null,
+    updateId: null,
+    updateName: null,
+    delStatus: null
+  },
+  rules: {
+    encoding: [
+      { required: true, message: "设备编码不能为空", trigger: "blur" }
+    ],
+    name: [
+      { required: true, message: "设备名称不能为空", trigger: "blur" }
+    ],
+    position: [
+      { required: true, message: "位置不能为空", trigger: "blur" }
+    ],
+    longitude: [
+      { required: true, message: "经度不能为空", trigger: "blur" }
+    ],
+    latitude: [
+      { required: true, message: "纬度不能为空", trigger: "blur" }
+    ],
+    networkAddressJson: [
+      { required: true, message: "设备网络连接地址及参数不能为空", trigger: "blur" }
+    ],
+    delStatus: [
+      { required: true, message: "数据状态  1正常  2隐藏不能为空", trigger: "change" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询设备管理列表 */
+function getList() {
+  loading.value = true
+  listSpeedingEquipmentManagement(queryParams.value).then(response => {
+    SpeedingEquipmentManagementList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    encoding: null,
+    name: null,
+    position: null,
+    longitude: null,
+    latitude: null,
+    networkAddressJson: null,
+    fid: null,
+    creatData: null,
+    updateData: null,
+    creatId: null,
+    creatName: null,
+    updateId: null,
+    updateName: null,
+    delStatus: null
+  }
+  proxy.resetForm("SpeedingEquipmentManagementRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加设备管理"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getSpeedingEquipmentManagement(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改设备管理"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["SpeedingEquipmentManagementRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateSpeedingEquipmentManagement(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addSpeedingEquipmentManagement(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除设备管理编号为"' + _ids + '"的数据项？').then(function() {
+    return delSpeedingEquipmentManagement(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/SpeedingEquipmentManagement/export', {
+    ...queryParams.value
+  }, `SpeedingEquipmentManagement_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>
diff --git a/src/views/system/SpeedingPush/index.vue b/src/views/system/SpeedingPush/index.vue
new file mode 100644
index 0000000..d9cfb99
--- /dev/null
+++ b/src/views/system/SpeedingPush/index.vue
@@ -0,0 +1,354 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="编码" prop="encoding">
+        <el-input
+          v-model="queryParams.encoding"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="推送信息json" prop="pushNotificationJson">
+        <el-input
+          v-model="queryParams.pushNotificationJson"
+          placeholder="请输入推送信息json"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="推送过车信息id" prop="pushVehiclesId">
+        <el-input
+          v-model="queryParams.pushVehiclesId"
+          placeholder="请输入推送过车信息id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="推送目标人员id" prop="pushPersonnelId">
+        <el-input
+          v-model="queryParams.pushPersonnelId"
+          placeholder="请输入推送目标人员id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="推送时间" prop="pushTime">
+        <el-date-picker clearable
+          v-model="queryParams.pushTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择推送时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="车辆超速时的时间" prop="speedingTime">
+        <el-date-picker clearable
+          v-model="queryParams.speedingTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择车辆超速时的时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:SpeedingPush:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:SpeedingPush:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:SpeedingPush:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:SpeedingPush:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="SpeedingPushList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="编码" align="center" prop="encoding" />
+      <el-table-column label="推送信息json" align="center" prop="pushNotificationJson" />
+      <el-table-column label="推送过车信息id" align="center" prop="pushVehiclesId" />
+      <el-table-column label="推送目标人员id" align="center" prop="pushPersonnelId" />
+      <el-table-column label="推送时目标人员的信息" align="center" prop="pushPersonnelJson" />
+      <el-table-column label="推送状态   1成功  2失败  3未知异常" align="center" prop="status" />
+      <el-table-column label="推送时间" align="center" prop="pushTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.pushTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="车辆超速时的时间" align="center" prop="speedingTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.speedingTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="数据状态  1正常  2隐藏" align="center" prop="delStatus" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:SpeedingPush:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:SpeedingPush:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改超速推送对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="SpeedingPushRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="编码" prop="encoding">
+          <el-input v-model="form.encoding" placeholder="请输入编码" />
+        </el-form-item>
+        <el-form-item label="推送信息json" prop="pushNotificationJson">
+          <el-input v-model="form.pushNotificationJson" placeholder="请输入推送信息json" />
+        </el-form-item>
+        <el-form-item label="推送过车信息id" prop="pushVehiclesId">
+          <el-input v-model="form.pushVehiclesId" placeholder="请输入推送过车信息id" />
+        </el-form-item>
+        <el-form-item label="推送目标人员id" prop="pushPersonnelId">
+          <el-input v-model="form.pushPersonnelId" placeholder="请输入推送目标人员id" />
+        </el-form-item>
+        <el-form-item label="推送时目标人员的信息" prop="pushPersonnelJson">
+          <el-input v-model="form.pushPersonnelJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="推送时间" prop="pushTime">
+          <el-date-picker clearable
+            v-model="form.pushTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择推送时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="车辆超速时的时间" prop="speedingTime">
+          <el-date-picker clearable
+            v-model="form.speedingTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择车辆超速时的时间">
+          </el-date-picker>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="SpeedingPush">
+import { listSpeedingPush, getSpeedingPush, delSpeedingPush, addSpeedingPush, updateSpeedingPush } from "@/api/system/SpeedingPush"
+
+const { proxy } = getCurrentInstance()
+
+const SpeedingPushList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    encoding: null,
+    pushNotificationJson: null,
+    pushVehiclesId: null,
+    pushPersonnelId: null,
+    pushPersonnelJson: null,
+    status: null,
+    pushTime: null,
+    speedingTime: null,
+    delStatus: null
+  },
+  rules: {
+    encoding: [
+      { required: true, message: "编码不能为空", trigger: "blur" }
+    ],
+    pushNotificationJson: [
+      { required: true, message: "推送信息json不能为空", trigger: "blur" }
+    ],
+    pushVehiclesId: [
+      { required: true, message: "推送过车信息id不能为空", trigger: "blur" }
+    ],
+    pushPersonnelId: [
+      { required: true, message: "推送目标人员id不能为空", trigger: "blur" }
+    ],
+    pushPersonnelJson: [
+      { required: true, message: "推送时目标人员的信息不能为空", trigger: "blur" }
+    ],
+    status: [
+      { required: true, message: "推送状态   1成功  2失败  3未知异常不能为空", trigger: "change" }
+    ],
+    pushTime: [
+      { required: true, message: "推送时间不能为空", trigger: "blur" }
+    ],
+    speedingTime: [
+      { required: true, message: "车辆超速时的时间不能为空", trigger: "blur" }
+    ],
+    delStatus: [
+      { required: true, message: "数据状态  1正常  2隐藏不能为空", trigger: "change" }
+    ]
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询超速推送列表 */
+function getList() {
+  loading.value = true
+  listSpeedingPush(queryParams.value).then(response => {
+    SpeedingPushList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    encoding: null,
+    pushNotificationJson: null,
+    pushVehiclesId: null,
+    pushPersonnelId: null,
+    pushPersonnelJson: null,
+    status: null,
+    pushTime: null,
+    speedingTime: null,
+    delStatus: null
+  }
+  proxy.resetForm("SpeedingPushRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加超速推送"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getSpeedingPush(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改超速推送"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["SpeedingPushRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateSpeedingPush(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addSpeedingPush(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除超速推送编号为"' + _ids + '"的数据项？').then(function() {
+    return delSpeedingPush(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/SpeedingPush/export', {
+    ...queryParams.value
+  }, `SpeedingPush_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>
diff --git a/src/views/system/SpeedingVehicleInformation/index.vue b/src/views/system/SpeedingVehicleInformation/index.vue
new file mode 100644
index 0000000..08094eb
--- /dev/null
+++ b/src/views/system/SpeedingVehicleInformation/index.vue
@@ -0,0 +1,634 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="编码" prop="encoding">
+        <el-input
+          v-model="queryParams.encoding"
+          placeholder="请输入编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="车辆号码" prop="vehicleNumber">
+        <el-input
+          v-model="queryParams.vehicleNumber"
+          placeholder="请输入车辆号码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="区间距离" prop="zoneDistance">
+        <el-input
+          v-model="queryParams.zoneDistance"
+          placeholder="请输入区间距离"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="区间限速" prop="intervalSpeedLimit">
+        <el-input
+          v-model="queryParams.intervalSpeedLimit"
+          placeholder="请输入区间限速"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="超速等级  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....." prop="overspeedLevel">
+        <el-input
+          v-model="queryParams.overspeedLevel"
+          placeholder="请输入超速等级  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....."
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="超速等级信息(20%-30%)" prop="overspeedLevelInformation">
+        <el-input
+          v-model="queryParams.overspeedLevelInformation"
+          placeholder="请输入超速等级信息(20%-30%)"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="通过开始设备的时间" prop="startDeviceTime">
+        <el-date-picker clearable
+          v-model="queryParams.startDeviceTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择通过开始设备的时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="通过结束设备的时间" prop="endDeviceTime">
+        <el-date-picker clearable
+          v-model="queryParams.endDeviceTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择通过结束设备的时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="行使时长" prop="exerciseDuration">
+        <el-input
+          v-model="queryParams.exerciseDuration"
+          placeholder="请输入行使时长"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="平均速度" prop="averageSpeed">
+        <el-input
+          v-model="queryParams.averageSpeed"
+          placeholder="请输入平均速度"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="待休息时长" prop="restDuration">
+        <el-input
+          v-model="queryParams.restDuration"
+          placeholder="请输入待休息时长"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="暂扣时间" prop="detainTime">
+        <el-date-picker clearable
+          v-model="queryParams.detainTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择暂扣时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="放行时间" prop="releaseTime">
+        <el-date-picker clearable
+          v-model="queryParams.releaseTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择放行时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="暂扣执法部门id" prop="detainDepartmentId">
+        <el-input
+          v-model="queryParams.detainDepartmentId"
+          placeholder="请输入暂扣执法部门id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="暂扣执法人员id" prop="detainWorkId">
+        <el-input
+          v-model="queryParams.detainWorkId"
+          placeholder="请输入暂扣执法人员id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="过车时间 用以确定数据查询的时间" prop="queryTime">
+        <el-date-picker clearable
+          v-model="queryParams.queryTime"
+          type="date"
+          value-format="YYYY-MM-DD"
+          placeholder="请选择过车时间 用以确定数据查询的时间">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item label="放行执法部门id" prop="releaseDepartmentId">
+        <el-input
+          v-model="queryParams.releaseDepartmentId"
+          placeholder="请输入放行执法部门id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="放行执法人员id" prop="releaseWorkId">
+        <el-input
+          v-model="queryParams.releaseWorkId"
+          placeholder="请输入放行执法人员id"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['system:SpeedingVehicleInformation:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:SpeedingVehicleInformation:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:SpeedingVehicleInformation:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['system:SpeedingVehicleInformation:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="SpeedingVehicleInformationList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="主键id" align="center" prop="id" />
+      <el-table-column label="编码" align="center" prop="encoding" />
+      <el-table-column label="车辆号码" align="center" prop="vehicleNumber" />
+      <el-table-column label="车辆号牌类别  1蓝色  2黄色  3绿色  4其他" align="center" prop="vehicleNumberType" />
+      <el-table-column label="区间距离" align="center" prop="zoneDistance" />
+      <el-table-column label="区间限速" align="center" prop="intervalSpeedLimit" />
+      <el-table-column label="区间设备基本信息 json" align="center" prop="intervalInformationJson" />
+      <el-table-column label="超速等级  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....." align="center" prop="overspeedLevel" />
+      <el-table-column label="超速等级信息(20%-30%)" align="center" prop="overspeedLevelInformation" />
+      <el-table-column label="通过开始设备的时间" align="center" prop="startDeviceTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.startDeviceTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="通过结束设备的时间" align="center" prop="endDeviceTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.endDeviceTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="行使时长" align="center" prop="exerciseDuration" />
+      <el-table-column label="平均速度" align="center" prop="averageSpeed" />
+      <el-table-column label="待休息时长" align="center" prop="restDuration" />
+      <el-table-column label="开始进入区间照片" align="center" prop="startDeviceImage" width="100">
+        <template #default="scope">
+          <image-preview :src="scope.row.startDeviceImage" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="离开区间的照片" align="center" prop="endDeviceImage" width="100">
+        <template #default="scope">
+          <image-preview :src="scope.row.endDeviceImage" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="车辆状态  1正常  2超速   3暂扣  4放行" align="center" prop="status" />
+      <el-table-column label="暂扣时间" align="center" prop="detainTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.detainTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="暂扣照片" align="center" prop="detainStartImage" width="100">
+        <template #default="scope">
+          <image-preview :src="scope.row.detainStartImage" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="放行时间" align="center" prop="releaseTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.releaseTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="放行照片" align="center" prop="releaseImage" width="100">
+        <template #default="scope">
+          <image-preview :src="scope.row.releaseImage" :width="50" :height="50"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="暂扣执法部门id" align="center" prop="detainDepartmentId" />
+      <el-table-column label="暂扣执法部门信息" align="center" prop="detainDepartmentJson" />
+      <el-table-column label="暂扣执法人员id" align="center" prop="detainWorkId" />
+      <el-table-column label="暂扣执法人员信息" align="center" prop="detainWorkJson" />
+      <el-table-column label="暂扣驾驶员基本信息  驾照，行驶证等信息json保存" align="center" prop="detainDriverJson" />
+      <el-table-column label="数据查询状态 1半年内的数据   2半年以前的数据" align="center" prop="queryType" />
+      <el-table-column label="过车时间 用以确定数据查询的时间" align="center" prop="queryTime" width="180">
+        <template #default="scope">
+          <span>{{ parseTime(scope.row.queryTime, '{y}-{m}-{d}') }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="数据状态  1正常  2隐藏" align="center" prop="delStatus" />
+      <el-table-column label="放行执法部门id" align="center" prop="releaseDepartmentId" />
+      <el-table-column label="放行执法部门信息" align="center" prop="releaseDepartmentJson" />
+      <el-table-column label="放行执法人员id" align="center" prop="releaseWorkId" />
+      <el-table-column label="放行执法人员信息" align="center" prop="releaseWorkJson" />
+      <el-table-column label="暂扣驾驶员基本信息  驾照，行驶证等信息json保存" align="center" prop="releaseDriverJson" />
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:SpeedingVehicleInformation:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:SpeedingVehicleInformation:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改过车信息对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="SpeedingVehicleInformationRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="编码" prop="encoding">
+          <el-input v-model="form.encoding" placeholder="请输入编码" />
+        </el-form-item>
+        <el-form-item label="车辆号码" prop="vehicleNumber">
+          <el-input v-model="form.vehicleNumber" placeholder="请输入车辆号码" />
+        </el-form-item>
+        <el-form-item label="区间距离" prop="zoneDistance">
+          <el-input v-model="form.zoneDistance" placeholder="请输入区间距离" />
+        </el-form-item>
+        <el-form-item label="区间限速" prop="intervalSpeedLimit">
+          <el-input v-model="form.intervalSpeedLimit" placeholder="请输入区间限速" />
+        </el-form-item>
+        <el-form-item label="区间设备基本信息 json" prop="intervalInformationJson">
+          <el-input v-model="form.intervalInformationJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="超速等级  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....." prop="overspeedLevel">
+          <el-input v-model="form.overspeedLevel" placeholder="请输入超速等级  1:10%-20%  2:20%-30% 3:30%-40% 4:40%--50%....." />
+        </el-form-item>
+        <el-form-item label="超速等级信息(20%-30%)" prop="overspeedLevelInformation">
+          <el-input v-model="form.overspeedLevelInformation" placeholder="请输入超速等级信息(20%-30%)" />
+        </el-form-item>
+        <el-form-item label="通过开始设备的时间" prop="startDeviceTime">
+          <el-date-picker clearable
+            v-model="form.startDeviceTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择通过开始设备的时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="通过结束设备的时间" prop="endDeviceTime">
+          <el-date-picker clearable
+            v-model="form.endDeviceTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择通过结束设备的时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="行使时长" prop="exerciseDuration">
+          <el-input v-model="form.exerciseDuration" placeholder="请输入行使时长" />
+        </el-form-item>
+        <el-form-item label="平均速度" prop="averageSpeed">
+          <el-input v-model="form.averageSpeed" placeholder="请输入平均速度" />
+        </el-form-item>
+        <el-form-item label="待休息时长" prop="restDuration">
+          <el-input v-model="form.restDuration" placeholder="请输入待休息时长" />
+        </el-form-item>
+        <el-form-item label="开始进入区间照片" prop="startDeviceImage">
+          <image-upload v-model="form.startDeviceImage"/>
+        </el-form-item>
+        <el-form-item label="离开区间的照片" prop="endDeviceImage">
+          <image-upload v-model="form.endDeviceImage"/>
+        </el-form-item>
+        <el-form-item label="暂扣时间" prop="detainTime">
+          <el-date-picker clearable
+            v-model="form.detainTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择暂扣时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="暂扣照片" prop="detainStartImage">
+          <image-upload v-model="form.detainStartImage"/>
+        </el-form-item>
+        <el-form-item label="放行时间" prop="releaseTime">
+          <el-date-picker clearable
+            v-model="form.releaseTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择放行时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="放行照片" prop="releaseImage">
+          <image-upload v-model="form.releaseImage"/>
+        </el-form-item>
+        <el-form-item label="暂扣执法部门id" prop="detainDepartmentId">
+          <el-input v-model="form.detainDepartmentId" placeholder="请输入暂扣执法部门id" />
+        </el-form-item>
+        <el-form-item label="暂扣执法部门信息" prop="detainDepartmentJson">
+          <el-input v-model="form.detainDepartmentJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="暂扣执法人员id" prop="detainWorkId">
+          <el-input v-model="form.detainWorkId" placeholder="请输入暂扣执法人员id" />
+        </el-form-item>
+        <el-form-item label="暂扣执法人员信息" prop="detainWorkJson">
+          <el-input v-model="form.detainWorkJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="暂扣驾驶员基本信息  驾照，行驶证等信息json保存" prop="detainDriverJson">
+          <el-input v-model="form.detainDriverJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="过车时间 用以确定数据查询的时间" prop="queryTime">
+          <el-date-picker clearable
+            v-model="form.queryTime"
+            type="date"
+            value-format="YYYY-MM-DD"
+            placeholder="请选择过车时间 用以确定数据查询的时间">
+          </el-date-picker>
+        </el-form-item>
+        <el-form-item label="放行执法部门id" prop="releaseDepartmentId">
+          <el-input v-model="form.releaseDepartmentId" placeholder="请输入放行执法部门id" />
+        </el-form-item>
+        <el-form-item label="放行执法部门信息" prop="releaseDepartmentJson">
+          <el-input v-model="form.releaseDepartmentJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="放行执法人员id" prop="releaseWorkId">
+          <el-input v-model="form.releaseWorkId" placeholder="请输入放行执法人员id" />
+        </el-form-item>
+        <el-form-item label="放行执法人员信息" prop="releaseWorkJson">
+          <el-input v-model="form.releaseWorkJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+        <el-form-item label="暂扣驾驶员基本信息  驾照，行驶证等信息json保存" prop="releaseDriverJson">
+          <el-input v-model="form.releaseDriverJson" type="textarea" placeholder="请输入内容" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="SpeedingVehicleInformation">
+import { listSpeedingVehicleInformation, getSpeedingVehicleInformation, delSpeedingVehicleInformation, addSpeedingVehicleInformation, updateSpeedingVehicleInformation } from "@/api/system/SpeedingVehicleInformation"
+
+const { proxy } = getCurrentInstance()
+
+const SpeedingVehicleInformationList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    encoding: null,
+    vehicleNumber: null,
+    vehicleNumberType: null,
+    zoneDistance: null,
+    intervalSpeedLimit: null,
+    intervalInformationJson: null,
+    overspeedLevel: null,
+    overspeedLevelInformation: null,
+    startDeviceTime: null,
+    endDeviceTime: null,
+    exerciseDuration: null,
+    averageSpeed: null,
+    restDuration: null,
+    startDeviceImage: null,
+    endDeviceImage: null,
+    status: null,
+    detainTime: null,
+    detainStartImage: null,
+    releaseTime: null,
+    releaseImage: null,
+    detainDepartmentId: null,
+    detainDepartmentJson: null,
+    detainWorkId: null,
+    detainWorkJson: null,
+    detainDriverJson: null,
+    queryType: null,
+    queryTime: null,
+    delStatus: null,
+    releaseDepartmentId: null,
+    releaseDepartmentJson: null,
+    releaseWorkId: null,
+    releaseWorkJson: null,
+    releaseDriverJson: null
+  },
+  rules: {
+    encoding: [
+      { required: true, message: "编码不能为空", trigger: "blur" }
+    ],
+    vehicleNumber: [
+      { required: true, message: "车辆号码不能为空", trigger: "blur" }
+    ],
+    vehicleNumberType: [
+      { required: true, message: "车辆号牌类别  1蓝色  2黄色  3绿色  4其他不能为空", trigger: "change" }
+    ],
+    zoneDistance: [
+      { required: true, message: "区间距离不能为空", trigger: "blur" }
+    ],
+    intervalSpeedLimit: [
+      { required: true, message: "区间限速不能为空", trigger: "blur" }
+    ],
+    intervalInformationJson: [
+      { required: true, message: "区间设备基本信息 json不能为空", trigger: "blur" }
+    ],
+    startDeviceTime: [
+      { required: true, message: "通过开始设备的时间不能为空", trigger: "blur" }
+    ],
+    startDeviceImage: [
+      { required: true, message: "开始进入区间照片不能为空", trigger: "blur" }
+    ],
+    status: [
+      { required: true, message: "车辆状态  1正常  2超速   3暂扣  4放行不能为空", trigger: "change" }
+    ],
+    delStatus: [
+      { required: true, message: "数据状态  1正常  2隐藏不能为空", trigger: "change" }
+    ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询过车信息列表 */
+function getList() {
+  loading.value = true
+  listSpeedingVehicleInformation(queryParams.value).then(response => {
+    SpeedingVehicleInformationList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    id: null,
+    encoding: null,
+    vehicleNumber: null,
+    vehicleNumberType: null,
+    zoneDistance: null,
+    intervalSpeedLimit: null,
+    intervalInformationJson: null,
+    overspeedLevel: null,
+    overspeedLevelInformation: null,
+    startDeviceTime: null,
+    endDeviceTime: null,
+    exerciseDuration: null,
+    averageSpeed: null,
+    restDuration: null,
+    startDeviceImage: null,
+    endDeviceImage: null,
+    status: null,
+    detainTime: null,
+    detainStartImage: null,
+    releaseTime: null,
+    releaseImage: null,
+    detainDepartmentId: null,
+    detainDepartmentJson: null,
+    detainWorkId: null,
+    detainWorkJson: null,
+    detainDriverJson: null,
+    queryType: null,
+    queryTime: null,
+    delStatus: null,
+    releaseDepartmentId: null,
+    releaseDepartmentJson: null,
+    releaseWorkId: null,
+    releaseWorkJson: null,
+    releaseDriverJson: null
+  }
+  proxy.resetForm("SpeedingVehicleInformationRef")
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.id)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加过车信息"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _id = row.id || ids.value
+  getSpeedingVehicleInformation(_id).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改过车信息"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["SpeedingVehicleInformationRef"].validate(valid => {
+    if (valid) {
+      if (form.value.id != null) {
+        updateSpeedingVehicleInformation(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else {
+        addSpeedingVehicleInformation(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _ids = row.id || ids.value
+  proxy.$modal.confirm('是否确认删除过车信息编号为"' + _ids + '"的数据项？').then(function() {
+    return delSpeedingVehicleInformation(_ids)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('system/SpeedingVehicleInformation/export', {
+    ...queryParams.value
+  }, `SpeedingVehicleInformation_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>
diff --git a/src/views/system/addUser/index.vue b/src/views/system/addUser/index.vue
index a177da4..36339a0 100644
--- a/src/views/system/addUser/index.vue
+++ b/src/views/system/addUser/index.vue
@@ -1,91 +1,152 @@
 <template>
+  <div>
   <div class="app-container">
     <el-card>
       <div class="cardbox">
         <div class="top">
-          <div class="l">部门列表</div>
+          <div class="l">成员</div>
           <div class="r">
             <el-input
-              v-model="name"
               style="width: 240px"
-              placeholder="输入部门名称/ID"
+              placeholder="输入姓名/电话"
               :suffix-icon="Search"
+              v-model="queryParams.userName"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
             />
-           <el-date-picker
-              v-model="value1"
+            <el-date-picker
+              v-model="dateRange"
               type="daterange"
-              range-separator="To"
-              start-placeholder="Start date"
-              end-placeholder="End date"
-             
+              range-separator="-"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              @clear="listSearch"
+              @change="listSearch"
+              show-confirm="true"
             />
-            <el-button
-              type="primary"
-              @click="dialogVisible = true"
-              :icon="CirclePlus"
+            <el-button type="primary" @click="handleAdd" :icon="CirclePlus"
               >添加成员</el-button
             >
           </div>
         </div>
-        <div class="container">
-          <div class="l">
-            <el-tree
-              :data="data"
-              :props="defaultProps"
-              class="tree"
-              :check-on-click-leaf="false"
-              :default-expand-all="true"
-              @node-click="handleNodeClick"
-            >
-              <template #default="{ node, data }">
-                <div class="treeitem">
-                  <div
-                    class="icon"
-                    v-if="data.children && data.children.length"
-                  >
-                    <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
-                    <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+        <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+            <div class="l">
+              <el-tree
+                :data="data"
+                :props="defaultProps"
+                class="tree"
+                :check-on-click-leaf="false"
+                :default-expand-all="true"
+              >
+                <template #default="{ node, data }">
+                  <div class="treeitem">
+                    <div
+                      class="icon"
+                      v-if="data.children && data.children.length"
+                    >
+                      <el-icon :size="10" class="iocnPlus"><Plus /></el-icon>
+                      <el-icon :size="10" class="iocnMinus"><Minus /></el-icon>
+                    </div>
+                    <div
+                      class="title"
+                      :class="{
+                        on: queryParams.deptId == data.deptId,
+                      }"
+                      @click.stop="screen(data)"
+                    >
+                      {{ node.label }}
+                    </div>
                   </div>
-                  <div
-                    class="title"
-                    :class="{ on: name == node.label }"
-                    @click.stop="screen(node.label)"
-                  >
-                    {{ node.label }}
-                  </div>
-                </div>
-              </template>
-            </el-tree>
-          </div>
-          <div class="r">
-            <el-table
-              :data="tableData"
-              class="table"
-              border
-              style="width: 100%"
-            >
-            
-              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
-              <el-table-column prop="name" label="部门ID" width="120" align="center" />
-              <el-table-column prop="address" label="部门名称" />
-               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
-               <el-table-column fixed="right" label="操作" width="120" align="center" >
-                    <template #default>
-                        <el-button link type="primary" size="small" @click="handleClick">
-                        编辑
-                        </el-button>
-                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
-                    </template>
-                    </el-table-column>
-            </el-table>
-            <pagination
-              v-show="total > 0"
-              :total="total"
-              v-model:page="pageNum"
-              v-model:limit="pageSize"
-            />
-          </div>
-        </div>
+                </template>
+              </el-tree>
+            </div>
+          </pane>
+          <pane size="84">
+            <div class="r">
+              <el-table
+                :data="tableData"
+                class="table"
+                border
+                v-loading="loading"
+                style="width: 100%"
+              >
+                <el-table-column
+                  type="index"
+                  label="序号"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="{ row, $index }">
+                    {{
+                      (queryParams.pageNum - 1) * queryParams.pageSize +
+                      $index +
+                      1
+                    }}
+                  </template>
+                </el-table-column>
+                <el-table-column
+                  label="用户编号"
+                  align="center"
+                  key="userId"
+                  prop="userId"
+                />
+                <el-table-column
+                  prop="userName"
+                  label="账号"
+                  width="120"
+                  align="center"
+                />
+                <el-table-column prop="nickName" label="姓名" />
+                <el-table-column prop="dept.deptName" label="部门名称" />
+                <!-- <el-table-column prop="dept.deptName" label="角色" /> -->
+                <el-table-column prop="remark" label="备注" />
+                <el-table-column
+                  prop="createTime"
+                  label="添加时间"
+                  sortable
+                  align="center"
+                  width="180"
+                />
+                <el-table-column
+                  fixed="right"
+                  label="操作"
+                  width="120"
+                  align="center"
+                >
+                  <template #default="scope">
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleUpdate(scope.row)"
+                    >
+                      编辑
+                    </el-button>
+                    <el-button
+                      link
+                      type="primary"
+                      size="small"
+                      @click="handleDelete(scope.row)"
+                      >删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                v-show="total > 0"
+                :total="total"
+                v-model:page="queryParams.pageNum"
+                v-model:limit="queryParams.pageSize"
+                @pagination="getusertlist"
+              />
+            </div>
+          </pane>
+        </splitpanes>
       </div>
     </el-card>
   </div>
@@ -93,192 +154,344 @@
   <el-dialog
     v-model="dialogVisible"
     width="500"
-    title="添加部门"
+    :title="form.id ? '编辑部门' : '添加部门'"
     header-class="dialogheader"
     :align-center="true"
     center
   >
     <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
-      <el-form-item label="成员姓名" prop="name">
-        <el-input v-model="form.name" />
+      <el-form-item label="成员姓名" prop="nickName">
+        <el-input v-model="form.nickName" />
       </el-form-item>
-      <el-form-item label="成员账号" prop="name">
-        <el-input v-model="form.name" />
+      <el-form-item label="成员账号" prop="userName">
+        <el-input v-model="form.userName" autocomplete="off" />
       </el-form-item>
-     
-      <el-form-item label="选择部门">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
-        </el-select>
+      <el-form-item
+        v-if="form.userId == undefined"
+        label="用户密码"
+        prop="password"
+      >
+        <el-input
+          v-model="form.password"
+          autocomplete="off"
+          placeholder="请输入用户密码"
+          type="password"
+          maxlength="20"
+          show-password
+        />
       </el-form-item>
-      <el-form-item label="备注">
-        <el-input v-model="form.desc" type="textarea" />
+      <el-form-item label="选择部门" prop="deptId">
+        <el-tree-select
+          v-model="form.deptId"
+          :data="data"
+          :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
+          value-key="id"
+          placeholder="请选择归属部门"
+          clearable
+          check-strictly
+        />
+      </el-form-item>
+      <el-form-item label="选择角色" prop="roleIds">
+        <el-radio-group v-model="form.roleIds">
+          <el-radio
+            :key="item.roleId"
+            :value="item.roleId"
+            :disabled="item.status == 1"
+            v-for="item in roleOptions"
+            >{{ item.roleName }}</el-radio
+          >
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="form.remark" type="textarea" />
       </el-form-item>
     </el-form>
+
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="resetForm(formEl)">取消</el-button>
-        <el-button type="primary" @click="submitForm(formEl)">
-          确认
-        </el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
       </div>
     </template>
   </el-dialog>
+  </div>
 </template>
 
 <script setup>
+import { listDepttree, delDept } from "@/api/system/SysSpeedingDept.js";
+import {
+  listUser,
+  delUser,
+  getUser,
+  updateUser,
+  addUser,
+  deptTreeSelect,
+} from "@/api/system/user";
 import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
 import { ref } from "vue";
 
+
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
 import { ElMessageBox } from "element-plus";
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const { proxy } = getCurrentInstance();
+const { sys_normal_disable, sys_user_sex } = proxy.useDict(
+  "sys_normal_disable",
+  "sys_user_sex"
+);
 
-
-const formEl=ref()
-const total = ref(90);
-const pageNum = ref(10);
-const pageSize = ref(1);
-const name = ref("");
-const form = ref({});
-const dialogVisible = ref(false);
-
-
-const rules={
-    name:{
-        required: true,
-         message: 'Please select Activity zone',
-      trigger: 'change',
-    }
-}
-
-const tableData = [
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
+const userdata = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    userName: undefined,
+    phonenumber: undefined,
+    status: undefined,
+    deptId: undefined,
   },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-];
-const defaultProps = {
-  children: "children",
-  label: "label",
-  class: "custtree",
-};
-const data = [
-  {
-    label: "内蒙总队",
-    children: [
+  rules: {
+    userName: [
+      { required: true, message: "用户名称不能为空", trigger: "blur" },
       {
-        label:
-          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
-        children: [
-          {
-            label: "Level two 1-1",
-            children: [
-              {
-                label: "Level three 1-1-1",
-              },
-            ],
-          },
-        ],
+        min: 2,
+        max: 20,
+        message: "用户名称长度必须介于 2 和 20 之间",
+        trigger: "blur",
+      },
+    ],
+    nickName: [
+      { required: true, message: "用户昵称不能为空", trigger: "blur" },
+    ],
+    password: [
+      { required: true, message: "用户密码不能为空", trigger: "blur" },
+      {
+        min: 5,
+        max: 20,
+        message: "用户密码长度必须介于 5 和 20 之间",
+        trigger: "blur",
       },
       {
-        label: "Level one 2",
-        children: [
-          {
-            label: "Level two 2-1",
-            children: [
-              {
-                label: "Level three 2-1-1",
-              },
-            ],
-          },
-          {
-            label: "Level two 2-2",
-            children: [
-              {
-                label: "Level three 2-2-1",
-              },
-            ],
-          },
-        ],
+        pattern: /^[^<>"'|\\]+$/,
+        message: "不能包含非法字符：< > \" ' \\\ |",
+        trigger: "blur",
       },
+    ],
+    email: [
       {
-        label: "Level one 3",
-        children: [
-          {
-            label: "Level two 3-1",
-            children: [
-              {
-                label: "Level three 3-1-1",
-              },
-            ],
-          },
-          {
-            label: "Level two 3-2",
-            children: [
-              {
-                label: "Level three 3-2-1",
-              },
-            ],
-          },
-        ],
+        type: "email",
+        message: "请输入正确的邮箱地址",
+        trigger: ["blur", "change"],
+      },
+    ],
+    phonenumber: [
+      {
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
       },
     ],
   },
-];
-function screen(item) {
-  name.value = item;
-}
-function handleNodeClick(node) {
-  console.log(node);
+});
+
+const { queryParams, form, rules } = toRefs(userdata);
+const formEl = ref();
+const loading = ref(false);
+const roleOptions = ref([]);
+const dialogVisible = ref(false);
+const deptId = ref("");
+const dateRange = ref([]);
+const total = ref(0);
+const title = ref("");
+const tableData = ref([]);
+const deptOptions = ref(undefined);
+const enabledDeptOptions = ref(undefined);
+const postOptions = ref([]);
+const initPassword = ref(undefined);
+const defaultProps = {
+  children: "children",
+  label: "deptName",
+  class: "custtree",
+};
+const data = ref([]);
+function screen(data) {
+  queryParams.value.deptId = data.deptId;
+  queryParams.value.pageNum = 1;
+  getusertlist();
 }
 
 const resetForm = (formEl) => {
-  if (!formEl) return
-  dialogVisible.value=false;
-  formEl.resetFields()
-}
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
 const submitForm = async (formEl) => {
-  if (!formEl) return
+  if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
-      console.log('submit!')
+      dialogVisible.value = false;
+      if (form.value.userId != undefined) {
+        updateUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("修改成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      } else {
+        addUser({ ...form.value, roleIds: [form.value.roleIds] }).then(
+          (response) => {
+            proxy.$modal.msgSuccess("新增成功");
+            dialogVisible.value = false;
+            getusertlist();
+          }
+        );
+      }
     } else {
-      console.log('error submit!', fields)
+      console.log("error submit!", fields);
     }
-  })
-}
-function remove() {
+  });
+};
+function remove(item) {
   ElMessageBox.confirm("确定删除该部门？", "提示", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(() => {
-      userStore.logOut().then(() => {
-        location.href = "/index";
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
       });
     })
     .catch(() => {});
 }
 
-</script>
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+    }
+    getusertlist();
+  });
+}
+getthreedata();
+getDeptTree();
+/** 查询用户列表 */
+function getusertlist() {
+  loading.value = true;
+  listUser(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (res) => {
+     
+      loading.value = false;
+      tableData.value = res.rows;
+      total.value = res.total;
+    }
+  );
+}
 
+/** 查询部门下拉树结构 */
+function getDeptTree() {
+  deptTreeSelect().then((response) => {
+    deptOptions.value = response.data;
+    enabledDeptOptions.value = filterDisabledDept(
+      JSON.parse(JSON.stringify(response.data))
+    );
+  });
+}
+
+/** 过滤禁用的部门 */
+function filterDisabledDept(deptList) {
+  return deptList.filter((dept) => {
+    if (dept.disabled) {
+      return false;
+    }
+    if (dept.children && dept.children.length) {
+      dept.children = filterDisabledDept(dept.children);
+    }
+    return true;
+  });
+}
+
+
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset();
+  getUser().then((response) => {
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    dialogVisible.value = true;
+    title.value = "添加用户";
+    form.value.password = initPassword.value;
+  });
+}
+/** 重置操作表单 */
+function reset() {
+  form.value = {
+    userId: undefined,
+    deptId: undefined,
+    userName: undefined,
+    nickName: undefined,
+    password: undefined,
+    phonenumber: undefined,
+    email: undefined,
+    sex: undefined,
+    status: "0",
+    remark: undefined,
+    postIds: [],
+    roleIds: "",
+  };
+  proxy.resetForm("userRef");
+}
+// 搜索
+function listSearch(e) {
+  console.log(e);
+  if ((e && e.keyCode && e.keyCode == 13) || !e || e.length) {
+    queryParams.value.pageNum = 1;
+    getusertlist();
+  }
+}
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset();
+  const userId = row.userId || ids.value;
+  getUser(userId).then((response) => {
+    form.value = response.data;
+    postOptions.value = response.posts;
+    roleOptions.value = response.roles;
+    form.value.postIds = response.postIds;
+    form.value.roleIds = response.roleIds[0];
+    dialogVisible.value = true;
+    title.value = "修改用户";
+    form.password = "";
+  });
+}
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const userIds = row.userId || ids.value;
+  proxy.$modal
+    .confirm('是否确认删除用户编号为"' + userIds + '"的数据项？')
+    .then(function () {
+      return delUser(userIds);
+    })
+    .then(() => {
+      getList();
+      proxy.$modal.msgSuccess("删除成功");
+    })
+    .catch(() => {});
+}
+onMounted(() => {
+  getDeptTree();
+  getusertlist();
+  proxy.getConfigKey("sys.user.initPassword").then((response) => {
+    initPassword.value = response.msg;
+  });
+});
+</script>
 <style lang="scss" scoped>
 .top {
   display: flex;
@@ -302,9 +515,10 @@ function remove() {
 .container {
   border-top: 1px solid #eee;
   height: calc(100% - 47px);
-  display: flex;
+
+
   .l {
-    width: 350px;
+    width: 100%;
     padding: 15px;
     overflow: auto;
     flex-shrink: 0;
@@ -313,6 +527,10 @@ function remove() {
       --el-tree-node-content-height: 35px;
       height: 100%;
       overflow: auto;
+       .el-tree-node.is-current > .el-tree-node__content{
+        color: inherit;
+        background-color: inherit !important;
+      }
       .is-focusable .el-tree-node__content {
         background: transparent;
       }
@@ -387,12 +605,12 @@ function remove() {
       }
     }
     .tree {
+      width: fit-content;
+      min-width: 100%;
       .treeitem {
         display: flex;
         align-items: center;
-
-        max-width: fit-content;
-        min-width: 100%;
+        width: 100%;
       }
       .icon {
         color: #4d7bff;
@@ -404,7 +622,7 @@ function remove() {
       .title {
         white-space: nowrap;
         padding: 5px 3px;
-        width: fit-content;
+        width: 100%;
 
         display: block;
         &.on {
@@ -415,7 +633,7 @@ function remove() {
     }
   }
   .r {
-    flex: 1;
+    height: 100%;
     .table {
       height: calc(100% - 60px);
     }
diff --git a/src/views/system/departmentManagement/index.vue b/src/views/system/departmentManagement/index.vue
index 1d54862..e282dfb 100644
--- a/src/views/system/departmentManagement/index.vue
+++ b/src/views/system/departmentManagement/index.vue
@@ -1,4 +1,5 @@
 <template>
+  <div>
   <div class="app-container">
     <el-card>
       <div class="cardbox">
@@ -6,11 +7,15 @@
           <div class="l">部门列表</div>
           <div class="r">
             <el-input
-              v-model="name"
+              v-model="serchKey"
               style="width: 240px"
               placeholder="输入部门名称/ID"
               :suffix-icon="Search"
+              @clear="listSearch"
+              @keydown="listSearch"
+              clearable
             />
+            
             <el-button
               type="primary"
               @click="dialogVisible = true"
@@ -19,15 +24,19 @@
             >
           </div>
         </div>
-        <div class="container">
-          <div class="l">
+         <splitpanes
+          :horizontal="appStore.device === 'mobile'"
+          class="container default-theme"
+        >
+          <pane size="16">
+               <div class="l">
             <el-tree
               :data="data"
               :props="defaultProps"
               class="tree"
               :check-on-click-leaf="false"
               :default-expand-all="true"
-              @node-click="handleNodeClick"
+            
             >
               <template #default="{ node, data }">
                 <div class="treeitem">
@@ -40,8 +49,8 @@
                   </div>
                   <div
                     class="title"
-                    :class="{ on: name == node.label }"
-                    @click.stop="screen(node.label)"
+                    :class="{ on: name == node.label && deptId == data.deptId }"
+                    @click.stop="screen(data)"
                   >
                     {{ node.label }}
                   </div>
@@ -49,35 +58,76 @@
               </template>
             </el-tree>
           </div>
-          <div class="r">
+          </pane>
+          <pane size="84">
+              <div class="r">
             <el-table
               :data="tableData"
               class="table"
               border
               style="width: 100%"
             >
-            
-              <el-table-column prop="name" sortable label="序号" width="120" align="center" />
-              <el-table-column prop="name" label="部门ID" width="120" align="center" />
-              <el-table-column prop="address" label="部门名称" />
-               <el-table-column  prop="date" label="添加时间" align="center" width="140" />
-               <el-table-column fixed="right" label="操作" width="120" align="center" >
-                    <template #default>
-                        <el-button link type="primary" size="small" @click="handleClick">
-                        编辑
-                        </el-button>
-                        <el-button link type="primary" size="small" @click="remove()">删除</el-button>
-                    </template>
-                    </el-table-column>
+              <el-table-column
+                type="index"
+                label="序号"
+                width="120"
+                align="center"
+              >
+               <template #default="{row,$index}">
+                 {{ (pageNum - 1) * pageSize + $index + 1 }}
+               </template>
+              </el-table-column>
+              <el-table-column
+                prop="deptId"
+                label="部门ID"
+                width="120"
+                align="center"
+              />
+              <el-table-column prop="deptName" label="部门名称" />
+              <el-table-column prop="remark" label="备注" />
+              <el-table-column
+                prop="createTime"
+                label="添加时间"
+                sortable
+                align="center"
+                width="180"
+              />
+              <el-table-column
+                fixed="right"
+                label="操作"
+                width="120"
+                align="center"
+              >
+                <template #default="scope">
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="editshow(scope.row)"
+                  >
+                    编辑
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    size="small"
+                    @click="remove(scope.row)"
+                    >删除</el-button
+                  >
+                </template>
+              </el-table-column>
             </el-table>
             <pagination
               v-show="total > 0"
               :total="total"
               v-model:page="pageNum"
               v-model:limit="pageSize"
+              @pagination="getDeptlist"
             />
           </div>
-        </div>
+          </pane>
+          </splitpanes>
+       
       </div>
     </el-card>
   </div>
@@ -85,196 +135,218 @@
   <el-dialog
     v-model="dialogVisible"
     width="500"
-    title="添加部门"
+    :title="form.id ? '编辑部门' : '添加部门'"
     header-class="dialogheader"
     :align-center="true"
     center
   >
     <el-form :model="form" ref="formEl" label-width="auto" :rules="rules">
-      <el-form-item label="输入部门" prop="name">
-        <el-input v-model="form.name" />
+      <el-form-item label="输入部门" prop="deptName">
+        <el-input v-model="form.deptName" placeholder="输入部门名称" />
       </el-form-item>
-      <el-form-item label="选择部门类型">
-        <el-radio-group v-model="form.resource">
-          <el-radio value="Sponsor">Sponsor</el-radio>
-          <el-radio value="Venue">Venue</el-radio>
+      <el-form-item label="选择部门类型" prop="deptLevel">
+        <el-radio-group v-model="form.deptLevel" @change="elradiogroup">
+          <el-radio :value="1">总队</el-radio>
+          <el-radio :value="2">支队</el-radio>
+          <el-radio :value="3">大队</el-radio>
+          <el-radio :value="4">中队</el-radio>
         </el-radio-group>
       </el-form-item>
-      <el-form-item label="选择上级部门">
-        <el-select v-model="form.region" placeholder="please select your zone">
-          <el-option label="Zone one" value="shanghai" />
-          <el-option label="Zone two" value="beijing" />
+      <el-form-item
+        label="选择上级部门"
+        v-if="form.deptLevel != 1"
+        prop="parentId"
+      >
+        <el-select v-model="form.parentId" placeholder="选择上级部门">
+          <el-option
+            :label="item.deptName"
+            :value="item.deptId"
+            v-for="item in Options"
+          />
         </el-select>
       </el-form-item>
-      <el-form-item label="备注">
-        <el-input v-model="form.desc" type="textarea" />
+      <el-form-item label="备注" prop="remark">
+        <el-input
+          v-model="form.remark"
+          type="textarea"
+          placeholder="请填写备注"
+        />
       </el-form-item>
     </el-form>
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="resetForm(formEl)">取消</el-button>
-        <el-button type="primary" @click="submitForm(formEl)">
-          确认
-        </el-button>
+        <el-button type="primary" @click="submitForm(formEl)"> 确认 </el-button>
       </div>
     </template>
   </el-dialog>
+  </div>
 </template>
 
 <script setup>
+import {
+  listDepttree,
+  getDept,
+  levelOptions,
+  addDept,
+  updateDept,
+  delDept,
+} from "@/api/system/SysSpeedingDept.js";
 import { CirclePlus, Search, Plus, Minus } from "@element-plus/icons-vue";
 import { ref } from "vue";
 
 import { ElMessageBox } from "element-plus";
-
-
-const formEl=ref()
-const total = ref(90);
-const pageNum = ref(10);
-const pageSize = ref(1);
+import { Splitpanes, Pane } from "splitpanes";
+import "splitpanes/dist/splitpanes.css"
+import useAppStore from "@/store/modules/app";
+const appStore = useAppStore();
+const formEl = ref();
+const total = ref(0);
+const pageNum = ref(1);
+const pageSize = ref(18);
 const name = ref("");
-const form = ref({});
+const serchKey = ref("");
+const form = ref({
+  deptId: "",
+  parentId: "",
+  deptName: "",
+  deptLevel: 1,
+  remark: "",
+});
 const dialogVisible = ref(false);
-
-
-const rules={
-    name:{
-        required: true,
-         message: 'Please select Activity zone',
-      trigger: 'change',
-    }
-}
-
-const tableData = [
-  {
-    date: "2016-05-03",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
+const deptId = ref("");
+const rules = {
+  deptName: {
+    required: true,
+    message: "请填写部门名称",
+    trigger: "change",
   },
-  {
-    date: "2016-05-02",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
+  deptLevel: {
+    required: true,
+    message: "请选择部门类型",
+    trigger: "change",
   },
-  {
-    date: "2016-05-04",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-  {
-    date: "2016-05-01",
-    name: "Tom",
-    address: "No. 189, Grove St, Los Angeles",
-  },
-];
+};
+const Options = ref([]);
+const tableData = ref([]);
 const defaultProps = {
   children: "children",
-  label: "label",
+  label: "deptName",
   class: "custtree",
 };
-const data = [
-  {
-    label: "内蒙总队",
-    children: [
-      {
-        label:
-          "内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队内蒙总队",
-        children: [
-          {
-            label: "Level two 1-1",
-            children: [
-              {
-                label: "Level three 1-1-1",
-              },
-            ],
-          },
-        ],
-      },
-      {
-        label: "Level one 2",
-        children: [
-          {
-            label: "Level two 2-1",
-            children: [
-              {
-                label: "Level three 2-1-1",
-              },
-            ],
-          },
-          {
-            label: "Level two 2-2",
-            children: [
-              {
-                label: "Level three 2-2-1",
-              },
-            ],
-          },
-        ],
-      },
-      {
-        label: "Level one 3",
-        children: [
-          {
-            label: "Level two 3-1",
-            children: [
-              {
-                label: "Level three 3-1-1",
-              },
-            ],
-          },
-          {
-            label: "Level two 3-2",
-            children: [
-              {
-                label: "Level three 3-2-1",
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-];
+const data = ref([]);
 function screen(item) {
-  name.value = item;
-}
-function handleNodeClick(node) {
-  console.log(node);
+  name.value = item.deptName;
+  deptId.value = item.deptId;
+  pageNum.value = 1;
+  serchKey.value = "";
+  getDeptlist();
 }
 
 const resetForm = (formEl) => {
-  if (!formEl) return
-  dialogVisible.value=false;
-  formEl.resetFields()
-}
+  if (!formEl) return;
+  dialogVisible.value = false;
+  formEl.resetFields();
+};
 const submitForm = async (formEl) => {
-  if (!formEl) return
+  if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
-      console.log('submit!')
+      dialogVisible.value = false;
+      if (form.value.deptId) {
+        updateDept(form.value).then((res) => {
+          getDeptlist();
+          formEl.resetFields();
+          form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      } else {
+        addDept(form.value).then((res) => {
+          getthreedata();
+          formEl.resetFields();
+           form.value.deptLevel=1;
+          form.value.deptId = "";
+        });
+      }
+
+      console.log("submit!");
     } else {
-      console.log('error submit!', fields)
+      console.log("error submit!", fields);
     }
-  })
-}
-function remove() {
+  });
+};
+function remove(item) {
   ElMessageBox.confirm("确定删除该部门？", "提示", {
     confirmButtonText: "确定",
     cancelButtonText: "取消",
     type: "warning",
   })
     .then(() => {
-      userStore.logOut().then(() => {
-        location.href = "/index";
+      delDept(item.deptId).then((r) => {
+        getthreedata(false);
       });
     })
     .catch(() => {});
 }
 
+// 左边数据
+function getthreedata(type = true) {
+  listDepttree().then((res) => {
+    data.value = res.data;
+    if (res.data.length && type) {
+      deptId.value = 0;
+      name.value = res.data[0].deptName;
+    }
+    getDeptlist();
+  });
+}
+getthreedata();
+
+// 获取列表数据
+function getDeptlist() {
+  getDept(deptId.value, {
+    pageNum: pageNum.value,
+    pageSize: pageSize.value,
+    serchKey: serchKey.value,
+  }).then((res) => {
+    tableData.value = res.rows;
+    total.value = res.total;
+  });
+}
+// 编辑数据
+function editshow(item) {
+  console.log(item.parentId);
+  form.value = {
+    deptId: item.deptId,
+    parentId: item.parentId,
+    deptName: item.deptName,
+    deptLevel: item.deptLevel,
+    remark: item.remark,
+  };
+  dialogVisible.value = true;
+  elradiogroup(false);
+}
+
+// 获取相关部门
+elradiogroup();
+function elradiogroup(type = true) {
+  levelOptions({ level: form.value.deptLevel }).then((res) => {
+    if (type) {
+      form.value.parentId = "";
+    }
+    Options.value = res.data;
+  });
+}
+
+// 搜索
+function listSearch(e) {
+  if ((e && e.keyCode && e.keyCode == 13) || !e) {
+    pageNum.value = 1;
+    getDeptlist();
+  }
+}
 </script>
-
 <style lang="scss" scoped>
-
 .top {
   display: flex;
   align-items: center;
@@ -299,7 +371,7 @@ function remove() {
   height: calc(100% - 47px);
   display: flex;
   .l {
-    width: 350px;
+    width: 100%;
     padding: 15px;
     overflow: auto;
     flex-shrink: 0;
@@ -308,6 +380,10 @@ function remove() {
       --el-tree-node-content-height: 35px;
       height: 100%;
       overflow: auto;
+      .el-tree-node.is-current > .el-tree-node__content{
+        color: inherit;
+        background-color: inherit !important;
+      }
       .is-focusable .el-tree-node__content {
         background: transparent;
       }
@@ -382,12 +458,12 @@ function remove() {
       }
     }
     .tree {
+      width: fit-content;
+      min-width: 100%;
       .treeitem {
         display: flex;
         align-items: center;
-
-        max-width: fit-content;
-        min-width: 100%;
+        width: 100%;
       }
       .icon {
         color: #4d7bff;
@@ -399,7 +475,7 @@ function remove() {
       .title {
         white-space: nowrap;
         padding: 5px 3px;
-        width: fit-content;
+        width: 100%;
 
         display: block;
         &.on {
@@ -411,6 +487,7 @@ function remove() {
   }
   .r {
     flex: 1;
+     height: 100%;
     .table {
       height: calc(100% - 60px);
     }
diff --git a/vite.config.js b/vite.config.js
index 6f318ee..159ed81 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -1,7 +1,7 @@
 import { defineConfig, loadEnv } from 'vite'
 import path from 'path'
 import createVitePlugins from './vite/plugins'
-const baseUrl = 'http://192.168.1.6:8777' // 后端接口
+const baseUrl = 'http://192.168.1.6:8566' // 后端接口
 // const baseUrl = 'https://api.huafurenjia.cn'
 // https://vitejs.dev/config/
 export default defineConfig(({ mode, command }) => {