系统菜单部分功能及planToAdd文件中的config.ts文件修改
This commit is contained in:
duyufeng
176
hx-op/src/view/systemManage/systemMenu/config.ts
Normal file
176
hx-op/src/view/systemManage/systemMenu/config.ts
Normal file
@@ -0,0 +1,176 @@
|
||||
import { http } from '/nerv-lib/util';
|
||||
import { ref } from 'vue';
|
||||
import { menuS } from '/@/api/menuSystem';
|
||||
// interface DataItem {
|
||||
// key: number;
|
||||
// menuName: string;
|
||||
// menuType: number;
|
||||
// menuIcon: string;
|
||||
// menuRouter:string;
|
||||
// children?: DataItem[];
|
||||
// }
|
||||
// const data: DataItem[] = [
|
||||
// {
|
||||
// key: 1,
|
||||
// menuName: 'John Brown sr.',
|
||||
// menuType: 60,
|
||||
// menuIcon:'icon',
|
||||
// menuRouter: '/dashboard',
|
||||
// children: [
|
||||
// {
|
||||
// key: 11,
|
||||
// menuName: 'John Brown',
|
||||
// menuType: 42,
|
||||
// menuIcon:'icon',
|
||||
// menuRouter: '/dashboard1',
|
||||
// },
|
||||
// {
|
||||
// key: 12,
|
||||
// menuName: 'John Brown',
|
||||
// menuType: 42,
|
||||
// menuIcon:'icon',
|
||||
// menuRouter: '/dashboard3',
|
||||
// children: [
|
||||
// {
|
||||
// key: 121,
|
||||
// menuName: 'John Brown',
|
||||
// menuType: 42,
|
||||
// menuIcon:'icon',
|
||||
// menuRouter: '/dashboard4',
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: 13,
|
||||
// menuName: 'John Brown sr.',
|
||||
// menuType: 60,
|
||||
// menuIcon:'icon',
|
||||
// menuRouter: '/dashboard',
|
||||
// children: [
|
||||
// ],
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
// {
|
||||
// key: 2,
|
||||
// menuName: 'John Brown sr.',
|
||||
// menuType: 60,
|
||||
// menuIcon:'icon',
|
||||
// menuRouter: '/dashboard',
|
||||
// },
|
||||
// ];
|
||||
export const tableConfig = (orgId:any,SystemAddEdit:any) => {
|
||||
return ref({
|
||||
title: '系统菜单',
|
||||
api: menuS.queryMenuPage,
|
||||
params: {projectId:null},
|
||||
pagination: false,
|
||||
headerActions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'systemMenuAdd',
|
||||
type: 'primary',
|
||||
handle: () => {
|
||||
console.log("12345")
|
||||
SystemAddEdit.value.toggle(1);
|
||||
// editConfigureDeviceAlarms.value.toggle(null, configureDeviceAlarmsData.value);
|
||||
},
|
||||
},
|
||||
],
|
||||
// rowSelection: {
|
||||
// checkStrictly: false,
|
||||
// onChange: (selectedRowKeys: (string | number)[], selectedRows: DataItem[]) => {
|
||||
// console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
|
||||
// },
|
||||
// onSelect: (record: DataItem, selected: boolean, selectedRows: DataItem[]) => {
|
||||
// console.log(record, selected, selectedRows);
|
||||
// },
|
||||
// onSelectAll: (selected: boolean, selectedRows: DataItem[], changeRows: DataItem[]) => {
|
||||
// console.log(selected, selectedRows, changeRows);
|
||||
// },
|
||||
// },
|
||||
columns:[
|
||||
{
|
||||
title: '菜单名称',
|
||||
dataIndex: 'label',
|
||||
key: 'label',
|
||||
},
|
||||
{
|
||||
title: '菜单类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'icon',
|
||||
key: 'icon',
|
||||
align:'center'
|
||||
},
|
||||
{
|
||||
title: '路由',
|
||||
dataIndex: 'backApi',
|
||||
key: 'backApi',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
key: 'sort',
|
||||
align:'center'
|
||||
}
|
||||
],
|
||||
formConfig: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'label',
|
||||
label: '菜单名称',
|
||||
component: 'NsInput',
|
||||
defaultValue: '',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
placeholder: '请输入菜单名称',
|
||||
},
|
||||
}
|
||||
],
|
||||
params: {},
|
||||
},
|
||||
columnActions: {
|
||||
title: '操作',
|
||||
actions: [
|
||||
{
|
||||
label: '新增',
|
||||
name: 'userAdd',
|
||||
handle: (record: any) => {
|
||||
console.log("我是编辑区域11111")
|
||||
console.log(record)
|
||||
SystemAddEdit.value.getMenuList();//请求列表的菜单数据
|
||||
SystemAddEdit.value.toggle(1,record);
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '编辑',
|
||||
name: 'userEdit',
|
||||
handle: (record: any) => {
|
||||
SystemAddEdit.value.toggle(2,record);
|
||||
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '删除',
|
||||
name: 'userDelete',
|
||||
dynamicParams: { id: 'id' },
|
||||
confirm: true,
|
||||
isReload: true,
|
||||
handle: (data: any) => {
|
||||
// http.post(energyAlarms.del, { id: data.id, orgId: data.orgId }).then(() => {
|
||||
// NsMessage.success('操作成功');
|
||||
// mainEnergyAlarmConfig.value?.nsTableRef.reload();
|
||||
// mainRef.value?.nsTableRef.reload();
|
||||
// });
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
rowKey: 'code',
|
||||
})
|
||||
}
|
||||
296
hx-op/src/view/systemManage/systemMenu/editSystemMenu.vue
Normal file
296
hx-op/src/view/systemManage/systemMenu/editSystemMenu.vue
Normal 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>
|
||||
69
hx-op/src/view/systemManage/systemMenu/index.vue
Normal file
69
hx-op/src/view/systemManage/systemMenu/index.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<!-- <a-table :columns="columns" :data-source="data" :row-selection="rowSelection" /> -->
|
||||
<div style="padding:10px auto;">
|
||||
<ns-view-list-table v-bind="config" :model="data" ref="mainRef">
|
||||
<template #bodyCell="{ record, column }">
|
||||
<template v-if="column.dataIndex === 'type'">
|
||||
<a-button type="primary" class="oneLevelMenu" v-if="record.type === '1'">一级菜单</a-button>
|
||||
<a-button class="childMenu" type="primary" v-else-if="record.type === '2'">子菜单</a-button>
|
||||
<a-button class="btnMenu" :data-aaavvv="record.type" type="primary" v-else>按钮</a-button>
|
||||
</template>
|
||||
<template v-else-if="column.dataIndex === 'icon'">
|
||||
<component :is="$icons[record.icon]" />
|
||||
</template>
|
||||
</template>
|
||||
</ns-view-list-table>
|
||||
</div>
|
||||
<!-- 新增or编辑界面 -->
|
||||
<editSystemMenu ref="SystemAddEdit" @editObject="editObject" />
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { tableConfig } from './config';
|
||||
import { computed, nextTick, onMounted, ref ,unref} from 'vue';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
import editSystemMenu from './editSystemMenu.vue';
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
const SystemAddEdit = ref({});
|
||||
const config = tableConfig(orgId.value,SystemAddEdit);
|
||||
|
||||
// 表格相关数据
|
||||
const data = ref([]);//子组件数据修改时，父组件也跟着改变。
|
||||
const mainRef = ref();//可以定义一个函数使用mainRef.value来调用子组件的方法。
|
||||
defineOptions({
|
||||
name: 'systemMenuIndex', // 与页面路由name一致缓存才可生效
|
||||
});
|
||||
onMounted(() => {
|
||||
});
|
||||
//编辑新增成功时刷新表格
|
||||
const editObject = (val:any)=>{
|
||||
mainRef.value?.nsTableRef.reload();
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.ns-table-search),
|
||||
:deep(.ns-part-tree),
|
||||
:deep(.ns-table-main) {
|
||||
box-shadow: @ns-content-box-shadow;
|
||||
}
|
||||
:deep(.ns-basic-table){
|
||||
padding-bottom:15px;
|
||||
}
|
||||
.oneLevelMenu{
|
||||
background-color: #2778FF;
|
||||
border-color:#2778FF;
|
||||
}
|
||||
.childMenu{
|
||||
background-color: #009688;
|
||||
border-color:#009688;
|
||||
}
|
||||
.btnMenu{
|
||||
background-color: #FFB800;
|
||||
border-color:#FFB800;
|
||||
}
|
||||
:deep(.ant-btn){
|
||||
padding:0px 8px;
|
||||
height:28px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user