408 lines
15 KiB
Vue
408 lines
15 KiB
Vue
<!-- 系统菜单的新增、编辑 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> |