update：权限管理&bug修复

src/api/match/role.js

@@ -102,4 +102,20 @@ export const sysroleDeleteDelete = (data) => {
  */
 export const sysroleSelectGet = () => {
     return http.get('/sysrole/select');
+};
+
+
+// ==================== 菜单管理 ====================
+
+/**
+ * 获取菜单下拉树数据
+ * @description 用于权限分配时的菜单树形选择器
+ * @returns {Promise<Array<{
+ *   label: string,      // 菜单名称
+ *   value: number,       // 菜单ID
+ *   children: Array      // 子菜单/按钮列表
+ * }>>} 返回树形结构的菜单数据
+ */
+export const sysmenuTreeselectGet = () => {
+    return http.get('/sysmenu/treeselect');
 };

src/router/route.ts

@@ -42,7 +42,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 		path: '/',
 		name: '/',
 		component: () => import('/@/layout/index.vue'),
-		redirect: '/home',
+		redirect: '/personal',
 		meta: {
 			isKeepAlive: true,
 		},
@@ -174,7 +174,7 @@ export const dynamicRoutes: Array<RouteRecordRaw> = [
 			isLink: '',
 			isHide: false,
 			isKeepAlive: true,
-			isAffix: true,
+			isAffix: false,
 			isIframe: false,
 			roles: ['admin', 'common'],
 			icon: 'iconfont icon-shouye',

src/stores/themeConfig.ts

@@ -36,7 +36,7 @@ export const useThemeConfig = defineStore('themeConfig', {
 			 * 菜单设置
 			 */
 			// 默认菜单导航背景颜色
-			menuBar: '#000',
+			menuBar: '#000000',
 			// 默认菜单导航字体颜色
 			menuBarColor: '#eaeaea',
 			// 默认菜单高亮背景色

src/theme/element.scss

@@ -267,18 +267,18 @@
 	// background: var(--el-color-primary);
 }
 .el-dialog__footer {
-	border-top: 1px solid var(--el-color-info-light-7);
+	// border-top: 1px solid var(--el-color-info-light-7);
 	padding-bottom: 10px;
   }
 .el-dialog__headerbtn{
 	height: 32px;
 	font-weight: 900;
 	.el-dialog__close{
-		color: #000;
+		color: #000000;
 	}
 }
 .el-dialog__headerbtn:hover .el-dialog__close{
-	color: var(--el-color-danger) !important;
+	// color: var(--el-color-danger) !important;
 }
 
 /* Card 卡片

src/theme/waves.scss

@@ -73,7 +73,7 @@
 .waves-circle {
 	-webkit-transform: translateZ(0);
 	transform: translateZ(0);
-	-webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000 100%);
+	-webkit-mask-image: -webkit-radial-gradient(circle, #fff 100%, #000000 100%);
 }
 .waves-input-wrapper {
 	border-radius: 0.2em;

src/utils/theme.ts

@@ -36,7 +36,8 @@ export function useChangeColor() {
 	const getDarkColor = (color: string, level: number): string => {
 		let reg = /^\#?[0-9A-Fa-f]{6}$/;
 		if (!reg.test(color)) {
-			ElMessage.warning('输入错误的hex颜色值');
+			console.log(color);
+			// ElMessage.warning('输入错误的hex颜色值');
 			return '';
 		}
 		let rgb = useChangeColor().hexToRgb(color);
@@ -47,7 +48,8 @@ export function useChangeColor() {
 	const getLightColor = (color: string, level: number): string => {
 		let reg = /^\#?[0-9A-Fa-f]{6}$/;
 		if (!reg.test(color)) {
-			ElMessage.warning('输入错误的hex颜色值');
+			console.log(color);
+			// ElMessage.warning('输入错误的hex颜色值');
 			return '';
 		}
 		let rgb = useChangeColor().hexToRgb(color);

src/views/match/book/index.vue

@@ -127,7 +127,7 @@ const isShowDialog = ref(false);
 const dialogTitle = ref('新增');
 
 const onOpenMenu = (row) => {
-	dialogTitle.value = row.id ? '编辑' : '新增';
+	dialogTitle.value = row ? '编辑' : '新增';
 	if (row) {
 		formData.value = row;
 	} else {

src/views/match/coupon/index.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="system-menu-container layout-padding">
-		<ProTable ref="tableRef" :request-api="couponPage" :columns="columns" :pagination="true" :tool-button="false" :initParam="initParam">
+		<ProTable ref="tableRef" :request-api="couponPage" :columns="columns" :pagination="true" :tool-button="false"
+			:initParam="initParam">
 			<template #tools>
 				<el-button v-auth="'coupon:add'" type="primary" icon="ele-Plus" @click="onOpenMenu()"> 新增 </el-button>
 			</template>
@@ -15,7 +16,7 @@
 				{{ scope.row.type == 1 ? '折扣券' : '代金券' }}
 			</template>
 			<template #value="scope">
-				{{ scope.row.type == 1 ? scope.row.value + '%' :  scope.row.value + '元' }}
+				{{ scope.row.type == 1 ? scope.row.value + '%' : scope.row.value + '元' }}
 			</template>
 			<template #startTime="scope">
 				{{ scope.row.startTime }} - {{ scope.row.endTime }}
@@ -29,7 +30,9 @@
 						</el-button>
 					</template>
 				</el-popconfirm>
-				<el-button size="small" text type="primary" @click="getSdk(scope.row.id)"> 生成兑换码 </el-button>
+				<el-button size="small" v-auth="'coupon:data:personal'" text type="primary"
+					@click="getSdk(scope.row.id)"> 生成兑换码
+				</el-button>
 			</template>
 		</ProTable>
 
@@ -91,6 +94,21 @@
 				</span>
 			</template>
 		</el-dialog>
+
+		<el-dialog v-model="sdkDialog" title="兑换码" width="500" center>
+			<div style="text-align: center; font-size: 18px; margin: 20px 50px;">
+				{{ sdkCode }}
+				<el-button type="primary" @click="copyText" style="margin-left: 20px;">复制</el-button>
+			</div>
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="sdkDialog = false">取消</el-button>
+					<el-button type="primary" @click="sdkDialog = false">
+						确定
+					</el-button>
+				</div>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
@@ -100,7 +118,7 @@ import { ElMessage, ElForm } from 'element-plus';
 import SysMenuApi from '/@/api/SysMenuApi';
 import { auths } from '/@/utils/authFunction';
 import ProTable from '/@/components/ProTable/index.vue';
-import { couponPage, couponAdd, couponEdit, couponDelete, couponEventlistGet } from '/@/api/match/coupon';
+import { couponPage, couponAdd, couponEdit, couponDelete, couponEventlistGet, couponGeneratecodePost } from '/@/api/match/coupon';
 // 定义表单引用类型
 const formRef = ref();
 const eventList = ref([]);
@@ -114,6 +132,15 @@ const formData = ref({
 	totalQuantity: '',
 	time: '',
 })
+const sdkDialog = ref(false)
+const sdkCode = ref('')
+const copyText = () => {
+	navigator.clipboard.writeText(sdkCode.value).then(() => {
+		ElMessage.success('兑换码已复制到剪贴板');
+	}).catch(err => {
+		ElMessage.error('复制失败，请重试');
+	});
+};
 const initParam = ref(true)
 const formRules = ref({
 	name: [
@@ -171,7 +198,7 @@ const onOpenMenu = async (row) => {
 	if (row) {
 		// const { data } = await couponEdit(row.id);
 		formData.value = row;
-		formData.value.time = [row.startTime.slice(0,10) , row.endTime.slice(0,10)];
+		formData.value.time = [row.startTime.slice(0, 10), row.endTime.slice(0, 10)];
 
 	} else {
 		formData.value = {
@@ -187,10 +214,14 @@ const onOpenMenu = async (row) => {
 	}
 	isShowDialog.value = true;
 };
-
+const getSdk = async (id) => {
+	const { data } = await couponGeneratecodePost(id);
+	sdkCode.value = data;
+	sdkDialog.value = true;
+};
 //删除菜单
 const onDeleteMenu = async (id) => {
-	const { succeeded, errors } = await couponDelete([ id ]);
+	const { succeeded, errors } = await couponDelete([id]);
 	if (succeeded) {
 		initParam.value = !initParam.value;
 		ElMessage.success('删除成功');
@@ -233,9 +264,7 @@ const onCancel = () => {
 };
 </script>
 <style scoped lang="scss">
-.dialog-footer {
+
-	margin-top: 80px;
-}
 
 /* 时长组合框样式 */
 .duration-row {

src/views/permission/role/dialog.vue

@@ -0,0 +1,221 @@
+<template>
+	<div class="system-role-dialog-container">
+		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="769px">
+			<el-form ref="roleDialogFormRef" :rules="rules" :model="state.ruleForm" v-loading="state.dialog.loading" 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="角色名称" prop="name">
+							<el-input v-model="state.ruleForm.name" maxlength="32" 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="角色标识" prop="code">
+							<el-input v-model="state.ruleForm.code" maxlength="32" 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="排序" prop="sort">
+							<el-input-number v-model="state.ruleForm.sort" 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="角色状态" prop="status">
+							<el-switch
+								v-model="state.ruleForm.status"
+								inline-prompt
+								:active-value="0"
+								:inactive-value="1"
+								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="角色描述" prop="remark">
+							<el-input v-model="state.ruleForm.remark" type="textarea" placeholder="请输入角色描述" maxlength="200"></el-input>
+						</el-form-item>
+					</el-col>
+					<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20" v-if="state.ruleForm.id != 0">
+						<el-form-item label="菜单权限" prop="menus">
+							<el-tree
+								ref="treeRef"
+								node-key="value"
+								:data="state.menuData"
+								:props="{ children: 'children', label: 'label', class: treeNodeClass }"
+								show-checkbox
+								highlight-current
+								default-expand-all
+								class="menu-data-tree"
+							/>
+						</el-form-item>
+					</el-col>
+				</el-row>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ state.dialog.submitTxt }}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup >
+import { reactive, ref, nextTick } from 'vue';
+import {  sysroleAddPost, sysroleEditPut ,sysmenuTreeselectGet , sysroleGetrolemenuGet , sysroleGrantpermissionPost} from '/@/api/match/role';
+import { ElMessage } from 'element-plus';
+// 定义子组件向父组件传值/事件
+const emit = defineEmits(['refresh']);
+
+// 表单实例
+const roleDialogFormRef = ref();
+
+//树形控件
+const treeRef = ref();
+
+//表单验证
+const rules = reactive({
+	name: [{ required: true, message: '请输入角色名称' }],
+	code: [{ required: true, message: '请输入角色标识' }],
+	sort: [{ required: true, message: '请输入排序' }],
+	// menus: [
+	// 	{
+	// 		validator: (rule, value, callback) => {
+	// 			if ((value ?? []).length === 0) {
+	// 				callback(new Error('请为角色分配权限'));
+	// 				return;
+	// 			}
+	// 			callback();
+	// 		},
+	// 	},
+	// ],
+});
+
+//表单状态
+const state = reactive({
+	ruleForm: {
+		status: 0,
+		sort: 100,
+		code: 10000,
+	} ,
+	menuData: [] ,
+	dialog: {
+		isShowDialog: false,
+		title: '',
+		submitTxt: '',
+		loading: false,
+	},
+});
+
+// 打开弹窗
+const openDialog = async (row) => {
+	console.log(row);
+	state.dialog.isShowDialog = true;
+	state.dialog.loading = true;
+	const { data: menus } = await sysmenuTreeselectGet();
+	state.menuData = menus ?? [];
+	if (row != null) {
+		state.ruleForm = { ...row };
+		const { data } = await sysroleGetrolemenuGet({ id: row.id });
+		state.ruleForm.menus = data ?? [];
+		state.dialog.title = '修改角色';
+		state.dialog.submitTxt = '修 改';
+		treeRef.value?.setCheckedKeys(data ?? []);
+	} else {
+		state.ruleForm.id = 0;
+		state.dialog.title = '新增角色';
+		state.dialog.submitTxt = '新 增';
+		// 重置表单
+		nextTick(() => {
+			roleDialogFormRef.value?.resetFields();
+		});
+	}
+	state.dialog.loading = false;
+};
+// 关闭弹窗
+const closeDialog = () => {
+	state.dialog.isShowDialog = false;
+};
+// 取消
+const onCancel = () => {
+	closeDialog();
+};
+// 提交
+const onSubmit = async () => {
+	if(state.ruleForm.id != 0){
+			state.ruleForm.menus = treeRef.value.getCheckedKeys();
+
+	}
+	roleDialogFormRef.value?.validate(async (v) => {
+		if (v) {
+			const { succeeded } = state.ruleForm.id === 0 ? await sysroleAddPost(state.ruleForm) : await sysroleEditPut(state.ruleForm);
+			if (succeeded) {
+				if(state.ruleForm.id != 0){
+					await sysroleGrantpermissionPost({
+						id: state.ruleForm.id,
+						menuIds: state.ruleForm.menus,
+					});
+					ElMessage.success('修改成功');
+					closeDialog();
+					emit('refresh');
+				}else{
+					ElMessage.success('新增成功');
+					closeDialog();
+					emit('refresh');
+				}
+			}
+		}
+	});
+};
+
+// 叶子节点同行显示样式
+const treeNodeClass = (node) => {
+	let addClass = true; // 添加叶子节点同行显示样式
+	// debugger
+	for (const key in node.children ?? []) {
+		// 如果存在子节点非叶子节点，不添加样式
+		if (node.children[key].children?.length ?? 0 > 0) {
+			addClass = false;
+			break;
+		}
+	}
+	return addClass ? 'penultimate-node' : '';
+};
+
+// 暴露变量
+defineExpose({
+	openDialog,
+});
+</script>
+
+<style scoped lang="scss">
+.system-role-dialog-container {
+	.menu-data-tree {
+		width: 100%;
+		border: 1px solid var(--el-border-color);
+		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
+		padding: 5px;
+	}
+}
+:deep(.penultimate-node) {
+	.el-tree-node__children {
+		padding-left: 40px;
+		white-space: pre-wrap;
+		line-height: 100%;
+
+		.el-tree-node {
+			display: inline-block;
+		}
+
+		.el-tree-node__content {
+			padding-left: 5px !important;
+			padding-right: 5px;
+
+			// .el-tree-node__expand-icon {
+			// 	display: none;
+			// }
+		}
+	}
+}
+</style>

src/views/permission/role/index.vue

@@ -1,200 +1,86 @@
 <template>
-	<div class="system-menu-container layout-padding">
+	<div class="system-role-container layout-padding">
-		<ProTable ref="tableRef" :request-api="sysrolePageGet" :columns="columns" :pagination="true" :tool-button="false" :initParam="initParam">
+		<ProTable ref="tableRef" :request-api="sysrolePageGet" :columns="columns" :tool-button="false">
-			<template #tools>
+			<template #tools> <el-button type="primary"  icon="ele-Plus" @click="onOpenRole(null)"> 新增 </el-button></template>
-				<el-button v-auth="'permission:role:add'" type="primary" icon="ele-Plus" @click="onOpenMenu()"> 新增 </el-button>
+			<template #status="scope">
-			</template>
+				<el-tag :type="scope.row.status === 0 ? 'success' : 'danger'"> {{ scope.row.status === 0 ? '启用' : '禁用' }}</el-tag>
-			<template #index="scope">
-				{{ scope.$index + 1 }}
 			</template>
 			<template #action="scope">
-				<el-button v-auth="'permission:role:edit'" icon="ele-Edit" size="small" text type="primary"
+				<el-button icon="ele-Edit" size="small" text  type="primary" @click="onOpenRole(scope.row)"> 编辑 </el-button>
-					@click="onOpenMenu(scope.row)"> 编辑 </el-button>
+				<el-popconfirm title="确认删除吗？" @confirm="onDeleteRole(scope.row.id)">
-				<el-popconfirm title="确认删除吗？" @confirm="onDeleteMenu(scope.row.id)">
 					<template #reference>
-						<el-button v-auth="'permission:role:delete'" icon="ele-Delete" size="small" text type="danger"> 删除
+						<el-button icon="ele-Delete" size="small" text  type="danger"> 删除 </el-button>
-						</el-button>
 					</template>
 				</el-popconfirm>
-				<el-button v-auth="'permission:role:config'" size="small" text type="primary" @click="getSdk(scope.row.id)"> 权限配置 </el-button>
 			</template>
 		</ProTable>
-
+		<RoleDialog ref="roleDialogRef" @refresh="tableRef?.reset" />
-		<!-- 弹窗 -->
-		<el-dialog :title="dialogTitle" v-model="isShowDialog">
-			<el-form ref="formRef" :model="formData" :rules="formRules" label-width="150px"
-				style="max-width: 600px;margin-bottom: 30px;" v-if="isShowDialog">
-
-				<!-- 商户名称 -->
-				<el-form-item label="角色名称" prop="name">
-					<el-input v-model="formData.name" placeholder="请输入角色名称"></el-input>
-				</el-form-item>
-
-				<!-- 填写描述 -->
-				<el-form-item label="填写描述" prop="remark">
-					<el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述"></el-input>
-				</el-form-item>
-
-
-			</el-form>
-			<template #footer>
-				<span class="dialog-footer">
-					<el-button @click="onCancel">取消</el-button>
-					<el-button type="primary" @click="onSubmit">确定</el-button>
-				</span>
-			</template>
-		</el-dialog>
 	</div>
 </template>
 
-<script setup name="sysMenu">
+<script setup>
-import { defineAsyncComponent, ref, reactive } from 'vue';
+import { defineAsyncComponent, reactive, ref } from 'vue';
-import { ElMessage, ElForm } from 'element-plus';
+import { ElMessage } from 'element-plus';
-import SysMenuApi from '/@/api/SysMenuApi';
+import SysRoleApi from '/@/api/SysRoleApi';
+import { sysrolePageGet, sysroleAddPost, sysroleEditPut, sysroleDeleteDelete } from '/@/api/match/role';
+import RoleDialog from '/@/views/permission/role/dialog.vue';
 import { auths } from '/@/utils/authFunction';
 import ProTable from '/@/components/ProTable/index.vue';
-import { sysrolePageGet, sysroleAddPost, sysroleEditPut, sysroleDeleteDelete } from '/@/api/match/role';
-// 定义表单引用类型
-const formRef = ref();
-const eventList = ref([]);
-const formData = ref({
-	name: '',
-	remark: '',
-})
-const initParam = ref(true)
-const formRules = ref({
-	name: [
-		{ required: true, message: '请输入角色名称', trigger: 'blur' }
-	],
 
-});
+//  table实例
-
+const tableRef = ref();
-const columns = ref([
+// 表单实例
+const roleDialogRef = ref();
+const columns = reactive([
 	{
-		prop: 'index',
+		type: 'index',
 		label: '序号',
-		align: 'center',
+		width: 60,
 	},
 	{
 		prop: 'name',
 		label: '角色名称',
-		align: 'center',
+		search: { el: 'input' },
-		search: {
+		width: 200,
-			el: 'input',
+	},
-		},
+	// {
+	// 	prop: 'code',
+	// 	label: '角色标识',
+	// },
+	{
+		prop: 'sort',
+		label: '排序',
+	},
+	{
+		prop: 'status',
+		label: '状态',
+	},
+	{
+		prop: 'createdTime',
+		label: '创建时间',
+	},
+	{
+		prop: 'action',
+		label: '操作',
+		align: 'center',
+		fixed: 'right',
+		width: 150,
 	},
-	{ prop: 'remark', label: '角色描述'},
-	{ prop: 'action', label: '操作', align: 'center', fixed: 'right', isShow: auths(['permission:role:add', 'permission:role:edit']) },
 ]);
-
+// 打开新增角色弹窗
-const isShowDialog = ref(false);
+const onOpenRole = (row) => {
-const dialogTitle = ref('新增');
+	console.log(RoleDialog);
-
+	console.log(roleDialogRef);
-const onOpenMenu = async (row) => {
+	roleDialogRef.value?.openDialog(row);
-	
-	dialogTitle.value = row ? '编辑' : '新增';
-	if (row) {
-		formData.value = row;
-
-	} else {
-		formData.value = {
-			name: '',
-			remark: '',
-		};
-	}
-	isShowDialog.value = true;
 };
 
-//删除菜单
+// 删除角色
-const onDeleteMenu = async (id) => {
+const onDeleteRole = async (id) => {
-	const { succeeded, errors } = await sysroleDeleteDelete({ id });
+	const { succeeded } = await sysroleDeleteDelete({ id });
 	if (succeeded) {
-		initParam.value = !initParam.value;
 		ElMessage.success('删除成功');
-	} else {
+		tableRef.value?.reset();
-		ElMessage.error(errors);
 	}
 };
-
-// 表单提交
-const onSubmit = () => {
-	if (!formRef.value) return;
-
-	formRef.value.validate(async (valid) => {
-		if (!valid) return;
-
-		try {
-			let res;
-			if (formData.value.id) {
-				res = await sysroleEditPut(formData.value);
-			} else {
-				res = await sysroleAddPost(formData.value);
-			}
-
-			if (res.succeeded) {
-				initParam.value = !initParam.value;
-				ElMessage.success(dialogTitle.value + '成功');
-				isShowDialog.value = false;
-			} else {
-				ElMessage.error(res.errors);
-			}
-		} catch (error) {
-			console.error(error);
-		}
-	});
-};
-
-// 取消
-const onCancel = () => {
-	isShowDialog.value = false;
-};
 </script>
-<style scoped lang="scss">
+<style scoped lang="scss"></style>
-.dialog-footer {
-	margin-top: 80px;
-}
-
-/* 时长组合框样式 */
-.duration-row {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.duration-row .el-input {
-	width: 120px;
-}
-
-.duration-separator {
-	color: #606266;
-	font-size: 14px;
-}
-
-.duration-label {
-	color: #909399;
-	font-size: 14px;
-}
-</style>
-
-<style>
-.avatar-uploader .el-upload {
-	border: 1px dashed var(--el-border-color);
-	border-radius: 6px;
-	cursor: pointer;
-	position: relative;
-	overflow: hidden;
-	transition: var(--el-transition-duration-fast);
-}
-
-.avatar-uploader .el-upload:hover {
-	border-color: var(--el-color-primary);
-}
-
-.el-icon.avatar-uploader-icon {
-	font-size: 28px;
-	color: #8c939d;
-	width: 178px;
-	height: 178px;
-	text-align: center;
-}
-</style>

src/views/permission/role1/index.vue

@@ -0,0 +1,200 @@
+<template>
+	<div class="system-menu-container layout-padding">
+		<ProTable ref="tableRef" :request-api="sysrolePageGet" :columns="columns" :pagination="true" :tool-button="false" :initParam="initParam">
+			<template #tools>
+				<el-button v-auth="'permission:role:add'" type="primary" icon="ele-Plus" @click="onOpenMenu()"> 新增 </el-button>
+			</template>
+			<template #index="scope">
+				{{ scope.$index + 1 }}
+			</template>
+			<template #action="scope">
+				<el-button v-auth="'permission:role:edit'" icon="ele-Edit" size="small" text type="primary"
+					@click="onOpenMenu(scope.row)"> 编辑 </el-button>
+				<el-popconfirm title="确认删除吗？" @confirm="onDeleteMenu(scope.row.id)">
+					<template #reference>
+						<el-button v-auth="'permission:role:delete'" icon="ele-Delete" size="small" text type="danger"> 删除
+						</el-button>
+					</template>
+				</el-popconfirm>
+				<el-button v-auth="'permission:role:config'" size="small" text type="primary" @click="getSdk(scope.row.id)"> 权限配置 </el-button>
+			</template>
+		</ProTable>
+
+		<!-- 弹窗 -->
+		<el-dialog :title="dialogTitle" v-model="isShowDialog">
+			<el-form ref="formRef" :model="formData" :rules="formRules" label-width="150px"
+				style="max-width: 600px;margin-bottom: 30px;" v-if="isShowDialog">
+
+				<!-- 商户名称 -->
+				<el-form-item label="角色名称" prop="name">
+					<el-input v-model="formData.name" placeholder="请输入角色名称"></el-input>
+				</el-form-item>
+
+				<!-- 填写描述 -->
+				<el-form-item label="填写描述" prop="remark">
+					<el-input v-model="formData.remark" type="textarea" placeholder="请输入角色描述"></el-input>
+				</el-form-item>
+
+
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel">取消</el-button>
+					<el-button type="primary" @click="onSubmit">确定</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup name="sysMenu">
+import { defineAsyncComponent, ref, reactive } from 'vue';
+import { ElMessage, ElForm } from 'element-plus';
+import SysMenuApi from '/@/api/SysMenuApi';
+import { auths } from '/@/utils/authFunction';
+import ProTable from '/@/components/ProTable/index.vue';
+import { sysrolePageGet, sysroleAddPost, sysroleEditPut, sysroleDeleteDelete } from '/@/api/match/role';
+// 定义表单引用类型
+const formRef = ref();
+const eventList = ref([]);
+const formData = ref({
+	name: '',
+	remark: '',
+})
+const initParam = ref(true)
+const formRules = ref({
+	name: [
+		{ required: true, message: '请输入角色名称', trigger: 'blur' }
+	],
+
+});
+
+const columns = ref([
+	{
+		prop: 'index',
+		label: '序号',
+		align: 'center',
+	},
+	{
+		prop: 'name',
+		label: '角色名称',
+		align: 'center',
+		search: {
+			el: 'input',
+		},
+	},
+	{ prop: 'remark', label: '角色描述'},
+	{ prop: 'action', label: '操作', align: 'center', fixed: 'right', isShow: auths(['permission:role:add', 'permission:role:edit']) },
+]);
+
+const isShowDialog = ref(false);
+const dialogTitle = ref('新增');
+
+const onOpenMenu = async (row) => {
+	
+	dialogTitle.value = row ? '编辑' : '新增';
+	if (row) {
+		formData.value = row;
+
+	} else {
+		formData.value = {
+			name: '',
+			remark: '',
+		};
+	}
+	isShowDialog.value = true;
+};
+
+//删除菜单
+const onDeleteMenu = async (id) => {
+	const { succeeded, errors } = await sysroleDeleteDelete({ id });
+	if (succeeded) {
+		initParam.value = !initParam.value;
+		ElMessage.success('删除成功');
+	} else {
+		ElMessage.error(errors);
+	}
+};
+
+// 表单提交
+const onSubmit = () => {
+	if (!formRef.value) return;
+
+	formRef.value.validate(async (valid) => {
+		if (!valid) return;
+
+		try {
+			let res;
+			if (formData.value.id) {
+				res = await sysroleEditPut(formData.value);
+			} else {
+				res = await sysroleAddPost(formData.value);
+			}
+
+			if (res.succeeded) {
+				initParam.value = !initParam.value;
+				ElMessage.success(dialogTitle.value + '成功');
+				isShowDialog.value = false;
+			} else {
+				ElMessage.error(res.errors);
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	});
+};
+
+// 取消
+const onCancel = () => {
+	isShowDialog.value = false;
+};
+</script>
+<style scoped lang="scss">
+.dialog-footer {
+	margin-top: 80px;
+}
+
+/* 时长组合框样式 */
+.duration-row {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.duration-row .el-input {
+	width: 120px;
+}
+
+.duration-separator {
+	color: #606266;
+	font-size: 14px;
+}
+
+.duration-label {
+	color: #909399;
+	font-size: 14px;
+}
+</style>
+
+<style>
+.avatar-uploader .el-upload {
+	border: 1px dashed var(--el-border-color);
+	border-radius: 6px;
+	cursor: pointer;
+	position: relative;
+	overflow: hidden;
+	transition: var(--el-transition-duration-fast);
+}
+
+.avatar-uploader .el-upload:hover {
+	border-color: var(--el-color-primary);
+}
+
+.el-icon.avatar-uploader-icon {
+	font-size: 28px;
+	color: #8c939d;
+	width: 178px;
+	height: 178px;
+	text-align: center;
+}
+</style>