权限设置
This commit is contained in:
jingna
parent
dfb0490c04
commit
5667b66612
8
core/core-frontend/src/api/permission/menu.ts
Normal file
8
core/core-frontend/src/api/permission/menu.ts
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
import request from '@/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 setStatus = params => request.post({ url: '/user/setStatus', params }) //设置有效状态
|
||||||
|
// export const resetPassword = id => request.post({ url: '/user/resetPassword?id=' + id }) //重置密码
|
||||||
@ -1,9 +1,8 @@
|
|||||||
import request from '@/config/axios'
|
import request from '@/config/axios'
|
||||||
import { param } from 'jquery'
|
|
||||||
|
|
||||||
export const getOrganizations = params => request.post({ url: '/organization/getOrganizations', params }) // 查询企业/部门
|
export const getOrganizations = params => request.post({ url: '/organization/getOrganizations', params }) // 查询企业/部门
|
||||||
export const addOrganization = data => request.post({ url: '/organization/addOrganization', data }) // 新增企业/部门
|
export const addOrganization = data => request.post({ url: '/organization/addOrganization', data }) // 新增企业/部门
|
||||||
export const updateOrganizationById = data => request.post({ url: '/organization/updateOrganizationById', data }) //修改企业/部门
|
export const updateOrganizationById = data => request.post({ url: '/organization/updateOrganizationById', data }) //修改企业/部门
|
||||||
export const setIsValid = params => request.post({ url: '/organization/setIsValid', params }) //设置有效状态
|
export const setIsValid = params => request.post({ url: '/organization/setIsValid', params }) //设置有效状态
|
||||||
export const deleteById = id => request.delete({ url: '/organization/deleteById?id=' + id }) //删除
|
export const deleteById = id => request.delete({ url: '/organization/deleteById?id=' + id }) //删除
|
||||||
export const getOrganizationById = data => request.post({ url: '/organization/getOrganizationById', data })//根据id查询部门
|
export const getOrganizationById = appId => request.post({ url: '/organization/listOrganization?appId=' + appId })//查询所有
|
||||||
|
|||||||
@ -6,3 +6,5 @@ export const updateRole = data => request.post({ url: '/role/updateRole', data }
|
|||||||
export const setIsValid = params => request.post({ url: '/role/setIsvaild', params }) //设置有效状态
|
export const setIsValid = params => request.post({ url: '/role/setIsvaild', params }) //设置有效状态
|
||||||
export const deleteRoleById = id => request.post({ url: '/role/deleteRoleById?id=' + id }) //删除
|
export const deleteRoleById = id => request.post({ url: '/role/deleteRoleById?id=' + id }) //删除
|
||||||
export const deleteRoleByIds = id => request.post({ url: '/role/deleteRoleByIds?ids=' + 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: '/menuInterface/setMenuByRoleId', params }) //设置角色权限
|
||||||
@ -1,8 +1,9 @@
|
|||||||
import request from '@/config/axios'
|
import request from '@/config/axios'
|
||||||
|
|
||||||
export const listRole = params => request.post({ url: '/role/listRole', params }) // 查询角色
|
export const queryUsers = params => request.get({ url: '/user/queryUsers', params }) // 查询用户
|
||||||
export const addRole = data => request.post({ url: '/role/addRole', data }) // 新增角色
|
export const addUser = data => request.post({ url: '/user/addUser', data }) // 新增用户
|
||||||
export const updateRole = data => request.post({ url: '/role/updateRole', data }) //修改企业/部门
|
export const updateUser = data => request.post({ url: '/user/updateUser', data }) //修改用户
|
||||||
export const setIsValid = params => request.post({ url: '/role/setIsvaild', params }) //设置有效状态
|
export const setStatus = params => request.post({ url: '/user/setStatus', params }) //设置有效状态
|
||||||
export const deleteRoleById = id => request.post({ url: '/role/deleteRoleById?id=' + id }) //删除
|
export const deleteUserById = id => request.post({ url: '/user/deleteUserById?id=' + id }) //删除
|
||||||
export const deleteRoleByIds = id => request.post({ url: '/role/deleteRoleByIds?ids=' + id }) //删除
|
export const deleteUserByIds = id => request.post({ url: '/user/deleteUserByIds?ids=' + id }) //删除
|
||||||
|
export const resetPassword = id => request.post({ url: '/user/resetPassword?id=' + id }) //重置密码
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="16px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -234 -82 )">
|
||||||
|
<path d="M 15.6489771659627 5.58084539738125 C 15.6489771659627 5.9071829622354 15.3833382658067 6.17203664557273 15.0560332016855 6.17203664557273 L 1.0151200765489 6.17203664557273 C 0.687815012427734 6.17203664557273 0.4221761122717 5.9071829622354 0.4221761122717 5.58084539738125 C 0.4221761122717 5.25450783252711 0.687815012427734 4.98965414918976 1.0151200765489 5 L 15.0560332016855 5 C 15.3833382658067 4.98965414918976 15.6489771659627 5.25450783252711 15.6489771659627 5.58084539738125 Z M 8.03557663123866 15.4088087518085 C 8.03557663123866 15.7351463166627 7.76993773108262 16 7.44263266696152 16 L 2.20100800510329 16 C 0.986658765255129 16 0 15.0162577543372 0 13.8054980770356 L 0 2.19450192296443 C 0 0.983742245662796 0.986658765255129 0 2.20100800510329 0 L 13.7989919948968 0 C 15.0133412347449 0 16 0.983742245662796 16 2.19450192296443 L 16 8.60301507095585 C 16 8.92935263581001 15.734361099844 9.19420631914734 15.4070560357228 9.19420631914734 C 15.0797509716016 9.19420631914734 14.8141120714456 8.92935263581001 14.8141120556886 8.60301507095585 L 14.8141120556886 2.19450192296443 C 14.8141120556886 1.63641737537108 14.3587310907456 1.18238249638297 13.7989919948968 1.18238249638297 L 2.20100800510329 1.18238249638297 C 1.64126889349745 1.18238249638297 1.18588792855439 1.63641737537108 1.18588792855439 2.19450192296443 L 1.18588792855439 13.8054980770356 C 1.18588792855439 14.3635826246289 1.64126889349745 14.817617503617 2.20100800510329 14.817617503617 L 7.44263266696152 14.817617503617 C 7.76993773108262 14.817617503617 8.03557663123866 15.0824711869544 8.03557663123866 15.4088087518085 Z M 11.8161873658743 13.8054980770356 C 11.8161873658743 14.1318356418897 11.5505484657182 14.396689325227 11.2232434015971 14.396689325227 C 10.8959383374759 14.396689325227 10.6302994373199 14.1318356418897 10.6302994373199 13.8054980770356 L 10.6302994373199 8.60774460634578 C 10.6302994373199 8.28140704149163 10.8959383374759 8.01655335815428 11.2232434015971 8.01655335815428 C 11.5505484657182 8.01655335815428 11.8161873658743 8.28140704149163 11.8161873658743 8.60774460634578 L 11.8161873658743 13.8054980770356 Z M 14.422769049035 11.2066213338354 C 14.422769049035 11.5329588986896 14.157130148879 11.7978125820269 13.8298250847578 11.7978125977374 L 8.61666171843632 11.7978125977374 C 8.28935665431516 11.7978125977374 8.02371775415912 11.5329589144 8.02371775415912 11.2066213338354 C 8.02371775415912 10.8802837532709 8.28935665431516 10.615430085644 8.61666171843632 10.615430085644 L 13.8298250847578 10.615430085644 C 14.157130148879 10.615430085644 14.422769049035 10.8802837689813 14.422769049035 11.2066213338354 Z " fill-rule="nonzero" fill="#f2f4f5" stroke="none" transform="matrix(1 0 0 1 234 82 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -1517 -14 )">
|
||||||
|
<path d="M 2.88857142857134 4.294857140625 C 2.88857142857134 1.92287303915592 4.94879254195277 0 7.49020407924101 0 C 10.0316156165292 0 12.0918367299107 1.92287303915592 12.0918367299107 4.294857140625 L 12.0918367299107 6.01714285937501 L 13.7755102064732 6.01714285937501 C 14.4517772457616 6.01714285937501 15 6.52881742999759 15 7.16 L 15 14.857142859375 C 15 15.4883254293774 14.4517772457616 16 13.7755102064732 16 L 1.22448979352677 16 C 0.548222754238412 16 0 15.4883254293774 0 14.857142859375 L 0 7.16114285937499 C 0 6.52996028937258 0.548222754238412 6.01828571875001 1.22448979352677 6.01828571875001 L 2.88857142857134 6.01714285937501 L 2.88857142857134 4.294857140625 Z M 13.622448984375 7.304 L 13.622448984375 7.30285714062501 L 1.37755101562496 7.30285714062501 L 1.37755101562496 14.71428571875 L 13.622448984375 14.71428571875 L 13.622448984375 7.304 Z M 7.50042687601324 8.19574046956365 C 8.02775428347023 8.19574046956365 8.54578884408007 8.32531208050162 9.0024489843749 8.57142857812499 L 9.14571428571435 8.657142859375 C 9.25617510877016 8.49554826555732 9.44608546002834 8.39640862456156 9.65142857142861 8.39314285937499 L 9.66244898437489 8.39314285937499 C 9.99632510263016 8.3930923817673 10.2686841044029 8.64271849041873 10.2746938727679 8.95428571874999 L 10.2746938727679 10.035428578125 C 10.2747366625985 10.3474835534233 10.0065467252901 10.6018642538417 9.67224490513388 10.606857140625 L 8.51387755580358 10.606857140625 C 8.1747579618667 10.6068578817596 7.90064658099985 10.3510205929505 7.90064658099985 10.0354293036346 C 7.90064658099985 9.80424182807002 8.0498995951943 9.59583222438414 8.27877550781255 9.507428578125 L 8.38897958705364 9.56228571874999 C 8.11851487371695 9.41654797964026 7.81171348994081 9.3398235297048 7.49941038852155 9.3398235297048 C 6.51679438247892 9.3398235297048 5.72022672222699 10.0832866792734 5.72022672222699 11.0003949515798 C 5.72022672222699 11.9175032238862 6.51679438247892 12.6609663734548 7.49941038852155 12.6609663734548 C 8.12483359749251 12.6609663734548 8.70432749896785 12.3544758604932 9.02571428571426 11.85371428125 L 9.04040815848215 11.830857140625 C 9.15029682550003 11.6559087958213 9.35130063418804 11.5484254594859 9.56858159948898 11.5484254594859 C 9.90671512375611 11.5484254594859 10.180826504623 11.804262748295 10.180826504623 12.1198540376109 C 10.180826504623 12.2188780490904 10.153255429407 12.3162024896552 10.1008163337054 12.40228571875 C 9.56403521261564 13.2688791609476 8.57291611806813 13.8025976258137 7.50042687601324 13.8025976258137 C 5.8415438214366 13.8025976258137 4.49675339945072 12.5474598986269 4.49675339945072 10.9991690476887 C 4.49675339945072 9.45087819675038 5.8415438214366 8.19574046956365 7.50042687601324 8.19574046956365 Z M 7.49142857142853 1.28571428124999 L 7.49020407924101 1.28685714062499 C 5.71054921948335 1.28748786575292 4.26802271330676 2.63384593818435 4.26734693638407 4.294857140625 L 4.26734693638407 6.004571421875 L 10.7155102064732 6.004571421875 L 10.7155102064732 4.294857140625 C 10.7155102064732 2.63295342932997 9.27203969067323 1.28571428124999 7.49142857142853 1.28571428124999 Z " fill-rule="nonzero" fill="#0089ff" stroke="none" transform="matrix(1 0 0 1 1517 14 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
1
core/core-frontend/src/assets/svg/user_connect_white.svg
Normal file
1
core/core-frontend/src/assets/svg/user_connect_white.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1747901509493" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2624" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M686.3 630.3V513.2c0-19.9-16.1-36-36-36s-36 16.1-36 36v101.1H136.7V136.7h477.6v98.8c0 19.9 16.1 36 36 36s36-16.1 36-36V120.7c0-30.9-25.1-56-56-56H120.7c-30.9 0-56 25.1-56 56v509.6c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56z" fill="#ffffff" p-id="2625"></path><path d="M903.8 337.8H394.2c-30.9 0-56 25.1-56 56v118c0 19.9 16.1 36 36 36s36-16.1 36-36v-102h477.6v477.6H410.2V784.6c0-19.9-16.1-36-36-36s-36 16.1-36 36v118.7c0 30.9 25.1 56 56 56h509.6c30.9 0 56-25.1 56-56V393.8c0-30.9-25.1-56-56-56z" fill="#ffffff" p-id="2626"></path></svg>
|
||||||
|
After Width: | Height: | Size: 874 B |
@ -212,6 +212,13 @@ export const routes: AppRouteRecordRaw[] = [
|
|||||||
hidden: true,
|
hidden: true,
|
||||||
meta: {},
|
meta: {},
|
||||||
component: () => import('@/viewsnew/application/permissionset/index.vue')
|
component: () => import('@/viewsnew/application/permissionset/index.vue')
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/menuconfig',
|
||||||
|
name: 'menuconfig',
|
||||||
|
hidden: true,
|
||||||
|
meta: {},
|
||||||
|
component: () => import('@/viewsnew/application/menuconfig/index.vue')
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
@ -104,7 +104,7 @@ function delClick(row){
|
|||||||
<img src="@/assets/newimg/icon/editpro.png" @click="updateClick(item)" title="编辑项目">
|
<img src="@/assets/newimg/icon/editpro.png" @click="updateClick(item)" title="编辑项目">
|
||||||
<img src="@/assets/newimg/icon/edit.png" alt="" title="编辑数据源" @click="routerClick(item,'/datasourcenew')">
|
<img src="@/assets/newimg/icon/edit.png" alt="" title="编辑数据源" @click="routerClick(item,'/datasourcenew')">
|
||||||
<img src="@/assets/newimg/icon/dataset.png" alt="" title="编辑数据集" @click="routerClick(item,'/datasetnew')">
|
<img src="@/assets/newimg/icon/dataset.png" alt="" title="编辑数据集" @click="routerClick(item,'/datasetnew')">
|
||||||
<img src="@/assets/newimg/icon/caidan.png" alt="" title="菜单配置">
|
<img src="@/assets/newimg/icon/caidan.png" alt="" title="菜单配置" @click="routerClick(item,'/menuconfig')">
|
||||||
<img src="@/assets/newimg/icon/fuwu.png" alt="" title="服务配置">
|
<img src="@/assets/newimg/icon/fuwu.png" alt="" title="服务配置">
|
||||||
<img src="@/assets/newimg/icon/permission.png" alt="" title="权限设置" @click="routerClick(item,'/permissionset')">
|
<img src="@/assets/newimg/icon/permission.png" alt="" title="权限设置" @click="routerClick(item,'/permissionset')">
|
||||||
<img src="@/assets/newimg/icon/export.png" alt="" title="导出">
|
<img src="@/assets/newimg/icon/export.png" alt="" title="导出">
|
||||||
|
|||||||
@ -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/newimg/u594.png" alt="">
|
||||||
|
</div>
|
||||||
|
<img src="@/assets/newimg/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>
|
||||||
498
core/core-frontend/src/viewsnew/application/menuconfig/index.vue
Normal file
498
core/core-frontend/src/viewsnew/application/menuconfig/index.vue
Normal file
@ -0,0 +1,498 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import Header from './header.vue'
|
||||||
|
import { findApplicationById } from "@/api/application/application";
|
||||||
|
import { useRoute, useRouter } from 'vue-router'
|
||||||
|
import { ref, watch, onMounted } from 'vue'
|
||||||
|
import menuconfig_treeadd_white from '@/assets/svg/menuconfig_treeadd_white.svg'
|
||||||
|
import icon_user_connect_white from '@/assets/svg/user_connect_white.svg'
|
||||||
|
import icon_permission_more_white from '@/assets/svg/icon_more-vertical_outlined_white.svg'
|
||||||
|
import { ElTree,FormInstance } from 'element-plus'
|
||||||
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
|
import { getMenuTree,addMenu,updateMenuById,deleteMenuById } from '@/api/permission/menu'
|
||||||
|
const projectInfo:any =ref({})
|
||||||
|
const route = useRoute()
|
||||||
|
const router = useRouter()
|
||||||
|
const applicationId:any =ref("")
|
||||||
|
const filterText = ref('')
|
||||||
|
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||||
|
watch(filterText, (val) => {
|
||||||
|
treeRef.value!.filter(val)
|
||||||
|
})
|
||||||
|
const treeData:any = ref([])
|
||||||
|
const defaultProps = {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name'
|
||||||
|
}
|
||||||
|
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:any = ref({})
|
||||||
|
const ruleFormRef = ref<FormInstance>()
|
||||||
|
const rules = ref({
|
||||||
|
name: [
|
||||||
|
{ 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 !== ''){
|
||||||
|
updateMenuById(ruleForm.value).then(res => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '修改成功',
|
||||||
|
})
|
||||||
|
dialogVisible.value = false
|
||||||
|
preventcombo.value = false
|
||||||
|
gettree()
|
||||||
|
})
|
||||||
|
}else{
|
||||||
|
addMenu(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
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
if (route.query.id) {
|
||||||
|
applicationId.value = route.query.id
|
||||||
|
findApplicationById(applicationId.value).then(res => {
|
||||||
|
res.data.data.typename = '菜单设置'
|
||||||
|
projectInfo.value = res.data.data
|
||||||
|
})
|
||||||
|
gettree()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
function gettree() {
|
||||||
|
treeloading.value = true
|
||||||
|
const params = {
|
||||||
|
appId: applicationId.value,
|
||||||
|
name:'',
|
||||||
|
isdisplay:''
|
||||||
|
}
|
||||||
|
getMenuTree(params).then(res => {
|
||||||
|
treeloading.value = false
|
||||||
|
treeData.value = res.data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function nodeclick(data:any,node:any){
|
||||||
|
currentNodeId.value = node.key
|
||||||
|
}
|
||||||
|
function addtree(){
|
||||||
|
title.value = '新增菜单'
|
||||||
|
ruleForm.value = {
|
||||||
|
id:'',
|
||||||
|
appId:applicationId.value,
|
||||||
|
name: '',
|
||||||
|
code:'',
|
||||||
|
parentid:'0',
|
||||||
|
type:'01'
|
||||||
|
}
|
||||||
|
dialogVisible.value = true;
|
||||||
|
}
|
||||||
|
function addchilnode(data:any){
|
||||||
|
title.value = '新增子菜单'
|
||||||
|
ruleForm.value = {
|
||||||
|
id:'',
|
||||||
|
appId:applicationId.value,
|
||||||
|
name: '',
|
||||||
|
code:'',
|
||||||
|
parentid:data.id,
|
||||||
|
type:'01'
|
||||||
|
}
|
||||||
|
dialogVisible.value = true;
|
||||||
|
}
|
||||||
|
function rename(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(() => {
|
||||||
|
deleteMenuById(data.id).then(res => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '删除成功',
|
||||||
|
})
|
||||||
|
gettree()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
function handleClose() {
|
||||||
|
ruleFormRef.value?.resetFields();
|
||||||
|
dialogVisible.value = false;
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<Header :projectInfo="projectInfo" />
|
||||||
|
<div class="permission-box">
|
||||||
|
<div class="permission-leftbox">
|
||||||
|
<div class="permission-leftbox-title">
|
||||||
|
<div>菜单列表</div>
|
||||||
|
<div>
|
||||||
|
<el-icon @click="addtree">
|
||||||
|
<menuconfig_treeadd_white class="svg-icon" />
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<el-input v-model="filterText" placeholder="请输入" />
|
||||||
|
<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">
|
||||||
|
<template #default="{ node, data }">
|
||||||
|
<div class="custom-tree-node" @mouseenter="handleMouseEnter(node)"
|
||||||
|
@mouseleave="handleMouseLeave()">
|
||||||
|
<div>{{ node.label }}</div>
|
||||||
|
<div v-show="hoverNodeId === node.key" style="display: flex;align-items: center;" >
|
||||||
|
<div>
|
||||||
|
<el-icon style="font-size: 16px;margin-top: 13px;">
|
||||||
|
<icon_user_connect_white class="svg-icon"/>
|
||||||
|
</el-icon>
|
||||||
|
</div>
|
||||||
|
<div style="margin-left: 8px;">
|
||||||
|
<el-popover placement="right" trigger="click">
|
||||||
|
<template #reference>
|
||||||
|
<el-icon style="font-size: 16px;margin-top: 13px;">
|
||||||
|
<icon_permission_more_white class="svg-icon"/>
|
||||||
|
</el-icon>
|
||||||
|
</template>
|
||||||
|
<div class="menu-item" @click.stop="addchilnode(data)">添加子菜单</div>
|
||||||
|
<div class="menu-item" @click.stop="rename(data)">重命名</div>
|
||||||
|
<div class="menu-item" @click.stop="deltree(data)">删除</div>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</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="code" v-if="title !== '重命名'">
|
||||||
|
<el-input v-model="ruleForm.code" disabled placeholder="系统自动生成" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="菜单名称" prop="name">
|
||||||
|
<el-input v-model="ruleForm.name" 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>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.permission-box{
|
||||||
|
background: rgb(21,21,21);
|
||||||
|
height: calc(100vh - 60px);
|
||||||
|
display: flex;
|
||||||
|
.permission-leftbox{
|
||||||
|
width: 260px;
|
||||||
|
height: 100%;
|
||||||
|
border-right: 1px solid #4f5052;
|
||||||
|
background: rgb(37,38,38);
|
||||||
|
padding: 10px;
|
||||||
|
.permission-leftbox-title{
|
||||||
|
color: #F2F4F5;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: 'Arial Normal', 'Arial', sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
margin-top: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.permission-rightbox{
|
||||||
|
width: calc(100% - 260px);
|
||||||
|
height: 100%;
|
||||||
|
padding: 13px;
|
||||||
|
}
|
||||||
|
:deep(.el-tree){
|
||||||
|
background:rgb(37,38,38);
|
||||||
|
height: calc(100vh - 210px);
|
||||||
|
margin-top: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
:deep(.el-tree-node__content){
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
:deep(.el-tree-node__content:hover){
|
||||||
|
background: rgba(61,158, 255, 0.1);
|
||||||
|
color: #0089FF;
|
||||||
|
}
|
||||||
|
: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: #409eff;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:deep(.el-tree-node:focus>.el-tree-node__content){
|
||||||
|
background:rgb(37,38,38);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:deep(.ed-popover.ed-popper){
|
||||||
|
padding: 10px 0px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-item{
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
font-size:14px;
|
||||||
|
background: rgba(41, 41, 41, 1);
|
||||||
|
padding-left: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.menu-item:hover{
|
||||||
|
background: #434343;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
.el-message-box{
|
||||||
|
background: #212121;
|
||||||
|
}
|
||||||
|
.el-message-box__content{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.el-message-box__title{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.el-message-box__btns .el-button{
|
||||||
|
color: #F2F4F5;
|
||||||
|
background-color: #212121;
|
||||||
|
border: 1px solid #434343;
|
||||||
|
}
|
||||||
|
.el-message-box__btns .el-button--primary{
|
||||||
|
background: #0089ff;
|
||||||
|
border-color: #0089ff;
|
||||||
|
}
|
||||||
|
.ed-form-item__label{
|
||||||
|
color: #D2D2D2;
|
||||||
|
}
|
||||||
|
.ed-input__wrapper {
|
||||||
|
background-color: #252626;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(67, 67, 67, 0);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid #434343;
|
||||||
|
}
|
||||||
|
.ed-form-item.is-error .ed-input__wrapper{
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid #f54a45;
|
||||||
|
}
|
||||||
|
.ed-input__wrapper.is-focus{
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid #0089ff;
|
||||||
|
}
|
||||||
|
.ed-input__wrapper:hover{
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid #0089ff;
|
||||||
|
}
|
||||||
|
.ed-input__inner{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ed-button {
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: rgb(54,55,56);
|
||||||
|
border: 1px solid #363636;
|
||||||
|
}
|
||||||
|
.ed-button:focus, .ed-button:hover{
|
||||||
|
color: #ffffff;
|
||||||
|
background-color: rgb(54,55,56);
|
||||||
|
border: 1px solid #363636;
|
||||||
|
}
|
||||||
|
.ed-button--primary{
|
||||||
|
background-color: #0089ff;
|
||||||
|
border-color:#0089ff ;
|
||||||
|
}
|
||||||
|
.ed-button--primary:focus, .ed-button--primary:hover{
|
||||||
|
background-color: #0089ff;
|
||||||
|
border-color:#0089ff ;
|
||||||
|
}
|
||||||
|
.ed-button.is-disabled{
|
||||||
|
color: #949494;
|
||||||
|
background-color: rgb(54,55,56);
|
||||||
|
border: 1px solid rgb(54,55,56);
|
||||||
|
}
|
||||||
|
.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover{
|
||||||
|
color: #949494;
|
||||||
|
background-color: rgb(54,55,56);
|
||||||
|
border: 1px solid rgb(54,55,56);
|
||||||
|
}
|
||||||
|
.el-table{
|
||||||
|
background-color: rgb(33,33,33);
|
||||||
|
}
|
||||||
|
.el-table tr{
|
||||||
|
background: rgb(40,40,40);
|
||||||
|
border-color: #434343;
|
||||||
|
}
|
||||||
|
.el-table th.el-table__cell {
|
||||||
|
background-color: rgb(40,40,40);
|
||||||
|
border-color: #434343;
|
||||||
|
}
|
||||||
|
.el-table.is-scrolling-none th.el-table-fixed-column--left, .el-table.is-scrolling-none th.el-table-fixed-column--right {
|
||||||
|
background-color: rgb(40,40,40);
|
||||||
|
}
|
||||||
|
.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
|
||||||
|
background-color: #434343;
|
||||||
|
}
|
||||||
|
.el-table__border-bottom-patch, .el-table__border-left-patch{
|
||||||
|
background-color: #434343;
|
||||||
|
}
|
||||||
|
.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
|
||||||
|
border-color: #434343;
|
||||||
|
}
|
||||||
|
.ed-checkbox__inner{
|
||||||
|
background: transparent;
|
||||||
|
border-color: #787878;
|
||||||
|
}
|
||||||
|
.ed-checkbox__input.is-disabled .ed-checkbox__inner{
|
||||||
|
background: #434343;
|
||||||
|
border-color: #787878;
|
||||||
|
}
|
||||||
|
.el-table thead{
|
||||||
|
color: #E4E4E4;
|
||||||
|
}
|
||||||
|
.el-table .el-table__cell{
|
||||||
|
background: #212121;
|
||||||
|
color: #F2F4F5;
|
||||||
|
}
|
||||||
|
.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: #212121;
|
||||||
|
}
|
||||||
|
.hover-row > td {
|
||||||
|
background-color: rgb(48,48,48) !important;
|
||||||
|
}
|
||||||
|
.ed-checkbox__input.is-checked .ed-checkbox__inner {
|
||||||
|
background-color: #409eff;
|
||||||
|
border-color: #409eff;
|
||||||
|
}
|
||||||
|
.ed-switch.is-checked .ed-switch__core{
|
||||||
|
border-color: #0089ff;
|
||||||
|
background-color: #0089ff;
|
||||||
|
}
|
||||||
|
.ed-textarea__inner{
|
||||||
|
background-color: #252626;
|
||||||
|
box-sizing: border-box;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: rgba(67, 67, 67, 0);
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid #434343;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ed-textarea__inner:hover{
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid #0089ff;
|
||||||
|
}
|
||||||
|
.ed-textarea__inner:focus{
|
||||||
|
box-shadow: none;
|
||||||
|
border: 1px solid #0089ff;
|
||||||
|
}
|
||||||
|
.ed-input.is-disabled .ed-input__wrapper{
|
||||||
|
border: 1px solid #434343;
|
||||||
|
background: #212121;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.el-loading-mask{
|
||||||
|
background-color: rgba(41, 41, 41, 0.9)
|
||||||
|
}
|
||||||
|
.ed-popover.ed-popper{
|
||||||
|
background: rgba(41, 41, 41, 1);
|
||||||
|
border: 1px solid #434343;
|
||||||
|
color: #fff;
|
||||||
|
padding: 10px 0px;
|
||||||
|
}
|
||||||
|
.ed-dialog__header{
|
||||||
|
padding: 13px 20px;
|
||||||
|
border-bottom: 1px solid #333333;
|
||||||
|
margin-right: 0px;
|
||||||
|
background: rgb(33,33,33);
|
||||||
|
}
|
||||||
|
.ed-dialog__headerbtn{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.ed-dialog__body{
|
||||||
|
background: rgb(33,33,33);
|
||||||
|
}
|
||||||
|
.ed-dialog__footer{
|
||||||
|
background: rgb(33,33,33);
|
||||||
|
}
|
||||||
|
.ed-dialog__title{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.ed-dialog__headerbtn{
|
||||||
|
top: 13px !important;
|
||||||
|
}
|
||||||
|
.ed-dialog {
|
||||||
|
border: 1px solid #5f5f5f;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.el-tree-node__expand-icon{
|
||||||
|
color: #ffffff
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -357,7 +357,8 @@ function delTreeClic(){ // 删除
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: rgba(51, 51, 51, 0);
|
border-color: rgba(51, 51, 51, 0);
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
box-shadow:0 0 0 1px transparent ;
|
box-shadow:none ;
|
||||||
|
border: none !important;
|
||||||
}
|
}
|
||||||
:deep(.ed-input__inner){
|
:deep(.ed-input__inner){
|
||||||
background-color: rgba(37, 38, 38, 1);
|
background-color: rgba(37, 38, 38, 1);
|
||||||
|
|||||||
@ -7,7 +7,7 @@ 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_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
|
||||||
import permission_table_del_blue from '@/assets/svg/permission_table_del_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 icon_add from '@/assets/svg/add_white.svg'
|
||||||
import type { FormInstance, FormRules } from 'element-plus'
|
import type { FormInstance } from 'element-plus'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { Delete } from '@element-plus/icons-vue'
|
import { Delete } from '@element-plus/icons-vue'
|
||||||
import { ElTable,ElTree } from 'element-plus'
|
import { ElTable,ElTree } from 'element-plus'
|
||||||
@ -735,6 +735,6 @@ function formatDateTime(dateTimeStr:any){
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
}
|
}
|
||||||
.el-loading-mask{
|
.el-loading-mask{
|
||||||
background-color: rgba(41, 41, 41, 0.9)
|
background-color: rgba(37,38, 38, 0.9);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -4,11 +4,11 @@ import permission_table_edit_blue from '@/assets/svg/permission_table_edit_blue.
|
|||||||
import permission_table_del_blue from '@/assets/svg/permission_table_del_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 perission_role_blue from '@/assets/svg/perission_role_blue.svg'
|
||||||
import icon_add from '@/assets/svg/add_white.svg'
|
import icon_add from '@/assets/svg/add_white.svg'
|
||||||
import type { FormInstance, FormRules } from 'element-plus'
|
import type { FormInstance } from 'element-plus'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
||||||
import { Delete } from '@element-plus/icons-vue'
|
import { Delete } from '@element-plus/icons-vue'
|
||||||
import { ElTable } from 'element-plus'
|
import { ElTable,ElTree,ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { listRole,addRole,updateRole,setIsValid,deleteRoleById,deleteRoleByIds } from '@/api/permission/role'
|
import { listRole,addRole,updateRole,setIsValid,deleteRoleById,deleteRoleByIds,permissionAssignment,setMenuByRoleId } from '@/api/permission/role'
|
||||||
|
import { getMenuTree } from '@/api/permission/menu'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
applicationId:String
|
applicationId:String
|
||||||
})
|
})
|
||||||
@ -34,6 +34,14 @@ const typeoptions = ref([
|
|||||||
{ value: '1', label: '管理员' },
|
{ value: '1', label: '管理员' },
|
||||||
{ value: '2', 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 submitForm = (formEl: FormInstance | undefined) => {
|
const submitForm = (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return
|
if (!formEl) return
|
||||||
formEl.validate((valid) => {
|
formEl.validate((valid) => {
|
||||||
@ -83,7 +91,22 @@ onMounted(() => {
|
|||||||
gettable()
|
gettable()
|
||||||
})
|
})
|
||||||
function permissionset(row:any){
|
function permissionset(row:any){
|
||||||
|
// const params = {
|
||||||
|
// roleId: row.id,
|
||||||
|
// appId: row.appId
|
||||||
|
// }
|
||||||
|
// permissionAssignment(params).then(res => {
|
||||||
|
// console.log(res,'权限设置')
|
||||||
|
// })
|
||||||
|
const params = {
|
||||||
|
appId: props.applicationId,
|
||||||
|
name:'',
|
||||||
|
isdisplay:''
|
||||||
|
}
|
||||||
|
getMenuTree(params).then(res => {
|
||||||
|
treeData.value = res.data
|
||||||
|
})
|
||||||
|
configdialog.value = true
|
||||||
}
|
}
|
||||||
function gettable(){
|
function gettable(){
|
||||||
tableloading.value = true
|
tableloading.value = true
|
||||||
@ -200,6 +223,19 @@ function setisValid(row:any){
|
|||||||
tableloading.value = false
|
tableloading.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
function confighandleClose(){
|
||||||
|
configdialog.value = false
|
||||||
|
}
|
||||||
|
function consfigsubmit(){
|
||||||
|
const params = {
|
||||||
|
id: '',
|
||||||
|
menuIds: ''
|
||||||
|
}
|
||||||
|
setMenuByRoleId(params).then(res => {
|
||||||
|
console.log(res,'权限设置')
|
||||||
|
})
|
||||||
|
configdialog.value = false
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="organization-box">
|
<div class="organization-box">
|
||||||
@ -282,6 +318,18 @@ function setisValid(row:any){
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</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
|
||||||
|
>
|
||||||
|
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -323,4 +371,31 @@ function setisValid(row:any){
|
|||||||
.ed-select-dropdown__item.selected{
|
.ed-select-dropdown__item.selected{
|
||||||
color: #0089ff;
|
color: #0089ff;
|
||||||
}
|
}
|
||||||
|
.el-tree{
|
||||||
|
background:#212121;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.el-tree-node__content{
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
}
|
||||||
|
.el-tree-node__content:hover{
|
||||||
|
background: rgba(61,158, 255, 0.1);
|
||||||
|
color: #0089FF;
|
||||||
|
}
|
||||||
|
.el-tree-node:focus>.el-tree-node__content{
|
||||||
|
background:#212121;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.el-text{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.el-tree-node__expand-icon{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.el-checkbox__inner{
|
||||||
|
background:#212121;
|
||||||
|
border-color:#636363;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,76 +1,81 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, onMounted,reactive} from 'vue'
|
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_edit_blue from '@/assets/svg/permission_table_edit_blue.svg'
|
||||||
import permission_table_del_blue from '@/assets/svg/permission_table_del_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 icon_add from '@/assets/svg/add_white.svg'
|
||||||
import type { FormInstance, FormRules } from 'element-plus'
|
import type { FormInstance, FormRules } from 'element-plus'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import { Delete } from '@element-plus/icons-vue'
|
import { Delete } from '@element-plus/icons-vue'
|
||||||
import { ElTable } from 'element-plus'
|
import { ElTable,ElTree } from 'element-plus'
|
||||||
import { getOrganizations,addOrganization,setIsValid,updateOrganizationById,deleteById,getOrganizationById } from '@/api/permission/organization'
|
import { getOrganizationById } from '@/api/permission/organization'
|
||||||
|
import { queryUsers,addUser,updateUser,setStatus,deleteUserById,deleteUserByIds,resetPassword } from '@/api/permission/user'
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
applicationId:String
|
applicationId:String
|
||||||
})
|
})
|
||||||
const treeData:any = ref([])
|
const treeData:any = ref([])
|
||||||
const defaultProps = {
|
const defaultProps = {
|
||||||
children: 'children',
|
children: 'children',
|
||||||
label: 'name'
|
label: 'orgname'
|
||||||
}
|
}
|
||||||
const hoverNodeId = ref(null);
|
const treeloading = ref(false);
|
||||||
|
const tableloading = ref(false);
|
||||||
const currentNodeId = ref(null);
|
const currentNodeId = ref(null);
|
||||||
const dialogVisible = ref(false);
|
const dialogVisible = ref(false);
|
||||||
const title = ref('新增用户');
|
const title = ref('新增用户');
|
||||||
const ruleForm = ref();
|
const ruleForm:any = ref({});
|
||||||
const ruleFormRef = ref<FormInstance>()
|
const ruleFormRef = ref<FormInstance>()
|
||||||
|
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||||
const rules = ref({
|
const rules = ref({
|
||||||
orgname: [
|
username: [
|
||||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
{ required: true, message: '请输入登录账号', trigger: 'blur' },
|
||||||
],
|
],
|
||||||
orgcode: [
|
nickname: [
|
||||||
{ required: true, message: '请输入编号', trigger: 'blur' },
|
{ required: true, message: '请输入用户姓名', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
usertype: [
|
||||||
|
{ required: true, message: '请选择所属角色', trigger: 'change' },
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
const queryorgname = ref('')
|
const preventcombo = ref(false)
|
||||||
|
const querynickname = ref('')
|
||||||
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
|
const multipleTableRef = ref<InstanceType<typeof ElTable>>()
|
||||||
const multipleSelection = ref([])
|
const multipleSelection = ref([])
|
||||||
const tableData = ref([{orgname:'23'}])
|
const tableData = ref([])
|
||||||
const deptdialog = ref(false);
|
const typeoptions = ref([
|
||||||
const depttitle = ref('新增部门')
|
{ value: '1', label: '管理员' },
|
||||||
const deptForm = ref();
|
{ value: '2', label: '普通用户' },
|
||||||
const deptFormRef = ref<FormInstance>()
|
])
|
||||||
const deptrules = ref({
|
const currentPage = ref(1)
|
||||||
orgname: [
|
const pageSize = ref(10)
|
||||||
{ required: true, message: '请输入名称', trigger: 'blur' },
|
const total = ref(0)
|
||||||
],
|
|
||||||
orgcode: [
|
|
||||||
{ required: true, message: '请输入编号', trigger: 'blur' },
|
|
||||||
],
|
|
||||||
})
|
|
||||||
const handleMouseEnter = (node) => {
|
|
||||||
hoverNodeId.value = node.key;
|
|
||||||
};
|
|
||||||
const handleMouseLeave = () => {
|
|
||||||
hoverNodeId.value = null;
|
|
||||||
};
|
|
||||||
const submitForm = (formEl: FormInstance | undefined) => {
|
const submitForm = (formEl: FormInstance | undefined) => {
|
||||||
if (!formEl) return
|
if (!formEl) return
|
||||||
formEl.validate((valid) => {
|
formEl.validate((valid:any) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
if(preventcombo.value){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
preventcombo.value = true
|
||||||
if(ruleForm.value.id !== ''){
|
if(ruleForm.value.id !== ''){
|
||||||
|
updateUser(ruleForm.value).then(res => {
|
||||||
|
ElMessage({
|
||||||
|
type: 'success',
|
||||||
|
message: '修改成功',
|
||||||
|
})
|
||||||
|
dialogVisible.value = false
|
||||||
|
preventcombo.value = false
|
||||||
|
getuserinfo()
|
||||||
|
})
|
||||||
}else{
|
}else{
|
||||||
console.log(ruleForm.value,'submit!')
|
addUser(ruleForm.value).then(res => {
|
||||||
addOrganization(ruleForm.value).then(res => {
|
|
||||||
ElMessage({
|
ElMessage({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
message: '新增成功',
|
message: '新增成功',
|
||||||
})
|
})
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
gettree()
|
preventcombo.value = false
|
||||||
|
getuserinfo()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
@ -83,53 +88,6 @@ const resetForm = (formEl: FormInstance | undefined) => {
|
|||||||
formEl.resetFields()
|
formEl.resetFields()
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
}
|
}
|
||||||
const deptsubmitForm = (formEl: FormInstance | undefined) => {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.validate((valid) => {
|
|
||||||
if (valid) {
|
|
||||||
if(deptForm.value.id !== ''){
|
|
||||||
|
|
||||||
}else{
|
|
||||||
console.log(deptForm.value,'submit!')
|
|
||||||
addOrganization(deptForm.value).then(res => {
|
|
||||||
ElMessage({
|
|
||||||
type: 'success',
|
|
||||||
message: '新增成功',
|
|
||||||
})
|
|
||||||
dialogVisible.value = false
|
|
||||||
gettree()
|
|
||||||
})
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const deptresetForm = (formEl: FormInstance | undefined) => {
|
|
||||||
if (!formEl) return
|
|
||||||
formEl.resetFields()
|
|
||||||
dialogVisible.value = false
|
|
||||||
}
|
|
||||||
const deltree = (data:any) => {
|
|
||||||
ElMessageBox.confirm(
|
|
||||||
'确定删除该条信息吗?',
|
|
||||||
'提示',
|
|
||||||
{
|
|
||||||
confirmButtonText: '确定',
|
|
||||||
cancelButtonText: '取消',
|
|
||||||
type: 'warning',
|
|
||||||
}
|
|
||||||
)
|
|
||||||
.then(() => {
|
|
||||||
ElMessage({
|
|
||||||
type: 'success',
|
|
||||||
message: '删除成功',
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const handleSelectionChange = (val:any) => {
|
const handleSelectionChange = (val:any) => {
|
||||||
multipleSelection.value = val
|
multipleSelection.value = val
|
||||||
}
|
}
|
||||||
@ -138,44 +96,81 @@ onMounted(() => {
|
|||||||
gettree()
|
gettree()
|
||||||
})
|
})
|
||||||
function 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 = {
|
const params = {
|
||||||
appId: props.applicationId,
|
appId: props.applicationId,
|
||||||
orgtype:'01',
|
orgid:currentNodeId.value,
|
||||||
parentid:'0',
|
nickname:'',
|
||||||
orgName:''
|
current:1,
|
||||||
|
size:10
|
||||||
}
|
}
|
||||||
console.log(params,'查询')
|
queryUsers(params).then(res => {
|
||||||
getOrganizations(params).then(res => {
|
tableData.value = res.data.data.records
|
||||||
console.log(res,'查询')
|
total.value = 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 = res.data.data.total
|
||||||
|
tableloading.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
function nodeclick(data:any,node:any){
|
function nodeclick(data:any,node:any){
|
||||||
currentNodeId.value = node.key
|
if(data.orgtype == '01'){
|
||||||
|
treeRef.value!.setCurrentKey(null)
|
||||||
}
|
return
|
||||||
function addtree(data:any){
|
|
||||||
ruleForm.value = {
|
|
||||||
id:'',
|
|
||||||
appId:props.applicationId,
|
|
||||||
orgname: '',
|
|
||||||
orgcode: '',
|
|
||||||
orgtype: '01',
|
|
||||||
parentid:'0'
|
|
||||||
}
|
}
|
||||||
title.value = '新增企业'
|
currentNodeId.value = node.key
|
||||||
dialogVisible.value = true
|
getuserinfo()
|
||||||
}
|
}
|
||||||
function edittree(data:any){
|
function edittable(data:any){
|
||||||
title.value = '修改企业'
|
title.value = '修改用户'
|
||||||
ruleForm.value = JSON.parse(JSON.stringify(data))
|
ruleForm.value = JSON.parse(JSON.stringify(data))
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
}
|
}
|
||||||
function edittable(data:any){
|
function deltable(row:any){
|
||||||
depttitle.value = '修改企业'
|
|
||||||
deptForm.value = JSON.parse(JSON.stringify(data))
|
|
||||||
deptdialog.value = true
|
|
||||||
}
|
|
||||||
function deltable(data:any){
|
|
||||||
ElMessageBox.confirm(
|
ElMessageBox.confirm(
|
||||||
'确定删除该条信息吗?',
|
'确定删除该条信息吗?',
|
||||||
'提示',
|
'提示',
|
||||||
@ -184,15 +179,16 @@ function deltable(data:any){
|
|||||||
cancelButtonText: '取消',
|
cancelButtonText: '取消',
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
}
|
}
|
||||||
)
|
).then(() => {
|
||||||
.then(() => {
|
deleteUserById(row.id).then(res => {
|
||||||
ElMessage({
|
ElMessage({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
message: '删除成功',
|
message: '删除成功',
|
||||||
})
|
})
|
||||||
|
getuserinfo()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
function deltables(){
|
function deltables(){
|
||||||
@ -210,18 +206,13 @@ function deltables(){
|
|||||||
multipleSelection.value.forEach(e => {
|
multipleSelection.value.forEach(e => {
|
||||||
arr.push(e.id)
|
arr.push(e.id)
|
||||||
});
|
});
|
||||||
deleteById(arr.join()).then(res => {
|
deleteUserByIds(arr.join()).then(res => {
|
||||||
if(res.data.code == '0'){
|
|
||||||
gettree()
|
|
||||||
ElMessage.success('删除成功')
|
|
||||||
}else{
|
|
||||||
ElMessage.error('删除失败')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
ElMessage({
|
ElMessage({
|
||||||
type: 'success',
|
type: 'success',
|
||||||
message: '删除成功',
|
message: '删除成功',
|
||||||
})
|
})
|
||||||
|
getuserinfo()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
|
|
||||||
@ -231,42 +222,70 @@ function addtable(){
|
|||||||
if(currentNodeId.value == '' || currentNodeId.value == null){
|
if(currentNodeId.value == '' || currentNodeId.value == null){
|
||||||
ElMessage({
|
ElMessage({
|
||||||
type: 'warning',
|
type: 'warning',
|
||||||
message: '请选择企业！',
|
message: '请选择部门！',
|
||||||
})
|
})
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
deptForm.value = {
|
ruleFormRef.value?.resetFields();
|
||||||
|
ruleForm.value = {
|
||||||
id:'',
|
id:'',
|
||||||
app_id:props.applicationId,
|
appId:props.applicationId,
|
||||||
orgname: '',
|
orgid:currentNodeId.value,
|
||||||
orgcode: '',
|
username: '',
|
||||||
orgtype: '02',
|
usertype: '',
|
||||||
parentid:currentNodeId.value,
|
nickname:'',
|
||||||
manager:'',
|
email:'',
|
||||||
description:'',
|
phone:'',
|
||||||
address:'',
|
status:'1',
|
||||||
isvaild:'1',
|
|
||||||
contactPhone:'',
|
|
||||||
contactPerson:''
|
|
||||||
}
|
}
|
||||||
depttitle.value = '新增部门'
|
title.value = '新增用户'
|
||||||
deptdialog.value = true
|
dialogVisible.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleClose() {
|
function handleClose() {
|
||||||
ruleFormRef.value?.resetFields();
|
ruleFormRef.value?.resetFields();
|
||||||
dialogVisible.value = false;
|
dialogVisible.value = false;
|
||||||
}
|
}
|
||||||
function depthandleClose() {
|
function handleSizeChange(val: number){
|
||||||
deptFormRef.value?.resetFields();
|
pageSize.value = val
|
||||||
deptdialog.value = false
|
queryuserinfo()
|
||||||
|
}
|
||||||
|
function handleCurrentChange(val: number){
|
||||||
|
currentPage.value = val
|
||||||
|
queryuserinfo()
|
||||||
|
}
|
||||||
|
function formatDateTime(dateTimeStr:any){
|
||||||
|
return dateTimeStr.replace('T', ' ');
|
||||||
|
}
|
||||||
|
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){
|
||||||
|
resetPassword(row.id).then(res => {
|
||||||
|
if(res.data.code == '0'){
|
||||||
|
ElMessage.success('重置成功')
|
||||||
|
}else{
|
||||||
|
ElMessage.error('重置失败')
|
||||||
|
}
|
||||||
|
})
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div class="organization-box">
|
<div class="organization-box">
|
||||||
<div class="organization-leftbox">
|
<div class="organization-leftbox">
|
||||||
<div class="leftbox-title">列表</div>
|
<div class="leftbox-title">列表</div>
|
||||||
<el-tree :data="treeData" node-key="id" :props="defaultProps"
|
<el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
|
||||||
highlight-current default-expand-all :expand-on-click-node="false"
|
highlight-current default-expand-all :expand-on-click-node="false"
|
||||||
@node-click="nodeclick">
|
@node-click="nodeclick">
|
||||||
</el-tree>
|
</el-tree>
|
||||||
@ -274,8 +293,8 @@ function depthandleClose() {
|
|||||||
<div class="organization-rightbox">
|
<div class="organization-rightbox">
|
||||||
<div class="querybox">
|
<div class="querybox">
|
||||||
<div>
|
<div>
|
||||||
<el-input v-model="queryorgname" placeholder="请输入用户名称" style="width: 200px;margin-right: 10px;" />
|
<el-input v-model="querynickname" placeholder="请输入用户名称" style="width: 200px;margin-right: 10px;" />
|
||||||
<el-button type="primary" style="min-width: 50px;">搜索</el-button>
|
<el-button type="primary" style="min-width: 50px;" @click="queryuserinfo">搜索</el-button>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<el-button type="primary" style="min-width: 50px;" @click="addtable">
|
<el-button type="primary" style="min-width: 50px;" @click="addtable">
|
||||||
@ -288,43 +307,69 @@ function depthandleClose() {
|
|||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<el-table ref="multipleTableRef" :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
|
<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 type="selection" width="55" />
|
||||||
<el-table-column prop="orgcode" label="部门编号"/>
|
<!-- <el-table-column prop="orgcode" label="用户编号"/> -->
|
||||||
<el-table-column prop="orgname" label="部门名称"/>
|
<el-table-column prop="nickname" label="用户姓名"/>
|
||||||
<el-table-column prop="manager" label="负责人"/>
|
<el-table-column prop="username" label="登录账号"/>
|
||||||
<el-table-column prop="description" label="部门描述"/>
|
<el-table-column prop="usertype" label="所属角色">
|
||||||
<el-table-column prop="contactperson" label="联系人"/>
|
|
||||||
<el-table-column prop="contactphone" label="联系电话"/>
|
|
||||||
<el-table-column prop="address" label="联系地址"/>
|
|
||||||
<el-table-column prop="isvaild" label="是否有效" width="110">
|
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-switch v-model="scope.row.isvaild" style="margin-right: 10px;"/>
|
<span v-if="scope.row.usertype == '1'">管理员</span>
|
||||||
<span v-if="scope.row.isvaild == '1'" style="color: #0089ff;font-size: 14px;">有效</span>
|
<span v-else-if="scope.row.usertype == '2'">普通用户</span>
|
||||||
<span v-else-if="scope.row.isvaild == '0'" style="color: #bbbfc4;font-size: 14px;">无效</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>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column prop="lastmodifier" label="最近修改者"/>
|
<el-table-column prop="lastmodifier" label="最近修改者"/>
|
||||||
<el-table-column prop="lastmodifydate" label="最近修改日期"/>
|
<el-table-column prop="lastmodifydate" label="最近修改日期" width="170">
|
||||||
<el-table-column fixed="right" label="操作" width="80">
|
|
||||||
<template #default="scope">
|
<template #default="scope">
|
||||||
<el-icon style="font-size: 16px;margin-right: 18px;cursor: pointer;" @click="edittable(scope.row)">
|
<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"/>
|
<permission_table_edit_blue class="svg-icon"/>
|
||||||
</el-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)">
|
<el-icon style="font-size: 16px;cursor: pointer;" @click="deltable(scope.row)">
|
||||||
<permission_table_del_blue class="svg-icon"/>
|
<permission_table_del_blue class="svg-icon"/>
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</el-table>
|
||||||
|
<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 50, 100]"
|
||||||
|
background layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 20px;"
|
||||||
|
@size-change="handleSizeChange" @current-change="handleCurrentChange"/>
|
||||||
</div>
|
</div>
|
||||||
<el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
|
<el-dialog v-model="dialogVisible" :title="title" width="30%" :before-close="handleClose">
|
||||||
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="60px" class="demo-ruleForm">
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||||
<el-form-item label="编号" prop="orgcode">
|
<el-form-item label="用户姓名" prop="nickname">
|
||||||
<el-input v-model="ruleForm.orgcode" />
|
<el-input v-model="ruleForm.nickname" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="名称" prop="orgname">
|
<el-form-item label="登录账号" prop="username">
|
||||||
<el-input v-model="ruleForm.orgname" />
|
<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-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
@ -334,37 +379,6 @@ function depthandleClose() {
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</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" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="部门名称" prop="orgname">
|
|
||||||
<el-input v-model="deptForm.orgname" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="负责人" prop="manager">
|
|
||||||
<el-input v-model="deptForm.manager" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="部门描述" prop="description">
|
|
||||||
<el-input type="textarea" :rows="4" v-model="deptForm.description" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系人" prop="contactPerson">
|
|
||||||
<el-input v-model="deptForm.contactPerson" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系电话" prop="contactPhone">
|
|
||||||
<el-input v-model="deptForm.contactPhone" />
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="联系地址" prop="address">
|
|
||||||
<el-input v-model="deptForm.address" />
|
|
||||||
</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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@ -406,25 +420,21 @@ function depthandleClose() {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
:deep(.ed-tree){
|
:deep(.el-tree){
|
||||||
background:#212121;
|
background:#212121;
|
||||||
height: calc(100vh - 210px);
|
height: calc(100vh - 145px);
|
||||||
margin-top: 20px;
|
margin-top: 5px;
|
||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
:deep(.ed-tree-node__content){
|
:deep(.el-tree-node__content){
|
||||||
height: 40px;
|
height: 40px;
|
||||||
line-height: 40px;
|
line-height: 40px;
|
||||||
}
|
}
|
||||||
:deep(.ed-tree-node__content:hover){
|
:deep(.el-tree-node__content:hover){
|
||||||
background: rgba(61,158, 255, 0.1);
|
background: rgba(61,158, 255, 0.1);
|
||||||
color: #0089FF;
|
color: #0089FF;
|
||||||
}
|
}
|
||||||
:deep(.ed-tree--highlight-current .ed-tree-node.is-current>.ed-tree-node__content){
|
|
||||||
background: #409eff;
|
|
||||||
color: #ffffff;
|
|
||||||
}
|
|
||||||
:deep(.custom-tree-node){
|
:deep(.custom-tree-node){
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -433,9 +443,23 @@ function depthandleClose() {
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
padding-right: 8px;
|
padding-right: 8px;
|
||||||
}
|
}
|
||||||
:deep(.ed-tree-node__content>.ed-tree-node__expand-icon){
|
:deep(.el-tree-node__content>.ed-tree-node__expand-icon){
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
}
|
}
|
||||||
|
:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
|
||||||
|
background: #409eff;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:deep(.el-tree-node:focus>.el-tree-node__content){
|
||||||
|
background:#212121;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:deep(.el-text){
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:deep(.el-tree-node__expand-icon){
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.organization-rightbox{
|
.organization-rightbox{
|
||||||
width: calc(100% - 240px);
|
width: calc(100% - 240px);
|
||||||
@ -579,5 +603,45 @@ function depthandleClose() {
|
|||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
border: 1px solid #0089ff;
|
border: 1px solid #0089ff;
|
||||||
}
|
}
|
||||||
|
.ed-pagination__total{
|
||||||
|
color: #F2F4F5;
|
||||||
|
}
|
||||||
|
.ed-pagination__jump{
|
||||||
|
color: #F2F4F5;
|
||||||
|
}
|
||||||
|
.ed-pagination .ed-pager li{
|
||||||
|
background: #252626;
|
||||||
|
border: 1px solid #434343 !important;
|
||||||
|
color:#fff !important;
|
||||||
|
}
|
||||||
|
.ed-pagination .ed-pager li:hover{
|
||||||
|
background: #252626;
|
||||||
|
}
|
||||||
|
.ed-pagination button.is-disabled, .ed-pagination button:disabled {
|
||||||
|
color: #787878;
|
||||||
|
background-color: #252626;
|
||||||
|
border-color: #636363 !important;
|
||||||
|
}
|
||||||
|
.ed-pagination .btn-next[aria-disabled=true]:active, .ed-pagination .btn-next[aria-disabled=true]:hover, .ed-pagination .btn-prev[aria-disabled=true]:active, .ed-pagination .btn-prev[aria-disabled=true]:hover{
|
||||||
|
color: #bbbfc4 !important;
|
||||||
|
background-color: #252626 !important;
|
||||||
|
border-color: #636363 !important;
|
||||||
|
}
|
||||||
|
.ed-pagination__jump{
|
||||||
|
color:#fff !important;
|
||||||
|
}
|
||||||
|
.ed-pagination .btn-next:hover, .ed-pagination .btn-prev:hover{
|
||||||
|
background: #252626 !important;
|
||||||
|
border: 1px solid #0089ff !important;
|
||||||
|
color:#0089ff !important;
|
||||||
|
}
|
||||||
|
.ed-pagination button{
|
||||||
|
background: #252626;
|
||||||
|
border: 1px solid #434343 !important;
|
||||||
|
color:#fff !important;
|
||||||
|
}
|
||||||
|
.ed-pagination.is-background .btn-next.is-active, .ed-pagination.is-background .btn-prev.is-active, .ed-pagination.is-background .ed-pager li.is-active {
|
||||||
|
border-color: #0089ff !important;
|
||||||
|
color: #0089ff !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user