<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.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">
|
import { reactive, toRefs, onMounted, defineComponent } from 'vue';
|
import { storeToRefs } from 'pinia';
|
import { useRoutesList } from '/@/stores/routesList';
|
import { i18n } from '/@/i18n/index';
|
import IconSelector from '/@/components/iconSelector/index.vue';
|
import { useMenuApi } from '/@/api/systemManage/menu/index';
|
import { ElMessageBox, ElMessage } from 'element-plus';
|
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: '' // 菜单类型为按钮时，权限标识
|
},
|
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() // 刷新菜单，未进行后端接口测试
|
};
|
|
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>
|
