InteSecurePlatform.git

			@@ -1,95 +1,81 @@
			<template>
			<div class="system-add-menu-container">
			<el-dialog :title="title" v-model="isShowDialog" width="769px">
			<el-form :model="ruleForm" size="default" label-width="80px">
			<el-row :gutter="35">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
			<el-form-item label="上级菜单">
			<el-cascader
			:options="menuData"
			:props="{ checkStrictly: true, value: 'id', label: 'title' }"
			placeholder="请选择上级菜单"
			clearable
			class="w100"
			v-model="ruleForm.menuSuperior"
			>
			</el-cascader>
			</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 v-model="ruleForm.meta.title" placeholder="格式：message.router.xxx" 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 v-model="ruleForm.name" placeholder="路由中的 name 值" 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 v-model="ruleForm.path" placeholder="路由中的 path 值" 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 v-model="ruleForm.redirect" 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="菜单图标">
			<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
			</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 v-model="ruleForm.component" 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-select v-model="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
			<el-option label="admin" value="admin"></el-option>
			<el-option label="common" value="common"></el-option>
			</el-select>
			</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
			<el-form-item label="项目名">
			<el-select v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
			<el-option
			v-for="item in projectList"
			:key="item.key"
			:value="item.id"
			:label="item.name"
			>
			</el-option>
			</el-select>
			</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="ruleForm.priority" 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-radio-group v-model="ruleForm.meta.isHide">
			<el-radio :label="true">隐藏</el-radio>
			<el-radio :label="false">不隐藏</el-radio>
			</el-radio-group>
			</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">{{ buttonName }}</el-button>
			</span>
			</template>
			</el-dialog>
			</div>
			<div class="system-add-menu-container">
			<el-dialog :title="title" v-model="isShowDialog" width="769px">
			<el-form :model="ruleForm" size="default" label-width="80px">
			<el-row :gutter="35">
			<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20">
			<el-form-item label="上级菜单">
			<el-cascader :options="menuData" :props="{ checkStrictly: true, value: 'id', label: 'title' }" placeholder="请选择上级菜单" clearable class="w100" v-model="ruleForm.menuSuperior"> </el-cascader>
			</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 v-model.trim="ruleForm.meta.title" placeholder="格式：message.router.xxx" 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 v-model.trim="ruleForm.name" placeholder="路由中的 name 值" 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 v-model.trim="ruleForm.path" placeholder="路由中的 path 值" 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 v-model.trim="ruleForm.redirect" 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 placeholder="请输入菜单图标" v-model.trim="ruleForm.meta.icon" type="all" />-->
			<IconSelector placeholder="请输入菜单图标" v-model="ruleForm.meta.icon" type="all" />
			</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 v-model.trim="ruleForm.component" 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-select v-model="ruleForm.meta.roles" multiple placeholder="取角色管理" clearable class="w100">
			<el-option v-for="item in roleList" :key="item.roleId" :value="item.roleCode" :label="item.roleName"></el-option>
			</el-select>
			</el-form-item>
			</el-col>
			<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
			<el-form-item label="项目名">
			<el-select @change="handelMenu" v-model="ruleForm.projectId" controls-position="right" placeholder="请输入排序" class="w100">
			<el-option v-for="item in projectList" :key="item.key" :value="item.id" :label="item.name"> </el-option>
			</el-select>
			</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="ruleForm.priority" 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-radio-group v-model="ruleForm.meta.isHide">
			<el-radio :label="true">隐藏</el-radio>
			<el-radio :label="false">不隐藏</el-radio>
			</el-radio-group>
			</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" v-throttle @click="onSubmit" size="default">{{ buttonName }}</el-button>
			</span>
			</template>
			</el-dialog>
			</div>
			</template>

			<script lang="ts">
			@@ -98,174 +84,171 @@
			import { useRoutesList } from '/@/stores/routesList';
			import { i18n } from '/@/i18n/index';
			import IconSelector from '/@/components/iconSelector/index.vue';
			import { useMenuApi } from '/@/api/menu/index'
			import { useMenuApi } from '/@/api/systemManage/menu/index';
			import { ElMessageBox, ElMessage } from 'element-plus';
			import {Session} from "/@/utils/storage";
			import { Session } from '/@/utils/storage';
			// import { setBackEndControlRefreshRoutes } from "/@/router/backEnd";

			export default defineComponent({
			name: 'systemAddMenu',
			components: { IconSelector },
			setup(props,context) {
			const stores = useRoutesList();
			const { routesList } = storeToRefs(stores);
			const state = reactive({
			isShowDialog: false,
			title:'',
			buttonName:'',
			// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
			ruleForm: {
			projectId:'',
			parentId:0,
			menuSuperior: [], // 上级菜单
			menuType: 'menu', // 菜单类型
			name: '', // 路由名称
			component: '', // 组件路径
			priority: 0, // 菜单排序
			path: '', // 路由路径
			redirect: '', // 路由重定向，有子集 children 时
			meta: {
			title: '', // 菜单名称
			icon: '', // 菜单图标
			isHide: false, // 是否隐藏
			isKeepAlive: true, // 是否缓存
			isAffix: false, // 是否固定
			isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
			isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
			roles: '', // 权限标识，取角色管理
			},
			btnPower: '', // 菜单类型为按钮时，权限标识
			},
			menuData: [], // 上级菜单数据
			projectList:[
			{id:'1',name:'基础数据权限管理系统',key:0},
			{id:'2',name:'系统1',key:1},
			{id:'3',name:'系统2',key:2},
			{id:'4',name:'系统3',key:3},
			{id:'5',name:'系统4',key:4},
			{id:'6',name:'应急管理系统',key:5},
			{id:'7',name:'目标责任管理系统',key:6},
			{id:'8',name:'事故管理系统',key:7},
			{id:'9',name:'设备综合管控系统',key:8},
			],
			});
			// 获取 vuex 中的路由
			const getMenuList = (routes: any) => {
			const arr: any = [];
			routes.map((val: any) => {
			val['title'] = val.meta.title;
			val['id'] = val.id
			arr.push(val);
			if (val.children) getMenuList(val.children);
			});
			return arr;
			};
			// 打开弹窗
			const openDialog = (type:string,value:any) => {
			state.isShowDialog = true;
			if(type === '新增菜单'){
			state.buttonName = '新增'
			state.title = '新增菜单'
			state.ruleForm = {
			projectId:'',
			parentId:0,
			menuSuperior: [],
			menuType: 'menu',
			name: '',
			component: '',
			priority: 0,
			path: '',
			redirect: '',
			meta: {
			title: '',
			icon: '',
			isHide: false,
			isKeepAlive: true,
			isAffix: false,
			isLink: '',
			isIframe: false,
			roles: '',
			},
			btnPower: '',
			}
			}else{
			state.buttonName = '修改'
			state.title = '修改菜单'
			state.ruleForm = JSON.parse(JSON.stringify(value))
			}
			};
			// 关闭弹窗
			const closeDialog = () => {
			state.isShowDialog = false;
			};
			// 是否内嵌下拉改变
			// const onSelectIframeChange = () => {
			// if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
			// else state.ruleForm.isLink = false;
			// };
			// 取消
			const onCancel = () => {
			closeDialog();
			};
			// 新增
			const onSubmit = async () => {
			if(state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []){
			let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior))
			state.ruleForm.parentId = menuId[menuId.length - 1]
			}
			if(state.title === '新增菜单'){
			let res = await useMenuApi().addMenu(state.ruleForm)
			if(res.data.code === '200'){
			ElMessage({
			type:'success',
			message:'菜单新增成功',
			duration:2000
			})
			closeDialog();
			context.emit('getMenuList')
			}else{
			ElMessage({
			type:'warning',
			message:res.data.msg
			})
			}
			}else{
			let res = await useMenuApi().modMenu(state.ruleForm)
			if(res.data.code === '200'){
			ElMessage({
			type:'success',
			message:'菜单修改成功',
			duration:2000
			})
			closeDialog();
			context.emit('getMenuList')
			}else{
			ElMessage({
			type:'warning',
			message:res.data.msg
			})
			}
			}
			name: 'systemAddMenu',
			components: { IconSelector },
			setup(props, context) {
			const stores = useRoutesList();
			const { routesList } = storeToRefs(stores);
			const state = reactive({
			isShowDialog: false,
			title: '',
			buttonName: '',
			// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
			ruleForm: {
			projectId: '',
			parentId: 0,
			menuSuperior: [], // 上级菜单
			menuType: 'menu', // 菜单类型
			name: '', // 路由名称
			component: '', // 组件路径
			priority: 0, // 菜单排序
			path: '', // 路由路径
			redirect: '', // 路由重定向，有子集 children 时
			meta: {
			title: '', // 菜单名称
			icon: '', // 菜单图标
			isHide: false, // 是否隐藏
			isKeepAlive: true, // 是否缓存
			isAffix: false, // 是否固定
			isLink: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink: 链接地址不为空`
			isIframe: false, // 是否内嵌，开启条件，`1、isIframe:true 2、isLink：链接地址不为空`
			roles: [] // 权限标识，取角色管理
			},
			btnPower: '' // 菜单类型为按钮时，权限标识
			},
			roleList: [],
			menuData: [], // 上级菜单数据
			projectList: []
			});
			// 获取 vuex 中的路由
			const getMenuList = (routes: any) => {
			const arr: any = [];
			routes.map((val: any) => {
			val['title'] = val.meta.title;
			val['id'] = val.id;
			arr.push(val);
			if (val.children) getMenuList(val.children);
			});
			return arr;
			};
			// 打开弹窗
			const openDialog = (type: string, value: any, projectList: any, projectId: string, roleList: []) => {
			state.projectList = JSON.parse(JSON.stringify(projectList));
			state.roleList = roleList;
			state.isShowDialog = true;
			if (type === '新增') {
			state.buttonName = '新增';
			state.title = '新增菜单';
			state.ruleForm = {
			projectId: projectId,
			parentId: 0,
			menuSuperior: [],
			menuType: 'menu',
			name: '',
			component: '',
			priority: 0,
			path: '',
			redirect: '',
			meta: {
			title: '',
			icon: '',
			isHide: false,
			isKeepAlive: true,
			isAffix: false,
			isLink: '',
			isIframe: false,
			roles: []
			},
			btnPower: ''
			};
			} else {
			state.buttonName = '修改';
			state.title = '修改菜单';
			state.ruleForm = JSON.parse(JSON.stringify(value));
			state.ruleForm.projectId = projectId.toString();
			}
			handelMenu();
			};
			// 关闭弹窗
			const closeDialog = () => {
			state.isShowDialog = false;
			};
			// 是否内嵌下拉改变
			// const onSelectIframeChange = () => {
			// if (state.ruleForm.meta.isIframe) state.ruleForm.isLink = true;
			// else state.ruleForm.isLink = false;
			// };
			// 取消
			const onCancel = () => {
			closeDialog();
			};
			// 新增
			const onSubmit = async () => {
			if (state.ruleForm.menuSuperior && state.ruleForm.menuSuperior !== []) {
			let menuId = JSON.parse(JSON.stringify(state.ruleForm.menuSuperior));
			state.ruleForm.parentId = menuId[menuId.length - 1];
			}
			if (state.title === '新增菜单') {
			let res = await useMenuApi().addMenu(state.ruleForm);
			if (res.data.code === '200') {
			ElMessage({
			type: 'success',
			message: '菜单新增成功',
			duration: 2000
			});
			closeDialog();
			context.emit('getMenuList');
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			} else {
			let res = await useMenuApi().modMenu(state.ruleForm);
			if (res.data.code === '200') {
			ElMessage({
			type: 'success',
			message: '菜单修改成功',
			duration: 2000
			});
			closeDialog();
			context.emit('getMenuList');
			} else {
			ElMessage({
			type: 'warning',
			message: res.data.msg
			});
			}
			}

			// closeDialog(); // 关闭弹窗
			// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
			};
			// closeDialog(); // 关闭弹窗
			// setBackEndControlRefreshRoutes() // 刷新菜单，未进行后端接口测试
			};

			const show = () => {
			console.log(JSON.parse(JSON.stringify(state.ruleForm.menuSuperior)));
			}
			// 页面加载时
			onMounted(async () => {
			let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
			state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
			});
			return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			...toRefs(state),
			};
			},
			const handelMenu = async () => {
			let res = await useMenuApi().getMenuAdmin(state.ruleForm.projectId);
			state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)));
			};
			// 页面加载时
			onMounted(async () => {
			// let res = await useMenuApi().getMenuAdmin(Session.get('projectId'))
			// state.menuData = JSON.parse(JSON.stringify(getMenuList(res.data.data)))
			});
			return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			handelMenu,
			...toRefs(state)
			};
			}
			});
			</script>