From 75c3c885023a4bd2aeac697500b580259f617617 Mon Sep 17 00:00:00 2001
From: jingna <1264204245@qq.com>
Date: Wed, 18 Jun 2025 11:14:16 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9D=83=E9=99=90=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../api/data-visualization/permission/menu.ts |   7 +
 .../permission/organization.ts                |   8 +
 .../api/data-visualization/permission/role.ts |  10 +
 .../api/data-visualization/permission/user.ts |  10 +
 frontend/src/assets/system/add.png            | Bin 0 -> 122 bytes
 frontend/src/assets/system/logosmall.png      | Bin 0 -> 1094 bytes
 frontend/src/assets/system/u594.png           | Bin 0 -> 346 bytes
 frontend/src/data-public/Dashboard.vue        |  14 +-
 frontend/src/router/index.ts                  |  20 +-
 .../src/views/system/permissionset/header.vue | 104 ++++
 .../src/views/system/permissionset/index.vue  | 228 +++++++
 .../permissionset/organization/index.vue      | 562 ++++++++++++++++++
 .../views/system/permissionset/role/index.vue | 381 ++++++++++++
 .../views/system/permissionset/user/index.vue | 476 +++++++++++++++
 .../system/permissionset/user/userinfo.vue    | 178 ++++++
 15 files changed, 1990 insertions(+), 8 deletions(-)
 create mode 100644 frontend/src/api/data-visualization/permission/menu.ts
 create mode 100644 frontend/src/api/data-visualization/permission/organization.ts
 create mode 100644 frontend/src/api/data-visualization/permission/role.ts
 create mode 100644 frontend/src/api/data-visualization/permission/user.ts
 create mode 100644 frontend/src/assets/system/add.png
 create mode 100644 frontend/src/assets/system/logosmall.png
 create mode 100644 frontend/src/assets/system/u594.png
 create mode 100644 frontend/src/views/system/permissionset/header.vue
 create mode 100644 frontend/src/views/system/permissionset/index.vue
 create mode 100644 frontend/src/views/system/permissionset/organization/index.vue
 create mode 100644 frontend/src/views/system/permissionset/role/index.vue
 create mode 100644 frontend/src/views/system/permissionset/user/index.vue
 create mode 100644 frontend/src/views/system/permissionset/user/userinfo.vue

diff --git a/frontend/src/api/data-visualization/permission/menu.ts b/frontend/src/api/data-visualization/permission/menu.ts
new file mode 100644
index 0000000..ee66fc2
--- /dev/null
+++ b/frontend/src/api/data-visualization/permission/menu.ts
@@ -0,0 +1,7 @@
+import request from '@/data-visualization/config/axios'
+
+export const getMenuTree = params => request.post({ url: '/menuInterface/getMenuTree', params }) // 查询菜单
+export const addMenu = data => request.post({ url: '/menuInterface/addMenu', data }) // 新增菜单
+export const updateMenuById = data => request.post({ url: '/menuInterface/updateMenuById', data }) //修改菜单
+export const deleteMenuById = id => request.post({ url: '/menuInterface/deleteMenuById?id=' + id }) //删除菜单
+export const setModuleId = params => request.post({ url: '/menuInterface/setModuleId',params }) //关联模块
\ No newline at end of file
diff --git a/frontend/src/api/data-visualization/permission/organization.ts b/frontend/src/api/data-visualization/permission/organization.ts
new file mode 100644
index 0000000..278f281
--- /dev/null
+++ b/frontend/src/api/data-visualization/permission/organization.ts
@@ -0,0 +1,8 @@
+import request from '@/data-visualization/config/axios'
+
+export const getOrganizations = params => request.post({ url: '/organization/getOrganizations', params }) // 查询企业/部门
+export const addOrganization = data => request.post({ url: '/organization/addOrganization', data }) // 新增企业/部门
+export const updateOrganizationById = data => request.post({ url: '/organization/updateOrganizationById', data }) //修改企业/部门
+export const setIsValid = params => request.post({ url: '/organization/setIsValid', params }) //设置有效状态
+export const deleteById = id => request.delete({ url: '/organization/deleteById?id=' + id }) //删除
+export const getOrganizationById = appId => request.post({ url: '/organization/listOrganization?appId=' + appId })//查询所有
diff --git a/frontend/src/api/data-visualization/permission/role.ts b/frontend/src/api/data-visualization/permission/role.ts
new file mode 100644
index 0000000..6c119c0
--- /dev/null
+++ b/frontend/src/api/data-visualization/permission/role.ts
@@ -0,0 +1,10 @@
+import request from '@/data-visualization/config/axios'
+
+export const listRole = params => request.post({ url: '/role/listRole', params }) // 查询角色
+export const addRole = data => request.post({ url: '/role/addRole', data }) // 新增角色
+export const updateRole = data => request.post({ url: '/role/updateRole', data }) //修改企业/部门
+export const setIsValid = params => request.post({ url: '/role/setIsvaild', params }) //设置有效状态
+export const deleteRoleById = id => request.post({ url: '/role/deleteRoleById?id=' + id }) //删除
+export const deleteRoleByIds = id => request.post({ url: '/role/deleteRoleByIds?ids=' + id }) //删除
+export const permissionAssignment = params => request.post({ url: '/menuInterface/permissionAssignment', params }) //查询角色权限
+export const setMenuByRoleId = params => request.post({ url: '/role/setMenuByRoleId', params }) //设置角色权限
diff --git a/frontend/src/api/data-visualization/permission/user.ts b/frontend/src/api/data-visualization/permission/user.ts
new file mode 100644
index 0000000..57192b6
--- /dev/null
+++ b/frontend/src/api/data-visualization/permission/user.ts
@@ -0,0 +1,10 @@
+import request from '@/data-visualization/config/axios'
+
+export const queryUsers = params => request.get({ url: '/user/queryUsers', params }) // 查询用户
+export const addUser = data => request.post({ url: '/user/addUser', data }) // 新增用户
+export const updateUser = data => request.post({ url: '/user/updateUser', data }) //修改用户
+export const setStatus = params => request.post({ url: '/user/setStatus', params }) //设置有效状态
+export const deleteUserById = id => request.post({ url: '/user/deleteUserById?id=' + id }) //删除
+export const deleteUserByIds = id => request.post({ url: '/user/deleteUserByIds?ids=' + id }) //删除
+export const resetPassword = id => request.post({ url: '/user/resetPassword?id=' + id }) //重置密码
+export const userLogin = params => request.post({ url: '/user/login', params }) //登录
\ No newline at end of file
diff --git a/frontend/src/assets/system/add.png b/frontend/src/assets/system/add.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e178af097307c9a96cb0acd7126271cf2d3d973
GIT binary patch
literal 122
zcmeAS@N?(olHy`uVBq!ia0vp^d?3uh1|;P@bT0xa#^NA%Cx&(BWL^R}CY~;iAr}70
zDF;}0{d>>uJ=M@EDfp1ZD#7>%CI9X>nl?yC`W$@pU(zp`KXj96-!bK{m$ev<ozdx+
T<|uOk>SyqD^>bP0l+XkKdBY`$

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/system/logosmall.png b/frontend/src/assets/system/logosmall.png
new file mode 100644
index 0000000000000000000000000000000000000000..a200697795cd5b47523f480b5c47e87819596b87
GIT binary patch
literal 1094
zcmex=<NpH&0WUXCHwH#V1_nkTWcYuZ!5PS-41f%w%mkqB{|6WZIT*wkM41_t7?=bZ
znFSgDA7PLLIgWvu0SRz&FmZ7MrBnqNn3$M>7({{rGYb<dBO5ydhp>pC5GR+Ym?2P^
zD98X5z{&{}Ru+WnglT4AVrFDv6=D-)U>8;lRB~+me~W>KnGxs|W<dsfhGSLbYh$*4
zbqtL@yYnM+jB4=j>s4!0XS=B!spRt8uT?ER!*ao5Rc+t&$A8;r_-vTSVEOUYz1c6{
z73V%Pt;*M3vn@JwU){oAU5-J!wr(=bHI4DuAG>bN5!SXN@-r&coD%CUn5gqSm&>#h
z&yKDPF3k7)v@Ntud10pbB@>CzrKh=j4lLC8JmZ|@e}<WV(mzWk1xz#4crNkg^v){Z
zS95LIK1OGsHN8FY)rt3_(JuRMTfK7sH7l)6c6Ii)GM!T0dd@IjX{%jtBA%3bo99-C
zYOSenugs2#zF+m3Km6Bsp$hSW9?>=BDvv8$k|LWQ-O0LJdTD*f@%LFddtT{kFq{d|
zTD#uNI^wiLlDJS{^Tj#lH|`xcvD!}Nx_!9v@t<;<H(j4u+AFSl7E>1YZt9|4({pZp
zw((uKWw&6Q!YPqrmHOjn%@=;!yMCt7CToRBC-RKmWZzkD84>byZI^L{;LPhGGnEc+
za!NVluJ})~CCO(JYs0;;{m;4kU&+Ydc)GK$rEBY~Qsw8{uV3)E?Rhnn_xgka-e<}p
z+tZ?NEA|MdsHN@w&9X6I=A>nR?PQ$vmHPa4Y28U$HQ8(bxy_UHufJW|b#kM?Sq10B
zU$3o>xIg~;>DZ<0*cjdq8%w08od~;cd+D26irGxv^yhcVZU5EGwBcWU@zd+-NjYB8
zhM{FFZbg??%s$_&k$RK=QRr*0(&tUSJDvs2-uO4c(w%uqXJ_BD!@mW82XZ{J{3gDB
zR(zb6&)I_WvC$b1dKhdDF1w{UE8n>5^q(Uc#}uCkp1C~dVQ1pw;|1p}mvS07hb`Y0
zroTG!m$#kKS=Ez?e1F~U`nY_RU-9Bhmy^z4mRXyVnk2lcFYjTLVY{%5#c!kW^}-+T
z>WiOD`#$-O_W7dkSFG&rmTt|Rz4G?fjkn7FZkr!-{Y~DiqRBqjR*Q+6t-4+EO4Hwc
z$+abWrv2JDV>4r-;oq7W@8xW`)h_2gpZWTJHb(<PM2Dus(vGGh3@&0!%1nlWg7Wt}
lFEhrba(ut;60G8qs&ZJ_NXb%3Nm)sA(#)AN=iC3k2>`?fotFRr

literal 0
HcmV?d00001

diff --git a/frontend/src/assets/system/u594.png b/frontend/src/assets/system/u594.png
new file mode 100644
index 0000000000000000000000000000000000000000..719d3bd1ebdce15d48b709be2d84a81db47e007a
GIT binary patch
literal 346
zcmeAS@N?(olHy`uVBq!ia0vp^AhrMp8<5nmf9C+CSkfJR9T^xl_H+M9WCijWi-X*q
z7}lMWc?o2*c)B=-Xapyx9bnec)y@4TYf%#9?|+^_tA(?sriOXm{+gdZ-~Q&`zc@Kb
zXu+Ws3c9wo>`NXzeQkdKFEf)9P-MZzl`H>Vp1%J7d)t~XQYoe(5{wZI3E$@I>~`$Z
zi`i8Y?d$8ytkueJ=gu7)Y4iM>yg?;TUVQxg=+Psg08JJK&L$Pdu5EeuH_9*J)N1AO
zn{Qn&yCmb~r>CzSuQ|6GGF*Pl&M)5}k@ZSSD(S|W7RCvh-P3hqd5ykan_GQ;V-=I+
zfhJaw6A{g<k}9gpQv`T2Bp5UsTw}w^${0f=tQjJCyCf$BS5^I1d(6$tHeq>!qj~MK
qGe3I*3fC}*NN#qx`0L|ic7}i{Q=dHH?9KuP4uhwwpUXO@geCyAYlOuB

literal 0
HcmV?d00001

diff --git a/frontend/src/data-public/Dashboard.vue b/frontend/src/data-public/Dashboard.vue
index cd11279..6648a4f 100644
--- a/frontend/src/data-public/Dashboard.vue
+++ b/frontend/src/data-public/Dashboard.vue
@@ -52,7 +52,7 @@
     <div class="quick-actions">
       <h2>快捷操作</h2>
       <div class="actions-grid">
-        <el-card class="action-card" @click="$router.push('/users')">
+        <el-card class="action-card" @click="routerclick('/Permission')">
           <div class="action-content">
             <el-icon class="action-icon"><User /></el-icon>
             <span>用户管理</span>
@@ -128,9 +128,9 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useUserStore } from '@/store/user'
 import { User, UserFilled, OfficeBuilding, Document } from '@element-plus/icons-vue'
-
+import { useRouter } from 'vue-router'
 const userStore = useUserStore()
-
+const router = useRouter()
 // 统计数据
 const stats = reactive({
   userCount: 0,
@@ -184,6 +184,14 @@ const loadStats = async () => {
 onMounted(() => {
   loadStats()
 })
+function routerclick(path) {
+  router.push({
+    path: path,
+    query: {
+      id: '1927554158852841473'
+    }
+  })
+}
 </script>
 
 <style lang="scss" scoped>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index a27ef83..d814ad2 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -98,6 +98,15 @@ const routes:any = [
       title: '页面未找到',
       requiresAuth: false
     }
+  },
+  {
+    path: '/Permission',
+    name: 'Permission',
+    component: () => import('@/views/system/permissionset/index.vue'),
+    meta: {
+      title: '权限管理',
+      requiresAuth: true
+    }
   }
 ]
 
@@ -115,11 +124,12 @@ router.beforeEach((to, from, next) => {
   
   // 检查是否需要认证
   if (to.meta.requiresAuth) {
-    if (userStore.isAuthenticated) {
-      next()
-    } else {
-      next('/login')
-    }
+    next()
+    // if (userStore.isAuthenticated) {
+    //   next()
+    // } else {
+    //   next('/login')
+    // }
   } else {
     // 如果已登录且访问登录页，重定向到仪表板
     if (to.path === '/login' && userStore.isAuthenticated) {
diff --git a/frontend/src/views/system/permissionset/header.vue b/frontend/src/views/system/permissionset/header.vue
new file mode 100644
index 0000000..808f66c
--- /dev/null
+++ b/frontend/src/views/system/permissionset/header.vue
@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import {ref, onMounted,watch } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+const props = defineProps({
+  projectInfo: {
+    type: String,
+    default: ''
+  }
+})
+const projectInfo:any=ref({
+  
+})
+watch(() => props.projectInfo, val => {
+  projectInfo.value = props.projectInfo
+})
+onMounted(()=>{
+  projectInfo.value = props.projectInfo
+})
+
+</script>
+<template>
+<div class="project-header-box">
+  <div class="project-header-left">
+    <div class="return-box" @click="$router.go(-1)">
+      <img src="@/assets/system/u594.png" alt="">
+    </div>
+    <img src="@/assets/system/logosmall.png" alt="" style="margin-left: 10px;">
+    <div class="header-title">{{projectInfo.name  }} - {{ projectInfo.typename }}</div>
+  </div>
+</div>
+</template>
+
+<style lang="less" scoped>
+.project-header-box{
+  width: 100%;
+  height: 60px;
+  background-color: rgba(37, 38, 38, 1);
+  box-sizing: border-box;
+  border-bottom: 1px solid rgba(79, 80, 82, 1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 0 10px;
+  .project-header-left{
+    display: flex;
+    align-items: center;
+  }
+  .project-header-right{
+    display: flex;
+    align-items: center;
+  }
+  .return-box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 36px;
+    height: 36px;
+    cursor: pointer;
+  }
+  .return-box:hover{
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+  .header-title{
+    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
+    font-weight: 700;
+    font-style: normal;
+    font-size: 16px;
+    color: #F2F4F5;
+    padding-left: 14px;
+  }
+  .preview-button{
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    background-color: rgba(54, 55, 56, 1);
+    border: none;
+    border-radius: 4px;
+    font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    color: #F2F4F5;
+    text-align: center;
+    cursor: pointer;
+  }
+  .design-button{
+    width: 60px;
+    height: 30px;
+    line-height: 30px;
+    background-color: rgba(0, 137, 255, 1);
+    border: none;
+    border-radius: 4px;
+    font-family: 'Arial Normal', 'Arial';
+    font-weight: 400;
+    font-style: normal;
+    font-size: 14px;
+    color: #F2F4F5;
+    text-align: center;
+    margin-left: 10px;
+    cursor: pointer;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/permissionset/index.vue b/frontend/src/views/system/permissionset/index.vue
new file mode 100644
index 0000000..a9e7a50
--- /dev/null
+++ b/frontend/src/views/system/permissionset/index.vue
@@ -0,0 +1,228 @@
+<script lang="ts" setup>
+import Header from './header.vue'
+// import { findApplicationById } from "@/api/application/application";
+import { useRoute, useRouter } from 'vue-router'
+import { computed,reactive, ref, shallowRef, nextTick, watch, onMounted } from 'vue'
+import Organization from '@/views/system/permissionset/organization/index.vue'
+import Role from '@/views/system/permissionset/role/index.vue'
+import User from '@/views/system/permissionset/user/index.vue'
+const projectInfo:any =ref({})
+const route = useRoute()
+const router = useRouter()
+const applicationId:any =ref("")
+const curmenu = ref('')
+onMounted(() => {
+  if (route.query.id) {
+    applicationId.value = route.query.id
+    curmenu.value = '组织机构配置'
+    // findApplicationById(applicationId.value).then(res => {
+    //   res.data.data.typename = '权限设置'
+    //   projectInfo.value = res.data.data
+    // })
+  }else{
+    
+  }
+})
+function menuclick(name){
+  curmenu.value = name
+}
+</script>
+
+<template>
+   <div>
+      <Header v-if="!route.query.name" :projectInfo="projectInfo"/>
+      <div class="permission-box">
+        <div class="permission-leftbox">
+          <div class="permission-leftbox-menu" :class="curmenu == '组织机构配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('组织机构配置')">组织机构配置</div>
+          <div class="permission-leftbox-menu" :class="curmenu == '系统角色配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('系统角色配置')">系统角色配置</div>
+          <div class="permission-leftbox-menu" :class="curmenu == '系统用户配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('系统用户配置')">系统用户配置</div>
+        </div>
+        <div class="permission-rightbox">
+          <Organization v-if="curmenu == '组织机构配置'" :applicationId="applicationId" />
+          <Role v-if="curmenu == '系统角色配置'" :applicationId="applicationId" />
+          <User v-if="curmenu == '系统用户配置'" :applicationId="applicationId" />
+        </div>
+      </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.permission-box{
+   background: #E3E8F0;
+   height: calc(100vh - 60px);
+   display: flex;
+   .permission-leftbox{
+      width: 260px;
+      height: 100%;
+      // border-right: 1px solid #4f5052;
+      // box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
+      background: #fff;
+      padding-top: 10px;
+      .permission-leftbox-menu{
+        width: 100%;
+        height: 40px;
+        line-height: 40px;
+        color: #505050;
+        font-size: 14px;
+        padding-left: 35px;
+        cursor: pointer;
+      }
+      .permission-leftbox-menu:hover{
+        color: #0099ff;
+      }
+      .permission-leftbox-menu-active{
+        background: rgba(64, 158, 255,0.1);
+        color: #0099ff;
+      }
+   }
+   .permission-rightbox{
+      width: calc(100% - 260px);
+      height: 100%;
+      padding: 13px;
+   }
+}
+  :deep(.el-tree){
+    background:#ffffff;
+    height: calc(100vh - 210px);
+    overflow: auto;
+    color: #505050;
+    font-size: 14px;
+   }
+   :deep(.el-tree-node__content){
+    height: 40px;
+    line-height: 40px;
+  }
+  :deep(.el-tree-node__content:hover){
+    background:#ffffff;
+    color: #409eff;
+  }
+  :deep(.custom-tree-node){
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+  }
+  :deep(.el-tree-node__content>.ed-tree-node__expand-icon){
+    padding: 2px;
+  }
+  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
+    background: rgba(64, 158, 255,0.1);
+    color: #409eff;
+  }
+  :deep(.el-tree-node:focus>.el-tree-node__content){
+    background:#ffffff;
+    color: #409eff;
+  }
+  :deep(.ed-input__wrapper){
+    background: #ffffff;
+    border: 1px solid #dcdfe6;
+    box-shadow: none;
+  }
+  :deep(.ed-input__inner){
+    color: #383838;
+  }
+  :deep(.ed-button){
+    border-color: #dcdfe6;
+  }
+  :deep(.ed-button--primary){
+    background-color:#409eff;
+    color: #ffffff;
+    border-color: #409eff;
+  }
+  :deep(.ed-button.is-disabled){
+    background: #ffffff; 
+    color:#C9C9C9;
+    border-color: #f2f2f2; 
+  }
+  :deep(.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover){
+    background: #ffffff; 
+    color:#C9C9C9;
+    border-color: #f2f2f2;
+  }
+  :deep(.el-table){
+    background-color: #ffffff;
+  }
+  :deep(.el-table th.el-table__cell){
+    background-color: #fafafa;
+    border-color: #f0f1f2;
+    color: #787878 ;
+  }
+  :deep(.el-table tr){
+    background-color: #ffffff;
+    border-color: #f0f1f2;
+  }
+  :deep(.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before){
+    background-color: #f0f1f2;
+  }
+  :deep(.el-table__border-bottom-patch, .el-table__border-left-patch){
+    background-color: #f0f1f2;
+  }
+  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
+    border-color: #f0f1f2;
+  }
+  :deep(.el-table .el-table__cell){
+    background: #ffffff;
+    color: #787878;
+  }
+  :deep(.el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right){
+    background-color: #ffffff;
+  }
+  :deep(.hover-row > td){
+    background: rgb(247,251,255) !important;
+  }
+  :deep(.ed-checkbox__input.is-checked .ed-checkbox__inner) {
+    background-color: #409eff;
+    border-color: #409eff;
+  }
+  :deep(.ed-switch.is-checked .ed-switch__core){
+    border-color: #409eff;
+    background-color: #409eff;
+  }
+  :deep(.ed-checkbox__input.is-indeterminate .ed-checkbox__inner){
+    border-color: #409eff;
+    background-color: #409eff;
+  }
+  :deep(.ed-input.is-disabled .ed-input__wrapper){
+    box-shadow: none;
+  }
+  :deep(.ed-textarea__inner){
+    border: 1px solid #dcdfe6;
+    box-shadow: none;
+  }
+  :deep(.ed-select .ed-input.is-focus .ed-input__wrapper){
+    box-shadow: none !important;
+  }
+  :deep(.ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper){
+    box-shadow: none !important;
+  }
+  :deep(.ed-select .ed-input__wrapper.is-focus){
+    box-shadow: none !important;
+  }
+  :deep(.ed-dialog__header){
+    padding: 13px 20px;
+    border-bottom: 1px solid #f2f2f2;
+    margin-right: 0px;
+    background-color: #f8f8f8;
+  }
+  :deep(.ed-dialog__headerbtn){
+    color: #323232;
+    top: 11px !important;
+    right: 15px !important;
+  }
+  :deep(.ed-dialog__title){
+    color: #323232;
+  }
+  :deep(.ed-form-item.is-error .ed-input__wrapper){
+    box-shadow:none;
+    border: 1px solid #f54a45;
+  }
+  :deep(.ed-pagination__total){
+    color: #1f2329 !important;
+  }
+  :deep(.ed-checkbox__inner){
+    background-color: #ffffff !important;
+    border:1px solid #bbbfc4 !important;
+  }
+</style>
diff --git a/frontend/src/views/system/permissionset/organization/index.vue b/frontend/src/views/system/permissionset/organization/index.vue
new file mode 100644
index 0000000..e6c2275
--- /dev/null
+++ b/frontend/src/views/system/permissionset/organization/index.vue
@@ -0,0 +1,562 @@
+<script lang="ts" setup>
+import { ref, onMounted} from 'vue'
+import icon_permission_del_white from '@/assets/svg/permission_del_white.svg'
+import icon_permission_edit_white from '@/assets/svg/permission_edit_white.svg'
+import icon_permission_edit_blue from '@/assets/svg/permission_edit_blue.svg'
+import icon_permission_del_blue from '@/assets/svg/permission_del_blue.svg'
+import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
+import permission_table_del_blue from '@/assets/svg/permission_table_del_blue.svg'
+import icon_add from '@/assets/svg/add_white.svg'
+import type { FormInstance } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Delete } from '@element-plus/icons-vue'
+import { ElTable,ElTree } from 'element-plus'
+import { getOrganizations,addOrganization,setIsValid,updateOrganizationById,
+  deleteById,getOrganizationById } from '@/api/data-visualization/permission/organization'
+const props = defineProps({
+  applicationId:String
+})
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const treeData:any = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'orgname'
+}
+const treeloading = ref(false);
+const hoverNodeId = ref(null);
+const currentNodeId = ref(null);
+const preventcombo = ref(false)
+const dialogVisible = ref(false);
+const title = ref('新增企业');
+const ruleForm = ref();
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  orgname: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+  ],
+})
+const queryorgname = ref('')
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref([])
+const tableData = ref([])
+const tableloading = ref(false);
+const deptdialog = ref(false);
+const depttitle = ref('新增部门')
+const deptForm = ref();
+const deptFormRef = ref<FormInstance>()
+const deptrules = ref({
+  orgname: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+  ],
+})
+const handleMouseEnter = (node) => {
+  hoverNodeId.value = node.key; 
+};
+const handleMouseLeave = () => {
+  hoverNodeId.value = null;
+};
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      if(preventcombo.value){
+        return
+      }
+      preventcombo.value = true
+      if(ruleForm.value.id !== ''){
+        updateOrganizationById(ruleForm.value).then(res => {
+          ElMessage({
+            type: 'success',
+            message: '修改成功',
+          })
+          dialogVisible.value = false
+          preventcombo.value = false
+          gettree()
+        })
+      }else{
+        addOrganization(ruleForm.value).then(res => {
+          ElMessage({
+            type: 'success',
+            message: '新增成功',
+          })
+          dialogVisible.value = false
+          preventcombo.value = false
+          gettree()
+        })
+      }
+    } else {
+      return false
+    }
+  })
+}
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  dialogVisible.value = false
+}
+const deptsubmitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      if(preventcombo.value){
+        return
+      }
+      preventcombo.value = true
+      const params = {
+        id:deptForm.value.id,
+        appId:deptForm.value.appId,
+        orgname: deptForm.value.orgname,
+        orgcode: deptForm.value.orgcode,
+        orgtype: deptForm.value.orgtype,
+        parentid:deptForm.value.parentid,
+        manager:deptForm.value.manager,
+        description:deptForm.value.description,
+        address:deptForm.value.address,
+        isvaild:deptForm.value.isvaild,
+        contactPhone:deptForm.value.contact_phone,
+        contactPerson:deptForm.value.contact_person
+      }
+      if(deptForm.value.id !== ''){
+        updateOrganizationById(params).then(res => {
+          ElMessage({
+            type: 'success',
+            message: '新增成功',
+          })
+          deptdialog.value = false
+          preventcombo.value = false
+          getdept(currentNodeId.value)
+        })
+      }else{
+        addOrganization(params).then(res => {
+          ElMessage({
+            type: 'success',
+            message: '新增成功',
+          })
+          deptdialog.value = false
+          preventcombo.value = false
+          getdept(currentNodeId.value)
+        })
+      }
+    } else {
+      return false
+    }
+  })
+}
+const deptresetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  deptdialog.value = false
+}
+const handleSelectionChange = (val:any) => {
+  multipleSelection.value = val
+}
+onMounted(() => {
+  treeData.value = []
+  gettree()
+})
+function gettree(){
+  treeloading.value = true
+  hoverNodeId.value = null
+  currentNodeId.value = null
+  queryorgname.value = ''
+  treeRef.value!.setCurrentKey(null)
+  const params = {
+    appId: props.applicationId,
+    orgtype:'01',
+    parentid:'0',
+    orgName:''
+  }
+  getOrganizations(params).then((res:any) => {
+    console.log(res,8798798)
+    treeData.value = res.data
+    treeloading.value = false
+  })
+}
+function getdept(id:any){
+  tableloading.value = true
+  const params = {
+    appId: props.applicationId,
+    orgtype:'02',
+    parentid:id,
+    orgName:''
+  }
+  console.log(params,'params')
+  getOrganizations(params).then(res => {
+    tableData.value = res.data
+    tableloading.value = false
+    if(currentNodeId.value != null){
+      treeRef.value!.setCurrentKey(currentNodeId.value)
+    }
+  })
+}
+function querydept(){
+  tableloading.value = true
+  const params = {
+    appId: props.applicationId,
+    orgtype:'02',
+    parentid:currentNodeId.value,
+    orgName:queryorgname.value
+  }
+  getOrganizations(params).then(res => {
+    tableData.value = res.data
+    tableloading.value = false
+    if(currentNodeId.value != null){
+      treeRef.value!.setCurrentKey(currentNodeId.value)
+    }
+  })
+}
+function nodeclick(data:any,node:any){
+  currentNodeId.value = node.key
+  getdept(data.id)
+}
+function addtree(data:any){
+  ruleForm.value = {
+    id:'',
+    appId:props.applicationId,
+    orgname: '',
+    orgcode: '',
+    orgtype: '01',
+    parentid:'0'
+  }
+  title.value = '新增企业'
+  dialogVisible.value = true
+}
+function edittree(data:any){
+  title.value = '修改企业'
+  ruleForm.value = JSON.parse(JSON.stringify(data))
+  dialogVisible.value = true
+}
+function deltree(data:any){ 
+  ElMessageBox.confirm(
+    '确定删除该条信息吗?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+      deleteById(data.id).then(res => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+        gettree()
+      })
+    })
+    .catch(() => {
+      if(currentNodeId.value != null){
+      treeRef.value!.setCurrentKey(currentNodeId.value)
+    }
+    })
+}
+function setisValid(row:any){
+  tableloading.value = true
+  const params = {
+    id:row.id,
+    isvaild:row.isvaild
+  }
+  setIsValid(params).then(res => {
+    console.log(res,'res')
+    if(res.code == '0'){
+      getdept(currentNodeId.value)
+      ElMessage.success('设置成功')
+    }else{
+      ElMessage.error('设置失败')
+    }
+    tableloading.value = false
+  })
+}
+function edittable(data:any){ 
+  depttitle.value = '修改企业'
+  deptForm.value = JSON.parse(JSON.stringify(data))
+  deptdialog.value = true
+}
+function deltable(row:any){ 
+  ElMessageBox.confirm(
+    '确定删除该条信息吗?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+      deleteById(row.id).then(res => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+        getdept(currentNodeId.value)
+      })
+    })
+    .catch(() => {
+
+    })
+}
+function deltables(){
+  ElMessageBox.confirm(
+    '确定删除该条信息吗?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const arr = []
+      multipleSelection.value.forEach(e => {
+        arr.push(e.id)
+      });
+      deleteById(arr.join()).then(res => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+        getdept(currentNodeId.value)
+      })
+    })
+    .catch(() => {
+      
+    })
+}
+function addtable(){
+  if(currentNodeId.value == '' || currentNodeId.value == null){
+    ElMessage({
+      type: 'warning',
+      message: '请选择企业！',
+    })
+    return
+  }
+  deptForm.value = {
+    id:'',
+    appId:props.applicationId,
+    orgname: '',
+    orgcode: '',
+    orgtype: '02',
+    parentid:currentNodeId.value,
+    manager:'',
+    description:'',
+    address:'',
+    isvaild:'1',
+    contactPhone:'',
+    contactPerson:''
+  }
+  depttitle.value = '新增部门'
+  deptdialog.value = true
+}
+function handleClose() {
+  ruleFormRef.value?.resetFields();
+  dialogVisible.value = false;
+}
+function depthandleClose() {
+  deptFormRef.value?.resetFields();
+  deptdialog.value = false
+}
+function formatDateTime(dateArray:any){
+  if (!Array.isArray(dateArray) || dateArray.length < 6) return 'Invalid Date'
+  
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  
+  return `${dateArray[0]}-${pad(dateArray[1])}-${pad(dateArray[2])} ` +
+         `${pad(dateArray[3])}:${pad(dateArray[4])}:${pad(dateArray[5])}`
+}
+</script>
+<template>
+   <div class="organization-box">
+      <div class="organization-leftbox">
+        <div class="leftbox-title">企业列表</div>
+        <div class="leftbox-btn" @click="addtree">
+          <img src="@/assets/system/add.png" style="margin-right: 5px;" alt="">
+          <span>新增企业</span>
+        </div>
+        <el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
+          default-expand-all :expand-on-click-node="false" highlight-current
+          @node-click="nodeclick" style="margin-top: 15px;">
+          <template #default="{ node, data }">
+            <div class="custom-tree-node" @mouseenter="handleMouseEnter(node)"
+            @mouseleave="handleMouseLeave()">
+            <div>{{ node.label }}</div>
+            <div v-show="hoverNodeId === node.key || currentNodeId === node.key" style="display: flex;" >
+              <div>
+                <el-icon v-if="currentNodeId === node.key" @click.stop="edittree(data)">
+                  <icon_permission_edit_blue class="svg-icon"/>
+                </el-icon>
+                <el-icon v-else @click.stop="edittree(data)">
+                  <icon_permission_edit_blue class="svg-icon"/>
+                </el-icon>
+              </div>
+              <div style="margin-left: 8px;">
+                <el-icon v-if="currentNodeId === node.key" @click.stop="deltree(data)" style="cursor: pointer;">
+                  <icon_permission_del_blue class="svg-icon"/>
+                </el-icon>
+                <el-icon v-else @click.stop="deltree(data)" style="cursor: pointer;">
+                  <icon_permission_del_blue class="svg-icon" />
+                </el-icon>
+              </div>
+            </div>
+            </div>
+          </template>
+        </el-tree>
+      </div>
+      <div class="organization-rightbox">
+        <div class="querybox">
+          <div>
+            <el-input v-model="queryorgname" placeholder="请输入部门名称" style="width: 200px;margin-right: 10px;" />
+            <el-button type="primary" style="min-width: 50px;" @click="querydept">搜索</el-button>
+          </div>
+          <div>
+            <el-button type="primary" style="min-width: 50px;" @click="addtable">
+              <el-icon style="margin-right: 3px;">
+                <icon_add class="svg-icon" />
+              </el-icon>新增
+            </el-button>
+            <el-button :type="multipleSelection.length>0?'primary':''" :disabled="multipleSelection.length>0?false:true" @click="deltables" style="min-width: 50px;">
+              <el-icon style="margin-right: 3px;"><Delete /></el-icon>删除
+            </el-button>
+          </div>
+        </div>
+        <el-table class="whitetable" v-loading="tableloading" ref="multipleTableRef" :data="tableData" border style="width: 100%"
+          @selection-change="handleSelectionChange" height="calc(100vh - 175px)">
+          <el-table-column type="selection" width="55" /> 
+          <el-table-column prop="orgcode" label="部门编号" width="90"/>
+          <el-table-column prop="orgname" label="部门名称"/>
+          <el-table-column prop="manager" label="负责人"/>
+          <el-table-column prop="description" label="部门描述"/>
+          <el-table-column prop="contact_person" label="联系人"/>
+          <el-table-column prop="contact_phone" label="联系电话"/>
+          <!-- <el-table-column prop="address" label="联系地址"/> -->
+          <el-table-column prop="isvaild" label="是否有效" width="110">
+            <template #default="scope">
+              <el-switch v-model="scope.row.isvaild" active-value="1" inactive-value="0"  style="margin-right: 10px;" @change="setisValid(scope.row)"/> 
+              <span v-if="scope.row.isvaild == '1'" style="color: #0089ff;font-size: 14px;">有效</span>
+              <span v-else-if="scope.row.isvaild == '0'" style="color: #bbbfc4;font-size: 14px;">无效</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="lastmodifier" label="最近修改者"/>
+          <el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
+            <template #default="scope">
+                <span v-if="scope.row.lastmodifydate !== ''">{{formatDateTime(scope.row.lastmodifydate)}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="80">
+            <template  #default="scope">
+              <el-icon style="font-size: 16px;margin-right: 18px;cursor: pointer;" @click="edittable(scope.row)">
+                <permission_table_edit_blue class="svg-icon"/> 
+              </el-icon>
+              <el-icon style="font-size: 16px;cursor: pointer;" @click="deltable(scope.row)">
+                <permission_table_del_blue class="svg-icon"/> 
+              </el-icon>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
+        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
+          <el-form-item label="企业编号" prop="orgcode">
+            <el-input v-model="ruleForm.orgcode" disabled placeholder="系统自动生成" />
+          </el-form-item>
+          <el-form-item label="企业名称" prop="orgname">
+            <el-input v-model="ruleForm.orgname"  placeholder="请输入企业名称" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+            <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+          </span>
+        </template>
+      </el-dialog>
+      <el-dialog v-model="deptdialog" :title="depttitle" width="30%" :before-close="depthandleClose">
+        <el-form ref="deptFormRef" :model="deptForm" :rules="deptrules" label-width="80px" class="demo-ruleForm">
+          <el-form-item label="部门编号" prop="orgcode">
+            <el-input v-model="deptForm.orgcode" disabled placeholder="系统自动生成" />
+          </el-form-item>
+          <el-form-item label="部门名称" prop="orgname">
+            <el-input v-model="deptForm.orgname" placeholder="请输入部门名称" />
+          </el-form-item>
+          <el-form-item label="负责人" prop="manager">
+            <el-input v-model="deptForm.manager" placeholder="请输入负责人" />
+          </el-form-item>
+          <el-form-item label="部门描述" prop="description">
+            <el-input type="textarea" :rows="4" v-model="deptForm.description" placeholder="请输入部门描述"  />
+          </el-form-item>
+          <el-form-item label="联系人" prop="contact_person">
+            <el-input v-model="deptForm.contact_person" placeholder="请输入联系人"  />
+          </el-form-item>
+          <el-form-item label="联系电话" prop="contact_phone">
+            <el-input v-model="deptForm.contact_phone" placeholder="请输入联系电话"  />
+          </el-form-item>
+          <el-form-item label="联系地址" prop="address">
+            <el-input v-model="deptForm.address" placeholder="请输入联系地址"  />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="deptresetForm(deptFormRef)">取消</el-button>
+            <el-button type="primary" @click="deptsubmitForm(deptFormRef)">确定</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.organization-box{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .organization-leftbox{
+    width: 240px;
+    height: 100%;
+    border-radius: 5px;
+    margin-right: 15px;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
+    .leftbox-title{
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
+      font-weight: 700;
+      font-style: normal;
+      font-size: 15px;
+      color: #000000;
+      border-bottom: 1px solid #e8e8e8;
+      padding-left: 20px;
+    }
+    .leftbox-btn{
+      width: 200px;
+      height: 40px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: #409eff;
+      border-radius: 3px;
+      font-size: 14px;
+      color: #409eff;
+      margin: 0 auto;
+      margin-top: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+    }
+    .leftbox-btn:hover{
+      background: rgba(64, 158, 255,0.1);
+    }
+  }
+  .organization-rightbox{
+    width: calc(100% - 240px);
+    height: 100%;
+    background: #ffffff;
+    border-radius: 5px;
+    padding: 20px;
+  }
+  .querybox{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+}
+</style>
diff --git a/frontend/src/views/system/permissionset/role/index.vue b/frontend/src/views/system/permissionset/role/index.vue
new file mode 100644
index 0000000..6d79798
--- /dev/null
+++ b/frontend/src/views/system/permissionset/role/index.vue
@@ -0,0 +1,381 @@
+<script lang="ts" setup>
+import { ref, onMounted,nextTick} from 'vue'
+import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
+import permission_table_del_blue from '@/assets/svg/permission_table_del_blue.svg'
+import perission_role_blue from '@/assets/svg/perission_role_blue.svg'
+import icon_add from '@/assets/svg/add_white.svg'
+import type { FormInstance } from 'element-plus'
+import { Delete } from '@element-plus/icons-vue'
+import { ElTable,ElTree,ElMessage, ElMessageBox } from 'element-plus'
+import { listRole,addRole,updateRole,setIsValid,deleteRoleById,deleteRoleByIds,
+  permissionAssignment,setMenuByRoleId } from '@/api/data-visualization/permission/role'
+const props = defineProps({
+  applicationId:String
+})
+const tableloading = ref(false)
+const dialogVisible = ref(false);
+const title = ref('新增角色');
+const preventcombo = ref(false)
+const ruleForm = ref();
+const ruleFormRef = ref<FormInstance>()
+const rules = ref({
+  rolename: [
+    { required: true, message: '请输入名称', trigger: 'blur' },
+  ],
+  type: [
+    { required: true, message: '请选择角色类别', trigger: 'change' },
+  ],
+})
+const queryrolename = ref('')
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref([])
+const tableData = ref([])
+const typeoptions = ref([
+  { value: '1', label: '管理员' },
+  { value: '2', label: '普通用户' },
+])
+const configdialog = ref(false)
+const treeData:any = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'name'
+}
+const treeloading = ref(false);
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const currenttableid = ref('')
+const Passparameter = ref([])
+//默认展开节点的key数组
+const DefaultDeployment: any = ref([])
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid) => {
+    if (valid) {
+      if(preventcombo.value){
+        return
+      }
+      preventcombo.value = true
+      if(ruleForm.value.id !== ''){
+        updateRole(ruleForm.value).then(res => {
+          ElMessage({
+            type: 'success',
+            message: '修改成功',
+          })
+          dialogVisible.value = false
+          preventcombo.value = false
+          queryrolename.value = ''
+          gettable()
+        })
+      }else{
+        addRole(ruleForm.value).then(res => {
+          ElMessage({
+            type: 'success',
+            message: '新增成功',
+          })
+          dialogVisible.value = false
+          preventcombo.value = false
+          queryrolename.value = ''
+          gettable()
+        })
+      }
+    } else {
+      return false
+    }
+  })
+}
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  dialogVisible.value = false
+}
+
+const handleSelectionChange = (val:any) => {
+  multipleSelection.value = val
+}
+onMounted(() => {
+  gettable()
+})
+function permissionset(row:any){
+  currenttableid.value = row.id
+  configdialog.value = true
+  treeloading.value = true
+  const params = { 
+    roleId: row.id,
+    appId: props.applicationId,
+  }
+  permissionAssignment(params).then(res => {
+    treeData.value = res.data
+    let ids: any = []
+    menuChange(res.data, ids)
+    nextTick(() => {
+      treeRef.value!.setCheckedKeys(ids)
+    })
+    treeloading.value = false
+   })
+   
+}
+function gettable(){
+  tableloading.value = true
+  const params = {
+    appId: props.applicationId,
+    rolename:''
+  }
+  listRole(params).then(res => {
+    tableData.value = res.data
+    tableloading.value = false
+  })
+}
+function querytable(){
+  tableloading.value = true
+  const params = {
+    appId: props.applicationId,
+    rolename:queryrolename.value
+  }
+  listRole(params).then(res => {
+    tableData.value = res.data
+    tableloading.value = false
+  })
+}
+function edittable(data:any){ 
+  title.value = '修改角色'
+  ruleForm.value = JSON.parse(JSON.stringify(data))
+  dialogVisible.value = true
+}
+function deltable(row:any){ 
+  ElMessageBox.confirm(
+    '确定删除该条信息吗?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+      deleteRoleById(row.id).then(res => {
+        if(res.code == '0'){
+          gettable()
+          ElMessage({
+            type: 'success',
+            message: '删除成功',
+          })
+        }else{
+          ElMessage.error('删除失败')
+        }
+      })
+    }).catch(() => { 
+    })
+}
+function deltables(){
+  ElMessageBox.confirm(
+    '确定删除该条信息吗?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    const arr = []
+    multipleSelection.value.forEach(e => {
+      arr.push(e.id)
+    });
+    deleteRoleByIds(arr.join()).then(res => {
+      if(res.data.code == '0'){
+        gettable()
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+      }else{
+        ElMessage.error('删除失败')
+      }
+    }) 
+  }).catch(() => {})
+}
+function addtable(){
+  ruleForm.value = {
+    id:'',
+    appId:props.applicationId,
+    rolename: '',
+    rolecode: '',
+    type: '',
+    description:'',
+    isvaild:'1',
+  }
+  title.value = '新增角色'
+  dialogVisible.value = true
+}
+function handleClose() {
+  ruleFormRef.value?.resetFields();
+  dialogVisible.value = false;
+}
+function formatDateTime(dateArray:any){
+  if (!Array.isArray(dateArray) || dateArray.length < 6) return 'Invalid Date'
+  
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  
+  return `${dateArray[0]}-${pad(dateArray[1])}-${pad(dateArray[2])} ` +
+         `${pad(dateArray[3])}:${pad(dateArray[4])}:${pad(dateArray[5])}`
+}
+function setisValid(row:any){
+  tableloading.value = true
+  const params = {
+    id:row.id,
+    isvaild:row.isvaild
+  }
+  setIsValid(params).then(res => {
+    if(res.code == '0'){
+      gettable()
+      ElMessage.success('设置成功')
+    }else{
+      ElMessage.error('设置失败')
+    }
+    tableloading.value = false
+  })
+}
+function confighandleClose(){ 
+  configdialog.value = false
+}
+function consfigsubmit(){
+  const params = { 
+    id: currenttableid.value,
+    menuIds: Passparameter.value.join(',') 
+  }
+  setMenuByRoleId(params).then(res => {
+    if(res.code == '0'){
+      gettable()
+      ElMessage.success('设置成功')
+    }else{
+      ElMessage.error('设置失败')
+    }
+  })
+  configdialog.value = false
+}
+function currentChecked(nodeObj: any, SelectedObj: any){
+  Passparameter.value = SelectedObj.checkedKeys.concat(SelectedObj.halfCheckedKeys)
+}
+function menuChange(data: any, ids: any) {
+  data.forEach((item: any) => {
+    if (item.checkinfo == true) {
+      ids.push(item.id)
+      DefaultDeployment.value.push(item.id)
+    }
+    if (item.children) {
+      menuChange(item.children, ids)
+    }
+  })
+}
+</script>
+<template>
+   <div class="organization-box">
+      <div class="querybox">
+        <div>
+          <el-input v-model="queryrolename" placeholder="请输入角色名称" style="width: 200px;margin-right: 10px;" />
+          <el-button type="primary" style="min-width: 50px;" @click="querytable">搜索</el-button>
+        </div>
+        <div>
+          <el-button type="primary" style="min-width: 50px;" @click="addtable">
+            <el-icon style="margin-right: 3px;">
+              <icon_add class="svg-icon" />
+            </el-icon>新增
+          </el-button>
+          <el-button :type="multipleSelection.length>0?'primary':''" :disabled="multipleSelection.length>0?false:true" @click="deltables" style="min-width: 50px;">
+            <el-icon style="margin-right: 3px;"><Delete /></el-icon>删除
+          </el-button>
+        </div>
+      </div>
+      <el-table v-loading="tableloading"  ref="multipleTableRef" :data="tableData" border style="width: 100%"
+        @selection-change="handleSelectionChange"  height="calc(100vh - 175px)">
+        <el-table-column type="selection" width="55" /> 
+        <el-table-column prop="rolecode" label="角色编号" width="130"/>
+        <el-table-column prop="rolename" label="角色名称"/>
+        <el-table-column prop="type" label="角色级别" width="150">
+          <template #default="scope">
+            <span v-if="scope.row.type == '1'" style="font-size: 14px;">管理员</span>
+            <span v-else-if="scope.row.type == '2'" style="font-size: 14px;">普通用户</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="description" label="角色描述"/>
+        <el-table-column prop="isvaild" label="是否有效" width="110">
+          <template #default="scope">
+            <el-switch v-model="scope.row.isvaild" active-value="1" inactive-value="0"  style="margin-right: 10px;" @change="setisValid(scope.row)"/> 
+            <span v-if="scope.row.isvaild == '1'" style="color: #0089ff;font-size: 14px;">有效</span>
+            <span v-else-if="scope.row.isvaild == '0'" style="color: #bbbfc4;font-size: 14px;">无效</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="lastmodifier" label="最近修改者" width="120"/>
+        <el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
+            <template #default="scope">
+              <span v-if="scope.row.lastmodifydate">{{formatDateTime(scope.row.lastmodifydate)}}</span>
+            </template>
+        </el-table-column>
+        <el-table-column fixed="right" label="操作" width="100">
+          <template  #default="scope">
+            <el-icon title="修改" style="font-size: 16px;cursor: pointer;" @click="edittable(scope.row)">
+              <permission_table_edit_blue class="svg-icon"/> 
+            </el-icon>
+            <el-icon title="权限分配" style="font-size: 16px;margin:0px 10px;cursor: pointer;" @click="permissionset(scope.row)">
+              <perission_role_blue class="svg-icon"/> 
+            </el-icon>
+            <el-icon title="删除" style="font-size: 16px;cursor: pointer;" @click="deltable(scope.row)">
+              <permission_table_del_blue class="svg-icon"/> 
+            </el-icon>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
+        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
+          <el-form-item label="角色编号" prop="rolecode">
+            <el-input v-model="ruleForm.rolecode" disabled  placeholder="系统自动生成"/>
+          </el-form-item>
+          <el-form-item label="角色名称" prop="rolename">
+            <el-input v-model="ruleForm.rolename" placeholder="请输入角色名称" />
+          </el-form-item>
+          <el-form-item label="角色级别" prop="type">
+            <el-select v-model="ruleForm.type" placeholder="请选择角色级别" style="width:100%;">
+              <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="角色描述" prop="description">
+            <el-input type="textarea" :rows="4" v-model="ruleForm.description"  placeholder="请输入角色描述" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+            <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+          </span>
+        </template>
+      </el-dialog>
+      <el-dialog v-model="configdialog" title="角色权限配置" width="30%" :before-close="confighandleClose">
+        <el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
+          default-expand-all :expand-on-click-node="false" show-checkbox @check="currentChecked"
+          style="height: calc(100vh - 300px);overflow: auto;">
+        </el-tree>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="confighandleClose">取消</el-button>
+            <el-button type="primary" @click="consfigsubmit">确定</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.organization-box{
+  width: 100%;
+  height: 100%;
+  background: #ffffff;
+  box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
+  border-radius: 5px;
+  padding: 20px;
+  .querybox{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+}
+:deep(.ed-dialog__body){
+  padding: 10px 24px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/permissionset/user/index.vue b/frontend/src/views/system/permissionset/user/index.vue
new file mode 100644
index 0000000..0a06ebf
--- /dev/null
+++ b/frontend/src/views/system/permissionset/user/index.vue
@@ -0,0 +1,476 @@
+<script lang="ts" setup>
+import { ref, onMounted} from 'vue'
+import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
+import permission_table_del_blue from '@/assets/svg/permission_table_del_blue.svg'
+import reset_password_blue from '@/assets/svg/reset_password_blue.svg'
+import icon_add from '@/assets/svg/add_white.svg'
+import type { FormInstance, FormRules } from 'element-plus'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { Delete } from '@element-plus/icons-vue'
+import { ElTable,ElTree } from 'element-plus'
+import { getOrganizationById } from '@/api/data-visualization/permission/organization'
+import { queryUsers,addUser,updateUser,setStatus,deleteUserById,deleteUserByIds,
+  resetPassword } from '@/api/data-visualization/permission/user'
+const props = defineProps({
+  applicationId:String
+})
+const treeData:any = ref([])
+const defaultProps = {
+  children: 'children',
+  label: 'orgname'
+}
+const treeloading = ref(false);
+const tableloading = ref(false);
+const currentNodeId = ref(null);
+const dialogVisible = ref(false);
+const title = ref('新增用户');
+const ruleForm:any = ref({});
+const ruleFormRef = ref<FormInstance>()
+const treeRef = ref<InstanceType<typeof ElTree>>()
+const rules = ref({
+  username: [
+    { required: true, message: '请输入登录账号', trigger: 'blur' },
+  ],
+  nickname: [
+    { required: true, message: '请输入用户姓名', trigger: 'blur' },
+  ],
+  usertype: [
+    { required: true, message: '请选择所属角色', trigger: 'change' },
+  ],
+})
+const preventcombo = ref(false)
+const querynickname = ref('')
+const multipleTableRef = ref<InstanceType<typeof ElTable>>()
+const multipleSelection = ref([])
+const tableData = ref([])
+const typeoptions = ref([
+  { value: '1', label: '管理员' },
+  { value: '2', label: '普通用户' },
+])
+const currentPage = ref(1)
+const pageSize = ref(10)
+const total = ref(0)
+const submitForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.validate((valid:any) => {
+    if (valid) {
+      if(preventcombo.value){
+        return
+      }
+      preventcombo.value = true
+      if(ruleForm.value.id !== ''){
+        updateUser(ruleForm.value).then(res => {
+          ElMessage({
+            type: 'success',
+            message: '修改成功',
+          })
+          dialogVisible.value = false
+          preventcombo.value = false
+          getuserinfo()
+        })
+      }else{
+        addUser(ruleForm.value).then(res => {
+          ElMessage({
+            type: 'success',
+            message: '新增成功',
+          })
+          dialogVisible.value = false
+          preventcombo.value = false
+          getuserinfo()
+        })
+      }
+    } else {
+      return false
+    }
+  })
+}
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+  dialogVisible.value = false
+}
+const handleSelectionChange = (val:any) => {
+  multipleSelection.value = val
+}
+onMounted(() => {
+  treeData.value = []
+  gettree()
+})
+function gettree(){
+  treeloading.value = true
+  getOrganizationById(props.applicationId).then(res => {
+    if(res.data.data.length>0){
+      treeData.value = gettreeData(res.data.data)
+    }
+    treeloading.value = false
+  })
+}
+function gettreeData(orglist:any) {
+  const res = {};
+  for (const row of orglist) {
+  // 处理 parentid 并解构需要字段
+    const parentid = row.parentid || "0";
+    const { id, orgcode, orgname, appId, orgtype, isvaild } = row;
+    // 统一节点数据对象
+    const nodeData = { parentid, id, orgcode, orgname, appId, orgtype, isvaild }
+    // 更新或创建节点
+    if (res[id]) {
+      Object.assign(res[id], nodeData);
+    } else {
+      res[id] = { ...nodeData, children: [] };
+    }
+    // 处理父子关系
+    if (res[parentid]) {
+      res[parentid].children.push(res[id]);
+    } else {
+      res[parentid] = { children: [res[id]] };
+    }
+  }
+  return res[0].children;
+}
+function getuserinfo(){
+  tableloading.value = true
+  const params = {
+    appId: props.applicationId,
+    orgid:currentNodeId.value,
+    nickname:'',
+    current:1,
+    size:10
+  }
+  queryUsers(params).then(res => {
+    tableData.value = res.data.data.records
+    total.value = Number(res.data.data.total)
+    tableloading.value = false
+  })
+}
+function queryuserinfo(){
+  tableloading.value = true
+  const params = {
+    appId: props.applicationId,
+    orgid:currentNodeId.value,
+    nickname:querynickname.value,
+    current:currentPage.value,
+    size:pageSize.value
+  }
+  queryUsers(params).then(res => {
+    tableData.value = res.data.data.records
+    total.value = Number(res.data.data.total)
+    tableloading.value = false
+  })
+}
+function nodeclick(data:any,node:any){
+  if(data.orgtype == '01'){
+    treeRef.value!.setCurrentKey(null)
+    return
+  }
+  currentNodeId.value = node.key
+  currentPage.value = 1
+  pageSize.value = 10
+  getuserinfo()
+}
+function edittable(data:any){ 
+  title.value = '修改用户'
+  ruleForm.value = JSON.parse(JSON.stringify(data))
+  dialogVisible.value = true
+}
+function deltable(row:any){ 
+  ElMessageBox.confirm(
+    '确定删除该条信息吗?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  ).then(() => {
+    deleteUserById(row.id).then(res => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+        getuserinfo()
+      })
+    })
+    .catch(() => {
+    })
+}
+function deltables(){
+  ElMessageBox.confirm(
+    '确定删除该条信息吗?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      const arr = []
+      multipleSelection.value.forEach(e => {
+        arr.push(e.id)
+      });
+      deleteUserByIds(arr.join()).then(res => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+        getuserinfo()
+      })
+    })
+    .catch(() => {
+      
+    })
+}
+function addtable(){
+  if(currentNodeId.value == '' || currentNodeId.value == null){
+    ElMessage({
+      type: 'warning',
+      message: '请选择部门！',
+    })
+    return
+  }
+  ruleFormRef.value?.resetFields();
+  ruleForm.value = {
+    id:'',
+    appId:props.applicationId,
+    orgid:currentNodeId.value,
+    username: '',
+    usertype: '',
+    nickname:'',
+    email:'',
+    phone:'',
+    status:'1',
+  }
+  title.value = '新增用户'
+  dialogVisible.value = true
+}
+
+function handleClose() {
+  ruleFormRef.value?.resetFields();
+  dialogVisible.value = false;
+}
+function handleSizeChange(val: number){
+  pageSize.value = val
+  queryuserinfo()
+}
+function handleCurrentChange(val: number){
+  currentPage.value = val
+  queryuserinfo()
+}
+function formatDateTime(dateArray:any){
+  if (!Array.isArray(dateArray) || dateArray.length < 6) return 'Invalid Date'
+  const pad = (n: number) => n.toString().padStart(2, '0')
+  
+  return `${dateArray[0]}-${pad(dateArray[1])}-${pad(dateArray[2])} ` +
+         `${pad(dateArray[3])}:${pad(dateArray[4])}:${pad(dateArray[5])}`
+}
+function setisValid(row:any){
+  const params = {
+    id:row.id,
+    status:row.status
+  }
+  setStatus(params).then(res => {
+    if(res.code == '0'){
+      getuserinfo()
+      ElMessage.success('设置成功')
+    }else{
+      ElMessage.error('设置失败')
+    }
+  })
+}
+function resetclick(row:any){
+  ElMessageBox.confirm(
+    '是否重置该用户密码?',
+    '提示',
+    {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      resetPassword(row.id).then(res => {
+        if(res.data.code == '0'){
+          ElMessage.success('重置成功')
+        }else{
+          ElMessage.error('重置失败')
+        }
+      })
+    })
+    .catch(() => {})
+}
+</script>
+<template>
+   <div class="organization-box">
+      <div class="organization-leftbox">
+        <div class="leftbox-title">列表</div>
+        <el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
+         highlight-current default-expand-all :expand-on-click-node="false"
+          @node-click="nodeclick">
+        </el-tree>
+      </div>
+      <div class="organization-rightbox">
+        <div class="querybox">
+          <div>
+            <el-input v-model="querynickname" placeholder="请输入用户名称" style="width: 200px;margin-right: 10px;" />
+            <el-button type="primary" style="min-width: 50px;" @click="queryuserinfo">搜索</el-button>
+          </div>
+          <div>
+            <el-button type="primary" style="min-width: 50px;" @click="addtable">
+              <el-icon style="margin-right: 3px;">
+                <icon_add class="svg-icon" />
+              </el-icon>新增
+            </el-button>
+            <el-button :type="multipleSelection.length>0?'primary':''" :disabled="multipleSelection.length>0?false:true" @click="deltables" style="min-width: 50px;">
+              <el-icon style="margin-right: 3px;"><Delete /></el-icon>删除
+            </el-button>
+          </div>
+        </div>
+        <el-table v-loading="tableloading"  ref="multipleTableRef" :data="tableData" border style="width: 100%" height="calc(100vh - 230px)"
+         @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" /> 
+          <!-- <el-table-column prop="orgcode" label="用户编号"/> -->
+          <el-table-column prop="nickname" label="用户姓名"/>
+          <el-table-column prop="username" label="登录账号"/>
+          <el-table-column prop="usertype" label="所属角色">
+            <template #default="scope">
+              <span v-if="scope.row.usertype == '1'">管理员</span>
+              <span v-else-if="scope.row.usertype == '2'">普通用户</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="email" label="邮箱"/>
+          <el-table-column prop="phone" label="手机号"/>
+          <el-table-column prop="status" label="状态" width="110">
+            <template #default="scope">
+              <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"  style="margin-right: 10px;" @change="setisValid(scope.row)" /> 
+              <span v-if="scope.row.status == '1'" style="color: #0089ff;font-size: 14px;">有效</span>
+              <span v-else-if="scope.row.status == '0'" style="color: #bbbfc4;font-size: 14px;">无效</span>
+            </template>
+          </el-table-column>
+          <el-table-column prop="lastmodifier" label="最近修改者"/>
+          <el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
+            <template #default="scope">
+                <span>{{formatDateTime(scope.row.lastmodifydate)}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column fixed="right" label="操作" width="100">
+            <template  #default="scope">
+              <el-icon style="font-size: 16px;cursor: pointer;" @click="edittable(scope.row)">
+                <permission_table_edit_blue class="svg-icon"/> 
+              </el-icon>
+              <el-icon title="重置密码" style="font-size: 16px;margin: 0px 10px;cursor: pointer;" @click="resetclick(scope.row)">
+                <reset_password_blue class="svg-icon"/> 
+              </el-icon>
+              <el-icon style="font-size: 16px;cursor: pointer;" @click="deltable(scope.row)">
+                <permission_table_del_blue class="svg-icon"/> 
+              </el-icon>
+            </template>
+          </el-table-column>
+        </el-table>
+        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 50, 100]" 
+         background layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px;"
+          @size-change="handleSizeChange" @current-change="handleCurrentChange"/>
+      </div>
+      <el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
+        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
+          <el-form-item label="用户姓名" prop="nickname">
+            <el-input v-model="ruleForm.nickname" />
+          </el-form-item>
+          <el-form-item label="登录账号" prop="username">
+            <el-input v-model="ruleForm.username" />
+          </el-form-item>
+          <el-form-item label="所属角色" prop="usertype">
+            <el-select v-model="ruleForm.usertype" placeholder="请选择角色级别" style="width:100%;">
+              <el-option v-for="item in typeoptions" :key="item.value" :label="item.label" :value="item.value"/>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="邮箱" prop="email">
+            <el-input v-model="ruleForm.email" />
+          </el-form-item>
+          <el-form-item label="联系电话" prop="phone">
+            <el-input v-model="ruleForm.phone" />
+          </el-form-item>
+        </el-form>
+        <template #footer>
+          <span class="dialog-footer">
+            <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+            <el-button type="primary" @click="submitForm(ruleFormRef)">确定</el-button>
+          </span>
+        </template>
+      </el-dialog>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.organization-box{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  .organization-leftbox{
+    width: 240px;
+    height: 100%;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
+    border-radius: 5px;
+    margin-right: 15px;
+    .leftbox-title{
+      width: 100%;
+      height: 44px;
+      line-height: 44px;
+      font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
+      font-weight: 700;
+      font-style: normal;
+      font-size: 15px;
+      color: #000000;
+      border-bottom: 1px solid #e8e8e8;
+      padding-left: 20px;
+    }
+    .leftbox-btn{
+      width: 200px;
+      height: 40px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: rgba(0, 137, 255, 1);
+      border-radius: 3px;
+      font-size: 14px;
+      color: #0089FF;
+      margin: 0 auto;
+      margin-top: 15px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    :deep(.el-tree-node__content){
+      height: 40px;
+      line-height: 40px;
+    }
+    :deep(.custom-tree-node){
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      padding-right: 8px;
+    }
+    :deep(.el-tree-node__content>.ed-tree-node__expand-icon){
+      padding: 2px;
+    }
+    :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content .el-text){
+      color: #409eff;
+    }
+  }
+  .organization-rightbox{
+    width: calc(100% - 240px);
+    height: 100%;
+    background: #ffffff;
+    box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
+    border-radius: 5px;
+    padding: 20px;
+  }
+  .querybox{
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/system/permissionset/user/userinfo.vue b/frontend/src/views/system/permissionset/user/userinfo.vue
new file mode 100644
index 0000000..fb8bbb8
--- /dev/null
+++ b/frontend/src/views/system/permissionset/user/userinfo.vue
@@ -0,0 +1,178 @@
+<script lang="ts" setup>
+import { ref, onMounted } from 'vue'
+import { updateUser } from '@/api/permission/user'
+import { ElMessage } from 'element-plus'
+import { useCache } from '@/hooks/web/useCache'
+const { wsCache } = useCache()
+const props = defineProps({
+    applicationId: String,
+    userList:Object,
+})
+const userlist: any = ref({
+    username: 'admin',
+    nickname: '管理员',
+    email: '',
+    phone: '',
+    id:''
+})
+onMounted(() => {
+    userlist.value = props.userList
+})
+function saveinfo() {
+    //保存
+    updateUser(userlist.value).then(res => {
+      if(res.data.code == '0'){
+        ElMessage({
+          type: 'success',
+          message: '修改成功',
+       })
+       wsCache.set('Permission-userinfo', userlist.value)
+      }    
+        
+})
+}
+</script>
+<template>
+    <div class="userinfo-box">
+        <div class="userinfo-content">
+            <div class="userinfo-content-top">
+                <div class="userinfo-title">
+                    <div class="userinfo-title-icon"></div>
+                    <div class="userinfo-title-text">个人信息</div>
+                </div>
+                <div class="userinfo-content-top-content">
+                    <div class="userinfo-content-top-content-box">
+                        <div class="userinfo-content-top-text">用户姓名</div>
+                        <el-input v-model="userlist.nickname" disabled placeholder="请输入用户姓名"></el-input>
+                    </div>
+                    <div class="userinfo-content-top-content-box">
+                        <div class="userinfo-content-top-text">登录账号</div>
+                        <el-input v-model="userlist.username" disabled placeholder="请输入登录账号"></el-input>
+                    </div>
+                    <div class="userinfo-content-top-content-box">
+                        <div class="userinfo-content-top-text">联系邮箱</div>
+                        <el-input v-model="userlist.email" placeholder="请输入联系邮箱"></el-input>
+                    </div>
+                    <div class="userinfo-content-top-content-box">
+                        <div class="userinfo-content-top-text">联系电话</div>
+                        <el-input v-model="userlist.phone" placeholder="请输入联系电话"></el-input>
+                    </div>
+                </div>
+            </div>
+            <!-- <div class="userinfo-content-top" style="margin-top: 50px;">
+                <div class="userinfo-title">
+                    <div class="userinfo-title-icon"></div>
+                    <div class="userinfo-title-text">修改密码</div>
+                </div>
+                <div class="userinfo-content-top-content">
+                    <div class="userinfo-content-top-content-box">
+                        <div class="userinfo-content-top-text">原密码</div>
+                        <el-input v-model="userlist.password" placeholder="请输入原密码"></el-input>
+                    </div>
+                    <div class="userinfo-content-top-content-box">
+                        <div class="userinfo-content-top-text">新密码</div>
+                        <el-input v-model="userlist.newpassword" placeholder="请输入新密码"></el-input>
+                    </div>
+                    <div class="userinfo-content-top-content-box">
+                        <div class="userinfo-content-top-text">确认新密码</div>
+                        <el-input v-model="userlist.submitpassword" placeholder="请输入确认新密码"></el-input>
+                    </div>
+                </div>
+            </div> -->
+            <div class="userinfo-content-btn">
+                <el-button type="primary" style="min-width: 50px;" @click="saveinfo">保存</el-button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.userinfo-box {
+    width: 100%;
+    height: 100%;
+    background: #E3E8F0;
+    padding: 15px;
+    .userinfo-content {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+        border-radius: 5px;
+        background: #fff;
+        box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
+        padding: 40px;
+        .userinfo-content-top {
+            width: 600px;
+            .userinfo-title {
+                display: flex;
+                align-items: center;
+                .userinfo-title-icon {
+                    width: 5px;
+                    height: 15px;
+                    background-color: rgba(64, 158, 255, 1);
+                }
+                .userinfo-title-text {
+                    font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
+                    font-weight: 700;
+                    font-style: normal;
+                    font-size: 16px;
+                    margin-left: 10px;
+                }
+            }
+            .userinfo-content-top-content {
+                .userinfo-content-top-content-box {
+                    margin-top: 20px;
+                    display: flex;
+                    align-items: center;
+                    .userinfo-content-top-text {
+                        width: 90px;
+                        margin-right: 20px;
+                        text-align: right;
+                        font-size: 14px;
+                        font-family: 'Arial Negreta', 'Arial Normal', 'Arial', sans-serif;
+                        font-weight: 400;
+                        font-style: normal;
+                        color: rgb(120, 120, 120);
+                    }
+                }
+            }
+        }
+        .userinfo-content-btn {
+            width: 600px;
+            display: flex;
+            justify-content: flex-end;
+            margin-top: 30px;
+        }
+    }
+}
+
+:deep(.ed-input__wrapper) {
+    background: #ffffff;
+    border: 1px solid #dcdfe6;
+    box-shadow: none;
+}
+
+:deep(.ed-input__inner) {
+    color: rgb(56, 56, 56)
+}
+
+:deep(.ed-input.is-disabled .ed-input__wrapper) {
+    background: rgb(242, 246, 252);
+    border: 1px solid #dcdfe6;
+    box-shadow: none;
+}
+
+:deep(.ed-input.is-disabled .ed-input__inner) {
+    color: rgb(56, 56, 56);
+    -webkit-text-fill-color: rgb(56, 56, 56);
+}
+
+:deep(.ed-button) {
+    border-color: #dcdfe6;
+}
+
+:deep(.ed-button--primary) {
+    background-color: #409eff;
+    color: #ffffff;
+    border-color: #409eff;
+}
+</style>
\ No newline at end of file