菜单管理

src/api/index.ts

@@ -51,8 +51,6 @@ class RequestHttp {
 		this.service.interceptors.response.use(
 			(response: AxiosResponse) => {
 				const { data } = response;
-				console.log(data);
-
 				const globalStore = GlobalStore();
 				// * 在请求结束后，并关闭请求 loading
 				tryHideFullScreenLoading();

src/api/modules/jxjview.ts

@@ -52,6 +52,10 @@ export const getDictionaryList = (params: User.ReqUserParams) => {
 export const getDictionaryDetail = (params: User.ReqUserParams) => {
 	return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/systemDictData/page`, params);
 };
+// 查询字典
+export const getDicList = (params: User.ReqUserParams) => {
+	return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/systemDictData/list`, params);
+};
 // * 新增用户
 export const addDictionary = (params: FormData) => {
 	return http.post(PORT1 + `/xmgl/systemDictType/add`, params);
@@ -111,13 +115,33 @@ export const editMenu = (params: { id: string }) => {
 };
 // * 编辑用户
 export const editMenubase = (params: { id: string }) => {
-	return http.post(PORT1 + `/xmgl/baseModule/edit`, params);
+	return http.post(PORT1 + `/xmgl/baseMenu/edit`, params);
 };
 // 最外层的删除
 export const deleteMunu = (params: { id: number }) => {
 	return http.post(PORT1 + `/xmgl/baseModule/delete`, params);
 };
+// 删除系统菜单信息
+export const deletesysMenu = (params: { menuId: number }) => {
+	return http.post(PORT1 + `/xmgl/baseMenu/delete`, params);
+};
 // 菜单管理的表格查询
 export const menuList = (params: { moduleId: string }) => {
 	return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/baseMenu/list`, params);
 };
+// 获取菜单下所有操作  点击按钮管理的table
+export const btnList = (params: { moduleId: string }) => {
+	return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/action/list`, params);
+};
+// 按钮管理的新增
+export const addAction = (params: FormData) => {
+	return http.post(PORT1 + `/xmgl/action/add`, params);
+};
+// 按钮管理的编辑
+export const editAction = (params: { actionId: number }) => {
+	return http.post(PORT1 + `/xmgl/action/edit`, params);
+};
+// 删除按钮管理
+export const deleteAction = (params: { actionId: number }) => {
+	return http.post(PORT1 + `/xmgl/action/delete`, params);
+};

src/views/jxjview/dictionary/index.vue

@@ -258,8 +258,9 @@ const typeVisable = async (dictType: string) => {
 	// console.log(111);
 	dialogTableVisible.value = true;
 	form.dictType = dictType;
+	diaTableData.dictType = dictType;
 	const res = await getDiaTabList(diaTableData);
-	console.log(dictType);
+	// console.log(dictType);
 	gridData.value = res.result.records;
 };
 

src/views/jxjview/menumanage/index.vue

@@ -1,11 +1,11 @@
 <template>
 	<div class="table-box">
 		<el-card>
-			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
+			<el-select v-model="style" class="m-2" placeholder="请选择" @change="onChangeStyle(style)" size="large">
-				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
+				<el-option v-for="item in optionStyle" :key="item.value" :label="item.label" :value="item.value"
 			/></el-select>
-			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
+			<el-select v-model="type" class="m-2" @change="onChangeType(type)" placeholder="请选择" size="large">
-				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
+				<el-option v-for="item in optionType" :key="item.value" :label="item.label" :value="item.value"
 			/></el-select>
 			<el-button type="primary" @click="handleAddItem()">新增</el-button>
 		</el-card>
@@ -45,21 +45,41 @@
 			</template>
 		</ProTable>
 
-		<el-dialog v-model="dialogMenuVisible" title="Shipping address" ref="DialogTable" width="800px" height="800px">
+		<el-dialog v-model="dialogMenuVisible" title="菜单管理" append-to-body ref="DialogTable" width="800px" height="800px">
-			<el-button type="primary" style="margin-top: -24px" @click="DiaAddItem(moduleName)">新增</el-button>
+			<el-button type="primary" style="margin-top: -24px" @click="DiaAddItem(toTag)">新增</el-button>
 			<el-table :data="gridData">
 				<el-table-column property="menuName" label="菜单名称" width="150" />
 				<el-table-column property="path" label="菜单路径" width="200" />
 				<el-table-column property="status" label="状态">
-					<template #default="row">
+					<template #default="{ row }">
 						{{ row.status == 1 ? "启用" : "禁用" }}
 					</template>
 				</el-table-column>
+				<el-table-column label="操作" width="300" align="center">
+					<template #default="scope">
+						<el-button type="primary" link :icon="Menu" @click="onBtnManage(scope.row)">按钮管理</el-button>
+						<el-button type="primary" link :icon="EditPen" @click="onEditItem(scope.row)">编辑</el-button>
+						<el-button type="primary" link :icon="Delete" @click="deleteMenu(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-dialog>
+
+		<!-- 按钮管理 -->
+		<el-dialog v-model="dialogbtnVisible" title="按钮管理" ref="DialogTable" width="40%" height="800px">
+			<el-button type="primary" style="margin-top: -24px" @click="onDiabtnAdd(1, buttonData)">新增</el-button>
+			<el-table :data="buttonData">
+				<el-table-column property="actionName" label="按钮名称" />
+				<el-table-column property="actionCode" label="按钮标识" />
+				<el-table-column property="status" width="100" label="状态">
+					<template #default="{ row }">
+						{{ row.status === 1 ? "启用" : "禁用" }}
+					</template>
+				</el-table-column>
 				<el-table-column label="操作" align="center">
 					<template #default="scope">
-						<el-button type="primary" link :icon="Menu" @click="handleEditItem('edit', scope.row)">按钮管理</el-button>
+						<el-button type="primary" link :icon="EditPen" @click="onDiabtnAdd(2, scope.row)">编辑</el-button>
-						<el-button type="primary" link :icon="EditPen" @click="onEditItem(scope.row)">编辑</el-button>
+						<el-button type="primary" link :icon="Delete" @click="onBtnDelete(scope.row)">删除</el-button>
-						<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
 					</template>
 				</el-table-column>
 			</el-table>
@@ -88,7 +108,12 @@
 			<div>
 				<el-form :model="formMenu" label-width="155px">
 					<el-form-item label="所属模块：">
-						<el-input v-model="formMenu.moduleName" placeholder="请输入" />
+						<!-- <el-input v-model="formMenu.moduleName" placeholder="请输入" /> -->
+						<el-select v-model="formMenu.moduleId" class="m-2" placeholder="请选择">
+							<el-option v-for="item in toTag" :key="item.moduleId" :label="item.moduleName" :value="item.moduleId">{{
+								item.moduleName
+							}}</el-option>
+						</el-select>
 					</el-form-item>
 					<el-form-item label="父级菜单：">
 						<el-select v-model="formMenu.parentId" class="m-2" placeholder="请选择">
@@ -118,7 +143,7 @@
 						</el-select>
 					</el-form-item>
 					<el-form-item label="优先级：">
-						<el-input v-model="formMenu.priority" placeholder="请输入" />
+						<el-input v-model="formMenu.priority" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数字" />
 					</el-form-item>
 					<el-form-item label="描述：">
 						<el-input v-model="formMenu.menuDesc" placeholder="请输入" />
@@ -132,11 +157,23 @@
 				</span>
 			</template>
 		</el-dialog>
+
+		<!-- 按钮管理的新增与编辑 -->
+		<DialogForm
+			:title="title"
+			:formConfig="formbtnConfig"
+			:formData="formbtnData"
+			v-model:visible="btnvisible"
+			append-to-body
+			width="34%"
+			@confirm="onbtnSave"
+		>
+		</DialogForm>
 	</div>
 </template>
 
 <script setup lang="tsx" name="jxjSystem">
-import { ref, reactive } from "vue";
+import { ref, reactive, onMounted } from "vue";
 import { ElMessage, ElMessageBox } from "element-plus";
 import { useRouter } from "vue-router";
 import { User } from "@/api/interface";
@@ -145,19 +182,51 @@ import { useHandleData } from "@/hooks/useHandleData";
 import ProTable from "@/components/ProTable/index.vue";
 import DialogForm from "@/components/DialogForm/index.vue";
 import { CirclePlus, Delete, EditPen, Menu, Download, Upload, View, Refresh } from "@element-plus/icons-vue";
-import { getMenuList, deleteMunu, editMenu, addMenu, menuList, addMenubase, editMenubase } from "@/api/modules/jxjview";
+import {
+	getMenuList,
+	deleteMunu,
+	editMenu,
+	addMenu,
+	menuList,
+	addMenubase,
+	editMenubase,
+	deletesysMenu,
+	btnList,
+	addAction,
+	editAction,
+	deleteAction,
+	getDicList
+} from "@/api/modules/jxjview";
 
 const router = useRouter();
-const value = ref("");
+const type = ref("");
+const style = ref("");
 // 页面新增和编辑
 const visible = ref(false);
 const dialogMenuVisible = ref(false);
 const addOrEditDialogVisibleMenu = ref(false);
-const moduleName = ref("");
+const dialogbtnVisible = ref(false);
+// 按钮管理的新增编辑弹窗
+const btnvisible = ref(false);
+// const moduleName = ref("");
 const fatherNameTo = ref([]);
 const toTag = ref([{ moduleName: "", moduleId: "" }]);
 const title = ref("");
 const formData = ref({});
+// 获取字典风格
+const diaTableData = reactive({
+	dictType: "module_style_type"
+});
+// 获取字典类型
+const diaTableType = reactive({
+	dictType: "module_type"
+});
+const formbtnData = ref({
+	actionName: "",
+	actionCode: "",
+	status: "",
+	menuId: ""
+});
 const formMenu = ref({
 	moduleId: "",
 	parentId: "",
@@ -168,10 +237,13 @@ const formMenu = ref({
 	status: "",
 	target: "",
 	priority: "",
-	menuDesc: "",
+	menuDesc: ""
-	moduleName
 });
 
+// 获取字典风格
+const optionStyle = ref([]);
+// 获取字典类型
+const optionType = ref([]);
 const menuStatusSel = reactive([
 	{ status: 0, label: "禁用" },
 	{ status: 1, label: "启用" }
@@ -182,8 +254,11 @@ const menuTargetSel = reactive([
 ]);
 const mode = ref("");
 const gridData = ref([]);
+const buttonData = ref([]);
 // 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
 const proTable = ref();
+const DialogTable = ref();
+const btnmenuId = ref("");
 // 添加数据按钮
 const handleAddItem = () => {
 	mode.value = "add";
@@ -200,72 +275,53 @@ function handleEditItem(index: string, row: any) {
 	formData.value = reactive(row);
 }
 
+// 按钮管理的新增
+const onDiabtnAdd = (index, row) => {
+	if (index === 1) {
+		formbtnData.value = reactive({ actionName: "", actionCode: "", status: "", menuId: "" });
+		btnvisible.value = true;
+		title.value = "新增按钮";
+		formbtnData.value.menuId = btnmenuId.value;
+	} else {
+		btnvisible.value = true;
+		title.value = "编辑按钮";
+		formbtnData.value = reactive({ ...row });
+	}
+};
+
 const DiaAddItem = async (val: any) => {
+	formMenu.value = reactive({});
 	addOrEditDialogVisibleMenu.value = true;
 	title.value = "新增菜单";
-	formMenu.value = reactive({});
-	console.log(val);
-
-	// toTag.value = [{ moduleName: val.moduleName, moduleId: val.moduleId }];
-	// console.log(toTag.value);
-	// moduleNameTo.value = val.moduleName;
-
-	// fatherNameTo.value = gridData.value;
-	// fatherNameTo.value.push({ menuId: 0, menuName: "不选" });
-	// form = reactive({});
-	// console.log(dictType);
 };
 const onEditItem = async (row: any) => {
 	addOrEditDialogVisibleMenu.value = true;
 	title.value = "编辑菜单";
-	formMenu.value = reactive({ row });
+	formMenu.value = reactive({ ...row });
-	// console.log(val);
-
-	// toTag.value = [{ moduleName: val.moduleName, moduleId: val.moduleId }];
-	// console.log(toTag.value);
-	// moduleNameTo.value = val.moduleName;
-
-	// fatherNameTo.value = gridData.value;
-	// fatherNameTo.value.push({ menuId: 0, menuName: "不选" });
-	// form = reactive({});
-	// console.log(dictType);
 };
 
 // 菜单管理的点击
 const onmenuManage = async (row: any) => {
 	title.value = "菜单管理";
 	dialogMenuVisible.value = true;
-	moduleName.value = row.moduleName;
+	toTag.value = [{ moduleName: row.moduleName, moduleId: row.moduleId }];
-	const res = await menuList({ moduleId: row.moduleId });
+	const res = await getMenuTabList({ moduleId: row.moduleId });
 	gridData.value = res.result;
-	fatherNameTo.value = res.result;
+	fatherNameTo.value = res.result.filter(i => {
+		return {
+			menuName: i.menuName
+		};
+	});
 
-	// form = reactive({});
+	fatherNameTo.value.push({ menuId: 0, menuName: "不选" });
-	// console.log(res.result);
 };
 
-const options = [
+// 菜单管理的表格
-	{
+const getMenuTabList = async (params: any) => {
-		value: "Option1",
+	const res = await menuList(params);
-		label: "Option1"
+	gridData.value = res.result;
-	},
+	return menuList(params);
-	{
+};
-		value: "Option2",
-		label: "Option2"
-	},
-	{
-		value: "Option3",
-		label: "Option3"
-	},
-	{
-		value: "Option4",
-		label: "Option4"
-	},
-	{
-		value: "Option5",
-		label: "Option5"
-	}
-];
 
 // 表格配置项
 const columns: ColumnProps[] = [
@@ -361,9 +417,51 @@ const formConfig = {
 	}
 };
 
+// 按钮管理的新增与编辑
+const formbtnConfig = {
+	formItemConfig: [
+		{
+			label: "按钮名称",
+			prop: "actionName",
+			type: "input"
+		},
+		{
+			label: "按钮标识",
+			prop: "actionCode",
+			type: "input"
+		},
+		{
+			label: "状态",
+			prop: "status",
+			type: "select",
+			data: [
+				{ label: "启用", value: 1 },
+				{ label: "禁用", value: 0 }
+			]
+		}
+	],
+	rules: {
+		actionName: [
+			{
+				required: true,
+				message: "请输入按钮名称",
+				trigger: "blur"
+			}
+		],
+		actionCode: [
+			{
+				required: true,
+				message: "请输入按钮标识",
+				trigger: "blur"
+			}
+		]
+	}
+};
+
 // 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
 const initParam = reactive({
-	type: 1
+	moduleType: "",
+	styleType: ""
 });
 
 // dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
@@ -382,13 +480,13 @@ const dataCallback = (data: any) => {
 // 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getMenuList"
 const getTableList = (params: any) => {
 	let newParams = JSON.parse(JSON.stringify(params));
+
 	return getMenuList(newParams);
 };
 
-// 新增，编辑数据
+// 页面新增，编辑数据
 const saveItem = async (form: any) => {
 	if (form.moduleId) {
-		// console.log(form.configId);
 		const res = await editMenu(form);
 		proTable.value.getTableList();
 		ElMessage.success("编辑成功");
@@ -399,20 +497,49 @@ const saveItem = async (form: any) => {
 	}
 	visible.value = false;
 };
+// 按钮管理的新增与编辑提交
+const onbtnSave = async (form: any) => {
+	if (form.actionId) {
+		const res = await editAction(form);
+		ElMessage.success("编辑成功");
+	} else {
+		const res = await addAction(formbtnData.value);
+		ElMessage.success("新增成功");
+	}
+	btnvisible.value = false;
+	getBtnTabList({ menuId: form.menuId });
+};
 
-// 新增，编辑数据
+// 菜单新增，编辑数据
 const onSubmitMenu = async (form: any) => {
 	if (form.menuId) {
-		// console.log(form.configId);
 		const res = await editMenubase(form);
-		proTable.value.getTableList();
 		ElMessage.success("编辑成功");
 	} else {
 		const res = await addMenubase(form);
 		ElMessage.success("新增成功");
-		proTable.value.getTableList();
 	}
-	visible.value = false;
+	addOrEditDialogVisibleMenu.value = false;
+	getMenuTabList({ moduleId: form.moduleId });
+};
+
+// 页面下拉框获取
+const getDiaTabList = async (params: any) => {
+	await getDicList(params);
+	return getDicList(params);
+};
+
+const getBtnTabList = async (params: any) => {
+	const res = await btnList(params);
+	buttonData.value = res.result;
+	return btnList(params);
+};
+
+// 按钮管理的点击
+const onBtnManage = async (row: any) => {
+	dialogbtnVisible.value = true;
+	btnmenuId.value = row?.menuId;
+	await getBtnTabList({ menuId: row.menuId });
 };
 
 // 删除用户信息
@@ -420,4 +547,40 @@ const deleteAccount = async (params: User.ResUserList) => {
 	await useHandleData(deleteMunu, { id: params.moduleId }, `删除【${params.username}】用户`);
 	proTable.value.getTableList();
 };
+// 删除系统菜单信息
+const deleteMenu = async (params: User.ResUserList) => {
+	await useHandleData(deletesysMenu, { menuId: params.menuId }, `删除【${params.username}】用户`);
+	await menuList({ moduleId: params.moduleId });
+};
+// 删除按钮信息
+const onBtnDelete = async (params: User.ResUserList) => {
+	await useHandleData(deleteAction, { actionId: params.actionId }, `删除【${params.username}】用户`);
+	getBtnTabList({ menuId: params.menuId });
+};
+
+const onChangeStyle = async (val: number) => {
+	initParam.styleType = val;
+	proTable.value.getTableList();
+};
+const onChangeType = async (val: number) => {
+	initParam.moduleType = val;
+	proTable.value.getTableList();
+};
+
+onMounted(async () => {
+	const res = await getDiaTabList(diaTableData);
+	optionStyle.value = res.result.map(i => {
+		return {
+			label: i.dictValue,
+			value: i.dictLabel
+		};
+	});
+	const res1 = await getDiaTabList(diaTableType);
+	optionType.value = res1.result.map(i => {
+		return {
+			label: i.dictValue,
+			value: i.dictLabel
+		};
+	});
+});
 </script>