更改登录页展示界面以及token的获取

src/api/role/index.ts

@@ -6,34 +6,24 @@ 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',
@@ -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',
+			});
+		},
 	};
 }

src/api/roleaction/index.ts

@@ -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',
+      })
+    }
+  }
+}

src/api/roletype/index.ts

@@ -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',
+      })
+    }
+  }
+}

src/layout/navBars/topBar/user.vue

@@ -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>

src/views/home/index.vue

@@ -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> -->
+//修改后的首页
+<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>

src/views/login/component/account.vue

@@ -104,9 +104,9 @@ const onSignIn = async () => {
 		let res = await loginApi.login(state.ruleForm);
 		if(res?.success){
 			// 存储 token 到浏览器缓存
-			Session.set('token', 'fbc545a91cc94fe89296828a25a7e08e@9085553879028596738');
+			Session.set('token', res.data.token);
-			// 模拟数据，对接接口时，记得删除多余代码及对应依赖的引入。用于 `/src/stores/userInfo.ts` 中不同用户登录判断（模拟数据）
+			// usertype判断登录角色
-			Cookies.set('userName', res.data.user.realname);
+			Cookies.set('userName', res.data.user.usertype === 1 ? 'admin' : 'user');
 			if (!themeConfig.value.isRequestRoutes) {
 				// 前端控制路由，2、请注意执行顺序
 				const isNoPower = await initFrontEndControlRoutes();

src/views/photos/index.vue

@@ -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>

src/views/usermanage/role/dialog.vue

@@ -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-form-item label="角色权限" v-if="state.dialog.type === 'edit'" >
-							<el-tree :data="state.menuData" :props="state.menuProps" show-checkbox class="menu-data-tree" />
+							<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[],
+	data:{
-	menuProps: {
+		acgroup:'',
-		children: 'children',
+		name:'',
-		label: 'label',
 	},
+	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 = () => {
+const onSubmit = async() => {
-	closeDialog();
+	// 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');
-	// if (state.dialog.type === 'add') { }
+						closeDialog();
-};
+						ElMessage.success('角色新建成功！');
-// 获取菜单结构数据
+
-const getMenuData = () => {
+						// 重置表单数据
-	state.menuData = [
+						Object.assign(state.ruleForm, {
-		{
+							name: '',
-			id: 1,
+							acgroup: '',
-			label: '系统管理',
+							grouptypeid: 0,
-			children: [
+							show: 0,
-				{
+							description: '',
-					id: 11,
+							checkTree: [],
-					label: '菜单管理',
+          	});
-					children: [
+					}
-						{
+				} catch(error){
-							id: 111,
+					console.error(error);
-							label: '菜单新增',
+					ElMessage.error('角色新建失败！')
-						},
+				}
-						{
+			} else {
-							id: 112,
+				try{
-							label: '菜单修改',
+					const res = await roleapi.updateRole(state.ruleForm);
-						},
+					if(res?.success){
-						{
+						try{
-							id: 113,
+							const res = await roleactionapi.setUprolePermission(body)
-							label: '菜单删除',
+							console.log(5555555,res);
-						},
+							emit('reset');
-						{
+							ElMessage.success('角色修改成功！');
-							id: 114,
+							closeDialog();
-							label: '菜单查询',
+						}catch(error){
-						},
+							ElMessage.error('角色权限修改失败!')
-					],
+							console.error
-				},
+						}
-				{
+						
-					id: 12,
+					}
-					label: '角色管理',
+				}catch(error){
-					children: [
+					ElMessage.error('角色修改失败！')
-						{
+					console.error(error)
-							id: 121,
+				}
-							label: '角色新增',
+			}
-						},
+		}
-						{
+	})
-							id: 122,
+	// if (state.dialog.type === 'add') {
-							label: '角色修改',
+	// 	roleDialogFormRef.value?.validate((valid: boolean) => {
-						},
+  //   if (valid) {
-						{
+  //     closeDialog();
-							id: 123,
+  //     emit('reset');
-							label: '角色删除',
+  //   } else {
-						},
+  //     ElMessage.error('请填写完整的表单信息');
-						{
+  //     return false;
-							id: 124,
+  // 		}
-							label: '角色查询',
+  // 	}); 
-						},
+	// }
-					],
+	// else{
-				},
+	// 	roleDialogFormRef.value?.validate((valid:boolean) => {
-				{
+	// 		if (valid) {
-					id: 13,
+  //     closeDialog();
-					label: '用户管理',
+  //     emit('reset');
-					children: [
+  //   } else {
-						{
+  //     ElMessage.error('请修改完整的表单信息');
-							id: 131,
+  //     return false;
-							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: '页面权限',
-						},
-					],
-				},
-			],
-		},
-	];
 };
 
 // 暴露变量
 defineExpose({
 	openDialog,
 });
+
+//页面加载时
+onMounted(() =>{
+	// getroletypeTree(1)
+})
+
 </script>
 
 <style scoped lang="scss">

src/views/usermanage/role/index.vue

@@ -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-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">
+				<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="show" label="角色状态" show-overflow-tooltip>
-				<el-table-column prop="state" label="角色状态" show-overflow-tooltip>
 					<template #default="scope">
-						<el-tag type="success" v-if="scope.row.state">启用</el-tag>
+						<el-tag type="success" v-if="scope.row.show==1">启用</el-tag>
-						<el-tag type="info" v-else>禁用</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>