Compare commits
4 Commits
ce617bf906
...
eab207256a
| Author | SHA1 | Date | |
|---|---|---|---|
|
eab207256a | ||
|
|
6ac002c2d5 | ||
|
|
236e540951 | ||
|
|
77846d5360 |
@ -6,37 +6,27 @@ import { baseUrlHost } from '../baseUrlHost';
|
||||
* 注意在写get请求时，参数是params，而不是data，要标注好
|
||||
*
|
||||
* 登录api接口集合
|
||||
* @method getRoleList 获取角色列表
|
||||
* @method getRoleList 获取分页角色列表
|
||||
* @method deleteRole 删除角色
|
||||
* @method saveRole 保存角色
|
||||
* @method updateRole 更新角色
|
||||
* @method getroleListAll 获取全部角色
|
||||
* @method getRoleDetail 查询单个角色
|
||||
*/
|
||||
|
||||
export function RoleApi() {
|
||||
export function roleApi() {
|
||||
return {
|
||||
getRoleList: () => {
|
||||
getRoleList: (params:object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/acGroup',
|
||||
method: 'get',
|
||||
params,
|
||||
});
|
||||
},
|
||||
deleteRole: (id: Number) => {
|
||||
addRole:(data:object) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/acGroup/${id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
},
|
||||
getRoleDetail: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/acGroup/${id}`,
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
saveRole: (data: object) => {
|
||||
return request({
|
||||
url: baseUrlHost + '/acGroup',
|
||||
method: 'post',
|
||||
url:baseUrlHost + '/acGroup',
|
||||
method:'post',
|
||||
data,
|
||||
})
|
||||
},
|
||||
@ -47,5 +37,23 @@ export function RoleApi() {
|
||||
data,
|
||||
})
|
||||
},
|
||||
getRoleDetail: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/acGroup/${id}`,
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
deleteRole: (id: Number) => {
|
||||
return request({
|
||||
url: baseUrlHost + `/acGroup/${id}`,
|
||||
method: 'delete',
|
||||
});
|
||||
},
|
||||
getroleListAll: () => {
|
||||
return request({
|
||||
url: baseUrlHost + `/acGroup/`,
|
||||
method: 'get',
|
||||
});
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
26
src/api/roleaction/index.ts
Normal file
26
src/api/roleaction/index.ts
Normal file
@ -0,0 +1,26 @@
|
||||
import request from '/@/utils/request';
|
||||
import { baseUrlHost } from '../baseUrlHost';
|
||||
|
||||
/**
|
||||
*
|
||||
* @method setUprolePermission 设置角色的权限
|
||||
* @method checkRoleholdAbility 查询角色拥有功能
|
||||
*/
|
||||
|
||||
export function roleactionApi(){
|
||||
return {
|
||||
setUprolePermission:(data:object) => {
|
||||
return request({
|
||||
url:baseUrlHost + '/acGroupAction/grantPurviews',
|
||||
method: 'post',
|
||||
data,
|
||||
})
|
||||
},
|
||||
checkRoleholdAbility:(groupid:number) => {
|
||||
return request({
|
||||
url:baseUrlHost + '/acGroupAction/purviews/of/' + groupid,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
25
src/api/roletype/index.ts
Normal file
25
src/api/roletype/index.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import request from '/@/utils/request';
|
||||
import { baseUrlHost } from '../baseUrlHost';
|
||||
|
||||
/**
|
||||
*
|
||||
* @method getroleTypeALL 获取全部角色类型
|
||||
* @method checkRoletypeTree 查询角色类型功能树
|
||||
*/
|
||||
|
||||
export function roletypeApi(){
|
||||
return {
|
||||
getroleTypeALL:() => {
|
||||
return request({
|
||||
url:baseUrlHost + '/acGrouptype/all',
|
||||
method: 'get',
|
||||
})
|
||||
},
|
||||
checkRoletypeTree:(id:number) => {
|
||||
return request({
|
||||
url:baseUrlHost + '/acGrouptype/findByGrouptypeTree/' + id,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
|
||||
<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
|
||||
<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
|
||||
<div class="layout-navbars-breadcrumb-user-icon">
|
||||
<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
|
||||
</div>
|
||||
@ -11,7 +11,7 @@
|
||||
<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown> -->
|
||||
</el-dropdown>
|
||||
<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
|
||||
<div class="layout-navbars-breadcrumb-user-icon">
|
||||
<i
|
||||
@ -73,10 +73,10 @@
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
|
||||
<!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>
|
||||
<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item> -->
|
||||
<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<template>
|
||||
<!-- <template>
|
||||
<div class="home-container layout-pd">
|
||||
<el-row :gutter="15" class="home-card-one mb15">
|
||||
<el-col
|
||||
@ -630,4 +630,408 @@ $homeNavLengh: 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style> -->
|
||||
//修改后的首页
|
||||
<template>
|
||||
<div class="personal layout-pd">
|
||||
<el-row>
|
||||
<!-- 个人信息 -->
|
||||
<el-col :xs="24" :sm="16">
|
||||
<el-card shadow="hover" header="个人信息">
|
||||
<div class="personal-user">
|
||||
<div class="personal-user-left">
|
||||
<el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
|
||||
<img src="../../assets/图片2.png" />
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="personal-user-right">
|
||||
<el-row>
|
||||
<el-col :span="24" class="personal-title mb18">{{ currentTime }}，admin，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="8" class="personal-item mb6">
|
||||
<div class="personal-item-label">昵称：</div>
|
||||
<div class="personal-item-value">小柒</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="16" class="personal-item mb6">
|
||||
<div class="personal-item-label">身份：</div>
|
||||
<div class="personal-item-value">超级管理</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :xs="24" :sm="8" class="personal-item mb6">
|
||||
<div class="personal-item-label">登录IP：</div>
|
||||
<div class="personal-item-value">192.168.1.1</div>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="16" class="personal-item mb6">
|
||||
<div class="personal-item-label">登录时间：</div>
|
||||
<div class="personal-item-value">2021-02-05 18:47:26</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 消息通知 -->
|
||||
<el-col :xs="24" :sm="8" class="pl15 personal-info">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<span>名言推荐</span>
|
||||
<span class="personal-info-more">更多</span>
|
||||
</template>
|
||||
<div class="personal-info-box">
|
||||
<ul class="personal-info-ul">
|
||||
<li v-for="(item, index) in catchphraseDate" :key="index" class="personal-info-li">
|
||||
{{ item }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 营销推荐 -->
|
||||
<!-- <el-col :span="24">
|
||||
<el-card shadow="hover" class="mt15" header="营销推荐">
|
||||
<el-row :gutter="15" class="personal-recommend-row">
|
||||
<el-col :sm="6" v-for="(v, k) in state.recommendList" :key="k" class="personal-recommend-col">
|
||||
<div class="personal-recommend" :style="{ 'background-color': v.bg }">
|
||||
<SvgIcon :name="v.icon" :size="70" :style="{ color: v.iconColor }" />
|
||||
<div class="personal-recommend-auto">
|
||||
<div>{{ v.title }}</div>
|
||||
<div class="personal-recommend-msg">{{ v.msg }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
</el-col> -->
|
||||
|
||||
<!-- 日历板块 -->
|
||||
<el-col :span="24" >
|
||||
<el-card shadow="hover" class="mt15 personal-edit" header="日历" >
|
||||
<el-calendar v-model="value" class="custom-calendar" />
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
||||
<!-- 更新信息 -->
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
|
||||
<div class="personal-edit-title">基本信息</div>
|
||||
<el-form :model="state.personalForm" size="default" label-width="40px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="昵称">
|
||||
<el-input v-model="state.personalForm.name" placeholder="请输入昵称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="state.personalForm.email" placeholder="请输入邮箱" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="签名">
|
||||
<el-input v-model="state.personalForm.autograph" placeholder="请输入签名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="职业">
|
||||
<el-select v-model="state.personalForm.occupation" placeholder="请选择职业" clearable class="w100">
|
||||
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
|
||||
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
|
||||
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机">
|
||||
<el-input v-model="state.personalForm.phone" placeholder="请输入手机" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="性别">
|
||||
<el-select v-model="state.personalForm.sex" placeholder="请选择性别" clearable class="w100">
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
|
||||
<el-form-item>
|
||||
<el-button type="primary">
|
||||
<el-icon>
|
||||
<ele-Position />
|
||||
</el-icon>
|
||||
更新个人信息
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
<div class="personal-edit-title mb15">账号安全</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">账户密码</div>
|
||||
<div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">密保手机</div>
|
||||
<div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即修改</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">密保问题</div>
|
||||
<div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-box">
|
||||
<div class="personal-edit-safe-item">
|
||||
<div class="personal-edit-safe-item-left">
|
||||
<div class="personal-edit-safe-item-left-label">绑定QQ</div>
|
||||
<div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
|
||||
</div>
|
||||
<div class="personal-edit-safe-item-right">
|
||||
<el-button text type="primary">立即设置</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="personal">
|
||||
import { reactive, computed,ref } from 'vue';
|
||||
import { formatAxis } from '/@/utils/formatTime';
|
||||
import { newsInfoList, recommendList } from '../personal/mock';
|
||||
|
||||
// 定义变量内容
|
||||
const state = reactive<PersonalState>({
|
||||
newsInfoList,
|
||||
recommendList,
|
||||
personalForm: {
|
||||
name: '',
|
||||
email: '',
|
||||
autograph: '',
|
||||
occupation: '',
|
||||
phone: '',
|
||||
sex: '',
|
||||
},
|
||||
});
|
||||
|
||||
const catchphraseDate = ref([
|
||||
"仓廪实则知礼节，衣食足则知荣辱",
|
||||
"差若毫厘，谬以千里",
|
||||
"不积跬步无以至千里，不积小流无以成江海。",
|
||||
"纸上得来终觉浅，绝知此事要躬行。",
|
||||
"良好的开端是成功的一半。"
|
||||
])
|
||||
|
||||
const value = ref(new Date())
|
||||
|
||||
// 当前时间提示语
|
||||
const currentTime = computed(() => {
|
||||
return formatAxis(new Date());
|
||||
});
|
||||
// 图片基本路径
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '../../theme/mixins/index.scss';
|
||||
.personal {
|
||||
.personal-user {
|
||||
height: 130px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.personal-user-left {
|
||||
width: 100px;
|
||||
height: 130px;
|
||||
border-radius: 3px;
|
||||
:deep(.el-upload) {
|
||||
height: 100%;
|
||||
}
|
||||
.personal-user-left-upload {
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 3px;
|
||||
}
|
||||
&:hover {
|
||||
img {
|
||||
animation: logoAnimation 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-user-right {
|
||||
flex: 1;
|
||||
padding: 0 15px;
|
||||
.personal-title {
|
||||
font-size: 18px;
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
.personal-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
.personal-item-label {
|
||||
color: var(--el-text-color-secondary);
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
.personal-item-value {
|
||||
@include text-ellipsis(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-info {
|
||||
.personal-info-more {
|
||||
float: right;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 13px;
|
||||
&:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.personal-info-box {
|
||||
height: 130px;
|
||||
overflow: hidden;
|
||||
.personal-info-ul {
|
||||
list-style: none;
|
||||
.personal-info-li {
|
||||
font-size: 13px;
|
||||
padding-bottom: 10px;
|
||||
.personal-info-li-title {
|
||||
display: inline-block;
|
||||
@include text-ellipsis(1);
|
||||
color: var(--el-text-color-secondary);
|
||||
text-decoration: none;
|
||||
}
|
||||
& a:hover {
|
||||
color: var(--el-color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-recommend-row {
|
||||
.personal-recommend-col {
|
||||
.personal-recommend {
|
||||
position: relative;
|
||||
height: 100px;
|
||||
border-radius: 3px;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
i {
|
||||
right: 0px !important;
|
||||
bottom: 0px !important;
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
bottom: -10px;
|
||||
font-size: 70px;
|
||||
transform: rotate(-30deg);
|
||||
transition: all ease 0.3s;
|
||||
}
|
||||
.personal-recommend-auto {
|
||||
padding: 15px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 5%;
|
||||
color: var(--next-color-white);
|
||||
.personal-recommend-msg {
|
||||
font-size: 12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.personal-edit {
|
||||
.personal-edit-title {
|
||||
position: relative;
|
||||
padding-left: 10px;
|
||||
color: var(--el-text-color-regular);
|
||||
&::after {
|
||||
content: '';
|
||||
width: 2px;
|
||||
height: 10px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
.personal-edit-safe-box {
|
||||
border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
|
||||
padding: 15px 0;
|
||||
.personal-edit-safe-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.personal-edit-safe-item-left {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
.personal-edit-safe-item-left-label {
|
||||
color: var(--el-text-color-regular);
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.personal-edit-safe-item-left-value {
|
||||
color: var(--el-text-color-secondary);
|
||||
@include text-ellipsis(1);
|
||||
margin-right: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-of-type {
|
||||
padding-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.custom-calendar {
|
||||
/* 调整整体缩放比例 */
|
||||
zoom: 0.85; /* 缩放比例，调整到合适大小 */
|
||||
}
|
||||
|
||||
/* 调整特定部分样式 */
|
||||
.custom-calendar .el-calendar__header,
|
||||
.custom-calendar .el-calendar-table {
|
||||
font-size: 12px; /* 调整字体大小 */
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -104,9 +104,9 @@ const onSignIn = async () => {
|
||||
let res = await loginApi.login(state.ruleForm);
|
||||
if(res?.success){
|
||||
// 存储 token 到浏览器缓存
|
||||
Session.set('token', 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738');
|
||||
// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
|
||||
Cookies.set('userName', res.data.user.realname);
|
||||
Session.set('token', res.data.token);
|
||||
// usertype判断登录角色
|
||||
Cookies.set('userName', res.data.user.usertype === 1 ? 'admin' : 'user');
|
||||
if (!themeConfig.value.isRequestRoutes) {
|
||||
// 前端控制路由，2、请注意执行顺序
|
||||
const isNoPower = await initFrontEndControlRoutes();
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
<el-card shadow="hover" class="layout-padding-auto">
|
||||
<div class="system-dept-search mb15">
|
||||
<span>模块:</span>
|
||||
<el-select @change="handleChangeModule" size="default" v-model="state.tableData.param.moduleName" placeholder="请选择" clearable style="max-width: 180px;margin:0 10px;">
|
||||
<el-select @change="handleChangeModule" size="default" v-model="state.tableData.param.moduleName" placeholder="请选择" clearable style="max-width: 180px;margin:0 10px;">
|
||||
<el-option
|
||||
:data-op="item.id" v-for="(item,index) in moduleList"
|
||||
:key="index"
|
||||
@ -231,7 +231,13 @@ const state = reactive({
|
||||
const photoApi = photosApi();
|
||||
|
||||
// 模块列表
|
||||
const moduleList = ref([]);
|
||||
const moduleList = ref([{
|
||||
id: 2,
|
||||
moduleName: "首页推荐",
|
||||
moduleRemark: null,
|
||||
moduleLevel: 1,
|
||||
state: "t"
|
||||
}]);
|
||||
|
||||
const getModuleList = async() => {
|
||||
try {
|
||||
@ -275,15 +281,26 @@ const handleChangeModule = async(val: any) => {
|
||||
const getTableData = async() => {
|
||||
try {
|
||||
state.tableData.loading = true;
|
||||
|
||||
state.tableData.param.moduleName = '首页推荐';
|
||||
|
||||
let res = await photoApi.getPhotosList(state.tableData.param);
|
||||
if(res?.success){
|
||||
state.tableData.data = res.data.records;
|
||||
state.tableData.data = res.data.records.map((record:any) => {
|
||||
// 检查图片名称是否不存在或为空
|
||||
return {
|
||||
...record,
|
||||
name: record.name || '暂无' // 如果图片名称为空，则设置为 '暂无'
|
||||
};
|
||||
});
|
||||
state.tableData.total = res.data.total;
|
||||
|
||||
}else{
|
||||
ElMessage.error('图片列表获取失败！');
|
||||
}
|
||||
} catch (error) {
|
||||
} finally {
|
||||
state.tableData.param.moduleName = '';
|
||||
state.tableData.loading = false;
|
||||
}
|
||||
};
|
||||
@ -293,6 +310,8 @@ const reset = () =>{
|
||||
state.tableData.param = {
|
||||
name: '',
|
||||
current: 1,
|
||||
labelName: '',
|
||||
moduleName: '首页推荐',
|
||||
size: 10,
|
||||
}
|
||||
getTableData();
|
||||
@ -562,7 +581,7 @@ const resetForm = () => {
|
||||
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
getModuleList();
|
||||
// getModuleList();
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@ -1,15 +1,15 @@
|
||||
<template>
|
||||
<div class="system-role-dialog-container">
|
||||
<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
|
||||
<el-form ref="roleDialogFormRef" :model="state.ruleForm" size="default" label-width="90px">
|
||||
<el-form ref="roleDialogFormRef" :model="state.ruleForm" :rules="state.rules" size="default" label-width="90px">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="角色名称">
|
||||
<el-form-item label="角色名称" prop="name">
|
||||
<el-input v-model="state.ruleForm.name" placeholder="请输入角色名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="角色标识">
|
||||
<el-form-item label="角色标识" prop="acgroup">
|
||||
<template #label>
|
||||
<el-tooltip effect="dark" content="用于 `router/route.ts` meta.roles" placement="top-start">
|
||||
<span>角色标识</span>
|
||||
@ -18,24 +18,21 @@
|
||||
<el-input v-model="state.ruleForm.acgroup" placeholder="请输入角色标识" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="state.ruleForm.id" :min="0" :max="999" controls-position="right" placeholder="请输入排序" class="w100" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
|
||||
<el-form-item label="角色状态">
|
||||
<el-switch v-model="state.ruleForm.state" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
<el-switch v-model="state.ruleForm.show" inline-prompt active-text="启" inactive-text="禁"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="角色描述">
|
||||
<el-form-item label="角色描述" prop="description">
|
||||
<el-input v-model="state.ruleForm.description" type="textarea" placeholder="请输入角色描述" maxlength="150"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
|
||||
<el-form-item label="菜单权限">
|
||||
<el-tree :data="state.menuData" :props="state.menuProps" show-checkbox class="menu-data-tree" />
|
||||
<el-form-item label="角色权限" v-if="state.dialog.type === 'edit'" >
|
||||
<el-tree v-loading="state.loadingTree" :props="state.props" :data="state.treeData" show-checkbox node-key="actioncode"
|
||||
default-expand-all :default-checked-keys="state.ruleForm.checkTree" ref="tree" class="menu-data-tree" @check="handleCheckChange">
|
||||
</el-tree>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
@ -51,26 +48,58 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="systemRoleDialog">
|
||||
import { reactive, ref } from 'vue';
|
||||
import { onMounted, reactive, ref , nextTick } from 'vue';
|
||||
import { roletypeApi } from '/@/api/roletype';
|
||||
import { roleactionApi } from '/@/api/roleaction';
|
||||
import { ElMessage } from 'element-plus';
|
||||
import { roleApi } from '/@/api/role';
|
||||
|
||||
// 定义子组件向父组件传值/事件
|
||||
const emit = defineEmits(['reset']);
|
||||
|
||||
const roleapi = roleApi()
|
||||
|
||||
const roletypeapi = roletypeApi();
|
||||
|
||||
const roleactionapi = roleactionApi();
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogFormRef = ref();
|
||||
const tree = ref();
|
||||
const state = reactive({
|
||||
ruleForm: {
|
||||
name: '', // 角色名称
|
||||
acgroup: '', // 角色标识
|
||||
id: 0, // 排序
|
||||
state: true, // 角色状态
|
||||
grouptypeid:0,//角色id
|
||||
show: 0, // 角色状态
|
||||
description: '', // 角色描述
|
||||
checkTree: [],
|
||||
},
|
||||
menuData: [] as TreeType[],
|
||||
menuProps: {
|
||||
children: 'children',
|
||||
label: 'label',
|
||||
data:{
|
||||
acgroup:'',
|
||||
name:'',
|
||||
},
|
||||
props: {
|
||||
label: function (data:any, node:any) {
|
||||
if (node.level == 1) {
|
||||
return data.modulename;
|
||||
} else if (node.level == 2) {
|
||||
return data.actionname;
|
||||
}
|
||||
},
|
||||
children: "actions",
|
||||
},
|
||||
rules: {
|
||||
name: { required: true, message: '请输入角色名称', trigger: 'blur' },
|
||||
acgroup: { required: true, message: '请选择角色标识', trigger: 'blur' },
|
||||
id: { required: true, message: '请输入角色id', trigger: 'change' },
|
||||
// checkTree: { required: true, message: '请选择至少一个菜单权限', trigger: 'change' },
|
||||
},
|
||||
loadingTree: false,
|
||||
//树型组
|
||||
treeData: [],
|
||||
//默认选中的树节点的id
|
||||
dialog: {
|
||||
isShowDialog: false,
|
||||
type: '',
|
||||
@ -79,23 +108,79 @@ const state = reactive({
|
||||
},
|
||||
});
|
||||
|
||||
// Check event to update selected data
|
||||
const handleCheckChange = (data: any,checked: boolean,indeterminate: boolean) => {
|
||||
console.log(data)
|
||||
// const tree = roleDialogFormRef.value?.$refs.tree;
|
||||
// if (!tree) {
|
||||
// console.error('el-tree instance is not available');
|
||||
// return;
|
||||
// }
|
||||
}
|
||||
|
||||
// 打开弹窗
|
||||
const openDialog = (type: string, row: any) => {
|
||||
const openDialog = async(type: string, row: any) => {
|
||||
if (type === 'edit') {
|
||||
state.ruleForm = row;
|
||||
state.ruleForm = { ...row, show: row.show == 1 };
|
||||
state.dialog.type = type
|
||||
console.log(4444444,state.ruleForm);
|
||||
state.dialog.title = '修改角色';
|
||||
state.dialog.submitTxt = '修 改';
|
||||
await getroletypeTree(state.ruleForm.grouptypeid);
|
||||
} else {
|
||||
resetForm();
|
||||
state.dialog.title = '新增角色';
|
||||
state.dialog.submitTxt = '新 增';
|
||||
// 清空表单，此项需加表单验证才能使用
|
||||
// console.log(state.ruleForm);
|
||||
state.dialog.type = type
|
||||
roleDialogFormRef.value?.resetFields();
|
||||
nextTick(() => getroletypeTree(1));
|
||||
//清空表单，此项需加表单验证才能使用
|
||||
// nextTick(() => {
|
||||
// roleDialogFormRef.value.resetFields();
|
||||
// });
|
||||
}
|
||||
state.dialog.isShowDialog = true;
|
||||
getMenuData();
|
||||
|
||||
};
|
||||
|
||||
// 清空表单
|
||||
const resetForm = () => {
|
||||
state.ruleForm = {
|
||||
name: '',
|
||||
acgroup: '',
|
||||
id: 0,
|
||||
grouptypeid: 0,
|
||||
show: 0,
|
||||
description: '',
|
||||
checkTree:[]
|
||||
};
|
||||
// nextTick(() => {
|
||||
// const tree = roleDialogFormRef.value.$refs.tree;
|
||||
// if (tree) {
|
||||
// tree.setCheckedKeys([]);
|
||||
// }
|
||||
// });
|
||||
};
|
||||
|
||||
//获取角色功能树
|
||||
const getroletypeTree = async(grouptypeid:number) =>{
|
||||
try{
|
||||
state.loadingTree = true;
|
||||
const resTree = await roletypeapi.checkRoletypeTree(grouptypeid)
|
||||
state.treeData = resTree.data.modules;
|
||||
if(state.dialog.type === 'edit'){
|
||||
const res = await roleactionapi.checkRoleholdAbility(state.ruleForm.id)
|
||||
state.ruleForm.checkTree = res.data
|
||||
}
|
||||
}catch(error){
|
||||
ElMessage.error('请求失败!')
|
||||
console.error(error);
|
||||
}finally{
|
||||
state.loadingTree = false
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭弹窗
|
||||
const closeDialog = () => {
|
||||
state.dialog.isShowDialog = false;
|
||||
@ -105,123 +190,106 @@ const onCancel = () => {
|
||||
closeDialog();
|
||||
};
|
||||
// 提交
|
||||
const onSubmit = () => {
|
||||
closeDialog();
|
||||
emit('reset');
|
||||
// if (state.dialog.type === 'add') { }
|
||||
};
|
||||
// 获取菜单结构数据
|
||||
const getMenuData = () => {
|
||||
state.menuData = [
|
||||
{
|
||||
id: 1,
|
||||
label: '系统管理',
|
||||
children: [
|
||||
{
|
||||
id: 11,
|
||||
label: '菜单管理',
|
||||
children: [
|
||||
{
|
||||
id: 111,
|
||||
label: '菜单新增',
|
||||
},
|
||||
{
|
||||
id: 112,
|
||||
label: '菜单修改',
|
||||
},
|
||||
{
|
||||
id: 113,
|
||||
label: '菜单删除',
|
||||
},
|
||||
{
|
||||
id: 114,
|
||||
label: '菜单查询',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
label: '角色管理',
|
||||
children: [
|
||||
{
|
||||
id: 121,
|
||||
label: '角色新增',
|
||||
},
|
||||
{
|
||||
id: 122,
|
||||
label: '角色修改',
|
||||
},
|
||||
{
|
||||
id: 123,
|
||||
label: '角色删除',
|
||||
},
|
||||
{
|
||||
id: 124,
|
||||
label: '角色查询',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
label: '用户管理',
|
||||
children: [
|
||||
{
|
||||
id: 131,
|
||||
label: '用户新增',
|
||||
},
|
||||
{
|
||||
id: 132,
|
||||
label: '用户修改',
|
||||
},
|
||||
{
|
||||
id: 133,
|
||||
label: '用户删除',
|
||||
},
|
||||
{
|
||||
id: 134,
|
||||
label: '用户查询',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: '权限管理',
|
||||
children: [
|
||||
{
|
||||
id: 21,
|
||||
label: '前端控制',
|
||||
children: [
|
||||
{
|
||||
id: 211,
|
||||
label: '页面权限',
|
||||
},
|
||||
{
|
||||
id: 212,
|
||||
label: '页面权限',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 22,
|
||||
label: '后端控制',
|
||||
children: [
|
||||
{
|
||||
id: 221,
|
||||
label: '页面权限',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
const onSubmit = async() => {
|
||||
// closeDialog();
|
||||
// emit('reset');
|
||||
roleDialogFormRef.value?.validate( async (valid: boolean) => {
|
||||
if(valid){
|
||||
state.ruleForm.show = state.ruleForm.show ? 1 : 0;
|
||||
state.ruleForm.grouptypeid = 1;
|
||||
let body = {
|
||||
actions:tree.value.getCheckedKeys(true, false),
|
||||
groupid:state.ruleForm.id
|
||||
}
|
||||
if (state.dialog.type === 'add') {
|
||||
try{
|
||||
const param = {
|
||||
acgroup:state.ruleForm.acgroup,
|
||||
name:state.ruleForm.name
|
||||
}
|
||||
const res = await roleapi.addRole(param);
|
||||
if (res?.success) {
|
||||
try{
|
||||
const data = await roleactionapi.setUprolePermission(body)
|
||||
console.log(5555555,data);
|
||||
}catch(error){
|
||||
console.error(error)
|
||||
}
|
||||
emit('reset');
|
||||
closeDialog();
|
||||
ElMessage.success('角色新建成功！');
|
||||
|
||||
// 重置表单数据
|
||||
Object.assign(state.ruleForm, {
|
||||
name: '',
|
||||
acgroup: '',
|
||||
grouptypeid: 0,
|
||||
show: 0,
|
||||
description: '',
|
||||
checkTree: [],
|
||||
});
|
||||
}
|
||||
} catch(error){
|
||||
console.error(error);
|
||||
ElMessage.error('角色新建失败！')
|
||||
}
|
||||
} else {
|
||||
try{
|
||||
const res = await roleapi.updateRole(state.ruleForm);
|
||||
if(res?.success){
|
||||
try{
|
||||
const res = await roleactionapi.setUprolePermission(body)
|
||||
console.log(5555555,res);
|
||||
emit('reset');
|
||||
ElMessage.success('角色修改成功！');
|
||||
closeDialog();
|
||||
}catch(error){
|
||||
ElMessage.error('角色权限修改失败!')
|
||||
console.error
|
||||
}
|
||||
|
||||
}
|
||||
}catch(error){
|
||||
ElMessage.error('角色修改失败！')
|
||||
console.error(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
// if (state.dialog.type === 'add') {
|
||||
// roleDialogFormRef.value?.validate((valid: boolean) => {
|
||||
// if (valid) {
|
||||
// closeDialog();
|
||||
// emit('reset');
|
||||
// } else {
|
||||
// ElMessage.error('请填写完整的表单信息');
|
||||
// return false;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// else{
|
||||
// roleDialogFormRef.value?.validate((valid:boolean) => {
|
||||
// if (valid) {
|
||||
// closeDialog();
|
||||
// emit('reset');
|
||||
// } else {
|
||||
// ElMessage.error('请修改完整的表单信息');
|
||||
// return false;
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
};
|
||||
|
||||
// 暴露变量
|
||||
defineExpose({
|
||||
openDialog,
|
||||
});
|
||||
|
||||
//页面加载时
|
||||
onMounted(() =>{
|
||||
// getroletypeTree(1)
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="system-role-container layout-padding">
|
||||
<div class="system-role-padding layout-padding-auto layout-padding-view">
|
||||
<div class="system-user-search mb15">
|
||||
<el-input v-model="state.tableData.param.search" size="default" placeholder="请输入角色名称" style="max-width: 180px"> </el-input>
|
||||
<el-button size="default" type="primary" class="ml10">
|
||||
<el-input v-model="state.tableData.param.name" size="default" placeholder="请输入角色名称" style="max-width: 180px" clearable> </el-input>
|
||||
<el-button size="default" type="primary" class="ml10" @click="getTableData">
|
||||
<el-icon>
|
||||
<ele-Search />
|
||||
</el-icon>
|
||||
@ -20,11 +20,10 @@
|
||||
<el-table-column type="index" label="序号" width="60" />
|
||||
<el-table-column prop="name" label="角色名称" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="acgroup" label="角色标识" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="id" label="排序" show-overflow-tooltip></el-table-column>
|
||||
<el-table-column prop="state" label="角色状态" show-overflow-tooltip>
|
||||
<el-table-column prop="show" label="角色状态" show-overflow-tooltip>
|
||||
<template #default="scope">
|
||||
<el-tag type="success" v-if="scope.row.state">启用</el-tag>
|
||||
<el-tag type="info" v-else>禁用</el-tag>
|
||||
<el-tag type="success" v-if="scope.row.show==1">启用</el-tag>
|
||||
<el-tag type="danger" v-else>禁用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="description" label="角色描述" show-overflow-tooltip></el-table-column>
|
||||
@ -59,12 +58,15 @@
|
||||
<script setup lang="ts" name="systemRole">
|
||||
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
|
||||
import { ElMessageBox, ElMessage,TableColumnCtx } from 'element-plus';
|
||||
import { RoleApi } from '/@/api/role';
|
||||
import { roleApi } from '/@/api/role';
|
||||
import { roletypeApi } from '/@/api/roletype';
|
||||
|
||||
// 引入组件
|
||||
const RoleDialog = defineAsyncComponent(() => import('/@/views/usermanage/role/dialog.vue'));
|
||||
|
||||
const roleapi = RoleApi();
|
||||
const roleapi = roleApi();
|
||||
|
||||
const roletypeapi = roletypeApi();
|
||||
|
||||
// 定义变量内容
|
||||
const roleDialogRef = ref();
|
||||
@ -74,12 +76,13 @@ const state = reactive<SysRoleState>({
|
||||
total: 0,
|
||||
loading: false,
|
||||
param: {
|
||||
search: '',
|
||||
name: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
// 初始化表格数据
|
||||
const getTableData = async() => {
|
||||
state.tableData.loading = true;
|
||||
@ -101,7 +104,13 @@ const getTableData = async() => {
|
||||
const res = await roleapi.getRoleList(state.tableData.param);
|
||||
// console.log(res.data);
|
||||
if(res?.success){
|
||||
state.tableData.data = res.data.records;
|
||||
state.tableData.data = res.data.records.map((record:any) => {
|
||||
return{
|
||||
...record,
|
||||
description:record.description || '无', //如果描述为空
|
||||
serch:record.name
|
||||
}
|
||||
});
|
||||
state.tableData.total = res.data.total;
|
||||
// console.log(state.tableData.data);
|
||||
}else{
|
||||
@ -115,14 +124,28 @@ const getTableData = async() => {
|
||||
}, 500);
|
||||
}
|
||||
};
|
||||
|
||||
//查询角色
|
||||
const getroleDetail = async() =>{
|
||||
try{
|
||||
const res = await roleapi.getRoleDetail();
|
||||
}catch(error){
|
||||
console.error(error)
|
||||
}
|
||||
};
|
||||
|
||||
// 打开新增角色弹窗
|
||||
const onOpenAddRole = (type: string) => {
|
||||
|
||||
roleDialogRef.value.openDialog(type);
|
||||
};
|
||||
// 打开修改角色弹窗
|
||||
const onOpenEditRole = (type: string, row: Object) => {
|
||||
console.log(row);
|
||||
|
||||
roleDialogRef.value.openDialog(type, row);
|
||||
};
|
||||
|
||||
// 删除角色
|
||||
const onRowDel = (row: any) => {
|
||||
ElMessageBox.confirm(`此操作将永久删除角色名称：“${row.name}”，是否继续?`, '提示', {
|
||||
@ -180,6 +203,7 @@ const onHandleCurrentChange = (val: number) => {
|
||||
// 页面加载时
|
||||
onMounted(() => {
|
||||
getTableData();
|
||||
// handleChange();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user