You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
408 lines
15 KiB
408 lines
15 KiB
<!-- 系统菜单的新增、编辑 duyf-->
|
|
<template>
|
|
<a-drawer
|
|
:width="500"
|
|
:visible="visible"
|
|
:body-style="{ paddingBottom: '80px' }"
|
|
:footer-style="{ textAlign: 'right' }"
|
|
destroyOnClose
|
|
:title="drawerTitele"
|
|
@close="onClose">
|
|
<a-form
|
|
ref="formRef"
|
|
:model="formState"
|
|
:rules="rules"
|
|
:label-col="labelCol"
|
|
:wrapper-col="wrapperCol"
|
|
>
|
|
<a-form-item label="菜单类型：" name="menuType">
|
|
<a-radio-group v-model:value="menuRadioType">
|
|
<a-radio-button :value="1" @click="chanageMenuType">一级菜单</a-radio-button>
|
|
<a-radio-button :value="2" @click="chanageMenuType">子菜单</a-radio-button>
|
|
<a-radio-button :value="3" @click="chanageMenuType">按钮/权限</a-radio-button>
|
|
</a-radio-group>
|
|
</a-form-item>
|
|
<a-form-item label="菜单名称：" name="menuName" v-if="menuNameIsshow">
|
|
<a-input allowClear v-model:value="formState.menuName" maxlength="255" placeholder="请输入菜单名称" />
|
|
</a-form-item>
|
|
<a-form-item label="菜单编码：" name="menuCode" v-if="menuCodeIsshow">
|
|
<a-input allowClear v-model:value="formState.menuCode" maxlength="64" placeholder="请输入菜单编码" />
|
|
</a-form-item>
|
|
<a-form-item label="按钮/权限：" name="perissionBtn" v-if="btnPermissIsshow">
|
|
<a-input v-model:value="formState.perissionBtn" maxlength="255" placeholder="请输入按钮/权限" />
|
|
</a-form-item>
|
|
<a-form-item label="上级菜单：" name="previousMenu" v-if="preMenuIsshow">
|
|
<a-tree-select
|
|
v-model:value="formState.previousMenu"
|
|
:tree-line="true"
|
|
:tree-data="treeData"
|
|
>
|
|
</a-tree-select>
|
|
</a-form-item>
|
|
<a-form-item label="菜单路由：" name="routePath" v-if="menuRouteIsshow">
|
|
<a-input v-model:value="formState.routePath" placeholder="请输入路由地址"/>
|
|
</a-form-item>
|
|
<!-- 前端组件 component-->
|
|
<a-form-item label="前端组件：" name="menuJumpUrl" v-if="componentIsshow">
|
|
<a-input v-model:value="formState.menuJumpUrl" placeholder="请输入前端组件"/>
|
|
</a-form-item>
|
|
<!-- 重定向路由 Redirect -->
|
|
<a-form-item label="重定向路由：" name="menuRedirect" v-if="redirectIsshow">
|
|
<a-input v-model:value="formState.menuRedirect" placeholder="请输入重定向路由"/>
|
|
</a-form-item>
|
|
|
|
<a-form-item label="菜单图标：" name="menuIcon" class="iconMenu">
|
|
<a-input v-model:value="formState.menuIcon" placeholder="点击选择菜单图标" />
|
|
<SlackOutlined @click="showIconMenu"/>
|
|
</a-form-item>
|
|
<a-form-item label="授权标识：" name="authorizationMark" v-if="authorMarkIsshow">
|
|
<a-input v-model:value="formState.authorizationMark" placeholder="请输入授权标识" />
|
|
</a-form-item>
|
|
<a-form-item label="排序：" name="menuSort" v-if="sortIsshow">
|
|
<a-input type="number" v-model:value="formState.menuSort" min="0" maxlength="7" placeholder="请输入排序号" />
|
|
</a-form-item>
|
|
<a-form-item label="是否缓存" v-if="keepAliveIsshow">
|
|
<a-switch v-model:checked="formState.keepAlive" />
|
|
</a-form-item>
|
|
<a-form-item label="是否隐藏子级" v-if="hideChildrenIsshow">
|
|
<a-switch v-model:checked="formState.hideChildren"/>
|
|
|
|
</a-form-item>
|
|
</a-form>
|
|
<template #footer>
|
|
<a-button style="margin-right: 8px" @click="onClose">取消</a-button>
|
|
<a-button type="primary" @click="onSubmit">确定</a-button>
|
|
</template>
|
|
</a-drawer>
|
|
|
|
<icon-picker :iconHandleOk="getSonData" ref="refIconPicker"></icon-picker>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { ref,toRaw,defineExpose,reactive,onBeforeUnmount} from 'vue';
|
|
import type { Rule } from 'ant-design-vue/es/form';
|
|
import type { TreeSelectProps } from 'ant-design-vue';
|
|
import { SlackOutlined } from '@ant-design/icons-vue';
|
|
import iconPicker from '../../../components/icon/IconPicker.vue';
|
|
import { http } from '/nerv-lib/util';
|
|
import { menuS } from '/@/api/menuSystem';
|
|
import { NsMessage } from '/nerv-lib/component';
|
|
const accountNo = sessionStorage.getItem('accountNo')?sessionStorage.getItem('accountNo'):'';
|
|
const menuRadioType = ref(1);//菜单类型默认值
|
|
const treeData = ref<TreeSelectProps['treeData']>([]);//存储菜单数据
|
|
const addOrEditType = ref();//新增、编辑类型,区分调不同接口
|
|
|
|
const drawerTitele = ref('');
|
|
const formRef = ref();
|
|
const visible = ref(false);
|
|
const btnPermissIsshow = ref(false);//按钮权限是否显示
|
|
const menuCodeIsshow = ref(true);//菜单编码是否显示
|
|
const preMenuIsshow = ref(false);//上级菜单是否显示
|
|
const authorMarkIsshow = ref(false);//授权标识是否显示
|
|
const menuNameIsshow = ref(true);//菜单名称是否显示
|
|
const sortIsshow = ref(true);//排序是否显示
|
|
const menuRouteIsshow = ref(true);//菜单路由是否显示
|
|
const refIconPicker = ref();
|
|
const currentLineData = ref();//存储当前行的数据
|
|
const componentIsshow = ref(false);//前端组件是否显示
|
|
const redirectIsshow = ref(true);//重定向路由是否显示
|
|
const keepAliveIsshow = ref(false);//缓存是否显示
|
|
const hideChildrenIsshow = ref(true);//是否隐藏子级是否显示
|
|
interface FormState {
|
|
menuName: string;
|
|
previousMenu:string;
|
|
routePath:string;
|
|
menuSort:string;
|
|
perissionBtn:string;
|
|
authorizationMark:string;
|
|
menuIcon:string;
|
|
menuCode:string;
|
|
type:string;//菜单类型
|
|
menuJumpUrl:string;
|
|
menuRedirect:string;
|
|
keepAlive:boolean;
|
|
hideChildren:boolean
|
|
}
|
|
const formState = ref<FormState>({
|
|
menuName:'',
|
|
previousMenu:'',
|
|
routePath:'',
|
|
menuSort:'',
|
|
perissionBtn:'',
|
|
authorizationMark:'',
|
|
menuIcon:'',
|
|
menuCode:'',
|
|
type:'',
|
|
menuJumpUrl:'',
|
|
menuRedirect:'',
|
|
keepAlive:false,
|
|
hideChildren:false
|
|
})
|
|
const labelCol = { span: 5 };
|
|
const wrapperCol = { span: 19 };
|
|
|
|
// 定义form表单的必填
|
|
var rules: Record<string, Rule[]> = reactive({
|
|
menuName: [{ required: true, message: '请输入菜单名称', trigger: 'change' }],
|
|
menuCode: [{ required: true, message: '请输入菜单编码', trigger: 'change' }],
|
|
perissionBtn: [{ required: true, message: '请输入按钮/权限', trigger: 'change' }],
|
|
previousMenu: [{ required: true, message: '请选择上级菜单', trigger: 'change' }],
|
|
routePath:[{ required: true, message: '请输入菜单路由', trigger: 'change' }],
|
|
});
|
|
const emit = defineEmits(['editObject']);
|
|
//是否缓存-开关
|
|
// const clickSwitchKeepAlive = () => {
|
|
// if (formState.value.keepAlive === 1) {
|
|
// infoObject.value.enableRules = 0;
|
|
// } else {
|
|
// infoObject.value.enableRules = 1;
|
|
// }
|
|
// };
|
|
// 关闭新增抽屉
|
|
const onClose = () => {
|
|
visible.value = false;
|
|
formRef.value.resetFields();
|
|
};
|
|
//菜单类型按钮切换
|
|
const chanageMenuType = (e:any,typeMenu:any)=>{
|
|
let currentType = null;
|
|
if(e && e.target){
|
|
currentType = e.target.value;
|
|
}
|
|
if(typeMenu){
|
|
currentType = typeMenu;
|
|
}
|
|
menuRadioType.value = currentType;
|
|
if(currentType==1){//一级菜单
|
|
menuNameIsshow.value = true;
|
|
btnPermissIsshow.value = false;
|
|
preMenuIsshow.value = false;
|
|
authorMarkIsshow.value = false;
|
|
sortIsshow.value = true;
|
|
menuCodeIsshow.value = true;
|
|
menuRouteIsshow.value = true;
|
|
componentIsshow.value = false;
|
|
redirectIsshow.value = true;
|
|
keepAliveIsshow.value = false;
|
|
hideChildrenIsshow.value = true;
|
|
}else if(currentType==2){//二级菜单
|
|
menuNameIsshow.value = true;
|
|
preMenuIsshow.value = true;
|
|
btnPermissIsshow.value = false;
|
|
authorMarkIsshow.value = false;
|
|
sortIsshow.value = true;
|
|
menuCodeIsshow.value = true;
|
|
menuRouteIsshow.value = true;
|
|
componentIsshow.value = true;
|
|
redirectIsshow.value = true;
|
|
keepAliveIsshow.value = true;
|
|
hideChildrenIsshow.value = true;
|
|
}else{//按钮
|
|
menuNameIsshow.value = false;
|
|
preMenuIsshow.value = true;
|
|
btnPermissIsshow.value = true;
|
|
authorMarkIsshow.value = true;
|
|
sortIsshow.value = true;
|
|
menuCodeIsshow.value = false;
|
|
menuRouteIsshow.value = false;
|
|
componentIsshow.value = false;
|
|
redirectIsshow.value = false;
|
|
keepAliveIsshow.value = false;
|
|
hideChildrenIsshow.value = false;
|
|
}
|
|
}
|
|
|
|
// 点击确定提交
|
|
const onSubmit = () => {
|
|
formRef.value
|
|
.validate()
|
|
.then(() => {
|
|
|
|
//请求添加接口提交数据
|
|
let params:any={
|
|
pid:'root',
|
|
code:formState.value.menuCode,
|
|
label:formState.value.menuName,
|
|
icon:formState.value.menuIcon,
|
|
type:menuRadioType.value,
|
|
sort:formState.value.menuSort,
|
|
backApi:formState.value.routePath,
|
|
projectId:null,
|
|
updateUser:accountNo,
|
|
redirect:formState.value.menuRedirect,
|
|
}
|
|
if(menuRadioType.value==3){
|
|
params.code = formState.value.authorizationMark;
|
|
params.pid = formState.value.previousMenu;//父级id
|
|
params.label = formState.value.perissionBtn;
|
|
}
|
|
if(menuRadioType.value==2){
|
|
// params.pid = currentLineData.value.code; //父级id
|
|
params.component = formState.value.menuJumpUrl;
|
|
params.pid = formState.value.previousMenu;
|
|
params.keepAlive = formState.value.keepAlive;
|
|
params.hideChildren = formState.value.hideChildren;//是否隐藏子级
|
|
}
|
|
if(menuRadioType.value==1){
|
|
params.pid = currentLineData.value?currentLineData.value.pid:"root";//一级菜单pid,传'root'
|
|
params.hideChildren = formState.value.hideChildren;//是否隐藏子级
|
|
}
|
|
if(addOrEditType.value==1){//新增
|
|
http.post(menuS.queryMenuPageAdd, params).then(() => {
|
|
NsMessage.success('操作成功');
|
|
visible.value = !visible.value;
|
|
emit("editObject",formState)
|
|
});
|
|
}else{
|
|
params.permissionId = currentLineData.value.permissionId;
|
|
params.createTime = currentLineData.value.createTime;
|
|
params.updateTime = currentLineData.value.updateTime;
|
|
params.isDelete = currentLineData.value.isDelete;
|
|
http.post(menuS.queryMenuPageEdit, params).then(() => {
|
|
NsMessage.success('操作成功');
|
|
visible.value = !visible.value;
|
|
emit("editObject",formState)
|
|
});
|
|
}
|
|
})
|
|
}
|
|
//获取菜单列表
|
|
const getMenuList= ()=>{
|
|
http.post(menuS.queryMenuPage, { label: '',projectId: null}).then((res) => {
|
|
// treeData.value = res.data.records;
|
|
treeData.value = res.data.records.map((item:any) => ({
|
|
value: item.code,
|
|
label: item.label,
|
|
children: item.children ? item.children.map((child:any) => ({
|
|
value: child.code,
|
|
label:child.label,
|
|
children: child.children ? child.children.map((childchild:any) => ({
|
|
value: childchild.code,
|
|
label:childchild.label,
|
|
|
|
})) : []
|
|
})) : []
|
|
}));
|
|
});
|
|
}
|
|
//展示icon图标集
|
|
const showIconMenu = (data:any)=>{
|
|
refIconPicker.value.isIconOpenToggle(formState.value.menuIcon);
|
|
|
|
}
|
|
const getSonData = (data:any) => {
|
|
if(data){
|
|
formState.value.menuIcon = data;
|
|
}else{
|
|
refIconPicker.value.isIconData();
|
|
}
|
|
}
|
|
const toggle = (type:any,record:any)=>{
|
|
currentLineData.value = record;
|
|
visible.value = !visible.value;
|
|
addOrEditType.value = type;
|
|
if(type==1){//新增
|
|
drawerTitele.value = '新增菜单';
|
|
formState.value = {
|
|
menuName:'',
|
|
previousMenu:'',
|
|
routePath:'',
|
|
menuSort:'',
|
|
perissionBtn:'',
|
|
authorizationMark:'',
|
|
menuIcon:'',
|
|
menuCode:'',
|
|
type:'',
|
|
menuJumpUrl:'',
|
|
menuRedirect:'',
|
|
keepAlive:false,
|
|
hideChildren:false
|
|
};
|
|
}else if(type==2){//编辑
|
|
drawerTitele.value = '编辑菜单';
|
|
if(record){
|
|
formState.value.menuName = record.label;
|
|
if(record.type==1||record.type==2){
|
|
formState.value.menuCode = record.code;
|
|
}
|
|
if(record.type==3){
|
|
formState.value.authorizationMark = record.code;
|
|
}
|
|
formState.value.menuSort = record.sort;
|
|
formState.value.menuIcon = record.icon;
|
|
formState.value.routePath = record.backApi;
|
|
formState.value.type = record.type;
|
|
formState.value.menuCode = record.code;
|
|
formState.value.perissionBtn = record.label;
|
|
formState.value.menuJumpUrl = record.component;
|
|
formState.value.menuRedirect = record.redirect.name;
|
|
|
|
}
|
|
|
|
}
|
|
//如果record有值，说明是编辑或者从有数据条目中点击新增编辑过来的
|
|
if(record){
|
|
if(type==1){
|
|
formState.value.previousMenu = record.code;
|
|
}else{
|
|
if(record.type==1){
|
|
formState.value.previousMenu = "";
|
|
}
|
|
if(record.type==2||record.type==3){
|
|
formState.value.previousMenu = record.pid;
|
|
}
|
|
}
|
|
if(record.type==1){//一级菜单
|
|
if(type==1){//新增
|
|
menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
|
|
chanageMenuType(null,2);
|
|
}else{//编辑
|
|
menuRadioType.value = 1;
|
|
chanageMenuType(null,1);
|
|
}
|
|
}else if(record.type==2){//子菜单
|
|
if(type==1){
|
|
menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
|
|
}else{
|
|
menuRadioType.value = 2;
|
|
}
|
|
chanageMenuType(null,2);
|
|
}else if(record.type==3){//按钮
|
|
if(type==1){
|
|
menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
|
|
chanageMenuType(null,2);
|
|
}else{
|
|
menuRadioType.value = 3;
|
|
chanageMenuType(null,3);
|
|
}
|
|
}
|
|
}else{
|
|
menuRadioType.value = 1;
|
|
chanageMenuType(null,1);
|
|
}
|
|
}
|
|
defineExpose({
|
|
toggle,
|
|
getMenuList
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.iconMenu :deep(.ant-form-item-control-input-content){
|
|
display: flex;
|
|
.ant-input{
|
|
border-top-right-radius:0;
|
|
border-bottom-right-radius:0;
|
|
}
|
|
.anticon{
|
|
padding:7px 10px 0;
|
|
border: 1px solid #d9d9d9;
|
|
border-radius:4px;
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius:0;
|
|
cursor: pointer;
|
|
border-left:0;
|
|
}
|
|
}
|
|
</style>
|