菜单管理还没搞定

2023-03-08 18:08:26 +08:00 · 2023-03-08 18:08:26 +08:00 · a74d404154
commit a74d404154
parent b810b72cae
5 changed files with 472 additions and 5 deletions
--- a/src/api/index.ts
+++ b/src/api/index.ts
@ -51,6 +51,8 @@ class RequestHttp {
 		this.service.interceptors.response.use(
 			(response: AxiosResponse) => {
 				const { data } = response;
+				console.log(data);
+
 				const globalStore = GlobalStore();
 				// * 在请求结束后，并关闭请求 loading
 				tryHideFullScreenLoading();
@ -59,6 +61,7 @@ class RequestHttp {
 					ElMessage.error(data.msg);
 					globalStore.setToken("");
 					router.replace(LOGIN_URL);
+					debugger;
 					return Promise.reject(data);
 				}
 				// * 全局错误信息拦截（防止下载文件得时候返回数据流，没有code，直接报错）
--- a/src/api/modules/jxjview.ts
+++ b/src/api/modules/jxjview.ts
@ -88,8 +88,36 @@ export const addApp = (params: FormData) => {
 export const editApp = (params: { id: string }) => {
 	return http.post(PORT1 + `/xmgl/appVersion/edit`, params);
 };
-
 // 文件下载
 export const exportApp = (params: User.ReqUserParams) => {
 	return http.download(PORT1 + `/xmgl/file/download`, params);
 };
+
+// 菜单管理 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+export const getMenuList = (params: User.ReqUserParams) => {
+	return http.post<ResPage<User.ResUserList>>(PORT1 + `/xmgl/baseModule/page`, params);
+};
+// * 新增用户
+export const addMenu = (params: FormData) => {
+	return http.post(PORT1 + `/xmgl/baseModule/add`, params);
+};
+// 添加系统菜单信息
+export const addMenubase = (params: FormData) => {
+	return http.post(PORT1 + `/xmgl/baseMenu/add`, params);
+};
+// * 编辑用户
+export const editMenu = (params: { id: string }) => {
+	return http.post(PORT1 + `/xmgl/baseModule/edit`, params);
+};
+// * 编辑用户
+export const editMenubase = (params: { id: string }) => {
+	return http.post(PORT1 + `/xmgl/baseModule/edit`, params);
+};
+// 最外层的删除
+export const deleteMunu = (params: { id: number }) => {
+	return http.post(PORT1 + `/xmgl/baseModule/delete`, params);
+};
+// 菜单管理的表格查询
+export const menuList = (params: { moduleId: string }) => {
+	return http.post<ResPage<User.ResResults>>(PORT1 + `/xmgl/baseMenu/list`, params);
+};
--- a/src/assets/json/dynamicRouter.json
+++ b/src/assets/json/dynamicRouter.json
@ -16,8 +16,9 @@
 			}
 		},
 		{
-			"path": "/system",
-
+			"path": "/menumanage",
+			"name": "menumanage",
+			"component": "/jxjview/menumanage/index",
 			"meta": {
 				"icon": "Tools",
 				"title": "菜单管理",
--- a/src/components/DialogForm/index.vue
+++ b/src/components/DialogForm/index.vue
@ -10,9 +10,21 @@
 			<template #header>
 				<slot name="header" class="diaHeader"></slot>
 			</template>
-			<el-form ref="ruleFormRef" label-width="120px" size="large" :model="form" :rules="props.formConfig.rules">
+			<el-form
+				ref="ruleFormRef"
+				label-width="140px"
+				style="margin: 0 auto"
+				size="large"
+				:model="form"
+				:rules="props.formConfig.rules"
+			>
 				<template v-for="item in props.formConfig.formItemConfig" :key="item.prop">
-					<el-form-item :label="item.label + '：'" :style="{ display: item.hidden == true ? 'none' : '' }" :prop="item.prop">
+					<el-form-item
+						:label="item.label + '：'"
+						:style="{ display: item.hidden == true ? 'none' : '' }"
+						style="width: 600px"
+						:prop="item.prop"
+					>
 						<!-- 输入框 -->
 						<el-input
 							v-if="item.type == 'input'"
--- a/src/views/jxjview/menumanage/index.vue
+++ b/src/views/jxjview/menumanage/index.vue
@ -0,0 +1,423 @@
+<template>
+	<div class="table-box">
+		<el-card>
+			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
+				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
+			/></el-select>
+			<el-select v-model="value" class="m-2" placeholder="Select" size="large">
+				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
+			/></el-select>
+			<el-button type="primary" @click="handleAddItem()">新增</el-button>
+		</el-card>
+		<ProTable
+			ref="proTable"
+			title="用户列表"
+			:columns="columns"
+			:requestApi="getTableList"
+			:initParam="initParam"
+			:dataCallback="dataCallback"
+			:tool-button="false"
+			:pagination="true"
+			background
+			:isShowSearch="false"
+		>
+			<template #moduleType="{ row }">
+				{{
+					row.moduleType == 1
+						? "jxjadmin模块"
+						: row.moduleType == 2
+						? "政务模块"
+						: row.moduleType == 3
+						? "企业模块"
+						: row.moduleType == 4
+						? "项目模块"
+						: ""
+				}}
+			</template>
+			<template #appShow="{ row }">
+				<!-- <el-button type="primary" @click="handleAddItem()">新增</el-button> -->
+				{{ row.appShow == 1 ? "是" : "否" }}
+			</template>
+			<template #operation="{ row }">
+				<el-button type="primary" link :icon="Menu" @click="onmenuManage(row)">菜单管理</el-button>
+				<el-button type="primary" link :icon="EditPen" @click="handleEditItem('edit', row)">编辑</el-button>
+				<el-button type="primary" link :icon="Delete" @click="deleteAccount(row)">删除</el-button>
+			</template>
+		</ProTable>
+
+		<el-dialog v-model="dialogMenuVisible" title="Shipping address" ref="DialogTable" width="800px" height="800px">
+			<el-button type="primary" style="margin-top: -24px" @click="DiaAddItem(moduleName)">新增</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">
+						{{ 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="onEditItem(scope.row)">编辑</el-button>
+						<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
+					</template>
+				</el-table-column>
+			</el-table>
+		</el-dialog>
+
+		<DialogForm
+			:title="title"
+			:formConfig="formConfig"
+			:formData="formData"
+			v-model:visible="visible"
+			append-to-body
+			width="700px"
+			@confirm="saveItem"
+		>
+		</DialogForm>
+		<!-- 新增\编辑菜单 -->
+		<el-dialog v-model="addOrEditDialogVisibleMenu" :title="title" width="30%">
+			<!-- <template #header="{ titleId, titleClass }">
+          <div class="my-header">
+            <div class="dialogTopTitle" :id="titleId" :class="titleClass">
+              <img src="@/assets/images/dialogIcon/dialogAddIcon.png" alt="" width="15" height="18" class="configureIcon" />
+              <span>{{ dialogMenuTitle }}菜单</span>
+            </div>
+          </div>
+        </template> -->
+			<div>
+				<el-form :model="formMenu" label-width="155px">
+					<el-form-item label="所属模块：">
+						<el-input v-model="formMenu.moduleName" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="父级菜单：">
+						<el-select v-model="formMenu.parentId" class="m-2" placeholder="请选择">
+							<el-option v-for="item in fatherNameTo" :key="item.menuId" :label="item.menuName" :value="item.menuId" />
+						</el-select>
+					</el-form-item>
+					<el-form-item label="菜单名称：">
+						<el-input v-model="formMenu.menuName" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="菜单图标：">
+						<el-input v-model="formMenu.icon" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="菜单路径：">
+						<el-input v-model="formMenu.path" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="APP端菜单路径：">
+						<el-input v-model="formMenu.appPath" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="状态：">
+						<el-select v-model="formMenu.status" class="m-2" placeholder="请选择">
+							<el-option v-for="item in menuStatusSel" :key="item.status" :label="item.label" :value="item.status" />
+						</el-select>
+					</el-form-item>
+					<el-form-item label="打开方式：">
+						<el-select v-model="formMenu.target" class="m-2" placeholder="请选择">
+							<el-option v-for="item in menuTargetSel" :key="item.target" :label="item.label" :value="item.target" />
+						</el-select>
+					</el-form-item>
+					<el-form-item label="优先级：">
+						<el-input v-model="formMenu.priority" placeholder="请输入" />
+					</el-form-item>
+					<el-form-item label="描述：">
+						<el-input v-model="formMenu.menuDesc" placeholder="请输入" />
+					</el-form-item>
+				</el-form>
+			</div>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="addOrEditDialogVisibleMenu = false">取消</el-button>
+					<el-button type="primary" @click="onSubmitMenu(formMenu)">保存</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="tsx" name="jxjSystem">
+import { ref, reactive } from "vue";
+import { ElMessage, ElMessageBox } from "element-plus";
+import { useRouter } from "vue-router";
+import { User } from "@/api/interface";
+import { ColumnProps } from "@/components/ProTable/interface";
+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";
+
+const router = useRouter();
+const value = ref("");
+// 页面新增和编辑
+const visible = ref(false);
+const dialogMenuVisible = ref(false);
+const addOrEditDialogVisibleMenu = ref(false);
+const moduleName = ref("");
+const fatherNameTo = ref([]);
+const toTag = ref([{ moduleName: "", moduleId: "" }]);
+const title = ref("");
+const formData = ref({});
+const formMenu = ref({
+	moduleId: "",
+	parentId: "",
+	menuName: "",
+	icon: "",
+	path: "",
+	appPath: "",
+	status: "",
+	target: "",
+	priority: "",
+	menuDesc: "",
+	moduleName
+});
+
+const menuStatusSel = reactive([
+	{ status: 0, label: "禁用" },
+	{ status: 1, label: "启用" }
+]);
+const menuTargetSel = reactive([
+	{ target: "0", label: "窗口内" },
+	{ target: "1", label: "新窗口" }
+]);
+const mode = ref("");
+const gridData = ref([]);
+// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
+const proTable = ref();
+// 添加数据按钮
+const handleAddItem = () => {
+	mode.value = "add";
+	visible.value = true;
+	title.value = "新增模块";
+	formData.value = reactive({});
+};
+
+// 修改数据按钮
+function handleEditItem(index: string, row: any) {
+	mode.value = "edit";
+	visible.value = true;
+	title.value = "编辑模块";
+	formData.value = reactive(row);
+}
+
+const DiaAddItem = async (val: any) => {
+	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 });
+	// 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;
+	const res = await menuList({ moduleId: row.moduleId });
+	gridData.value = res.result;
+	fatherNameTo.value = res.result;
+
+	// form = reactive({});
+	// console.log(res.result);
+};
+
+const options = [
+	{
+		value: "Option1",
+		label: "Option1"
+	},
+	{
+		value: "Option2",
+		label: "Option2"
+	},
+	{
+		value: "Option3",
+		label: "Option3"
+	},
+	{
+		value: "Option4",
+		label: "Option4"
+	},
+	{
+		value: "Option5",
+		label: "Option5"
+	}
+];
+
+// 表格配置项
+const columns: ColumnProps[] = [
+	{
+		prop: "labelName",
+		label: "标签名称"
+	},
+	{
+		prop: "moduleName",
+		label: "模块名称"
+		// search: { el: "input" }
+	},
+	// 多级 prop
+	{ prop: "appName", label: "APP端模块名称" },
+	{ prop: "appPlugin", label: "APP端组件名" },
+	{ prop: "modulePath", label: "模块路径" },
+	{ prop: "moduleIconChecked", label: "解锁模块图标" },
+	{ prop: "moduleIconNormal", label: "未解锁模块图标" },
+	{
+		prop: "moduleType",
+		label: "模块类型"
+	},
+	{ prop: "appShow", label: "是否在APP端显示" },
+	{ prop: "operation", label: "操作", fixed: "right", width: 330 }
+];
+
+// 弹窗中的配置
+const formConfig = {
+	formItemConfig: [
+		{
+			label: "标签名称",
+			prop: "labelName",
+			type: "input"
+		},
+		{
+			label: "标签排序",
+			prop: "labelSortNum",
+			type: "input"
+		},
+		{
+			label: "模块名称",
+			prop: "moduleName",
+			type: "input"
+		},
+		{
+			label: "解锁模块图标",
+			prop: "moduleIconChecked",
+			type: "input"
+		},
+		{
+			label: "未解锁模块图标",
+			prop: "moduleIconNormal",
+			type: "input"
+		},
+		{
+			label: "模块路径",
+			prop: "modulePath",
+			type: "input"
+		},
+		{
+			label: "APP端组件名",
+			prop: "appPlugin",
+			type: "input"
+		},
+		{
+			label: "是否在APP展示",
+			prop: "appShow",
+			type: "radio",
+			data: [
+				{ label: "是", value: 1 },
+				{ label: "否", value: 0 }
+			]
+		},
+		{
+			label: "模块描述",
+			prop: "moduleDesc",
+			type: "input"
+		},
+		{
+			label: "是否是重要模块",
+			prop: "isImportantModule",
+			type: "input"
+		}
+	],
+	rules: {
+		moduleName: [
+			{
+				required: true,
+				message: "请输入模块名称",
+				trigger: "blur"
+			}
+		]
+	}
+};
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable(之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({
+	type: 1
+});
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total && pageNum && pageSize 这些字段，那么你可以在这里进行处理成这些字段
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const dataCallback = (data: any) => {
+	// console.log(data);
+	return {
+		list: data.records,
+		total: Number(data.total),
+		pageNo: Number(data.current),
+		pageSize: Number(data.size)
+	};
+};
+
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 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("编辑成功");
+	} else {
+		const res = await addMenu(form);
+		ElMessage.success("新增成功");
+		proTable.value.getTableList();
+	}
+	visible.value = false;
+};
+
+// 新增，编辑数据
+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;
+};
+
+// 删除用户信息
+const deleteAccount = async (params: User.ResUserList) => {
+	await useHandleData(deleteMunu, { id: params.moduleId }, `删除【${params.username}】用户`);
+	proTable.value.getTableList();
+};
+</script>