xuziqiang/SaaS-lib
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

系统菜单部分功能及planToAdd文件中的config.ts文件修改

Browse Source
This commit is contained in:
duyufeng
2024-08-15 10:51:58 +08:00
parent 94e5079222
commit ee565449ab
931 changed files with 12966 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

296
hx-op/src/view/systemManage/systemMenu/editSystemMenu.vue Normal file
View File

@@ -0,0 +1,296 @@
<!-- 系统菜单的新增、编辑 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">
<a-input v-model:value="formState.routePath" placeholder="请输入路由地址"/>
</a-form-item>
<!-- <a-form-item label="跳转地址：" name="menuJumpUrl">
<a-input v-model:value="formState.menuJumpUrl" 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>
<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} 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 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();
interface FormState {
menuName: string;
previousMenu:string;
routePath:string;
menuSort:string;
perissionBtn:string;
authorizationMark:string;
menuIcon:string;
menuCode:string;
type:string;//菜单类型
menuJumpUrl:string;
}
const formState = ref<FormState>({
menuName:'',
previousMenu:'',
routePath:'',
menuSort:'',
perissionBtn:'',
authorizationMark:'',
menuIcon:'',
menuCode:'',
type:'',
menuJumpUrl:''
})
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 onClose = () => {
visible.value = false;
formRef.value.resetFields();
};
//菜单类型按钮切换
const chanageMenuType = (e:any,typeMenu:any)=>{
console.log("1444444444444443333333333333333333333333333333333333")
let currentType = null;
if(e && e.target){
currentType = e.target.value;
}
if(typeMenu){
currentType = typeMenu;
}
console.log(currentType);
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;
}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;
}else{//按钮
menuNameIsshow.value = false;
preMenuIsshow.value = true;
btnPermissIsshow.value = true;
authorMarkIsshow.value = true;
sortIsshow.value = false;
menuCodeIsshow.value = false;
menuRouteIsshow.value = false;
}
}
// 点击确定提交
const onSubmit = () => {
formRef.value
.validate()
.then(() => {
console.log('values1111111111111');
console.log(formState)
console.log(toRaw(formState))
//请求添加接口提交数据
let params={
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
}
if(menuRadioType.value==3){
params.code = formState.value.authorizationMark;
params
}
return
http.post(menuS.queryMenuPageAdd, params).then(() => {
NsMessage.success('操作成功');
});
// 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,
})) : []
}));
});
}
//展示icon图标集
const showIconMenu = (data:any)=>{
refIconPicker.value.isIconOpenToggle(formState.value.menuIcon);
}
const getSonData = (data:any) => {
// formState.icon = data;
console.log("子组件中的数据：",data)
if(data){
formState.value.menuIcon = data;
}else{
refIconPicker.value.isIconData();
}
}
const toggle = (type:any,record:any)=>{
visible.value = !visible.value;
if(type==1){//新增
drawerTitele.value = '新增菜单';
}else if(type==2){//编辑
drawerTitele.value = '编辑菜单';
}
//如果record有值，说明是编辑或者从有数据条目中点击新增编辑过来的
if(record){
if(record.type==1){//一级菜单
formState.value.previousMenu = record.code;
if(type==1){//新增
menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
chanageMenuType(null,2);
}else{//编辑
menuRadioType.value = 1;
chanageMenuType(null,1);
}
}else if(record.type==2){//子菜单
formState.value.previousMenu = record.code;
if(type==1){
menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
}else{
menuRadioType.value = 2;
}
chanageMenuType(null,2);
}else if(record.type==3){//按钮
formState.value.previousMenu = record.code;
if(type==1){
menuRadioType.value = 2;//如果是一级菜单进来应该是添加子菜单
chanageMenuType(null,2);
}else{
menuRadioType.value = 3;
chanageMenuType(null,3);
}
}
}
}
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>