权限修改
This commit is contained in:
jingna
parent
33e717ccaa
commit
75c3c88502
7
frontend/src/api/data-visualization/permission/menu.ts
Normal file
7
frontend/src/api/data-visualization/permission/menu.ts
Normal file
@ -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 }) //关联模块
|
||||
@ -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 })//查询所有
|
||||
10
frontend/src/api/data-visualization/permission/role.ts
Normal file
10
frontend/src/api/data-visualization/permission/role.ts
Normal file
@ -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 }) //设置角色权限
|
||||
10
frontend/src/api/data-visualization/permission/user.ts
Normal file
10
frontend/src/api/data-visualization/permission/user.ts
Normal file
@ -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 }) //登录
|
||||
BIN
frontend/src/assets/system/add.png
Normal file
BIN
frontend/src/assets/system/add.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 122 B |
BIN
frontend/src/assets/system/logosmall.png
Normal file
BIN
frontend/src/assets/system/logosmall.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
BIN
frontend/src/assets/system/u594.png
Normal file
BIN
frontend/src/assets/system/u594.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 B |
@ -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>
|
||||
|
||||
@ -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) {
|
||||
|
||||
104
frontend/src/views/system/permissionset/header.vue
Normal file
104
frontend/src/views/system/permissionset/header.vue
Normal file
@ -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>
|
||||
228
frontend/src/views/system/permissionset/index.vue
Normal file
228
frontend/src/views/system/permissionset/index.vue
Normal file
@ -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>
|
||||
562
frontend/src/views/system/permissionset/organization/index.vue
Normal file
562
frontend/src/views/system/permissionset/organization/index.vue
Normal file
@ -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>
|
||||
381
frontend/src/views/system/permissionset/role/index.vue
Normal file
381
frontend/src/views/system/permissionset/role/index.vue
Normal file
@ -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>
|
||||
476
frontend/src/views/system/permissionset/user/index.vue
Normal file
476
frontend/src/views/system/permissionset/user/index.vue
Normal file
@ -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>
|
||||
178
frontend/src/views/system/permissionset/user/userinfo.vue
Normal file
178
frontend/src/views/system/permissionset/user/userinfo.vue
Normal file
@ -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>
|
||||
Loading…
Reference in New Issue
Block a user