系统菜单部分功能及planToAdd文件中的config.ts文件修改
This commit is contained in:
duyufeng
@@ -4,7 +4,11 @@ import { http } from '/nerv-lib/util';
|
||||
import { getEnum } from '/@/api';
|
||||
import { NsMessage } from '/nerv-lib/component';
|
||||
|
||||
const enumData: any = await getEnum({ params: { enumType: 'CtrlDeviceType' } });
|
||||
// const enumData: any = await getEnum({ params: { enumType: 'CtrlDeviceType' } });
|
||||
//由于打包生产环境编译时await报错，故改为return形式
|
||||
const enumData: any = ()=>{
|
||||
return getEnum({ params: { enumType: 'CtrlDeviceType' } })
|
||||
}
|
||||
export const tableConfig = (
|
||||
orgId: any,
|
||||
projectId: any,
|
||||
|
||||
173
hx-ai-intelligent/src/view/systemManage/systemMenu/config.ts
Normal file
173
hx-ai-intelligent/src/view/systemManage/systemMenu/config.ts
Normal file
@@ -0,0 +1,173 @@
|
||||
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: { orgId },
|
||||
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: 'menuName',
|
||||
key: 'menuName',
|
||||
},
|
||||
{
|
||||
title: '菜单类型',
|
||||
dataIndex: 'menuType',
|
||||
key: 'menuType',
|
||||
},
|
||||
{
|
||||
title: '图标',
|
||||
dataIndex: 'menuIcon',
|
||||
key: 'menuIcon',
|
||||
},
|
||||
{
|
||||
title: '路由',
|
||||
dataIndex: 'menuRouter',
|
||||
key: 'menuRouter',
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sort',
|
||||
key: 'sort',
|
||||
}
|
||||
],
|
||||
formConfig: {
|
||||
schemas: [
|
||||
{
|
||||
field: 'menuName',
|
||||
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: 'key',
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,312 @@
|
||||
<!-- 系统菜单的新增、编辑 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="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 { NsMessage } from '/nerv-lib/component';
|
||||
const orgId = ref('');
|
||||
const result = JSON.parse(sessionStorage.getItem('ORGID')!);
|
||||
orgId.value = result;
|
||||
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 {
|
||||
orgId:any,
|
||||
menuName: string;
|
||||
previousMenu:string;
|
||||
routePath:string;
|
||||
menuSort:string;
|
||||
perissionBtn:string;
|
||||
authorizationMark:string;
|
||||
menuIcon:string;
|
||||
menuCode:string;
|
||||
type:string;//菜单类型
|
||||
}
|
||||
const formState = ref<FormState>({
|
||||
orgId:'',
|
||||
menuName:'',
|
||||
previousMenu:'',
|
||||
routePath:'',
|
||||
menuSort:'',
|
||||
perissionBtn:'',
|
||||
authorizationMark:'',
|
||||
menuIcon:'',
|
||||
menuCode:'',
|
||||
type:''
|
||||
})
|
||||
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;
|
||||
// formState.value = {
|
||||
// orgId: orgId.value,
|
||||
// }
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
//菜单类型按钮切换
|
||||
const chanageMenuType = (e:any)=>{
|
||||
let currentType = e.target.value;
|
||||
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('values', formState, toRaw(formState));
|
||||
console.log(formState)
|
||||
console.log(toRaw(formState))
|
||||
// emit("editObject",formState)
|
||||
})
|
||||
}
|
||||
//获取菜单列表
|
||||
const getMenuList= ()=>{
|
||||
let temporaryData = [
|
||||
{
|
||||
key: 0,
|
||||
menuName: '首页',
|
||||
menuType: 60,
|
||||
menuIcon:'icon',
|
||||
menuRouter: '/dashboard',
|
||||
sort:0,
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
menuName: '碳排管理',
|
||||
menuType: 60,
|
||||
menuIcon:'icon',
|
||||
menuRouter: '/dashboard',
|
||||
sort:1,
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
menuName: '碳排统计',
|
||||
menuType: 42,
|
||||
menuIcon:'icon',
|
||||
menuRouter: '/dashboard1',
|
||||
sort:2,
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
menuName: '碳排因子库',
|
||||
menuType: 42,
|
||||
menuIcon:'icon',
|
||||
menuRouter: '/dashboard3',
|
||||
sort:3,
|
||||
children: [
|
||||
{
|
||||
key: 121,
|
||||
menuName: '新增按钮',
|
||||
menuType: 42,
|
||||
menuIcon:'icon',
|
||||
menuRouter: '/dashboard4',
|
||||
sort:4,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 13,
|
||||
menuName: '碳盘查',
|
||||
menuType: 60,
|
||||
menuIcon:'icon',
|
||||
menuRouter: '/dashboard',
|
||||
sort:5,
|
||||
children: [
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
menuName: '系统管理',
|
||||
menuType: 60,
|
||||
menuIcon:'icon',
|
||||
menuRouter: '/dashboard',
|
||||
sort:6,
|
||||
},
|
||||
]
|
||||
treeData.value = temporaryData.map(item=>({
|
||||
value: item.key,
|
||||
label: item.menuName,
|
||||
children: item.children ? item.children.map(child => ({
|
||||
value: child.key,
|
||||
label: child.menuName,
|
||||
children: child.children ? child.children.map(childchild => ({
|
||||
value: childchild.key,
|
||||
label: childchild.menuName,
|
||||
})):[]
|
||||
})):[]
|
||||
}))
|
||||
// fetch(group.queryDeviceGroupTree, { energyType: 'ELECTRICITY_USAGE',orgId: orgId.value }).then((res) => {
|
||||
// treeData.value = res.data
|
||||
// treeData.value = treeData.value.map(item => ({
|
||||
// value: item.id,
|
||||
// label: item.pointName,
|
||||
// children: item.children ? item.children.map(child => ({
|
||||
// value: child.id,
|
||||
// label: child.pointName
|
||||
// })) : []
|
||||
// }));
|
||||
// });
|
||||
}
|
||||
//展示icon图标集
|
||||
const showIconMenu = (data:any)=>{
|
||||
console.log("展示icon图标集合")
|
||||
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 = true;
|
||||
if(type==1){//新增
|
||||
drawerTitele.value = '新增菜单';
|
||||
}else if(type==2){//编辑
|
||||
drawerTitele.value = '编辑菜单';
|
||||
console.log(record)
|
||||
}
|
||||
}
|
||||
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>
|
||||
43
hx-ai-intelligent/src/view/systemManage/systemMenu/index.vue
Normal file
43
hx-ai-intelligent/src/view/systemManage/systemMenu/index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<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">
|
||||
</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;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user